/* ==========================================================================
   Faralion — Landing page
   Sistema visual: claro / redondeado / sombras suaves (dirección "Sendr"),
   en colores de marca Faralion. Tierra se usa UNA sola vez (barra de anuncio).
   Río se usa SOLO para visualización de datos (el dato del panel oscuro).
   ========================================================================== */

:root{
  /* ==================================================================== */
  /* COLOR                                                                */
  /* Los diez tokens de marca, mas cuatro derivados que existen por una    */
  /* sola razon: el contraste. Estan medidos, no elegidos a ojo.           */
  /* ==================================================================== */
  --basalto:      #1A1D1B;   /* texto principal y fondo de capitulo oscuro */
  --niebla:       #F4F2ED;   /* fondo de pagina y texto sobre oscuro */
  --blanco:       #FFFFFF;   /* superficie elevada sobre niebla */
  --verde-bosque: #4E7F63;   /* acento principal, bordes activos */
  --verde-musgo:  #6D8F63;   /* acento secundario */
  --piedra:       #D8D3CA;   /* divisores y bordes suaves */
  --gris-roca:    #5E635F;   /* texto secundario sobre claro */
  --tierra:       #A56A3A;   /* advertencias y notas al pie de precio */
  --superficie-oscura: #232723;  /* tarjeta sobre basalto */
  --borde-oscuro:      #343833;  /* borde sobre basalto */

  /* ---- Derivados. Cada uno arregla un fallo de contraste concreto ----
     Verde Bosque como texto pequeno sobre niebla da 4,13:1 y no pasa AA.
     Gris Roca sobre la superficie oscura da 2,47:1, que es peor todavia.
     Estos cuatro son el mismo color un paso mas denso o mas claro, y pasan. */
  --verde-texto:   #416B53;  /* 5,44:1 sobre niebla   · enlaces y texto pequeno */
  --verde-claro:   #8FB79A;  /* 7,61:1 sobre basalto  · enlaces en capitulo oscuro */
  --gris-claro:    #A6ACA5;  /* 6,54:1 sobre superficie oscura · texto secundario */
  --tierra-texto:  #8F5A2F;  /* 5,11:1 sobre niebla   · nota al pie de precio */

  /* ---- Roles ---- */
  --bg:                var(--niebla);
  --superficie-clara:  #FBFAF6;   /* tarjeta sobre niebla */
  --surface:           var(--superficie-clara);
  --text-heading:      var(--basalto);
  --text-body:         var(--gris-roca);
  --divider:           #E3E0D9;
  --btn-primary-bg:    var(--basalto);
  --btn-primary-text:  var(--niebla);
  --dark-panel:        var(--basalto);
  --acento-texto:      var(--verde-texto);
  --verde-bosque-dim:  #416B53;
  --basalto-hover:     #101310;

  /* ==================================================================== */
  /* TIPOGRAFIA                                                           */
  /* ==================================================================== */
  --font-display: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
  --font:         'Karla', 'Segoe UI', Tahoma, sans-serif;

  /* 2.3 · Siete tamanos. Habia 48, trece de ellos entre 14 y 18px: nadie
     los distingue, pero cada uno arrastraba su propio line-height y
     desalineaba las columnas vecinas. Ratio 1,2 en movil, 1,333 en
     escritorio. */
  --t-display: clamp(2.5rem,    1.6rem  + 4.5vw,  4.5rem);   /* 40 → 72 */
  --t-h1:      clamp(2rem,      1.5rem  + 2.5vw,  3rem);     /* 32 → 48 */
  --t-h2:      clamp(1.5rem,    1.25rem + 1.25vw, 2rem);     /* 24 → 32 */
  --t-lead:    clamp(1.25rem,   1.15rem + 0.5vw,  1.5rem);   /* 20 → 24 */
  --t-body:    clamp(1.0625rem, 1.04rem + 0.1vw,  1.125rem); /* 17 → 18 */
  --t-small:   clamp(0.9375rem, 0.92rem + 0.1vw,  1rem);     /* 15 → 16 */
  --t-eyebrow: 0.8125rem;                                    /* 13 fijo  */
  /* Alias de compatibilidad: --t-h3 y --t-micro tenian usos repartidos. */
  --t-h3:      var(--t-lead);
  --t-micro:   var(--t-eyebrow);

  /* Ancho de lectura. Un parrafo que cruza la pantalla no se lee. */
  --medida: 68ch;

  /* ==================================================================== */
  /* ESPACIO · escala de 8                                                */
  /* Se conservan los nombres --space-N: hay 300 referencias en el archivo */
  /* y renombrarlos ahora no aporta nada.                                  */
  /* ==================================================================== */
  /* ---------------------------------------------------------------- */
  /* 2.1 · Escala de espaciado. Nueve pasos y ni uno mas.               */
  /* Los cuatro primeros no cambian nunca: 8px dentro de un boton       */
  /* significa lo mismo en cualquier pantalla. Los grandes si se        */
  /* reducen, porque 160px de vacio en un celular se lee como error de  */
  /* carga.                                                             */
  /* Regla que no se negocia: el hueco ENTRE grupos va siempre al menos */
  /* dos pasos por encima del hueco DENTRO del grupo. Ese ratio de 3x   */
  /* es lo que permite al ojo agrupar; su ausencia es exactamente lo    */
  /* que se percibe como "encimoso".                                    */
  /* ---------------------------------------------------------------- */
  --s-3xs: 4px;
  --s-2xs: 8px;
  --s-xs:  16px;
  --s-s:   24px;
  --s-m:   32px;
  --s-l:   48px;
  --s-xl:  96px;
  --s-2xl: 160px;
  --s-3xl: 224px;

  /* La escala vieja cuelga de la nueva. El 64 y el 128 no existen en el
     sistema: el relleno de cada seccion lo fija la Tanda 4, uno por uno. */
  --e1:  var(--s-2xs);
  --e2:  var(--s-xs);
  --e3:  var(--s-s);
  --e4:  var(--s-m);
  --e5:  var(--s-l);
  --e6:  var(--s-l);
  --e7:  var(--s-xl);
  --e8:  var(--s-2xl);

  --space-1: var(--e1);
  --space-2: var(--e2);
  --space-3: var(--e3);
  --space-4: var(--e4);
  --space-5: var(--e6);
  --space-6: var(--e7);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(26,29,27,.04), 0 4px 16px rgba(26,29,27,.05);
  --shadow-lift: 0 2px 4px rgba(26,29,27,.05), 0 10px 28px rgba(26,29,27,.08);

  --max: 1200px;
  --canal-movil: 24px;
  --canal-escritorio: 48px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,
*::before,
*::after{ box-sizing: border-box; }
/* 1.3 · Sobre catorce mil pixeles de pagina, un clic en el menu animaba un
   barrido por todo el sitio. El salto es instantaneo. */
html{ scroll-behavior: auto; }
:root{ --header-h: 73px; }
section[id],
[id="top"]{ scroll-margin-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,
*::before,
*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  font-size: var(--t-small);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; cursor: pointer; }

h1,
h2,
h3,
h4,
h5{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  /* El canal crece con la pantalla: con el contenedor a 1320px, un portatil de
     1366 se quedaba con 15px de margen a cada lado. */
  /* El canal era clamp(24px, 3vw, 48px): el 3vw daba 40,98px a 1366 de
     ancho. Dos pasos fijos de la escala, sin fracciones. */
  padding: 0 var(--s-s);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.on-dark .eyebrow{ color: var(--verde-musgo); }
/* .section-head p gana por especificidad sobre .eyebrow y dejaba las etiquetas
   en Gris Roca en vez del acento de marca. */
/* Verde Bosque a 12px da 4,13:1 y AA pide 4,5 para texto pequeno: se usa la
   variante oscurecida del mismo verde, que conserva el tono y pasa. */
.section-head p.eyebrow{ color: var(--acento-texto); }
.on-dark .section-head p.eyebrow{ color: var(--verde-musgo); }

.section{ padding: var(--space-6) 0; position: relative; }
.section-head{ max-width: 680px; margin-bottom: var(--space-5); }

/* En monitores anchos la mitad derecha deja de estar vacia: el titulo y su
   bajada se quedan a la izquierda, con la medida de linea intacta, y a la
   derecha va el contenido que hasta ahora caia debajo. */
.section-head--split{ max-width: none; }
.section-head--split .section-head-main{ max-width: 680px; }
.section-head--split .section-head-main p:not(.eyebrow){ max-width: 58ch; }
/* En pantallas estrechas el bloque lateral no desaparece: se apila debajo. */
.section-aside{ margin-top: var(--space-4); }
@media (min-width: 1025px){
  .section-head--split{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--space-5);
    align-items: end;
  }
  .section-aside{ margin-top: 0; padding-bottom: var(--s-2xs); }
}
.aside-label{
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-body);
  margin-bottom: var(--space-2);
}
.aside-texto{ font-size: var(--t-small); color: var(--text-body); margin: 0; }
/* Los titulos de seccion eran de 46px; el mapeo los subio a 72 y competian
   con el hero. --t-display es del hero, y de nadie mas. */
.section-head h2{ font-size: var(--t-h1); margin-top: var(--space-2); }
.section-head p{ margin-top: var(--space-2); font-size: var(--t-body); color: var(--text-body); max-width: 58ch; }
.on-dark .section-head p{ color: rgba(244, 242, 237,.72); }

.on-dark{ background: var(--dark-panel); color: var(--niebla); }
/* Los encabezados traen color propio (regla global h1..h5) y ganaban sobre el
   color heredado de .on-dark: el h2 quedaba casi negro sobre casi negro, con
   un contraste medido de 1,02:1. Sin esta anulacion, el titulo no se ve. */
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5{ color: var(--niebla); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  padding: var(--s-xs) var(--s-m);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--t-small);
  border: 1.5px solid transparent;
  transition: transform 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 3px; }

.btn-primary{ background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: var(--basalto-hover); box-shadow: var(--shadow-lift); }

.btn-outline{ background: var(--surface); color: var(--text-heading); border-color: var(--text-heading); }
.btn-outline:hover{ background: var(--text-heading); color: var(--surface); }

.on-dark .btn-outline{ background: transparent; color: var(--niebla); border-color: rgba(244, 242, 237,.4); }
.on-dark .btn-outline:hover{ background: var(--niebla); color: var(--dark-panel); }

.btn-sm{ padding: var(--s-xs) var(--s-s); font-size: var(--t-eyebrow); }

/* ==========================================================================
   Announcement bar — única aparición de Tierra
   ========================================================================== */
.announce-bar{
  background: var(--dark-panel);
  background-image:
    radial-gradient(ellipse 60% 140% at 15% 0%, rgba(78,127,99,.55), transparent 70%),
    radial-gradient(ellipse 50% 140% at 85% 100%, rgba(109,143,99,.4), transparent 70%);
  color: var(--niebla);
  position: relative;
  z-index: 110;
  transition: max-height 300ms var(--ease), padding 300ms var(--ease), opacity 250ms var(--ease);
  overflow: hidden;
}
.announce-bar.is-closed{ max-height: 0; padding: 0; opacity: 0; }
.announce-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-2xs) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  position: relative;
}
.announce-link{
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 200ms var(--ease);
}
.announce-link:hover{ opacity: .85; }
.announce-badge{
  background: var(--tierra-texto);
  color: var(--niebla);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}
.announce-link svg{ width: 14px; height: 14px; flex-shrink: 0; }
.announce-close{
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(244, 242, 237,.6);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.announce-close:hover{ background: rgba(244, 242, 237,.12); color: var(--niebla); }
.announce-close svg{ width: 14px; height: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
/* 1.1 · Aqui vivia un backdrop-filter: blur(10px). Congelaba el renderizador
   mas de 45 segundos en un scroll, porque obliga a recomponer todo lo que hay
   detras del header en cada cuadro. Y el 0,85 de opacidad dejaba pasar un
   fantasma desenfocado del contenido sobre los capitulos oscuros.
   Fondo opaco: resuelve las dos cosas y el lenguaje de Faralion es editorial
   y plano, no glassmorphism. No se sustituye por ningun otro efecto. */
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: #F4F2ED;
}
.site-header.is-scrolled{ border-bottom-color: var(--divider); box-shadow: 0 1px 0 rgba(26, 29, 27,.02); }
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--s-xs);
  padding-bottom: var(--s-xs);
}
.logo{
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
.logo img{ height: 40px; width: auto; display: block; }
.footer-logo img{ height: 56px; }

.main-nav{ display: flex; align-items: center; gap: var(--space-4); }
.main-nav ul{ display: flex; gap: var(--space-3); }
.main-nav ul a{
  color: var(--text-body);
  font-weight: 600;
  font-size: var(--t-small);
  transition: color 200ms var(--ease);
}
.main-nav ul a:hover{ color: var(--text-heading); }
.nav-btns{ display: flex; align-items: center; gap: var(--space-2); }
.nav-social{ display: none; }

.nav-toggle{
  display: none;
  background: none; border: none;
  width: 40px; height: 40px;
  padding: 0;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: "";
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--text-heading);
  transition: transform 250ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle span{ top: 19px; }
.nav-toggle span::before{ top: -7px; }
.nav-toggle span::after{ top: 7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); background: var(--text-heading); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); background: var(--text-heading); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding: var(--space-6) 0 var(--space-5); }
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  background: var(--surface);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-soft);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.hero-badge::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde-bosque);
}
.hero-content{ max-width: 760px; }
.hero-eyebrow{
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento-texto);
}
.hero h1{ font-size: var(--t-display); margin-top: var(--space-2); }
.badge-short{ display: none; }
.announce-short{ display: none; }
.hero-lead{ margin-top: var(--space-3); font-size: var(--t-lead); color: var(--text-body); max-width: 54ch; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.hero-support{ margin-top: var(--space-3); font-size: var(--t-small); color: var(--text-body); }

/* ==========================================================================
   Por qué Faralion
   ========================================================================== */
.routes-lead{ font-size: var(--t-small); font-weight: 600; color: var(--text-heading); margin-bottom: var(--space-3); }
.routes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.route-card{
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.route-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.route-card .icon-sq{
  width: 46px; height: 46px;
  background: var(--piedra);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-heading);
  margin-bottom: var(--space-3);
}
.route-card .icon-sq svg{ width: 22px; height: 22px; }
.route-card h3{ font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; }
.route-card p{ margin-top: var(--s-2xs); font-size: var(--t-small); color: var(--text-body); }

.differential-line{
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text-heading);
  box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   Qué hacemos — progresión + acordeón
   ========================================================================== */
.progression{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2xs);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--text-body);
}
.progression span{ display: inline-flex; align-items: center; gap: var(--s-2xs); }
.progression .step{ color: var(--text-heading); padding: var(--s-2xs) var(--s-xs); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-pill); }
.progression .arrow{ color: var(--acento-texto); }

