/* Sur a Fondo — sitio oficial
   Estructura y ritmo heredados de la versión v3 (inspirada en "Surfing",
   Framer/OnePageLove). Colores, tipografías y copy readaptados a la identidad
   V2.0 y al copy v4. Cerebro maestro, secciones 13.4 a 13.11.

   Regla que gobierna este archivo: el naranjo es acento y no supera el 5% de
   la superficie. Todo lo que antes era coral de superficie grande (marquesina,
   antetítulos, bordes del proceso) pasó a azul noche. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* Paleta oficial */
  --noche: #102A3A;
  --marfil: #F5F1E8;
  --grafito: #1C2022;
  --naranjo: #F45F3B;

  /* Alias hacia los nombres que ya usa el resto de la hoja, para no reescribir
     700 líneas de selectores que funcionan bien. */
  --ink: var(--grafito);
  --cream: var(--marfil);
  --cream-soft: #EAE4D7;
  --coral: var(--naranjo);
  --coral-dark: #DA4E2C;
  --dark: var(--noche);
  --dark-soft: #17384B;
  --line: #D8D1C2;
  --muted: #5A6167;
  --white: #ffffff;

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  /* Escala de espaciado. Sistema de diseño, foundations/espaciado.html.
     Trece pasos, todos múltiplos de 4. El nombre dice el valor, así que no
     hay que ir a buscar la tabla para saber cuánto mide --e-24.
     Regla: si una medida de padding, margin o gap no está acá, no se usa.
     Los valores de 3 px o menos siguen literales: son detalle óptico
     (filetes, desplazamiento de un subrayado), no ritmo de maqueta. */
  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-20: 20px;
  --e-24: 24px;
  --e-32: 32px;
  --e-40: 40px;
  --e-48: 48px;
  --e-56: 56px;
  --e-64: 64px;
  --e-96: 96px;
  --e-128: 128px;

  --container: 1240px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Compensa la barra fija al saltar a un ancla. La barra mide 74 px, así que
   --e-96 la despeja con holgura. Es el único espaciado que no responde al
   ritmo sino a una altura medida. */
section[id] { scroll-margin-top: var(--e-96); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17.5px;          /* subido desde el 16px por defecto del navegador */
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--e-24);
}

/* El 400 venía de Anton, que solo tiene ese peso y aun así se ve grueso.
   Archivo a 400 es regular, así que los títulos se veían livianos. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;        /* reparte las líneas y evita viudas en títulos */
}

