/* =====================================================================
   ARISTIQ — AUDITORÍA 11-09-2026
   Se carga DESPUÉS de styles.css. No toca la identidad (oscuro, oro,
   Bricolage + Archivo, botones píldora): toca la ESTRUCTURA.

   Qué tenía la página, según el catálogo de delatores de plantilla de la
   propia investigación de la agencia (diseno-web.md §8):
   · título centrado → grilla de tarjetas iguales, TRES veces seguidas
     (3 pilares, 4 pasos, 5 preguntas), todas con la misma superficie .lit
   · números 01/02/03 encima de cada tarjeta
   · todo centrado, todo del mismo tamaño

   Los tres recursos formales declarados para esta pasada:
   1. RENGLONES CON FILETE en vez de tarjetas. Una sola tarjeta en toda la
      página: el formulario. Así la tarjeta vuelve a significar algo.
   2. CONTRASTE DE ESCALA: los nombres de cada frente y de cada paso en
      cuerpo display grande contra descripciones chicas.
   3. RUPTURA DEL EJE: statement y encabezados a la izquierda (el hero ya es
      centrado, dos veces seguidas es simetría total), y la banda de la IA
      con el orbe sangrando hasta el borde derecho.

   Rendimiento (regla de la casa: solo opacity y transform):
   · el header dejaba de usar backdrop-filter en móvil "para que el cajón
     no se corte"; en escritorio seguía desenfocando en cada cuadro del
     scroll. Se saca en todos lados: fondo sólido semitransparente.
   ===================================================================== */

/* ---------- header: sin desenfoque en tiempo real ---------- */
.hd.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,10,12,.9);}

/* ---------- statement: centrado y bien repartido ----------
   Lo había pasado a la izquierda para romper la simetría con el hero.
   Facundo lo quiere centrado: "más centrado y bien distribuido". Queda como
   en styles.css; solo se acota la medida para que las líneas queden parejas. */
.statement h2{max-width:22ch;}

/* ---------- encabezados de sección: a la izquierda, más grandes ---------- */
.section-head.center{text-align:left;margin-inline:0;}
.section-head.center p{margin-inline:0;}
.section-head h2{font-size:clamp(2.1rem,5vw,3.9rem);max-width:22ch;}

/* Los títulos que tenían estilo inline en el HTML */
.faq-title{font-size:clamp(1.8rem,4vw,2.8rem);margin-top:1.2rem;}
.contact-title{margin-top:1.2rem;}
.contact-agenda{margin-top:1.6rem;}
.footer-cta{padding:.6rem 1.3rem;font-size:.85rem;}

/* ---------- QUÉ HACEMOS: tres frentes como renglones, sin números ---------- */
.frentes{border-top:1px solid rgba(231,200,131,.24);}
.frente{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(1.2rem,4vw,4rem);align-items:start;
  padding:clamp(1.8rem,3.6vw,3rem) 0;
  border-bottom:1px solid rgba(231,200,131,.14);
}
.frente h3{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.75rem,3.8vw,3.1rem);letter-spacing:-.028em;line-height:1;
}
.frente h3 .g{display:block;}
.frente-copy p{font-family:var(--sans);font-weight:300;color:var(--ink-2);line-height:1.65;max-width:54ch;font-size:1.02rem;}
.frente-copy .chips{margin-top:1.2rem;}
@media(max-width:760px){
  .frente{grid-template-columns:1fr;gap:.9rem;padding:1.6rem 0;}
  .frente h3{font-size:clamp(1.6rem,7.5vw,2.2rem);}
}

/* ---------- IA: banda, no tarjeta ----------
   Facundo: el orbe quedaba "muy tirado a la derecha y un poquito cortado".
   Fuera el sangrado al borde y fuera el overflow:hidden que le recortaba el
   halo. El orbe va centrado en su columna, y gira despacito como la burbuja
   del chat de abajo (mismo gesto, misma marca). */
#ia{position:relative;overflow:visible;}
#ia::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 75% at 74% 50%,rgba(210,172,99,.15),transparent 62%);
}
.ari-feature{
  border-radius:0;background:none;border:0;box-shadow:none;overflow:visible;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
}
.ari-feature::before,.ari-feature::after{content:none;}
.ari-feature .af-copy{padding:0;}
.ari-feature .af-vis{border:0;background:none;padding:1.5rem 0;justify-items:center;margin-right:0;}
.af-vis .orb{
  width:min(100%,400px);
  border-color:rgba(231,200,131,.3);
  box-shadow:0 0 140px -10px rgba(210,172,99,.55),0 0 40px -6px rgba(210,172,99,.35),inset 0 0 30px rgba(0,0,0,.4);
}
/* La rotación sutil: solo transform, 80 s por vuelta. */
.af-vis .orb img{animation:orb-gira 80s linear infinite;}
@keyframes orb-gira{from{transform:scale(1.05) rotate(0deg);}to{transform:scale(1.05) rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.af-vis .orb img{animation:none;}}
@media(max-width:860px){
  /* La regla de dos columnas de arriba pisa la de una columna de styles.css
     (misma especificidad, este archivo carga después): hay que repetirla acá
     o en el celular el texto queda apretado en media pantalla con el orbe
     al lado. */
  .ari-feature{grid-template-columns:1fr;}
  .ari-feature .af-vis{border:0;min-height:0;justify-items:center;margin-right:0;margin-top:1.5rem;}
  .af-vis .orb{width:min(70%,300px);}
}

/* ---------- PROCESO: una línea, no cuatro cajas. El orden lo da la línea ---------- */
.steps{gap:0;border-top:1px solid rgba(231,200,131,.24);}
.step{
  border-radius:0;background:none;border:0;box-shadow:none;overflow:visible;
  padding:1.7rem 1.6rem 0 0;position:relative;
}
.step::before{
  /* el hito sobre la línea: un punto de oro, no un "01" */
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-3),var(--gold));box-shadow:0 0 14px rgba(210,172,99,.6);
  /* OJO: acá no va `inset:auto`. Estaba para anular el inset:0 de .lit::before,
     pero .step ya no lleva .lit, y `inset:auto` después de top/left los pisaba:
     el punto caía sobre la primera letra del título en vez de sobre la línea. */
}
.step::after{content:none;}
.step + .step{border-left:1px solid rgba(231,200,131,.12);padding-left:1.6rem;}
.step + .step::before{left:1.6rem;}
.step .s-n{display:none;}
.step h3{font-size:clamp(1.35rem,2.3vw,1.8rem);letter-spacing:-.022em;margin-bottom:.6rem;}
.step p{font-size:.96rem;max-width:26ch;}
@media(max-width:860px){
  .steps{grid-template-columns:1fr;}
  .step{padding:1.4rem 0 1.4rem 1.6rem;border-bottom:1px solid rgba(231,200,131,.12);}
  .step::before{top:1.75rem;left:0;}
  .step + .step{border-left:0;padding-left:1.6rem;}
  .step + .step::before{left:0;}
}

/* ---------- FAQ: renglones, no cajas ---------- */
.faq-list{gap:0;border-top:1px solid rgba(231,200,131,.24);}
.faq-item{border-radius:0;padding:0;background:none;border:0;box-shadow:none;overflow:visible;border-bottom:1px solid rgba(231,200,131,.14);}
.faq-item::before,.faq-item::after{content:none;}
.faq-item summary{padding:1.35rem 0;}
.faq-answer{padding-bottom:1.4rem;}

/* ---------- CONTACTO: la única tarjeta de la página. Se queda. ---------- */