/* ============================================================
   Turismo Cáceres — COMPONENTES DE PORTADA
   hero · intro-band · experiencias · editorial · cifras ·
   destinos · gastronomía · eventos · plan-cta · newsletter ·
   timeline-band
   ============================================================ */
/* =========================================================
   HERO — PORTADA PRINCIPAL
   ENFOLD: "Fullscreen Slider" (av_fullscreen_slider) o
   "Revolution Slider" con overlay y parallax.
   Fotografia principal: Vista aérea/nocturna del casco histórico.
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 64px 64px;
}
/* Slider del hero: varias fotos con fundido cruzado + ligero Ken Burns */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
  background-color: #3a3228;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.4s ease, transform 7.5s ease;
}
/* Puntos de navegación del slider */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 11px;
}
.hero-dot {
  width: 34px;
  height: 3px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.35);
  transition: background 0.35s;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-dot.active { background: var(--gold); }
/* Scrim DIRECCIONAL: oscurece sólo la columna izquierda (donde va el
   texto) + base inferior suave. El lado derecho y la parte superior
   de la fotografía quedan limpios y protagonistas. */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      rgba(5, 3, 2, 0.86) 0%,
      rgba(5, 3, 2, 0.66) 26%,
      rgba(5, 3, 2, 0.36) 46%,
      rgba(5, 3, 2, 0.12) 64%,
      rgba(5, 3, 2, 0) 80%),
    linear-gradient(to top,
      rgba(5, 3, 2, 0.42) 0%,
      rgba(5, 3, 2, 0.1) 22%,
      rgba(5, 3, 2, 0) 42%);
}

/* Texto del hero directamente sobre la foto (sin caja). */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 0;
}
.hero-eyebrow {
  transition: opacity .4s ease, transform .5s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.07;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  margin-bottom: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero-desc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  line-height: 1.7;
  margin-bottom: 38px;
}
.cta-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* Texto OSCURO sobre dorado: 5.4:1 (AA). El blanco sobre dorado
   sólo da ~3:1 y no cumple para texto pequeño. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 17px 38px;
  transition: background 0.3s, gap 0.3s;
}
.btn-primary:hover { background: var(--gold-hi); gap: 16px; }  /* aclara, mantiene contraste */

/* Botón fantasma: relleno translúcido oscuro (sin desenfoque) + borde
   nítido para que sea legible sobre la fotografía. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20,14,10,0.3);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16.5px 38px;
  transition: all 0.3s;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.14); }

/* Indicador de scroll */
.scroll-hint {
  position: absolute;
  right: 64px;
  bottom: 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-hint span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.scroll-line {
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
}
.scroll-line::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  animation: lineScroll 1.8s ease-in-out infinite;
}
@keyframes lineScroll {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* =========================================================
   INTRO BAND
   ENFOLD: "Color Section" (av_section) con fondo oscuro,
   2 columnas (av_one_third + av_two_third).
   ========================================================= */
.intro-band {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  padding: 88px 64px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 70px;
  align-items: center;
}
/* Silueta grande y tenue del motivo del logo (arcos) como fondo */
.intro-silhouette {
  position: absolute;
  right: -70px;
  bottom: -50px;
  width: 640px;
  height: auto;
  color: #fff;
  opacity: 0.055;
  z-index: 0;
  pointer-events: none;
}
.intro-aside, .intro-text { position: relative; z-index: 1; }

/* Motivo de arcos del logo sobre la etiqueta izquierda */
.intro-mark {
  display: block;
  width: 78px;
  height: auto;
  color: var(--gold);
  margin-bottom: 22px;
}
.intro-label {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--gold);
  line-height: 1.3;
}
.intro-text h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.2vw, 44px);
  color: #fff;
  line-height: 1.32;
  margin-bottom: 20px;
}
.intro-text p {
  font-size: 17px;
  font-weight: 300;
  color: rgba(255,255,255,0.68);
  line-height: 1.85;
  max-width: 680px;
}
.intro-text .intro-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(184,149,106,0.35);
  padding-bottom: 3px;
  transition: border-color 0.3s, gap 0.3s;
}
.intro-text .intro-link:hover { border-color: var(--gold); gap: 16px; }