p, li, dd, summary { text-wrap: pretty; }   /* evita la palabra sola al final */

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--noche);        /* antes coral: son muchos antetitulos y sumaban superficie */
  opacity: 0.62;
  margin-bottom: var(--e-12);
}
.section--dark .eyebrow { color: #F5F1E8; opacity: 0.6; }

.section {
  padding: var(--e-96) 0;
}
.section--tight { padding: var(--e-56) 0; }
.section--dark { background: var(--dark); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--soft { background: var(--cream-soft); }

.section-head { max-width: 680px; margin-bottom: var(--e-56); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Aire entre título y texto. Los h llevan margin 0, así que sin esto el
   titular quedaba pegado a la bajada.
   Va sobre .section-title a secas y no sobre .section-head .section-title:
   la presentación y la cotización ponen el título suelto, sin ese contenedor,
   y por eso ahí no se aplicaba. */
.section-title { margin-bottom: var(--e-24); }
.exp-card h3,
.dest-card h3,
.process-step h3,
.trust-grid h3,
.team-card h3,
.feature-grid h3 { margin-bottom: var(--e-8); }
.team-card .team-role { margin-bottom: var(--e-12); }

h2.section-title { font-size: clamp(2rem, 4vw, 3rem); }
h3.card-title { font-size: 1.4rem; }

.lede { font-size: 1.15rem; color: var(--muted); max-width: 660px; }
/* La bajada que va bajo un título de sección es subtítulo y va en semibold.
   Los .lede sueltos del cuerpo se quedan en regular: en negrita, un párrafo
   largo se vuelve ilegible. */
.section-head .lede { font-weight: 600; color: var(--ink); }
.section--dark .lede { color: #d8d2c4; }
.section--dark .lede--remate { color: var(--marfil); }

/* ===== Botones ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: var(--e-16) var(--e-24);
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn--primary { background: var(--coral); color: var(--white); }
.btn--primary:hover { background: var(--coral-dark); transform: translateY(-1px); }

.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }

.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--sm { padding: var(--e-8) var(--e-20); font-size: 0.84rem; }
.btn--block { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--e-12); margin-top: var(--e-24); align-items: center; }

.link-text {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}
.section--dark .link-text { border-color: #ff8a68; }

/* ===== Header ===== */
/* Barra siempre en azul noche. Antes era transparente sobre el hero y viraba a
   crema al hacer scroll; ahora es una sola superficie de marca, estable. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--e-16) 0;
  background: var(--noche);
  transition: box-shadow .25s ease, padding .25s ease;
}
/* La cabecera usa más ancho que el resto del sitio: con el menú en letra
   grande, el contenedor de 1240 px obligaba a apretar o a partir la línea. */
.site-header .wrap {
  max-width: 1640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--e-16), 2vw, var(--e-32));
}
.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(11, 31, 44, 0.35);
  padding: var(--e-12) 0;
}

/* La marca ya no es texto: es el logotipo real, sin descriptor, segun 13.11.
   Dos archivos superpuestos, marfil sobre el hero y azul noche al hacer scroll.
   Se usan imagenes en vez de mask-image porque no dependen de soporte del
   navegador y se pueden verificar mirando el archivo. */
.brand {
  display: inline-grid;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand__img {
  grid-area: 1 / 1;
  display: block;
  width: clamp(8rem, 12vw, 11rem);
  height: auto;
  transition: opacity .25s ease;
}
/* La barra ya no cambia de fondo, así que el logotipo va siempre en marfil.
   La versión oscura queda en el HTML por si la barra vuelve a ser clara. */
.brand__img--oscuro { display: none; }

.brand--pie { display: block; }
.brand--pie img { width: min(24rem, 100%); height: auto; display: block; }

/* nowrap: antes el menú se partía en dos líneas y descuadraba la barra. */
.main-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: clamp(var(--e-16), 1.9vw, var(--e-32));
  row-gap: var(--e-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: block;
  text-decoration: none;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  transition: color .25s ease, opacity .15s ease;
}
.main-nav a:hover { opacity: 0.7; }


.header-social {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  color: var(--white);
  flex: 0 0 auto;
  transition: color .25s ease;
}

.header-social .social-icon { width: 18px; height: 18px; opacity: 0.85; cursor: default; }
.header-social .social-icon:hover { opacity: 1; }

.main-nav-social {
  display: none;
  gap: var(--e-16);
  margin-top: var(--e-4);
  padding-top: var(--e-16);
  border-top: 1px solid var(--line);
}
.main-nav-social .social-icon { width: 20px; height: 20px; color: var(--ink); opacity: 0.75; }

.header-right { display: flex; align-items: center; gap: var(--e-16); flex: 0 0 auto; }

.lang-switch {
  display: flex;
  gap: var(--e-4);
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: var(--e-4);
}


.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  border: none;
  background: transparent;
  padding: var(--e-4) var(--e-8);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--white);
  opacity: 0.65;
}

.lang-btn.is-active { background: var(--noche); color: var(--marfil); opacity: 1; }
.lang-btn[disabled] { cursor: not-allowed; opacity: 0.4; }
.lang-btn[disabled]:hover { opacity: 0.4; }
.lang-btn .flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
.lang-btn .flag svg { display: block; width: 100%; height: 100%; }

.nav-toggle {
  display: none;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--e-4);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: var(--e-4) 0;
  transition: background-color .25s ease;
}


/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background-size: cover;
  background-position: center 35%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo en azul noche, no en negro cálido. Se aclara arriba para que la
     fotografía se aprecie, y se cierra abajo para sostener el texto. */
  background: linear-gradient(180deg, rgba(16,42,58,0.40) 0%, rgba(16,42,58,0.14) 38%, rgba(16,42,58,0.92) 100%);
}

/* Sección de texto largo sobre foto: mismo criterio que el hero, más cerrado
   porque hay párrafos enteros encima, no solo un titular. Usa los colores
   de .section--dark (va siempre junto a esa clase). */