/* ---------- Oferta: tarjetas abiertas (sin clic para leer el producto) ---------- */
.offer-group{ margin-bottom: var(--space-5); }
.offer-group-title{ font-size: var(--t-lead); }
.offer-group-desc{
  margin: .6rem 0 var(--space-3);
  font-size: var(--t-small);
  color: var(--text-body);
  max-width: 62ch;
}

.offer-grid{ display: grid; gap: var(--space-3); align-items: stretch; }
/* Sin esto, el minimo automatico de la tarjeta (min-width:auto) ensancha la
   columna por encima del contenedor y aparece scroll horizontal en movil. */
.offer-card{ min-width: 0; }
.offer-grid--2{ grid-template-columns: repeat(2, 1fr); }
.offer-grid--3{ grid-template-columns: repeat(3, 1fr); }

.offer-card{
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
/* ASCENSO: la opcion evidente, sin repetir la palabra. */
.offer-card.is-featured{
  border: 1.5px solid var(--verde-bosque);
  background:
    linear-gradient(180deg, rgba(78,127,99,.05), rgba(78,127,99,0) 220px),
    var(--surface);
  box-shadow: var(--shadow-lift);
}

.offer-head{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2xs); }
.offer-head h4{
  flex-basis: 100%;
  font-size: var(--t-h2); font-weight: 600;
  margin-top: var(--s-2xs);
}
.offer-duration{
  flex-basis: 100%;
  font-size: var(--t-eyebrow); font-weight: 600;
  color: var(--acento-texto);
  margin-top: var(--s-3xs);
}

.offer-who{
  margin-top: var(--space-2);
  font-size: var(--t-small);
  color: var(--text-body);
}

.offer-threshold{
  margin-top: var(--space-2);
  padding: var(--s-xs) var(--s-xs);
  border-radius: var(--radius-sm);
  background: rgba(78,127,99,.08);
  font-size: var(--t-small);
  color: var(--text-heading);
}
.offer-threshold strong{ font-weight: 600; white-space: nowrap; }

.offer-note{
  margin-top: var(--space-2);
  font-size: var(--t-eyebrow);
  color: var(--text-heading);
  background: rgba(216,211,202,.35);
  border-left: 3px solid var(--verde-bosque);
  padding: var(--s-xs) var(--s-xs);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.offer-spec{ margin-top: var(--space-3); }
.offer-spec li{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-xs);
  padding: var(--s-2xs) 0;
  border-bottom: 1px solid var(--divider);
  font-size: var(--t-small);
}
.offer-spec li:last-child{ border-bottom: none; }
.offer-spec span{ color: var(--text-body); }
.offer-spec strong{ font-family: var(--font-display); color: var(--text-heading); font-weight: 600; text-align: right; }

.offer-commitment{
  margin-top: var(--space-3);
  font-size: var(--t-eyebrow); font-weight: 600;
  color: var(--acento-texto);
  display: flex; gap: var(--s-2xs);
}
.offer-commitment::before{
  content: "";
  width: 6px; height: 6px; margin-top: var(--s-2xs);
  border-radius: 50%;
  background: var(--verde-bosque);
  flex-shrink: 0;
}
.offer-details .chev{ width: 16px; height: 16px; transition: transform 250ms var(--ease); flex-shrink: 0; }
.offer-details[open] > summary .chev{ transform: rotate(180deg); }
.offer-details .line-includes{ margin-top: var(--space-2); padding-bottom: var(--space-1); }

/* El CTA queda alineado abajo en todas las tarjetas de la fila.
   margin-top:auto lo empuja al pie; el hueco minimo lo pone el hermano
   anterior, porque un auto colapsado no deja separacion. */
.offer-cta{ margin-top: auto; align-self: flex-start; }
.offer-card > *:nth-last-child(2){ margin-bottom: var(--space-3); }

/* Las tres tarjetas de plan comparten rejilla, para que las filas del alcance
   se puedan comparar en horizontal. Sin esto, el texto mas largo de ASCENSO
   desplaza sus filas y la tabla deja de alinearse entre columnas. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 1025px){
    /* Doce elementos en flujo (la pildora "Recomendado" va en posicion
       absoluta y no ocupa fila). Si este numero se queda corto, los hijos
       sobrantes caen todos en la ultima fila y se pintan unos sobre otros:
       fue exactamente lo que paso al separar "Desde" del importe. Si vuelves
       a anadir o quitar un hijo a la tarjeta, actualiza los dos numeros. */
    .offer-grid--3{ grid-template-rows: repeat(12, auto); }
    .offer-grid--3 .offer-card{
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 12;
      row-gap: 0;
    }
    /* El CTA se ancla abajo del todo, alineado entre las tres columnas. */
    .offer-grid--3 .offer-cta{ align-self: end; justify-self: stretch; margin-top: var(--space-3); }
  }
}

.offer-fineprint{
  margin-top: var(--space-3);
  font-size: var(--t-eyebrow);
  color: var(--text-body);
}

.line-code{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acento-texto);
  background: rgba(78,127,99,.1);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}
.line-tag{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--niebla);
  background: var(--verde-bosque-dim);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}
.line-includes{ display: flex; flex-direction: column; gap: var(--s-2xs); }
.line-includes li{ display: flex; gap: var(--s-2xs); font-size: var(--t-small); color: var(--text-body); }
.line-includes li::before{ content: ""; width: 5px; height: 5px; margin-top: var(--s-2xs); border-radius: 50%; background: var(--verde-bosque); flex-shrink: 0; }

