/* =====================================================================
 * OmnIA · estilos del sitio
 *
 * Regla que manda: TODO color, tamaño, espacio y radio sale de tokens.css.
 * Acá no hay ni un solo valor suelto que no se derive de una variable.
 *
 * Dos cosas del manual que condicionan todo este archivo:
 *   · Nada arranca en opacity:0 esperando un observer. Lo que se lee, se ve
 *     apenas carga. Por eso no hay animaciones de aparición en scroll.
 *   · Un solo easing (--ease) y solo en transiciones de interacción.
 * ===================================================================== */

/* ---------- tintes translúcidos ----------
   No son colores nuevos: son --gold, --ok y --navy con alfa. Viven acá y no
   en tokens.css porque son decisiones de este sitio, no de la marca. Están
   nombrados para que no aparezca un rgba() suelto en mitad de la hoja. */

:root{
  --vidrio:rgba(5,8,15,.82);          /* la cabecera translúcida sobre el navy */
  --oro-tinte:rgba(230,207,139,.10);  /* fondo de la burbuja del agente */
  --oro-borde:rgba(230,207,139,.35);
  --oro-borde-2:rgba(230,207,139,.28);
  --ok-borde:rgba(52,211,153,.35);
}

/* ---------- layout base ---------- */

.contenedor{
  width:100%;
  max-width:calc(var(--sp-8) * 18);        /* 1152px */
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.seccion{ padding-block:calc(var(--sp-8) + var(--sp-6)) }   /* 96px */

/* La cabecera es pegajosa: sin esto, un enlace interno deja el título
   tapado abajo del logo. 72px de cabecera + aire. */
:target,
section[id]{ scroll-margin-block-start:calc(var(--sp-8) + var(--sp-5)) }

.saltar{
  position:absolute; left:var(--sp-4); top:calc(var(--sp-8) * -2);
  z-index:10; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); text-decoration:none; font-weight:700;
  transition:top var(--ease);
}
.saltar:focus{ top:var(--sp-4) }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

a{ color:var(--cyan) }

/* ---------- cabecera ---------- */

.cabecera{
  position:sticky; top:0; z-index:9;
  background:var(--vidrio);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.cabecera-fila{
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:calc(var(--sp-8) + var(--sp-2));               /* 72px */
}

.logo{
  display:flex; align-items:center; gap:var(--sp-3);
  text-decoration:none; margin-inline-end:auto;
  min-height:var(--sp-7);                                    /* 48px */
}
.logo-iso{ flex:none }
.logo-texto{ display:flex; flex-direction:column; line-height:1.1 }
.logo .marca{ font-size:var(--fs-xl) }
.logo-bajada{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
}

.nav{ display:flex; gap:var(--sp-5) }
.nav a{
  color:var(--muted); text-decoration:none; font-size:var(--fs-md); font-weight:600;
  display:inline-flex; align-items:center; min-height:var(--sp-7);
  transition:color var(--ease);
}
.nav a:hover{ color:var(--ink) }

.cta-chico{ font-size:var(--fs-md); padding:var(--sp-2) var(--sp-4); min-height:var(--sp-7) }

/* ---------- hero ----------
   Sin 100vh a propósito: mide lo que necesita y deja ver que hay más abajo. */

.hero{ padding-block:calc(var(--sp-8) + var(--sp-5)) calc(var(--sp-8) + var(--sp-6)) }

.hero-grid{
  display:grid; gap:var(--sp-8);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}

.hero h1{ margin-block:var(--sp-4) var(--sp-5) }
.hero-bajada{ color:var(--muted); font-size:var(--fs-xl); line-height:1.5; max-width:34ch }
.hero-acciones{ margin-block-start:var(--sp-6) }
.hero-nota{
  color:var(--subtle); font-size:var(--fs-sm);
  margin-block-start:var(--sp-3); max-width:42ch;
}

/* ---------- el lienzo del flujo ---------- */

.lienzo{
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / var(--sp-5) var(--sp-5),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}

.lienzo-barra{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.lienzo-punto{
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:var(--line-2); flex:none;
}
.lienzo-nombre{
  font-family:var(--baj); font-size:var(--fs-sm); font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--subtle);
  margin-inline-start:var(--sp-2); margin-inline-end:auto;
}

.chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--muted); white-space:nowrap;
}
.chip-ok{ color:var(--ok); border-color:var(--ok-borde) }