/* =========================================================
   SECCIÓN: EXPERIENCIAS
   ENFOLD: Portfolio Grid (av_portfolio) — 3 columnas,
   efecto hover con overlay.
   ========================================================= */
.experiences { padding: 100px 64px; background: var(--cream); }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section-label::before {
  content: '';
  width: 30px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.section-header h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  color: var(--dark);
  line-height: 1.15;
}
.link-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark);
  border-bottom: 1px solid var(--dark);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: 4px;
}
.link-all:hover { color: var(--gold); border-color: var(--gold); }

/* Carrusel de experiencias */
.exp-carousel { position: relative; }
.exp-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.exp-track::-webkit-scrollbar { display: none; }
.exp-card {
  position: relative;
  flex: 0 0 calc((100% - 28px) / 3);   /* 3 visibles en escritorio */
  scroll-snap-align: start;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

/* Controles del carrusel (en la cabecera de sección) */
.exp-controls { display: flex; align-items: center; gap: 12px; align-self: flex-end; }
.ml-3{ margin-left: 10px;}

/* El enlace «ver todas», dentro de los controles.

   El diseño lo baja con `align-self: flex-end` y `margin-bottom: 4px`, que le
   deja el subrayado 4 px por encima del borde inferior de los botones: ni
   alineado con ellos ni centrado, flotando. Junto a dos botones cuadrados de
   46 px lo que lee bien es centrarlo, y con algo más de aire que los 10 px del
   `.ml-3`, que lo dejaban pegado a la flecha.

   Va acotado a `.exp-controls` porque `.link-all` lo comparten otras secciones
   —zonas, agenda— donde sí cuelga del borde inferior de la cabecera y ahí el
   ajuste del diseño es el correcto. */

.exp-controls .link-all {
  align-self: center;
  margin-bottom: 0;
  margin-left: 8px;      /* + los 12px de gap = 20px de separación real */
}
.exp-nav {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--dark);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}
.exp-nav:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.exp-nav:disabled { opacity: 0.3; cursor: default; }
.exp-nav:disabled:hover { background: #fff; color: var(--dark); border-color: var(--border); }
.exp-nav svg { width: 18px; height: 18px; }
.exp-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #5a4e42;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.exp-card:hover .exp-card-img { transform: scale(1.07); }
.exp-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,2,0.82) 0%, rgba(5,4,2,0.1) 55%, transparent 75%);
  transition: opacity 0.4s;
}
.exp-card:hover .exp-card-overlay { opacity: 0.95; }
.exp-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 30px;
}
.exp-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gold);
  padding: 5px 11px;
  margin-bottom: 12px;
}
.exp-card-body h3 {
  font-size: 24px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
}
.exp-card-body p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.35s 0.1s;
}
.exp-card:hover .exp-card-body p { max-height: 90px; opacity: 1; }
.exp-arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s, transform 0.35s;
}
.exp-card:hover .exp-arrow { opacity: 1; transform: translateY(0); }

/* =========================================================
   EDITORIAL / MAGAZINE LAYOUT
   ENFOLD: "Magazine" element (av_magazine) — 1 grande +
   2 apiladas. Para el bloque grande, av_magazine_item
   con span de columnas.
   ========================================================= */