/* ---------- Garantias ---------- */
.guarantee-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.guarantee-card{
  background: var(--surface);
  border: 1px solid var(--divider);
  border-top: 3px solid var(--verde-bosque);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
.guarantee-card h3{ font-size: var(--t-body); font-weight: 600; }
.guarantee-card p{ margin-top: var(--s-2xs); font-size: var(--t-small); color: var(--text-body); }

.expedicion-card{
  margin-top: var(--space-3);
  background: linear-gradient(135deg, var(--surface), var(--bg));
  border: 1px dashed var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.expedicion-card h3{ font-size: var(--t-body); }
.expedicion-card p{ margin-top: var(--s-2xs); font-size: var(--t-small); color: var(--text-body); max-width: 52ch; }
.expedicion-status{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--basalto);
  background: var(--piedra);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ==========================================================================
   Portafolio
   ========================================================================== */
.portfolio-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.case-card{
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-align: left;
  width: 100%;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  display: flex;
  flex-direction: column;
}
.case-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.case-card:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 3px; }
.case-cover{
  height: 240px;
  position: relative;
  background: var(--dark-panel);
  overflow: hidden;
}
.case-cover img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.case-card:hover .case-cover img{ transform: scale(1.04); }
.case-cover::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 29, 27,.05) 40%, rgba(26, 29, 27,.55) 100%);
}
.case-cover .real-tag,
.case-cover .concept-tag{
  z-index: 2;
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}
.case-cover .real-tag{ background: var(--niebla); color: var(--dark-panel); }
.case-cover .concept-tag{ background: rgba(244, 242, 237,.14); color: var(--niebla); border: 1px solid rgba(244, 242, 237,.3); }
.case-body{ padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.case-body .cat{ font-size: var(--t-eyebrow); font-weight: 600; color: var(--acento-texto); text-transform: uppercase; letter-spacing: .05em; }
.case-body h3{ font-size: var(--t-h2); margin-top: var(--s-2xs); }
.case-block-sm{ margin-top: var(--space-3); }
.case-block-sm h4{
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--s-2xs);
}
.case-block-sm p{ font-size: var(--t-small); color: var(--text-body); margin: 0; }
.case-body .open-hint{
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
}
.case-body .open-hint svg{ width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.case-card:hover .open-hint svg{ transform: translateX(4px); }

/* ==========================================================================
   Cómo trabajamos — panel oscuro con resplandor
   ========================================================================== */
.dark-panel{
  position: relative;
  background: var(--dark-panel);
  overflow: hidden;
  padding: var(--space-6) 0;
}
.dark-panel::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(78,127,99,.45), rgba(109,143,99,.18) 45%, transparent 75%);
  pointer-events: none;
}
.dark-panel::after{
  content: "";
  position: absolute; inset: 0;
  opacity: .22;
  background-image: radial-gradient(rgba(244, 242, 237,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.dark-panel .noise{
  position: absolute; inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark-panel > .wrap{ position: relative; z-index: 1; }
.dark-panel .section-head{ margin-bottom: var(--space-4); }
.dark-panel .section-head p{ color: rgba(244, 242, 237,.72); }

.cycle-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
.cycle-step{
  background: rgba(244, 242, 237,.06);
  border: 1px solid rgba(244, 242, 237,.14);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
/* Verde Musgo da 4,66:1 sobre basalto puro, pero la tarjeta del ciclo tiene
   su propio fondo translucido y el resplandor del panel detras: medido sobre
   el render real baja a 3,99:1. El derivado claro lo resuelve. */
.cycle-step .num{ font-size: var(--t-eyebrow); font-weight: 600; color: var(--verde-claro); letter-spacing: .1em; text-transform: uppercase; }
.cycle-step h3{ color: var(--niebla); font-size: var(--t-body); margin-top: var(--s-2xs); line-height: 1.25; }
.cycle-step p{ margin-top: var(--s-2xs); font-size: var(--t-small); color: rgba(244, 242, 237,.68); }

.stat-callout{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(244, 242, 237,.14);
  flex-wrap: wrap;
}
.stat-callout .num{ font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  color: var(--verde-claro);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-callout p{ max-width: 42ch; font-size: var(--t-small); color: rgba(244, 242, 237,.75); }
.stat-callout .stat-label{ font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-claro); margin-bottom: var(--s-2xs); }
.about-tags{ display: flex; flex-wrap: wrap; gap: var(--s-2xs); margin-top: var(--space-4); }
.about-tags span{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--text-heading);
  background: var(--piedra);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}
.booking-copy h3{ font-size: var(--t-h2); }
.booking-copy > p{ color: var(--text-body); margin-top: var(--space-2); font-size: var(--t-small); }
.booking-close{ margin-top: var(--space-3) !important; font-size: var(--t-body); font-weight: 600; color: var(--text-heading) !important; }
.booking-actions{ display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.booking-actions .btn{ justify-content: center; }
.booking-actions .btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.booking-fallback{ margin-top: var(--space-3); font-size: var(--t-eyebrow); color: var(--text-body); }
.booking-fallback a{ color: var(--acento-texto); font-weight: 600; text-decoration: underline; }
.contact-secondary-lead{ margin-top: var(--s-2xs); color: var(--text-body); font-size: var(--t-small); }
.field{ display: flex; flex-direction: column; gap: var(--s-2xs); }
.field label{ font-size: var(--t-eyebrow); font-weight: 600; color: var(--text-heading); }
.field input,
.field textarea,
.field select{
  background: var(--surface);
  border: 1px solid var(--divider);
  color: var(--text-heading);
  padding: var(--s-xs) var(--s-xs);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--t-small);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field select{ appearance: none; cursor: pointer; padding-right: var(--s-l);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E635F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 16px; }
.field textarea{ resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder{ color: #A3A099; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-color: var(--verde-bosque);
  box-shadow: 0 0 0 3px rgba(78,127,99,.15);
}
.field-help{ font-size: var(--t-eyebrow); color: var(--text-body); margin: 0; }
.form-status.is-visible{ display: block; }
.form-status.ok{ background: rgba(78,127,99,.1); color: var(--verde-bosque-dim); }
.form-status.err{ background: rgba(216, 211, 202, .5); color: var(--basalto); border-left: 3px solid var(--gris-roca); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ padding: var(--space-5) 0 var(--space-3); border-top: 1px solid var(--divider); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: var(--space-4);
  align-items: start;
}
.footer-col h4{
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--space-2);
}
.footer-col ul{ display: flex; flex-direction: column; gap: var(--s-2xs); }
.footer-col a{ font-size: var(--t-small); color: var(--text-body); transition: color 200ms var(--ease); }
.footer-col a:hover{ color: var(--text-heading); }
.footer-brand .logo img{ height: 52px; }
.footer-brand p{ margin-top: var(--s-2xs); color: var(--text-body); font-size: var(--t-small); max-width: 30ch; }
.footer-descriptor{ font-weight: 600; color: var(--text-heading) !important; }
.footer-slogan{ margin-top: var(--s-3xs) !important; }
.footer-pending{ font-size: var(--t-small); color: var(--text-body); opacity: .55; cursor: default; }
.footer-bottom{ margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--divider); font-size: var(--t-eyebrow); color: var(--text-body); }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 120;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--verde-bosque);
  color: var(--niebla);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.wa-float svg{ width: 28px; height: 28px; }
.wa-float:hover{ background: var(--verde-bosque-dim); transform: translateY(-2px); }
.wa-float:focus-visible{ outline: 2px solid var(--basalto); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition: none; }
  .wa-float:hover{ transform: none; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
/* Solo se anima el desplazamiento. Antes tambien se animaba la opacidad y a
   mitad de scroll los titulos quedaban como texto fantasma; ahora el texto
   esta a plena opacidad desde el primer fotograma. */
/* 3.6: desvanecido y 12px, 300ms, una sola vez. */
/* 1.2 · El estado por defecto es VISIBLE. La animacion es un extra que solo
   se activa si el guion esta vivo Y la pagina ya cargo. Antes era al reves y
   bastaba con que el observador no disparara para dejar 44 de 50 bloques en
   opacity:0. Sin JavaScript, la pagina se ve entera. */
.reveal{
  opacity: 1; transform: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
html.js-ready .reveal:not(.is-visible){ opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce){
  html.js-ready .reveal:not(.is-visible){ opacity: 1; transform: none; }
  .reveal{ transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .routes-grid{ grid-template-columns: 1fr; }
  .offer-grid--2, .offer-grid--3{ grid-template-columns: 1fr; }
  .guarantee-grid{ grid-template-columns: 1fr; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .booking{ grid-template-columns: 1fr; }
  .booking-frame{ height: 640px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .cycle-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .announce-full{ display: none; }
  .announce-short{ display: inline; }
  .section{ padding: var(--space-5) 0; }
  .cycle-grid{ grid-template-columns: 1fr; }
  .announce-inner{ font-size: var(--t-eyebrow); padding-right: var(--space-5); }
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
  /* el flotante no debe tapar el ultimo elemento del pie */
  .site-footer{ padding-bottom: calc(var(--space-3) + 72px); }
}


/* La navegacion completa mide 763px y el contenedor del encabezado 753 en
   una tableta en vertical: la pagina se desplazaba de lado. El menu
   hamburguesa, que ya existia, se adelanta de 720 a 980. El resto del
   layout movil sigue entrando a 720. */
@media (max-width: 1024px){
  .main-nav ul, .nav-btns{ display: none; }
  .nav-toggle{ display: block; }
  .main-nav.is-open{
    position: fixed;
    left: 0; right: 0;
    top: var(--nav-top, 73px);
    height: calc(100vh - var(--nav-top, 73px));
    height: calc(100dvh - var(--nav-top, 73px));
    z-index: 95;
    background: var(--surface);
    display: flex; flex-direction: column;
    padding: var(--space-4) var(--space-3) var(--space-5);
    gap: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open ul{ display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--t-lead); }
  .main-nav.is-open .nav-btns{ display: flex; flex-direction: column; align-items: stretch; }
  .main-nav.is-open .nav-btns .btn{ justify-content: center; }
  .main-nav.is-open .nav-social{
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--divider);
  }
  .main-nav.is-open .nav-social a{
    display: inline-flex; align-items: center; gap: var(--s-xs);
    font-weight: 600; font-size: var(--t-small); color: var(--text-heading);
  }
  .main-nav.is-open .nav-social svg{ width: 20px; height: 20px; color: var(--acento-texto); flex-shrink: 0; }
  body.nav-open{ overflow: hidden; }
}

@media (max-width: 720px){
  .badge-full{ display: none; }
  .badge-short{ display: inline; }
}
.consent{
  display: flex; align-items: flex-start; gap: var(--s-2xs);
  font-size: var(--t-small); font-weight: 400 !important;
  color: var(--text-body) !important;
  line-height: 1.5; cursor: pointer;
}
.consent input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: var(--s-3xs);
  flex-shrink: 0; accent-color: var(--verde-bosque); cursor: pointer;
}
.consent input[type="checkbox"]:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 2px; }
.consent a{ color: var(--acento-texto); font-weight: 600; text-decoration: underline; }
.privacy-notice{
  font-size: var(--t-eyebrow); color: var(--text-body); margin: 0;
  padding: var(--s-xs) var(--s-xs);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
}
.privacy-notice a{ color: var(--acento-texto); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Pagina legal
   ========================================================================== */
.legal{ padding: var(--space-6) 0 var(--space-5); }
.legal .wrap{ max-width: 780px; }
.legal h1{ font-size: var(--t-display); margin-top: var(--space-2); }
.legal-meta{ margin-top: var(--space-3); font-size: var(--t-small); color: var(--text-body); }
.legal-intro{ margin-top: var(--space-4); font-size: var(--t-small); }
.legal-toc{
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}
.legal-toc h2{ font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-texto); margin-bottom: var(--space-2); }
.legal-toc ol{ padding-left: 1.2rem; list-style: decimal; display: flex; flex-direction: column; gap: var(--s-2xs); }
.legal-toc a{ font-size: var(--t-small); color: var(--text-body); }
.legal-toc a:hover{ color: var(--text-heading); text-decoration: underline; }
.legal section{ margin-top: var(--space-5); }
.legal h2{ font-size: var(--t-h2); margin-bottom: var(--space-2); scroll-margin-top: 110px; }
.legal h3{ font-size: var(--t-small); margin-top: var(--space-3); margin-bottom: var(--s-3xs); }
.legal p{ font-size: var(--t-small); margin-top: var(--space-2); }
.legal a{ color: var(--acento-texto); text-decoration: underline; }
.legal-list{ margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--s-2xs); }
.legal-list li{ display: flex; gap: var(--s-2xs); font-size: var(--t-small); }
.legal-list li::before{ content:""; width:5px; height:5px; margin-top: var(--s-2xs); border-radius:50%; background: var(--verde-bosque); flex-shrink:0; }
.legal-data{ margin-top: var(--space-2); display: grid; grid-template-columns: minmax(0,240px) 1fr; gap: var(--s-2xs) var(--space-3); font-size: var(--t-small); }
.legal-data dt{ font-weight: 600; color: var(--text-heading); }
.legal-data dd{ margin: 0; }
.legal-gloss{ margin-top: var(--space-2); }
.legal-gloss dt{ font-weight: 600; color: var(--text-heading); margin-top: var(--space-2); font-size: var(--t-small); }
.legal-gloss dd{ margin: .2rem 0 0; font-size: var(--t-small); }
.legal-aviso blockquote{
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-left: 3px solid var(--verde-bosque);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.legal-aviso blockquote p{ margin: 0; }
@media (max-width: 720px){
  .legal-data{ grid-template-columns: 1fr; gap: var(--s-3xs); }
  .legal-data dd{ margin-bottom: var(--s-2xs); }
}

/* ==========================================================================
   Preguntas frecuentes (AEO / GEO)
   ========================================================================== */
/* Una sola columna y acordeon: cerrado por defecto salvo la primera. */
.faq-list{ display: grid; grid-template-columns: 1fr; gap: var(--space-2); max-width: 820px; }
.faq-item{
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 0;
}
.faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:focus-visible{
  outline: 2px solid var(--verde-bosque);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.faq-item h3{ font-size: var(--t-body); line-height: 1.3; }
.faq-item .chev{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--acento-texto);
  transition: transform 200ms var(--ease);
}
.faq-item[open] .chev{ transform: rotate(180deg); }
.faq-body{ padding: 0 var(--space-4) var(--space-4); }
.faq-item p{ margin-top: var(--space-2); font-size: var(--t-small); color: var(--text-body); }
.faq-body p:first-child{ margin-top: 0; }

@media (prefers-reduced-motion: reduce){
  .faq-item .chev{ transition: none; }
}


/* ==================================================================== */
/* Banner de consentimiento                                             */
/* Va por encima del globo de WhatsApp (120), que se aparta mientras     */
/* el banner esta abierto.                                               */
/* ==================================================================== */
.consent-banner{
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 150;
  max-width: 560px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(calc(100% + var(--space-4)));
  transition: transform 280ms ease;
}
.consent-banner.is-open{ transform: none; }
.consent-inner{ display: flex; flex-direction: column; gap: var(--space-2); }
.consent-banner p{
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-body);
}
.consent-banner a{
  color: var(--acento-texto);
  font-weight: 600;
  text-decoration: underline;
}
.consent-acciones{ display: flex; gap: var(--space-1); flex-wrap: wrap; }
.consent-acciones .btn{ flex: 1 1 12rem; justify-content: center; }

/* Mientras el banner esta abierto el globo de WhatsApp se le monta encima
   en pantallas angostas. Se aparta hasta que el visitante decida. */
body.consent-abierto .wa-float{ opacity: 0; visibility: hidden; }
.wa-float{ transition: opacity 200ms ease, transform 200ms ease; }

@media (prefers-reduced-motion: reduce){
  .consent-banner{ transition: none; }
}

/* --------------------------------------------------------------------- */
/* Marcas de obligatorio / opcional en las casillas del formulario        */
/* --------------------------------------------------------------------- */
.consent-marca{
  display: inline-block;
  margin-left: .35em;
  padding: var(--s-3xs) var(--s-2xs);
  font-style: normal;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  color: var(--acento-texto);
  background: rgba(78, 127, 99, .10);
}
.consent-opcional{
  color: var(--gris-roca);
  background: rgba(94, 99, 95, .10);
}

/* Pie de fuente de la cifra de industria: debe leerse como respaldo, no como
   parte de la afirmacion. */
.stat-fuente{
  display: block;
  margin-top: var(--space-2);
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  color: rgba(244, 242, 237, .62);
}

/* Dos formas de trabajar: la rejilla de rutas pasa de tres columnas a dos. */
.routes-grid--2{ grid-template-columns: repeat(2, 1fr); }

/* Letra pequena que acota el alcance, para que "contenido" no se lea como
   una obligacion sin limite para ninguna de las dos partes. */
.scope-note{
  margin-top: var(--space-3);
  font-size: var(--t-eyebrow);
  line-height: 1.6;
  color: var(--text-body);
}

@media (max-width: 1024px){
  .routes-grid--2{ grid-template-columns: 1fr; }
}

/* ==================================================================== */
/* Paginas de caso: /trabajo/<slug>/                                     */
/* ==================================================================== */
.caso{ padding-top: var(--space-4); }

.migas{
  font-size: var(--t-eyebrow);
  color: var(--text-body);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  align-items: center;
}
.migas a{ color: var(--acento-texto); font-weight: 600; }
.migas a:hover{ text-decoration: underline; }
.migas span[aria-current]{ color: var(--text-heading); font-weight: 600; }

.caso-head{ max-width: 780px; }
.caso-head h1{
  font-size: var(--t-display);
  margin-top: var(--s-2xs);
  line-height: 1.1;
}

/* Las mismas etiquetas del portafolio, pero fuera de la portada de imagen. */
.real-tag--suelta,
.concept-tag--suelta{
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
  position: static;
}
.real-tag--suelta{ background: var(--basalto); color: var(--niebla); }
.concept-tag--suelta{ background: var(--piedra); color: var(--basalto); }

.caso-cifras{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-xs);
  margin-top: var(--space-3);
}
.caso-cifras li{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--text-heading);
  background: var(--surface);
  border: 1px solid var(--divider);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}

.caso-cover{
  margin: var(--space-5) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark-panel);
  /* 3/2 es la proporcion real de las piezas: recorte practicamente nulo. */
  aspect-ratio: 3 / 2;
}
.caso-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.caso-cuerpo{ margin-top: var(--space-5); max-width: 68ch; }
.caso-cuerpo .case-block{ margin-top: var(--space-5); }
.caso-cuerpo .case-block:first-child{ margin-top: 0; }
.caso-cuerpo .case-block h2{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--s-2xs);
}
.caso-cuerpo .case-block p{
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--text-heading);
}

.caso-galeria{
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.caso-galeria img{
  width: 100%;
  /* height:auto es obligatorio: sin el, el atributo height del HTML gana y la
     caja se estira a la altura natural (327x933 medidos), con lo que
     object-fit:cover recortaba el 77% de una imagen apaisada. Las piezas de un
     caso no se recortan: se ven enteras. */
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  display: block;
}

.caso-servicios{ margin-top: var(--space-5); }
.caso-servicios h2{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--space-2);
}
.services-used{ display: flex; flex-wrap: wrap; gap: var(--s-2xs); }
.services-used span{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  background: var(--piedra);
  color: var(--text-heading);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}

.caso-cierre{
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  text-align: center;
}
.caso-cierre h2{ font-size: var(--t-h1); }
.caso-cierre p{ margin-top: var(--space-2); color: var(--text-body); }
.caso-acciones{
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------- */
/* Cifras de alcance en la tarjeta resumida del portafolio                */
/* --------------------------------------------------------------------- */
.case-cifras{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  margin-top: var(--space-2);
}
.case-cifras li{
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--acento-texto);
  background: rgba(78, 127, 99, .10);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
}

/* La tarjeta paso de <button> a <a>: mantiene el mismo comportamiento. */
.case-card{ display: flex; flex-direction: column; text-decoration: none; color: inherit; }

@media (max-width: 1024px){
  .caso-galeria{ grid-template-columns: 1fr; }
  .caso-cover{ aspect-ratio: 3 / 2; }
}

/* La garantia larga se fue de las tarjetas de plan: ahora es una linea con
   enlace a #garantias, la unica version vigente del compromiso. */
.offer-commitment a{
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.offer-commitment a:hover{ color: var(--basalto); }


/* ====================================================================== */
/* PRESENTACION PROGRESIVA EN MOVIL                                        */
/* Todo lo que sigue vive por debajo de 720px, que es donde este sitio pasa */
/* a movil: el mismo ancho al que aparece el menu hamburguesa.              */
/* ====================================================================== */

/* Texto solo para lectores de pantalla. */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Los controles nacen con [hidden]; el JS los descubre solo en movil. Asi,
   si el JS falla, no aparece un selector que no selecciona nada. */
.svc-selector[hidden],
.plan-tabs[hidden],
.plan-comparar[hidden]{ display: none; }

.svc-pregunta{
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}
.svc-opciones{ display: flex; flex-wrap: wrap; gap: var(--s-2xs); }
.svc-opcion,
.plan-tab{
  flex: 1 1 auto;
  padding: var(--s-xs) var(--s-xs);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-body);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.svc-opcion:hover,
.plan-tab:hover{ border-color: var(--verde-bosque); color: var(--acento-texto); }
.svc-opcion.is-active,
.plan-tab.is-active{
  background: var(--basalto);
  border-color: var(--basalto);
  color: var(--niebla);
}
.svc-opcion:focus-visible,
.plan-tab:focus-visible{
  outline: 2px solid var(--verde-bosque);
  outline-offset: 2px;
}

.plan-tabs{ display: flex; gap: var(--s-2xs); margin-bottom: var(--space-3); }

/* Comparador: tabla ancha dentro de un contenedor que hace scroll el solo,
   nunca la pagina. */
.plan-comparar{
  margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}
.plan-comparar summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
}
.plan-comparar summary::-webkit-details-marker{ display: none; }
.plan-comparar summary:focus-visible{
  outline: 2px solid var(--verde-bosque);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.plan-comparar .chev{ width: 20px; height: 20px; color: var(--acento-texto); transition: transform 200ms var(--ease); flex: 0 0 auto; }
.plan-comparar[open] .chev{ transform: rotate(180deg); }
.plan-tabla-wrap{ overflow-x: auto; padding: 0 var(--space-3) var(--space-3); }
.plan-tabla{ width: 100%; border-collapse: collapse; font-size: var(--t-eyebrow); }
.plan-tabla th,
.plan-tabla td{
  padding: var(--s-2xs) var(--s-2xs);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.plan-tabla thead th{
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acento-texto);
  white-space: nowrap;
}
.plan-tabla tbody th{ font-weight: 400; color: var(--text-body); }
.plan-tabla td{ font-weight: 600; color: var(--text-heading); }
.plan-tabla tr:last-child th,
.plan-tabla tr:last-child td{ border-bottom: none; }

@media (prefers-reduced-motion: reduce){
  .svc-opcion,
.plan-tab,
.plan-comparar .chev{ transition: none; }
}

/* ---------------------------------------------------------------------- */
/* 2.3 · La seccion "Que hacemos" se convierte en selector                 */
/* Las reglas cuelgan de [data-vista], que solo existe cuando el JS corre.  */
/* ---------------------------------------------------------------------- */
@media (max-width: 720px){

  #que-hacemos[data-vista] .offer-card[data-servicio]{ display: none; }
  #que-hacemos[data-vista="identidad"] .offer-card[data-servicio="identidad"],
  #que-hacemos[data-vista="medicion"]  .offer-card[data-servicio="medicion"]{ display: flex; }

  /* Con identidad o medicion seleccionadas, el bloque de planes sobra entero;
     con operacion mensual, sobra el de proyectos unicos. */
  #que-hacemos[data-vista="identidad"] .offer-group[data-grupo="mensual"],
  #que-hacemos[data-vista="medicion"]  .offer-group[data-grupo="mensual"]{ display: none; }
  #que-hacemos[data-vista="mensual"]   .offer-group[data-grupo="unicos"]{ display: none; }

  /* Dentro de operacion mensual manda la pestana activa. */
  #que-hacemos[data-vista="mensual"] .offer-group[data-plan-activo] .offer-card[data-plan]{ display: none; }
  #que-hacemos[data-vista="mensual"] .offer-group[data-plan-activo="sendero"] .offer-card[data-plan="sendero"],
  #que-hacemos[data-vista="mensual"] .offer-group[data-plan-activo="ascenso"] .offer-card[data-plan="ascenso"],
  #que-hacemos[data-vista="mensual"] .offer-group[data-plan-activo="cumbre"]  .offer-card[data-plan="cumbre"]{ display: flex; }

  /* El titulo del grupo repite lo que ya dice el selector. */
  #que-hacemos[data-vista] .offer-group-title{ display: none; }

  /* Expedicion no es un punto de entrada: solo tiene sentido como contexto
     en escritorio, y en movil ocupa una pantalla que nadie necesita. */
  #que-hacemos[data-vista] .expedicion-card{ display: none; }

  /* El recorrido completo se lee mejor en escritorio; en movil el selector
     ya cumple esa funcion. */
  #que-hacemos[data-vista] .section-aside{ display: none; }

  .svc-selector{ margin-bottom: var(--space-4); }
  .offer-card{ padding: var(--space-3); }
}


/* ---------------------------------------------------------------------- */
/* 2.7 · Contacto                                                          */
/* ---------------------------------------------------------------------- */

/* El resumen corto solo existe en movil; en escritorio mandan los dos
   parrafos largos que ya estaban. */
.booking-lead-movil{ display: none; }

/* ---------------------------------------------------------------------- */
/* 2.8 · Barra inferior persistente                                        */
/* ---------------------------------------------------------------------- */
.cta-barra[hidden]{ display: none; }
.cta-barra{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--s-2xs) var(--space-2) calc(var(--s-xs) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--divider);
  box-shadow: 0 -6px 20px rgba(26, 29, 27, .08);
  transform: translateY(110%);
  transition: transform 260ms var(--ease);
}
.cta-barra.is-visible{ transform: none; }
/* El banner de consentimiento vive tambien abajo (z-index 150). Mientras este
   abierto la barra se retira, igual que el globo de WhatsApp: dos barras
   apiladas en el borde inferior de un telefono no dejan ver nada. */