.latido{
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:currentColor; flex:none;
  animation:latir 2s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.flujo{ list-style:none; padding:var(--sp-5); display:grid; gap:var(--sp-5) }

/* El conector entre nodos: la línea dorada con el pulso que la recorre. */
.nodo{
  position:relative;
  display:flex; align-items:flex-start; gap:var(--sp-4);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:var(--sp-4);
}
.nodo:not(:last-child)::after{
  content:""; position:absolute; left:calc(var(--sp-5) + var(--sp-1));
  top:100%; width:2px; height:var(--sp-5);
  background:linear-gradient(var(--gold-2), var(--cyan-2));
}
.nodo:not(:last-child)::before{
  content:""; position:absolute; left:var(--sp-5);
  top:100%; width:var(--sp-2); height:var(--sp-2);
  border-radius:var(--r-pill); background:var(--gold);
  animation:bajar 2.4s linear infinite;
}
.nodo:nth-child(2)::before{ animation-delay:.6s }
.nodo:nth-child(3)::before{ animation-delay:1.2s }
@keyframes bajar{
  0%{ transform:translateY(0); opacity:0 }
  15%{ opacity:1 }
  85%{ opacity:1 }
  100%{ transform:translateY(var(--sp-5)); opacity:0 }
}

.nodo-icono{
  flex:none; display:grid; place-items:center;
  width:var(--sp-7); height:var(--sp-7); border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--cyan);
  background:var(--panel);
}
.nodo-ia .nodo-icono{ color:var(--gold); border-color:var(--oro-borde) }
.nodo-etiqueta{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.nodo-ia .nodo-etiqueta{ color:var(--gold) }
.nodo-txt{ font-size:var(--fs-md); color:var(--muted); margin-block-start:var(--sp-1) }

.lienzo-pie{
  border-top:1px solid var(--line); padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-sm); color:var(--subtle); background:var(--panel-2);
}

/* ---------- cabecera de sección ---------- */

.seccion-cab{ margin-block-end:var(--sp-8); max-width:62ch }
.seccion-cab h2{ margin-block:var(--sp-3) var(--sp-4) }
.seccion-bajada{ color:var(--muted); font-size:var(--fs-lg) }

/* ---------- demos ---------- */

.tabs{
  display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-block-end:var(--sp-5);
}
.tab{
  font-family:var(--cuerpo); font-size:var(--fs-md); font-weight:700;
  color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:var(--sp-2) var(--sp-4); min-height:var(--sp-6); cursor:pointer;
  transition:color var(--ease), border-color var(--ease), background var(--ease);
}
.tab:hover{ color:var(--ink); border-color:var(--line-2) }
.tab[aria-selected="true"]{
  color:var(--navy); background:var(--gold); border-color:var(--gold);
}

.panel-demo:focus-visible{ outline-offset:var(--sp-1) }

.demo-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}

.demo-notas h3{ font-size:var(--fs-xl); margin-block-end:var(--sp-4) }
.lista{ list-style:none; display:grid; gap:var(--sp-4) }
.lista li{
  position:relative; padding-inline-start:var(--sp-5);
  color:var(--muted); font-size:var(--fs-md); line-height:1.55;
}
.lista li::before{
  content:""; position:absolute; left:0; top:calc(var(--sp-2) - 1px);
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:var(--gold);
}
.lista b{ color:var(--ink) }
.nota-chica{
  color:var(--subtle); font-size:var(--fs-sm);
  margin-block-start:var(--sp-5);
  border-inline-start:2px solid var(--line-2); padding-inline-start:var(--sp-4);
}

/* ---------- demo 1 · chat ---------- */

