/* ==========================================================================
   Trapicheros — landing.

   Direccion visual: "Noche de cambio" (31-ago-2026). Empezo en verde de noche y
   el mismo dia el jefe lo mando a NEGRO: *"en la landing cambie el color verde
   por negro"*. Elegido por el: fondo negro y el AMBAR haciendo de todo lo que
   antes era verde, botones incluidos. Negro y oro.

   Oscuro NO es lo que habia antes. Lo que se fue en la version anterior y NO
   vuelve: el negro plano de punta a punta y el degradado platino en el texto
   (`background-clip:text`), que dejaba una banda oscura justo encima de las
   palabras y hacia que el titular se leyera a trozos.

   Lo que hay: negro carbon como base, tres niveles de superficie para que las
   secciones se distingan sin cambiar de mundo, y el ambar de billete como unico
   color: botones, iconos y dinero. Al no competir con nada, el ojo va derecho
   a lo que hay que tocar. La
   unica pieza clara de la pagina es la tarjeta de la orden, que es la pantalla
   de la app: tiene que saltar del fondo, es la prueba de lo que se cuenta.
   ========================================================================== */

@font-face{font-family:'Anton';src:url('fonts/anton-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/plexsans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Los tres suelos. La diferencia entre ellos es corta a proposito: se nota el
     cambio de seccion sin que parezcan pantallas distintas. Negro con un punto
     de calor dentro, no #000: el negro puro sobre un movil OLED corta los
     bordes de las tarjetas y la pagina se rompe en trozos. */
  --fondo:#0A0A0B;        /* base */
  --fondo-2:#0E0E10;      /* seccion alterna */
  --fondo-3:#131316;      /* franjas destacadas (flujo, cobertura) */
  --sup:rgba(255,255,255,.045);      /* tarjeta */
  --sup-2:rgba(255,255,255,.075);    /* tarjeta al pasar por encima */
  --linea:rgba(255,255,255,.10);
  --linea-2:rgba(255,255,255,.18);

  /* Ambar de billete: el unico color de la pagina. Botones, iconos, numeros de
     paso, la ultima linea del titular y el dinero. Al no competir con nada, el
     ojo va derecho a lo que hay que tocar. */
  --ambar:#E8A93C;
  --ambar-2:#F2BA5A;      /* al pasar por encima */
  --ambar-cl:#F7DFB4;     /* texto ambar claro */
  --ambar-osc:#8A6212;    /* ambar para texto SOBRE BLANCO: el claro da 1,9:1 */
  --sobre-ambar:#14100A;  /* la letra dentro del boton */
  --negro-hondo:#050506;  /* el pie y el cromo de la tarjeta */

  --texto:#EDEDEF;        /* texto principal */
  --texto-2:#A0A0A8;      /* secundario. Medido: 7,3:1 sobre --fondo */
  --blanco:#FFFFFF;       /* la tarjeta de la orden, y nada mas */

  /* Tipografia */
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Plex',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'PlexMono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Ritmo */
  --pad:clamp(20px,5vw,64px);
  --maxw:1200px;
  --seccion:clamp(64px,9vw,120px);
  --r:16px;
  --r-chico:10px;
  --sombra:0 16px 40px rgba(0,0,0,.45);
  --sombra-alta:0 30px 70px rgba(0,0,0,.6);
  --curva:cubic-bezier(.16,1,.3,1);

  /* Nombres viejos: los usan 404, aplicar, terminos y privacidad. Se dejan
     apuntando al color nuevo que les toca en vez de perseguirlos uno a uno. */
  --tinta:var(--fondo); --tinta-2:var(--fondo-2); --tinta-3:var(--linea);
  --papel:var(--fondo); --papel-2:var(--fondo-2);
  --muro:var(--texto); --muro-2:var(--linea);
  --turquesa:var(--ambar); --turquesa-cl:var(--ambar-cl); --turquesa-osc:var(--ambar);
  --laton:var(--ambar); --coral:var(--ambar);
  --humo:var(--texto-2); --humo-d:var(--texto-2);
  --gris:var(--texto-2); --gris-cl:var(--texto-2);
  --verde:var(--ambar); --verde-cl:var(--ambar-cl); --verde-osc:var(--fondo-3);
  --verde-hondo:var(--negro-hondo);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .25vw,1.09rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--verde-cl);outline-offset:3px}

