/* ── lampara ── */
/* lampara — un cono de luz que baja sobre el título de la sección, como un foco
   de escenario. Portado del `lamp` de la cantera. Cero JS.

   Sirve para partir una web oscura en capítulos: marca "aquí empieza algo
   importante" sin poner una línea ni cambiar de color de fondo. */
[data-lui~="lampara"]{
  --lui-luz:var(--lui-acento,#c8a24a);
  --lui-alcance:clamp(180px,26vh,320px);   /* nunca en vh a secas: ver LEEME */
  position:relative;
  isolation:isolate;
  overflow:hidden;              /* los conos se salen por los lados */
  padding-top:var(--lui-alcance);
  text-align:center;
}

/* Dos conos que se cruzan en el centro, arriba. Se hacen con un gradiente
   cónico recortado, no con dos divs: menos marcado y se anima solo el filtro. */
[data-lui~="lampara"]::before{
  content:"";position:absolute;z-index:-1;
  top:0;left:50%;translate:-50% 0;
  width:min(90%,900px);
  height:var(--lui-alcance);
  background:conic-gradient(from 180deg at 50% 0%,
             transparent 0deg,
             color-mix(in srgb,var(--lui-luz) 26%,transparent) 72deg,
             color-mix(in srgb,var(--lui-luz) 8%,transparent) 90deg,
             transparent 108deg);
  filter:blur(22px);
}

/* La barra encendida de arriba, que es lo que hace que se lea como una lámpara
   y no como una mancha. */
[data-lui~="lampara"]::after{
  content:"";position:absolute;z-index:-1;
  top:0;left:50%;translate:-50% 0;
  width:min(60%,520px);height:2px;
  background:linear-gradient(90deg,transparent,var(--lui-luz),transparent);
  box-shadow:0 0 24px 4px color-mix(in srgb,var(--lui-luz) 45%,transparent);
}

/* El contenido, por encima de la luz. */
[data-lui~="lampara"] > *{position:relative;z-index:1}

/* Variante fría/tenue para webs claras: sobre fondo blanco un cono de color
   ensucia, así que se baja mucho y se usa gris. */
[data-lui~="lampara"][data-lui-tono="claro"]{
  --lui-luz:#8a8a92;
}
[data-lui~="lampara"][data-lui-tono="claro"]::before{opacity:.5}

@media (prefers-reduced-motion:reduce){
  /* No hay animación que quitar: es estático a propósito. Un foco que
     "respira" en cada sección cansa muchísimo. */
}

/* ── borde-gradiente ── */
/* borde-gradiente — un borde con un punto de luz que gira alrededor de la pieza.
   Portado del `hover-border-gradient` / `glowing-effect` de la cantera.

   Sirve para señalar UNA cosa: el plan recomendado, el botón principal, la
   tarjeta destacada. Es un subrayado, no una decoración. */
[data-lui~="bordelux"]{
  --lui-grosor:1px;
  --lui-vel:4s;
  --lui-brillo:var(--lui-acento,#c8a24a);
  position:relative;
  border-radius:14px;
  isolation:isolate;
  /* ⚠ OBLIGATORIO. La capa que gira mide el 180% del ancho y se sale por los dos
     lados; sin recortarla aquí extiende el scroll horizontal de TODA la página
     (y el culpable no se ve en pantalla, así que se busca durante media hora en
     el sitio equivocado). Recortar es además lo que se quiere: el brillo sólo
     debe verse en el canto. */
  overflow:hidden;
}

/* El borde se hace con un cónico girando, recortado a `--lui-grosor` restando
   dos máscaras. No se puede animar `background-image` (no interpola), así que
   lo que gira es el elemento entero mediante @property... y como @property no
   está en todas partes, se gira la CAPA con transform, que sí es universal. */
[data-lui~="bordelux"]::before{
  content:"";position:absolute;
  /* Más grande que la caja y cuadrado: al girar, un rectángulo dejaría
     esquinas sin cubrir. */
  top:50%;left:50%;
  width:180%;aspect-ratio:1;
  translate:-50% -50%;
  z-index:-1;
  background:conic-gradient(from 0deg,transparent 0turn,var(--lui-brillo) .12turn,transparent .28turn);
  animation:lui-borde-gira var(--lui-vel) linear infinite;
  opacity:0;transition:opacity .3s;
}

/* Tapa interior: deja ver el cónico sólo en el canto. */
[data-lui~="bordelux"]::after{
  content:"";position:absolute;
  inset:var(--lui-grosor);
  border-radius:inherit;
  background:var(--lui-superficie,#fff);
  z-index:-1;
}

[data-lui~="bordelux"]:hover::before,
[data-lui~="bordelux"]:focus-within::before,
[data-lui~="bordelux"][data-lui-siempre]::before{opacity:1}

@keyframes lui-borde-gira{
  to{rotate:1turn}
}

/* Variante oscura: la tapa interior toma el color del fondo de la sección. */
[data-lui~="bordelux"][data-lui-tono="oscuro"]::after{background:var(--lui-fondo,#111)}

@media (prefers-reduced-motion:reduce){
  /* Se queda un canto fijo del color de acento: sigue señalando, sin girar. */
  [data-lui~="bordelux"]::before{animation:none;background:var(--lui-brillo);opacity:1}
}

/* ── rejilla-bento ── */
/* rejilla-bento — rejilla de piezas de distinto tamaño, como una caja bento.
   Portado del `bento-grid` de la cantera.

   Sirve para la sección "todo lo que hacemos" sin caer en las TRES TARJETAS
   IDÉNTICAS CENTRADAS que delatan un mockup de IA: aquí cada pieza tiene el
   tamaño que merece su contenido, y eso ya cuenta una jerarquía. */
[data-lui~="bento"]{
  --lui-hueco:1rem;
  --lui-alto:13rem;           /* alto de una fila; una pieza "alta" ocupa dos */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  grid-auto-rows:var(--lui-alto);
  gap:var(--lui-hueco);
}

[data-lui~="bento"] > *{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem;
  border:1px solid var(--lui-linea,#e6e6e0);
  border-radius:16px;
  background:var(--lui-superficie,#fff);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s;
}
[data-lui~="bento"] > *:hover{transform:translateY(-3px);border-color:var(--lui-acento,#c8a24a)}

/* Tamaños. Se piden con atributos en la pieza, no con clases numeradas tipo
   `col-span-2`, para que se lea qué es cada cosa. */
[data-lui~="bento"] > [data-lui-ancho="2"]{grid-column:span 2}
[data-lui~="bento"] > [data-lui-alto="2"]{grid-row:span 2}

/* En móvil TODO a una columna y una fila: un `span 2` en una pantalla de 390 px
   deja huecos vacíos y descoloca la rejilla entera. */
@media (max-width:640px){
  [data-lui~="bento"]{grid-template-columns:1fr;grid-auto-rows:minmax(11rem,auto)}
  [data-lui~="bento"] > [data-lui-ancho="2"],
  [data-lui~="bento"] > [data-lui-alto="2"]{grid-column:auto;grid-row:auto}
}

/* Imagen de fondo de una pieza, con velo para que el texto siga leyéndose. */
[data-lui~="bento"] > * > img.lui-fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
[data-lui~="bento"] > *:has(> img.lui-fondo)::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.12) 62%,transparent);
}
[data-lui~="bento"] > *:has(> img.lui-fondo) > :not(img){position:relative;z-index:2;color:#fff}

[data-lui~="bento"] h3{margin:0 0 .35rem;font-size:1.06rem;line-height:1.3}
[data-lui~="bento"] p{margin:0;font-size:.9rem;line-height:1.55;color:var(--lui-atenuado,#75756c)}
[data-lui~="bento"] > *:has(> img.lui-fondo) p{color:rgba(255,255,255,.82)}

@media (prefers-reduced-motion:reduce){
  [data-lui~="bento"] > *{transition:none}
  [data-lui~="bento"] > *:hover{transform:none}
}

/* ── tarjeta-spotlight ── */
/* tarjeta-spotlight — halo que sigue al cursor + canto de luz en el borde.
   Personalizar con --lui-acento (y --lui-tono por tarjeta si quieres que el
   color signifique algo: disponible, agotado, destacado…). */
[data-lui~="spotlight"]{
  position:relative;
  --lui-tono:var(--lui-acento,#c8a24a);
  --lui-radio:320px;
}

/* Halo interior. La `background` va dos veces a propósito: la primera es el
   fallback para navegadores sin color-mix, la segunda gana donde se soporta. */
[data-lui~="spotlight"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(var(--lui-radio) circle at var(--lui-mx,50%) var(--lui-my,0%),
             rgba(200,162,74,.13),transparent 68%);
  background:radial-gradient(var(--lui-radio) circle at var(--lui-mx,50%) var(--lui-my,0%),
             color-mix(in srgb,var(--lui-tono) 13%,transparent),transparent 68%);
}

/* Borde iluminado: el mismo gradiente recortado a 1px restando dos máscaras. */
[data-lui~="spotlight"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;padding:1px;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(240px circle at var(--lui-mx,50%) var(--lui-my,0%),
             rgba(200,162,74,.55),transparent 60%);
  background:radial-gradient(240px circle at var(--lui-mx,50%) var(--lui-my,0%),
             color-mix(in srgb,var(--lui-tono) 55%,transparent),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

[data-lui~="spotlight"]:hover::before,
[data-lui~="spotlight"]:hover::after{opacity:1}

/* El contenido debe quedar por encima de los dos pseudoelementos. */
[data-lui~="spotlight"] > *{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
  [data-lui~="spotlight"]::before,[data-lui~="spotlight"]::after{transition:none}
}

/* ── linea-tiempo ── */
/* linea-tiempo — hitos en vertical con una línea que se va llenando al bajar.
   Portado del `timeline` / `tracing-beam` de la cantera.

   Vale para tres cosas distintas que salen en casi toda web de servicios:
   "cómo trabajamos" (proceso), "nuestra historia" (años) y "qué incluye"
   (fases de un servicio). */
[data-lui~="linea"]{
  --lui-carril:2px;
  --lui-punto:14px;
  --lui-sangria:2.5rem;
  position:relative;
  padding-left:var(--lui-sangria);
}

/* Carril de fondo, siempre entero. */
[data-lui~="linea"]::before{
  content:"";position:absolute;
  left:calc(var(--lui-punto) / 2 - var(--lui-carril) / 2);
  top:.5rem;bottom:.5rem;width:var(--lui-carril);
  background:var(--lui-linea,#e6e6e0);
}

/* Carril de progreso: sólo la parte recorrida. La altura la escribe el JS en
   --lui-avance; sin JS se queda a 0 y simplemente no se ve, que es un fallo
   elegante (el carril de fondo sigue ahí y la sección se entiende igual). */
[data-lui~="linea"]::after{
  content:"";position:absolute;
  left:calc(var(--lui-punto) / 2 - var(--lui-carril) / 2);
  top:.5rem;width:var(--lui-carril);
  height:var(--lui-avance,0%);
  background:var(--lui-acento,#c8a24a);
  transition:height .18s linear;
}

[data-lui~="linea"] > li,
[data-lui~="linea"] > .lui-hito{
  position:relative;
  list-style:none;
  padding:0 0 2.25rem 0;
}
[data-lui~="linea"] > :last-child{padding-bottom:0}

/* El punto de cada hito. */
[data-lui~="linea"] > li::before,
[data-lui~="linea"] > .lui-hito::before{
  content:"";position:absolute;
  left:calc(var(--lui-sangria) * -1);
  top:.35rem;
  width:var(--lui-punto);height:var(--lui-punto);
  border-radius:50%;
  background:var(--lui-superficie,#fff);
  border:2px solid var(--lui-linea,#e6e6e0);
  transition:border-color .3s,background .3s;
}
/* Alcanzado: lo marca el JS. */
[data-lui~="linea"] > .lui-visto::before{
  border-color:var(--lui-acento,#c8a24a);
  background:var(--lui-acento,#c8a24a);
}

[data-lui~="linea"] .lui-cuando{
  display:block;font:600 .76rem/1.4 system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--lui-acento,#c8a24a);margin-bottom:.3rem;
}
[data-lui~="linea"] h3{margin:0 0 .35rem;font-size:1.05rem;line-height:1.35}
[data-lui~="linea"] p{margin:0;line-height:1.6;color:var(--lui-atenuado,#75756c)}

@media (prefers-reduced-motion:reduce){
  [data-lui~="linea"]::after{transition:none}
  [data-lui~="linea"] > li::before,[data-lui~="linea"] > .lui-hito::before{transition:none}
}

/* ── contador ── */
/* contador — las cifras suben desde cero cuando la sección entra en pantalla.
   Portado del `stats-with-number-ticker` de la cantera.

   Las cifras son de lo que más vende en una web de servicios ("380 pisos
   reformados", "14 años"), y animarlas hace que se lean. Sin animar, la gente
   las salta como si fueran decoración. */
[data-lui~="cifras"]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
  gap:2rem 1.5rem;
}

[data-lui~="cifras"] > *{
  border-top:1px solid var(--lui-linea,#e6e6e0);
  padding-top:1.1rem;
}

[data-lui~="cifras"] .lui-num{
  display:block;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
  font-weight:600;
  color:var(--lui-texto,#1a1a18);
  /* Cifras de ancho fijo: sin esto el número baila de anchura al contar y
     arrastra al texto de al lado. Es el detalle que delata un contador mal hecho. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

[data-lui~="cifras"] .lui-eti{
  display:block;margin-top:.4rem;
  font-size:.86rem;line-height:1.4;
  color:var(--lui-atenuado,#75756c);
}

/* ── revelado-scroll ── */
/* revelado-scroll — el contenido entra al aparecer en pantalla.
   Es el componente más transversal de la librería: bien puesto, sube la
   percepción de calidad de CUALQUIER web sin cambiar ni el diseño ni el texto.

   La animación se hace con una clase, no con la posición del scroll: nada de
   escuchar `scroll` ni de recalcular en cada cuadro. */
[data-lui~="revelar"]{
  opacity:0;
  transform:translateY(var(--lui-desde,18px));
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--lui-retardo,0ms);
  /* Le dice al navegador que va a animar esto: evita el parpadeo del primer
     cuadro en móviles lentos. */
  will-change:opacity,transform;
}

[data-lui~="revelar"].lui-dentro{
  opacity:1;
  transform:none;
  will-change:auto;           /* soltarlo al acabar; mantenerlo gasta memoria */
}

/* Variantes: sólo cambian el punto de partida. */
[data-lui~="revelar"][data-lui-desde="izquierda"]{transform:translateX(-24px)}
[data-lui~="revelar"][data-lui-desde="derecha"]{transform:translateX(24px)}
[data-lui~="revelar"][data-lui-desde="escala"]{transform:scale(.96)}
[data-lui~="revelar"][data-lui-desde="nada"]{transform:none}

@media (prefers-reduced-motion:reduce){
  /* Visible desde el principio y sin transición. OJO: sin esto, alguien con el
     ajuste puesto vería la página EN BLANCO si el observador fallara. */
  [data-lui~="revelar"]{opacity:1;transform:none;transition:none}
}

/* ── acordeon-faq ── */
/* acordeon-faq — preguntas frecuentes que se abren y cierran.
   Portado del `frequently-asked-questions-accordion` / `faqs-with-dashed-lines`.

   Va sobre <details>/<summary> NATIVOS. Eso significa: funciona sin una línea de
   JavaScript, con teclado, con lector de pantalla, y el navegador puede
   encontrar texto dentro aunque esté cerrado. Reimplementarlo con divs y JS
   —que es lo que hace la mitad de las plantillas— es peor en todo. */
[data-lui~="faq"]{
  --lui-sep:1px;
  border-top:var(--lui-sep) solid var(--lui-linea,#e6e6e0);
}

[data-lui~="faq"] details{
  border-bottom:var(--lui-sep) solid var(--lui-linea,#e6e6e0);
}

[data-lui~="faq"] summary{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.25rem 0;
  cursor:pointer;
  font-weight:600;line-height:1.45;
  list-style:none;                 /* quita el triangulito por defecto */
  transition:color .2s;
}
[data-lui~="faq"] summary::-webkit-details-marker{display:none}
[data-lui~="faq"] summary:hover{color:var(--lui-acento,#c8a24a)}
[data-lui~="faq"] summary:focus-visible{
  outline:2px solid var(--lui-acento,#c8a24a);outline-offset:3px;border-radius:4px;
}

/* Signo + que gira a × al abrir. */
[data-lui~="faq"] summary::after{
  content:"";
  flex:0 0 auto;margin-left:auto;
  width:1rem;height:1rem;margin-top:.35rem;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:rotate .3s cubic-bezier(.16,1,.3,1),opacity .3s;
  opacity:.55;
}
[data-lui~="faq"] details[open] summary::after{rotate:135deg;opacity:1}

[data-lui~="faq"] .lui-resp{
  padding:0 0 1.4rem;
  max-width:64ch;
  color:var(--lui-atenuado,#75756c);
  line-height:1.7;
}

/* Apertura suave donde se pueda (Chrome/Safari recientes). Donde no, abre de
   golpe: sigue funcionando perfectamente, sólo sin animación. */
@supports (interpolate-size: allow-keywords){
  [data-lui~="faq"] details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .35s cubic-bezier(.16,1,.3,1),content-visibility .35s allow-discrete;
  }
  [data-lui~="faq"] details[open]::details-content{block-size:auto}
}

@media (prefers-reduced-motion:reduce){
  [data-lui~="faq"] summary::after{transition:none}
  @supports (interpolate-size: allow-keywords){
    [data-lui~="faq"] details::details-content{transition:none}
  }
}

/* ── landing ── */
/* ═══════════════════════════════════════════════════════════════════════════
   Profile Manager 360 — landing

   Idea visual, en una frase: «panel serio a oscuras — negro casi puro, un halo
   violeta detrás del producto, tipografía enorme y el producto explicándose
   solo, bloque a bloque».

   Sin build, sin npm, sin CDN y sin fuentes de fuera: todo lo que carga esta
   página sale de este mismo dominio. La tipografía es la pila del sistema.

   Los contrastes están CALCULADOS, no elegidos a ojo; el número va al lado.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#fbfbfe;              /* blanco con una pizca de violeta */
  --bg2:#f4f4fb;
  --card:#ffffff;
  --linea:#e6e5f3;
  --linea2:#d9d7ec;

  --tx:#101322;              /* 17,86:1 sobre --bg · 18,45 sobre --card */
  --tx2:#4d5168;             /*  7,55:1 sobre --bg · 7,80 sobre --card */
  --tx3:#5f6379;             /*  5,73:1 — metadatos */

  /* Tres tonos de acento, porque uno solo no vale: el violeta de marca
     (#6564F4) va bien de TRAZO sobre negro, pero con texto blanco encima da
     4,48:1 y no llega al 4,5 que necesita un botón. */
  --acento:#5849e8;          /* texto y detalles sobre claro    5,75:1 ✓ */
  --acento-tr:#6564F4;       /* trazos y halos: nunca lleva texto encima  */
  /* ⚠ …y como el de arriba SÍ se estaba usando de texto en los `summary` que se
     pliegan (4,10:1 sobre #f4f4fb y 4,34 sobre #fbfbfe), aquí está su variante de
     TEXTO. Misma regla que en el panel: un color de relleno no es un color de
     texto. Da 4,7 o más sobre las dos superficies y a ojo es el mismo morado. */
  --acento-tx:#5857f3;       /* el acento CUANDO lleva texto               */
  --acento-relleno:#5849e8;  /* fondo de botón con texto blanco 5,94:1 ✓ */
  --violeta:#9148FB;         /* el segundo de la marca, sólo halos        */

  --cr:#c0392b;              /* 5,44:1 sobre --card */
  --am:#95560a;              /* 5,81:1 */
  --jd:#06673f;              /* 6,95:1 */

  --r:16px;
  --ancho:1200px;

  --lui-acento:var(--acento);
  --lui-texto:var(--tx);
  --lui-superficie:var(--card);
  --lui-linea:var(--linea);
}

*,*::before,*::after{box-sizing:border-box}
/* `display:flex` en una regla de clase PISA al atributo `hidden`. Sin esta
   línea el formulario apagado se ve — y estaría pidiendo un correo sin destino,
   sin validación y sin política de privacidad. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;background:var(--bg)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* los halos son enormes a propósito: no deben dar scroll lateral */
}
img{max-width:100%;height:auto;display:block}

.ancho{width:min(100% - 40px,var(--ancho));margin-inline:auto}
.estrecho{width:min(100% - 40px,760px)}
.centro{text-align:center;margin-inline:auto}

.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--acento-relleno);
  color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:650;text-decoration:none}
.saltar:focus{left:0}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;line-height:1.06;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.045em}
h1 em{font-style:normal;color:var(--tx2)}
h2{font-size:clamp(1.85rem,4.1vw,3.1rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
b{font-weight:650;color:var(--tx)}

.rotulo{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);margin:0 0 16px}
.entrada{font-size:clamp(1.03rem,1.4vw,1.22rem);color:var(--tx2);max-width:62ch;text-wrap:pretty}
.matiz{font-size:.95rem;color:var(--tx3);border-left:2px solid var(--linea2);padding-left:16px}

/* ── Halos ──────────────────────────────────────────────────────────────────
   Lo único decorativo de la página. `pointer-events:none` porque van por encima
   en la pila y si no se comen los clics de lo que hay debajo. */
.halo{position:absolute;inset:-20% -30% auto;height:120vh;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 40% at 50% 18%, rgba(101,100,244,.17), transparent 70%),
    radial-gradient(34% 30% at 74% 6%,  rgba(145,72,251,.13), transparent 70%);
  filter:blur(52px)}
.halo2{inset:-40% -30% auto;height:90vh;opacity:.7}
.halo3{inset:-60% -30% auto;height:100vh;opacity:.6}

/* ── Barra flotante ─────────────────────────────────────────────────────────
   Una pastilla que flota separada del borde, con el mismo redondeo que las
   etiquetas y las tarjetas del resto de la página. El hueco de fuera es el que
   va `sticky`; la pastilla de dentro sólo se ocupa de su forma. Separarlo en dos
   evita el clásico «el sticky no pega porque el padre tiene overflow». */
/* ⚠ `barra-reactiva` pone la cabecera en `position:fixed`, así que NO ocupa
   sitio en el flujo y el titular del hero se le metía debajo. El hueco lo
   reserva este contenedor con una altura fija; medido: 80 px en escritorio,
   64 en móvil. */
/* El hueco NO reserva altura: la portada empieza en el borde de la ventana y la
   barra flota ENCIMA. La barra ya es `fixed`, así que no necesita sitio en el
   flujo; sólo hace falta que este contenedor no empuje nada hacia abajo. */
.barra-hueco{position:sticky;top:0;z-index:40;height:0;
  padding:14px clamp(12px,3vw,24px) 0;pointer-events:none}
.barra{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  width:min(100% - clamp(24px,6vw,48px),var(--ancho));margin-inline:auto;
  left:0;right:0;top:14px;
  padding:9px 9px 9px 20px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(1.8) blur(16px);
  border:1px solid var(--linea);
  box-shadow:0 1px 2px rgba(16,19,34,.04),0 10px 30px -18px rgba(16,19,34,.28);
  transition:padding .22s ease,box-shadow .22s ease,background .22s ease}
@supports not (backdrop-filter:blur(1px)){.barra{background:var(--card)}}
.barra .marca{display:flex;flex:none}
.barra .marca img{height:26px;width:auto}
.barra nav{display:flex;gap:clamp(14px,1.8vw,26px);margin-left:auto;flex-wrap:wrap}
.barra nav a{position:relative;color:var(--tx2);text-decoration:none;
  font-size:.93rem;font-weight:550;padding:4px 0}
.barra nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--acento);transform:scaleX(0);transform-origin:50%;
  transition:transform .18s ease}
.barra nav a:hover{color:var(--tx)}
.barra nav a:hover::after{transform:scaleX(1)}
.barra .boton.chico{flex:none;min-height:40px;padding:0 18px;font-size:.9rem;border-radius:999px}
/* Entre 900 y 1000 px el menú va JUSTO: son nueve secciones y el `gap` del
   clamp todavía vale 17 px ahí, así que el noveno enlace se caía a una segunda
   línea y la barra crecía al doble de alto (visto a 905 px al entrar
   «Validado»). Por debajo de 900 el nav se oculta y manda la barra de abajo, y
   por encima de 1000 sobra sitio: esta regla sólo tapa ese tramo. */
@media (min-width:901px) and (max-width:1000px){ .barra nav{gap:12px} }
@media (min-width:901px) and (max-width:950px){ .barra nav{gap:8px}
  .barra nav a{font-size:.88rem} }
/* Compactada al bajar: menos aire y sombra más marcada, para que se despegue
   del contenido que pasa por debajo. */
/* ⚠ FUERA `barra-reactiva`. Ese componente hace DOS cosas que aquí no valen:
   **se esconde al bajar** —y esta barra tiene que seguirte— y pinta su propio
   fondo oscuro al compactarse, que sobre una web clara se ve negro y feo.
   La barra es `fixed` a secas, siempre visible, y la compactación la hace CSS
   solo con `animation-timeline: scroll()`: sin JS y en el compositor. */
.barra{position:fixed}
@supports (animation-timeline: scroll()){
  .barra{animation:barra-compacta linear both;animation-timeline:scroll();
    animation-range:0 140px}
  @keyframes barra-compacta{
    from{padding-block:9px;background:rgba(255,255,255,.82);
         box-shadow:0 1px 2px rgba(16,19,34,.04),0 10px 30px -18px rgba(16,19,34,.28)}
    to  {padding-block:6px;background:rgba(255,255,255,.95);
         box-shadow:0 1px 2px rgba(16,19,34,.05),0 14px 34px -18px rgba(16,19,34,.42)}
  }
}
@media(prefers-reduced-motion:reduce){
  .barra,.barra nav a::after{transition:none}
}
/* ── Cabecera comercial ────────────────────────────────────────────────────
   `.boton{display:inline-flex}` vive MÁS ABAJO en este fichero y con la misma
   especificidad, así que un `.barra-precio{display:none}` a secas no esconde
   nada. Por eso todas estas reglas van con `.barra` delante: para no depender
   del orden del fichero. Y «Entrar» está DOS veces en el HTML —enlace de la
   barra en escritorio, ítem del menú en móvil—; cada corte enseña uno. */
.barra .barra-ham,.barra .barra-precio,.barra nav .nav-entrar,.barra nav .nav-demo{display:none}
.barra-entrar{margin-left:14px;margin-right:4px;color:var(--tx2);text-decoration:none;font-weight:600;
  font-size:.92rem;white-space:nowrap}
.barra-entrar:hover{color:var(--tx)}

@media(max-width:900px){
  /* ⚠ AQUÍ ANTES SE ESCONDÍA EL MENÚ ENTERO y en un móvil sólo quedaban el logo
     y «Entrar»: Precios, Preguntas y Contacto parecían no existir.
     ⚠ Y LA BARRA ES UNA PÍLDORA (`border-radius:999px`): al crecer de alto para
     abrir el menú, ese radio la convertía en un CÍRCULO gigante encima del
     texto. Abierta deja de ser píldora y pasa a panel. */
  .barra{padding:8px 8px 8px 14px;gap:8px;flex-wrap:wrap}
  .barra .marca img{width:116px;height:auto}
  .barra .barra-ham{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
    border:1px solid var(--linea2);background:var(--card);color:var(--tx);
    border-radius:999px;padding:8px 14px;font-size:.88rem;font-weight:650;cursor:pointer}
  /* En la fila sólo cabe lo que convierte. Precios y Entrar entran en el panel. */
  /* En la fila de móvil sólo el logo y el ☰. La demo y Entrar entran en el
     panel: cuatro cosas en una fila de teléfono se aprietan y se acaba
     tocando la que no es. */
  .barra .barra-precio,.barra .barra-entrar,.barra > .boton.primario{display:none}
  .barra.abierto nav .nav-demo{display:block}
  .barra .boton.chico{min-height:38px;padding:0 15px;font-size:.86rem}

  /* ⚠ `animation:none` NO es opcional: el fondo translúcido de la barra lo pinta
     la animación `barra-compacta`, y en la cascada una ANIMACIÓN gana a una
     declaración normal — así que `background:var(--card)` no tapaba nada y el
     titular se leía a través del menú. Apagando la animación, manda el color. */
  .barra.abierto{animation:none;border-radius:20px;background:var(--card);
    backdrop-filter:none;
    box-shadow:0 1px 2px rgba(16,19,34,.06),0 24px 48px -20px rgba(16,19,34,.42)}
  .barra nav{display:none;order:9;flex-basis:100%;flex-direction:column;flex-wrap:nowrap;
    gap:0;margin:6px 0 2px}
  .barra.abierto nav{display:flex;max-height:min(78vh,560px);overflow-y:auto}
  .barra.abierto nav .nav-entrar{display:block}
  .barra nav a{padding:13px 8px;border-top:1px solid var(--linea);font-size:1rem;color:var(--tx)}
  .barra nav a::after{display:none}
  .barra nav .nav-entrar{border-top:1px solid var(--linea2);margin-top:2px;
    font-weight:700;color:var(--acento)}
}

/* ── Barra de abajo, tipo app — dock oscuro con lupa (sólo móvil) ──────────
   Mismo formato que ya usa Hosteate para su franja de abajo: dock flotante
   OSCURO —no el cristal claro de `.barra`, a propósito, para que destaque
   como panel de control y no se confunda con una sección más de la página—,
   iconos redondos con su numerito y magnificado al pasar el cursor, como los
   grupos de apps de Apple. Oculta en escritorio: ahí ya está `.barra nav`.
   El escalado de la lupa lo pone JS en `.navapp-ico`, nunca en `.navapp-i`
   entero: si creciera la fila completa el texto también crecería y bailaría
   el ancho de cada hueco; sólo el círculo se levanta y crece, la etiqueta se
   queda quieta debajo — es justo lo que hace un dock de verdad. */
.navapp{display:none}
@media(max-width:900px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .navapp{
    display:flex;align-items:flex-end;justify-content:space-between;gap:2px;
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;
    padding:10px 7px 9px;border-radius:28px;
    background:linear-gradient(180deg,rgba(32,29,46,.9),rgba(13,12,20,.94));
    backdrop-filter:saturate(1.5) blur(20px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
               0 18px 40px -16px rgba(8,7,16,.6),0 4px 16px -6px rgba(8,7,16,.45)}
  @supports not (backdrop-filter:blur(1px)){.navapp{background:#151320}}
}
.navapp-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;color:rgba(255,255,255,.48);
  font-size:.63rem;font-weight:600;letter-spacing:-.01em}
.navapp-ico{position:relative;width:42px;height:42px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);
  transform-origin:50% 100%;will-change:transform;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .18s,color .18s,box-shadow .18s}
.navapp-tx{transition:color .18s}
.navapp-i:active .navapp-ico{transform:scale(.88)}
/* La sección que se está leyendo, encendida — mismo azul en los tres sitios
   donde puede pasar: el dock, la ficha de Precio, el botón de arriba. */
.navapp-i.on .navapp-ico{background:rgba(88,73,232,.28);color:#fff;
  box-shadow:0 0 0 2px var(--acento-tr),0 6px 18px rgba(88,73,232,.5)}
.navapp-i.on .navapp-num{background:var(--acento-relleno);color:#fff;border-color:#211f30}
.navapp-i.on .navapp-tx{color:#fff}
.navapp-num{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;
  border-radius:999px;background:#26222f;color:rgba(255,255,255,.5);
  font-style:normal;font-size:.5rem;font-weight:700;line-height:16px;text-align:center;
  border:1.5px solid #16141f;transition:background .18s,color .18s,border-color .18s}
/* Precio: destacado siempre esté o no a la vista —es uno de los dos gestos
   que convierten, no depende de por dónde va el scroll—. */
.navapp-ac .navapp-ico{background:rgba(88,73,232,.18);color:#c9c4ff}
.navapp-ac .navapp-num{background:rgba(88,73,232,.55);color:#fff}
.navapp-ac.on .navapp-ico{background:rgba(88,73,232,.34)}
/* Contacto: relleno sólido — el más destacado de los dos, la acción que de
   verdad convierte y por eso lleva el color de marca a tope, no en halo. */
.navapp-cta .navapp-ico{background:var(--acento-relleno);color:#fff;
  box-shadow:0 8px 20px rgba(88,73,232,.55)}
.navapp-cta .navapp-num{background:#fff;color:var(--acento)}
.navapp-cta .navapp-tx{color:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.navapp-ico{transition:none}}
/* Con ratón de verdad (§ script de la lupa) el `:hover` ayuda a que el
   círculo bajo el cursor no se quede plano mientras JS calcula el primer
   fotograma. */
@media(hover:hover) and (pointer:fine){.navapp-i:hover .navapp-ico{color:#fff}}

/* ── Botones ────────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:12px;text-decoration:none;font-weight:650;
  font-size:1rem;border:1px solid var(--linea2);background:transparent;color:var(--tx);
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.boton:hover{transform:translateY(-1px);border-color:var(--acento);background:rgba(169,164,255,.08)}
.boton.primario{background:var(--acento-relleno);border-color:var(--acento-relleno);color:#fff;
  box-shadow:0 10px 34px rgba(88,73,232,.42)}
.boton.primario:hover{background:#6b5cf0;border-color:#6b5cf0;box-shadow:0 14px 44px rgba(88,73,232,.55)}
.boton.chico{min-height:44px;padding:0 17px;font-size:.93rem}   /* 44 px: zona táctil mínima */
.boton.grande{min-height:56px;padding:0 30px;font-size:1.06rem}
@media(prefers-reduced-motion:reduce){.boton{transition:none}.boton:hover{transform:none}}

/* ── Portada ────────────────────────────────────────────────────────────────
   Hecha en HTML. Lo único que es imagen es el personaje; el titular y las
   tarjetas son texto de verdad, así que se leen, se copian, los indexa un
   buscador y no se ven borrosos en ninguna pantalla. */
.portada{position:relative;overflow:hidden;padding:clamp(96px,11vw,150px) 0 clamp(40px,6vw,80px)}
.port-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(165deg,#faf9ff 0%,#f1ecfe 52%,#e6dcfd 100%)}
.port-fondo::after{display:none}
.port-in{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:960px){.port-in{grid-template-columns:1.04fr .96fr}}

.port-eti{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(18px,2.6vw,26px);
  padding:7px 16px 7px 12px;border-radius:999px;background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 14px -8px rgba(60,40,120,.4);
  font-size:.84rem;font-weight:600;color:#4a4468}
.pt-punto{width:7px;height:7px;border-radius:50%;background:#0f9d63;flex:none;
  box-shadow:0 0 0 4px rgba(15,157,99,.18)}
.portada h1{margin-bottom:20px;font-size:clamp(2.3rem,5.2vw,3.9rem)}
.portada h1 em{font-style:normal;color:var(--acento-tr)}
.portada .entrada{margin:0;max-width:50ch;color:#4a4468}
.portada .acciones{justify-content:flex-start;margin-top:clamp(26px,3.2vw,34px)}

.port-chips{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,16px);
  margin:clamp(26px,3.4vw,36px) 0 0;padding:0}
.port-chips li{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:14px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 18px -12px rgba(60,40,120,.45)}
.pc-ico{flex:none;width:34px;height:34px;display:grid;place-items:center}
.pc-ico .ico3d{width:100%;height:100%;object-fit:contain}
.port-chips b{display:block;font-size:.9rem;line-height:1.2}
.port-chips span{font-size:.76rem;color:#5d5680}

/* El personaje y sus tarjetas. */
.port-fig{position:relative;justify-self:center}
.port-fig img{width:min(100%,440px);height:auto;display:block;margin-inline:auto;
  filter:drop-shadow(0 24px 38px rgba(60,40,120,.24))}
.pf-card{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.95);border-radius:15px;padding:14px 16px;
  box-shadow:0 16px 40px -20px rgba(60,40,120,.5)}
.pf-card .k{margin:0 0 7px;font-size:.7rem;color:#5d5680}
.pf-nota{left:-6%;top:8%;min-width:152px}
.pf-nota .n{display:flex;align-items:baseline;gap:7px;margin:0}
.pf-nota .n b{font-size:1.7rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.pf-nota .n u{text-decoration:none;font-size:.76rem;color:#5d5680}
.pf-nota .est{margin:7px 0 0;color:#f5a524;letter-spacing:2px;font-size:.9rem}
.pf-nota .est i{font-style:normal;color:#ddd8ee}
.pf-cuadre{right:-8%;top:26%;display:flex;align-items:center;gap:10px;max-width:240px}
.pf-cuadre b{display:block;font-size:.84rem}
.pf-cuadre span{font-size:.72rem;color:#5d5680}
.pf-g{flex:none;display:flex}
.pf-ok{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acento-relleno);
  color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.pf-pend{right:-4%;bottom:4%;min-width:224px}
.pf-pend ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-pend li{display:flex;align-items:center;gap:8px;font-size:.76rem;color:#4a4468}
.pf-pend li b{margin-left:auto;font-variant-numeric:tabular-nums}
.pf-pend i{flex:none;width:8px;height:8px;border-radius:50%}
.pf-pend .cr{background:#c0392b}.pf-pend .am{background:#d98b0a}.pf-pend .pr{background:var(--acento-tr)}

@media(max-width:960px){
  .portada{padding-top:clamp(88px,20vw,110px)}
  .port-fig{margin-top:12px}
  .pf-nota{left:0;top:2%}
  .pf-cuadre{right:0;top:22%;max-width:210px}
  .pf-pend{right:0;bottom:0}
}
@media(max-width:560px){
  .pf-cuadre,.pf-pend{display:none}
  .pf-nota{left:0;top:0}
}

}
.cifras .lui-num{display:block;font-size:clamp(2.3rem,4.6vw,3.3rem);font-weight:700;
  letter-spacing:-.045em;color:var(--tx);font-variant-numeric:tabular-nums;line-height:1}
.cifras .lui-eti{display:block;margin-top:11px;font-size:.9rem;color:var(--tx2);text-wrap:balance}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.seccion{position:relative;padding:clamp(64px,9vw,124px) 0}
.seccion.gris{background:var(--bg2);border-block:1px solid var(--linea)}
.seccion.destacada{overflow:hidden;border-block:1px solid var(--linea)}
.seccion.destacada .ancho{position:relative;z-index:1}
.cabecera{max-width:70ch;margin-bottom:clamp(40px,5vw,64px)}
.cabecera.centro{margin-inline:auto;text-align:center}
.cabecera.centro .entrada{margin-inline:auto}
.cabecera h2{margin-bottom:18px}

/* ── Bloque: texto a un lado, producto al otro ──────────────────────────────
   Alternando el lado. Tres tarjetas idénticas en fila es lo que delata una
   plantilla; esto obliga a leer cada bloque. */
.bloque{display:grid;gap:clamp(28px,4vw,64px);align-items:center;
  grid-template-columns:1fr;padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--linea)}
.bloque:first-of-type{border-top:0;padding-top:0}
@media(min-width:900px){
  .bloque{grid-template-columns:1fr 1.08fr}
  .bloque.vuelta .bloque-tx{order:2}
  .bloque.vuelta .bloque-vis{order:1}
}
.paso{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento);margin:0 0 14px}
.bloque h3{margin-bottom:14px}
.bloque-tx p{color:var(--tx2)}
.bloque-vis{display:grid;gap:14px;min-width:0}

/* Los avisos, reproducidos tal cual salen en el panel — en HTML y no como
   imagen: escalan a cualquier tamaño y no hay que reexportar nada al cambiar
   una palabra. */
.aviso{display:flex;gap:14px;padding:20px 22px;border-radius:14px;
  background:var(--card);border:1px solid var(--linea);border-left:3px solid var(--linea2);
  box-shadow:0 1px 2px rgba(16,19,34,.04)}
.aviso.cr{border-left-color:var(--cr)}
.aviso.am{border-left-color:var(--am)}
.aviso .ico{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.85rem;font-weight:700;background:#eef0f7;color:var(--tx2)}
.aviso.cr .ico{background:#fdecea;color:var(--cr)}
.aviso.am .ico{background:#fdf3e3;color:var(--am)}
.aviso b{display:block;font-size:1.02rem;line-height:1.35;margin-bottom:6px}
.aviso p{margin:0;font-size:.93rem;color:var(--tx2);line-height:1.5}
.aviso .chip{display:inline-block;margin-top:11px;font-size:.79rem;font-weight:600;
  padding:4px 10px;border-radius:7px;background:#eef0f7;color:var(--tx2)}

.mini-pantalla{margin:0;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--linea2);
  box-shadow:0 26px 60px -30px rgba(16,19,34,.32),0 0 90px -50px rgba(101,100,244,.4)}
.mini-pantalla img{width:100%}

/* El ranking de la zona, reproducido. */
.ranking{background:var(--card);border:1px solid var(--linea);border-radius:14px;padding:22px 24px;
  box-shadow:0 1px 2px rgba(16,19,34,.04)}
.ranking-t{margin:0 0 14px;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx3)}
.ranking ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ranking li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  font-size:.97rem}
.ranking li.tuyo{background:#eeeefe;box-shadow:inset 0 0 0 1px #dcdcfd}
.ranking .pos{flex:none;width:22px;text-align:center;color:var(--tx3);font-size:.85rem;
  font-variant-numeric:tabular-nums}
.ranking li b{flex:1;font-weight:600}
.ranking li em{font-style:normal;color:var(--acento);font-weight:700}
.ranking .nota{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.ranking-p{margin:14px 0 0;font-size:.86rem;color:var(--tx3)}

/* ── La prueba del cuadre ───────────────────────────────────────────────────
   Tarjeta CLARA dentro de una sección oscura: sus colores se declaran aquí
   enteros. Heredar los de la sección la dejaba con el texto casi invisible. */
.prueba{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  margin:clamp(34px,4.4vw,50px) auto 0;max-width:920px;padding:18px 22px;
  background:#fff;border-radius:14px;border-left:3px solid #0f9d63;
  box-shadow:0 24px 60px -30px rgba(16,19,34,.3)}
.prueba p{margin:0;flex:1;min-width:250px;color:#4d5168;font-size:.98rem;line-height:1.55}
.prueba b{color:#101322}
.prueba-g{flex:none;margin-top:1px;display:flex}
.pastilla{flex:none;background:#e4f7ef;color:#06673f;font-weight:700;font-size:.82rem;
  padding:5px 11px;border-radius:8px}
.pie-prueba{text-align:center;margin-top:16px;font-size:.85rem;color:var(--tx3)}

.tres{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(40px,5vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tres article{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:26px}
.tres h3{font-size:1.1rem;margin-bottom:10px}
.tres p{color:var(--tx2);font-size:.95rem}

.mas-cosas{display:grid;gap:14px;margin-top:clamp(34px,4.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.mas-cosas div{background:var(--card);border:1px solid var(--linea);border-radius:14px;padding:20px 22px}
.mas-cosas b{display:block;margin-bottom:5px}
.mas-cosas span{color:var(--tx2);font-size:.93rem}

/* ── Pasos ──────────────────────────────────────────────────────────────── */
.pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:16px}
.pasos li{counter-increment:p;position:relative;background:var(--card);
  border:1px solid var(--linea);border-radius:var(--r);padding:26px 28px 26px 78px}
.pasos li::before{content:counter(p);position:absolute;left:26px;top:26px;
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:#eeeefe;color:var(--acento);font-weight:700;font-size:1rem}
.pasos h3{font-size:1.15rem;margin-bottom:8px}
.pasos p{color:var(--tx2);font-size:.96rem}

.faq .lui-resp p{color:var(--tx2)}

/* ── Cierre ─────────────────────────────────────────────────────────────────
   Pregunta a la izquierda con el botón y las tres garantías; el panel y el
   personaje a la derecha. */
.cierre{position:relative;overflow:hidden;padding:clamp(52px,7vw,96px) 0;
  background:transparent;border-top:1px solid var(--linea)}
.cierre-in{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:940px){.cierre-in{grid-template-columns:1.02fr .98fr}}
.cierre-iso{width:64px;height:64px;margin:0 0 clamp(18px,2.6vw,26px)}
.cierre h2{margin-bottom:20px;text-align:left}
.cierre h2 em{font-style:normal;color:var(--acento-tr)}
.cierre .entrada{margin:0;max-width:52ch;color:#4a4468}
.cierre .acciones{justify-content:flex-start;margin-top:clamp(24px,3vw,32px)}

.garantias{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);
  margin:clamp(26px,3.4vw,36px) 0 0;padding:0}
.garantias li{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px -12px rgba(60,40,120,.4)}
.g-ico{flex:none;width:34px;height:34px;display:grid;place-items:center}
.g-ico .ico3d{width:100%;height:100%;object-fit:contain}
.garantias b{display:block;font-size:.9rem}
.garantias span{font-size:.78rem;color:#5d5680}

.verificado{display:flex;align-items:center;gap:8px;margin:clamp(20px,2.4vw,26px) 0 0;
  font-size:.86rem;color:#5d5680}
.verificado b{color:var(--tx)}

.cierre-fig img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 40px rgba(60,40,120,.22))}

.formulario{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.formulario input{min-height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--linea2);
  background:var(--card);color:var(--tx);font:inherit;min-width:260px}

/* ── Pie ────────────────────────────────────────────────────────────────────
   Del mismo material que el resto: fondo lila muy claro, columnas con rótulo en
   violeta y una raya fina separando la línea legal. Nada de iconos de redes que
   no existen ni enlaces a páginas sin escribir: sólo lo que hay. */
.pie{background:linear-gradient(180deg,#f6f4ff 0%,#efeaff 100%);
  border-top:1px solid var(--linea);padding:clamp(40px,5vw,64px) 0 clamp(24px,3vw,34px);
  color:var(--tx2);text-align:left}
.pie-top{display:grid;gap:clamp(28px,4vw,54px)}
@media(min-width:860px){.pie-top{grid-template-columns:1.15fr 1.85fr}}
.pie-marca img{height:38px;width:auto;margin:0 0 16px}
.pie-marca p{margin:0;font-size:.93rem;max-width:38ch}
.pie-cuadre{display:flex;align-items:center;gap:8px;margin-top:14px !important;
  font-size:.84rem;color:#5d5680}

.pie-cols{display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.pie-cols h3{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);margin:0 0 14px}
.pie-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pie-cols a{color:var(--tx2);text-decoration:none;font-size:.93rem}
.pie-cols a:hover{color:var(--acento);text-decoration:underline}

.pie-bajo{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline;
  margin-top:clamp(30px,4vw,46px);padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--linea)}
.pie-bajo p{margin:0;font-size:.82rem}
.pie-bajo .legal{flex:1;min-width:280px;color:var(--tx3);font-size:.78rem;line-height:1.6}

/* ── Revelado: SÓLO transform, nunca opacidad ───────────────────────────────
   ⚠ ANULACIÓN DELIBERADA del componente de la librería, que entra subiendo la
   opacidad desde 0. A media animación la letra tiene casi el color del fondo y
   un auditor lo lee como contraste 1,12:1. El movimiento se nota igual moviendo
   sólo el eje Y. Se anula desde AQUÍ y no tocando el componente: esa carpeta es
   la fuente compartida y la sobrescribe la Cabina. (Hay que arreglarlo allí.) */
[data-lui~="revelar"]{opacity:1 !important;
  transition:transform .7s cubic-bezier(.16,1,.3,1) !important;will-change:transform}

/* ═══════════════════════════════════════════════════════════════════════════
   Los componentes de la librería, adaptados a fondo oscuro

   TODOS por variables `--lui-*` y por reglas de esta hoja. Nunca tocando su
   CSS: esa carpeta es la fuente compartida y la sobrescribe la Cabina.
   Y regla de la casa que aquí importa el doble: **un componente calibrado para
   fondo claro se ve mal sobre oscuro**. Cada uno se ha mirado sobre el negro
   real en el que está puesto, no sobre el ejemplo de su LEEME.
   ═════════════════════════════════════════════════════════════════════════ */



/* ── Foco que sigue al cursor (tarjeta-spotlight) ───────────────────────────
   Sobre oscuro hay que subirle el brillo: su valor por defecto está calibrado
   para tarjetas blancas y sobre negro no se veía nada. */
[data-lui~="spotlight"]{--lui-brillo:rgba(101,100,244,.10);--lui-canto:rgba(101,100,244,.34)}

/* ── Borde de luz en la prueba del cuadre ────────────────────────────────────
   Es la única pieza de toda la página con luz permanente, y a propósito: es la
   frase que vende. Si brillaran tres cosas, no brillaría ninguna.
   ⚠ Su tapa interior se pinta con `--lui-superficie`, y esa variable la tenemos
   puesta EN OSCURO para toda la página: la tarjeta se volvió negra con el texto
   gris encima y no se leía nada. Aquí se le devuelve el blanco, que es lo que
   esta tarjeta es. */
.prueba{position:relative;--lui-superficie:#ffffff;--lui-brillo:#0f9d63;--lui-vel:5s}

/* ── Lámpara sobre el titular de la sección que vende ───────────────────────*/
[data-lui~="lampara"]{--lui-luz:var(--acento-tr);--lui-fondo:transparent}

/* ── Bento ──────────────────────────────────────────────────────────────────*/
.bento{margin-top:clamp(34px,4.4vw,52px)}
.bento article{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);justify-content:flex-start}
.bento .eti{display:inline-block;margin-bottom:12px;font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--acento)}
.bento h3{font-size:1.18rem;margin-bottom:10px}
.bento p{color:var(--tx2);font-size:.96rem}
.senales{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.senales li{position:relative;padding-left:20px;font-size:.93rem;color:var(--tx2)}
.senales li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--acento)}

/* ── Línea de tiempo ────────────────────────────────────────────────────────
   ⚠ Su etiqueta `.lui-cuando` se pinta con el acento del componente; sobre
   claro suele fallar el contraste y sobre oscuro se apagaba. Aquí va con el
   tono de acento claro, que da 9:1. */
/* ⚠ `--lui-punto` es el TAMAÑO del punto (14px), no su color. Metiéndole un
   color, la medida quedaba inválida y los puntos y el carril desaparecían: la
   línea se veía como tres párrafos sueltos. El color del punto sale de
   `--lui-superficie` (relleno) y `--lui-acento` (el tramo ya recorrido). */
.linea{--lui-linea:#e0dff0;--lui-atenuado:#c9c7e0;--lui-acento:var(--acento);
  --lui-superficie:var(--card)}
.linea .lui-cuando{color:var(--acento);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.76rem}
.linea h3{font-size:1.2rem;margin:8px 0 8px}
.linea p{color:var(--tx2);font-size:.97rem}

/* ── La barra reactiva ──────────────────────────────────────────────────────
   El componente la compacta al bajar. La nuestra ya es `sticky` con su propio
   fondo, así que sólo se le pide que apriete un poco y marque el borde. */
.barra[data-lui~="barra"]{transition:padding .22s ease,background .22s ease,border-color .22s}
.barra[data-lui~="barra"].lui-compacta{padding-block:9px;
  background:rgba(251,251,254,.94);border-bottom-color:var(--linea2);
  box-shadow:0 1px 16px rgba(16,19,34,.06)}

/* ═══ Plataforma web de 2026, cada cosa con su degradado ═══════════════════ */

/* La pantalla del hero se endereza al bajar. Va con `animation-timeline`, que
   corre en el compositor y NO necesita JavaScript; donde no hay soporte, la
   pantalla se ve recta desde el principio y no falta nada. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-lui~="inclina"] .marco{
      transform-origin:50% 0;
      animation:enderezar linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 42%;
    }
    @keyframes enderezar{
      from{transform:perspective(1600px) rotateX(11deg) scale(.955)}
      to  {transform:perspective(1600px) rotateX(0deg)  scale(1)}
    }
  }
}

/* Un ángulo interpolable de verdad para el resplandor del botón principal.
   Sin `@property` el navegador no sabe animar un ángulo y el degradado salta. */
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Transición entre páginas del propio sitio. Hoy la web es una sola página, así
   que no cambia nada; el día que haya aviso legal o precios, la navegación
   entra suave sin tocar una línea de JS. */
@view-transition{navigation:auto}

/* Un titular no debe partirse dejando una palabra huérfana. */
h1,h2{text-wrap:balance}

/* ⚠ AQUÍ HABÍA UN `content-visibility:auto` Y SE HA QUITADO.
   Sobre el papel ahorra pintado; en la práctica, con secciones que en el móvil
   pasan de 1.500 px, el `contain-intrinsic-size` de 700 px se equivoca por el
   doble y el scroll da tirones y saltos al desplazarse — que es justo lo que
   hace que una web «se vea mal» en un teléfono aunque cada pieza esté bien.
   La página pesa 800 KB y saca 99 en rendimiento sin esto: no compensa. */

/* La lámpara centra el contenido de su sección, que es lo que quiere el
   titular pero no las tarjetas: un párrafo de tres líneas centrado se lee peor
   que alineado a la izquierda. */
[data-lui~="lampara"] .tres article{text-align:left}



/* ═══════════════════════════════════════════════════════════════════════════
   «Qué vigila» — cabecera a dos columnas, personaje y cuatro fichas
   ═══════════════════════════════════════════════════════════════════════════ */

.cab2{display:grid;gap:clamp(16px,3vw,48px);align-items:end;
  margin-bottom:clamp(28px,3.6vw,44px)}
@media(min-width:900px){.cab2{grid-template-columns:1.05fr .95fr}}
.cab2 h2{margin:0}
.cab2 h2 em{font-style:normal;color:var(--acento)}
.cab2-tx p{color:var(--tx2);font-size:1.03rem;margin:0 0 .5em;max-width:46ch}
.cab2-mas{color:var(--acento) !important;font-weight:650}

.vigila{display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:980px){.vigila{grid-template-columns:.72fr 1.6fr}}
/* La columna del personaje ESTIRA hasta la altura de las cuatro fichas: con
   `align-content:start` se quedaba a media altura y dejaba un hueco muerto
   debajo que era lo que hacía que la sección se viera descolgada. */
.vig-col{display:grid;gap:clamp(14px,1.6vw,18px);grid-template-rows:1fr auto}

/* El personaje, sobre su degradado. `align-items:end` porque la ilustración va
   apoyada abajo: centrada deja un zócalo vacío que se ve raro. */
.figura{position:relative;display:grid;align-items:end;justify-items:center;overflow:hidden;
  min-height:340px;border-radius:var(--r);
  background:linear-gradient(160deg,#efeafe 0%,#e6ddfd 46%,#d9ccfb 100%)}
.figura img{width:min(92%,320px);height:auto;filter:drop-shadow(0 18px 26px rgba(60,40,120,.22))}
.fig-chip{position:absolute;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:13px;box-shadow:0 8px 22px rgba(60,40,120,.16);color:var(--acento)}
.fig-g{width:46px;height:46px;left:7%;top:26%}
.fig-estrellas{right:6%;top:14%;padding:8px 12px;font-size:.9rem;letter-spacing:1px;color:#8b83c9}
.fig-estrellas i{font-style:normal;color:#dcd9ee}
.fig-barras{width:44px;height:44px;right:9%;top:40%}

.vig-nota{display:flex;gap:13px;align-items:flex-start;padding:20px 22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--linea);box-shadow:0 1px 2px rgba(16,19,34,.04)}
.vig-nota b{display:block;margin-bottom:5px}
.vig-nota p{margin:0;color:var(--tx2);font-size:.94rem}
.vig-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.vig-ico.pr{background:#eeeefe;color:var(--acento)}

/* Las cuatro fichas. Cada una con su tinte: el color no decora, dice de qué
   familia es el aviso — y son los mismos cuatro tonos que usa el panel. */
.fichas{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr}
@media(min-width:700px){.fichas{grid-template-columns:1fr 1fr}}
.ficha-v{position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px);box-shadow:0 1px 2px rgba(16,19,34,.04)}
.ficha-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ficha-n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.ficha-e{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ficha-ico{flex:none;margin-left:auto;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center}
.ficha-v h3{font-size:1.16rem;line-height:1.25;margin-bottom:11px}
.ficha-v > p{color:var(--tx2);font-size:.94rem;margin:0}
.ficha-dato{display:flex;align-items:center;gap:9px;margin:16px 0 0 !important;
  padding:11px 13px;border-radius:11px;font-size:.9rem;line-height:1.35}
.ficha-dato span{flex:1;min-width:0}
.ficha-dato i{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:.68rem;font-weight:700;color:#fff}
.ficha-mas{margin-top:auto;padding-top:15px;font-size:.88rem;font-weight:650;text-decoration:none}
.ficha-mas:hover{text-decoration:underline}

/* Los cuatro tintes. Todos los textos pequeños van con el tono OSCURO de su
   familia, que es el que pasa 4,5:1 sobre blanco; el claro es sólo relleno. */
.ficha-v.cr .ficha-n{background:#fdecea;color:#a3231b}
.ficha-v.cr .ficha-e,.ficha-v.cr .ficha-mas{color:#a3231b}
.ficha-v.cr .ficha-ico{background:#fdecea;color:#c0392b}
.ficha-v.cr .ficha-dato{background:#fdecea;color:#8f1f18}
.ficha-v.cr .ficha-dato i{background:#c0392b}

.ficha-v.am .ficha-n{background:#fdf3e3;color:#8a4f09}
.ficha-v.am .ficha-e,.ficha-v.am .ficha-mas{color:#8a4f09}
.ficha-v.am .ficha-ico{background:#fdf3e3;color:#95560a}
.ficha-v.am .ficha-dato{background:#fdf3e3;color:#7a4608}
.ficha-v.am .ficha-dato i{background:#b8760f}

.ficha-v.az .ficha-n{background:#eaeefd;color:#2438c4}
.ficha-v.az .ficha-e,.ficha-v.az .ficha-mas{color:#2438c4}
.ficha-v.az .ficha-ico{background:#eaeefd;color:#2842E9}
.ficha-v.az .ficha-dato{background:#eaeefd;color:#22319f}
.ficha-v.az .ficha-dato i{background:#2842E9}

.ficha-v.jd .ficha-n{background:#e4f7ef;color:#06673f}
.ficha-v.jd .ficha-e,.ficha-v.jd .ficha-mas{color:#06673f}
.ficha-v.jd .ficha-ico{background:#e4f7ef;color:#0a7d4d}
.ficha-v.jd .ficha-dato{background:#e4f7ef;color:#055733}
.ficha-v.jd .ficha-dato i{background:#0f9d63}

/* La banda que cierra la sección. */
.banda{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,24px);padding:20px clamp(20px,2.4vw,28px);
  border-radius:var(--r);background:#f2f1fe;border:1px solid #e2e0fb}
.banda-tx{flex:1;min-width:200px}
.banda-tx b{display:block;font-size:1.06rem}
.banda-tx span{color:var(--tx2);font-size:.94rem}
.banda .boton{flex:none}
.banda-logo{flex:none;opacity:.85}
@media(max-width:620px){.banda{flex-direction:column;align-items:flex-start}
  .banda .boton{width:100%}.banda-logo{display:none}}


/* ═══════════════════════════════════════════════════════════════════════════
   «El cuadre» — personaje a la izquierda, titular a la derecha y la franja
   de la prueba cruzando por debajo a todo el ancho.
   ═══════════════════════════════════════════════════════════════════════════ */

.cuadre-top{display:grid;gap:clamp(12px,2vw,34px);align-items:center}
@media(min-width:940px){.cuadre-top{grid-template-columns:.82fr 1.18fr}}
.cuadre-fig{display:grid;justify-items:center}
.cuadre-fig img{width:min(100%,420px);height:auto;
  filter:drop-shadow(0 22px 34px rgba(60,40,120,.20))}
.cuadre-tx h2{margin-bottom:20px;text-align:left}
.cuadre-tx h2 em{font-style:normal;color:var(--acento)}
.cuadre-tx .entrada{margin:0;max-width:56ch}
/* Frases marcadas dentro del párrafo. Va con el tono de TEXTO del acento
   (5,75:1), no con el de trazo, porque esto es texto pequeño. */
.ac{color:var(--acento);font-weight:650}

/* El rótulo con su raya, como en la referencia. */
.rotulo.raya::after{content:"";display:block;width:44px;height:3px;border-radius:2px;
  background:var(--acento);margin-top:11px}

/* La franja de la prueba: aquí es ancha y cruza la sección, así que se le
   quita el `max-width` que tenía cuando era una tarjeta centrada. */
#cuadre .prueba{max-width:none;margin-top:clamp(6px,1.4vw,14px);padding:20px 24px;gap:16px}
#cuadre .prueba p{font-size:1rem}
.prueba .pastilla{display:inline-flex;align-items:center;gap:7px}
.prueba .pastilla i{width:16px;height:16px;border-radius:50%;background:#0f9d63;color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.6rem;font-weight:700}

.pie-prueba{display:flex;align-items:center;justify-content:center;gap:8px}

/* Las tres tarjetas: icono en cuadradito lila arriba y filo violeta abajo. */
/* El filo violeta va como `border-bottom` y NO como `::after`: ese
   pseudoelemento ya lo usa `tarjeta-spotlight` para su canto de luz, y el que
   gane deja al otro sin pintar. */
#cuadre .tres article{padding-bottom:26px;border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--acento-tr),#a78bfa) 1;
  border-image-slice:0 0 1 0}
.tres-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:#eeeefe;color:var(--acento);margin-bottom:16px}

/* La lámpara centra su sección entera, y aquí sólo debe centrarse el pie de la
   franja. El bloque del titular va alineado a la izquierda, como el resto. */
[data-lui~="lampara"] .cuadre-tx,
[data-lui~="lampara"] .cuadre-tx .entrada,
[data-lui~="lampara"] .prueba{text-align:left}
[data-lui~="lampara"] .rotulo.raya{text-align:left}

/* ═══════════════════════════════════════════════════════════════════════════
   «Lo que haces con todo eso» — bento denso con maquetas del panel en HTML

   Las pantallas van reproducidas en HTML y no como captura: escalan sin
   pixelarse, pesan cien veces menos y no arrastran ningún dato de nadie.
   ═══════════════════════════════════════════════════════════════════════════ */

.bento2{display:grid;gap:clamp(14px,1.6vw,18px);grid-template-columns:1fr}
/* Doce columnas y no seis: con seis, «Accesos» y «Tu marca» no caben lado a
   lado debajo de «Te encuentran» —harían falta medias columnas— y «Preguntar»
   no puede ocupar dos filas. Con doce sale exacto. */
@media(min-width:760px){
  .bento2{grid-template-columns:repeat(12,1fr)}
  .b2-fig{grid-column:span 5}.b2-lista{grid-column:span 7}
  .b2-auto,.b2-qr,.b2-rank{grid-column:span 4}
  .b2-preg{grid-column:span 6;grid-row:span 2}
  .b2-enc{grid-column:span 6}
  .b2-acc{grid-column:span 3}.b2-marca{grid-column:span 3}
}
.b2{position:relative;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--r);padding:clamp(18px,2vw,26px);box-shadow:0 1px 2px rgba(16,19,34,.04)}
.b2-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:#eeeefe;color:var(--acento);font-size:.74rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:14px}
.b2 h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:18px}
.b2 h3{display:flex;align-items:center;gap:10px;font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.b2-s{color:var(--tx2);font-size:.92rem;margin:0}
.b2 .b2-s + .mock,.b2 .b2-s + .preg-cols{margin-top:16px}

.ico2{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:#eeeefe;color:var(--acento)}
.ico2.chico{width:30px;height:30px;border-radius:9px}

/* El personaje, sin caja: va sobre el fondo de la sección como en la maqueta. */
.b2-fig{background:transparent;border:0;box-shadow:none;padding:0;display:grid;
  align-content:start;gap:clamp(12px,1.6vw,18px)}
.figura2{display:grid;justify-items:center}
.figura2 img{width:min(100%,360px);height:auto;
  filter:drop-shadow(0 20px 30px rgba(60,40,120,.18))}
.nota2{display:flex;gap:13px;align-items:flex-start;background:var(--card);
  border:1px solid var(--linea);border-radius:var(--r);padding:20px 22px;
  box-shadow:0 1px 2px rgba(16,19,34,.04)}
.nota2 p{margin:0 0 5px;font-size:.96rem}
.nota2 span{color:var(--tx3);font-size:.88rem}

/* La lista de capacidades. */
.capas{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.capas li{display:flex;gap:14px;align-items:flex-start}
.capas b{display:block;margin-bottom:4px}
.capas p{margin:0;color:var(--tx2);font-size:.93rem}
.capas-min{gap:16px}
.capas-min p{font-size:.88rem}

/* ── Maqueta del formulario de respuestas ── */
.mock{background:#f7f7fc;border:1px solid var(--linea);border-radius:13px;padding:16px}
.mock-t{margin:0 0 14px;font-size:.9rem;font-weight:650}
.mock-l{display:block;font-size:.76rem;color:var(--tx3);margin:12px 0 5px}
.mock-l:first-of-type{margin-top:0}
.mock-c{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--card);border:1px solid var(--linea2);border-radius:9px;
  padding:9px 12px;font-size:.86rem}
.mock-c .chev{color:var(--tx3);font-size:.8rem}
.est{letter-spacing:2px;color:#f5a524}
.est i{font-style:normal;color:#dfdce9}
.mock-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);font-size:.84rem;color:var(--tx2)}
.sw{flex:none;width:38px;height:21px;border-radius:999px;background:var(--acento);position:relative}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:15px;height:15px;
  border-radius:50%;background:#fff}

/* ── El cartel con QR ── */

/* (El damero decorativo se sustituyó por un QR de verdad; ver más abajo.) */

/* ── El ranking ── */
.b2-ok{display:flex;gap:9px;align-items:flex-start;margin:0 0 14px;
  font-size:.88rem;color:#06673f}
.ico-ok{flex:none;color:#0f9d63;margin-top:1px}
.rank2{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border:1px solid var(--linea);border-radius:11px;overflow:hidden}
.rank2 li{display:flex;align-items:center;gap:11px;padding:10px 13px;font-size:.9rem}
.rank2 li + li{border-top:1px solid var(--linea)}
.rank2 li.tuyo{background:#eeeefe}
.rank2 .pos{flex:none;width:16px;color:var(--tx3);font-size:.82rem;font-variant-numeric:tabular-nums}
.rank2 b{flex:1;font-weight:600}
.rank2 .nota{font-weight:700;font-variant-numeric:tabular-nums}
.rank2 i{flex:none;width:14px;font-style:normal;font-size:.8rem;text-align:center}
.sube{color:#0f9d63}.baja{color:#c0392b}
.rank2 + .b2-s{margin-top:12px}

/* ── Preguntar: lista + chat ── */
.preg-cols{display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:620px){.preg-cols{grid-template-columns:1fr 1.05fr}}
.chat{display:grid;gap:10px;align-content:start}
.burb{margin:0;padding:12px 14px;border-radius:14px;font-size:.86rem;line-height:1.45}
.burb.mia{background:var(--acento-tr);color:#fff;justify-self:end;border-bottom-right-radius:5px;
  max-width:88%}
.burb.suya{background:#f7f7fc;border:1px solid var(--linea);border-bottom-left-radius:5px}
.burb.suya p{margin:0}
.quejas{list-style:none;margin:11px 0;padding:0;display:grid;gap:7px}
.quejas li{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--tx2)}
.quejas b{color:var(--tx);font-variant-numeric:tabular-nums}
.ej{margin:0 !important;padding-top:10px;border-top:1px solid var(--linea);
  font-size:.79rem;color:var(--tx3);line-height:1.6}
.ej b{color:var(--tx2)}

/* ── Te encuentran ── */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:11px;
  overflow:hidden;margin:16px 0 14px}
.metricas div{background:var(--card);padding:13px 14px;display:grid;gap:3px}
.metricas span{font-size:.75rem;color:var(--tx3)}
.metricas b{font-size:1.22rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metricas i{font-style:normal;font-size:.78rem;color:var(--tx3)}

/* ── Accesos y marca ── */
.gente{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.gente li{display:flex;align-items:center;gap:11px}
.gente b{display:block;font-size:.92rem}
.gente span{font-size:.78rem;color:var(--tx3)}
.gente div{flex:1}
.av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:#fff;font-weight:700;font-size:.85rem}
.av.grande{width:44px;height:44px;font-size:1.05rem;border-radius:13px}
.av1{background:var(--acento-tr)}.av2{background:#2842E9}.av3{background:#9148FB}
.pt{flex:none;width:8px;height:8px;border-radius:50%}
.pt.ok{background:#0f9d63}.pt.pr{background:var(--acento-tr)}
.marca-mock{display:flex;align-items:center;gap:13px;margin-top:16px;padding:14px;
  border:1px solid var(--linea);border-radius:12px;background:#f7f7fc}
.marca-mock b{display:block}
.marca-mock span{font-size:.8rem;color:var(--tx3)}
.muestras{display:flex;gap:8px;margin-top:14px}
.muestras i{width:26px;height:26px;border-radius:8px;border:1px solid var(--linea2)}
.muestras i:nth-child(1){background:var(--acento-tr)}
.muestras i:nth-child(2){background:#a78bfa}
.muestras i:nth-child(3){background:#c9c2fb}
.muestras i:nth-child(4){background:#101322}
.muestras i:nth-child(5){background:#f2f1f9}

/* ── Los iconos 3D ──────────────────────────────────────────────────────────
   Vienen recortados del pliego que pasó Ruben y YA TRAEN SU PROPIA PASTILLA
   (blanca o violeta), así que el cuadradito lila del contenedor sobra: pintar
   los dos deja un icono dentro de una caja dentro de otra caja.
   La caja mantiene su tamaño fijo y la imagen se ajusta dentro con
   `object-fit:contain`, así que da igual la proporción de cada icono y no hay
   ni un píxel de salto de maquetación. */
.ico3d{width:100%;height:100%;object-fit:contain;display:block}
.ico2:has(.ico3d),
.vig-ico:has(.ico3d),
.ficha-ico:has(.ico3d),
.tres-ico:has(.ico3d){background:none;padding:0}
/* Sin `:has()` no pasa nada grave —se ve la pastilla de debajo—, pero se puede
   apagar también por el atributo del contenedor si algún día hiciera falta. */
.ficha-ico{width:42px;height:42px}
.tres-ico{width:52px;height:52px}
.vig-ico{width:42px;height:42px}
.ico2{width:42px;height:42px}
.ico2.chico{width:32px;height:32px}
.b2 h3 .ico2.chico{margin-right:2px}

/* ── El cartel del QR, con el código de verdad ──────────────────────────────
   El QR lo genera `inc/qr.php` (el mismo del panel) y apunta a esta página:
   escaneado desde la pantalla lleva a un sitio real, no a una URL inventada. */
.cartelito{margin-top:16px;border:1px solid var(--linea);border-radius:15px;overflow:hidden;
  background:var(--card);text-align:center;box-shadow:0 8px 26px -14px rgba(16,19,34,.28)}
.cartelito-top{padding:20px 18px 4px;
  background:linear-gradient(180deg,#f6f5ff 0%,var(--card) 100%)}
.cart-eti{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);background:#eeeefe;
  padding:4px 10px;border-radius:999px;margin-bottom:11px}
.cartelito-top b{display:block;font-size:1.06rem;line-height:1.25;letter-spacing:-.02em}
.est-oro{margin:10px 0 0;color:#f5a524;font-size:1.25rem;letter-spacing:4px}
.cart-sub{display:block;margin-top:7px;font-size:.78rem;color:var(--tx3)}
.qr-caja{padding:16px 0 18px;display:grid;place-items:center}
.qr-svg{width:118px;height:118px;display:block;border-radius:6px}
.cartelito-pie{background:var(--acento-tr);color:#fff;padding:13px}
.cartelito-pie b{display:block;font-size:.76rem;letter-spacing:.16em}
.cartelito-pie i{font-style:italic;font-size:.86rem;opacity:.92}

/* ── Los avatares, en blanco con la inicial en violeta ──────────────────────
   Con relleno de color competían con los iconos y con el propio acento de la
   página; en blanco con borde se leen igual y no hacen ruido. */
.av{background:var(--card);color:var(--acento);border:1px solid var(--linea2);
  box-shadow:0 1px 2px rgba(16,19,34,.05)}
.av.grande{border-radius:13px}

/* ── Los iconos van SUELTOS, sin su plato ───────────────────────────────────
   Al recortarlos del catálogo traían pegada su propia pastilla, y sobre la
   tarjeta se veía un cuadrado con las esquinas duras. Ahora el dibujo va solo y
   el cuadradito de color lo pone la página, que es lo que quiere la maqueta:
   cada ficha con el tinte de su familia. */
.ico2,.vig-ico,.ficha-ico,.tres-ico,.ruta-ico{display:grid;place-items:center;padding:9px}
.ico2,.vig-ico,.tres-ico,.ruta-ico{background:#eeeefe}
.ficha-ico{border-radius:13px}
.tres-ico,.ruta-ico{border-radius:16px}

/* ═══════════════════════════════════════════════════════════════════════════
   «Cómo empieza» — el carril que se llena al bajar
   ═══════════════════════════════════════════════════════════════════════════ */

.ruta{list-style:none;margin:0;padding:0;position:relative;display:grid;
  gap:clamp(14px,1.8vw,20px)}
.ruta li{position:relative;display:grid;grid-template-columns:34px 1fr;
  gap:clamp(14px,2vw,26px);align-items:start}

/* El carril. Va DETRÁS de los números y llega de la primera bolita a la última,
   no de borde a borde de la lista: así no asoma por arriba ni por abajo. */
.ruta::before,.ruta::after{content:"";position:absolute;left:16px;width:2px;
  top:17px;bottom:17px;border-radius:2px}
.ruta::before{background:var(--linea2)}
.ruta::after{background:linear-gradient(180deg,var(--acento-tr),#a78bfa);
  transform-origin:50% 0;transform:scaleY(1)}

/* El relleno sigue al scroll. Sin `animation-timeline` se queda lleno del todo,
   que es exactamente lo que debe verse cuando no hay soporte: la línea entera. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ruta::after{animation:ruta-llena linear both;animation-timeline:view();
      animation-range:cover 12% cover 78%}
    @keyframes ruta-llena{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}

.ruta-n{position:relative;z-index:1;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--acento-tr);color:#fff;font-weight:700;font-size:.92rem;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px var(--bg)}
/* El último paso es el que todavía no ha pasado: se queda apagado, como en la
   maqueta. No es un estado real de nada, es una lectura visual del recorrido. */
.ruta-fin .ruta-n{background:#e0dcfb;color:var(--acento)}

.ruta-card{display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
  background:var(--card);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(16px,1.8vw,22px);box-shadow:0 1px 2px rgba(16,19,34,.04)}
/* Sin fondo: el icono YA trae su pastilla. Poniéndole otra detrás se ve una
   caja dentro de otra caja, que es justo lo que había que quitar. */
.ruta-ico{flex:none;width:74px;height:74px;display:grid;place-items:center}
.ruta-ico img{width:100%;height:100%;object-fit:contain;display:block}
.ruta-card h3{font-size:1.22rem;margin:4px 0 8px}
.ruta-card p{color:var(--tx2);font-size:.95rem;margin:0}
.ruta-card .paso{margin:0}
@media(max-width:620px){
  .ruta li{grid-template-columns:26px 1fr;gap:12px}
  .ruta::before,.ruta::after{left:12px}
  .ruta-n{width:26px;height:26px;font-size:.8rem;box-shadow:0 0 0 4px var(--bg)}
  .ruta-card{flex-direction:column;gap:14px}
  .ruta-ico{width:60px;height:60px}
}

/* Tamaño de las cajas. El icono va dentro con `object-fit:contain` y su propio
   `padding`, así que la caja manda y no hay ni un píxel de salto. */
.ficha-ico{width:46px;height:46px}
.tres-ico{width:56px;height:56px}
.vig-ico{width:46px;height:46px}
.ico2{width:46px;height:46px}
.ico2.chico{width:38px;height:38px;padding:7px}
.b2 h3 .ico2.chico{width:36px;height:36px}
.ruta-ico{width:76px;height:76px;padding:12px}
.capas li{gap:13px}
/* (bloque anterior de tamaños, ya sustituido) */

/* ── Precio por tramos ──────────────────────────────────────────────────────
   Los cinco tramos a la izquierda y la calculadora a la derecha. El tramo en el
   que caes se enciende solo al mover el número: con precio por volumen, la
   pregunta no es «cuánto vale» sino «en cuál caigo yo». */
.pastilla-t{display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;
  padding:6px 15px 6px 8px;border-radius:999px;background:#eeeefe;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.pastilla-t span{width:26px;height:26px;display:grid;place-items:center}

.tramos-caja{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:clamp(30px,4vw,44px);
  align-items:start}
@media(min-width:900px){.tramos-caja{grid-template-columns:1.15fr .85fr}}
.tramos,.calc-caja{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);box-shadow:0 1px 2px rgba(16,19,34,.04)}
.calc-caja{border:2px solid var(--acento-tr);
  box-shadow:0 1px 2px rgba(16,19,34,.04),0 22px 50px -30px rgba(101,100,244,.6)}
.tramos-t{margin:0 0 16px;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento)}
#tramos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#tramos li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:12px;transition:background .18s,box-shadow .18s}
#tramos li + li{border-top:1px solid var(--linea)}
#tramos .tr-r{color:var(--tx2);font-size:.97rem}
#tramos b{font-size:1.22rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* El tramo activo se marca con fondo Y borde, no sólo con color: a quien no
   distingue bien los tonos el «está encendido» tiene que llegarle igual. */
#tramos li.activo{background:#eeeefe;box-shadow:inset 0 0 0 1.5px #cfcbfd;border-top-color:transparent}
#tramos li.activo + li{border-top-color:transparent}
#tramos li.activo .tr-r{color:var(--tx);font-weight:600}
#tramos li.activo b{color:var(--acento)}
.tramos-p{margin:18px 0 0;font-size:.88rem;color:var(--tx3);line-height:1.55}
@media(prefers-reduced-motion:reduce){#tramos li{transition:none}}

.calc label{display:block;font-size:.95rem;color:var(--tx2);margin-bottom:12px}
.calc-fila{display:flex;align-items:center;gap:10px}
.calc-b{width:48px;height:48px;flex:none;border-radius:12px;border:1px solid var(--linea2);
  background:var(--card);color:var(--acento);font-size:1.3rem;line-height:1;cursor:pointer;
  transition:border-color .15s,background .15s}
.calc-b:hover{border-color:var(--acento);background:#f4f3ff}
.calc-fila input{width:110px;height:48px;padding:0 12px;border-radius:12px;
  border:1px solid var(--linea2);background:var(--card);color:var(--tx);font:inherit;
  font-weight:700;font-size:1.1rem;text-align:center;font-variant-numeric:tabular-nums}
.calc-r{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;
  border-radius:14px;background:#f2f1fe}
.calc-ico{flex:none;width:46px;height:46px;display:grid;place-items:center}
.calc-r p{display:flex;align-items:baseline;gap:8px;margin:0}
.calc-r b{font-size:1.62rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.calc-r u{text-decoration:none;font-size:.92rem;color:var(--tx3)}
.calc-r span#calc-det{display:block;margin-top:4px;color:var(--tx2);font-size:.88rem}
.calc-nota{margin:14px 0 0;font-size:.82rem;color:var(--tx3)}
@media(prefers-reduced-motion:reduce){.calc-b{transition:none}}

.nota-precio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:clamp(20px,2.4vw,28px) auto 0;max-width:720px;padding:15px 20px;border-radius:14px;
  background:var(--card);border:1px solid var(--linea);color:var(--tx2);font-size:.92rem;
  text-align:center;box-shadow:0 1px 2px rgba(16,19,34,.04)}
.nota-ico{flex:none;width:32px;height:32px;display:grid;place-items:center}
.nota-precio a{color:var(--acento);font-weight:650}

/* La barra flota por encima del contenido, así que el hero necesita empezar más
   abajo — sobre todo en el móvil, donde el titular es enorme y sus ascendentes
   se metían debajo de la pastilla. */
@media(max-width:620px){.hero h1{font-size:clamp(2.1rem,9vw,3rem)}}


/* ═══════════════════════════════════════════════════════════════════════════
   Cifras y tira de secciones
   ═══════════════════════════════════════════════════════════════════════════ */

.cinta{padding:clamp(28px,4vw,48px) 0;background:transparent;border:0}
.cifras-card{display:grid;gap:0;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--r);padding:clamp(22px,2.6vw,34px) clamp(10px,1.6vw,20px);
  box-shadow:0 1px 2px rgba(16,19,34,.04);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.cifras-card > div{display:grid;justify-items:center;text-align:center;gap:0;
  padding:6px clamp(12px,1.6vw,22px)}
/* Separadores entre columnas, no un borde por tarjeta: es UNA pieza, no cuatro. */
.cifras-card > div + div{border-left:1px solid var(--linea)}
@media(max-width:900px){.cifras-card > div + div{border-left:0;border-top:1px solid var(--linea);
  padding-top:22px;margin-top:6px}}
.cf-ico{width:58px;height:58px;display:grid;place-items:center;margin-bottom:16px}
.cf-ico .ico3d{width:100%;height:100%;object-fit:contain}
.cifras-card b{font-size:clamp(2.1rem,4vw,3rem);font-weight:700;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--tx)}
.cf-eti{display:block;margin-top:12px;font-size:.92rem;color:var(--tx2);line-height:1.45}
.cf-pill{display:inline-block;margin-top:16px;padding:5px 13px;border-radius:999px;
  font-size:.78rem;font-weight:650}
.cf-pill.pr{background:#eeeefe;color:var(--acento)}
.cf-pill.jd{background:#e4f7ef;color:#06673f}
.cf-pill.cr{background:#fdecea;color:#a3231b}


/* ── Menos aire entre secciones ─────────────────────────────────────────────
   Con `clamp(64px,9vw,124px)` cada sección se separaba casi dos dedos de la
   siguiente y la página se leía como piezas sueltas. Bajado a un tercio menos:
   sigue habiendo respiración, pero se lee como una sola web. */
.seccion{padding:clamp(42px,5.6vw,78px) 0}
.cinta{padding:clamp(20px,2.6vw,34px) 0}
.cierre{padding:clamp(44px,5.6vw,78px) 0}
.cabecera{margin-bottom:clamp(28px,3.4vw,44px)}
.bloque{padding:clamp(22px,2.8vw,36px) 0}

/* Las tres garantías, sin icono: sólo el texto en su pastilla. */
.garantias li{padding:12px 18px}

/* ── El personaje, apoyado en el filo de abajo ──────────────────────────────
   Flotando en el centro parecía un recorte pegado. La sección pierde su
   `padding` inferior y la columna del texto se lo pone ella sola, así que la
   ilustración descansa sobre el borde en vez de quedarse en el aire. */
.cierre{padding-bottom:0;overflow:hidden}
.cierre-in{align-items:end}
.cierre-tx{padding-bottom:clamp(44px,5.6vw,78px)}
.cierre-fig{align-self:end}
.cierre-fig img{display:block;margin-bottom:-2px;filter:none}
@media(max-width:939px){
  .cierre-tx{padding-bottom:clamp(24px,4vw,40px)}
  .cierre-fig img{max-width:min(100%,460px);margin-inline:auto}
}

/* La portada, rematada: el personaje se apoya en el filo inferior en vez de
   quedar cortado por la ola, y la ola baja para no pisarle el pecho. */
.portada{padding-bottom:0}
.port-in{align-items:end}
.port-tx{padding-bottom:clamp(46px,6vw,86px)}
.port-fig{align-self:end}
.port-fig img{margin-bottom:-2px;width:min(100%,460px)}

.pf-cuadre{max-width:270px}
.pf-cuadre span{white-space:nowrap}
@media(max-width:960px){.port-tx{padding-bottom:clamp(20px,4vw,34px)}}

/* Sin la pastilla ni los cuatro botones, la columna del texto es más corta: el
   personaje se hace más grande y se apoya del todo en el filo de abajo. */
.port-fig img{width:min(100%,520px);margin-bottom:0}
.portada{padding-top:clamp(104px,12vw,164px)}
.port-tx{padding-bottom:clamp(56px,7vw,96px)}

/* En pantalla pequeña las tarjetas flotantes caen justo encima de la cara del
   personaje. Se ocultan: el titular y el botón ya dicen lo que hay que decir, y
   los mismos datos aparecen dos secciones más abajo. */
@media(max-width:560px){.pf-nota{display:none}}

/* ── UNA sola escala de iconos, y aquí ────────────────────────────────────────
   Estaban repartidos por media hoja con tamaños puestos a ojo en cada arreglo,
   y por eso unos se veían grandes y otros diminutos. Cuatro medidas y cada
   sección usa la que le toca según la maqueta:
     s  42 · fichas, avisos y listas       m 56 · cifras y las tres del cuadre
     l  78 · los pasos                     xl 86 · las tarjetas de precio
   Todos los iconos están recortados a su contenido con el mismo aire, así que
   la caja manda y ninguno pesa más que otro. */
.ficha-ico,.vig-ico,.ico2{width:42px;height:42px;padding:0}
.ico2.chico{width:34px;height:34px}
.b2 h3 .ico2.chico{width:32px;height:32px}
.cf-ico{width:56px;height:56px;margin-bottom:14px}
.tres-ico{width:56px;height:56px;padding:0;border-radius:0;background:none}
.ruta-ico{width:78px;height:78px;padding:0;background:none}
.plan-ico{width:86px;height:86px}
.pc-ico{width:34px;height:34px}
.pf-g{width:18px;height:18px}
.ico3d{width:100%;height:100%;object-fit:contain;display:block}
/* Los cuadraditos de color se quedan SOLO donde la maqueta los pide: en las
   cuatro fichas de «Qué vigila», con el tinte de su familia. */
.ico2,.vig-ico{background:none}

/* Estas dos secciones piden el icono GRANDE, como en las maquetas: en la banda
   de cifras manda tanto como el número, y en los pasos es la ilustración del
   paso, no un adorno al lado del texto. */
.cf-ico{width:88px;height:88px;margin-bottom:18px}
.ruta-ico{width:104px;height:104px}
@media(max-width:620px){.cf-ico{width:68px;height:68px}.ruta-ico{width:76px;height:76px}}

/* ══ La figura de la portada ══
   Es un RECORTE con alfa, no una tarjeta: por eso la sombra vuelve a ser
   `drop-shadow` —sigue el contorno del personaje y de sus tarjetas— y no
   `box-shadow`, que dibujaría un rectángulo alrededor del aire transparente.
   Y por eso tampoco lleva `border-radius`: no hay nada que redondear.

   Lo que sí cambia respecto al personaje anterior: aquélla era una silueta que
   se apoyaba en el filo inferior, y ésta lleva tarjetas colgando por arriba y
   por los lados. Sangrar por abajo le cortaría la de «Qué tienes pendiente»,
   así que va centrada y con su aire. */
.port-in{align-items:center}
.port-tx{padding-bottom:0}
.port-fig{align-self:center}
.port-fig img{
  width:min(100%,560px);height:auto;margin-bottom:0;
  filter:drop-shadow(0 26px 44px rgba(60,40,120,.22));
}
/* En estrecho la ilustración es lo primero que se mira y su texto es lo que hay
   que poder leer: se le deja el ancho entero en vez de encogerla. */
@media(max-width:960px){
  .port-fig{margin-top:6px}
  .port-fig img{width:min(100%,470px)}
}

/* ── Páginas de texto legal (privacidad) ────────────────────────────────────
   Reutilizan la hoja de la landing entera —barra, pie, tokens— para que la
   marca sea la misma sin mantener dos paletas. Sólo se añade lo que un
   documento largo necesita y la landing no tiene: medida de lectura, índice
   pegajoso y tablas. Todo bajo `.doc`, así que no puede pisar nada de la
   portada. */
.doc{padding-top:clamp(88px,12vh,116px);padding-bottom:clamp(56px,8vh,96px)}
.doc-ancho{--ancho:1080px}
/* La barra esconde su nav por debajo de 900px porque en la portada son cinco
   enlaces; aquí es uno solo —volver— y tiene que verse en el móvil. */
.barra nav.doc-volver{display:flex}

.doc-cabecera{max-width:58ch;margin-bottom:clamp(34px,5vw,52px)}
.doc-cabecera h1{font-size:clamp(2.1rem,5.2vw,3.1rem);line-height:1.08;
  letter-spacing:-.02em;margin:.35em 0 0;max-width:14ch}
.doc-lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.62;color:var(--tx2);
  margin:.85em 0 0;max-width:52ch}
.doc-fecha{margin:1.1em 0 0;font-size:.85rem;color:var(--tx3)}

.doc-cuerpo{display:grid;gap:clamp(28px,4vw,56px)}
/* ⚠ Sin este `min-width:0` la página se sale por la derecha en el móvil (medido:
   422 px de contenido en una ventana de 375). Un hijo de grid tiene
   `min-width:auto`, así que la columna crece hasta el min-content de la tabla
   más ancha y arrastra consigo TODO lo demás —índice incluido—, en vez de dejar
   que la tabla se desplace sola con su `overflow-x`. */
.doc-cuerpo>*{min-width:0}
@media(min-width:1000px){
  .doc-cuerpo{grid-template-columns:minmax(0,230px) minmax(0,1fr);align-items:start}
  .doc-indice{position:sticky;top:96px}
}
.doc-indice h2{font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);margin:0 0 14px}
.doc-indice ol{margin:0;padding-left:1.35em;display:grid;gap:9px;
  font-size:.92rem;color:var(--tx3)}
.doc-indice a{color:var(--tx2);text-decoration:none}
.doc-indice a:hover{color:var(--acento);text-decoration:underline}

.doc-texto{max-width:74ch;font-size:1.02rem;line-height:1.72;color:var(--tx2)}
.doc-texto h2{font-size:clamp(1.28rem,2.4vw,1.55rem);line-height:1.25;color:var(--tx);
  letter-spacing:-.01em;margin:2.2em 0 .55em;scroll-margin-top:96px}
.doc-texto h2:first-child{margin-top:0}
.doc-texto h3{font-size:1.06rem;color:var(--tx);margin:1.9em 0 .5em;scroll-margin-top:96px}
.doc-texto p{margin:0 0 1.1em}
.doc-texto strong{color:var(--tx);font-weight:650}
.doc-texto a{color:var(--acento);text-decoration:underline;text-underline-offset:2px}
.doc-texto ul{margin:0 0 1.3em;padding-left:1.25em;display:grid;gap:.6em}
.doc-texto li{padding-left:.15em}
.doc-texto code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--bg2);border:1px solid var(--linea);border-radius:6px;padding:1px 4px}

/* Un aviso, no una alarma: el filo violeta es el mismo recurso que usa la
   portada para señalar sin gritar. */
.doc-aviso{background:var(--bg2);border:1px solid var(--linea);
  border-left:3px solid var(--acento-tr);border-radius:0 var(--r) var(--r) 0;
  padding:16px 20px;margin:0 0 1.5em}

/* Las tablas se desbordan en el móvil pase lo que pase: se les da su propio
   scroll horizontal en vez de romper el ancho de la página. */
.doc-tabla{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.95rem;
  display:block;overflow-x:auto}
.doc-tabla th,.doc-tabla td{text-align:left;vertical-align:top;padding:11px 14px;
  border-bottom:1px solid var(--linea)}
.doc-tabla thead th{font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--linea2)}
.doc-tabla tbody th{font-weight:650;color:var(--tx);white-space:nowrap;width:1%}
.doc-tabla tr:last-child th,.doc-tabla tr:last-child td{border-bottom:0}
.doc-tabla-3 td:first-child{color:var(--tx)}
@media(min-width:760px){.doc-tabla{display:table}}

/* ── Que el scroll de la tabla NO sea mudo ───────────────────────────────────
   Por debajo de 760 px la tabla es `display:block; overflow-x:auto` (arriba), o
   sea que se desliza de lado. El problema es que NO LO DICE: en macOS y en iOS
   la barra de scroll está oculta hasta que algo se mueve, así que una tabla
   recortada se lee como una tabla que termina ahí — y en un documento legal eso
   es una columna que el visitante no sabe que existe. Medido por DOM a 500 px:
   la tabla de los plazos de §9 da 548 de contenido en 445 de caja, 103 px que
   nadie ve.

   El apaño son «sombras de scroll», y se sostienen sin una línea de JavaScript:
   las dos primeras capas son del color del fondo y van con
   `background-attachment:local`, así que viajan CON el contenido y tapan la
   sombra justo cuando ya no hay nada más hacia ese lado; las dos de sombra van
   con `scroll`, o sea clavadas a la caja. El resultado es que la sombra sólo se
   ve del lado por el que queda tabla por ver, que es exactamente la señal que
   faltaba — y desaparece sola al llegar al final.

   ⚠ Dos detalles que parecen quisquillosos y no lo son:
   · el color transparente va como `rgba(251,251,254,0)` y NO como `transparent`:
     Safari interpola `transparent` hacia rgba(0,0,0,0) y el degradado sale con
     un velo gris sucio en vez de desvanecerse.
   · va dentro de `max-width:759.98px` porque a partir de 760 la tabla vuelve a
     `display:table` y ya no hay scroll: dejar los degradados ahí pintaría unas
     bandas verticales en las tablas del escritorio, donde no sobra nada.
   El fondo es `--bg` (#fbfbfe), comprobado en el navegador: detrás de estas
   tablas está el `body`, no una tarjeta blanca. */
@media(max-width:759.98px){
  .doc-tabla{
    background-image:
      linear-gradient(to right, #fbfbfe 42%, rgba(251,251,254,0)),
      linear-gradient(to left,  #fbfbfe 42%, rgba(251,251,254,0)),
      linear-gradient(to right, rgba(35,25,80,.17), rgba(35,25,80,0)),
      linear-gradient(to left,  rgba(35,25,80,.17), rgba(35,25,80,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:36px 100%,36px 100%,13px 100%,13px 100%;
    background-attachment:local,local,scroll,scroll;
    /* Donde el sistema SÍ pinta barra (Windows, Android), que se vea y sea fina. */
    scrollbar-width:thin;
  }
}

.doc-fin{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--linea);
  font-size:.85rem;color:var(--tx3)}

/* El enlace legal del pie: mismo tamaño que el © que tiene al lado. */
.pie-legal-enlaces a{color:var(--tx2);text-decoration:none}
.pie-legal-enlaces a:hover{color:var(--acento);text-decoration:underline}

/* ── La app ─────────────────────────────────────────────────────────────────
   Tres columnas —argumento · teléfono · lo que lleva dentro—, con las piezas de
   siempre: `.b2` para la tarjeta, `.ico2`+`.ico3d` para los iconos, `--r` y
   `--linea` para todo lo demás. Ni una paleta nueva. */
.app-3{display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:1fr;align-items:start}
@media(min-width:1060px){.app-3{grid-template-columns:.95fr .8fr 1.15fr}}
@media(min-width:760px) and (max-width:1059px){.app-3{grid-template-columns:1fr 1fr}
  .app-izq{grid-column:1 / -1}}

.app-izq h2{margin:.3em 0 0}
/* El `<em>` del titular lo pone en acento y sin cursiva TODA la página; al
   pasar de `.cab2` a esta columna propia se quedó sin la regla y «en el
   bolsillo» salía en cursiva y negro. */
.app-izq h2 em{font-style:normal;color:var(--acento)}
.app-sub{margin:1em 0 0;color:var(--tx2);font-size:1.02rem;line-height:1.65;max-width:40ch}
.app-plat{display:flex;align-items:center;gap:9px;margin:18px 0 0;
  color:var(--acento);font-weight:650;font-size:.93rem}

/* La tarjeta de aviso: es lo único de acento sólido de la sección, para que sea
   lo que se mira después del titular. */
.app-cta{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(22px,2.4vw,30px);
  padding:clamp(18px,1.9vw,24px);border-radius:var(--r);color:#fff;
  background:linear-gradient(135deg,var(--acento-relleno) 0%,#7b4ef0 60%,#9148FB 100%);
  box-shadow:0 20px 44px -24px rgba(88,73,232,.75)}
.app-cta-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:#fff;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 16px -8px rgba(20,10,60,.5)}
.app-cta-ico img{width:30px;height:30px;object-fit:contain}
.app-cta b{display:block;font-size:1.06rem;margin-bottom:4px}
.app-cta p{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.9)}
.app-cta .boton{background:#fff;border-color:#fff;color:var(--acento)}
.app-cta .boton:hover{background:#f3f1ff;border-color:#f3f1ff;transform:translateY(-1px)}

/* El marco del teléfono se dibuja, no se descarga: es un borde oscuro y dos
   radios. Un PNG de un iPhone pesa 300 KB y envejece con cada modelo. */
.app-tel{display:grid;justify-items:center}
.tel-marco{padding:9px;border-radius:42px;background:linear-gradient(160deg,#2a2a34,#14141a);
  box-shadow:0 30px 60px -28px rgba(20,12,60,.7),0 0 0 1px rgba(255,255,255,.06) inset;
  width:min(100%,286px)}
.tel-marco img{width:100%;height:auto;display:block;border-radius:34px}
/* Las dos capas del cruce, una encima de otra. La que sale va `absolute` y con
   el mismo `inset` que el acolchado del marco; sin eso se apila DEBAJO de la
   nueva y el móvil se estira al doble durante los 260 ms de la transición. */
.tel-marco{position:relative}
.tel-marco img.sale{position:absolute;inset:9px;width:calc(100% - 18px);pointer-events:none}

/* Las flechas del visor. `hidden` en el HTML y lo quita el guion: sin JS, en vez
   de dos botones muertos no hay nada y el móvil enseña la primera pantalla. */
.tel-nav{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  justify-content:center;margin-top:16px;width:min(100%,320px)}
.tel-fl{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--card);border:1px solid var(--linea2);color:var(--acento);cursor:pointer;
  box-shadow:0 1px 2px rgba(16,19,34,.05);transition:transform .16s ease,border-color .16s ease,background .16s ease}
.tel-fl:hover{border-color:var(--acento);background:#f4f3ff;transform:translateY(-1px)}
.tel-fl:active{transform:translateY(0)}
.tel-fl:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.tel-pie{flex:1;margin:0;text-align:center;display:grid;gap:1px;line-height:1.3}
.tel-pie b{font-size:.97rem}
.tel-pie span{font-size:.83rem;color:var(--tx3)}
.tel-n{font-variant-numeric:tabular-nums;font-size:.76rem !important;color:var(--acento) !important;
  font-weight:650;margin-top:2px}
@media(prefers-reduced-motion:reduce){.tel-fl{transition:none}}

.app-der h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:16px}
.app-der h2 em{font-style:normal;color:var(--acento)}
.app-filas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.app-filas li{display:flex;gap:14px;align-items:center;
  background:var(--bg2);border:1px solid var(--linea);border-radius:13px;
  padding:14px 14px 14px 13px}
.app-filas b{display:block;margin-bottom:3px;font-size:1rem}
.app-filas p{margin:0;color:var(--tx2);font-size:.9rem;line-height:1.5}
.app-filas .chev{flex:none;color:var(--tx3)}
/* El icono, más grande que en las listas normales: aquí es medio argumento. */
.ico-g{width:50px;height:50px;border-radius:14px;background:#fff;border:1px solid var(--linea)}
.ico-g .ico3d{width:34px;height:34px}


/* ── Las siete tarjetas del bento, ahora como imagen ────────────────────────
   Cada PNG ya trae su propia tarjeta dibujada dentro, así que el `.b2` se queda
   sin fondo, sin borde y sin acolchado: encuadrar una tarjeta dentro de otra se
   ve como un error aunque nadie sepa nombrarlo. Sólo se le deja el radio y un
   filo de 1 px para que los siete tonos de lila —que no son idénticos, vienen
   de siete láminas— se lean como siete tarjetas y no como un fallo de color. */
.b2-img{background:transparent;border:0;box-shadow:none;padding:0;
  align-self:start;overflow:hidden;border-radius:var(--r)}
.b2-img img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--linea)}
/* Tres filas limpias en vez del salto de dos: 01·02·03 arriba, 04·06·07 debajo
   —las tres a cuatro columnas y con la misma proporción, así que cuadran solas—
   y 05 abajo a todo lo ancho. El salto de dos filas obligaba a rellenar
   `Preguntar` con 212 px de fondo para que llegara al final de la columna de al
   lado, y eso se veía como lo que era: un hueco enorme. */
@media(min-width:760px){
  .b2-img.b2-preg,.b2-img.b2-acc,.b2-img.b2-marca{grid-column:span 4;grid-row:auto}
  .b2-img.b2-enc{grid-column:span 12}
}
/* La de «Te encuentran» es apaisada: a todo lo ancho se vería enorme, así que se
   centra con tope y la tarjeta pone el mismo lila de las láminas para que el
   resto de la fila no se lea como un hueco. */
.b2-img.b2-enc{background:#f2f1fd;border:1px solid var(--linea)}
.b2-img.b2-enc img{max-width:820px;margin-inline:auto;border:0}

/* ── El bento, con el idioma de las láminas ─────────────────────────────────
   Mismo HTML —el texto sigue siendo texto, se selecciona, se traduce y lo lee
   Google— pero con el aire de las maquetas: icono 3D en la esquina, la palabra
   clave del titular en acento y el panel de dentro flotando en blanco sobre un
   lila muy suave. Todo va colgado de `#ademas` para no tocar ninguna otra
   sección, y `.b2-fig` queda fuera: esa tarjeta es el personaje, sin caja. */
#ademas :is(.b2-auto,.b2-qr,.b2-rank,.b2-preg,.b2-enc,.b2-acc,.b2-marca){
  background:linear-gradient(180deg,#fbfaff 0%,#f5f3ff 100%);
  border-color:#e6e3f8;border-radius:20px;
  padding:clamp(20px,2.1vw,26px);
  box-shadow:0 1px 2px rgba(16,19,34,.04),0 18px 40px -30px rgba(60,40,120,.5)}
#ademas .b2 h3{display:block;font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.3;
  margin-bottom:7px;padding-right:56px}
#ademas .b2 h3 em{font-style:normal;color:var(--acento)}
#ademas .b2-s{font-size:.92rem}

/* El icono, arriba a la derecha y volado sobre la esquina: es lo que hace que
   la tarjeta se lea de un vistazo antes de leer el título. */
.b2-ico{position:absolute;top:13px;right:13px;width:clamp(46px,4vw,62px);
  height:clamp(46px,4vw,62px);pointer-events:none}
.b2-ico .ico3d{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(70,50,140,.22))}

/* El panel de dentro deja de ser una caja más y pasa a flotar en blanco, que es
   lo que separa «captura del panel» de «otro recuadro con texto». */
#ademas .mock{background:#fff;border-color:#eceaf8;border-radius:14px;
  box-shadow:0 12px 30px -20px rgba(40,30,90,.55)}

/* ═══════════════════════════════════════════════════════════════════════════
   El panel por dentro (#panel) y Lupa (#lupa)

   Las dos secciones montan la escena de la maqueta: el personaje y el marco del
   navegador van como UNA sola imagen con alfa y la captura se coloca encima, en
   el hueco, en porcentajes. Todo escala junto y no hay nada que recolocar por
   ancho.
   Prefijos `pan-` y `lupa-` porque `.tel-*` es del visor del teléfono y `.b2-*`
   del bento: reusar una de ésas habría pegado estilos a la sección de al lado
   sin que nada lo dijera.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Las pestañas ─────────────────────────────────────────────────────────
   Fila que se desplaza a dedo en móvil; en escritorio entran todas. La barra de
   desplazamiento se oculta porque debajo hay flechas y un contador: ya se ve
   que hay más. */
/* El contenedor ya no es la fila: son DOS filas, la de las pantallas sueltas y
   la del grupo «Análisis» (§ index.html). Quien se arrastra a dedo en móvil es
   cada `.pan-fila`, no el bloque entero. */
.pan-chips{display:flex;flex-direction:column;gap:8px;
  padding:2px 2px 12px;margin-bottom:clamp(8px,1.2vw,14px)}
.pan-fila{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;padding-bottom:2px}
.pan-fila::-webkit-scrollbar{display:none}
/* ── «Análisis», el botón que despliega ────────────────────────────────────
   Es la única pastilla que no es una pantalla sino una puerta, y por eso es la
   única que va pintada con la marca entera: violeta, índigo, magenta y celeste
   girando por el canto. El resto de la fila es blanco y gris a propósito — si
   se tiñeran todas, no destacaría ninguna.
   El brillo se hace igual que el `bordelux` de la librería de la casa (un
   cónico que gira, recortado a un canto de 1,5 px por una tapa interior), pero
   con la rueda de color en vez de un solo tono. Va escrito aquí y no con
   `data-lui="bordelux"` porque aquel sólo admite UN color en `--lui-brillo`.
   ⚠ `overflow:hidden` es obligatorio, no estético: la capa que gira mide el
   doble del botón y sin recortarla alarga el scroll horizontal de la página
   entera, y el culpable no se ve en pantalla. */
.pan-mas{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:7px;
  border-color:transparent;color:var(--acento-tx);font-weight:700}
.pan-mas::before{content:"";position:absolute;top:50%;left:50%;
  width:210%;aspect-ratio:1;translate:-50% -50%;z-index:-2;
  background:conic-gradient(from 0deg,#6564f4,#9148fb,#e879f9,#38bdf8,#6564f4);
  animation:pan-gira 6s linear infinite}
/* La tapa: deja ver el cónico sólo en el canto. */
.pan-mas::after{content:"";position:absolute;inset:1.5px;border-radius:inherit;
  background:var(--card);z-index:-1}
.pan-mas:hover{color:var(--acento)}
.pan-mas:hover::before{animation-duration:2.4s}
/* Dentro del grupo, la pastilla se rellena con la misma rueda en diagonal: se
   ve que es la de arriba y no una pantalla más encendida. */
.pan-mas.act{color:#fff;border-color:transparent}
.pan-mas.act::after{background:linear-gradient(100deg,#5849e8,#9148fb 52%,#c026d3)}
.pan-fle{flex:none;transition:transform .2s ease}
.pan-mas.act .pan-fle{transform:rotate(180deg)}
@keyframes pan-gira{to{rotate:1turn}}
@media(prefers-reduced-motion:reduce){
  /* Se queda la rueda quieta: sigue distinguiendo el botón, sin girar. */
  .pan-mas::before{animation:none}
  .pan-fle{transition:none}
}

/* ── La fila que despliega ──
   Aparece cuando la pantalla que se mira es una de las ocho (§ index.html), y
   por eso no necesita ni acordeón ni altura animada: entra con un fundido
   corto, que es lo que dice «esto ha salido de ahí arriba» sin hacer saltar la
   página cada vez que se pasa de pestaña con las flechas. */
.pan-sub{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;padding-bottom:2px;
  animation:pan-cae .22s cubic-bezier(.4,0,.2,1)}
.pan-sub::-webkit-scrollbar{display:none}
.pan-sub[hidden]{display:none}
@keyframes pan-cae{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.pan-sub{animation:none}}

.pan-chip{flex:none;scroll-snap-align:center;
  min-height:38px;padding:0 15px;border-radius:999px;
  border:1px solid var(--linea);background:var(--card);color:var(--tx2);
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.pan-chip:hover{border-color:var(--acento);color:var(--acento)}
.pan-chip:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.pan-chip.act{background:var(--acento-relleno);border-color:var(--acento-relleno);color:#fff}
@media(min-width:1060px){
  .pan-chips{align-items:center}
  .pan-fila{justify-content:center;flex-wrap:wrap;overflow:visible}
  /* Con las dos filas centradas, el grupo se lee mejor con un filo suave que lo
     cierre: dice «esto es una sola entrada del menú» sin escribir una palabra
     más. `border-radius` grande y fondo casi inexistente para que no compita
     con las propias pastillas. */
  /* Centrada y encerrada, para que las ocho se lean como lo de dentro de
     «Análisis» y no como una segunda fila de lo mismo. El recuadro sólo existe
     aquí: en la tira que se arrastra a dedo no hay nada que encerrar. */
  .pan-sub{justify-content:center;flex-wrap:wrap;overflow:visible;gap:7px;
    width:fit-content;max-width:100%;margin:0 auto;padding:9px 12px;border-radius:22px;
    border:1px solid var(--linea);background:color-mix(in srgb,var(--acento) 3.5%,transparent)}
}

/* ── La escena: el personaje en su mesa + la captura DENTRO del monitor ──────
   La lámina (`escritorio.webp`) trae el hueco de la pantalla REALMENTE
   transparente y el brazo y el portátil pintados por delante. Por eso aquí la
   captura va DEBAJO (z 2 contra 3), justo al revés que en la lámina anterior:
   así el brazo y el portátil la tapan solos, sin recortar nada a mano.
   ⚠ LOS PORCENTAJES DEL HUECO ESTÁN MEDIDOS sobre el alfa de la lámina —el
   hueco cae en x 679..1492 e y 103..720 de 1536x1024—, no elegidos. Si se
   cambia el dibujo hay que volver a medirlos.
   Y por eso las capturas se toman a 1500x1140: 1,316 es la razón del hueco. */
.pan-escena{position:relative;aspect-ratio:1536 / 1024}
.pan-arte{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;z-index:3}
.pan-hueco{position:absolute;overflow:hidden;z-index:2;
  /* El hueco va un pelín MÁS GRANDE que el rectángulo transparente de la lámina
     y se mete por debajo del marco por los cuatro lados: la lámina está por
     delante (z-index 3), así que tapa el sobrante y no queda ninguna franja del
     fondo asomando en los bordes. */
  /* Medido sobre el canal alfa de la lámina: el rectángulo transparente va de
     x 763..1508 e y 148..739 sobre 1536x1024. NO agrandarlo «para tapar una
     franja»: se sale del marco por la derecha y por abajo, que es justo lo que
     pasó el 8-sep. Si falta cubrir algo, se corrige con el zoom de la imagen. */
  /* Medido sobre el canal alfa de la lámina: el borde IZQUIERDO del hueco no es
     vertical (x=727 arriba, 767 a media altura: el navegador está en
     perspectiva), y el DERECHO sí lo es (1507). Por eso el hueco arranca en el
     punto más a la izquierda —lo que sobresalga lo tapa el marco, que va por
     delante— y el borde derecho se queda clavado en 1507: pasarse de ahí es lo
     que hacía que la captura se saliera del navegador. */
  left:47.33%;top:14.453%;width:50.78%;height:57.715%}
.pan-hueco img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;
  /* ⚠ Un pelín de zoom desde la esquina: la captura trae su propio margen blanco
     a los DOS lados y abajo, y sin esto se veía una franja en blanco dentro del
     marco. El origen va en `50% 0` y no en `0 0`: anclado a la esquina sólo se
     comía el margen derecho y el izquierdo seguía asomando. El sobrante lo
     recorta el `overflow:hidden` del hueco. */
  transform:scale(1.07);transform-origin:50% 0}
/* Las capturas se rehicieron a 1500x1190 (8-sep-2026) para que su razón sea la
   del hueco de la lámina nueva (1,26): así LLENAN el navegador sin recorte ni
   franjas. Antes eran 1500x860, de cuando el marco era apaisado.
   Se rehacen con:
     SQL_EXTRA="$(cat capturas-landing.sql)" ROL=cliente ANCHO=1500 ALTO=1190 \
       ./capturar.sh "n01-inicio:/inicio.php?c=90" …
   ⚠ El negocio de demostración es `c=90` («Sabores del Puerto»): en una web
   pública no puede salir ni un cliente ni quien escribió una reseña.
   ⚠ Y los argumentos van ENTRECOMILLADOS: el `?` de la query lo glob-ea zsh y
   el script se queda sin pantallas que capturar. */
.pan-hueco img.sale{position:absolute;inset:0}
/* La pastilla de la dirección viene VACÍA en el dibujo: el texto se pone aquí
   para que sea texto de verdad y no un dibujo borroso al escalar. */
.pan-dir{position:absolute;z-index:4;pointer-events:none;
  left:44.2%;top:4.4%;width:53%;height:5.7%;
  display:flex;align-items:center;justify-content:center;gap:5px;
  color:var(--tx3);font-size:clamp(.5rem,.86vw,.8rem);
  white-space:nowrap;overflow:hidden}
.pan-dir svg{flex:none;width:.9em;height:.9em}

/* La tarjeta que flota sobre la esquina. Va con los iconos 3D que ya usa toda
   la página, no con unos nuevos. */
.pan-flota{position:absolute;z-index:5;margin:0;
  right:-1%;top:1.5%;display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 10px;border-radius:14px;
  background:var(--card);border:1px solid var(--linea);
  box-shadow:0 14px 34px -18px rgba(50,35,110,.6);
  transform:rotate(-2deg);color:var(--tx2);font-size:.82rem;line-height:1.25}
.pan-flota .ico3d{width:26px;height:26px}
.pan-flota span{display:grid}
.pan-flota b{color:var(--tx);font-size:.9rem}
.pan-flota svg{color:var(--jd)}
@media(max-width:760px){.pan-flota{display:none}}   /* a ese ancho tapa la captura */

.pan-visor{max-width:1180px;margin-inline:auto}
.lupa-visor{max-width:980px;margin-inline:auto}

/* ── Flechas y pie ────────────────────────────────────────────────────── */
.pan-nav{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(10px,1.4vw,16px)}
.pan-fl{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--linea2);background:var(--card);color:var(--tx2);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.pan-fl:hover{border-color:var(--acento);background:#f4f3ff;transform:translateY(-1px)}
.pan-fl:active{transform:translateY(0)}
.pan-fl:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.pan-pie{flex:1;margin:0;text-align:center;display:grid;gap:1px;line-height:1.3}
.pan-pie b{font-size:.97rem}
.pan-pie span{font-size:.83rem;color:var(--tx3)}
.pan-n{font-variant-numeric:tabular-nums;font-size:.78rem !important;color:var(--tx3)}
@media(prefers-reduced-motion:reduce){.pan-fl,.pan-chip{transition:none}}

/* ── La fila de ventajas ──────────────────────────────────────────────────
   Los iconos son SVG en línea, no recortes de la lámina: son formas planas, no
   pesan, siguen el color de acento y no se pixelan. El texto es texto. */
.pan-ventajas{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.pan-ventajas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){.pan-ventajas{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pan-ventajas li{display:grid;justify-items:center;text-align:center;gap:3px;
  padding:15px 10px 13px;border-radius:15px;
  background:var(--card);border:1px solid var(--linea);
  box-shadow:0 1px 2px rgba(16,19,34,.04);
  color:var(--tx3);font-size:.78rem;line-height:1.35}
.pan-ventajas b{display:block;color:var(--tx);font-size:.87rem;font-weight:650}
.pv-ico{position:relative;display:grid;place-items:center;
  width:40px;height:40px;margin-bottom:6px;color:var(--acento)}
.pv-plano .ico3d{width:30px;height:30px}
/* El punto rojo del aviso: es lo que hace que «reseñas nuevas» se lea como algo
   que pasa ahora y no como una función más de la lista. */
.pv-punto i{position:absolute;top:2px;right:4px;width:9px;height:9px;border-radius:50%;
  background:var(--cr);border:2px solid var(--card)}
/* Diez tarjetas no reparten bien en dos ni en tres columnas: la última se
   quedaba sola en su fila. La de Google —que es la que resume— ocupa el ancho
   entero salvo en la rejilla de cinco, donde ya cuadra. */
.pv-g{grid-column:span 2}
@media(min-width:560px){.pv-g{grid-column:span 3}}
@media(min-width:860px){.pv-g{grid-column:auto}}

.pan-nota{display:flex;align-items:flex-start;gap:9px;max-width:74ch;
  margin:clamp(20px,2.4vw,30px) auto 0;text-align:left;
  color:var(--tx3);font-size:.86rem;line-height:1.55}
.pan-nota svg{flex:none;margin-top:3px}

/* ── El marco suelto (lo usa Lupa) ────────────────────────────────────── */
.pan-marco{border-radius:clamp(14px,1.4vw,20px);overflow:hidden;
  border:1px solid var(--linea2);background:#f3f2fa;
  box-shadow:0 2px 4px rgba(16,19,34,.05),0 40px 80px -50px rgba(50,35,110,.65)}
.pan-barra{display:flex;align-items:center;gap:12px;padding:9px 13px;
  background:linear-gradient(180deg,#f7f6fc,#eeedf7);border-bottom:1px solid var(--linea)}
.pan-luces{display:flex;gap:6px;flex:none}
.pan-luces i{width:10px;height:10px;border-radius:50%;background:#d9d7ea}
.pan-luces i:first-child{background:#f0b6ae}
.pan-luces i:nth-child(2){background:#f2d7a6}
.pan-luces i:nth-child(3){background:#b8dcc0}
.pan-url{display:inline-flex;align-items:center;gap:6px;
  margin-inline:auto;padding:4px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--linea);
  color:var(--tx3);font-size:.78rem;
  max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Tres luces a la izquierda y nada a la derecha: sin este hueco la dirección
   queda centrada respecto al espacio libre, no respecto al marco. */
.pan-barra::after{content:"";flex:none;width:46px}
.pan-pila{position:relative;background:#fff}
.pan-pila img{display:block;width:100%;height:auto}

/* ═══════════════ Lupa ═══════════════ */
.lupa-cara{display:block;margin:0 auto 18px;line-height:0;
  filter:drop-shadow(0 16px 26px rgba(70,50,140,.25))}
.lupa-cara svg{width:clamp(64px,7vw,82px);height:auto}
#panel h2 em,#lupa h2 em{font-style:normal;color:var(--acento)}

/* La escena de Lupa: personaje a la izquierda señalando la ventana, ventana en
   medio y las cuatro comprobaciones a la derecha. Por debajo de 1100 px las dos
   columnas de los lados pasan a una fila bajo la ventana — encogerlas hasta que
   quepan dejaría al personaje del tamaño de un sello. */
.lupa-escena{display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:minmax(0,1fr);align-items:center;
  max-width:1180px;margin:0 auto clamp(28px,3.4vw,44px)}
@media(min-width:1100px){
  .lupa-escena{grid-template-columns:215px minmax(0,1fr) 232px}
}
.lupa-izq{display:flex;align-items:center;gap:10px;justify-content:center}
@media(min-width:1100px){.lupa-izq{display:grid;justify-items:center;gap:2px}}
.lupa-pose{width:clamp(132px,19vw,215px);height:auto;
  filter:drop-shadow(0 18px 26px rgba(60,40,120,.22))}
/* El bocadillo es TEXTO y no un recorte de la lámina: en el dibujo estaba mal
   escrito («respueste»), y así además se traduce, se lee y escala limpio. */
.lupa-burbuja{position:relative;margin:0;
  padding:10px 15px;border-radius:16px;
  background:var(--card);border:1px solid var(--linea);
  box-shadow:0 12px 28px -18px rgba(50,35,110,.6);
  color:var(--acento);font-weight:650;font-size:.92rem;line-height:1.3;text-align:center}
.lupa-burbuja::after{content:"";position:absolute;left:50%;bottom:-7px;
  width:12px;height:12px;transform:translateX(-50%) rotate(45deg);
  background:var(--card);border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
@media(max-width:1099px){
  .lupa-burbuja::after{left:-7px;bottom:auto;top:50%;
    transform:translateY(-50%) rotate(135deg)}
}
@media(min-width:1100px){.lupa-izq .lupa-pose{order:2}.lupa-izq .lupa-burbuja{order:1;margin-bottom:6px}}

.lupa-dcha{display:grid;gap:12px;justify-items:center}
.lupa-rotulo{width:clamp(120px,14vw,175px);height:auto}
@media(max-width:1099px){.lupa-rotulo{display:none}}  /* sin sitio: estorba más que aporta */
.lupa-checks{list-style:none;margin:0;padding:0;display:grid;gap:9px;width:100%}
@media(max-width:1099px){.lupa-checks{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin-inline:auto}}
@media(max-width:520px){.lupa-checks{grid-template-columns:1fr}}
.lupa-checks li{display:flex;align-items:center;gap:9px;
  padding:11px 13px;border-radius:13px;
  background:var(--card);border:1px solid var(--linea);
  box-shadow:0 1px 2px rgba(16,19,34,.04);
  color:var(--tx2);font-size:.87rem;line-height:1.35}
.lc-v{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#e4f5ec;color:var(--jd)}

/* Las tres reglas. Mismo aire que las tarjetas del bento —de ahí el degradado
   lila— con el personaje asomado en la esquina. */
.lupa-reglas{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(14px,1.6vw,18px);grid-template-columns:1fr}
@media(min-width:860px){.lupa-reglas{grid-template-columns:repeat(3,1fr)}}
#lupa .b2{overflow:hidden;padding-bottom:clamp(96px,8.5vw,112px);
  background:linear-gradient(180deg,#fbfaff 0%,#f5f3ff 100%);
  border-color:#e6e3f8;border-radius:20px;
  box-shadow:0 1px 2px rgba(16,19,34,.04),0 18px 40px -30px rgba(60,40,120,.5)}
#lupa .b2 h3{display:block;font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.3;
  margin:0 0 8px}
#lupa .b2 h3 em{font-style:normal;color:var(--acento)}
#lupa .b2 p{margin:0;color:var(--tx2);font-size:.93rem;line-height:1.6}
.lupa-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:#eeeefe;color:var(--acento);font-size:.74rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:13px}
/* El personaje se sale por la esquina de abajo. `pointer-events:none` porque el
   spotlight de la tarjeta se enciende con el ratón encima y una imagen que se
   coma el evento dejaría un agujero justo donde está el dibujo. */
.lupa-fig{position:absolute;right:-10px;bottom:-12px;
  width:clamp(104px,10vw,132px);height:auto;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(60,40,120,.22))}

.lupa-mas{display:grid;gap:clamp(12px,1.4vw,16px);grid-template-columns:1fr;
  margin-top:clamp(20px,2.4vw,30px)}
@media(min-width:860px){.lupa-mas{grid-template-columns:repeat(3,1fr)}}
.lupa-mas p{margin:0;color:var(--tx2);font-size:.92rem;line-height:1.6;
  padding-left:15px;border-left:2px solid var(--linea2)}
.lupa-mas b{color:var(--tx)}

/* ═══════════════ Barra de abajo (móvil) ═══════════════
   Una pastilla flotante con las cinco cosas que se hacen en la página. El botón
   del centro sale del marco a propósito: es la acción que se quiere. Se apaga
   en cuanto cabe el menú de arriba (860 px). */
.barra-movil{display:none}
@media (max-width:860px){
  .barra-movil{
    /* `minmax(0,1fr)` y no `1fr`: el mínimo de `1fr` es el contenido, así que
       «Preguntas» empujaba la barra fuera de la pantalla y «Entrar» se salía. */
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
    position:fixed;z-index:90;left:12px;right:12px;
    /* `env(safe-area-inset-bottom)`: en un iPhone con barra de gestos, sin esto
       la pastilla queda debajo del indicador y el dedo no llega. */
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:9px 6px 8px;border-radius:26px;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border:1px solid rgba(103,86,232,.10);
    box-shadow:0 18px 40px -14px rgba(40,26,110,.32), 0 2px 6px rgba(40,26,110,.06)}
  .bm{display:grid;justify-items:center;gap:3px;text-decoration:none;min-width:0;
    color:var(--tx3);font-size:.64rem;font-weight:600;letter-spacing:-.015em;
    white-space:nowrap;
    padding:2px 0 0;-webkit-tap-highlight-color:transparent}
  .bm-ic{display:grid;place-items:center;width:36px;height:32px;border-radius:11px;
    color:var(--tx2);transition:background .18s ease,color .18s ease}
  .bm-ic svg{width:21px;height:21px}
  .bm.act .bm-ic{background:var(--acento-suave,#eeeafe);color:var(--acento-tr,#5b4de8)}
  .bm.act{color:var(--acento-tr,#5b4de8)}
  /* El punto de debajo del activo: es lo que hace que se lea de un vistazo cuál
     estás mirando sin tener que comparar colores. */
  .bm.act::after{content:"";width:5px;height:5px;border-radius:50%;
    background:currentColor;margin-top:1px}
  .bm:not(.act)::after{content:"";width:5px;height:5px;margin-top:1px}
  /* El de contacto: círculo relleno que se sale por arriba. */
  .bm-alto{margin-top:-22px}
  .bm-alto .bm-ic{width:54px;height:54px;border-radius:50%;
    background:linear-gradient(160deg,#6d5cf0,#4b3ade);color:#fff;
    box-shadow:0 12px 22px -8px rgba(75,58,222,.75)}
  .bm-alto .bm-ic svg{width:25px;height:25px}
  .bm-alto.act .bm-ic{background:linear-gradient(160deg,#6d5cf0,#4b3ade);color:#fff}
  /* Que la barra no se coma el final de la página. */
  body{padding-bottom:96px}
}

/* ═══════════════ Ver la pantalla en grande ═══════════════
   La captura dentro del monitor se lee, pero no se LEE de verdad: al pulsarla
   se abre a tamaño completo y se pasa de una a otra con el dedo o las flechas.
   El botón que la abre es invisible y va justo encima del hueco medido. */
.pan-abrir{position:absolute;z-index:4;left:44.206%;top:10.059%;width:52.995%;height:60.352%;
  border:0;background:transparent;cursor:zoom-in;border-radius:8px;padding:0}
.pan-abrir:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
body.vb-abierto{overflow:hidden}
.vbox{position:fixed;inset:0;z-index:120;display:grid;
  grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;justify-items:center;gap:10px;padding:clamp(12px,3vw,34px);
  background:rgba(16,12,40,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .22s ease}
.vbox.ver{opacity:1}
.vb-fig{grid-column:1 / -1;grid-row:1;margin:0;display:grid;gap:14px;justify-items:center;
  max-width:min(1180px,100%);transform:scale(.985);transition:transform .24s ease}
.vbox.ver .vb-fig{transform:none}
/* El marco: la captura con su sombra, como una ventana de verdad. */
.vb-marco{border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08)}
.vb-marco img{display:block;width:100%;height:auto;max-height:calc(100vh - 190px);object-fit:contain}
.vb-fig figcaption{display:grid;gap:2px;text-align:center;color:#fff}
.vb-fig figcaption b{font-size:1.05rem;font-weight:650;letter-spacing:-.015em}
.vb-fig figcaption span{font-size:.87rem;color:rgba(255,255,255,.72)}
.vb-x,.vb-fl{border:0;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border-radius:50%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .16s ease,transform .16s ease}
.vb-x:hover,.vb-fl:hover{background:rgba(255,255,255,.26)}
.vb-fl:active{transform:scale(.94)}
.vb-x{position:absolute;top:clamp(10px,2.4vw,22px);right:clamp(10px,2.4vw,22px);width:40px;height:40px;z-index:2}
.vb-fl{grid-row:1;width:46px;height:46px;align-self:center}
.vb-iz{grid-column:1;justify-self:start}
.vb-dr{grid-column:3;justify-self:end}
.vb-puntos{grid-column:1 / -1;grid-row:2;display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.vb-pt{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .16s ease,transform .16s ease}
.vb-pt.act{background:#fff;transform:scale(1.25)}
@media (max-width:760px){
  /* En móvil sobran las flechas: se pasa con el dedo. */
  .vb-fl{display:none}
  .vb-fig{grid-column:1 / -1}
  .vb-marco img{max-height:calc(100vh - 210px)}
}
@media (prefers-reduced-motion: reduce){ .vbox,.vb-fig{transition:none} }

/* ═══════ El velo de la captura ═══════
   Encima de la captura y DEBAJO de la lámina (va dentro de `.pan-hueco`), para
   que el brazo y el portátil sigan nítidos por delante.

   Son dos capas, y esa es toda la gracia:
   · la base pone un desenfoque corto y un tinte lila parejo;
   · encima, `::before` lleva un desenfoque fuerte **con máscara radial** que se
     abre en el centro. Resultado: los bordes quedan de vidrio y el medio casi
     limpio, así que se ve QUÉ hay debajo sin dejar de ser un velo. Tapar por
     igual convierte la captura en un cartel y se pierde lo que se quería contar.
   El brillo que cruza es `::after`, y se apaga con `prefers-reduced-motion`. */
/* El tono es el MISMO del visor «ver en grande» (`.vbox`: rgba(16,12,40,.84)),
   para que pulsar la escena sea una continuación y no un cambio de color; aquí
   va mucho más suave porque debajo hay que poder leer el panel.
   El desenfoque vuelve a ser permanente (8-sep-2026, a petición de Ruben): la
   captura se ve borrosa detrás del cristal y el botón invita a abrirla en grande. Con la lámina apaisada
   colaba, pero desde que la captura llena el marco y se ve el panel entero, un
   `blur(2.5px)` encima dejaba los textos ilegibles: justo lo contrario de lo
   que promete la sección («esto es el panel»). Queda un tinte suave que sigue
   dando el aire de cristal, y el desenfoque entra sólo al pasar por encima. */
.pan-velo{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;
  padding-top:8.5%;pointer-events:none;overflow:hidden;
  background:linear-gradient(168deg,rgba(45,110,246,.34),rgba(18,58,200,.46));
  -webkit-backdrop-filter:blur(2.6px) saturate(120%);backdrop-filter:blur(2.6px) saturate(120%);
  transition:opacity .3s ease,backdrop-filter .3s ease}
.pan-escena:hover .pan-velo{
  -webkit-backdrop-filter:blur(4px) saturate(128%);backdrop-filter:blur(4px) saturate(128%)}
.pan-velo::before{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(7px) saturate(126%);backdrop-filter:blur(7px) saturate(126%);
  background:radial-gradient(115% 85% at 50% 108%,rgba(16,64,210,.40),transparent 62%);
  -webkit-mask-image:radial-gradient(70% 52% at 50% 46%,transparent 8%,#000 78%);
  mask-image:radial-gradient(70% 52% at 50% 46%,transparent 8%,#000 78%)}
/* El destello que cruza despacio: es lo que hace que parezca cristal y no una
   capa de color. Va en `overlay` para que no aclare de más sobre lo blanco. */
.pan-velo::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  mix-blend-mode:overlay;transform:skewX(-14deg);
  animation:panBrillo 6.5s cubic-bezier(.5,0,.35,1) infinite}
@keyframes panBrillo{
  0%,62%{transform:skewX(-14deg) translateX(0)}
  100%{transform:skewX(-14deg) translateX(420%)}}
.pan-lupa{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:.62em 1.05em;border-radius:999px;
  background:rgba(255,255,255,.93);color:var(--tx);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:clamp(.58rem,1.05vw,.92rem);font-weight:650;letter-spacing:-.012em;line-height:1;
  box-shadow:0 14px 30px -12px rgba(28,18,86,.7),0 0 0 1px rgba(255,255,255,.55) inset,
             0 0 0 6px rgba(255,255,255,.13);
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .25s ease}
.pan-lupa svg{flex:none;width:1.05em;height:1.05em;color:var(--acento)}
.pan-lupa b{font-weight:inherit}
/* En el móvil la pantalla del dibujo mide ~180 px: el rótulo largo se salía del
   marco. Misma idea, menos palabras. */
.pl-corta{display:none}
@media (max-width:700px){
  .pl-larga{display:none}
  .pl-corta{display:inline}
  .pan-lupa{padding:.5em .8em;gap:5px;font-size:.6rem}
  .pan-velo{padding-top:11%}
}
/* Al pasar por encima el velo se retira casi del todo: la promesa de lo que
   pasa al pulsar, cumplida antes de pulsar. */
.pan-escena:hover .pan-velo{opacity:.42}
.pan-escena:hover .pan-lupa{transform:translateY(-2px) scale(1.05);
  box-shadow:0 18px 34px -12px rgba(28,18,86,.75),0 0 0 1px rgba(255,255,255,.6) inset,
             0 0 0 9px rgba(255,255,255,.16)}
.pan-abrir:focus-visible ~ .pan-velo{opacity:.42}
@media (prefers-reduced-motion: reduce){
  .pan-velo,.pan-lupa{transition:none}
  .pan-velo::after{animation:none;opacity:0}
}


/* ══════ El disco lila detrás del personaje de «Qué vigila» ══════ (7-sep-2026)
   El PNG nuevo viene recortado y SIN el círculo que traía dibujado el anterior.
   Se repone aquí, en CSS, y no repintándolo dentro de la imagen: así se ajusta
   de tamaño y posición sin volver a exportar nada, y escala con la figura
   porque va en % del propio contenedor. */
.figura{position:relative;isolation:isolate}
/* ⚠ El disco va colgado del <picture>, NO de .figura: el contenedor mide bastante
   más que la ilustración (366x603 contra 320x320, con la imagen empezando en
   y=283), así que un `top:40%` del contenedor caía POR ENCIMA del personaje.
   Colgado de la imagen, el centro del disco coincide con el del personaje
   —medido sobre el canal alfa: 51 % / 50,7 %— pase lo que pase con el alto
   del contenedor. */
.figura>picture{position:relative;display:block;z-index:1}
.figura>picture::before{content:"";position:absolute;z-index:-1;
  left:51%;top:50.7%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e4dcfd 0%,#cfc0f8 55%,#bfaef5 100%)}
.figura img{position:relative;z-index:1}


/* La lámina del escritorio (7-sep-2026) trae YA DIBUJADOS la dirección del
   navegador y el rótulo «Más visibilidad», que antes se ponían en HTML porque
   la lámina vieja los traía vacíos. Se apagan aquí, no se borran del HTML: si
   algún día vuelve una lámina limpia, basta con quitar estas dos líneas. */
.pan-dir,.pan-flota{display:none}


/* ══ El avatar de «Qué vigila», versión 8-sep-2026 ══
   La ilustración nueva trae SU PROPIO fondo lavanda y su disco, así que llena la
   tarjeta entera en vez de flotar sobre ella: si se dejara centrada se vería la
   costura entre su lavanda (#c3b1fc) y el degradado de la tarjeta. Por eso
   también se retira el disco que pintábamos en CSS: ya viene en la imagen. */
.figura>picture::before{display:none}
.figura>picture{display:block;width:100%;height:100%}
.figura img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
/* Sin proporción fija: `.vig-col` ya reparte `1fr auto`, así que la tarjeta se
   estira hasta la nota de abajo y no queda el hueco que dejaba el aspect-ratio.
   La ilustración se recorta con `cover`, que para eso llena la caja. */
.figura{height:100%;min-height:0}


/* ══ Bloques plegados (8-sep-2026) ══
   Tres bloques que amplían un argumento ya hecho —el detalle del cuadre, por qué
   Lupa no puede inventarse nada, y los tres pasos del alta— pasan a estar
   plegados. No se borran: quien quiere el porqué lo abre, y quien escanea la
   página deja de tragárselos. El <summary> se ve como un enlace, no como un
   botón, para que no compita con los CTA de verdad. */
.pliega{margin:clamp(14px,2vw,22px) 0 0}
.pliega>summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  list-style:none;font-size:.95rem;font-weight:600;color:var(--acento-tx,#5857f3);
  padding:6px 0}
.pliega>summary::-webkit-details-marker{display:none}
.pliega>summary::after{content:"⌄";font-size:1.05em;transition:transform .2s ease}
.pliega[open]>summary::after{transform:rotate(180deg)}
.pliega>summary:hover{text-decoration:underline}
.pliega>*:not(summary){margin-top:clamp(12px,1.8vw,18px)}


/* El plegado de los tres bloques secundarios de #ademas ocupa la fila entera de
   la rejilla de doce columnas, y al abrirse los coloca en su propia rejilla con
   el mismo reparto que tenían. */
.b2-mas{grid-column:1 / -1;margin:0}
.bento2-mas{margin-top:clamp(14px,1.6vw,18px)}
@media(min-width:760px){
  .bento2-mas{grid-template-columns:repeat(12,1fr)}
  .bento2-mas .b2-enc{grid-column:span 6}
  .bento2-mas .b2-acc{grid-column:span 3}
  .bento2-mas .b2-marca{grid-column:span 3}
}


/* ══ Carrusel de #ademas (8-sep-2026) ══
   Los siete bloques apilados ocupaban 1.984 px: el 16 % de la página para
   contar cosas que se entienden de una en una. En fila ocupan una sola y se
   recorren con la flecha, igual que las pantallas del panel.
   ⚠ Dentro de la pista los bloques ya NO son celdas de la rejilla de doce
   columnas: hay que anular sus `grid-column`, o el navegador los estira. */
/* ⚠ `min-width:0` en los dos: un elemento con `overflow-x` dentro de una
   rejilla o un flex NO encoge por debajo de su contenido si no se le dice, y el
   carrusel se desbordaba a 1.431 px dentro de una ventana de 500 (móvil roto).
   El `max-width:100%` es el cinturón por si el contenedor cambia. */
.b2-carro{grid-column:1 / -1;position:relative;min-width:0;max-width:100%}
.b2-pista{display:flex;align-items:stretch;min-width:0;max-width:100%;gap:clamp(14px,1.6vw,18px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.b2-pista::-webkit-scrollbar{display:none}
.b2-pista>.b2{grid-column:auto !important;grid-row:auto !important;
  /* Uno cada vez y TODOS DEL MISMO TAMAÑO: al ancho entero y con la misma
     altura, así al pasar con la flecha nada salta ni cambia de forma. */
  flex:0 0 100%;scroll-snap-align:start;
  min-height:var(--b2-alto,430px);display:flex;flex-direction:column}
.b2-nav{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(14px,1.8vw,20px)}
.b2-cuenta{font-size:.9rem;color:var(--tx3,#5d5680);font-variant-numeric:tabular-nums}
.b2-cuenta b{color:var(--tinta,#241a4d)}
@media(max-width:759px){.b2-pista>.b2{--b2-alto:auto}}


/* ══ Fuera la barra flotante de móvil (8-sep-2026) ══
   Se apaga aquí y no se borra del HTML: si algún día se quiere de vuelta, se
   quitan estas dos reglas. Con ella fuera hay que devolver el hueco que
   reservaba al pie del documento, o queda un vacío al final de la página. */
@media(max-width:900px){
  /* ⚠ Son DOS barras distintas, no una: `.navapp` (el dock con números) y
     `.barra-movil` (los atajos de abajo). Apagar sólo la primera no quita nada
     a la vista, porque la que se ve es la segunda. */
  .navapp,.barra-movil{display:none !important}
  body{padding-bottom:0}
}


/* ══ El carrusel, DENTRO de «Lo que haces con todo eso» (8-sep-2026) ══
   Va dentro de esa tarjeta y no como fila aparte: es el mismo tema, y así la
   sección es un solo bloque con sus flechas en vez de dos cosas separadas.
   Las cards de dentro pierden borde, fondo y sombra: una tarjeta dentro de otra
   tarjeta se lee como un error de maquetación, no como jerarquía. */
.b2-lista .b2-carro{margin:0}
.b2-intro h2{margin-bottom:18px}
.b2-lista .b2-pista>.b2{background:none;border:0;box-shadow:none;padding:0;
  min-height:var(--b2-alto,360px)}
.b2-lista .b2-nav{margin-top:clamp(10px,1.4vw,16px)}


/* ══ «Lo que pasa mientras nadie mira», del revés (8-sep-2026) ══
   La prueba manda: «3 reseñas han dejado de aparecer» es lo que convence, y
   estaba al final y en pequeño. Ahora abre la tarjeta y el antiguo titular pasa
   a ser la explicación. Se quitó además la etiqueta de arriba («Reseñas
   borradas»), que decía lo mismo que el titular con otras palabras. */
.ficha-v .ficha-dato,.ficha-v.cr .ficha-dato,.ficha-v.am .ficha-dato,
.ficha-v.az .ficha-dato,.ficha-v.ve .ficha-dato{background:none !important;border:0 !important;padding:0;margin:2px 0 10px;
  display:flex;align-items:flex-start;gap:10px;font-size:1.02rem;line-height:1.3}
.ficha-v .ficha-dato b{display:block;font-size:1.62rem;font-weight:800;
  letter-spacing:-.02em;line-height:1.15}
.ficha-v .ficha-dato i{flex:none;margin-top:5px}
.ficha-v h3{font-size:1.02rem;font-weight:600;line-height:1.4;margin-bottom:8px;
  color:var(--tinta,#241a4d)}



/* ⚠ El `min-width:0` hay que ponerlo en TODA la cadena, no sólo en la pista:
   `.bento2 > .b2-lista > .b2-carro > .b2-pista`. Al meter el carrusel dentro de
   la tarjeta se añadió un contenedor intermedio (.b2-lista) que seguía sin él, y
   la card volvía a plantarse en 1.586 px dentro de una ventana de 500. */
.b2-lista{min-width:0}
.b2-lista .b2-carro,.b2-lista .b2-pista{min-width:0;max-width:100%}
.b2-pista>.b2{max-width:100%}
.b2-pista>.b2>*{min-width:0;max-width:100%}


/* En móvil cada diapositiva va a su altura: la mínima común es para que en
   escritorio no salte nada al pasar, pero en una pantalla estrecha sólo deja un
   hueco muerto antes de las flechas. */
@media(max-width:759px){
  .b2-lista .b2-pista>.b2,.b2-pista>.b2{min-height:0 !important}
}

/* Con la altura de la pista fijada por JS, los hijos NO deben estirarse: si no,
   `scrollHeight` devuelve la altura ya estirada y la medida se realimenta. */
.b2-pista{align-items:flex-start;transition:height .28s ease}
@media(prefers-reduced-motion:reduce){.b2-pista{transition:none}}


/* ══ Ajustes del carrusel (8-sep-2026) ══
   1 · Sin arrastre con el dedo: `overflow-x:hidden` y `touch-action:pan-y`. El
       deslizamiento libre dejaba la tarjeta a medio camino entre dos y el
       contador y la altura se quedaban a medias. Con `scrollBy` desde las
       flechas se sigue moviendo igual (un contenedor oculto sigue siendo
       desplazable por código), y el gesto vertical de la página no se toca.
   2 · Las flechas, más pegadas: el hueco venía de la altura mínima de la
       diapositiva, que ya la fija el JS. */
.b2-pista{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y;
  -webkit-overflow-scrolling:auto}
.b2-lista .b2-nav,.b2-nav{margin-top:clamp(6px,1vw,12px)}


/* El carrusel se mueve con `transform`, no con scroll: el recorte lo hace el
   contenedor y la pista se desplaza entera. Así no hay nada arrastrable y las
   flechas funcionan igual en todos los navegadores. */
.b2-carro{overflow:hidden}
.b2-pista{overflow:visible !important;transform:translateX(0);
  transition:transform .34s cubic-bezier(.4,0,.2,1),height .28s ease;
  scroll-snap-type:none}
.b2-pista>.b2{flex:0 0 100% !important}
.b2-nav .pan-fl[disabled]{opacity:.35;cursor:default}
@media(prefers-reduced-motion:reduce){.b2-pista{transition:none}}


/* Sólo la diapositiva activa está en el flujo: nada desborda, así que el
   navegador no puede desplazar el contenedor por su cuenta al enfocar la
   flecha —era el «se tira para atrás»— y la altura la marca el contenido. */
.b2-pista{display:block !important;transform:none !important;height:auto !important;
  transition:none !important;overflow:visible !important}
.b2-pista>.b2[hidden]{display:none !important}
.b2-pista>.b2{flex:none !important;width:100%;animation:b2Entra .22s ease}
@keyframes b2Entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.b2-pista>.b2{animation:none}}


/* ══ La tarjeta «Está al caer» (8-sep-2026) ══
   Texto y botón en HTML, y el personaje como ilustración a la derecha: asoma por
   arriba de la tarjeta, que es lo que le da gracia, sin que el botón deje de ser
   un botón. */
/* Copiada de la maqueta: tarjeta clara con borde lila, el icono de la app
   arriba, y el personaje asomando por encima del borde superior. El texto y el
   botón son HTML de verdad; sólo el personaje es imagen. */
.app-cta{position:relative;display:flex;align-items:flex-end;gap:0;overflow:hidden;
  background:linear-gradient(158deg,#f7f4ff 0%,#efe9fe 60%,#eae2fd 100%);
  border:1px solid #e6ddfb;border-radius:26px;padding:26px 26px 24px;
  box-shadow:0 22px 44px -26px rgba(70,40,140,.45);min-height:250px}
.app-cta-tx{flex:1 1 auto;min-width:0;padding-right:clamp(96px,38%,190px)}
.app-cta-ico{display:inline-grid;place-items:center;width:64px;height:64px;
  border-radius:18px;background:#fff;margin-bottom:14px;
  box-shadow:0 10px 22px -12px rgba(70,40,140,.5)}
.app-cta-ico img{width:44px;height:44px}
.app-cta .app-cta-tx b{display:block;font-size:clamp(1.5rem,2.4vw,1.95rem);
  font-weight:800;letter-spacing:-.02em;color:#150c2e;margin-bottom:8px}
.app-cta .app-cta-tx p{color:#4a4468;font-size:.95rem;line-height:1.5;margin:0 0 18px}
.app-cta-bt{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  min-width:min(100%,200px);padding:13px 20px;border-radius:999px;
  background:linear-gradient(96deg,#7c4dee,#5b21d0);color:#fff;font-weight:700;
  text-decoration:none;box-shadow:0 14px 26px -14px rgba(92,33,208,.8);
  transition:transform .18s ease,box-shadow .18s ease}
.app-cta-bt:hover{transform:translateY(-1px);box-shadow:0 18px 30px -14px rgba(92,33,208,.9)}
/* ⚠ Posición ABSOLUTA, no un margen negativo: con `align-items:flex-end` el
   margen sólo le quita alto y el personaje se quedaba dentro de la tarjeta. Así
   la cabeza sobresale por arriba, que es lo que le da el aire de pegatina. */
/* Dentro de la tarjeta y a ras del borde inferior: la altura la marca la propia
   tarjeta (`height:100%`) y el ancho se calcula solo, así el personaje se apoya
   abajo y no se sale por ningún lado. El `overflow:hidden` de la tarjeta es el
   cinturón, y respeta las esquinas redondeadas. */
.app-cta-chico{position:absolute;right:4px;bottom:0;height:100%;width:auto;
  max-width:46%;object-fit:contain;object-position:bottom right;
  pointer-events:none;z-index:2}
@media(max-width:640px){
  .app-cta{padding:20px 18px 18px}
  .app-cta-chico{max-width:44%;right:2px;bottom:0}
  .app-cta-tx{padding-right:40%}
  .app-cta .app-cta-tx p{max-width:none}
}


/* El vídeo de Lupa se abre en grande al pulsarlo: hay que decirlo, o nadie lo
   descubre. Botón discreto abajo a la derecha del marco, como el «ver completa»
   del panel. */
.lupa-marco{cursor:zoom-in}
.lupa-zoom{display:inline-flex;align-items:center;gap:7px;padding:.5em .9em;border:0;
  border-radius:999px;background:rgba(255,255,255,.92);color:#241a4d;
  font:inherit;font-size:.78rem;font-weight:700;cursor:zoom-in;
  box-shadow:0 10px 22px -12px rgba(28,18,86,.7);
  opacity:0;transition:opacity .22s ease,transform .22s ease;transform:translateY(4px)}
.lupa-marco:hover .lupa-zoom,.lupa-zoom:focus-visible{opacity:1;transform:none}
@media(hover:none){.lupa-zoom{opacity:1;transform:none}}

/* ── El botón de sonido ──
   Mismo cuerpo que «Ver en grande» y pegado a su izquierda: son los dos mandos
   del mismo trozo de pantalla y separarlos obligaría a buscarlos por sitios
   distintos. Se calcula desde el mismo `right:3.5%` para que sigan alineados a
   cualquier ancho.
   ⚠ Éste NO se esconde hasta el hover, y es la diferencia que importa: «ver en
   grande» es un extra que se descubre al pasar por encima, pero un vídeo con
   sonido que no avisa de que lo tiene es un vídeo mudo para casi todo el mundo.
   Va siempre visible, algo más discreto que su vecino. */
.lupa-son{display:inline-flex;align-items:center;gap:7px;padding:.5em .85em;border:0;
  border-radius:999px;background:rgba(255,255,255,.82);color:#241a4d;
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(28,18,86,.7);
  transition:background .18s ease,color .18s ease}
.lupa-son:hover{background:rgba(255,255,255,.97)}
.lupa-son:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* Encendido, se tiñe del acento: se ve de un vistazo si está sonando sin tener
   que leer el rótulo. */
.lupa-son.son-on{background:var(--acento-relleno);color:#fff}
/* Los dos iconos se turnan aquí y no desde el guion: repintar un SVG en cada
   clic es trabajo para nada. */
.lupa-son .ls-on{display:none}
.lupa-son.son-on .ls-off{display:none}
.lupa-son.son-on .ls-on{display:block}
/* En pantalla estrecha el rótulo sobra: los dos botones juntos no caben y el
   icono de un altavoz no lo confunde nadie. */
@media(max-width:560px){
  .lupa-son b{display:none}
  .lupa-son{padding:.5em .6em}
}
@media(prefers-reduced-motion:reduce){.lupa-son{transition:none}}

/* ── Portada: claim y ejes ────────────────────────────────────────────────── */
.port-eti{margin:0 0 16px;font-size:clamp(.82rem,1.4vw,.95rem);font-weight:600;
  letter-spacing:.01em;color:var(--acento);text-wrap:balance}
.port-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 28px;padding:0}
.port-chips li{font-size:.87rem;font-weight:650;padding:7px 15px;border-radius:999px;
  color:var(--tx);background:var(--card);border:1px solid var(--linea2);
  box-shadow:0 1px 2px rgba(16,19,34,.05);white-space:nowrap}
@media (max-width:640px){.port-chips{gap:6px}.port-chips li{font-size:.8rem;padding:5px 11px}}

/* ── Alcance, Para empresas y la tira de precio ────────────────────────────── */
/* ⚠ NADA DE `display:flex` EN EL <li> para dibujar el punto: dentro de un flex,
   el <b> y el texto que le sigue son DOS ÍTEMS y la frase sale partida en dos
   columnas. El punto va absoluto y el texto sangrado. */
.alc-rejilla li{display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:var(--card);border:1px solid var(--linea);border-radius:14px;
  font-size:.97rem;color:var(--tx2);line-height:1.45;
  box-shadow:0 1px 2px rgba(16,19,34,.04);transition:border-color .16s,box-shadow .16s}
.alc-rejilla li:hover{border-color:var(--linea2);box-shadow:0 2px 10px -4px rgba(16,19,34,.18)}
.alc-rejilla li b{color:var(--tx)}
.alc-ico{flex:none;width:42px;height:42px;display:grid;place-items:center}
.alc-ico img{width:100%;height:100%;object-fit:contain}
.alc-tx{min-width:0}
.acciones.centro{display:flex;justify-content:center}

.emp-lema{margin:20px 0 0;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;color:var(--tx)}

.cinta-precio{padding:0 0 8px}
.precio-tira{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  background:var(--card);border:1px solid var(--linea2);border-radius:18px;
  padding:22px 26px;box-shadow:0 1px 2px rgba(16,19,34,.05)}
.precio-tira > div{flex:1 1 340px}
.pt-desde{margin:0;font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;color:var(--tx)}
.pt-desde b{color:var(--acento)}
.pt-sub{margin:6px 0 0;font-size:.95rem;color:var(--tx3);line-height:1.5;max-width:62ch}
.precio-tira .acciones{margin:0;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.precio-tira{padding:18px}.precio-tira .acciones .boton{flex:1 1 100%}}

/* «Qué repasa cada mañana» no entra en un móvil: es el detalle de un detalle. */
@media(max-width:760px){.val-repasa{display:none}}
/* La demo dentro del panel se distingue: es la acción, no un enlace más. */
.barra nav .nav-demo{border-top:1px solid var(--linea2);margin-top:2px;font-weight:700;color:var(--acento)}

/* ── Para empresas: las tres piezas ──────────────────────────────────────── */
.emp-rejilla{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.emp-rejilla li{background:var(--card);border:1px solid var(--linea);border-radius:16px;
  padding:22px 20px;text-align:center}
.emp-ico{display:block;width:62px;height:62px;margin:0 auto 12px}
.emp-ico img{width:100%;height:100%;object-fit:contain}
.emp-rejilla li b{display:block;color:var(--tx);font-size:1.05rem;margin-bottom:5px}
.emp-rejilla li span:last-child{color:var(--tx3);font-size:.93rem;line-height:1.5}

/* ── Portada en una sola columna (por debajo de 960) ───────────────────── */
@media(max-width:959px){
  .portada{padding-top:clamp(74px,9vw,104px)}
  .port-tx{text-align:center}
  /* El claim es una píldora: centrarlo es centrar la caja, no el texto. */
  .port-eti{width:fit-content;margin-inline:auto}
  .port-tx .entrada{margin-inline:auto;max-width:54ch}
  .port-chips{justify-content:center}
  .port-tx .acciones{justify-content:center}
}

/* ── Cifras: franja, no tarjeta ─────────────────────────────────────────────
   Sin caja, sin icono y sin pastilla: el separador fino basta para que se
   lean como cuatro cosas y no como una lista. */
.cinta > .ancho{position:relative;z-index:1}
/* La banda sangra a todo el ancho aunque el contenido siga centrado: el color
   tiene que tocar los dos bordes o vuelve a parecer una caja puesta encima. */
/* Un brillo suelto arriba a la derecha: rompe el degradado plano sin dibujar
   nada que haya que mantener. */
.cifras-tira{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:0;padding:clamp(30px,4vw,48px) 0}
.cifras-tira > div{padding:4px clamp(14px,2vw,28px);text-align:center}
.cifras-tira > div + div{border-left:1px solid rgba(255,255,255,.2)}
.cifras-tira dt{margin:0}
.cifras-tira dt b{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:700;
  letter-spacing:-.05em;color:#fff;line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.18)}
.cifras-tira dd{margin:10px 0 0;font-size:.93rem;line-height:1.45;
  color:rgba(255,255,255,.76);max-width:23ch;margin-inline:auto}
.cifras-tira dd b{font-weight:650;color:#fff}/* En dos columnas antes de apilar: cuatro en fila en un móvil deja los
   números del tamaño de la letra normal y dejan de ser cifras. */
@media(max-width:880px){
  .cifras-tira{grid-template-columns:repeat(2,1fr)}
  .cifras-tira > div:nth-child(3){border-left:0}
  .cifras-tira > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2);margin-top:22px;padding-top:22px}
}
@media(max-width:480px){
  .cifras-tira{grid-template-columns:1fr}
  .cifras-tira > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.2);margin-top:20px;padding-top:20px}
}

/* El asistente ya no es un SVG plano sino el personaje 3D: necesita más sitio
   y `object-fit` para no deformarse si cambia la caja. */

/* El rótulo de la banda: sin él, los cuatro números no se sabe de quién son. */
.cifras-eti{position:relative;z-index:1;margin:0;padding:clamp(26px,3.4vw,40px) 0 0;
  text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8f86ff}
.cifras-eti + .cifras-tira{padding-top:clamp(18px,2.2vw,26px)}
.cifras-tira dt b{text-wrap:balance}
@media(min-width:881px){.cifras-tira > div:nth-child(3) dt b{font-size:clamp(1.6rem,3vw,2.4rem)}}

/* Banda clara: el peso lo llevan los números, no el fondo. */
@media(max-width:880px){
  .cifras-tira > div:nth-child(n+3){border-top-color:rgba(16,19,34,.10)!important}
}
@media(max-width:480px){
  .cifras-tira > div + div{border-top-color:rgba(16,19,34,.10)!important}
}

/* La franja de cifras no pinta fondo: ver el comentario de arriba. */
.cifras-tira{padding:clamp(6px,1.4vw,14px) 0 clamp(26px,3.4vw,40px)}

/* ── Cifras: la maqueta de Ruben, tal cual ────────────────────────────────────
   Fondo lavanda propio a todo el ancho (ondas + tramas de puntos, viene en la
   imagen), rótulo en píldora centrada y cuatro tarjetas TRANSLÚCIDAS —no blancas
   opacas—: el fondo tiene que verse a través, que es lo que las ata a la banda
   en vez de dejarlas flotando encima. Contenido alineado a la IZQUIERDA. */
.cinta{position:relative;padding:0;background:transparent;isolation:isolate}
.cinta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:transparent}
.cinta::after{display:none}
.cinta > .ancho{position:relative;padding-block:clamp(34px,4.4vw,58px)}

.cifras-eti{margin:0 0 clamp(20px,2.6vw,30px);text-align:center}
.cifras-eti span{display:inline-block;padding:8px 20px;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento)}

.cifras-tira{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(4,1fr)}
.cifras-tira li{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  border-radius:20px;padding:clamp(16px,1.8vw,22px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px -18px rgba(52,36,120,.45)}
.cf-ico{display:block;width:42px;height:42px;margin-bottom:14px}
.cf-ico img{width:100%;height:100%;object-fit:contain;display:block}
.cifras-tira li > b{display:block;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:700;
  letter-spacing:-.045em;color:var(--acento);line-height:1.05}
.cifras-tira li p{margin:8px 0 0;font-size:.87rem;line-height:1.45;color:var(--tx2)}
.cifras-tira li p b{font-weight:700;color:var(--tx)}
.cifras-tira li p b span{font-weight:400;color:var(--tx2)}

@media(max-width:900px){.cifras-tira{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cifras-tira{grid-template-columns:1fr}}
/* ── Cabeza: portada + cifras sobre UNA sola imagen ──────────────────────────
   El fondo lo pinta el envoltorio, no cada sección. Va en un <span> propio y no
   en un ::before del contenedor porque `.portada` tiene `overflow:hidden` y
   position:relative, y un pseudo del padre acababa recortado por el hijo.
   `cover` + `center top` mantiene la curva de las olas en su sitio al cambiar el
   ancho; el degradado de debajo es el color del borde inferior de la imagen, para
   que si la pantalla es más alta que la foto no aparezca una banda cortada. */
.cabeza{position:relative;isolation:isolate;
  background:linear-gradient(180deg,#efeafc 0%,#e3d9fb 100%)}
.cabeza-fondo{position:absolute;left:0;right:0;bottom:0;top:-24px;z-index:-1;display:block;
  background:url("img/cabeza-web-ffa788ab.webp") center top/100% calc(100% + 24px) no-repeat}
.cabeza .portada,.cabeza .cinta{background:transparent}
.cabeza .port-fondo{display:none}
/* En vertical manda la pieza vertical: la apaisada habría que estirarla casi
   el triple de alto y las olas se deformarían. */
@media(max-width:860px){
  .cabeza-fondo{background-image:url("img/cabeza-movil-d7aa216b.webp")}
}

/* ── «Qué analiza»: panel + rejilla 2×2 + banda ───────────────────────────── */
.vg-rejilla{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:minmax(280px,.86fr) 2fr;
  align-items:start}
.vg-lado{display:grid;gap:clamp(12px,1.4vw,16px)}
.vg-panel{width:100%;height:auto;display:block;border-radius:22px;
  box-shadow:0 18px 44px -26px rgba(52,36,120,.5)}
.vg-pie{display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--card);border:1px solid var(--linea);border-radius:18px;
  padding:14px 16px;box-shadow:0 1px 2px rgba(16,19,34,.04);
  transition:border-color .16s,box-shadow .16s}
.vg-pie:hover{border-color:var(--linea2);box-shadow:0 8px 22px -14px rgba(52,36,120,.4)}
.vg-pie-ico{flex:none;width:42px;height:42px}
.vg-pie-ico img{width:100%;height:100%;object-fit:contain;display:block}
.vg-pie span:nth-child(2){flex:1;min-width:0;font-size:.86rem;color:var(--tx3);line-height:1.4}
.vg-pie b{display:block;color:var(--tx);font-size:.94rem;margin-bottom:2px}
.vg-pie-mas{flex:none;color:var(--md);font-size:1.4rem;line-height:1}

.vg-cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(2,1fr)}
.vg-card{background:var(--card);border:1px solid var(--linea);border-radius:22px;
  padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,19,34,.04);transition:border-color .16s,box-shadow .16s}
.vg-card:hover{border-color:var(--linea2);box-shadow:0 12px 30px -20px rgba(52,36,120,.45)}
.vg-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.vg-ico{flex:none;width:52px;height:52px}
.vg-ico img{width:100%;height:100%;object-fit:contain;display:block}
.vg-n{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--acento);
  background:#eeeefe;border-radius:999px;padding:3px 9px}
/* La pastilla se va al extremo; `margin-left:auto` y no un `justify-content`
   porque los tres elementos de la fila no siempre están los tres. */
.vg-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  border-radius:14px;padding:8px 12px;font-size:.76rem;font-weight:700;line-height:1.25;
  text-align:left}
.vg-chip i{display:block;font-style:normal;font-weight:500;opacity:.8}
.vg-chip img{width:20px;height:20px;object-fit:contain}
.vg-chip.vg-am{background:#fdf3e2;color:#8a5a11}
.vg-chip.vg-jd{background:#e4f7ef;color:#06673f}
.vg-chip.vg-jd b{font-size:1rem}
.vg-chip.vg-lista{background:var(--bg2);color:var(--tx2);font-weight:600;font-size:.72rem}
.vg-chip.vg-lista b{color:var(--acento)}

.vg-card h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;
  letter-spacing:-.03em;color:var(--tx)}
.vg-card h3 span{display:block;margin-top:3px;font-size:.9rem;font-weight:600;
  letter-spacing:0;color:var(--tx3)}
.vg-card p{margin:12px 0 0;font-size:.9rem;line-height:1.5;color:var(--tx3)}
.vg-card p b{color:var(--tx);font-weight:700}
/* El enlace se pega abajo para que las cuatro tarjetas lo tengan a la misma
   altura aunque el texto de una ocupe una línea más. */
.vg-mas{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--tx);font-weight:650;font-size:.92rem}
.vg-flecha{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento);color:#fff;font-size:1.05rem;
  box-shadow:0 8px 18px -10px rgba(88,73,232,.9);transition:transform .16s}
.vg-mas:hover .vg-flecha{transform:translateX(3px)}

.vg-banda{margin-top:clamp(14px,1.6vw,20px);display:flex;align-items:center;
  gap:clamp(14px,2vw,26px);background:var(--card);border:1px solid var(--linea);
  border-radius:22px;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  box-shadow:0 1px 2px rgba(16,19,34,.04)}
.vg-banda-ico{flex:none;width:44px;height:44px}
.vg-banda-ico img{width:100%;height:100%;object-fit:contain;display:block}
.vg-banda-tx{flex:1;min-width:0;font-size:.9rem;color:var(--tx3);line-height:1.45}
.vg-banda-tx b{display:block;color:var(--tx);font-size:1.05rem;margin-bottom:2px}
.vg-banda-logo{flex:none;opacity:.9}

@media(max-width:1080px){
  .vg-rejilla{grid-template-columns:1fr}
  /* El panel es muy alto: a una columna se le pone tope o empuja todo lo demás
     fuera de la primera pantalla. */
  .vg-panel{max-height:520px;object-fit:cover;object-position:top}
}
@media(max-width:720px){
  .vg-cards{grid-template-columns:1fr}
  .vg-banda{flex-wrap:wrap}
  .vg-banda-tx{flex:1 1 100%}
  .vg-banda .boton{flex:1 1 100%}
  .vg-banda-logo{display:none}
}
/* El ancho de la página no puede cambiar al abrir un modal: ver el comentario
   del visor en index.html. Con el hueco reservado siempre, `overflow:hidden`
   ya no mueve nada. */
html{scrollbar-gutter:stable}

/* Los dos mandos del vídeo, en fila. Ver el porqué en el comentario de
   `.lupa-zoom`: apartar uno con `translateX(-100%)` usa SU ancho, no el del
   vecino, así que con un rótulo más largo se solapan. */
.lupa-mandos{position:absolute;right:3.5%;bottom:5%;z-index:4;
  display:flex;align-items:center;gap:8px}

/* ── La app, velada hasta que esté en la tienda ───────────────────────────── */
.app-vitrina{position:relative}
/* ⚠ El desenfoque va en el CONTENIDO, no en un velo por encima: un velo opaco
   taparía y no dejaría intuir nada, y desenfocar el contenedor entero borraría
   también el cartel. Y `pointer-events:none` es obligatorio — si no, se pueden
   pulsar a ciegas los enlaces de debajo, que es peor que no verlos. */
.app-vitrina[data-velado="1"] > .app-3{filter:blur(7px) saturate(.88);
  opacity:.75;pointer-events:none;user-select:none;transition:filter .5s ease,opacity .5s ease}
.app-vitrina[data-velado="1"] > .app-3 *{pointer-events:none}
.app-velo{position:absolute;inset:0;display:grid;place-items:center;z-index:3;padding:20px}
.app-vitrina:not([data-velado="1"]) .app-velo{display:none}
/* El cartel sí recibe clics aunque el contenedor sea decorativo. */
.app-velo-caja{pointer-events:auto;text-align:left;max-width:min(96%,1000px);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);border-radius:22px;
  padding:clamp(22px,3vw,30px);
  box-shadow:0 24px 60px -28px rgba(52,36,120,.6)}
.app-velo-pil{display:inline-block;margin-bottom:12px;padding:6px 15px;border-radius:999px;
  background:#eeeefe;color:var(--acento);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.app-velo-caja b{display:block;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--tx);
  letter-spacing:-.02em;margin-bottom:7px}
.app-velo-caja > span:not(.app-velo-pil){display:block;font-size:.92rem;color:var(--tx3);
  line-height:1.5;margin-bottom:18px}
@media(prefers-reduced-motion:reduce){
  .app-vitrina[data-velado="1"] > .app-3{transition:none}
}
/* El cartel, centrado en su sección y quieto. Ver el porqué donde estaba el
   `sticky`: perseguir al lector es peor que salirse de pantalla. */
.app-velo{align-items:center}

/* ── En móvil, la sección de validación se queda en su titular ─────────────
   Las tres fichas numeradas, la banda de «al vigilante se le vigila», el pie
   de la hora y el plegable son el DETALLE de un detalle: explican cómo se
   comprueba lo que ya se ha prometido arriba. En un teléfono eso son cuatro
   pantallazos de scroll antes de llegar a la siguiente sección, y quien lee de
   pie abandona. Se quedan sólo para quien tiene sitio para leerlas. */
@media(max-width:760px){
  #validacion .tres,
  #validacion .prueba,
  #validacion .pie-prueba,
  #validacion .val-repasa{display:none}
}

/* ── La app velada, en móvil: un adelanto, no un muro ──────────────────────
   A una columna todo el contenido se apila y quedan casi 2.000 px de borroso
   detrás del cartel. Mientras está velado se recorta a media pantalla: se
   intuye que hay algo y el cartel manda. Al quitarse `data-velado` recupera
   su alto entero, porque entonces sí hay algo que leer. */
@media(max-width:900px){
  .app-vitrina[data-velado="1"]{max-height:min(72vh,520px);overflow:hidden}
  /* El contenedor está recortado, así que `inset:0` es justo lo visible. */
  .app-vitrina[data-velado="1"] .app-velo{position:absolute;inset:0}
}

/* ── «De una reseña a una decisión» ───────────────────────────────────────── */
/* Las seis preguntas van en una fila que se parte sola. El punto separador es un
   `::before` y no un carácter en el HTML: así no se lee en voz alta ni se copia
   al seleccionar, que es lo que pasa con el «·» escrito a mano. */
.decide-q{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:6px 0}
.decide-q li{font-size:clamp(.9rem,1.6vw,1.05rem);font-weight:650;color:var(--acento);
  padding:0 clamp(10px,1.4vw,16px);position:relative}
.decide-q li + li::before{content:"";position:absolute;left:0;top:50%;
  width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--linea2)}
@media(max-width:560px){
  /* En columna el punto separador sobra y encima queda colgando a la izquierda. */
  .decide-q{flex-direction:column;gap:9px}
  .decide-q li + li::before{display:none}
}
/* Las preguntas viven ahora dentro de «El alcance», entre el titular y la
   entrada: hay que separarlas de los dos. */
.cabecera .decide-q{margin-block:clamp(14px,1.8vw,20px)}

/* ── El alcance, según la maqueta ─────────────────────────────────────────── */
.al-envoltorio{position:relative}
/* Las cuatro piezas de los lados son adorno: `aria-hidden` en el HTML y fuera
   del flujo aquí, para que no empujen nada ni roben sitio al contenido. */
.al-deco{position:absolute;z-index:0;pointer-events:none;user-select:none;height:auto}
.al-deco-izq{left:-2%;top:-10px;width:min(30%,300px)}
.al-deco-dch{right:-3%;top:-24px;width:min(30%,320px)}

.al-cab{position:relative;z-index:1;text-align:center;max-width:44rem;margin:0 auto}
.al-cab h2{margin:0;font-size:clamp(1.7rem,4vw,3rem);line-height:1.1;letter-spacing:-.04em;
  color:var(--tx);text-wrap:balance}
/* El subtítulo va en su propia cajita clara, como en la maqueta: lo despega del
   titular sin necesidad de más aire, que es lo que escasea en esta sección. */
.al-sub{margin:clamp(14px,1.8vw,20px) auto 0;max-width:46ch;
  background:rgba(255,255,255,.72);border:1px solid var(--linea);border-radius:16px;
  padding:12px 18px;font-size:clamp(.92rem,1.6vw,1.02rem);line-height:1.5;color:var(--tx3)}
.al-sub b{color:var(--tx)}

.al-rejilla{position:relative;z-index:1;list-style:none;padding:0;
  margin:clamp(26px,3.2vw,38px) auto clamp(22px,2.6vw,30px);
  max-width:72rem;display:grid;gap:clamp(9px,1vw,12px);
  grid-template-columns:repeat(4,1fr)}
.al-rejilla a{min-height:66px;display:flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--card);border:1px solid var(--linea);border-radius:16px;
  padding:12px 13px;box-shadow:0 1px 2px rgba(16,19,34,.04);
  transition:border-color .16s,box-shadow .16s,transform .16s}
.al-rejilla a:hover{border-color:var(--linea2);transform:translateY(-2px);
  box-shadow:0 10px 24px -16px rgba(52,36,120,.5)}
.al-ico{flex:none;width:38px;height:38px}
.al-ico img{width:100%;height:100%;object-fit:contain;display:block}
/* ⚠ El texto va en su propio `span`: el `<a>` es flex y, sin envolverlo, el
   `<b>` y lo que le sigue serían DOS ítems y la frase saldría en dos columnas. */
.al-tx{flex:1;min-width:0;font-size:.85rem;line-height:1.3;color:var(--tx3);text-wrap:balance}
.al-tx b{display:block;color:var(--tx);font-weight:700}
.al-fl{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg2);color:var(--md);font-size:1.05rem;line-height:1}
.al-rejilla a:hover .al-fl{background:var(--acento);color:#fff}

@media(max-width:1180px){
  .al-rejilla{grid-template-columns:repeat(2,1fr);max-width:44rem}
  .al-deco{display:none}
}
@media(max-width:560px){.al-rejilla{grid-template-columns:1fr}}
/* ── El cierre, en móvil ──────────────────────────────────────────────────────
   Tres cosas que en una columna estrecha se veían mal:
   · Las garantías son un `flex-wrap` de tres, y a 500 px caben dos: la tercera
     quedaba huérfana debajo, medio ancho y desalineada. En columna las tres
     miden lo mismo y se leen de un vistazo.
   · «Datos 100 % reales y verificados por Google» REPITE la tercera garantía
     («Datos 100 % reales · directos de Google»). En escritorio se separan y
     funcionan; apiladas quedan una encima de otra diciendo lo mismo dos veces,
     así que en móvil se queda sólo la tarjeta.
   · La ilustración ocupaba pantalla y media y es el último adorno de la página,
     no el argumento. */
@media(max-width:620px){
  .cierre .garantias{flex-direction:column;gap:9px}
  .cierre .garantias li{width:100%}
  .cierre .verificado{display:none}
  .cierre-fig img{max-width:min(100%,330px);margin-inline:auto}
}
/* ── El panel, en móvil: la captura y su pie, nada más ─────────────────────────
   La rejilla de diez ventajas («Analiza tu reputación», «Responde más rápido»…)
   y el aviso de que las capturas son de un negocio de demostración se quedan
   sólo donde hay sitio. En una columna estrecha son diez tarjetas de dos líneas,
   o sea tres pantallazos de scroll entre la captura y la siguiente sección:
   quien lee de pie abandona antes de llegar.
   ⚠ El PIE del carrusel («Inicio · Tu nota… · 1 de 14») NO se toca: es lo que
   dice qué pantalla estás viendo, y sin él la captura queda sin explicación. */
@media(max-width:760px){
  #panel .pan-ventajas,
  #panel .pan-nota{display:none}
}
/* ── El cartel de «Próximamente», según la maqueta ────────────────────────── */
.app-velo-caja{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;
  gap:clamp(16px,2.4vw,34px);padding:clamp(20px,2.6vw,34px)}
.avc-tx{min-width:0}
.app-velo-pil{display:inline-flex;align-items:center;gap:8px}
.app-velo-caja b{font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-.04em;
  margin-bottom:12px}
/* La segunda línea en el acento, como en la maqueta: parte la frase en dos
   golpes de lectura sin necesidad de un salto de línea escrito a mano, que se
   rompería en cuanto cambiara el ancho. */
.app-velo-caja b em{font-style:normal;color:var(--acento);display:block}
.app-velo-caja > .avc-tx > span{display:block;font-size:clamp(.92rem,1.7vw,1.05rem);
  color:var(--tx3);line-height:1.5;margin-bottom:20px;max-width:34ch}
.avc-fig{width:100%;height:auto;display:block;justify-self:end}

@media(max-width:820px){
  /* En columna la ilustración va DEBAJO: arriba manda el mensaje, que es lo que
     hay que leer para saber por qué está borroso lo de detrás. */
  .app-velo-caja{grid-template-columns:1fr;text-align:center}
  .app-velo-caja > .avc-tx > span{margin-inline:auto}
  .avc-fig{max-width:min(100%,380px);margin-inline:auto;justify-self:center}
}
/* ⚠ EL MISMO CORTE QUE EL TOPE DE LA VITRINA (900 px), y no uno menor.
   Por debajo de 900 la vitrina se recorta a `min(72vh,520px)`; con la
   ilustración apilada el cartel medía 615 px y se salía del recorte. La
   figura sólo puede aparecer donde NO hay tope, así que las dos reglas
   comparten el mismo umbral: si se cambia uno, hay que cambiar el otro. */
@media(max-width:900px){
  .avc-fig{display:none}
}
/* Sin el panel lila detrás, las pastillas translúcidas del cierre se perdían:
   pasan a tarjeta blanca con borde, como las del resto de la página. */
.cierre .garantias li{background:var(--card);border-color:var(--linea)}

/* ── El precio al cerrar «Qué analiza» ────────────────────────────────────── */
.vgp-cab{text-align:center;margin-bottom:clamp(16px,2vw,22px)}
.vgp-cab b{display:block;font-size:clamp(1.1rem,2.2vw,1.45rem);color:var(--tx);
  letter-spacing:-.02em}
.vgp-cab span{font-size:.9rem;color:var(--tx3)}
/* Cinco tramos en fila; cada uno es una celda con su borde, así se leen como
   una escala y no como cinco pastillas sueltas. */
.vgp-tramos{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(5,1fr)}
.vgp-tramos li{text-align:center;background:var(--bg2);border:1px solid var(--linea);
  border-radius:14px;padding:12px 8px}
.vgp-tramos span{display:block;font-size:.8rem;color:var(--tx3);margin-bottom:4px}
.vgp-tramos b{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--acento);letter-spacing:-.03em}
.vgp-nota{margin:clamp(14px,1.8vw,18px) auto 0;max-width:62ch;text-align:center;
  font-size:.88rem;line-height:1.5;color:var(--tx3)}
.vgp-nota b{color:var(--tx)}
.vg-precio .acciones{margin-top:clamp(14px,1.8vw,18px)}
@media(max-width:860px){.vgp-tramos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.vgp-tramos{grid-template-columns:1fr}}
/* En escritorio la tarjeta «Siempre con el local y la fecha» sobra: al lado del
   cartel y de las cuatro fichas es una quinta cosa que leer, y lo que dice ya
   lo demuestran las propias tarjetas. Se queda SÓLO en pantalla estrecha, que
   es donde el cartel se recorta y hace falta algo que lo remate.
   ⚠ 1081 px y no otro número: es el mismo corte en el que `.vg-rejilla` pasa a
   una columna. Si se cambia uno hay que cambiar el otro. */
@media(min-width:1081px){
  .vg-pie{display:none}
}

@media(min-width:1081px){
  .vg-rejilla{align-items:stretch}
  .vg-lado{height:100%}
  .vg-panel{height:100%;object-fit:cover;object-position:50% 22%}
}

/* ── La banda de precio, según la maqueta ─────────────────────────────────── */
.vg-precio{position:relative;margin-top:clamp(14px,1.6vw,20px);border-radius:26px;
  overflow:hidden;background:url("img/pr-fondo-140a9625.webp") center/cover no-repeat;
  border:1px solid rgba(255,255,255,.9)}
.prb-in{position:relative;z-index:1;padding:clamp(24px,3vw,40px) clamp(18px,3vw,44px);
  text-align:center}
.prb-pil{display:inline-block;margin:0 0 14px;padding:7px 18px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento)}
.prb-t{margin:0;font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.04em;
  color:var(--tx)}
/* El subrayado del titular se dibuja, no se escribe: un `border-bottom` seguiría
   al bloque entero y aquí sólo va bajo las dos últimas palabras. */
.prb-t em{font-style:normal;color:var(--acento);
  background:linear-gradient(var(--acento),var(--acento)) 0 92%/100% 3px no-repeat;
  padding-bottom:3px;border-radius:2px}
.prb-sub{margin:12px 0 clamp(20px,2.4vw,28px);font-size:clamp(.9rem,1.7vw,1rem);color:var(--tx3)}

.prb-tramos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(9px,1vw,13px);
  grid-template-columns:repeat(5,1fr)}
.prb-tramos a{display:block;text-decoration:none;background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.95);border-radius:18px;padding:13px 14px;
  text-align:left;box-shadow:0 6px 18px -14px rgba(52,36,120,.6);
  transition:transform .16s,box-shadow .16s}
.prb-tramos a:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(52,36,120,.7)}
.prt-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prt-ico{flex:none;width:30px;height:30px}
.prt-ico img,.prt-fl img,.prb-i img{width:100%;height:100%;object-fit:contain;display:block}
.prt-eti{flex:1;min-width:0;font-size:.79rem;color:var(--tx3);line-height:1.2}
.prt-fl{flex:none;width:22px;height:22px}
.prb-tramos b{font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--acento);letter-spacing:-.03em}

.prb-nota-tx{display:flex;align-items:center;gap:11px;margin:clamp(18px,2.2vw,24px) auto 0;
  max-width:62ch;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  border-radius:16px;padding:12px 16px;text-align:left;
  font-size:.87rem;line-height:1.45;color:var(--tx3)}
.prb-nota-tx b{color:var(--tx)}
.prb-i{flex:none;width:28px;height:28px}
.vg-precio .acciones{margin-top:clamp(18px,2.2vw,24px)}

@media(max-width:460px){.prb-tramos{grid-template-columns:1fr}}
/* ── La banda de precio en vertical (maqueta «vista movil») ───────────────────
   No es la de escritorio encogida: cambia la pieza de fondo (la apaisada
   estirada casi al doble de alto deforma las ondas) y los tramos pasan de
   cuadrícula a FILA —icono, etiqueta y precio apilados, chevron al final—, que
   es como se leen de un vistazo con el pulgar. Las frases manuscritas se
   quedan: abajo del todo sí caben, y ahí rematan. */
@media(max-width:1000px){
  .vg-precio{background-image:url("img/pr-fondo-movil-2d41afb8.webp")}
  .prb-tramos{grid-template-columns:1fr;gap:10px}
  .prb-tramos a{display:flex;align-items:center;gap:13px;padding:12px 14px}
  .prt-cab{display:contents}                        /* el icono y la etiqueta suben a la fila */
  .prt-ico{width:44px;height:44px;order:1}
  .prt-eti{order:2;flex:1;font-size:.86rem}
  .prt-fl{order:4;width:30px;height:30px}
  /* ⚠ El precio va con `order:3` y no detrás del chevron: en la maqueta queda
     bajo la etiqueta y la flecha cierra la fila. Sin `order` el <b> es el
     último hijo y se iría al final. */
  .prb-tramos b{order:3;flex-basis:100%;margin-left:57px;margin-top:-4px}
}
/* `display:contents` no lo entiende todo el mundo; si falla, la fila se ve como
   una cuadrícula normal en vez de rota. */
@supports not (display:contents){
  @media(max-width:1000px){
    .prt-cab{display:flex;flex:1}
    .prb-tramos b{margin-left:0}
  }
}
/* ── Dos arreglos de la banda en vertical ──────────────────────────────────
   1. El texto caía ENCIMA de la tienda y la gráfica: en la pieza vertical esos
      dos dibujos ocupan la franja de arriba, justo donde iba la pastilla y el
      titular. Se baja el contenido hasta despejarlos. En la maqueta el fondo
      respira por arriba y el texto empieza por debajo.
   2. La etiqueta se partía en cuatro líneas («1 / – / 5 / locales»). El precio
      lleva `flex-basis:100%` para caer a su propia línea, pero sin
      `flex-wrap:wrap` en el contenedor eso no parte nada: los cuatro hijos se
      apretaban en una fila y quien cedía era la etiqueta. */
@media(max-width:1000px){
  .prb-in{padding-top:clamp(104px,26vw,168px)}
  .prb-tramos a{flex-wrap:wrap}
  .prt-eti{flex:1 1 auto;min-width:0}
}

/* ── La fila de cada tramo, en REJILLA y no en flex ────────────────────────
   Con `flex-wrap` la etiqueta cabía en una línea y el precio bajaba, pero el
   chevron bajaba CON ÉL y acababa suelto debajo. Una fila con dos alturas y
   dos elementos que la abrazan por los lados es una rejilla, no un flex: con
   áreas, el icono y la flecha ocupan las dos filas y el texto se apila en
   medio. Y se van de paso los `order`, el `flex-basis` y el margen a ojo que
   hacían falta para simularlo. */
@media(max-width:1000px){
  .prb-tramos a{display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"ico eti fl" "ico precio fl";
    align-items:center;gap:1px 13px;flex-wrap:nowrap}
  .prt-ico{grid-area:ico}
  .prt-eti{grid-area:eti;align-self:end}
  .prt-fl{grid-area:fl}
  .prb-tramos b{grid-area:precio;align-self:start;margin:0;flex-basis:auto}
  /* El titular necesita despejar del todo la tienda y la gráfica del fondo. */
  .prb-in{padding-top:clamp(122px,30vw,190px)}
}

/* ── La app en móvil: el cartel entero, sin el muro de borroso ─────────────
   Antes se recortaba la vitrina a media pantalla para que el contenido borroso
   no fuera un muro de 2.000 px; pero ese tope también recortaba el CARTEL, y
   por eso había que esconder la ilustración. Con el velo puesto, en vertical,
   el borroso no aporta nada —no se distingue lo que hay debajo— así que se
   quita del todo y manda el cartel: sin tope, sin recorte y con su ilustración.
   Al destapar (`data-velado` fuera) vuelve todo, que es cuando sí hay algo que
   mirar. */
@media(max-width:900px){
  .app-vitrina[data-velado="1"]{max-height:none;overflow:visible}
  .app-vitrina[data-velado="1"] > .app-3{display:none}
  /* En flujo, no absoluto: ahora el cartel ES la sección y su alto manda. */
  .app-vitrina[data-velado="1"] .app-velo{position:relative;inset:auto;padding:0}
  .avc-fig{display:block;max-width:min(100%,420px);margin-inline:auto}
}

/* ── Visibilidad ──────────────────────────────────────────────────────────── */
.seo-rejilla{list-style:none;margin:clamp(26px,3.2vw,38px) auto 0;padding:0;max-width:68rem;
  display:grid;gap:clamp(11px,1.3vw,16px);grid-template-columns:repeat(3,1fr)}
.seo-rejilla a{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"ico tit fl" "ico des fl";
  align-items:center;gap:2px 13px;text-decoration:none;
  background:var(--card);border:1px solid var(--linea);border-radius:18px;
  padding:16px 16px;box-shadow:0 1px 2px rgba(16,19,34,.04);
  transition:border-color .16s,box-shadow .16s,transform .16s}
.seo-rejilla a:hover{border-color:var(--linea2);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(52,36,120,.5)}
.seo-ico{grid-area:ico;width:54px;height:54px}
.seo-ico img{width:100%;height:100%;object-fit:contain;display:block}
.seo-rejilla b{grid-area:tit;align-self:end;color:var(--tx);font-size:.98rem;letter-spacing:-.01em}
.seo-d{grid-area:des;align-self:start;font-size:.85rem;line-height:1.4;color:var(--tx3)}
.seo-fl{grid-area:fl;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg2);color:var(--md);font-size:1.05rem;line-height:1}
.seo-rejilla a:hover .seo-fl{background:var(--acento);color:#fff}
@media(max-width:1080px){.seo-rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.seo-rejilla{grid-template-columns:1fr}}
/* La frase de entrada de Visibilidad: va más grande que la explicación que
   viene detrás, porque es la que tiene que frenar al que baja deprisa. */
#visibilidad .seo-lead{margin:clamp(12px,1.6vw,18px) auto 0;max-width:46ch;
  font-size:clamp(1rem,1.9vw,1.15rem);line-height:1.45;color:var(--tx2)}
#visibilidad .seo-lead b{color:var(--tx)}
#visibilidad .entrada{margin-top:10px}

/* Las dos preguntas de ejemplo de Lupa. Van como PASTILLAS y no como texto
   corrido: así se leen como algo que se escribe, no como una frase más del
   párrafo — que es justo lo que hay que entender de esa pantalla. */
#lupa .lupa-pide{margin:clamp(14px,1.8vw,20px) 0 0;font-size:clamp(.95rem,1.7vw,1.05rem);
  color:var(--tx2)}
#lupa .lupa-ejem{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:9px;justify-content:center}
#lupa .lupa-ejem li{background:var(--card);border:1px solid var(--linea2);
  border-radius:999px;padding:9px 17px;font-size:clamp(.88rem,1.6vw,1rem);
  font-weight:600;color:var(--tx);box-shadow:0 1px 2px rgba(16,19,34,.05)}
#lupa .entrada{margin-top:clamp(14px,1.8vw,18px)}

/* Migas de pan de las landings (la home no las lleva: no tiene nivel superior). */
.miga{margin:0 0 clamp(14px,2vw,22px);font-size:.84rem;color:var(--tx3);text-align:center}
.miga a{color:var(--acento);text-decoration:none}
.miga a:hover{text-decoration:underline}
.miga span[aria-hidden]{margin:0 6px;opacity:.6}
/* En estas páginas la rejilla se usa sin enlace: las tarjetas informan, no llevan. */
.seo-rejilla > li:not(:has(a)){display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ico tit" "ico des";align-items:center;gap:2px 13px;
  background:var(--card);border:1px solid var(--linea);border-radius:18px;padding:16px;
  box-shadow:0 1px 2px rgba(16,19,34,.04)}
.seo-rejilla > li:not(:has(a)) > b{grid-area:tit;align-self:end;color:var(--tx);font-size:.98rem}
.seo-rejilla > li:not(:has(a)) > .seo-d{grid-area:des;align-self:start}
.seo-rejilla > li:not(:has(a)) > .seo-ico{grid-area:ico}
#funciones .seo-rejilla > li,#preguntas .faq{text-align:left}

/* ═══ Los cuatro ejes de la portada, con icono — SÓLO EN EL TELÉFONO ═════════
   17-sep-2026, pedido de Ruben con la maqueta delante.

   ⚠ Va AL FINAL del fichero a propósito: la regla que manda hoy sobre
   `.port-chips` es la de «Portada: claim y ejes» (más abajo que la primera, con
   las pastillas de `border-radius:999px`), así que cualquier cosa escrita arriba
   pierde. Aquí no hace falta pelear por especificidad: basta con ir después.

   En el escritorio NO se ve el icono: ahí los cuatro ejes son cuatro pastillas
   de texto al lado de un titular de 4 rem, y con icono se convierten en cuatro
   botones que compiten con «Empezar ahora». En el teléfono es al revés — el
   titular ya ha terminado y la fila queda sola—, y el icono es lo que hace que
   se lean de un vistazo. */
.pc-ico{display:none}

@media (max-width:760px){
  /* Rejilla de cuatro columnas iguales y no `flex-wrap`: así las cuatro miden
     lo mismo —«Operaciones» es el doble de largo que «Clientes»— y ninguna se
     descuelga sola a una segunda línea. */
  .port-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    margin:clamp(22px,5vw,30px) 0 26px}
  .port-chips li{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:9px;padding:13px 4px 11px;border-radius:17px;
    text-align:center;white-space:nowrap;
    /* `clamp` con vw: a 390 px el rótulo cae a ~10 px y «Operaciones» entra en
       UNA línea. Con un tamaño fijo se partía en «Operacione / s». */
    font-size:clamp(.6rem,2.55vw,.72rem);font-weight:600;line-height:1.15;
    background:rgba(255,255,255,.82);border-color:#fff;
    box-shadow:0 6px 18px -12px rgba(60,40,120,.45)}
  .port-chips .pc-ico{display:grid;place-items:center;width:28px;height:28px;
    flex:none;color:var(--acento)}
  .port-chips .pc-ico svg{width:27px;height:27px}
  .port-chips .pc-tx{display:block;min-width:0}
}
/* ⚠ Por debajo de 360 px, DOS columnas. Con cuatro, la fila pide 330 px de
   mínimo —«Operaciones» no parte— y en una pantalla de 320 el navegador
   responde ENCOGIENDO la página entera (mide 371 de documento en 320 de
   ventana): todo sale pequeño y con arrastre lateral. Medido con el auditor. */
@media (max-width:359px){
  .port-chips{grid-template-columns:repeat(2,1fr);gap:8px}
  .port-chips li{font-size:.76rem;padding:12px 6px 11px}
}

/* ── Las chispas del claim de portada (17-sep-2026, pedido de Ruben) ─────────
   El icono va SÓLO en el teléfono, por lo mismo que los de los cuatro ejes: en
   el escritorio esa píldora vive pegada a un titular de 4 rem y con el icono
   pesa más de lo que dice. Y `en un solo lugar.` en negrita, que es lo que
   remata la frase en la maqueta. */
.pe-chispas{display:none}
.port-eti .pe-tx b{font-weight:700;color:var(--acento-tx)}

@media (max-width:760px){
  .port-eti{display:flex;align-items:center;gap:10px;text-align:left}
  .port-eti .pe-chispas{display:grid;place-items:center;flex:none;
    width:22px;height:22px;color:var(--acento-tr)}
  .port-eti .pe-chispas svg{width:22px;height:22px}
  .port-eti .pe-tx{min-width:0}
}

/* ── La cabecera del teléfono: dos píldoras, no una barra ────────────────────
   17-sep-2026, con la maqueta de Ruben delante. Hasta hoy el logotipo y el
   botón del menú viajaban DENTRO de una sola barra blanca de ancho completo;
   en la maqueta son dos pastillas sueltas sobre el lila, y el logotipo es
   bastante más grande.

   ⚠ La barra la toca también el JS (`barra-reactiva` le cambia el acolchado y
   la sombra al bajar). Por eso aquí se apaga su fondo y su sombra en vez de
   intentar ajustarlos: lo que pinta ahora son las dos pastillas de dentro, y
   así da igual lo que el guion le ponga a la de fuera. Sólo en el teléfono: en
   el escritorio la barra sigue siendo una, con su menú dentro. */
@media (max-width:760px){
  /* ⚠ `:not(.abierto)` — SIN ESTO SE ROMPE EL MENÚ. El panel desplegable se
     pinta con el fondo de la propia barra (`.barra.abierto{background:var(--card)}`,
     más arriba), así que apagarle el fondo a `.barra` a secas deja el menú
     TRANSPARENTE encima del titular. Y el `!important` hace falta porque el
     fondo de la barra lo pone una animación (`barra-compacta`) y una animación
     gana a una declaración normal. Los dos detalles juntos, o ninguno. */
  .barra:not(.abierto){background:none!important;border-color:transparent!important;
    box-shadow:none!important;padding:0!important;backdrop-filter:none!important;
    gap:10px}
  .barra .marca{flex:none;padding:9px 17px;border-radius:999px;
    background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 8px 26px -14px rgba(60,40,120,.5)}
  .barra .marca img{height:38px;width:auto}
  .barra-ham{margin-left:auto;padding:13px 22px;border-radius:999px;
    font-size:1rem;font-weight:700;
    background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.95);
    box-shadow:0 8px 26px -14px rgba(60,40,120,.5)}
  .barra-ham span{margin-right:4px}
  /* Con el menú abierto las dos pastillas viven DENTRO del panel blanco: sin
     quitarles la sombra se ven dos cajas flotando sobre otra caja. */
  .barra.abierto .marca,.barra.abierto .barra-ham{box-shadow:none;border-color:var(--linea)}
  .barra.abierto .marca{background:none;padding-left:4px}
}

/* ── Y en el teléfono, el claim OCUPA MENOS (17-sep, Ruben: «se come demasiado
   espacio») ─────────────────────────────────────────────────────────────────
   Dos líneas de casi 1 rem con 16 px de acolchado arriba y abajo son 90 px de
   pantalla antes de que empiece el titular, que es lo que de verdad vende.
   Aquí baja a ~52: letra más pequeña, líneas juntas y la pastilla ceñida. No se
   quita —dice en una frase lo que es el producto— pero deja de ser un bloque. */
@media (max-width:760px){
  .port-eti{margin-bottom:14px;padding:9px 15px 9px 13px;gap:8px;
    font-size:.78rem;line-height:1.35;text-wrap:balance}
  .port-eti .pe-chispas,.port-eti .pe-chispas svg{width:17px;height:17px}

  /* Los dos botones del hero, del MISMO ancho y a lo ancho de la columna: en la
     maqueta van así, y sueltos y centrados se ven descolocados —uno más largo
     que el otro— porque el rótulo del segundo es el doble de largo. */
  .portada .acciones{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .portada .acciones .boton{width:100%;justify-content:center}
}

/* ── El titular, con brillo de marca (17-sep, Ruben: «ponle algún efecto») ───
   La mitad violeta pasa de color plano a un degradado de los DOS colores de la
   casa (#6564F4 y #9148FB) que se desplaza muy despacio, como un reflejo.

   ⚠ Dentro de `@supports`: `color:transparent` sin `background-clip:text` deja
   el titular INVISIBLE. Con la guarda, un navegador que no lo soporte se queda
   con el violeta sólido de siempre y no se entera de nada.
   Y 9 s lineales, no 2: esto tiene que dar la sensación de que la luz se mueve,
   no de que parpadea un anuncio. Se apaga con `prefers-reduced-motion`. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .portada h1 em{
    background-image:linear-gradient(100deg,#6564F4 0%,#9148FB 36%,#7a5cf8 58%,#6564F4 100%);
    background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:h1-reflejo 9s linear infinite}
  @keyframes h1-reflejo{to{background-position:220% 0}}
  @media (prefers-reduced-motion:reduce){
    .portada h1 em{animation:none;background-position:30% 0}}
}

/* ═══ Tres efectos, uno por titular (17-sep, Ruben: «que destaquen, y que no
   sean todos iguales») ══════════════════════════════════════════════════════
   El hero ya tiene el suyo (el reflejo que se desplaza). Estos tres son
   distintos entre sí a propósito: repetir el mismo truco cuatro veces lo
   convierte en el color de los `<em>`, que es de lo que veníamos.

   Los tres respetan el contraste: el degradado no baja de #5849e8 (5,75:1 sobre
   blanco) y el rotulador deja el texto en su color de siempre. */

/* 1 · «una decisión de negocio» — TRAZO. Un subrayado de rotulador que va de un
   violeta al otro, pegado a la línea base y por DEBAJO del texto. `clone` para
   que, si parte en dos líneas, se subrayen las dos. */
.ef-trazo{font-style:normal;color:var(--acento);
  background-image:linear-gradient(90deg,rgba(101,100,244,.30),rgba(145,72,251,.30));
  background-repeat:no-repeat;background-size:100% .30em;background-position:0 88%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .06em}

/* 2 · «con la misma visión» — DEGRADADO EN DIAGONAL, quieto y con un halo muy
   suave detrás. Nada de animación: ésta es una sección de datos y una letra que
   se mueve al lado de una gráfica distrae de la gráfica. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ef-degradado{font-style:normal;
    background-image:linear-gradient(125deg,#5849e8 0%,#7b3ff2 55%,#5849e8 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 6px 18px rgba(101,100,244,.28))}
}

/* 3 · «Y cuánto negocio genera.» — ROTULADOR. El color va DETRÁS y el texto se
   queda oscuro: es el que mejor aguanta al final de la página, donde ya hay
   mucho violeta y otro texto de color se perdería. */
.ef-rotulador{font-style:normal;color:var(--tx);
  background-image:linear-gradient(105deg,rgba(145,72,251,.18),rgba(101,100,244,.22));
  background-repeat:no-repeat;background-size:100% 78%;background-position:0 88%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .18em;border-radius:6px}

/* ── Y en el teléfono, que además APAREZCA (17-sep, Ruben) ───────────────────
   Arriba (L537) se anuló la opacidad del revelado a propósito: entrando de 0 a
   1 en 700 ms, la letra pasa medio segundo con un contraste de 1,1:1. Eso sigue
   valiendo… para el escritorio.

   En el móvil se recupera el «va apareciendo» sin volver al problema: no entra
   desde 0 sino desde **.42** —ahí el texto ya se lee— y tarda **350 ms** en vez
   de 700. El movimiento en Y sigue siendo el de siempre.
   Con `prefers-reduced-motion` no se toca nada: se queda opaco y quieto. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  [data-lui~="revelar"]{opacity:.42 !important;
    transition:opacity .35s ease-out,
               transform .7s cubic-bezier(.16,1,.3,1) !important;
    will-change:opacity,transform}
  [data-lui~="revelar"].lui-dentro{opacity:1 !important}
}

/* ── La píldora «Ahora mismo, funcionando», sobre los pies del avatar ────────
   17-sep, Ruben, con el sitio dibujado a mano. La imagen de la portada termina
   en un recorte recto justo debajo de los zapatos y se veía el canto; subiendo
   la pastilla encima, el canto queda tapado y de paso la cifra se ata a la
   escena en vez de flotar sola en la franja de abajo.
   Sólo en el teléfono: en el escritorio la imagen no se recorta ahí. */
@media (max-width:760px){
  /* ⚠ La pastilla tiene que quedar POR ENCIMA de la imagen, y la imagen vive en
     la sección anterior: con `z-index` sólo en la pastilla, los zapatos le
     pasaban por delante y el texto salía partido. Se sube la SECCIÓN entera,
     que es la que compite con la de arriba. */
  .cinta{padding-top:0;position:relative;z-index:6}
  .cifras-eti{margin-top:-62px;padding-top:0;position:relative;z-index:7}
}

/* ── Lo importante de los subtítulos, subrayado (17-sep, Ruben) ──────────────
   Los `<b>` de las entradillas llevaban sólo negrita, y con párrafos de tres
   líneas en gris eso casi no se ve. Se les pone el mismo trazo que al titular
   de «El alcance», pero MÁS FINO (.14em contra .30em): ahí es un rotulador que
   remata un titular de 3 rem; aquí, dentro de un párrafo, un trazo grueso lo
   convierte en un cartel.

   Acotado a los párrafos de APOYO —la entradilla de la portada, el subtítulo de
   sección y el pie de cada cifra—. Subrayar todos los `<b>` de la página sería
   subrayar media web, que es lo mismo que no subrayar nada. */
/* Sólo los SUBTÍTULOS (17-sep, Ruben). Fuera los pies de las cifras
   (`.cifras-tira p b`): ahí la negrita remata un dato, no es un subtítulo, y
   subrayada convertía la franja de cifras en una lista de enlaces. */
.entrada b,
.al-sub b,
.cierre-tx .entrada b{
  background-image:linear-gradient(90deg,rgba(101,100,244,.34),rgba(145,72,251,.34));
  background-repeat:no-repeat;
  background-size:100% .14em;
  background-position:0 92%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.02em;
}

/* ═══ Botones flotantes: soporte con IA y volver arriba (17-sep-2026) ════════
   Abajo a la derecha, por encima de todo. Dos cosas que no son opcionales:
   · el `bottom` lleva `env(safe-area-inset-bottom)` o en un iPhone quedan
     debajo de la barra del navegador;
   · y `z-index:60`, por debajo del banner de cookies (que tiene que poder
     taparlos) y por encima del resto. */
.fab{position:fixed;right:clamp(14px,3vw,26px);z-index:60;
  bottom:calc(env(safe-area-inset-bottom) + clamp(14px,3vw,26px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-bt{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.9);border-radius:999px;font:inherit;
  box-shadow:0 10px 30px -12px rgba(60,40,120,.55);transition:transform .14s ease,box-shadow .2s}
.fab-bt:active{transform:translateY(1px)}
.fab-arriba{width:46px;height:46px;justify-content:center;padding:0;
  background:rgba(255,255,255,.92);color:var(--acento);backdrop-filter:blur(8px)}
.fab-arriba svg{width:20px;height:20px}
.fab-ia{padding:13px 20px;background:var(--acento-relleno);color:#fff;
  font-size:.95rem;font-weight:700;border-color:transparent}
.fab-ia svg{width:20px;height:20px}
@media (max-width:560px){
  /* En el teléfono, sólo el icono: la palabra «Soporte» se come el ancho útil
     justo encima del contenido. */
  .fab-ia span{display:none}
  .fab-ia{width:54px;height:54px;justify-content:center;padding:0}
}

/* ── El panel del chat ── */
.sop{position:fixed;z-index:61;display:flex;flex-direction:column;overflow:hidden;
  right:clamp(14px,3vw,26px);bottom:calc(env(safe-area-inset-bottom) + 84px);
  width:min(380px,calc(100vw - 28px));max-height:min(74vh,560px);
  background:var(--card);border:1px solid var(--linea);border-radius:20px;
  box-shadow:0 30px 70px -28px rgba(30,20,80,.55)}
.sop[hidden]{display:none}
.sop-cab{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--linea);background:linear-gradient(180deg,#f7f5ff,var(--card))}
.sop-t{display:flex;flex-direction:column;min-width:0}
.sop-t b{font-size:.95rem;color:var(--tx)}
.sop-t i{font-style:normal;font-size:.76rem;color:var(--tx3)}
.sop-x{margin-left:auto;width:34px;height:34px;flex:none;border:0;border-radius:10px;
  background:none;color:var(--tx3);font-size:1rem;cursor:pointer}
.sop-x:hover{background:var(--bg2);color:var(--tx)}
.sop-hilo{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sop-msg{margin:0;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.5;
  max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.sop-ia{background:var(--bg2);color:var(--tx);border-bottom-left-radius:5px;align-self:flex-start}
.sop-yo{background:var(--acento-relleno);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.sop-esperando{color:var(--tx3);letter-spacing:.2em}
.sop-suge{display:flex;flex-wrap:wrap;gap:7px}
.sop-suge button{border:1px solid var(--linea2);background:var(--card);color:var(--acento-tx);
  border-radius:999px;padding:8px 13px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.sop-suge button:hover{background:var(--bg2)}
.sop-pie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--linea)}
.sop-pie input{flex:1;min-width:0;border:1px solid var(--linea);background:var(--bg);
  border-radius:13px;padding:0 14px;height:46px;font:inherit;font-size:16px;color:var(--tx)}
.sop-pie input:focus{outline:none;border-color:var(--acento-tr);
  box-shadow:0 0 0 3px rgba(101,100,244,.14);background:var(--card)}
.sop-pie button{flex:none;width:46px;height:46px;border:0;border-radius:13px;cursor:pointer;
  background:var(--acento-relleno);color:#fff;display:grid;place-items:center}
.sop-pie button svg{width:20px;height:20px}
.sop-nota{margin:0;padding:0 16px 13px;font-size:.72rem;line-height:1.45;color:var(--tx3)}
.sop-nota a{color:var(--acento-tx)}
/* Con el chat abierto, el botón de subir estorba: cae justo detrás del panel y
   el toque lo recibe la nota de abajo («Respuestas de una IA…»). Medido con un
   toque real por CDP: «TAPADO por P.sop-nota». */
body.sop-abierto .fab-arriba{display:none}

/* ═══ El chat de Lupa, con cara (17-sep, Ruben: «más chulo, estilo profile
   manager, con el avatar que ya tenemos») ═══════════════════════════════════
   Se reaprovecha `avatar-fijo.webp`, el mismo personaje de la portada: recortado
   en redondo por la cara (`object-position` arriba, que la imagen es de cuerpo
   entero) y sobre el lila de la casa. */
.sop-cab{gap:11px;padding:13px 14px}
.sop-ava{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,#ece7fe,#dcd3fd);border:2px solid #fff;
  box-shadow:0 4px 12px -4px rgba(60,40,120,.45)}
.sop-ava img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block}
.sop-t b{font-size:1rem;letter-spacing:-.01em}
.sop-t i{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--tx3)}
/* El punto de «está disponible». Late despacio; con reduced-motion se queda
   quieto, que sigue diciendo lo mismo. */
.sop-luz{width:7px;height:7px;border-radius:50%;background:#16a34a;flex:none;
  box-shadow:0 0 0 3px rgba(22,163,74,.16);animation:sop-late 2.4s ease-in-out infinite}
@keyframes sop-late{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sop-luz{animation:none}}

/* El hilo, sobre el lila claro; las burbujas de Lupa en blanco con borde para
   que se despeguen del fondo (antes eran gris sobre gris). */
.sop-hilo{background:linear-gradient(180deg,#faf9ff,#f4f2fc)}
.sop-ia{background:var(--card);border:1px solid var(--linea);color:var(--tx)}
.sop-yo{box-shadow:0 8px 18px -10px rgba(88,73,232,.8)}

/* Entrada del panel: sube y aparece. 180 ms — lo justo para que no salga de
   golpe sin hacer esperar a nadie. */
.sop:not([hidden]){animation:sop-entra .18s ease-out}
@keyframes sop-entra{from{opacity:0;transform:translateY(14px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.sop:not([hidden]){animation:none}}

/* Los tres puntos de «escribiendo», en vez de unos puntos suspensivos quietos. */
.sop-esperando{letter-spacing:normal;color:var(--tx3);font-size:1.2rem;line-height:1;
  padding:14px 16px;animation:sop-pensando 1.1s ease-in-out infinite}
@keyframes sop-pensando{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sop-esperando{animation:none}}

/* ── En el teléfono, hoja de abajo a pantalla casi completa ──────────────────
   Un panel de 380 px flotando en una pantalla de 402 deja 11 px de margen y se
   ve como una ventana mal puesta. Aquí se ancla abajo, a todo el ancho y con
   las esquinas de arriba redondeadas, que es como se comporta cualquier app. */
@media (max-width:560px){
  .sop{right:0;left:0;bottom:0;width:auto;max-height:82vh;
    border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0}
  .sop-hilo{padding:14px}
  body.sop-abierto .fab-ia{display:none}   /* el botón queda debajo del panel */
}
/* La burbuja del saludo venía del HTML con su sangría, y `pre-wrap` la respeta:
   se veía un renglón suelto en mitad de la frase. El HTML ya va en una línea;
   esto es el cinturón por si alguien vuelve a partirla al editar. */
.sop-hilo > .sop-ia:first-child{white-space:normal}

/* ── La barra, equilibrada (17-sep-2026) ──────────────────────────────────
   Estaba toda a la derecha: el logo solo a un lado, un hueco enorme en medio y
   ocho cosas apiñadas al otro, con «Entrar» pesando lo mismo que «Precios».
   Se separa en tres: marca · secciones centradas · acciones. Sólo en
   escritorio; el menú de móvil no se toca. */
@media (min-width:901px){
  /* `margin-right:auto` es lo único que hacía falta para centrar: el `nav` ya
     traía `margin-left:auto`, y con un solo auto se pegaba al lado. */
  .barra nav{margin-right:auto}
  /* Una línea fina antes de las acciones: sin ella, «Entrar» se lee como la
     séptima sección y no como lo que es. */
  .barra-entrar{border-left:1px solid var(--ln,rgba(20,20,43,.12));
    padding-left:18px;margin-left:18px;font-weight:650}
  /* El botón, un punto más contenido: llenaba casi la mitad del alto de la
     cápsula y arrastraba la vista fuera de la barra. */
  .barra .boton.chico{min-height:38px;padding:0 16px}
}