body.consent-abierto .cta-barra.is-visible{ transform: translateY(110%); }
.cta-barra .btn{ flex: 1 1 auto; justify-content: center; }
.cta-barra-wa{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--verde-bosque);
  color: var(--niebla);
}
.cta-barra-wa svg{ width: 24px; height: 24px; }
.cta-barra-wa:hover{ background: var(--verde-bosque-dim); }
.cta-barra-wa:focus-visible{ outline: 2px solid var(--basalto); outline-offset: 2px; }

/* Hueco para que la barra no tape el final del pie. Se reserva SIEMPRE que la
   barra exista, no solo cuando este visible: si el relleno apareciera y
   desapareciera con ella, el alto del documento cambiaria en mitad del scroll
   y la pagina daria un salto. La barra mide 77px, mas el area segura de los
   telefonos con indicador inferior. */
@media (max-width: 720px){
  body.tiene-barra{ padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  .cta-barra{ transition: none; }
}

@media (max-width: 720px){

  /* En movil se ve primero la promesa corta y los dos botones. Los parrafos
     largos, el cierre y el enlace de respaldo sobran: el propio boton ya
     abre el calendario en una pestana nueva. */
  .booking-lead-movil{ display: block; }
  .booking-copy > p:not(.booking-lead-movil){ display: none; }
  .booking-actions{ flex-direction: column; align-items: stretch; }
  .booking-actions .btn{ justify-content: center; }
  .contact-secondary > summary .chev{
    width: 20px; height: 20px;
    color: var(--acento-texto);
    flex: 0 0 auto;
    transition: transform 200ms var(--ease);
  }
  .contact-secondary[open] > summary .chev{ transform: rotate(180deg); }

  /* La barra inferior reemplaza al globo flotante: nunca los dos a la vez.
     Se condiciona a que la barra exista de verdad (el JS marca el body), porque
     las paginas de caso y la de politica no la llevan y se quedarian sin
     ningun acceso a WhatsApp en movil. */
  body.tiene-barra .wa-float{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .contact-secondary > summary .chev{ transition: none; }
}


/* ====================================================================== */
/* TANDA 4 · Compactacion movil                                            */
/* Todo lo que sigue esta oculto en escritorio y solo aparece bajo 720px.  */
/* ====================================================================== */

/* Piezas exclusivas de movil: no existen en escritorio. */
.nav-rapida,
.df-compacto,
.scope-note-movil,
.case-frase,
.g-resumen{ display: none; }

.g-detalle > summary{ display: none; }

.ciclo-tabs[hidden]{ display: none; }

@media (max-width: 720px){

  /* ------------------------------------------------ 2.1 navegacion rapida */
  .nav-rapida{
    display: flex;
    gap: var(--s-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2) clamp(var(--space-3), 3vw, var(--space-5));
    background: var(--surface);
    border-bottom: 1px solid var(--divider);
  }
  .nav-rapida::-webkit-scrollbar{ display: none; }
  .nav-rapida a{
    flex: 0 0 auto;
    padding: var(--s-2xs) var(--s-xs);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    color: var(--text-heading);
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: var(--radius-pill);
  }
  .nav-rapida a:hover{ border-color: var(--verde-bosque); color: var(--acento-texto); }
  .nav-rapida a:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 2px; }

  /* --------------------------------------------------- 2.2 dos formas */
  .df-compacto{ display: block; }
  .df-pregunta{
    font-family: var(--font-display);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: var(--space-2);
  }
  .df-lista{ list-style: none; display: grid; gap: var(--space-2); }
  .df-lista li{
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
  }
  .df-lista strong{
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-small);
    color: var(--text-heading);
    margin-bottom: var(--s-3xs);
  }
  .df-lista span{ font-size: var(--t-small); color: var(--text-body); }

  /* El parrafo largo de la cabecera y la nota larga ceden el sitio. */
  #dos-formas .section-head > p{ display: none; }
  .scope-note{ display: none; }
  .scope-note-movil{
    display: block;
    margin-top: var(--space-3);
    font-size: var(--t-eyebrow);
    line-height: 1.6;
    color: var(--text-body);
  }
  /* Sin dimensionar, un <svg> sin width/height ocupa su tamano intrinseco
     (300px) como item flex y aplasta el texto a tres lineas. */
  .df-completo > summary .chev{
    flex: 0 0 auto;
    width: 20px; height: 20px;
    color: var(--acento-texto);
    transition: transform 200ms var(--ease);
  }
  .df-completo[open] > summary .chev{ transform: rotate(180deg); }

  /* --------------------------------------------------- 2.4 portafolio */
  /* El reto y la idea completos viven en la pagina del caso. */
  .case-card .case-block-sm{ display: none; }
  .case-frase{
    display: block;
    margin-top: var(--s-2xs);
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--text-body);
  }
  .case-cover{ height: 190px; }

  /* ------------------------------------------------------- 2.5 metodo */
  .ciclo-tabs{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2xs);
    margin-bottom: var(--space-3);
  }
  /* El ciclo paso de panel oscuro a niebla: estas pestanas estaban pintadas
     para el fondo anterior y quedaban en blanco sobre blanco. */
  .ciclo-tab{
    padding: var(--s-2xs) var(--s-2xs);
    font-family: var(--font-display);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--gris-roca);
    background: var(--blanco);
    border: 1px solid var(--piedra);
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  .ciclo-tab.is-active{
    background: var(--basalto);
    border-color: var(--basalto);
    color: var(--niebla);
  }
  .ciclo-tab:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 2px; }

  /* Un solo paso explicado a la vez. Sin JS no hay data-paso-activo y se
     apilan los cuatro, como hasta ahora. */
  .cycle-grid[data-paso-activo] .cycle-step{ display: none; }
  .cycle-grid[data-paso-activo="medir"]    .cycle-step[data-paso="medir"],
.cycle-grid[data-paso-activo="producir"] .cycle-step[data-paso="producir"],
.cycle-grid[data-paso-activo="invertir"] .cycle-step[data-paso="invertir"],
.cycle-grid[data-paso-activo="corregir"] .cycle-step[data-paso="corregir"]{ display: block; }
  /* El rotulo ya lo lleva la pestana. */
  .cycle-grid[data-paso-activo] .cycle-step .num{ display: none; }

  /* ---------------------------------------------------- 2.6 garantias */
  .g-resumen{ display: block; margin-top: var(--s-2xs); font-size: var(--t-small); color: var(--text-body); }
  .g-detalle > summary{
    display: inline-flex;
    align-items: center;
    gap: var(--s-2xs);
    margin-top: var(--space-2);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    color: var(--acento-texto);
    cursor: pointer;
    list-style: none;
  }
  .g-detalle > summary::-webkit-details-marker{ display: none; }
  .g-detalle > summary:focus-visible{ outline: 2px solid var(--verde-bosque); outline-offset: 2px; border-radius: var(--radius-sm); }
  .g-detalle > summary .chev{ width: 16px; height: 16px; transition: transform 200ms var(--ease); }
  .g-detalle[open] > summary .chev{ transform: rotate(180deg); }
  .g-detalle p{ margin-top: var(--space-2); font-size: var(--t-small); }
  .guarantee-card{ padding: var(--space-3); }

  /* ---------------------------------------------------------- 2.9 FAQ */
  /* Solo las cuatro primeras, hasta que pidan el resto. */
  /* Se muestran las cuatro primeras; el boton revela las cinco restantes. */
  .faq-list:not(.is-completa) .faq-item[data-faq="5"],
.faq-list:not(.is-completa) .faq-item[data-faq="6"],
.faq-list:not(.is-completa) .faq-item[data-faq="7"],
.faq-list:not(.is-completa) .faq-item[data-faq="8"],
.faq-list:not(.is-completa) .faq-item[data-faq="9"]{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .g-detalle > summary .chev{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════ */
/* SISTEMA · Tanda 1                                                       */
/* Todo lo que sigue es la capa nueva. Las secciones se van pasando a ella */
/* tanda por tanda; lo que todavia no se ha pasado sigue con lo anterior.  */
/* ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------- */
/* Tipografia                                                              */
/* ---------------------------------------------------------------------- */
.t-display{ font-family: var(--font-display); font-weight: 600; font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.02em; }
.t-h1{ font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.02em; }
.t-h2{ font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.01em; }
.t-h3{ font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.t-body{ font-size: var(--t-body); line-height: 1.6; }
.t-small{ font-size: var(--t-small); line-height: 1.5; }
.t-micro{
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ancho de lectura. Se aplica al parrafo, no al contenedor, para que las
   rejillas no hereden un limite que no les toca. */
.medida{ max-width: var(--medida); }

/* ---------------------------------------------------------------------- */
/* Ritmo de capitulos                                                      */
/* La pagina alterna claro y oscuro para que se lea en bloques. Cada        */
/* capitulo redefine los roles de color, asi los componentes de dentro no   */
/* tienen que saber sobre que fondo estan.                                  */
/* ---------------------------------------------------------------------- */
.cap{ padding: var(--e7) 0; }

.cap--claro{
  background: var(--niebla);
  --cap-texto:      var(--basalto);
  --cap-cuerpo:     var(--gris-roca);
  --cap-superficie: var(--blanco);
  --cap-borde:      var(--piedra);
  --cap-acento:     var(--verde-texto);
  --cap-condicion:  rgba(244, 242, 237, .6);
  --cap-btn-bg:     var(--basalto);
  --cap-btn-texto:  var(--niebla);
}

.cap--oscuro{
  background: var(--basalto);
  --cap-texto:      var(--niebla);
  --cap-cuerpo:     var(--gris-claro);
  --cap-superficie: var(--superficie-oscura);
  --cap-borde:      var(--borde-oscuro);
  --cap-acento:     var(--verde-claro);
  --cap-condicion:  var(--superficie-oscura);
  --cap-btn-bg:     var(--niebla);
  --cap-btn-texto:  var(--basalto);
}

.cap--oscuro,
.cap--oscuro .t-body,
.cap--oscuro .t-small{ color: var(--cap-cuerpo); }
.cap--oscuro h1,
.cap--oscuro h2,
.cap--oscuro h3,
.cap--oscuro h4,
.cap--oscuro .t-display{ color: var(--cap-texto); }
.cap--claro h1,
.cap--claro h2,
.cap--claro h3,
.cap--claro h4{ color: var(--cap-texto); }
.cap .t-micro{ color: var(--cap-acento); }

.contenedor{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--canal-movil);
}

/* ---------------------------------------------------------------------- */
/* Los dos estilos de numero · el punto critico del sistema                */
/* .precio es lo que el cliente nos paga. .condicion es lo que invierte en  */
/* medios. Nunca comparten linea ni tamano, y entre los dos va un divisor.  */
/* ---------------------------------------------------------------------- */
.precio{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cap-texto, var(--basalto));
}
/* El periodo va en su propia linea, siempre. Metido dentro de .precio como
   span, "Desde $3.900.000" envuelve a dos lineas en las tarjetas estrechas y
   el "/mes" cae solo en una tercera. Asi es predecible a cualquier ancho. */
.precio-periodo{
  display: block;
  margin-top: var(--s-3xs);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--cap-cuerpo, var(--gris-roca));
}

.divisor{
  height: 1px;
  margin: var(--e3) 0;
  background: var(--cap-borde, var(--piedra));
  border: 0;
}

/* El bloque de condicion siempre lleva rotulo y fondo propio. Sin rotulo no
   va: es la regla que evita que el umbral de inversion se lea como precio. */
.bloque-condicion{
  padding: var(--e2);
  border-radius: var(--radius-sm);
  background: var(--cap-condicion);
  border: 1px solid var(--cap-borde, var(--piedra));
}
.bloque-condicion .t-micro{ display: block; margin-bottom: var(--e1); }
.condicion{
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--cap-cuerpo, var(--gris-roca));
  margin: 0;
}
.condicion strong{ font-weight: 600; color: var(--cap-texto); }