.section--photo {
  position: relative;
  background-size: cover;
  background-position: center;
}
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,42,58,0.60) 0%, rgba(16,42,58,0.82) 100%);
}
.section--photo > .wrap { position: relative; z-index: 1; }
.section--photo .lede,
.section--photo .section-title { text-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 2px 16px rgba(0,0,0,0.25); }

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: var(--e-128);
  padding-bottom: var(--e-40);
  max-width: 760px;
}
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd8c9;
  margin-bottom: var(--e-16);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.35);
}
/* El H1 del hero es la promesa, no el nombre: el logotipo vive en la barra
   superior y repetirlo aquí competía con él. */
.hero-h2 {
  font-family: var(--font-display);   /* antes Caveat manuscrita: fuera del sistema */
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--marfil);
  text-transform: none;
  margin: 0 0 var(--e-20);
  max-width: 18ch;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 4px 24px rgba(0,0,0,0.3);
}
.hero-p {
  font-size: 1.08rem;
  color: #f1ece1;
  max-width: 520px;
  margin-bottom: var(--e-4);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.3);
}
.hero-trust {
  margin-top: var(--e-20);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffd8c9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.35);
}

.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--noche);   /* antes coral a ancho completo: era el mayor consumo de naranjo */
  border-top: 1px solid rgba(245,241,232,0.2);
  padding: var(--e-12) 0;
}
.marquee-track {
  display: flex;
  gap: var(--e-40);
  white-space: nowrap;
  animation: marquee-scroll 22s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--white);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ===== Presentación ===== */
.about-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--e-56);
  align-items: center;
}
.about-images {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--e-12);
}
.about-images img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.about-images .img-tall { aspect-ratio: 3/4; }
.about-images .img-short { aspect-ratio: 3/4; align-self: end; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-24);
  margin: var(--e-32) 0 var(--e-8);
  padding-top: var(--e-24);
  border-top: 1px solid var(--line);
}
.section--dark .feature-grid { border-color: rgba(255,255,255,0.18); }
.feature-grid article h3 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  font-size: 1.02rem;
  margin-bottom: var(--e-4);
  letter-spacing: 0;
}
.feature-grid article p { font-size: 0.9rem; color: var(--muted); }
.section--dark .feature-grid article p { color: #cfc8b8; }

/* ===== Experiencias ===== */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-32);
}
.exp-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background-size: cover;
  background-position: center;
}
.exp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,13,10,0.05) 0%, rgba(15,13,10,0.85) 85%);
}
.exp-card-body { position: relative; z-index: 1; padding: var(--e-32); width: 100%; }
.exp-card-kicker { font-size: 0.82rem; font-weight: 700; color: var(--naranjo); margin-bottom: var(--e-8); letter-spacing: 0.06em; text-transform: uppercase; }
.exp-card h3 { font-size: 2rem; margin-bottom: var(--e-12); }
.exp-card p { font-size: 0.96rem; color: #f1ece1; max-width: 440px; }
.exp-card-meta {
  display: flex;
  gap: var(--e-8);
  flex-wrap: wrap;
  margin: var(--e-12) 0 var(--e-20);
}
.exp-card-meta span {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  padding: var(--e-4) var(--e-12);
  border-radius: 999px;
}
.exp-card-ctas { display: flex; flex-wrap: wrap; gap: var(--e-12); }

/* ===== Destinos (carrusel) ===== */
.destination-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 78vw);
  gap: var(--e-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e-12);
  margin: 0 calc(var(--e-24) * -1);
  padding-left: var(--e-24);
  padding-right: var(--e-24);
}
.destination-carousel::-webkit-scrollbar { height: 6px; }
.destination-carousel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.dest-card {
  position: relative;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: var(--white);
}
.dest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,13,10,0) 45%, rgba(15,13,10,0.88) 100%);
}
.dest-card-body { position: relative; z-index: 1; padding: var(--e-20); }
.dest-card h3 { font-size: 1.3rem; margin-bottom: var(--e-8); }
.dest-card p { font-size: 0.86rem; color: #f1ece1; }

/* ===== Proceso ===== */
/* Cuatro pasos en una sola línea en escritorio. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-32) var(--e-32);
}
.process-grid--5 { grid-template-columns: repeat(5, 1fr); }
.process-grid--6 { grid-template-columns: repeat(3, 1fr); }
/* El recorrido: mismo bloque visual que .process-step (h3 + p con borde
   superior) pero sin numerar, en grilla de 3. */
.recorrido-photo { border-radius: var(--radius); overflow: hidden; margin: var(--e-32) 0; aspect-ratio: 21/9; }
.recorrido-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El Osorno vive en el tercio superior de la toma (y de 8% a 40%). La foto
   es 3:2 y la caja recorta a 21:9, así que con el centrado por defecto el
   recorte se comía la cumbre. Se sube el encuadre, y en pantallas angostas
   la caja se hace más alta hasta mostrar la foto entera: el volcán queda
   completo en cualquier ancho. */
.recorrido-photo--volcan img { object-position: center 20%; }
@media (max-width: 980px) { .recorrido-photo--volcan { aspect-ratio: 16/9; } }
@media (max-width: 640px) { .recorrido-photo--volcan { aspect-ratio: 3/2; } }
.recorrido-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-32);
  margin-top: var(--e-8);
}
.process-step { padding-top: var(--e-16); border-top: 3px solid var(--noche); }
.process-step .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--coral);
  display: block;
  margin-bottom: var(--e-8);
}
.process-step h3 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.08rem;
  margin-bottom: var(--e-8);
}
.process-step p { font-size: 0.92rem; color: var(--muted); }