.chat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
}
.chat-cab{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.chat-avatar{
  display:grid; place-items:center; flex:none;
  width:var(--sp-7); height:var(--sp-7);
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--panel);
}
.chat-nombre{ font-weight:700; font-size:var(--fs-md) }
.chat-estado{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--ok);
}

.chat-hilo{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-4);
  min-height:calc(var(--sp-8) * 5);            /* 320px, para que no salte al responder */
  max-height:calc(var(--sp-8) * 6);
  overflow-y:auto;
}
.burbuja{
  max-width:80%; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); font-size:var(--fs-md); line-height:1.5;
}
.burbuja-cliente{
  align-self:flex-end; background:var(--panel-2);
  border:1px solid var(--line-2); color:var(--ink);
  border-end-end-radius:var(--r-sm);
}
.burbuja-agente{
  align-self:flex-start;
  background:var(--oro-tinte); border:1px solid var(--oro-borde-2);
  color:var(--ink); border-end-start-radius:var(--r-sm);
}
.burbuja-hora{
  display:block; font-size:var(--fs-xs); color:var(--subtle);
  margin-block-start:var(--sp-1);
}
.burbuja-aviso{
  align-self:flex-start; background:transparent;
  border:1px dashed var(--line-2); color:var(--muted); font-size:var(--fs-sm);
}
.escribiendo{ display:inline-flex; gap:var(--sp-1); align-items:center }
.escribiendo i{
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:var(--gold); animation:latir 1.2s ease-in-out infinite;
}
.escribiendo i:nth-child(2){ animation-delay:.2s }
.escribiendo i:nth-child(3){ animation-delay:.4s }

.chat-sugerencias{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-4); border-top:1px solid var(--line); background:var(--panel-2);
}
.sug{
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:600;
  color:var(--cyan); background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:var(--sp-2) var(--sp-4); min-height:calc(var(--sp-7) - var(--sp-1));  /* 44px */
  cursor:pointer; text-align:start;
  transition:border-color var(--ease), background var(--ease), transform var(--ease);
}
.sug:hover{ border-color:var(--cyan); background:var(--panel) }
.sug:active{ transform:scale(.98) }
.sug[disabled]{ opacity:.45; cursor:default }

/* ---------- demo 2 · tablero ---------- */

.tablero{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.tablero-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-block-end:var(--sp-5);
}
.tablero-tit{ font-size:var(--fs-xl) }

.segmentado{
  display:flex; gap:var(--sp-1); padding:var(--sp-1);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.seg{
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700;
  color:var(--muted); background:transparent; border:0;
  border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-4);
  min-height:var(--sp-6); cursor:pointer;
  transition:color var(--ease), background var(--ease);
}
.seg:hover{ color:var(--ink) }
.seg[aria-pressed="true"]{ color:var(--navy); background:var(--gold) }

.kpis{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-end:var(--sp-5);
}
.kpi{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:var(--sp-4);
}
.kpi-et{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
}
.kpi-val{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl);
  letter-spacing:-.02em; margin-block:var(--sp-1);
  white-space:nowrap;          /* el signo $ no se separa del número */
}
.kpi-var{ font-size:var(--fs-sm); font-weight:600 }
.arriba{ color:var(--ok) }
.abajo{ color:var(--bad) }

.grafico{ margin-block-end:var(--sp-5) }
.grafico-tit{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
  margin-block-end:var(--sp-3);
}
.barras{
  display:flex; align-items:flex-end; gap:var(--sp-2);
  height:calc(var(--sp-8) * 2);                  /* 128px */
  padding-block-end:var(--sp-5);
  border-bottom:1px solid var(--line);
  position:relative;
}
.barra{ flex:1; position:relative; border-radius:var(--r-sm) var(--r-sm) 0 0;
        background:linear-gradient(var(--gold-1), var(--gold-2));
        transition:height var(--ease) }
.barra-alta{ background:linear-gradient(var(--cyan), var(--cyan-2)) }
.barra-et{
  position:absolute; top:100%; left:0; right:0; text-align:center;
  font-size:var(--fs-xs); color:var(--subtle); padding-block-start:var(--sp-2);
}

.tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-md); min-width:26rem }
.tabla th{
  text-align:start; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
  padding-block:var(--sp-2); border-bottom:1px solid var(--line);
}
.tabla td{ padding-block:var(--sp-3); border-bottom:1px solid var(--line); color:var(--muted) }
.tabla td:first-child{ color:var(--ink); font-weight:600 }
.tabla td:not(:first-child){ text-align:end; font-variant-numeric:tabular-nums }
.tabla tr:last-child td{ border-bottom:0 }

/* ---------- demo 3 · corrida ---------- */

.corrida{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.corrida-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-block-end:var(--sp-5);
}
.comparativa{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)) }
.via{ border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) }
.via-mano{ background:var(--panel-2) }
.via-auto{ background:var(--panel-2); border-color:var(--oro-borde-2) }
.via-mano .eyebrow{ color:var(--subtle) }
.via-auto .eyebrow{ color:var(--gold) }
.via-tiempo{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl);
  letter-spacing:-.02em; margin-block:var(--sp-2) var(--sp-4);
}
.via-mano .via-tiempo{ color:var(--muted) }
.via-auto .via-tiempo{ color:var(--gold) }

.pasos-mano, .pasos-auto{ list-style:none; display:grid; gap:var(--sp-3) }
.pasos-mano li, .pasos-auto li{
  font-size:var(--fs-sm); color:var(--muted); line-height:1.45;
  display:flex; gap:var(--sp-3); align-items:flex-start;
}
.pasos-mano li::before{
  content:""; flex:none; width:var(--sp-4); height:var(--sp-4);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.pasos-auto li .tilde{
  flex:none; display:grid; place-items:center;
  width:var(--sp-4); height:var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--navy);
}
.pasos-auto li.hecho .tilde{ background:var(--ok); border-color:var(--ok) }
.pasos-auto li.hecho{ color:var(--ink) }
.pasos-auto li.corriendo .tilde{ border-color:var(--gold) }

.corrida-pie{
  margin-block-start:var(--sp-5); padding-block-start:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--subtle);
}

/* ---------- servicios ----------
   Rejilla con filetes, no cuatro tarjetas iguales flotando. */

.servicios{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-block-start:1px solid var(--line);
}
.servicio{
  padding:var(--sp-6) 0;
  border-block-end:1px solid var(--line);
}
.servicio:nth-child(odd){ padding-inline-end:var(--sp-6) }
.servicio:nth-child(even){
  padding-inline-start:var(--sp-6);
  border-inline-start:1px solid var(--line);
}
.servicio h3{
  font-size:var(--fs-2xl);
  background:linear-gradient(100deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  width:fit-content;
}
.servicio-frase{
  font-family:var(--baj); font-size:var(--fs-xl); font-weight:700;
  color:var(--cyan); margin-block:var(--sp-2) var(--sp-3); line-height:1.25;
}
.servicio-txt{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- la cuenta ---------- */

.seccion-cuenta{ border-block:1px solid var(--line) }
.cuenta-grid{
  display:grid; gap:var(--sp-8);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.cuenta-grid h2{ margin-block:var(--sp-3) var(--sp-4) }

.control{ margin-block-start:var(--sp-6) }
.control label{
  display:block; font-size:var(--fs-md); font-weight:600; color:var(--ink);
  margin-block-end:var(--sp-3);
}
.control-fila{ display:flex; align-items:center; gap:var(--sp-4) }
.control-valor{
  flex:none; min-width:calc(var(--sp-8) + var(--sp-4));       /* 80px */
  font-family:var(--tit); font-weight:800; font-size:var(--fs-xl);
  color:var(--gold); text-align:end;
}

/* 48 px de alto: medido, no estimado. A 32 px el control no llega al piso
   de los 44 px que pide el manual para todo lo que se toca. */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:var(--sp-7); background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:var(--sp-2); border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--gold-2), var(--cyan-2));
}
input[type=range]::-moz-range-track{
  height:var(--sp-2); border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--gold-2), var(--cyan-2));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--sp-5); height:var(--sp-5); margin-block-start:calc(var(--sp-2) * -1);
  border-radius:var(--r-pill); background:var(--gold);
  border:2px solid var(--navy); box-shadow:0 0 0 1px var(--gold-2);
}
input[type=range]::-moz-range-thumb{
  width:var(--sp-5); height:var(--sp-5);
  border-radius:var(--r-pill); background:var(--gold);
  border:2px solid var(--navy); box-shadow:0 0 0 1px var(--gold-2);
}