/* ---------------------------------------------------------------------- */
/* Tarjeta                                                                 */
/* ---------------------------------------------------------------------- */
.tarjeta{
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--e4);
  border-radius: var(--radius-md);
  background: var(--cap-superficie);
  border: 1px solid var(--cap-borde);
  box-shadow: var(--shadow-soft);
}
.tarjeta--destacada{
  border-color: var(--verde-bosque);
  border-width: 2px;
  position: relative;
}
.tarjeta--destacada .tarjeta-etiqueta{
  position: absolute;
  top: 0; left: var(--e4);
  transform: translateY(-50%);
  padding: var(--s-2xs) var(--s-xs);
  border-radius: var(--radius-pill);
  /* Verde Bosque de relleno con texto niebla da 4,13:1 y no pasa AA a 13px.
     El derivado si: 5,44:1. El borde de la tarjeta se queda en Verde Bosque,
     que al no ser texto solo necesita 3:1. */
  background: var(--verde-texto);
  color: var(--niebla);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------- */
/* Botones                                                                 */
/* ---------------------------------------------------------------------- */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  min-height: 48px;
  padding: 0 var(--e3);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.boton--primario{ background: var(--cap-btn-bg); color: var(--cap-btn-texto); }
.boton--primario:hover{ opacity: .88; }
.boton--secundario{
  background: transparent;
  color: var(--cap-texto);
  border-color: var(--cap-borde);
}
.boton--secundario:hover{ border-color: var(--cap-acento); color: var(--cap-acento); }
.boton:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* Acordeon · solo FAQ y "ver alcance completo"                            */
/* ---------------------------------------------------------------------- */
.acordeon{
  border-radius: var(--radius-md);
  background: var(--cap-superficie);
  border: 1px solid var(--cap-borde);
}
.acordeon > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--cap-texto);
}
.acordeon > summary::-webkit-details-marker{ display: none; }
.acordeon > summary:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: -2px; border-radius: var(--radius-md); }
.acordeon .flecha{
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--cap-acento);
  transition: transform 200ms var(--ease);
}
.acordeon[open] > .flecha,
.acordeon[open] > summary .flecha{ transform: rotate(180deg); }
.acordeon-cuerpo{ padding: 0 var(--e3) var(--e3); }

/* ---------------------------------------------------------------------- */
/* Movimiento · discreto. Una sola vez, y respeta la preferencia.          */
/* ---------------------------------------------------------------------- */
.aparece{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.aparece.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .aparece{ opacity: 1; transform: none; transition: none; }
  .acordeon .flecha,
.boton{ transition: none; }
}

@media (min-width: 721px){
  .contenedor{ padding: 0 var(--canal-escritorio); }
}
@media (max-width: 720px){
  .cap{ padding: var(--e6) 0; }
}


/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 3 · Apertura                                                      */
/* ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- 5.1 */
.hero.cap{ padding: var(--e8) 0 var(--e7); }
.hero-etiqueta{ margin-bottom: var(--e3); }
.hero h1{ max-width: 16ch; }
.hero-lead{ margin-top: var(--e3); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.hero-support{ margin-top: var(--e3); color: var(--cap-cuerpo); }

/* ---------------------------------------------------------------- 5.2 */
.prueba{ padding: var(--e6) 0; }
.prueba-rotulo{ text-align: center; }
.prueba-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--e6);
  flex-wrap: wrap;
  margin-top: var(--e4);
}
.prueba-logos img{
  height: 40px;
  width: auto;
  /* Escala de grises al 60%: los logos acompanan, no compiten con la marca. */
  filter: grayscale(1);
  opacity: .6;
}
.dolor-card p{ margin: 0; }

/* ---------------------------------------------------------------- 5.4 */
.ruta-selector{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e5);
}
.ruta-opcion{
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  text-align: left;
  padding: var(--e4);
  border-radius: var(--radius-md);
  background: var(--cap-superficie);
  border: 2px solid var(--cap-borde);
  color: var(--cap-cuerpo);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.ruta-opcion .t-h3{ color: var(--cap-texto); }
.ruta-opcion:hover{ border-color: var(--cap-acento); }
.ruta-opcion.is-active{ border-color: var(--verde-bosque); background: var(--basalto); }
.ruta-opcion:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: 3px; }
.ruta-nota{ margin-top: var(--e3); color: var(--cap-cuerpo); }

/* ---------------------------------------------------------------- 5.5 */
.ruta-panel[hidden]{ display: none; }
.tabla-wrap{ margin-top: var(--e5); }
.tabla-rutas{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  text-align: left;
  /* Sin table-layout fijo las columnas se reparten por el largo del texto: la
     primera opcion se llevaba 305px y la de Faralion se quedaba en 188. Las
     cuatro alternativas tienen que pesar lo mismo para que la comparacion sea
     honesta a la vista. */
  table-layout: fixed;
}
.tabla-rutas col.col-criterio{ width: 16%; }
.tabla-rutas col.col-opcion{ width: 21%; }
.tabla-rutas th,
.tabla-rutas td{
  padding: var(--e2);
  border-bottom: 1px solid var(--cap-borde);
  vertical-align: top;
}
.tabla-rutas thead th{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--cap-texto);
  border-bottom: 2px solid var(--cap-borde);
}
/* La columna de Faralion se distingue sin gritar. */
.tabla-rutas thead th:last-child,
.tabla-rutas td:last-child{ background: var(--superficie-oscura); }
.tabla-rutas thead th:last-child{ color: var(--verde-claro); }
.tabla-rutas tbody th{
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cap-acento);
}
.tabla-rutas td{ color: var(--cap-cuerpo); }
/* En la ruta B, "quien une las partes" es la fila que decide la tabla. */
.tabla-rutas .fila-clave td,
.tabla-rutas .fila-clave th{
  background: rgba(143, 183, 154, .10);
  color: var(--cap-texto);
  font-weight: 600;
}
.tabla-rutas .fila-clave td:last-child{ background: rgba(143, 183, 154, .18); }

.ruta-honestidad{ margin-top: var(--e4); color: var(--cap-cuerpo); }
.tabla-fuente{ margin-top: var(--e5); color: var(--cap-cuerpo); opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════ */
/* MOVIL                                                                   */
/* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px){
  .hero.cap{ padding: var(--e6) 0; }
  .hero h1{ max-width: none; }
  .hero-actions{ flex-direction: column; align-items: stretch; }


  /* El selector son dos botones apilados de ancho completo, no pestanas
     apretadas. */
  .ruta-selector{ grid-template-columns: 1fr; }

  /* Una tabla es fila-mayor: las opciones son columnas. Para dar una tarjeta
     por opcion hay que transponerla, y eso el CSS no lo hace. Lo hace
     js/movil.js, que construye .ruta-tarjetas a partir de la misma tabla, para
     que no pueda haber dos versiones del contenido.
     Si el JS no corre, queda la tabla con scroll propio: no es lo ideal, pero
     es preferible a dejar el contenido inaccesible. */
  .tabla-wrap{ overflow-x: auto; }
  .ruta-panel[data-transpuesta] .tabla-wrap{ display: none; }

  .ruta-tarjetas{ display: grid; gap: var(--e3); margin-top: var(--e5); }
  .ruta-tarjeta{
    padding: var(--e3);
    border-radius: var(--radius-md);
    background: var(--cap-superficie);
    border: 1px solid var(--cap-borde);
  }
  /* La de Faralion va ultima y con el acento: que el visitante recorra las
     alternativas antes de llegar a la nuestra. */
  .ruta-tarjeta--faralion{ border-color: var(--verde-bosque); border-width: 2px; }
  .ruta-tarjeta h3{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-h3);
    color: var(--cap-texto);
    margin-bottom: var(--e2);
  }
  .ruta-tarjeta dl{ margin: 0; }
  .ruta-tarjeta dt{
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cap-acento);
    margin-top: var(--e2);
  }
  .ruta-tarjeta dd{
    margin: .2rem 0 0;
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--cap-cuerpo);
  }
  .ruta-tarjeta .dato-clave dd{ color: var(--cap-texto); font-weight: 600; }

  .prueba-datos{ flex-direction: column; align-items: center; gap: var(--e2); }
  .prueba-datos li + li{ padding-left: 0; }
  .prueba-datos li + li::before{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .ruta-opcion{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 4 · Oferta                                                        */
/* ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- 5.6 */
/* El ciclo pasa a niebla siguiendo la alternancia de 3.1. Pierde el panel
   oscuro, asi que el peso se lo dan la escala y el aire, no el fondo. */
.ciclo{ padding: var(--e8) 0; }
.ciclo .cycle-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e4);
  margin-top: var(--e7);
}
.ciclo .cycle-step{
  background: none;
  border: none;
  border-top: 2px solid var(--verde-bosque);
  border-radius: 0;
  padding: var(--e3) 0 0;
}
.ciclo .cycle-step .num{
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--verde-texto);
}
.ciclo .cycle-step h3{
  color: var(--basalto);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  margin-top: var(--e2);
}
.ciclo .cycle-step p{ color: var(--gris-roca); font-size: var(--t-small); margin-top: var(--e2); }

.ciclo .stat-callout{
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--piedra);
  align-items: start;
}
.ciclo .stat-callout .num{ color: var(--verde-texto); }
.ciclo .stat-callout .stat-label{ color: var(--verde-texto); }
.ciclo .stat-callout p{ color: var(--gris-roca); }
.ciclo .stat-fuente{ color: var(--gris-roca); }

/* ---------------------------------------------------------- 5.7 y 5.8 */
/* Las tarjetas de oferta ya llevan .tarjeta, asi que heredan los colores del
   capitulo. Se neutralizan los restos del sistema anterior. */
.offer-card.tarjeta{ background: var(--cap-superficie); border-color: var(--cap-borde); }
.cap--oscuro .offer-group-title,
.cap--oscuro .offer-head h4,
.cap--oscuro .expedicion-card h3{ color: var(--cap-texto); }
.cap--oscuro .offer-group-desc,
.cap--oscuro .offer-who,
.cap--oscuro .offer-duration,
.cap--oscuro .offer-fineprint,
.cap--oscuro .offer-spec span,
.cap--oscuro .plan-note,
.cap--oscuro .expedicion-card p{ color: var(--cap-cuerpo); }
.cap--oscuro .offer-spec strong{ color: var(--cap-texto); }
.cap--oscuro .offer-spec li{ border-bottom-color: var(--cap-borde); }
.cap--oscuro .line-code{ color: var(--cap-acento); background: rgba(143,183,154,.12); }
.cap--oscuro .offer-commitment{ color: var(--cap-acento); }
.cap--oscuro .offer-commitment a{ color: var(--cap-acento); }
.cap--oscuro .offer-commitment::before{ background: var(--verde-claro); }
.cap--oscuro .plan-note,
.cap--oscuro .expedicion-card{ background: var(--cap-superficie); border-color: var(--cap-borde); }
.cap--oscuro .divisor{ background: var(--cap-borde); }
.cap--oscuro .acordeon--alcance{ background: transparent; border-color: var(--cap-borde); }
.cap--oscuro .acordeon--alcance summary{ color: var(--cap-texto); }
.offer-brujula{ margin-top: var(--e3); }
.offer-brujula a{
  color: var(--cap-acento);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modalidades-grid .t-micro{ display: block; margin-bottom: var(--e2); }

.dato-destacado{
  margin-top: var(--e5);
  padding: var(--e4);
  border-radius: var(--radius-md);
  background: var(--cap-superficie);
  border: 1px solid var(--cap-borde);
  border-left: 3px solid var(--verde-bosque);
  max-width: var(--medida);
}
.dato-destacado p{ margin: 0; }
.dato-fuente{ margin-top: var(--e2) !important; color: var(--cap-cuerpo); }
.prod-incluye{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
}
.prod-incluye .t-micro{ display: block; margin-bottom: var(--e1); }
.prod-incluye p:last-child{ margin: 0; }
.prod-extras{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2) var(--e4);
  max-width: 900px;
}
.prod-extras li{
  position: relative;
  padding-left: var(--e3);
  font-size: var(--t-body);
  color: var(--cap-cuerpo);
}
.prod-extras li::before{
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde-bosque);
}

/* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  .ciclo .cycle-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .ciclo{ padding: var(--e6) 0; }
  .ciclo .cycle-grid{ grid-template-columns: 1fr; gap: var(--e3); margin-top: var(--e5); }
  .prod-incluye{ grid-template-columns: 1fr; }
  .prod-extras{ grid-template-columns: 1fr; }

  /* Las tarjetas de plan van en carrusel (3.4). ASCENSO arranca centrado por
     desplazamiento inicial, no por order: asi el orden visual y el del DOM
     coinciden y el teclado recorre lo mismo que se ve. */
  .offer-grid--3{ display: flex; flex-direction: row; }
}


/* Restos del sistema anterior que asumian fondo claro. Cuando una seccion pasa
   a capitulo oscuro, estos son los que se quedaban con color de texto oscuro
   sobre fondo oscuro. */
/* .section-head p.eyebrow (0,2,1) gana sobre .cap--oscuro .eyebrow (0,2,0),
   asi que hay que igualarle la especificidad. */
.cap--oscuro .eyebrow,
.cap--oscuro .section-head p.eyebrow{ color: var(--cap-acento); }
.cap--oscuro .aside-texto,
.cap--oscuro .g-resumen,
.cap--oscuro .section-head > p{ color: var(--cap-cuerpo); }
.cap--oscuro .g-detalle p{ color: var(--cap-cuerpo); }
.cap--oscuro .g-detalle > summary{ color: var(--cap-acento); }
.cap--oscuro .plan-note{ color: var(--cap-cuerpo); }
.cap--oscuro .plan-note strong{ color: var(--cap-texto); }
.cap--oscuro .guarantee-card h3{ color: var(--cap-texto); }

/* -------------------------------------------------------------- 5.15 */
.contacto-lead{ margin-top: var(--e3); }
.via .t-micro{ display: block; margin-bottom: var(--e2); }
.via .boton{ margin-top: var(--e3); align-self: start; }

/* El formulario sobre fondo oscuro. Todo esto existia asumiendo niebla. */
.cap--oscuro .contact-secondary{ border-top-color: var(--cap-borde); }
.cap--oscuro .contact-secondary > h3,
.cap--oscuro .contact-secondary > summary{ color: var(--cap-texto); }
.cap--oscuro .contact-secondary > summary{
  background: var(--cap-superficie);
  border-color: var(--cap-borde);
}
.cap--oscuro .contact-secondary-lead,
.cap--oscuro .field-help,
.cap--oscuro .privacy-notice,
.cap--oscuro .consent span,
.cap--oscuro .form-status{ color: var(--cap-cuerpo); }
.cap--oscuro .field label{ color: var(--cap-texto); }
/* 4.1 · Con el atajo `background` se reiniciaban repeticion, posicion y tamano
   del chevron del desplegable, y quedaba teselado por todo el campo. Se cambia
   por background-color, que solo toca el color. */
