/* ============================================================
   CAPA DE PRESENTACIÓN — JM Rivas Consultores
   No cambia una sola palabra ni un solo valor. Solo luz, aire y
   movimiento. Paleta y tipografías, las mismas de siempre.
   Todo lo que vive dentro de #diagnostico queda intacto: ese
   bloque maneja su propia opacidad para mostrar preguntas.
   ============================================================ */

/* ---------- 1 · barra de lectura ----------
   Dice cuánto queda sin ocupar espacio. Es el único elemento
   nuevo de la página, y mide dos píxeles. */
#lectura{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:300;
  background:linear-gradient(90deg,#9C6419,#D69A3E 55%,#F2CE93);
  box-shadow:0 0 10px rgba(214,154,62,.5);
  pointer-events:none; will-change:width;
}

/* ---------- 2 · la barra superior se condensa ----------
   Al bajar se vuelve vidrio esmerilado y deja una línea dorada.
   Es el gesto que más lee como "moderno" y casi no se nota. */
body > nav{ transition:background .3s ease, box-shadow .3s ease; }
body > nav .nav-in, body > nav .nav-inner{ transition:padding .3s ease; }
body > nav.compacta{
  background:rgba(18,51,61,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(214,154,62,.24), 0 14px 34px rgba(6,20,26,.26);
}
body > nav.compacta .nav-in,
body > nav.compacta .nav-inner{ padding-top:7px; padding-bottom:7px; }

/* ---------- 3 · el encabezado respira ----------
   Una luz que deriva muy lento y un grano finísimo encima. El
   grano es lo que separa una pantalla plana de una página
   impresa: no se ve, se siente. */
.hero{ isolation:isolate; }
.hero > *{ position:relative; z-index:1; }
.hero .aurora{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 38% at 22% 18%, rgba(214,154,62,.20), transparent 62%),
    radial-gradient(ellipse 48% 42% at 82% 78%, rgba(44,107,125,.42), transparent 64%);
  animation:deriva 38s ease-in-out infinite alternate;
}
.hero .grano{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
@keyframes deriva{ to{ transform:translate3d(-4%,3%,0) scale(1.1); } }

/* ---------- 4 · los titulares se parten donde corresponde ----------
   Una línea huérfana de dos palabras es lo que hace ver
   descuidada una página que por lo demás está bien hecha. */
h1, h2, .section-title, .h2, .cotiza-t, .qt{ text-wrap:balance; }
.hero p, .section-sub, .lead, .hero-tagline{ text-wrap:pretty; }

/* ---------- 5 · el revelado, más lento y en cascada ----------
   Antes solo aparecían los títulos y las tarjetas entraban de
   golpe. Ahora entran una tras otra, con 70 ms de diferencia. */
html.mov .ap{
  transform:translateY(18px) scale(.994);
  transition-duration:.72s;
  transition-timing-function:cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--d,0ms);
}
html.mov .ap.ya{ transform:none; }

/* ---------- 6 · las tarjetas se levantan ----------
   Solo con mouse. En el teléfono el dedo no tiene "hover" y una
   tarjeta que se levanta al tocarla se siente rota. */
@media (hover:hover) and (pointer:fine){
  .box, .caja, .plan, .qa, .cp, .paso{
    transition:transform .32s cubic-bezier(.2,.7,.3,1),
               box-shadow .32s ease, border-color .32s ease;
  }
  .box:hover, .caja:hover, .plan:hover, .qa:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(18,51,61,.13);
    border-color:rgba(214,154,62,.45);
  }
  .cp:hover{ transform:translateY(-3px); }
}

/* ---------- 7 · destello en el botón principal ----------
   Una pasada de luz al acercar el cursor. Es el detalle que en
   una marca de servicios se lee como cuidado, no como adorno. */
.cta, .btn-amber, .nav-cta{ position:relative; overflow:hidden; }
.cta::after, .btn-amber::after, .nav-cta::after{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;
}
.cta:hover::after, .btn-amber:hover::after, .nav-cta:hover::after{ left:135%; }