.resultado{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-6); text-align:center;
}
.resultado .eyebrow{ display:block }
.resultado-nro{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-4xl);
  letter-spacing:-.03em; line-height:1.1; color:var(--gold);
  margin-block-start:var(--sp-3);
}
.resultado-unidad{
  font-family:var(--baj); font-size:var(--fs-xl); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.resultado-equiv{
  color:var(--muted); font-size:var(--fs-md);
  margin-block:var(--sp-4) var(--sp-5);
  margin-inline:auto;
}
.resultado-equiv b{ color:var(--ink) }
.resultado .nota-chica{ border:0; padding:0; margin-block-start:var(--sp-4) }

/* ---------- cómo trabajo ---------- */

.pasos{
  list-style:none; display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.paso{
  padding-block-start:var(--sp-5);
  border-block-start:2px solid var(--line-2);
}
.paso:first-child{ border-block-start-color:var(--gold) }
.paso-nro{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-xl);
  color:var(--gold); line-height:1;
}
.paso h3{ font-size:var(--fs-xl); margin-block:var(--sp-3) var(--sp-3) }
.paso p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- preguntas ---------- */

.faq{ border-block-start:1px solid var(--line); max-width:78ch }
.qa{ border-block-end:1px solid var(--line) }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding-block:var(--sp-5); cursor:pointer; list-style:none;
  font-family:var(--tit); font-weight:700; font-size:var(--fs-xl);
  letter-spacing:-.01em; color:var(--ink);
  min-height:var(--sp-7);
  transition:color var(--ease);
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover{ color:var(--gold) }
.qa summary::after{
  content:""; flex:none;
  width:var(--sp-4); height:var(--sp-4);
  border-inline-end:2px solid var(--gold); border-block-end:2px solid var(--gold);
  transform:rotate(45deg) translate(calc(var(--sp-1) * -1), calc(var(--sp-1) * -1));
  transition:transform var(--ease);
}
.qa[open] summary::after{ transform:rotate(225deg) }
.qa-cuerpo{ padding-block-end:var(--sp-5) }
.qa-cuerpo p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- cierre ---------- */

.cierre{ padding-block:calc(var(--sp-8) + var(--sp-6)) }
.cierre-caja{ text-align:center }
.cierre-txt{
  color:var(--muted); font-size:var(--fs-xl);
  margin-block:var(--sp-4) var(--sp-6); margin-inline:auto;
}
/* ---------- el formulario ----------
   Va plegado y en chico: es la segunda opción, no compite con el CTA. */

.caja-form{ margin-block-start:var(--sp-6); text-align:start }
.caja-form summary{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  list-style:none; cursor:pointer;
  color:var(--cyan); font-size:var(--fs-sm); font-weight:600;
  min-height:calc(var(--sp-7) - var(--sp-1));            /* 44px */
  justify-content:center; width:100%;
  transition:color var(--ease);
}
.caja-form summary::-webkit-details-marker{ display:none }
.caja-form summary:hover{ color:var(--gold) }
.caja-form summary::after{
  content:""; width:var(--sp-2); height:var(--sp-2);
  border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--ease);
}
.caja-form[open] summary::after{ transform:rotate(225deg) }

.form{
  max-width:52ch; margin-inline:auto; margin-block-start:var(--sp-5);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
  display:grid; gap:var(--sp-5);
}
.campo{ display:grid; gap:var(--sp-2) }
.campo label{ font-size:var(--fs-md); font-weight:600; color:var(--ink) }
.campo input,
.campo textarea{
  font-family:var(--cuerpo); font-size:var(--fs-lg); color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  min-height:calc(var(--sp-7) - var(--sp-1));            /* 44px */
  width:100%; resize:vertical;
  transition:border-color var(--ease);
}
.campo input:hover,
.campo textarea:hover{ border-color:var(--muted) }
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{ border-color:var(--bad) }
.campo-ayuda{ font-size:var(--fs-sm); color:var(--subtle) }