.editorial {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 700px;
}
.ed-main {
  position: relative;
  overflow: hidden;
}
.ed-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #4a3f35;
  transition: transform 0.7s ease;
}
.ed-main:hover .ed-main-img { transform: scale(1.04); }
.ed-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5,4,2,0.94) 0%,
    rgba(5,4,2,0.62) 32%,
    rgba(5,4,2,0.22) 60%,
    rgba(5,4,2,0) 82%);
}
.ed-main-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 52px 52px;
}
.ed-main-body .section-label {
  margin-bottom: 10px;
  color: var(--gold-lt);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.ed-main-body h2 {
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
  line-height: 1.2;
  margin-bottom: 14px;
}
.ed-main-body p {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  line-height: 1.75;
  max-width: 420px;
  margin-bottom: 26px;
}

.ed-stack { display: grid; grid-template-rows: 1fr 1fr; }
.ed-small {
  position: relative;
  overflow: hidden;
}
.ed-small-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #5c4e3a;
  transition: transform 0.7s ease;
}
.ed-small:nth-child(2) .ed-small-img { background-color: #3a4a40; }
.ed-small:hover .ed-small-img { transform: scale(1.06); }
.ed-small-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5,4,2,0.9) 0%,
    rgba(5,4,2,0.55) 38%,
    rgba(5,4,2,0.15) 65%,
    rgba(5,4,2,0) 88%);
}
.ed-small-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ed-small-body .section-label {
  margin-bottom: 8px;
  color: var(--gold-lt);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.ed-small-body h3 {
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
  line-height: 1.2;
}
/* Enlace de tarjeta pequeña (Cultura / Festivales) */
.ed-small { cursor: pointer; display: block; }
.ed-small-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, gap 0.3s ease;
}
.ed-small:hover .ed-small-link,
.ed-small:focus-within .ed-small-link { opacity: 1; transform: translateY(0); }
.ed-small:hover .ed-small-link { gap: 13px; }
.ed-small-link svg { width: 13px; height: 13px; }

/* =========================================================
   STATS / CIFRAS
   ENFOLD: "Animated Numbers" (av_animated_numbers) dentro
   de av_section con color de fondo dorado.
   ========================================================= */
.stats {
  background: var(--gold);
  padding: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.22);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-head);
  font-size: 56px;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* =========================================================
   DESTINOS / RUTAS
   ENFOLD: "Image Grid" (av_image_hotspot o av_gallery)
   con imagen de fondo de mapa/paisaje y tarjetas flotantes.
   Se puede implementar con av_section + av_one_third cols.
   ========================================================= */
.destinos { padding: 100px 64px; background: #fff; }

.destinos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 52px;
}
.destino-card {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

/* --- Zonas en carrusel ------------------------------------------------------
   La otra disposición del elemento «Zonas turísticas»: en vez de pasar a una
   segunda fila a partir de la quinta, todas en una línea con flechas.

   Reutiliza la mecánica del carrusel de experiencias —misma pista con
   desbordamiento y anclaje de desplazamiento, mismas flechas de la cabecera—,
   así que las dos secciones se comportan igual y comparten el JS.

   Cuántas se ven a la vez lo decide el elemento con una clase destinos--pv-N,
   que fija la variable --tc-per-view. Va por clase y no por estilo en línea
   para que los escalones responsive puedan cambiarla. El 2px del hueco es el
   mismo de la rejilla, y de ahí que el ancho de cada tarjeta descuente los
   huecos que quedan a la vista. */

.destinos--pv-3 { --tc-per-view: 3; }
.destinos--pv-4 { --tc-per-view: 4; }
.destinos--pv-5 { --tc-per-view: 5; }
.destinos--pv-6 { --tc-per-view: 6; }

.destinos-track {
  display: flex;
  gap: 2px;
  margin-top: 52px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.destinos-track::-webkit-scrollbar { display: none; }

.destinos-track .destino-card {
  flex: 0 0 calc((100% - (var(--tc-per-view, 4) - 1) * 2px) / var(--tc-per-view, 4));
  scroll-snap-align: start;
}

/* En la rejilla los fondos de reserva se alternan por posición; en el carrusel
   hay muchas más tarjetas, así que el ciclo se repite cada cuatro. */
.destinos-track .destino-card:nth-child(4n+1) .destino-img { background-color: #4e5048; }
.destinos-track .destino-card:nth-child(4n+2) .destino-img { background-color: #4a3e38; }
.destinos-track .destino-card:nth-child(4n+3) .destino-img { background-color: #3d4840; }
.destinos-track .destino-card:nth-child(4n)   .destino-img { background-color: #503a2e; }

.destino-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #4e5048;
  transition: transform 0.65s ease;
}
.destino-card:nth-child(2) .destino-img { background-color: #4a3e38; }
.destino-card:nth-child(3) .destino-img { background-color: #3d4840; }
.destino-card:nth-child(4) .destino-img { background-color: #503a2e; }
.destino-card:hover .destino-img { transform: scale(1.07); }
.destino-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,2,0.78) 0%, transparent 50%);
}
.destino-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
}
.destino-num {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 6px;
}
.destino-body h3 {
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}
.destino-body span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

/* =========================================================
   GASTRONOMÍA — SECCIÓN HIGHLIGHT
   ENFOLD: av_section fullwidth con imagen de fondo y
   av_textblock + av_button superpuestos (2 cols).
   ========================================================= */
.gastro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}
.gastro-img-wrap {
  position: relative;
  overflow: hidden;
}
.gastro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #3a2e20;
  transition: transform 0.7s ease;
}
.gastro-img-wrap:hover .gastro-img { transform: scale(1.05); }
.gastro-content {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 68px;
}
.gastro-content .section-label { margin-bottom: 16px; }
.gastro-content h2 {
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
  line-height: 1.25;
  margin-bottom: 20px;
}
.gastro-content p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.85;
  margin-bottom: 36px;
}
.gastro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.tag-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 14px;
  transition: all 0.3s;
}
.tag-pill:hover { border-color: var(--gold); color: var(--gold); }