/* Tipografia --------------------------------------------------------------- */
.d{font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.94;letter-spacing:.004em;color:#FFFFFF}
h1.d{font-size:clamp(2.7rem,6.1vw,4.5rem);margin:0}
h2.d{font-size:clamp(2rem,5.2vw,3.4rem);margin:0 0 .42em}
h3{font-size:1.14rem;font-weight:600;margin:0 0 .4em;letter-spacing:-.01em;color:var(--texto)}
p{color:var(--texto-2)}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.19em;display:flex;align-items:center;gap:.6em;
  margin:0 0 1.4em;color:var(--verde-cl);
}
.eyebrow::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--ambar);flex:none}

.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.06rem,1rem + .5vw,1.26rem);line-height:1.55;max-width:36ch;color:var(--texto-2)}

/* Secciones ---------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{padding-top:var(--seccion);padding-bottom:var(--seccion);background:var(--fondo)}
.band.clara2{background:var(--fondo-2)}
/* `on-ink` se llamaba asi cuando la pagina era clara y esto era la excepcion.
   Ahora TODO es oscuro y la clase solo marca la franja de mas contraste. */
.on-ink{background:var(--fondo-3)}
.band.reparto{padding-top:0;background:var(--fondo-3)}
.reparto .lede{margin-bottom:2.2em}

/* Botones ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;padding:.95em 1.6em;border:0;border-radius:999px;
  background:var(--ambar);color:var(--sobre-ambar);box-shadow:0 10px 26px rgba(232,169,60,.26);
  transition:transform .18s var(--curva),box-shadow .18s var(--curva),background .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(232,169,60,.38);background:var(--ambar-2)}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(232,169,60,.3)}
.btn-linea{background:none;color:var(--texto);box-shadow:none;border:1.5px solid var(--linea-2)}
.btn-linea:hover{background:rgba(255,255,255,.07);color:#fff;box-shadow:none;transform:translateY(-2px)}

/* Cabecera ----------------------------------------------------------------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,11,.82);color:var(--texto);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.marca{display:flex;align-items:center;gap:.55em;text-decoration:none;
  font-family:var(--display);text-transform:uppercase;font-size:1.16rem;letter-spacing:.02em;
  color:#FFFFFF}
/* El logo es un grabado monocromo: va de MASCARA para tomar el color del texto
   y pesar una sola descarga. */
.logo{
  width:28px;height:28px;flex:none;background:currentColor;
  -webkit-mask:url(logo2-mask.webp) center/contain no-repeat;
          mask:url(logo2-mask.webp) center/contain no-repeat;
}
.top-gratis{
  margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verde-cl);
}
.top .btn{padding:.55em 1.3em;font-size:.85rem}
@media (max-width:720px){.top-gratis{display:none}}

/* Portada ------------------------------------------------------------------ */
.hero{
  background:
    radial-gradient(72% 58% at 84% 4%, rgba(232,169,60,.22), transparent 60%),
    radial-gradient(58% 48% at 4% 94%, rgba(232,169,60,.10), transparent 62%),
    linear-gradient(168deg,#17171A 0%,#0E0E10 56%,#08080A 100%);
  color:var(--texto);
  /* El colchon de arriba no es estetico: la barrita de canales de Desbloqueados
     (banner.js, un div `fixed` de ~144 px con z-index maximo) se posa sobre el
     inicio del hero y no empuja nada. Sin este aire el titular sale leido a
     medias. Si alguien la cierra, solo queda un poco de negro. */
  padding-top:clamp(104px,10vw,132px);padding-bottom:clamp(56px,8vw,106px);
  position:relative;overflow:hidden;
}
/* Trama de billete: rayas finisimas para que el fondo no sea una plancha lisa. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(118deg,transparent 0 26px,rgba(255,255,255,.03) 26px 27px);
}
.hero .wrap{position:relative;display:grid;gap:clamp(38px,5vw,60px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr;align-items:start}}
.hero h1 .brillo{color:var(--ambar)}
.hero .lede{color:#C9C9D0;margin:1.3em 0 0;max-width:42ch}
.hero .eyebrow{color:var(--ambar-cl)}
.hero-acc{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1em}

/* Las tres cifras: rejilla fija de 3 o los separadores quedan colgando. */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.6em;border-top:1px solid var(--linea)}
.cifra{padding:1.05em .9em 0;border-right:1px solid var(--linea)}
.cifra:first-child{padding-left:0}
.cifra:last-child{border-right:0;padding-right:0}
.cifra b{display:block;font-family:var(--display);font-size:clamp(1.7rem,5.6vw,2.1rem);
  line-height:1;color:var(--ambar)}