.cap--oscuro .field input,
.cap--oscuro .field select,
.cap--oscuro .field textarea{
  background-color: var(--cap-superficie);
  border-color: var(--cap-borde);
  color: var(--cap-texto);
}
/* Y se redeclaran por si alguna regla futura vuelve a usar el atajo. */
.field select{
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 16px;
}
.cap--oscuro .field input::placeholder,
.cap--oscuro .field textarea::placeholder{ color: var(--gris-claro); }
.cap--oscuro .field input:focus,
.cap--oscuro .field select:focus,
.cap--oscuro .field textarea:focus{
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(143,183,154,.20);
}
/* La flecha del desplegable venia dibujada en gris oscuro dentro de un SVG
   embebido; sobre fondo oscuro no se veia. */
.cap--oscuro .field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6ACA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.cap--oscuro .consent a,
.cap--oscuro .privacy-notice a,
.cap--oscuro .booking-fallback a{ color: var(--cap-acento); }
.cap--oscuro .consent-marca{ color: var(--cap-acento); background: rgba(143,183,154,.14); }
.cap--oscuro .consent-opcional{ color: var(--gris-claro); background: rgba(166,172,165,.14); }
.cap--oscuro .contact-email span{ color: var(--cap-cuerpo); }
.cap--oscuro .contact-email a{ color: var(--cap-acento); }
.cap--oscuro .booking-frame{ background: var(--cap-superficie); border-color: var(--cap-borde); }

/* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  .frentes{ grid-template-columns: 1fr; gap: var(--e3); }
}
@media (max-width: 720px){
  .via .boton{ align-self: stretch; justify-content: center; }
}

/* Estos dos conservaban fondo claro propio (--superficie-clara), asi que el
   texto claro del capitulo oscuro caia a 2,22:1 encima. */
.cap--oscuro .privacy-notice,
.cap--oscuro .contact-email{
  background: var(--cap-superficie);
  border-color: var(--cap-borde);
}

/* <picture> envuelve cada imagen para servir WebP con respaldo. Con
   display:contents el <img> sigue siendo el hijo directo de la rejilla o del
   flex, asi que ninguna regla de maquetacion existente cambia. */
picture{ display: contents; }


/* 1.3 · Las transiciones de entrada solo tocan opacity y transform, que el
   compositor resuelve sin repintar. Las de color quedan en los controles,
   donde son puntuales y responden a un gesto. */
@media (prefers-reduced-motion: reduce){
  .reveal, .aparece{ opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 2 · Densidad                                                      */
/* ══════════════════════════════════════════════════════════════════════ */

/* 2.2 · Encabezado de seccion a dos columnas. El titulo ocupa siete de doce
   y la bajada cuatro, alineadas por la linea base superior. Antes iban
   apilados en una sola columna al 55% del ancho, con el 40% derecho vacio. */
.section-head{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e3) var(--e4);
  align-items: start;
  margin-bottom: var(--e5);
  max-width: none;
}
.section-head > .eyebrow,
.section-head > .t-micro{ grid-column: 1 / -1; }
.section-head > h2,
.section-head > .section-head-main{ grid-column: 1 / span 7; margin: 0; }
.section-head > p,
.section-head > .section-aside{ grid-column: 9 / -1; margin: 0; max-width: none; }

/* La bajada se alinea con la primera linea del titulo, no con su bloque. */
.section-head > p{ padding-top: var(--s-2xs); }

@media (max-width: 1024px){
  .section-head{ display: block; }
  .section-head > h2{ margin-bottom: var(--e2); }
  .section-head > p{ padding-top: 0; }
}

/* 2.3 · Relleno vertical. Estaba en 96px arriba y abajo por seccion: casi dos
   pantallas de vacio repartidas por la pagina. */
.cap{ padding: var(--e6) 0; }
.section{ padding: var(--e6) 0; }
.hero.cap{ padding: var(--e7) 0 var(--e6); }
.prueba{ padding: var(--e5) 0; }
.ciclo{ padding: var(--e6) 0; }

/* Los margenes internos mas grandes bajan un escalon. */
.ciclo .cycle-grid{ margin-top: var(--e5); }
.ciclo .stat-callout{ margin-top: var(--e5); padding-top: var(--e4); }
.tabla-wrap,
.ruta-selector{ margin-top: var(--e4); }
.tabla-fuente{ margin-top: var(--e4); }
.offer-group{ margin-bottom: var(--e5); }

@media (max-width: 720px){
  .cap,
.section{ padding: var(--e5) 0; }
  .hero.cap{ padding: var(--e5) 0; }
  .prueba{ padding: var(--e4) 0; }
  .ciclo{ padding: var(--e5) 0; }
  .section-head{ margin-bottom: var(--e4); }
}


/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 3 · Movil: atajos, colapso y CTA                                  */
/* Todo cuelga de la media query: escritorio no cambia.                    */
/* ══════════════════════════════════════════════════════════════════════ */

.respuesta{ display: none; }
.hoja[hidden],
.hoja-fondo[hidden]{ display: none; }

/* ---------------------------------------------------------------- 3.1 */
.cta-barra{ gap: 0; padding: 0; }
.cta-barra-cta{ flex: 1 1 75%; border-radius: 0; min-height: 64px; }
.cta-barra-indice{
  flex: 0 0 25%;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-oscura);
  border: none;
  border-left: 1px solid var(--borde-oscuro);
  color: var(--niebla);
  cursor: pointer;
}
.cta-barra-indice svg{ width: 24px; height: 24px; }
.cta-barra-indice:focus-visible{ outline: 2px solid var(--verde-claro); outline-offset: -4px; }

.hoja-fondo{
  position: fixed; inset: 0;
  z-index: 140;
  background: rgba(26, 29, 27, .55);
}
.hoja{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 160;
  max-height: 78vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e2) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom));
  background: var(--basalto);
  border-top: 1px solid var(--borde-oscuro);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 260ms var(--ease);
}
.hoja.is-open{ transform: none; }
.hoja-asa{
  width: 40px; height: 4px;
  margin: 0 auto var(--e3);
  border-radius: 999px;
  background: var(--borde-oscuro);
}
/* WhatsApp encabeza la hoja: es la entrada de menor friccion del sitio y en la
   barra ya no cabe. */
.hoja-wa{
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2);
  margin-bottom: var(--e2);
  border-radius: var(--radius-md);
  background: var(--verde-texto);
  color: var(--niebla);
}
.hoja-wa svg{ width: 26px; height: 26px; flex: 0 0 auto; }
.hoja-wa span{ display: flex; flex-direction: column; }
.hoja-wa strong{ font-family: var(--font-display); font-weight: 600; font-size: var(--t-body); }
.hoja-wa em{ font-style: normal; font-size: var(--t-small); opacity: .85; }
.hoja-lista a{
  display: block;
  padding: 14px var(--e2);
  border-bottom: 1px solid var(--borde-oscuro);
  color: var(--niebla);
  font-size: var(--t-body);
}
.hoja-lista li:last-child a{ border-bottom: none; }
.hoja-lista a:focus-visible,
.hoja-wa:focus-visible{ outline: 2px solid var(--verde-claro); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce){ .hoja{ transition: none; } }

@media (max-width: 720px){

  /* -------------------------------------------------------------- 3.2 */
  .respuesta{
    display: block;
    padding: var(--e4) var(--canal-movil);
    background: var(--superficie-oscura);
    color: var(--niebla);
  }
  .respuesta-lista > div + div{ margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--borde-oscuro); }
  .respuesta dt{
    font-size: var(--t-micro); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--verde-claro);
    margin-bottom: var(--s-3xs);
  }
  .respuesta dd{ margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--gris-claro); }
  .respuesta dd strong{ color: var(--niebla); }

  /* -------------------------------------------------------------- 3.3 */
  .nav-rapida{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: visible;
    padding: 0;
    background: var(--piedra);
    border-bottom: 1px solid var(--piedra);
  }
  .nav-rapida a{
    display: flex; align-items: center;
    min-height: 56px;
    padding: 0 var(--e2);
    border: none; border-radius: 0;
    background: var(--niebla);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--basalto);
  }

  /* -------------------------------------------------------------- 3.4 */
  /* Carrusel de arrastre. La tarjeta ocupa el 85% para que se asome la
     siguiente: sin eso nadie sabe que hay mas. */
  .carrusel{
    display: flex;
    flex-direction: row;
    gap: var(--e2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--canal-movil);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Se sale del contenedor para que las tarjetas lleguen al borde. */
    margin-left: calc(var(--canal-movil) * -1);
    margin-right: calc(var(--canal-movil) * -1);
    padding: 0 var(--canal-movil) var(--e2);
  }
  .carrusel::-webkit-scrollbar{ display: none; }
  .carrusel > *{
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .carrusel-puntos{
    display: flex; justify-content: center; gap: var(--s-2xs);
    margin-top: var(--e2);
  }
  .carrusel-punto{
    width: 7px; height: 7px; padding: 0;
    border: none; border-radius: 50%;
    background: var(--cap-borde);
    cursor: pointer;
  }
  .carrusel-punto.is-active{ background: var(--cap-acento); }
  .carrusel-punto:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: 3px; }

  /* -------------------------------------------------------------- 3.5 */
  /* La comparacion pasa a acordeon: cuatro tarjetas apiladas serian cuatro
     veces la altura. Cerrada, cada opcion dice cuando tiene sentido. */
  .ruta-panel[data-acordeon] .tabla-wrap{ display: none; }
  .ruta-op--faralion{ border-color: var(--verde-bosque); border-width: 2px; }
  .ruta-op-nombre{
    display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3);
    color: var(--cap-texto);
  }
  .ruta-op-cuando{ margin-top: var(--s-3xs); font-size: var(--t-small); color: var(--cap-cuerpo); }
  .ruta-op .chev{ width: 20px; height: 20px; flex: 0 0 auto; color: var(--cap-acento); transition: transform 200ms var(--ease); }
  .ruta-op[open] .chev{ transform: rotate(180deg); }
  .ruta-op .dato-clave dd{ color: var(--cap-texto); font-weight: 600; }

  /* -------------------------------------------------------------- 3.6 */
  /* Casos: titulo, categoria y una linea de reto. El resto, en su pagina. */
  .case-card .case-block-sm{ display: none; }

  /* -------------------------------------------------------------- 3.9 */
  /* El hero cabe en una pantalla de 844px. */
  .hero.cap{ padding: var(--e4) 0 var(--e5); }
  .hero-etiqueta{ margin-bottom: var(--e2); }
  .hero h1{ font-size: var(--t-display); }
  .hero-lead{ margin-top: var(--e2); font-size: var(--t-small); }
  .hero-actions{ margin-top: var(--e3); }
  .hero-support{ margin-top: var(--e2); font-size: var(--t-micro); }
}

/* En escritorio los carruseles no existen: la rejilla manda. */
@media (min-width: 721px){
  .carrusel-puntos{ display: none; }
  .ruta-acordeones{ display: none; }
}

@media (max-width: 720px){
  .prod-plegado .chev{ width: 20px; height: 20px; flex: 0 0 auto; color: var(--cap-acento); transition: transform 200ms var(--ease); }
  .prod-plegado[open] .chev{ transform: rotate(180deg); }

  /* 3.6 · Modalidades en pestanas */
  .mod-tabs{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xs); margin-top: var(--e3); }
  .mod-tab.is-active{ background: var(--basalto); border-color: var(--basalto); color: var(--niebla); }
  .modalidades-grid[data-mod] .tarjeta{ display: none; }
  .modalidades-grid[data-mod="0"] .tarjeta:nth-child(1),
.modalidades-grid[data-mod="1"] .tarjeta:nth-child(2){ display: flex; }
}
@media (prefers-reduced-motion: reduce){ .prod-plegado .chev{ transition: none; } }


/* ---------------------------------------------------------------------- */
/* 4.2 · ASCENSO se distingue de verdad                                    */
/* Las tres tarjetas tenian el mismo fondo y el mismo color de borde: solo  */
/* cambiaba el grosor, que a simple vista no se nota.                      */
/* ---------------------------------------------------------------------- */
.offer-card.tarjeta--destacada{
  border-color: var(--verde-bosque);
  border-width: 1.5px;
  /* Un paso mas claro que sus hermanas, sobre el capitulo oscuro. */
  background-color: #2B302B;
  box-shadow: var(--shadow-lift);
}
.cap--oscuro .offer-card.tarjeta--destacada{ background-color: #2B302B; }

@media (min-width: 1025px){
  .offer-card.tarjeta--destacada{
    /* Sin scale: desplazaba el contenido y descuadraba las filas del
       subgrid. La jerarquia la dan el borde, el fondo y la elevacion. */
    z-index: 1;
  }
}
@media (prefers-reduced-motion: reduce){
  .offer-card.tarjeta--destacada{ transform: none; }
}

/* La pildora se monta sobre el borde superior. */
.tarjeta--destacada .tarjeta-etiqueta{ background: var(--verde-texto); }


/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 5 · Detalles de UI                                                */
/* ══════════════════════════════════════════════════════════════════════ */

/* 5.1 · El logo se leia como una mancha: al 60% sobre niebla no se distingue
   de que marca es, que es justo lo unico que tiene que hacer. */
.prueba-logos img{ opacity: .9; filter: grayscale(1) contrast(1.05); }
.prueba-logos img:hover{ opacity: 1; filter: none; }

/* 5.3 · "Desde" era parte del importe y partia el bloque en dos renglones de
   48px. Ahora es etiqueta, y el importe ocupa una sola linea. */
.precio-etiqueta{ display: block; margin: 0 0 var(--s-3xs); color: var(--cap-acento); }
/* El importe llevaba el margen inferior por defecto de <p>, que a 44px de
   fuente son 44px de hueco entre la cifra y "al mes". El periodo ya trae su
   propio margen de .25rem. */
.precio{ white-space: nowrap; margin-bottom: 0; }

/* 5.4 · El acordeon de alcance era una caja de 110px con el texto en dos
   renglones. Pasa a un enlace de una linea. */
.acordeon--alcance{ background: none; border: none; border-radius: 0; }
.acordeon--alcance > summary{
  min-height: 44px;
  padding: 0;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--cap-acento);
  border-top: 1px solid var(--cap-borde);
  padding-top: var(--e2);
}
.acordeon--alcance .acordeon-cuerpo{ padding: 0; }