/* =========================================================
   EVENTOS
   ENFOLD: "Events Calendar" widget (av_events_calendar)
   en lista + imagen lateral propia.
   ========================================================= */
.events-visual{display:none!important}
.events { padding: 100px 64px;
  background: var(--cream);
}
.events h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.15; }
.events-layout {
  display: grid;
  grid-template-columns: 1fr;   /* agenda a todo el ancho */
  gap: 56px;
  align-items: start;
}

.event-list { margin-top: 52px; }
.event-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: transform 0.3s;
  cursor: pointer;
}
.event-item:first-child { border-top: 1px solid var(--border); }
.event-item:hover { transform: translateX(8px); }

.event-date { text-align: center; padding-top: 2px; }
.event-date .d {
  font-family: var(--font-head);
  font-size: 34px;
  color: var(--dark);
  line-height: 1;
}
.event-date .m {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}
.event-info h4 {
  font-size: 17px;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 5px;
}
.event-info .ev-place {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray);
}
.ev-cat {
  display: inline-block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(184,149,106,0.45);
  padding: 3px 10px;
}

.events-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* El fondo cálido lo aporta la propia sección (mitad derecha) */
  padding-left: 8px;
}

/* Tarjeta de clima */
.weather-card {
  background: var(--dark);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.weather-card .w-ico { width: 48px; height: 48px; color: var(--gold-lt); flex-shrink: 0; }
.weather-temp {
  font-family: var(--font-head);
  font-size: 46px;
  line-height: 1;
  color: #fff;
}
.weather-meta { display: flex; flex-direction: column; gap: 5px; }
.weather-place {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.weather-desc { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.4; }

/* Accesos rápidos en cards */
.quick-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 8px 0 2px;
}
.events-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.events-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 122px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.events-tile:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(46,11,12,0.08);
}
.events-tile .t-ico { width: 27px; height: 27px; color: var(--gold); }
.events-tile .t-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-top: auto;
}
.events-tile .t-arrow {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 15px;
  height: 15px;
  color: var(--gray);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.events-tile:hover .t-arrow { opacity: 1; transform: translateX(0); color: var(--gold); }

/* =========================================================
   PLANIFICA TU VISITA — CTA BAND
   ENFOLD: av_section con imagen de fondo (parallax ON) +
   av_textblock + av_button centrados.
   ========================================================= */
.plan-cta {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.plan-cta-bg {
  position: absolute;
  inset: 0;
  /* La imagen la inyecta el elemento ALB como variable inline */
  background-image: var(--tc-cta-bg, none);
  background-size: cover;
  background-position: center;
  background-color: #35302a;
}
.plan-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.72);
}
.plan-cta-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0 40px;
}
.plan-cta-content .section-label { margin-bottom: 18px; }
.plan-cta-content h2 {
  font-size: clamp(32px, 4.5vw, 58px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 18px;
}
.plan-cta-content p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  margin-bottom: 38px;
}