/* La trampa: fuera de la vista sin usar display:none, que algunos robots
   detectan, y sin que el lector de pantalla la anuncie. */
.trampa{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.btn-enviar{ width:100%; font-size:var(--fs-lg); min-height:var(--sp-7) }
.btn-enviar[disabled]{ opacity:.6; cursor:default }

.form-estado{ font-size:var(--fs-sm); color:var(--muted); text-align:center }
.form-estado:empty{ display:none }
.form-estado.bien{ color:var(--ok) }
.form-estado.mal{ color:var(--bad) }
.form-estado a{ color:inherit; text-decoration:underline }

/* ---------- pie ---------- */

.pie{ border-block-start:1px solid var(--line); padding-block:var(--sp-7) var(--sp-6) }
.pie-fila{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.pie-marca{ display:flex; align-items:center; gap:var(--sp-4) }
.pie-nombre{ font-size:var(--fs-xl) }
.pie-bajada{ color:var(--subtle); font-size:var(--fs-sm) }
.pie-links{ display:grid; gap:var(--sp-2) }
.pie-links a{
  color:var(--muted); text-decoration:none; font-size:var(--fs-md); font-weight:600;
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--sp-6);
  transition:color var(--ease);
}
.pie-links a:hover{ color:var(--gold) }
.pie-links .num{ color:var(--subtle); font-weight:500 }
.pie-legal{
  margin-block-start:var(--sp-6); padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--line);
}
.pie-legal p{ color:var(--subtle); font-size:var(--fs-sm); max-width:none }

/* =====================================================================
 * Adaptación a pantallas chicas.
 * El manual pide probar en 360, 390 y 430 px. Los cortes están puestos
 * donde el contenido se rompe, no en anchos "de catálogo".
 * ===================================================================== */

@media (max-width:1000px){
  .hero-grid,
  .demo-grid,
  .cuenta-grid{ grid-template-columns:minmax(0,1fr) }
  .hero-grid{ gap:var(--sp-7) }
  .hero-bajada{ max-width:52ch }
  .nav{ display:none }
  .pasos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:760px){
  .seccion{ padding-block:var(--sp-8) }
  .hero{ padding-block:var(--sp-7) var(--sp-8) }
  .cierre{ padding-block:var(--sp-8) }
  .seccion-cab{ margin-block-end:var(--sp-6) }

  .servicios{ grid-template-columns:minmax(0,1fr) }
  .servicio:nth-child(odd),
  .servicio:nth-child(even){
    padding-inline:0; border-inline-start:0;
  }
  .servicio{ padding-block:var(--sp-5) }

  .pasos{ grid-template-columns:minmax(0,1fr); gap:var(--sp-4) }
  .kpis{ grid-template-columns:minmax(0,1fr) }
  .comparativa{ grid-template-columns:minmax(0,1fr) }

  .cta-chico{ display:none }        /* en el celular manda el CTA del hero */
  /* La bajada del hero baja un escalón: a 20px se come la pantalla entera
     y no se ve que abajo hay algo. */
  .hero-bajada,
  .cierre-txt{ font-size:var(--fs-lg) }
  .burbuja{ max-width:90% }
  .qa summary{ font-size:var(--fs-lg) }
  .tablero, .corrida{ padding:var(--sp-4) }
  .resultado{ padding:var(--sp-5) }
}

@media (max-width:420px){
  .logo-bajada{ display:none }
  .chat-hilo{ min-height:calc(var(--sp-8) * 4) }
  .tabs{ gap:var(--sp-1) }
  .tab{ font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-3) }
}

/* Lo que se toca, 44 px. Se mide, no se estima. */
@media (max-width:600px){
  .sug, .seg, .tab, .btn, .pie-links a, .nav a{ min-height:calc(var(--sp-7) - var(--sp-1)) }
}