/* 5.7 · El selector no parecia un selector: la opcion activa se oscurecia, y
   sobre un capitulo oscuro eso se lee como hundida, no como elegida. */
.ruta-opcion.is-active{
  background: var(--niebla);
  border-color: var(--verde-bosque);
}
.ruta-opcion.is-active .t-h3{ color: var(--basalto); }
.ruta-opcion.is-active .t-small{ color: var(--gris-roca); }
.ruta-opcion.is-active::after{
  content: "Viendo esta ruta";
  align-self: start;
  margin-top: var(--e1);
  padding: var(--s-3xs) var(--s-xs);
  border-radius: var(--radius-pill);
  background: var(--verde-texto);
  color: var(--niebla);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* 5.6 · "Planes y precios" era el unico titulo de seccion a 22px: se leia como
   una etiqueta suelta, no como el encabezado del capitulo. Toma la misma
   escala que los demas. La de #proyectos sigue siendo subtitulo y no cambia. */
h2.offer-group-title{ font-size: var(--t-h1); }

/* 5.7 · La tabla cambiaba entera al elegir ruta, pero el selector esta en la
   seccion anterior y nadie relacionaba una cosa con la otra. El rotulo que ya
   existia para lectores de pantalla ahora se ve: dice a que ruta corresponde
   lo que estas leyendo. */
.tabla-rutas > caption.tabla-rotulo{
  caption-side: top;
  text-align: left;
  margin-bottom: var(--e2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cap-acento);
}

/* La pildora "Recomendado" se monta 14px sobre el borde superior de la
   tarjeta, y `overflow-x: auto` del carrusel tambien recorta en vertical:
   quedaba cortada por la mitad. Se le abre sitio arriba. */
@media (max-width: 720px){
  .carrusel{ padding-top: var(--e2); }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 6 · Compresion de escritorio                                      */
/* Nada de contenido sale de la pagina: lo que cambia es el aire y el       */
/* numero de columnas. Movil queda como estaba tras la Tanda 3.            */
/* ══════════════════════════════════════════════════════════════════════ */

/* 6.1 · Aire estructural. El relleno de capitulo era 64+64 en quince
   secciones: 1.920px, tres pantallas enteras de vacio. 40px sigue separando
   un capitulo del siguiente sin que se toquen. */
:root{ --aire-capitulo: 24px; }

@media (min-width: 721px){
  .cap,
.section{ padding: var(--aire-capitulo) 0; }
  .ciclo{ padding: var(--aire-capitulo) 0; }
  .hero.cap{ padding: var(--e6) 0 var(--e5); }
  .prueba{ padding: var(--e4) 0; }

  /* El hueco bajo el encabezado repetia el del capitulo: dos aires seguidos. */
  .section-head{ margin-bottom: var(--e3); }
  .dark-panel .section-head{ margin-bottom: var(--e3); }

  /* Los margenes internos que aun venian del layout de una columna. */
  .ciclo .cycle-grid{ margin-top: var(--e4); }
  .ciclo .stat-callout{ margin-top: var(--e4); padding-top: var(--e3); }
  .tabla-wrap,
.ruta-selector{ margin-top: var(--e3); }
  .tabla-fuente{ margin-top: var(--e3); }
  .offer-group{ margin-bottom: var(--e4); }
}

/* 6.2 · El titulo se quedaba en siete de doce columnas y caia a tres lineas
   mientras la bajada, en cuatro, ocupaba dos. Con ocho columnas casi todos
   bajan a dos lineas. */
@media (min-width: 1025px){
  .section-head > h2,
  .section-head > .section-head-main{ grid-column: 1 / span 8; }
  .section-head > p,
  .section-head > .section-aside{ grid-column: 9 / -1; }
}

@media (min-width: 1025px){

  /* 6.3 · Nueve preguntas en una sola columna de 820px son 962px de alto con
     la mitad derecha de la seccion vacia. En dos columnas, al abrir una solo
     crece su fila. */
  .faq-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e2) var(--e4);
    align-items: start;
    max-width: none;
  }

  /* La rejilla de dos columnas de #contacto existia para poner el formulario
     al lado de las vias. Sin formulario, dejaba las dos tarjetas apiladas en
     una franja de cinco columnas: 612px para dos tarjetas de 280. Se retira y
     .vias vuelve a su propia rejilla de dos, a ancho completo. */
  #contacto .contenedor > .section-head,
#contacto .contenedor > .contacto-lead{ grid-column: 1 / -1; }

}

/* 6.8 · El importe conservaba el margen SUPERIOR por defecto de <p>: 44px de
   hueco entre la etiqueta "Desde" y la cifra. Se ve en la tarjeta como un
   salto que no corresponde a ninguna jerarquia. */
.precio{ margin-top: 0; }

@media (min-width: 721px){
  /* El ciclo dejaba 64px por debajo de la rejilla. */
  .ciclo .cycle-grid{ margin-bottom: var(--e4); }

  /* 6.9 · Aire interno de las tarjetas de plan. Trece bloques con margenes de
     24px suman mas que cualquiera de los bloques. No se toca el relleno del
     bloque de condicion ni su separacion del honorario. */
  .offer-card{ padding: var(--e3); }
  .offer-card .divisor{ margin: var(--e2) 0; }
  .offer-card .offer-spec{ margin-top: var(--e2); }
  .offer-card .offer-commitment{ margin: var(--e2) 0; }
  .offer-card .boton{ margin-top: var(--e2); }
}

/* ---------------------------------------------------------------------- */
/* 6.10 · Segunda pasada, ya con las alturas medidas bloque a bloque.      */
/* ---------------------------------------------------------------------- */
@media (min-width: 721px){
  .section-head{ margin-bottom: var(--e2); }
  .dark-panel .section-head{ margin-bottom: var(--e2); }
  .hero.cap{ padding: var(--e5) 0 var(--e4); }

  /* Una pregunta cerrada ocupaba 70px para una linea de texto. */
  .faq-item > summary{ padding: var(--e2) var(--e3); }

  /* La tabla llevaba 16px arriba y abajo en cada celda: 160px solo de aire
     repartido en cinco filas. */
  .tabla-rutas th, .tabla-rutas td{ padding: 12px 16px; }

  /* Un dato suelto con 48px de margen y 32 de relleno por lado. */
  .dato-destacado{ margin-top: var(--e3); padding: var(--e3); }
  .ciclo .stat-callout{ margin-top: var(--e3); padding-top: var(--e2); }
  .contact-email{ margin-top: var(--e2); padding: var(--e2) 0; }

  /* Las fotos de los casos crecian sin techo al estrecharse la tarjeta. */
  .case-card .case-media img,
  .case-card picture img{ aspect-ratio: 16 / 10; object-fit: cover; }
}

/* ---------------------------------------------------------------------- */
/* 6.11 · Tercera pasada. Dos bloques mas que estaban apilados sin razon.  */
/* ---------------------------------------------------------------------- */
@media (min-width: 1025px){

  /* Antes de ver un solo precio habia 424px de preambulo: titulo, dos
     bajadas y la nota de las dos formas de contratar, uno debajo del otro
     al 68% del ancho. Van en fila bajo el titulo. */
  #planes .offer-group{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e2) var(--e4);
    align-items: start;
  }
  #planes .offer-group > *{ grid-column: 1 / -1; }
  #planes .offer-group > .offer-group-desc,
  #planes .offer-group > .plan-note{
    grid-column: auto / span 1;
    margin: 0;
    max-width: none;
  }

  /* "Lo que se cotiza aparte" y "Como se cotiza" caben lado a lado; el
     primer bloque lleva una lista larga y se queda a ancho completo. */
  #produccion .contenedor{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3) var(--e5);
    align-items: start;
  }
  #produccion .contenedor > *{ grid-column: 1 / -1; }
  #produccion .contenedor > div:nth-of-type(3){ grid-column: 1 / span 1; }
  #produccion .contenedor > div:nth-of-type(4){ grid-column: 2 / span 1; }
  #produccion .prod-bloque{ margin-top: 0; }
}

/* ---------------------------------------------------------------------- */
/* 6.12 · Ultima pasada: los restos de aire que quedaban sueltos.          */
/* ---------------------------------------------------------------------- */
@media (min-width: 721px){
  /* La banda de confianza son 61px de contenido con 64 de relleno. */
  .prueba{ padding: var(--e3) 0; }
  .hero.cap{ padding: var(--e4) 0; }

  /* El formulario respiraba como si fuera la via principal, y es la tercera. */
  .contact-form{ gap: 12px; margin-top: var(--e2); }
  .contact-form .field{ gap: 6px; }
  .contact-secondary{ margin-top: var(--e2); }

  .modalidades-grid, .guarantee-grid{ margin-top: var(--e2); }
  .offer-fineprint{ margin-top: var(--e2); }
  .offer-brujula{ margin-top: var(--e2); }
  .expedicion-card{ margin-top: var(--e2); }
}

@media (min-width: 1025px){
  /* Mismo tratamiento que en planes: el titulo del grupo y su bajada no
     necesitan dos filas. */
  #proyectos .offer-group{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--e2) var(--e4);
    align-items: baseline;
  }
  #proyectos .offer-group > *{ grid-column: 1 / -1; }
  #proyectos .offer-group > .offer-group-title{ grid-column: 1 / span 4; }
  #proyectos .offer-group > .offer-group-desc{ grid-column: 5 / -1; margin: 0; max-width: none; }
}

/* 6.13 · Los ultimos 72px para bajar de 19 pantallas. */
@media (min-width: 721px){
  .offer-card{ padding: var(--e2); }
  .faq-list{ gap: var(--e1) var(--e4); }
  .dolores-lista{ margin-top: var(--e3); }
  .ciclo .cycle-grid{ margin-top: var(--e3); }
  .prod-cierre, .ruta-nota{ margin-top: var(--e3); }
}

/* 13 · El foco de los campos era un borde de 1px mas una sombra verde al 15%.
   Sobre el capitulo oscuro del contacto esa sombra queda en 1,2:1 contra el
   fondo: no se ve. Se le pone un anillo solido de 2px, que ademas cumple el
   grosor que pide WCAG 2.2 para la apariencia del foco. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline: 2px solid var(--cap-acento, var(--verde-bosque));
  outline-offset: 2px;
}

/* Red de seguridad. En escritorio el resumen del formulario va oculto porque
   el detalle deberia estar siempre abierto. Si alguna vez queda cerrado, sin
   esto no habria ningun control para abrirlo y el formulario seria
   inalcanzable. Con el detalle abierto —el caso normal— no se ve nada. */
@media (min-width: 721px){
  .contact-secondary:not([open]) > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: var(--e2) 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--cap-acento);
  }
  .contact-secondary:not([open]) > summary::-webkit-details-marker{ display: none; }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* RITMO · Se devuelve el aire que la Tanda 6 quito de mas                 */
/* La compresion llego hasta 24px de relleno de capitulo y 16px bajo el    */
/* titulo de seccion. Medido: entre el titulo y su contenido quedaban de 4 */
/* a 16px. Un titulo de 46px con cuatro pixeles debajo no se lee como      */
/* titulo, se lee como parte del parrafo. Prevalece el orden sobre la      */
/* altura: la pagina crece y se entiende.                                  */
/* ══════════════════════════════════════════════════════════════════════ */
:root{ --aire-capitulo: 64px; }

@media (min-width: 721px){
  .section-head{ margin-bottom: var(--e5); }
  .dark-panel .section-head{ margin-bottom: var(--e4); }
  .hero.cap{ padding: var(--e6) 0 var(--e5); }
  .prueba{ padding: var(--e4) 0; }

  /* La entrada de seccion: un parrafo que enmarca lo que viene, a medida de
     lectura y separado del titulo. Sustituye a la columna estrecha. */
  .section-head:has(+ .seccion-entrada){ margin-bottom: var(--e3); }
  .seccion-entrada{
    max-width: var(--medida);
    margin: 0 0 var(--e5);
    color: var(--cap-cuerpo);
  }

  /* Las tarjetas de plan volvieron a 16px de relleno y con trece bloques
     dentro eso es una lista, no una tarjeta. */
  .offer-card{ padding: var(--e3); }
  .offer-card .divisor{ margin: var(--e3) 0; }
  .offer-card .offer-spec{ margin-top: var(--e3); }
  .offer-card .offer-commitment{ margin: var(--e3) 0; }
  .offer-card .boton{ margin-top: var(--e3); }

  /* Margenes internos que se habian quedado en un escalon demasiado bajo. */
  .tabla-wrap,
.ruta-selector,
.guarantee-grid{ margin-top: var(--e4); }
  .ciclo .cycle-grid{ margin-top: var(--e4); margin-bottom: var(--e4); }
  .ciclo .stat-callout{ margin-top: var(--e5); padding-top: var(--e4); }
  .faq-list{ gap: var(--e2) var(--e5); }
  .offer-group{ margin-bottom: var(--e5); }
  .offer-fineprint,
.offer-brujula,
.expedicion-card{ margin-top: var(--e3); }
  .contact-form .field{ gap: var(--s-2xs); }
}

@media (min-width: 1025px){

  /* El preambulo de planes en tres columnas de 335px apretaba tres bloques de
     texto distintos uno al lado del otro. Dos columnas y la nota debajo. */
  #planes .offer-group{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e4) var(--e5);
  }
  #planes .offer-group > .plan-note{ grid-column: 1 / -1; }
}

/* El dato de industria se leia partido: "7,3" quedaba huerfano debajo de su
   rotulo y la frase arrancaba en "anos duran..." a la altura del rotulo, no
   del numero. Con `display: contents` en el envoltorio, rotulo, cifra y frase
   entran a la misma rejilla: el rotulo ocupa la primera linea y la cifra
   comparte linea base con la frase, que es como se lee la oracion. */
@media (min-width: 721px){
  .stat-callout{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--e3);
    row-gap: var(--e1);
    align-items: baseline;
  }
  .stat-callout > div{ display: contents; }
  .stat-callout .stat-label{ grid-column: 1 / -1; margin-bottom: 0; }
  .stat-callout p{ max-width: 52ch; }
  .stat-fuente{ display: block; margin-top: var(--e1); }
}