/* =========================================================
   NEWSLETTER BAND
   ENFOLD: av_section color + av_textblock + av_contact_form
   (1 campo email + botón inline).
   ========================================================= */
.newsletter {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  border-top: 1px solid var(--border);
}
/* Grafismo de fondo: arcos del logo, tenue (en dorado) */
.newsletter-bg {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: auto;
  color: var(--gold);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.newsletter > div,
.newsletter-form { position: relative; z-index: 1; }
.newsletter h3 {
  font-size: clamp(26px, 3vw, 40px);
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 14px;
}
.newsletter p {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray);
  line-height: 1.75;
}
.newsletter-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
}
#top .newsletter-form input[type="email"]{
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--dark);
  background: #fff;
}
#top .newsletter-form input::placeholder{ color: #aaa; }
.newsletter-form button {
  background: var(--dark);
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 28px;
  cursor: pointer;
  transition: background 0.3s;
}
.newsletter-form button:hover { background: var(--gold); }


  /* ===== MIX Cobre×Editorial: timeline, agenda arcos, newsletter ===== */
.timeline-band{background:var(--gold);padding:72px 64px;color:#fff}
.tl-head{text-align:center;max-width:760px;margin:0 auto 44px}
.tl-head .section-label{color:rgba(255,255,255,.85)}
.tl-head h2{font-family:var(--font-head);font-size:clamp(26px,3.2vw,42px);color:#fff;line-height:1.15;margin-top:8px}
.tl-steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);max-width:1200px;border-top:1px solid rgba(255,255,255,.35)}
.tl-steps li{position:relative;padding:34px 20px 0 0}
.tl-steps li::before{content:"";position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;background:var(--dark);border:2px solid #fff}
.tl-yr{display:block;font-family:var(--font-head);font-size:clamp(20px,2.2vw,28px);color:var(--dark)}
.tl-steps h3{font-family:var(--font-head);font-size:17px;margin:8px 0 6px;color:#fff}
.tl-steps p{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.85);padding-right:12px}
@media(max-width:860px){.timeline-band{padding:56px 40px}.tl-steps{grid-template-columns:1fr 1fr;gap:8px 0}.tl-steps li{padding-bottom:24px}}
@media(max-width:520px){.timeline-band{padding:48px 24px}.tl-steps{grid-template-columns:1fr}}

.event-arches{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 60px}
.arch-card{min-width:0}
.arch-card__m{max-width:230px;margin:0 auto}
.arch-card{display:block;text-decoration:none;color:inherit}
.arch-card__m{position:relative;aspect-ratio:3/4;overflow:hidden;background:#eee;clip-path:url(#archRound);-webkit-clip-path:url(#archRound)}
.arch-card:nth-child(3n+2) .arch-card__m{clip-path:url(#archKey);-webkit-clip-path:url(#archKey)}
.arch-card:nth-child(3n) .arch-card__m{clip-path:url(#archPoint);-webkit-clip-path:url(#archPoint)}
.arch-card__m img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.arch-card:hover .arch-card__m img{transform:scale(1.06)}
.arch-card__date{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--dark);font-family:var(--font-head);text-align:center;border-radius:6px;padding:6px 12px;line-height:1;z-index:2;box-shadow:0 6px 16px rgba(46,11,12,.3)}
.arch-card__date .d{font-size:22px;display:block}
.arch-card__date .m{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body);margin-top:3px}
.arch-card__b{padding:14px 6px 0;text-align:center}
.arch-card__b h4{font-family:var(--font-head);font-size:17px;line-height:1.2;margin:6px 0 0;color:var(--dark)}
.arch-card__b .ev-place{font-size:12.5px;color:var(--gray);margin:6px 0 0}
@media(max-width:960px){.event-arches{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}}
@media(max-width:520px){.event-arches{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ===== Newsletter · diseño «Editorial Moderno»: bloque burdeos + floating labels ===== */
.newsletter{background:var(--cream)!important;display:block!important;padding:clamp(64px,8vw,104px) 64px!important;overflow:visible;border-top:1px solid var(--border)}
.newsletter-bg{display:none!important}
.news{position:relative;z-index:1;max-width:1180px;margin:0 auto;background:#7C2629;color:#fff;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;box-shadow:0 30px 64px -30px rgba(46,11,12,.55)}
.news__body{padding:clamp(36px,4vw,60px)}
.news__body .section-label{color:#E3A851;margin-bottom:14px}
.news__body h3{font-family:var(--font-head);font-size:clamp(28px,3.4vw,42px);color:#fff;line-height:1.1;margin-bottom:12px}
.news__body > p{color:#F0D9D2;font-size:16px;line-height:1.7;margin-bottom:28px;max-width:430px}
.nl-form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.nl-field{position:relative}
.nl-field label{position:absolute;left:16px;top:15px;color:#E6C7C0;font-size:15px;pointer-events:none;transition:.2s ease;font-family:var(--font-body)}
#top .nl-field input{width:100%;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.3);border-radius:0;padding:24px 16px 9px;color:#fff;font-family:var(--font-body);font-size:15px;transition:border-color .25s,background .25s}
#top .nl-field input:focus{outline:none;border-color:#E3A851;background:rgba(255,255,255,.15)}
#top .nl-field input:focus+label,
#top .nl-field input:not(:placeholder-shown)+label{top:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#E3A851}
#top .nl-field input:user-invalid{border-color:#F3B0A6}
.nl-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.nl-btn{background:#fff;color:#7C2629;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 30px;border:none;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .2s ease,background .25s,color .25s}
.nl-btn:hover{transform:translateY(-2px);background:#E3A851;color:var(--dark)}
.nl-btn svg{width:16px;height:16px}
.nl-note{font-size:12.5px;color:#E6C7C0}
.nl-ok{display:none;align-items:center;gap:11px;font-size:16px;font-weight:600;font-family:var(--font-body);color:#fff;line-height:1.4;max-width:460px}
.nl-ok svg{width:24px;height:24px;color:#E3A851;flex-shrink:0}
.nl-form.done{display:none}
.nl-form.done + .nl-ok{display:flex}

/* --- El boletín con el plugin Newsletter ---------------------------------

   El formulario lleva las clases del plugin para que su JS lo reconozca, y con
   ellas entra su hoja de estilos:

     form.tnp-subscription { display: block; margin: 1em auto; max-width: 500px }

   Eso es elemento + clase, así que gana a `.nl-form` y dejaba el formulario en
   bloque: el `gap` seguía calculando 14 px pero no separaba nada —los dos campos
   se tocaban— y el `margin: auto` lo centraba en lugar de alinearlo a la
   izquierda. De ahí que estas reglas vayan con `#top` delante. */

#top .nl-form{display:flex;flex-direction:column;gap:20px;max-width:460px;margin:0}

/* El aviso de privacidad, en su propia línea. Compartiendo la fila con el botón
   quedaba estrangulado; `flex-basis:100%` lo baja, que para eso la fila ya
   envuelve. */
#top .nl-privacy{
  flex-basis:100%;
  display:flex;
  align-items:flex-start;
  gap:11px;
  cursor:pointer;
  margin-top:4px;
  font-size:13px;
  line-height:1.5;
  color:#fff;
}

/* El texto va en blanco explícito: el `color` heredado en esta caja acaba en el
   #444 del tema padre, y sobre el granate del bloque no se lee. */
#top .nl-privacy span{color:#fff}
#top .nl-privacy a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#top .nl-privacy a:hover{color:#E3A851;text-decoration-color:#E3A851}

/* La casilla, dibujada a mano y no con la del sistema: en ángulo recto y con el
   trazo del diseño, como el resto del bloque. */
#top .nl-privacy input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:18px;
  height:18px;

  /* El plugin le pone `max-width: 1em` a sus casillas «para arreglar temas mal
     hechos», y eso la recortaba de 18 a 13 px: es otra propiedad, así que
     declarar el ancho no bastaba. */
  max-width:none;

  flex-shrink:0;
  margin:2px 0 0;
  padding:0;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:0;
  background:rgba(255,255,255,.09);
  cursor:pointer;
  transition:background .2s,border-color .2s;
}

#top .nl-privacy input[type="checkbox"]:hover{border-color:#fff}

#top .nl-privacy input[type="checkbox"]:checked{
  background:#E3A851;
  border-color:#E3A851;
}

/* La marca de verificación: dos lados de un cuadrado girado, el mismo recurso
   que los chevrones del slider. */
#top .nl-privacy input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:2px;
  left:5px;
  width:5px;
  height:9px;
  border:solid #7C2629;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;
  transition:opacity .15s;
}

#top .nl-privacy input[type="checkbox"]:checked::after{opacity:1}

/* Foco visible por teclado, que sin la casilla del sistema se pierde. */
#top .nl-privacy input[type="checkbox"]:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* La respuesta del plugin. Su JS sustituye el interior del formulario por su
   propio mensaje —«revisa tu correo», «ya estabas suscrito»…—, que llega con el
   maquetado del plugin. Se le da el aire del bloque para que no cante: el
   formulario deja de ser una columna de campos y pasa a ser el mensaje. */

#top .nl-form .tnp-subscription-minimal,
#top .nl-form p{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.55;color:#fff}
#top .nl-form p a{color:#E3A851;text-decoration:underline;text-underline-offset:2px}
#top .nl-form p + p{margin-top:10px}

/* El plugin trae su propia hoja para .tnp; dentro del bloque granate manda el
   diseño. Sus campos, si algún día aparece uno suyo aquí, en ángulo recto. */
#top .newsletter .tnp input,
#top .newsletter .tnp button,
#top .newsletter .tnp .tnp-submit{border-radius:0}
.news__media{position:relative;min-height:320px}
.news__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(124,38,41,0) 40%,#7C2629 100%)}
@media(max-width:1024px){.newsletter{padding:72px 32px!important}}
@media(max-width:860px){.news{grid-template-columns:1fr}.news__media{min-height:220px;order:-1}.news__media::after{background:linear-gradient(0deg,rgba(124,38,41,0) 55%,#7C2629 100%)}}
@media(max-width:480px){.newsletter{padding:56px 20px!important}.news__body{padding:34px 24px}}
/* Gutter simétrico cómodo por debajo de 1200px (evita que el lado derecho se pegue al borde) */
.news>*{min-width:0}
.tl-steps li{min-width:0}
.events,.newsletter{padding-left:clamp(24px,5vw,64px)!important;padding-right:clamp(24px,5vw,64px)!important}

/* =========================================================
   COMPLEMENTOS DEL TEMA HIJO
   Variantes y estados que el diseño estático resolvía con
   estilos en línea o que sólo aparecen al gestionar el
   contenido desde WordPress.
   ========================================================= */

/* Sección destacada con la fotografía a la derecha. El marcado
   mantiene la foto primero (para que en móvil encabece el
   bloque) y aquí se intercambian las columnas en escritorio. */
.gastro--media-right .gastro-img-wrap { order: 2; }
.gastro--media-right .gastro-content  { order: 1; }

@media (max-width: 768px) {
  .gastro--media-right .gastro-img-wrap { order: 0; }
  .gastro--media-right .gastro-content  { order: 0; }
}

/* Enlace «ver toda la agenda», bajo la rejilla de eventos. */
.events-all { display: inline-block; margin-top: 36px; }

/* Cabecera de sección suelta (elemento del constructor). */
.tc-section-header-wrap { padding: 0 64px; }

@media (max-width: 1024px) { .tc-section-header-wrap { padding: 0 32px; } }
@media (max-width: 768px)  { .tc-section-header-wrap { padding: 0 24px; } }

/* Dentro de una columna de Enfold la cabecera no lleva el margen lateral de
   página: ya lo pone el contenedor, y con él el titular quedaba sangrado
   respecto al texto de al lado. */
.flex_column .tc-section-header-wrap,
.flex_column .tc-section-header-wrap.tc-section-header--medium { padding-left: 0; padding-right: 0; }

/* Los campos y el botón del boletín llevan `border-radius: 0` escrito y no
   simplemente omitido: el plugin Newsletter y Enfold redondean sus campos, y
   con la declaración a la vista queda claro que el ángulo recto del diseño es
   una decisión y no un descuido. */

/* Formulario de boletín servido por un plugin externo. */
.nl-embed { margin-top: 28px; }
#top .nl-embed input[type="text"],
#top .nl-embed input[type="email"]{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark);
}

/* Aviso cuando una sección no tiene contenido que mostrar. */
.tc-empty {
  color: var(--gray);
  font-size: 15px;
  padding: 32px 0;
}

/* Portada con contenido por diapositiva. Los bloques se apilan en la
   misma celda de una rejilla: así el contenedor mide lo que el bloque
   más alto y no hace falta posicionamiento absoluto, que rompería el
   centrado vertical de la portada. */
.hero-contents { display: grid; position: relative; z-index: 2; width: 100%; }
.hero-contents > .hero-content {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,.84,.44,1), visibility .7s;
}
.hero-contents > .hero-content.active { opacity: 1; visibility: visible; transform: translateY(0); }


/* =========================================================
   CARRUSEL DE EXPERIENCIAS — dedo o ratón
   ---------------------------------------------------------
   Lo que cambia no es el tamaño de la pantalla, es cómo se
   maneja. Antes estaba todo colgado de `max-width: 768px` y
   eso dejaba un callejón sin salida: en una ventana de
   escritorio estrecha se escondían las flechas Y la pista no
   tiene barra de desplazamiento visible
   (`scrollbar-width: none`), así que no había manera de
   avanzar. Con ratón, las flechas se quedan.
   ========================================================= */

/* Sin hover no hay estado «al pasar el ratón»: el texto de la
   tarjeta y su flecha se muestran siempre, que si no no se
   ven nunca. */
@media (hover: none) {
  .exp-card-body p { max-height: 80px; opacity: 1; }
  .exp-arrow { opacity: 1; transform: translateY(0); }
}

/* Donde hay dedo, fuera los botones: se desliza la pista. */
@media (hover: none) and (pointer: coarse) {
  .exp-nav { display: none; }

  /* Sin flechas el enlace se queda solo: el margen que lo
     separaba de ellas sobra. */
  .exp-controls .link-all { margin-left: 0; }
}

/* Ventana estrecha pero con ratón: los botones siguen, más
   pequeños para que quepan con el enlace al lado. */
@media (max-width: 768px) and (pointer: fine) {
  .exp-nav { width: 38px; height: 38px; }
  .exp-nav svg { width: 15px; height: 15px; }
  .exp-controls { gap: 9px; }
}


/* ===========================================================================
   Piezas sueltas de texto: cabecera de sección mediana y «Texto»
   Las que se usan para montar una introducción en columnas (texto a un lado,
   mapa al otro). Reproducen la .page-intro del diseño (tc-interior.css), que
   antes era un bloque cerrado.
   =========================================================================== */
.tc-section-header--medium .section-header { display: block; margin-bottom: 22px; }
.tc-section-header--medium .section-label { display: block; margin-bottom: 14px; }
.tc-section-header--medium .section-label::before { display: none; }
#top .tc-section-header--medium .section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 38px);
  color: var(--dark); line-height: 1.3; margin: 0;
}

.tc-text p { margin: 0 0 16px; }
.tc-text p:last-child { margin-bottom: 0; }
.tc-text a { color: var(--mid); text-decoration: underline; text-underline-offset: 3px; }
.tc-text a:hover { color: var(--gold-dk); }
#top .tc-text--intro p { font-family: var(--font-body); font-size: 16px; color: #4a4441; line-height: 1.9; }
#top .tc-text--normal p { font-family: var(--font-body); font-size: 15px; color: var(--gray); line-height: 1.8; }
#top .tc-text--lead p { font-family: var(--font-head); font-size: clamp(19px, 2vw, 23px); color: var(--dark); line-height: 1.55; }