/* ===== Galería (separada por evento) ===== */
.gallery-group { margin-bottom: var(--e-40); }
.gallery-group:last-child { margin-bottom: 0; }
.gallery-group-title {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  margin-bottom: var(--e-16);
  color: var(--ink);
}
.gallery-group-title .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  gap: var(--e-12);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  aspect-ratio: 1/1;
}
/* Antes había piezas .wide (2 columnas) y .tall (2 filas). Con 8 y 10 fotos
   las celdas no daban múltiplo de 4 y la última fila quedaba coja, con dos
   huecos vacíos a la derecha. Ahora todas las piezas son cuadradas y cada
   galería lleva 12 fotos, que divide exacto en 4, 3 y 2 columnas: los tres
   anchos en que se muestra la grilla. Cero filas incompletas. */

/* ===== Confianza ===== */
.trust-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--e-56);
  align-items: center;
}
.trust-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.trust-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloque largo (agencia oficial) que antecede a la grilla de 4: por eso
   lleva su propio borde inferior, para separarse de los puntos breves. */
.trust-lead {
  margin: var(--e-8) 0 var(--e-32);
  padding-bottom: var(--e-24);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.trust-lead h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: var(--e-8);
}
.trust-lead p { font-size: 0.95rem; color: #cfc8b8; max-width: 640px; }
.trust-lead p + p { margin-top: var(--e-8); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-24);
  margin-top: var(--e-8);
}
.trust-grid article { padding-top: var(--e-16); border-top: 1px solid rgba(255,255,255,0.2); }
.trust-grid h3 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.02rem;
  margin-bottom: var(--e-8);
  color: var(--white);
}
.trust-grid p { font-size: 0.9rem; color: #cfc8b8; }

/* ===== Equipo ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-40);
}
.team-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--e-20);
}
.team-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-dark);
  margin: var(--e-4) 0 var(--e-8);
}
.team-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.2rem;
}
.team-card p { font-size: 0.9rem; color: var(--muted); }
.team-social {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-12);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.team-social:hover { color: var(--coral-dark); }

/* ===== FAQ ===== */
.faq-list { max-width: 820px; }
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: var(--e-20) 0;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-20);
  font-weight: 700;
  font-size: 1.02rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--coral);
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin-top: var(--e-12); font-size: 0.95rem; color: var(--muted); max-width: 680px; }

/* ===== Cotización final CTA ===== */
.cta-final { text-align: center; padding: var(--e-96) 0; }
.cta-final h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 760px; margin: 0 auto var(--e-16); }
.cta-final p { max-width: 600px; margin: 0 auto; color: #d8d2c4; }
.cta-final .btn-row { justify-content: center; }

/* ===== Cotización (formulario) ===== */
.quote-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--e-48);
  align-items: start;
}
.quote-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; }

.quote-whatsapp {
  margin-top: var(--e-20);
  padding: var(--e-16);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote-whatsapp p { font-size: 0.88rem; color: var(--muted); margin-bottom: var(--e-12); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-16); }