/* ---------- 8 · la sección oscura del cierre ----------
   La misma luz del encabezado, para que la página abra y cierre
   con el mismo gesto. */
.section-dark, .cierre, .fin{ position:relative; overflow:hidden; isolation:isolate; }
.section-dark > *, .cierre > *, .fin > *{ position:relative; z-index:1; }

/* ---------- 9 · el foco se ve ----------
   Quien navega con teclado tiene que saber dónde está parado. */
a:focus-visible, button:focus-visible, .cp:focus-visible, summary:focus-visible{
  outline:2px solid #D69A3E; outline-offset:3px; border-radius:4px;
}

/* ---------- 10 · quien pidió menos movimiento, lo recibe ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .aurora{ animation:none; }
  #lectura{ display:none; }
  .cta::after, .btn-amber::after, .nav-cta::after{ display:none; }
  html.mov .ap{ transition-duration:.001s; transition-delay:0ms; }
  .box, .caja, .plan, .qa, .cp, .paso{ transition:none; }
}

/* ---------- 11 · las tarjetas dejan de ser recuadros planos ----------
   Una sombra muy baja en reposo, dos capas: una pegada al borde
   que da el canto, y otra difusa y lejana que da el peso. Es la
   diferencia entre un rectángulo dibujado y un objeto apoyado. */
.box, .caja, .plan, .qa{
  box-shadow:0 1px 2px rgba(18,51,61,.05), 0 10px 28px rgba(18,51,61,.055);
}

/* ---------- 12 · la regla dorada se dibuja ----------
   Bajo cada antetítulo aparece una línea que crece de izquierda a
   derecha cuando la sección entra. Marca el comienzo de cada
   capítulo sin agregar una palabra. */
.head .eyebrow, .eyebrow{ position:relative; padding-bottom:14px; display:inline-block; }
.head .eyebrow::after, .eyebrow::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:46px;
  background:linear-gradient(90deg,#D69A3E,rgba(214,154,62,0));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,.84,.44,1) .12s;
}
.ya .eyebrow::after, .eyebrow.ya::after, .ap.ya .eyebrow::after{ transform:scaleX(1); }
#diagnostico .eyebrow::after{ background:linear-gradient(90deg,#D69A3E,rgba(214,154,62,0)); }

/* ---------- 13 · la capa donde está parado ----------
   En la barra de capas, la del servicio que se está mirando late
   una vez al entrar. Después queda quieta: un latido que no para
   es un cartel, no un detalle. */
.cp.aqui{ position:relative; }
.cp.aqui::before{
  content:''; position:absolute; inset:-3px; border-radius:11px;
  border:1.5px solid rgba(214,154,62,.55); opacity:0;
  animation:latido 2.4s ease-out .5s 1;
  pointer-events:none;
}
@keyframes latido{
  0%{ opacity:0; transform:scale(.98) }
  35%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.03) }
}

/* ---------- 14 · profundidad al bajar ----------
   La luz del encabezado se queda un poco atrás cuando la página
   sube. Da sensación de capas, que es de donde viene la idea de
   profundidad en una portada. */
.hero .aurora{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .head .eyebrow::after, .eyebrow::after{ transform:scaleX(1); transition:none; }
  .cp.aqui::before{ animation:none; opacity:1; }
}

/* ---------- 15 · los títulos de sección, en la misma voz ----------
   La portada y Plan Inicia titulan en Cormorant; las cuatro
   páginas de servicio lo hacían en Inter en negrita. Era la misma
   firma hablando con dos voces. Unificado en la serif, que es la
   que da el tono ejecutivo, y un punto más grande porque una
   serif del mismo cuerpo se lee más chica.
   El cuestionario ya tiene la suya y no se toca. */
.section-title:not(#diagnostico .section-title){
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(29px,4.2vw,43px);
  line-height:1.14;
  letter-spacing:-.01em;
}