.cifra span{font-family:var(--mono);font-size:clamp(.57rem,1.9vw,.66rem);letter-spacing:.13em;
  text-transform:uppercase;color:var(--texto-2)}

/* La orden entrante: la firma de la pagina ---------------------------------- */
/* La UNICA pieza clara. Es la pantalla de la app y tiene que parecer que esta
   encima de la pagina, no dibujada dentro. */
.orden{
  background:var(--blanco);color:#16211D;border:0;border-radius:20px;
  box-shadow:var(--sombra-alta);max-width:400px;width:100%;justify-self:end;overflow:hidden;
}
@media (max-width:960px){.orden{justify-self:start}}

.orden-chrome{
  display:flex;align-items:center;gap:.6em;background:var(--negro-hondo);color:#9A9AA2;
  font-family:var(--mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7em .95em;
}
.orden-chrome .pt{width:.45em;height:.45em;border-radius:50%;background:var(--ambar);flex:none}
.orden-chrome .ej{margin-left:auto;color:var(--verde-hondo);background:var(--ambar);
  padding:.15em .55em;border-radius:999px}
.orden-cuerpo{padding:20px}

.orden-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.orden-tipo{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;line-height:1;color:#16211D}
.orden-sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:#5C6B64;margin-top:.45em}

/* Aro de la cuenta regresiva */
.aro{width:52px;height:52px;flex:none;margin-left:auto;position:relative}
.aro svg{transform:rotate(-90deg);display:block}
.aro circle{fill:none;stroke-width:4}
.aro .pista{stroke:#E6E1D7}
.aro .viva{stroke:var(--ambar);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.aro b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);
  font-size:.86rem;color:#16211D}

.orden-linea{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:.5em 0}
.orden-linea span{font-size:.9rem;color:#5C6B64}
.orden-linea b{font-family:var(--mono);font-size:1.14rem;font-weight:500;color:#16211D}
/* La comision, en ambar OSCURO: el ambar de la marca sobre blanco da 1,9:1 y
   este es justo el numero por el que alguien se hace trapichero. */
.orden-linea b.laton{color:var(--ambar-osc)}
.orden-regla{height:1px;background:#E6E1D7;margin:.75em 0}

.orden-cliente{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#16211D}
.orden-ini{width:34px;height:34px;border-radius:50%;background:#F6E7C8;color:#7A5510;
  flex:none;display:grid;place-items:center;font-family:var(--display);font-size:.95rem}
.orden-cliente .meta{color:#5C6B64;font-size:.76rem;font-family:var(--mono)}
.orden-btns{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:16px}
.orden-btns .btn{padding:.78em .8em;font-size:.86rem;background:#16181C;color:#fff;box-shadow:none}
.orden-btns .btn:hover{background:#2A2E35;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.orden-btns .btn-linea{color:#5C6B64;border-color:#E6E1D7;background:none}
.orden-btns .btn-linea:hover{background:#F3EEE5;color:#16211D}

/* El mapa dibujado del paso 2: ilustracion, no cartografia. */
.mapa{background:var(--verde-hondo);border-radius:var(--r-chico);overflow:hidden;margin-bottom:14px}
.mapa svg{display:block;width:100%;height:auto}
.calle{stroke:#26262B;stroke-width:2.2;fill:none}
.calle-b{stroke:#35353C;stroke-width:4.5;fill:none}
.ruta{stroke:var(--ambar);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo)}
.ruta.dibuja{animation:trazo 2.6s ease forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.pin-fin{fill:var(--ambar)}
.pin-yo{fill:#F1F1F4}

.orden-eta{display:flex;align-items:baseline;gap:.5em;margin-bottom:4px}
.orden-eta b{font-family:var(--display);font-size:2.1rem;line-height:1;color:#16211D}
.orden-eta span{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:#5C6B64}

.orden-ok{text-align:center;padding:12px 0 4px}
.orden-ok .tick{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--ambar);
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(232,169,60,.32)}
.orden-ok .tick svg{width:26px;height:26px;stroke:var(--sobre-ambar);stroke-width:3;fill:none}
/* El paso "rechazada" usa el mismo circulo apagado: sin color, no es un logro. */
.orden-ok .tick.no{background:#E6E1D7;box-shadow:none}
.orden-ok .tick.no svg{stroke:#5C6B64}
.orden-ok h4{font-family:var(--display);text-transform:uppercase;font-size:1.35rem;margin:0 0 .3em;color:#16211D}
.orden-ok p{margin:0;font-size:.88rem;color:#5C6B64}
.orden-ok .gana{margin-top:14px;padding-top:14px;border-top:1px solid #E6E1D7}
.orden-ok .gana b{font-family:var(--mono);font-size:1.55rem;color:var(--ambar-osc);display:block}
.orden-ok .gana span{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:#5C6B64}

/* Lleva !important a proposito: `.pasos{display:grid}` se declara despues y con
   la misma especificidad ganaba, dejando los dos flujos a la vez. */
.paso-oculto{display:none !important}
.orden-repetir{
  display:block;width:100%;margin-top:14px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:#5C6B64;padding:.5em;
}
.orden-repetir:hover{color:#16181C}

/* La palabra --------------------------------------------------------------- */
.definicion .wrap{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
@media (max-width:860px){.definicion .wrap{grid-template-columns:1fr}}
.definicion .frase{font-family:var(--display);text-transform:uppercase;color:#FFFFFF;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.04;margin:0}
.definicion .frase em{font-style:normal;color:var(--verde-cl)}
.definicion p{max-width:46ch}

/* Como funciona ------------------------------------------------------------ */
.pasos{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
/* Son 6: en pantalla ancha 3x2 cuadra; auto-fit daba 4+2 y quedaba cojo. */
@media (min-width:900px){.pasos{grid-template-columns:repeat(3,1fr)}}
.pasos li{counter-increment:p;padding:22px;border-radius:var(--r);
  background:var(--sup);border:1px solid var(--linea)}
.pasos li::before{
  content:counter(p);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ambar);color:var(--verde-hondo);
  font-family:var(--mono);font-size:.85rem;margin-bottom:.9em;
}
.pasos li h3{font-size:1.04rem;color:#FFFFFF}
.pasos li p{margin:0;font-size:.94rem}
.nota-flujo{
  margin-top:2.2em;border-left:3px solid var(--ambar);padding:.2em 0 .2em 1.2em;
  font-size:.97rem;max-width:60ch;color:var(--texto-2);
}
.nota-flujo b{color:#FFFFFF}

/* El reparto --------------------------------------------------------------- */
.criterios{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.criterios li{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:24px 22px}
.criterios svg{width:26px;height:26px;stroke:var(--ambar);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.criterios h3{color:#FFFFFF}
.criterios p{margin:0;font-size:.93rem}

.rechazo{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:16px}
@media (max-width:700px){.rechazo{grid-template-columns:1fr}}
.rechazo div{background:rgba(232,169,60,.09);border:1px solid rgba(232,169,60,.28);
  border-radius:var(--r);padding:22px}
.rechazo h3{color:var(--ambar);font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500}
.rechazo p{margin:0;font-size:.94rem}

/* Herramientas ------------------------------------------------------------- */
.herramientas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.herr{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
  padding:24px 22px;
  transition:transform .22s var(--curva),background .22s ease,border-color .22s ease}
.herr:hover{transform:translateY(-4px);background:var(--sup-2);border-color:var(--linea-2)}
.herr svg{width:30px;height:30px;stroke:var(--verde-cl);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.herr h3{color:#FFFFFF}
.herr p{margin:0;font-size:.94rem}

/* Cobertura ---------------------------------------------------------------- */
.cobertura .wrap{display:grid;gap:clamp(26px,3.5vw,42px);grid-template-columns:1fr}
.cobertura .lede{max-width:52ch}
.mapa-cuba{margin:0;align-self:center}
.mapa-lienzo{position:relative}
.mapa-lienzo svg{width:100%;height:auto;display:block;overflow:visible}
.mapa-lienzo .pv{
  fill:rgba(255,255,255,.13);stroke:#8C8C96;stroke-width:2.2;stroke-linejoin:round;
  cursor:pointer;transition:fill .18s ease}
.mapa-lienzo .pv:hover{fill:rgba(232,169,60,.42)}
.mapa-lienzo .pv.viva{fill:var(--ambar);stroke:#FFF6E6}
.mapa-lienzo .pv:focus-visible{outline:none;fill:var(--ambar)}
.mapa-pie{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1em;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--linea)}
.mapa-pie b{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;
  letter-spacing:.01em;color:#FFFFFF}
.mapa-pie span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambar)}

/* La app ------------------------------------------------------------------- */
.appx-solo{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.appx-badge{display:inline-block;flex:none}
.appx-badge img{width:196px;height:auto;display:block;border-radius:8px;
  transition:transform .2s var(--curva),filter .2s ease}
.appx-badge:hover img{transform:translateY(-2px);filter:brightness(1.1)}

/* Preguntas ---------------------------------------------------------------- */
.faq{max-width:780px}
.faq details{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
  margin-bottom:10px;padding:0 20px;transition:background .2s ease,border-color .2s ease}
.faq details[open]{background:var(--sup-2);border-color:var(--linea-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05em 34px 1.05em 0;position:relative;
  font-weight:600;font-size:1.02rem;color:#FFFFFF;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:.78em;font-family:var(--mono);
  font-size:1.35rem;color:var(--verde-cl)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1.3em;font-size:.96rem;max-width:62ch}

/* Pie ---------------------------------------------------------------------- */
.pie{background:var(--verde-hondo);color:var(--texto-2);padding:40px 0;font-size:.85rem;
  border-top:1px solid var(--linea)}
.pie .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.pie .marca{font-size:1rem}
.pie .der{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ambar)}
.pie a{color:var(--texto-2);text-decoration:none}
.pie a:hover{color:#FFFFFF}
.pie .legal{display:flex;gap:16px;font-size:.78rem}

/* ── Formularios (la pagina /aplicar y lo que quede del flujo viejo) ───────── */
.registro{background:var(--fondo-3);color:var(--texto)}
.registro .wrap{max-width:720px}
@media (min-width:861px){
  .registro .wrap{max-width:var(--maxw);display:grid;align-items:start;
    gap:clamp(30px,4vw,58px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .registro .solo-movil{display:none}
}
@media (max-width:860px){.registro .solo-pc{display:none}}
.req{list-style:none;margin:1.8em 0 0;padding:0}
.req li{display:flex;gap:.75em;padding:.6em 0;border-bottom:1px solid var(--linea);
  font-size:.95rem;color:var(--texto-2)}
.req li b{color:#FFFFFF;font-weight:600}
.req svg{width:17px;height:17px;flex:none;margin-top:.28em;stroke:var(--ambar);fill:none;stroke-width:2.4}

.form{background:var(--sup);color:var(--texto);border:1px solid var(--linea);
  border-radius:var(--r);padding:clamp(20px,3vw,30px);box-shadow:var(--sombra)}
.campo{margin-bottom:15px}
.campo label{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--texto-2);margin-bottom:.5em}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.8em .9em;border:1px solid var(--linea-2);border-radius:var(--r-chico);
  background:rgba(0,0,0,.25);font-family:var(--body);font-size:max(1rem,16px);color:var(--texto);
}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto) 50%),
                   linear-gradient(135deg,var(--texto) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--ambar);box-shadow:0 0 0 4px rgba(232,169,60,.18)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:520px){.dos{grid-template-columns:1fr}}
.form .btn{width:100%;margin-top:6px}
.form-pie{font-size:.8rem;color:var(--texto-2);margin:14px 0 0;text-align:center}

.btn-aplicar{display:inline-flex;align-items:center;justify-content:center;margin-top:26px}
.btn-aplicar svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-left:.55em;transition:transform .2s}
.btn-aplicar:hover svg{transform:translateX(3px)}
@media (max-width:640px){.btn-aplicar{width:100%}}

.aplica-page{background:var(--fondo);color:var(--texto);min-height:100vh}
.aplica-wrap{max-width:600px}
.aplica-wrap .form{margin-top:24px}
.aplica-wrap .lede{margin-bottom:4px}
.aplica-panel{color:var(--texto-2);font-size:.9rem;text-align:center;margin-top:22px}
.aplica-panel a{color:var(--verde-cl);font-weight:600}
.volver{display:inline-flex;align-items:center;gap:.45em;color:var(--texto-2);font-size:.9rem;
  text-decoration:none;margin-bottom:22px}
.volver:hover{color:#FFFFFF}
.volver svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.form-aviso{margin:0 0 14px;padding:.75em .9em;border-radius:var(--r-chico);font-size:.9rem;display:none}
.form-aviso.err{display:block;background:rgba(214,120,120,.14);color:#F0D5D5;
  border:1px solid rgba(214,120,120,.4)}
.form-hecho{text-align:center;padding:16px 0}
.form-hecho .tick{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--verde);
  display:grid;place-items:center}
.form-hecho .tick svg{width:28px;height:28px;stroke:var(--sobre-ambar);stroke-width:3;fill:none}
.form-hecho h3{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;color:#FFFFFF}
.form-hecho p{margin:0;color:var(--texto-2);font-size:.95rem}

/* Aparicion al bajar ------------------------------------------------------- */
.sube{opacity:0;transform:translateY(18px);transition:opacity .55s var(--curva),transform .55s var(--curva)}
.sube.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sube{opacity:1;transform:none;transition:none}
  .herr,.btn,.appx-badge img{transition:none}
}

/* Movil -------------------------------------------------------------------- */
@media (max-width:720px){
  /* Se SUMA al safe-area; con max() el iPhone se salva por la isla pero en el
     APK de Android la barra queda pegada arriba. */
  .top{padding-top:env(safe-area-inset-top,0px)}
  .top .wrap{gap:12px;height:60px}
  .top .btn{margin-left:auto}
}

@media (max-width:640px){
  :root{--seccion:clamp(38px,9vw,62px);--pad:18px}
  body{font-size:.94rem;line-height:1.5}
  .lede{font-size:.98rem;line-height:1.45}
  /* Anton es muy estrecha: con line-height .94 las lineas se tocaban. */
  .d{line-height:1.04}
  /* Los saltos escritos a mano cuadran el titular en PC; en el telefono dejan
     medias lineas vacias. Aqui se ignoran. */
  h1.d br,h2.d br,.definicion .frase br{display:none}
  h1.d{font-size:clamp(2.1rem,8.4vw,2.7rem)}
  h2.d{font-size:clamp(1.65rem,6.8vw,2.1rem);margin-bottom:.35em}
  h3{font-size:1rem;margin-bottom:.3em}
  .eyebrow{font-size:.62rem;letter-spacing:.16em;margin-bottom:.9em}

  .btn{font-size:.88rem;padding:.85em 1.3em}
  .top .btn{font-size:.9rem;padding:.5em 1.4em}
  .marca{font-size:1rem}
  .logo{width:24px;height:24px}

  .hero{padding-top:96px;padding-bottom:clamp(34px,7vw,54px)}
  .hero .wrap{gap:26px}
  .hero .lede{margin-top:.9em}
  /* Las dos llamadas mitad y mitad: se alcanzan de un vistazo con el pulgar. */
  .hero-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.35em}
  /* Letra chica, caja no: por debajo de ~44px el dedo falla. */
  .hero-acc .btn{width:100%;font-size:.78rem;padding:1.05em .5em;line-height:1.2;
    letter-spacing:0;text-align:center}
  .cifras{margin-top:1.6em}
  .cifra{padding:.8em .7em 0}
  .cifra b{font-size:1.5rem}
  .cifra span{font-size:.55rem}

  .orden-cuerpo{padding:16px}
  .orden-tipo{font-size:1.3rem}
  .orden-linea{padding:.4em 0}
  .orden-linea span{font-size:.84rem}
  .orden-linea b{font-size:1.02rem}
  .orden-regla{margin:.55em 0}
  .orden-btns{margin-top:12px}
  .orden-btns .btn{font-size:.8rem;padding:.7em .7em}
  .orden-ok h4{font-size:1.15rem}
  .orden-ok p{font-size:.84rem}
  .orden-ok .gana b{font-size:1.35rem}
  .orden-eta b{font-size:1.8rem}

  .definicion .wrap{gap:14px}
  .definicion .frase{font-size:clamp(1.4rem,5.8vw,1.9rem)}
  .definicion .wrap > div + div > p:first-child{margin-top:0}

  .pasos{gap:10px}
  .pasos li{padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:0 12px}
  .pasos li::before{margin:0;width:26px;height:26px;font-size:.78rem}
  .pasos li h3{grid-column:2;margin-bottom:.2em;font-size:1rem}
  .pasos li p{grid-column:2;font-size:.88rem}
  .nota-flujo{margin-top:1.4em;font-size:.88rem;padding-left:1em}

  .criterios{gap:10px}
  .criterios li{padding:15px 16px;display:grid;grid-template-columns:auto 1fr;gap:0 12px}
  .criterios svg{margin:0;width:22px;height:22px}
  .criterios h3{grid-column:2;margin-bottom:.2em}
  .criterios p{grid-column:2;font-size:.86rem}
  .rechazo{gap:10px;margin-top:10px}
  .rechazo div{padding:16px}
  .rechazo h3{font-size:.66rem}
  .rechazo p{font-size:.86rem}

  .herramientas{gap:10px}
  .herr{padding:15px 16px;display:grid;grid-template-columns:auto 1fr;gap:0 12px}
  .herr svg{margin:0;width:24px;height:24px}
  .herr h3{grid-column:2;margin-bottom:.2em}
  .herr p{grid-column:2;font-size:.88rem}

  .mapa-pie{margin-top:12px;padding-top:10px}
  .mapa-pie b{font-size:1rem}
  .mapa-pie span{font-size:.62rem}

  .appx-solo{gap:16px}
  .appx-badge img{width:172px}

  .req{margin-top:1.1em}
  .req li{padding:.42em 0;font-size:.88rem}
  .req svg{width:15px;height:15px}
  .form{padding:18px 16px}
  .campo{margin-bottom:10px}
  .campo label{font-size:.6rem;margin-bottom:.35em}
  /* Los campos se quedan en 16px a proposito: por debajo, iOS hace zoom al tocarlos. */
  .campo input,.campo select,.campo textarea{padding:.65em .75em}
  .dos{gap:10px}
  .form-pie{font-size:.74rem;margin-top:10px}

  .faq details{padding:0 16px;margin-bottom:8px}
  .faq summary{padding:.85em 28px .85em 0;font-size:.94rem}
  .faq summary::after{font-size:1.2rem;top:.68em}
  .faq p{margin-bottom:1em;font-size:.89rem}

  .pie{padding:26px 0;font-size:.8rem}
  .pie .wrap{flex-wrap:wrap;gap:10px}
  .pie .marca{font-size:.92rem}
  .pie .der{font-size:.56rem;letter-spacing:.1em;text-align:right}
  .pie .legal{order:3;width:100%;font-size:.76rem;gap:18px;
    padding-top:12px;border-top:1px solid var(--linea)}
}