.form-field { display: flex; flex-direction: column; gap: var(--e-4); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.8rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--e-12) var(--e-12);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
}
.form-note { margin-top: var(--e-12); font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.form-success {
  display: none;
  margin-top: var(--e-16);
  padding: var(--e-16) var(--e-16);
  background: #eef6ea;
  border: 1px solid #c3dcb9;
  border-radius: var(--radius);
  color: #2c4a20;
  font-size: 0.94rem;
}
.form-success.is-visible { display: block; }

/* ===== Footer ===== */
.site-footer { background: var(--dark); color: #b8b0a0; padding: var(--e-56) 0 var(--e-32); }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-40);
  flex-wrap: wrap;
  padding-bottom: var(--e-32);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand .brand { color: var(--white); }
.footer-brand p { font-size: 0.86rem; color: #a79f8d; margin-top: var(--e-4); }

.footer-nav { display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-24); list-style: none; padding: 0; margin: 0; }
.footer-nav a { text-decoration: none; font-size: 0.88rem; color: #cfc8b8; }
.footer-nav a:hover { color: var(--white); }

.footer-social { display: flex; gap: var(--e-8); }
.footer-social .social-pill {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  font-size: 0.82rem;
  font-weight: 600;
  padding: var(--e-8) var(--e-12);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #cfc8b8;
}
.social-icon { width: 16px; height: 16px; flex: 0 0 auto; color: currentColor; }
.social-icon svg { display: block; width: 100%; height: 100%; }

.footer-bottom {
  padding-top: var(--e-20);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-8);
  font-size: 0.85rem;
}
.footer-bottom .closing { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--marfil); }

/* ===== Responsive ===== */
/* ==========================================================================
   Añadidos de la readaptación
   ========================================================================== */

/* Botón volante de WhatsApp: siempre disponible para cotizar.
   Va en el verde oficial de WhatsApp por decisión de Ignacio, priorizando el
   reconocimiento inmediato del canal. Es la única excepción a la paleta en
   todo el sitio, y se justifica porque no representa a la marca sino a un
   servicio externo. No usar este verde en ningún otro elemento. */
.wa-flotante {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--e-12);
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(16, 42, 58, 0.28);
  transition: gap .25s ease, padding .25s ease, background .25s ease;
}
.wa-flotante svg { width: 26px; height: 26px; flex: 0 0 auto; }
.wa-flotante__texto {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transition: max-width .25s ease;
}
.wa-flotante:hover,
.wa-flotante:focus-visible {
  background: #1DA851;
  gap: var(--e-8);
  padding-right: var(--e-20);
}
.wa-flotante:hover .wa-flotante__texto,
.wa-flotante:focus-visible .wa-flotante__texto { max-width: 14rem; }

@media (prefers-reduced-motion: reduce) {
  .wa-flotante, .wa-flotante__texto { transition: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.lede--remate {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--noche);
  margin-top: var(--e-20);
}

/* Notas al pie de sección: descargos y créditos. Nunca decorativas. */
.section-note {
  margin-top: var(--e-24);
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 780px;
}
.section--dark .section-note { color: #cfc8b8; }

.exp-card-notice {
  font-size: 0.82rem;
  color: rgba(245, 241, 232, 0.8);
  font-style: italic;
  margin-bottom: var(--e-16);
}

/* Formulario */
.field-hint {
  display: block;
  margin-top: var(--e-4);
  font-size: 0.78rem;
  color: var(--muted);
}
.form-caveat {
  margin-top: var(--e-20);
  padding: var(--e-12) var(--e-16);
  background: var(--cream-soft);
  border-left: 3px solid var(--naranjo);
  font-size: 0.92rem;
  color: var(--muted);
}
.form-micro {
  margin-top: var(--e-8);
  font-size: 0.8rem;
  color: var(--muted);
}
.quote-contacto {
  margin-top: var(--e-12);
  font-size: 0.82rem;
  color: var(--muted);
}

/* Pie: bloque legal entre los enlaces y la línea de cierre */
.footer-legal {
  margin-top: var(--e-32);
  padding-top: var(--e-20);
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  font-size: 0.78rem;
  color: #8f887a;
  max-width: 780px;
}
.footer-legal p { margin: 0; }

/* Franja intermedia: entre 981 y 1320 px la barra tiene que caber en una sola
   línea. Los iconos sociales salen primero, porque están repetidos en el pie
   y en el menú móvil; después las etiquetas ES/PT/EN, que la bandera ya dice. */
@media (max-width: 1200px) {
  .header-social { display: none; }
}
@media (max-width: 1060px) {
  .lang-label { display: none; }
  .lang-btn { padding: var(--e-4) var(--e-8); }
}

@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-social { display: none; }
  .main-nav-social { display: flex; }

  .about-layout, .exp-grid, .team-grid, .quote-layout, .trust-layout { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: var(--e-16); }
  .process-grid, .process-grid--5, .process-grid--6, .recorrido-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding: var(--e-64) 0; }
  .quote-photo, .trust-photo { display: none; }
}