/* 2.3 · Solo tres pesos en todo el sitio: 400, 500 y 600. */
strong,
b{ font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════ */
/* 2.1 · Los pasos grandes se reducen en pantallas pequenas. Los cuatro   */
/* primeros no: 8px dentro de un boton significa lo mismo en cualquier    */
/* pantalla. 160px de vacio en un celular se leen como error de carga.    */
/* ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  :root{ --s-l: 40px; --s-xl: 72px; --s-2xl: 112px; --s-3xl: 152px; }
}
@media (max-width: 720px){
  :root{ --s-l: 32px; --s-xl: 56px; --s-2xl: 80px;  --s-3xl: 96px;  }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* 2.4 · Medida de linea. Los parrafos iban de 30 a 157 caracteres. El    */
/* optimo son 50-75. Un parrafo nunca ocupa el ancho del contenedor.      */
/* ══════════════════════════════════════════════════════════════════════ */
.prosa,
main section p,
.lead,
.seccion-entrada{ max-width: 62ch; }
/* Exime solo lo que de verdad no es texto corrido: celdas de tabla y pies de
   cifra de una linea. La primera version eximia tambien .plan-note,
   .field-help y .offer-group-desc, y esos son parrafos: la nota de planes se
   iba a 138 caracteres por linea, el doble del optimo. */
main section td p,
main section th p,
.precio-periodo,
.stat-fuente,
.consent{ max-width: none; }

/* El enlace de salto: fuera de pantalla hasta que recibe el foco. */
.salto-contenido{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--s-xs) var(--s-s);
  background: var(--verde-bosque); color: var(--niebla);
  border-radius: 0 0 8px 0;
}
.salto-contenido:focus{ left: 0; }

/* 2.5 · Canal lateral: 24px en movil, 32px de tableta en adelante. */
@media (min-width: 721px){ .wrap{ padding: 0 var(--s-m); } }

/* ══════════════════════════════════════════════════════════════════════ */
/* TANDA 4 · COMPONER                                                     */
/* ══════════════════════════════════════════════════════════════════════ */

/* 4.3 · Las dos fotografias de los Farallones. Van a sangre, en banda 21:9,
   con el texto encima. La legibilidad la da un degradado y NO un filter
   sobre la imagen: filter obliga al compositor a repintar en cada cuadro de
   scroll, que es exactamente por lo que quitamos el backdrop-filter. */
.banda-foto{
  position: relative;
  /* No lleva el truco de 100vw + margen negativo: las dos bandas ya son hijas
     directas de una <section> a ancho completo, y el 100vw incluye el ancho de
     la barra de scroll, con lo que la pagina se desplazaba de lado. */
  width: auto; margin-inline: 0;
  aspect-ratio: 21 / 9;
  /* Sin min-height. Con aspect-ratio, un minimo de altura obliga al navegador
     a ENSANCHAR el elemento para conservar la proporcion: 380 x 21/9 = 887px,
     y por debajo de ese ancho la banda se sale de la pagina. Medido a 390px:
     la banda daba 507 de ancho dentro de un padre de 390. El piso de altura
     se pone abajo, en movil, cambiando la proporcion por una altura fija. */
  max-width: 100%;
  display: grid; align-items: center;
  overflow: hidden;
  background: var(--basalto);
  padding: 0;
}
.banda-foto picture,
.banda-foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* De oscuro a la izquierda hacia claro a la derecha, porque el texto va a la
   izquierda y las dos fotos tienen su zona de interes a la derecha: el valle
   en cierre, la quebrada en respiro. No invertir ni centrar. */
.banda-foto::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26,29,27,0.88) 0%,
    rgba(26,29,27,0.72) 38%,
    rgba(26,29,27,0.30) 72%,
    rgba(26,29,27,0.18) 100%);
}
.banda-foto__texto{
  position: relative; z-index: 1;
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--s-s);
  width: 100%;
}
.banda-foto__texto p{
  max-width: 20ch;
  font-size: var(--t-h1);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--niebla);
  text-wrap: balance;
  margin: 0;
}
/* A 21:9 la banda queda demasiado baja en un celular. */
@media (max-width: 720px){
  /* Altura fija en vez de proporcion: a 390px de ancho, 4/3 daria 292px de
     alto y el piso de 380 volveria a ensanchar la banda. */
  .banda-foto{ aspect-ratio: auto; height: 380px; }
  .banda-foto img{ object-position: 62% center; }
}

/* ---------------------------------------------------------------------- */
/* 4 · Perfil de densidades. El relleno NO es uniforme: las secciones       */
/* minimas reciben el paso mas grande y las densas el mediano. Es al reves  */
/* de lo intuitivo y es justo lo que crea el ritmo: el vacio se concentra   */
/* donde no hay contenido que lo compita.                                   */
/* ---------------------------------------------------------------------- */
#top.cap{ padding: var(--s-3xl) 0; }   /* 1 hero      · minima */
#prueba.cap{ padding: var(--s-l) 0; }     /* 2 prueba    · minima */
#dolores{ padding: 0; }                /* 3 problema  · la banda es el descanso */
#comparacion.cap{ padding: var(--s-xl) 0; }    /* 4 rutas     · densa  */
#como-trabajamos.cap{ padding: var(--s-xl) 0; }/* 5 ciclo     · densa  */
#planes.cap{ padding: var(--s-xl) 0; }    /* 6 planes    · densa  */
#garantias.cap{ padding: var(--s-2xl) 0; }   /* 7 garantias · media  */
#portafolio.cap{ padding: var(--s-xl) 0; }    /* 8 casos     · media  */
#contacto.cap{ padding: 0 0 var(--s-l); }   /* 9 agendar   · banda + cierre */
#contacto .contenedor{ padding-top: var(--s-l); }

/* 4.5 · El cambio de fondo ya es el separador. Nada de divisores, degradados
   ni formas entre secciones. */
.cap + .cap{ border-top: none; }

/* 4.1 · El relleno escala con la importancia: es jerarquia hecha con aire,
   no con color ni con borde. */
.boton,
.btn,
.field input,
.field select,
.field textarea{ padding: var(--s-xs); }
.tarjeta,
.offer-card,
.guarantee-card,
.case-card{ padding: var(--s-s); }
.offer-card.tarjeta--destacada{ padding: 40px; }

/* La elevacion de ASCENSO estaba en 9px y no se lee. */
.offer-card.tarjeta--destacada{ box-shadow: 0 var(--s-s) var(--s-l) rgba(0,0,0,.35); }

/* 4.1 + 4.2 · Las dos reglas chocaban: 40px de relleno en ASCENSO la destacan,
   pero desplazan su contenido y descuadran las filas del subgrid respecto a
   SENDERO y CUMBRE. Se cumplen las dos sacando el aire hacia fuera: margen
   negativo de 16 y relleno vertical de 40. La caja sobresale arriba y abajo
   -16 + 40 = 24-, y el contenido arranca exactamente donde el de sus
   hermanas, que llevan 24 de relleno. La elevacion queda en el contenedor y
   no mueve nada de dentro. */
/* El relleno vertical distinto y las filas identicas son incompatibles en un
   subgrid: cualquier desplazamiento vertical de la tarjeta mueve sus filas.
   El aire extra de ASCENSO va en horizontal —40px a los lados contra 24—, que
   se lee como tarjeta mas importante y deja el ritmo vertical intacto. La
   jerarquia la completan el borde, el fondo y la elevacion. */
@media (min-width: 1025px){
  .offer-card.tarjeta--destacada{ padding: var(--s-s) 40px; margin-block: 0; }
}
@media (max-width: 1024px){
  .offer-card.tarjeta--destacada{ padding: var(--s-s); }
}

/* 4.1 · La pildora se monta centrada sobre el borde superior y deja --s-m
   antes del chip del plan, que antes chocaba con ella. */
.tarjeta--destacada .tarjeta-etiqueta{
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
}
/* Sin margen extra: con 40px de relleno superior la tarjeta ya libra la
   pildora, y ese margen era lo unico que descuadraba la primera fila. */

/* 4.2 · Cada hijo se ancla al comienzo de su fila. Sin esto, el estirado por
   defecto centraba el contenido dentro de filas que crecen segun la tarjeta
   mas alta, y las tres columnas quedaban desfasadas unos pixeles: el ojo lo
   lee como descuido. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 1025px){
    .offer-grid--3 .offer-card{ align-items: start; align-content: start; }
    .offer-grid--3 .offer-card > *{ align-self: start; }
    /* El CTA se estira en su fila: anclado solo abajo, si el texto envuelve
       en una tarjeta y no en otra, los tres botones arrancan a alturas
       distintas. Estirado coinciden arriba y abajo. */
    .offer-grid--3 .offer-card > .offer-cta{ align-self: stretch; display: flex;
      align-items: center; justify-content: center; }
  }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* B · Interruptor Con / Sin produccion                                   */
/* Dos opciones nombradas, no un on/off: por eso es radiogroup y no       */
/* checkbox. Sin JavaScript la pagina se queda en "Con produccion", que   */
/* es el estado del HTML y la forma recomendada.                          */
/* ══════════════════════════════════════════════════════════════════════ */
.modo{
  display: inline-flex;
  gap: var(--s-3xs);
  padding: var(--s-3xs);
  border-radius: 999px;
  background: var(--cap-superficie, var(--superficie-oscura));
  border: 1px solid var(--cap-borde, var(--borde-oscuro));
}
.modo-opcion{
  padding: var(--s-xs);
  border: none; border-radius: 999px;
  background: transparent;
  color: var(--cap-cuerpo, var(--gris-claro));
  font-family: var(--font); font-size: var(--t-small); font-weight: 500;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.modo-opcion.is-active{
  background: var(--verde-bosque);
  color: var(--niebla);
  font-weight: 600;
}
.modo-opcion:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: 3px; }
.modo-nota{
  margin: var(--s-2xs) 0 var(--s-m);
  color: var(--cap-cuerpo, var(--gris-claro));
}

/* Cero salto de layout al alternar: la cifra reserva su ancho y las tres
   tarjetas ya comparten filas por subgrid, asi que cambiar el texto no
   reflowa nada. tabular-nums da a cada digito el mismo avance. */
/* El min-width en ch reservaba 11 caracteres a 48px: unos 355px, mas que los
   304 de contenido de una tarjeta de 352. El importe se salia 28px y, al ser
   la tarjeta un subgrid, arrastraba a todos sus hermanos: 36 elementos fuera
   de su caja por una sola declaracion.
   No hacia falta: las tres tarjetas comparten columna de rejilla, asi que el
   ancho lo fija la mas ancha y ninguna reflowa al cambiar de modalidad. Lo que
   si evita el salto es tabular-nums, que da a cada digito el mismo avance. */
.precio{
  font-variant-numeric: tabular-nums;
  display: block;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* C · Asimetria del hero                                                 */
/* El hero usaba 760 de 1104px y dejaba 344 muertos a la derecha. Una      */
/* columna a 62ch dentro de un contenedor ancho es correcta; el problema   */
/* era que ese vacio no hacia nada. Se lee la reticula de 12 como 3+4, en  */
/* el ritmo 3│1│2│2│1│3: la sangria escalonada es la que crea la tension,  */
/* no un elemento metido a la derecha. Nada de imagen, cifra, forma ni     */
/* gradiente en ese espacio: el hero es el LCP.                            */
/* ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px){
  .hero .hero-content{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-m);
  }
  /* Eyebrow y titular arrancan en la columna 2, no en la 1. */
  .hero .hero-etiqueta{ grid-column: 2 / span 10; }
  .hero h1{ grid-column: 2 / span 9; }
  /* La bajada entra una columna mas y termina en la 9. */
  .hero .hero-lead{ grid-column: 3 / 10; max-width: none; }
  /* Los botones vuelven a la 2, alineados con el titular. */
  .hero .hero-actions{ grid-column: 2 / span 10; }
  .hero .hero-support{ grid-column: 2 / span 10; }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* Correcciones v4                                                        */
/* ══════════════════════════════════════════════════════════════════════ */

/* 1 · La nota de fuentes ocupaba 216px de los 1.484 de la seccion para ser
   aparato de respaldo, no comparacion. Plegada, ocupa una linea. */
.fuentes{ margin-top: var(--s-s); }
.fuentes > summary{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2xs);
  padding: var(--s-2xs) 0;
  max-width: 62ch;
  font-size: var(--t-small); font-weight: 600;
  color: var(--cap-acento);
  cursor: pointer; list-style: none;
}
.fuentes > summary::-webkit-details-marker{ display: none; }
.fuentes > summary:focus-visible{ outline: 2px solid var(--cap-acento); outline-offset: 2px; }
.fuentes .chev{ width: 18px; height: 18px; flex: 0 0 auto; transition: transform 150ms var(--ease); }
.fuentes[open] .chev{ transform: rotate(180deg); }
.fuentes .tabla-fuente{ margin: var(--s-2xs) 0 0; }

/* 2.2 · Ningun ultimo hijo lleva margen inferior: es el patron que la purga
   vino a erradicar y aqui dejaba 16px muertos al cierre de la seccion. */
.contenedor > :last-child,
.offer-group > :last-child{ margin-bottom: 0; }

/* 2 · El cierre: un boton primario y, debajo, las dos alternativas en una
   sola linea. La banda ya aporto el aire, asi que el bloque va con --s-l. */
.cierre-acciones{ margin-top: var(--s-m); }
.cierre-alternativas{
  margin: var(--s-s) 0 0;
  max-width: none;
  color: var(--cap-cuerpo);
}
.cierre-alternativas a{ color: var(--cap-acento); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════ */
/* Bloque de entrada · BRUJULA y ORIGEN                                   */
/* Todo visitante por debajo del umbral de $15.200.000 llegaba a una      */
/* pagina que le decia que no calificaba y no le ofrecia nada. Estas dos  */
/* no son taxonomia de portafolio: son los productos de entrada.          */
/* Tarjeta normal (--s-s), no la de ASCENSO, y fuera del carrusel de los  */
/* planes mensuales: son otra cosa y mezclarlas reabre la confusion       */
/* umbral/precio.                                                         */
/* ══════════════════════════════════════════════════════════════════════ */
.entrada{ margin-top: var(--s-l); }
.entrada-pregunta{
  margin: 0 0 var(--s-s);
  max-width: 62ch;
  color: var(--cap-texto);
  font-family: var(--font-display); font-weight: 600;
}
.entrada-grid{ display: grid; gap: var(--s-s); }
.entrada-card{
  display: flex; flex-direction: column;
  align-items: start;
  gap: var(--s-2xs);
}
.entrada-card .t-h3{ margin: 0; }
.entrada-card .entrada-precio{
  margin: var(--s-2xs) 0 0;
  font-size: var(--t-h2);
  min-width: 0;
}
.entrada-card .precio-periodo{ margin: 0; }
.entrada-card .entrada-quien{
  margin: var(--s-2xs) 0 var(--s-xs);
  color: var(--cap-cuerpo);
  max-width: none;
}
.entrada-card .boton{ margin-top: auto; }

@media (min-width: 721px){
  .entrada-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-m); }
}