@media (max-width: 640px) {
  .process-grid, .process-grid--5, .process-grid--6, .recorrido-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .team-card { grid-template-columns: 1fr; }
  .team-photo { width: 96px; height: 96px; }

  .hero-content { padding-left: var(--e-32); padding-right: var(--e-32); }
}

/* Header angosto: el logo + selector de idioma + botón de cotización no caben
   junto al menú hamburguesa, así que se simplifica para que el botón de menú
   nunca quede empujado fuera de la pantalla */
@media (max-width: 560px) {
  .site-header nav { display: contents; }
  .header-right .btn--primary { display: none; }
  .lang-label { display: none; }
  .lang-switch { gap: 3px; padding: 3px; }
  .lang-btn { padding: var(--e-4); }
  .header-right { gap: var(--e-8); }
  .brand { font-size: 1.2rem; }
}

.main-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  padding: var(--e-20) var(--e-24) var(--e-24);
  border-bottom: 1px solid var(--line);
  gap: var(--e-16);
}
.main-nav.is-open a { color: var(--ink); }

/* ==========================================================================
   Reestructuración: home más página por carrera
   ========================================================================== */

/* ----- Home: la experiencia abierta -----
   Una sola tarjeta a ancho completo, porque hoy hay un solo producto vendible.
   Es un enlace, no un artículo, así que toda la tarjeta es cliqueable. */
.exp-card--unica {
  min-height: 420px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.exp-card--unica:hover,
.exp-card--unica:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16, 42, 58, 0.22);
}
.exp-card--unica h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--e-12); }
.exp-card-enlace {
  display: inline-block;
  margin-top: var(--e-16);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--coral);
}

/* ----- Home: franja de territorio -----
   Reemplaza a la galería completa, que se fue a la página de carrera. Es el
   gancho, no el cierre: cinco imágenes a sangre y sin texto encima. */
.franja-fotos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  background: var(--line);
}
.franja-fotos img {
  width: 100%;
  height: clamp(180px, 22vw, 320px);
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .franja-fotos { grid-template-columns: repeat(3, 1fr); }
  .franja-fotos img:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .franja-fotos { grid-template-columns: repeat(2, 1fr); }
  .franja-fotos img:nth-child(n+3) { display: none; }
}

/* ----- Home: próximas salidas ----- */
.proximas-lista {
  list-style: none;
  margin: 0 0 var(--e-40);
  padding: 0;
  border-top: 1px solid var(--line);
}
.proximas-lista li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-8) var(--e-16);
  padding: var(--e-20) 0;
  border-bottom: 1px solid var(--line);
}
.proximas-nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.proximas-lugar { font-size: 0.9rem; color: var(--muted); flex: 1 1 auto; }
/* Gris y en versales: se lee como estado, no como oferta. */
.proximas-estado {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  border: 1px solid var(--line-firme, #BFB6A3);
  padding: var(--e-4) var(--e-12);
  border-radius: 999px;
  white-space: nowrap;
}

.aviso-form { max-width: 560px; }
.aviso-form label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: var(--e-12);
  color: var(--ink);
}
.aviso-form__fila { display: flex; gap: var(--e-12); flex-wrap: wrap; }
.aviso-form input[type="email"] {
  flex: 1 1 240px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--e-12) var(--e-12);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.aviso-form input[type="email"]:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.aviso-form__estado { margin-top: var(--e-12); font-size: 0.86rem; font-weight: 600; color: var(--muted); min-height: 1.2em; }

/* ----- Página de carrera ----- */
/* Más baja que el hero de la home: acá el trabajo lo hace el dato, no la foto. */
.hero--carrera { min-height: min(78vh, 680px); }
.hero--carrera .hero-content { padding-top: var(--e-128); padding-bottom: var(--e-56); }

.carrera-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-32) var(--e-48);
  margin: var(--e-32) 0 0;
  padding-top: var(--e-24);
  border-top: 1px solid rgba(245, 241, 232, 0.28);
}
.carrera-datos dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.62);
  margin-bottom: var(--e-4);
}
.carrera-datos dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--marfil);
}