/* ============================================================
   Kipy — sitio público
   Identidad: Red Hi #FF304B · Purple Happy #2D005E · Oduda + Poppins
   ============================================================ */

/* ---------- tipografías ---------- */
@font-face{
  font-family:'Oduda';
  src:url('../fonts/Oduda-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  /* marca */
  --rojo:#FF304B;
  --morado:#2D005E;
  --negro:#1F1F1F;
  --blanco:#F6F6F6;
  --crema:#FBE3C2;

  /* degradado decorativo al 30% */
  --mor-30:#6C0E58;
  --rojo-30:#C02251;
  --g-morado:linear-gradient(120deg,#2D005E 0%,#6C0E58 100%);
  --g-rojo:linear-gradient(120deg,#C02251 0%,#FF304B 100%);

  /* texto — medidos contra sus fondos */
  --texto:#1F1F1F;            /* 15.1:1 sobre --blanco */
  --texto-2:#5A4A6E;          /*  7.4:1 sobre --blanco */
  --texto-3:#6F6180;          /*  5.2:1 sobre --blanco · 5.1:1 sobre el lila #F3EFF7 */
  --rojo-texto:#C02251;       /*  5.3:1 sobre --blanco — rojo para texto pequeño */
  --sobre-oscuro:#FFFFFF;     /* 15.3:1 sobre --morado */
  --sobre-oscuro-2:rgba(255,255,255,.76);

  /* superficies */
  --carta:#FFFFFF;
  --linea:rgba(45,0,94,.12);
  --linea-oscura:rgba(255,255,255,.16);
  --sombra:0 1px 2px rgba(31,0,60,.06), 0 12px 32px -12px rgba(31,0,60,.20);
  --sombra-alta:0 2px 4px rgba(31,0,60,.08), 0 28px 60px -20px rgba(31,0,60,.32);

  /* escala de espacio (múltiplos de 4) */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;

  --radio:18px;
  --radio-g:28px;
  --ancho:1200px;
  --gutter:clamp(20px,5vw,48px);

  --patron-max:.10;   /* el patrón nunca pasa del 10% */
  --patron-tam:90px;  /* 40% más pequeño que los 150px anteriores */

  --salida:cubic-bezier(.16,1,.3,1);
}

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

body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
ul,ol{margin:0;padding:0;list-style:none;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}

/* superficies del navegador */
::selection{background:var(--morado);color:#fff;}
:root{caret-color:var(--rojo);accent-color:var(--rojo);}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:6px;}
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:12px;height:12px;}
  ::-webkit-scrollbar-track{background:#EDE8F2;}
  ::-webkit-scrollbar-thumb{background:#B9ACC7;border-radius:99px;border:3px solid #EDE8F2;}
  ::-webkit-scrollbar-thumb:hover{background:var(--mor-30);}
}
html{scrollbar-color:#B9ACC7 #EDE8F2;}

/* ---------- utilidades ---------- */
.envoltura{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);}
.seccion{position:relative;padding-block:clamp(72px,10vw,128px);}
.medida{max-width:66ch;}
.cifra{font-variant-numeric:tabular-nums;}

.saltar{
  position:fixed;left:var(--e4);top:-100px;z-index:200;
  background:var(--morado);color:#fff;padding:12px 20px;border-radius:12px;
  font-weight:600;transition:top .18s var(--salida);
}
.saltar:focus-visible{top:var(--e4);}

/* ---------- display ---------- */
.display{
  font-family:'Oduda','Poppins',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.95;
}
.titulo-s{
  font-family:'Oduda','Poppins',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.006em;
  line-height:1.02;
  font-size:clamp(2rem,4.4vw,3.25rem);
  color:var(--morado);
}
.oscuro .titulo-s{color:#fff;}
.entrada{
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  line-height:1.62;
  color:var(--texto-2);
  max-width:60ch;
}
.oscuro .entrada{color:var(--sobre-oscuro-2);}

/* ---------- el patrón de marca ----------
   Nunca al 100%: máximo 10% de opacidad, y siempre con un degradado de
   transparente (izquierda) a sólido (derecha). Tile al 50% de su tamaño. */
.patron{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 45%,#000 100%);
}
.patron i{
  position:absolute;inset:0;display:block;
  opacity:var(--patron-max);
  background-color:#fff;
  -webkit-mask-image:url('../img/pattern-mask.png');
  mask-image:url('../img/pattern-mask.png');
  -webkit-mask-size:var(--patron-tam) auto;
  mask-size:var(--patron-tam) auto;
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;
}
.patron.rojo i{background-color:var(--morado);opacity:.09;}

/* el contenido siempre por encima del patrón */
.seccion > .envoltura{position:relative;z-index:1;}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:2px solid transparent;border-radius:999px;
  cursor:pointer;text-align:center;
  transition:transform .18s var(--salida),background-color .18s var(--salida),
             border-color .18s var(--salida),color .18s var(--salida),box-shadow .18s var(--salida);
}
.btn .ico{width:20px;height:20px;flex:none;}
.btn:active{transform:translateY(1px);}

/* Primario: rojo de marca. La etiqueta va a 19px/700 = texto grande,
   que con 3.30:1 cumple el 3:1 que pide WCAG para ese tamaño. */
.btn-rojo{
  background:var(--rojo);color:#fff;
  font-size:1.1875rem;font-weight:700;line-height:1;
  padding:19px 30px;
  box-shadow:0 2px 3px rgba(192,34,81,.24), 0 16px 32px -14px rgba(255,48,75,.70);
}
.btn-rojo:hover{background:#F51E3B;box-shadow:0 3px 5px rgba(192,34,81,.28), 0 22px 40px -14px rgba(255,48,75,.78);}

/* Secundario sobre fondo oscuro */
.btn-linea{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.42);
  font-size:1.0625rem;font-weight:600;line-height:1;padding:19px 28px;
}
.btn-linea:hover{border-color:#fff;background:rgba(255,255,255,.10);}

/* Secundario sobre fondo claro */
.btn-morado{
  background:var(--morado);color:#fff;
  font-size:1.0625rem;font-weight:600;line-height:1;padding:19px 28px;
}
.btn-morado:hover{background:#3D0A73;}

/* Compacto (barra de navegación) — morado, no rojo: a 15px el rojo no da contraste */
.btn-min{
  background:var(--morado);color:#fff;
  font-size:.9375rem;font-weight:600;line-height:1;padding:13px 22px;
}
.btn-min:hover{background:#3D0A73;}

.enlace-f{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--rojo-texto);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
  text-decoration-color:rgba(192,34,81,.35);
  transition:text-decoration-color .18s var(--salida);
}
.enlace-f:hover{text-decoration-color:currentColor;}
.enlace-f .ico{width:17px;height:17px;transition:transform .18s var(--salida);}
.enlace-f:hover .ico{transform:translateX(3px);}

/* ============================================================
   BARRA DE NAVEGACIÓN
   ============================================================ */
.barra{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .25s var(--salida),box-shadow .25s var(--salida),border-color .25s var(--salida);
  border-bottom:1px solid transparent;
}
.barra-in{
  display:flex;align-items:center;gap:var(--e5);
  height:78px;
  width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter);
}
.marca{display:flex;align-items:center;flex:none;}
.marca img{width:104px;height:auto;}
.marca .m-claro{display:block;}
.marca .m-oscuro{display:none;}

.menu{display:flex;align-items:center;gap:var(--e5);margin-left:auto;}
.menu a:not(.btn){
  font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.86);
  padding:8px 2px;position:relative;
  transition:color .18s var(--salida);
}
.menu a:not(.btn)::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--rojo);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--salida);
}
.menu a:not(.btn):hover{color:#fff;}
.menu a:not(.btn):hover::after,.menu a:not(.btn)[aria-current="true"]::after{transform:scaleX(1);}

/* Sobre el hero el CTA va en blanco; al pegarse la barra vuelve a morado.
   El hover se declara por estado: si no, el rojo pequeño cae sobre el morado. */
.barra .btn-min{background:#fff;color:var(--morado);}
.barra .btn-min:hover{background:#fff;color:var(--rojo-texto);box-shadow:0 6px 18px -6px rgba(0,0,0,.35);}
.barra.pegada .btn-min:hover,
.legal .barra .btn-min:hover{background:#3D0A73;color:#fff;box-shadow:none;}

/* estado pegado */
.barra.pegada{
  background:rgba(246,246,246,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--linea);
  box-shadow:0 1px 20px -8px rgba(31,0,60,.25);
}
.barra.pegada .marca .m-claro{display:none;}
.barra.pegada .marca .m-oscuro{display:block;}
.barra.pegada .menu a:not(.btn){color:var(--texto-2);}
.barra.pegada .menu a:not(.btn):hover{color:var(--morado);}
.barra.pegada .btn-min{background:var(--morado);color:#fff;}
.barra.pegada .btn-min:hover{background:#3D0A73;}

.hamburguesa{
  display:none;margin-left:auto;
  width:46px;height:46px;border:0;border-radius:12px;background:rgba(255,255,255,.12);
  align-items:center;justify-content:center;cursor:pointer;color:#fff;
}
.hamburguesa .ico{width:24px;height:24px;}
.barra.pegada .hamburguesa{background:rgba(45,0,94,.08);color:var(--morado);}

/* ============================================================
   HERO · slider de funciones
   Tres capturas reales de la app dentro de un mismo marco.
   El texto y la pantalla cambian juntos; el alto no se mueve.
   ============================================================ */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.hero{
  position:relative;overflow:hidden;
  background:var(--g-morado);
  color:#fff;
  padding-top:clamp(108px,11vw,142px);
  padding-bottom:clamp(56px,6vw,84px);
  --dwell:6000ms;
}
.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-6%;top:-18%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(251,227,194,.16) 0%,rgba(251,227,194,0) 62%);
}

/* ---------- burbujas ----------
   Cuatro datos reales del producto flotando alrededor del teléfono.
   Van dentro de .hero-fig, así que se desbordan hacia los costados y
   ocupan el aire sin tocar la columna de texto.

   Dos capas: el <li> hace el flotar, el <span> la entrada. Si las dos
   transformaciones vivieran en el mismo elemento se pisarían. */
.burbujas{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* lo que sobra a cada lado del contenedor: las burbujas de la derecha
     tiran hacia afuera todo lo que puedan sin salirse del lienzo */
  --aire:max(0px, calc((100vw - var(--ancho)) / 2));
}
.hero.vivo .grupo[hidden]{display:block;}
.hero.vivo .grupo{
  opacity:0;visibility:hidden;
  transition:opacity .38s var(--salida),visibility 0s .38s;
}
.hero.vivo .grupo.act{
  opacity:1;visibility:visible;
  transition:opacity .38s var(--salida),visibility 0s 0s;
}
.grupo{position:absolute;inset:0;}
.burbuja{position:absolute;}
.burbuja > span{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:10px 16px;border-radius:999px;
  background:#fff;color:var(--morado);
  font-size:.8438rem;font-weight:500;line-height:1;
  box-shadow:0 2px 4px rgba(12,0,26,.20), 0 16px 30px -14px rgba(12,0,26,.55);
}
.burbuja b{font-weight:700;color:var(--rojo-texto);}
.burbuja .ico{width:17px;height:17px;color:var(--rojo-texto);flex:none;}

.b1{top:2%;left:-5%;}
.b2{top:20%;right:max(calc(8px - var(--aire)), -21%);}
.b3{top:56%;left:-8%;}
.b4{top:82%;right:max(calc(8px - var(--aire)), -18%);}

@keyframes flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-13px);}
}
.hero.vivo .grupo.act .burbuja{animation:flota var(--t) ease-in-out var(--r) infinite;}
.b1{--t:7.2s;--r:-0.4s;}
.b2{--t:8.6s;--r:-2.1s;}
.b3{--t:9.4s;--r:-1.2s;}
.b4{--t:7.8s;--r:-3.0s;}
/* El mismo botón que pausa el slider detiene las burbujas. La regla lleva
   `.vivo` y `.grupo.act` a propósito: sin ellos pesa menos que la que
   declara la animación, y el atajo `animation` le reiniciaría el estado. */
.hero.vivo[data-pausado="1"] .grupo.act .burbuja{animation-play-state:paused;}

@keyframes asoma-burbuja{from{opacity:0;transform:translateY(12px) scale(.9);}to{opacity:1;transform:none;}}
.hero.vivo .grupo.act .burbuja > span{animation:asoma-burbuja .7s var(--salida) both;animation-delay:var(--e);}
.b1{--e:.62s;} .b2{--e:.74s;} .b3{--e:.86s;} .b4{--e:.98s;}

/* por debajo de esto no hay aire a los costados y se montarían sobre el texto */
@media (max-width:1240px){ .burbujas{display:none;} }



.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
}

/* ---------- mando: pestañas + pausa ---------- */
.mando{display:flex;align-items:center;gap:var(--e4);margin-bottom:var(--e6);}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;min-width:0;}
.pestana{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(255,255,255,.07);
  padding:9px 18px;cursor:pointer;
  font-size:.875rem;font-weight:600;line-height:1;
  color:rgba(255,255,255,.62);
  transition:color .22s var(--salida),background-color .22s var(--salida),border-color .22s var(--salida);
}
.pestana:hover{color:#fff;background:rgba(255,255,255,.13);}
.pestana[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);}
.pestana .et{position:relative;z-index:1;}
/* la barra dice cuánto falta para que cambie solo */
.pestana .pista{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.14);}
.pestana .pista i{display:block;height:100%;background:var(--rojo);transform:scaleX(0);transform-origin:left center;}
.pestana[aria-selected="true"] .pista i{animation:avance var(--dwell,6000ms) linear forwards;}
.hero[data-pausado="1"] .pestana .pista i{animation-play-state:paused;}
@keyframes avance{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.pausa{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:#fff;cursor:pointer;
  transition:background-color .2s var(--salida),border-color .2s var(--salida);
}
.pausa:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);}
.pausa .ico{width:15px;height:15px;}
.pausa .ico-play{display:none;}
.pausa[aria-pressed="true"] .ico-pausa{display:none;}
.pausa[aria-pressed="true"] .ico-play{display:block;}

/* ---------- paneles apilados: sin salto de alto ---------- */
.hero-paneles{display:grid;}
.hero-panel{grid-area:1/1;}
.hero.vivo .hero-panel[hidden]{display:block;pointer-events:none;}
.hero-panel h2{font-size:clamp(2.125rem,4.1vw,3.25rem);margin-bottom:var(--e5);}
.hero-panel .entrada{color:var(--sobre-oscuro-2);max-width:46ch;}

.hero.vivo .hero-panel{
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .42s var(--salida),transform .42s var(--salida),visibility 0s .42s;
}
.hero.vivo .hero-panel.act{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .42s var(--salida),transform .42s var(--salida),visibility 0s 0s;
}

.hero-acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e7);}

/* ---------- el teléfono ---------- */
.hero-fig{
  position:relative;display:flex;justify-content:center;
  perspective:1100px;
  --px:0;--py:0;
}
/* El personaje y el teléfono comparten suelo.

   Va a la IZQUIERDA y el mockup por delante: el teléfono que sostiene
   queda justo detrás del grande, así que no se ven dos teléfonos sino uno
   que parece estar sosteniendo él. No se puede espejar para resolverlo de
   otra forma: daría vuelta el isotipo de la sudadera.

   Cambia con la lámina, igual que la pantalla: Max, Nati, Max. Los tres
   se apilan en la misma caja y se funden; se alinean por la DERECHA, que
   es donde está la mano del teléfono en ambos personajes, y por el suelo.
   Nati es más ancha (pelo y brazo alzado) y ese sobrante crece hacia la
   izquierda, lejos del mockup. */
.escena{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;
}
.figuras{
  order:-1;
  position:relative;z-index:1;flex:none;
  width:min(54%,292px);aspect-ratio:620/1439;
  margin-right:-17%;margin-bottom:-3%;
}
.figura{
  position:absolute;bottom:0;right:0;
  height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 22px 34px rgba(12,0,26,.45));
}
/* La tercera pose no sostiene teléfono, así que no hay nada que esconder
   detrás del mockup: se separa para que no le tape el cuerpo. */
.figura[data-figura="2"]{right:22%;}
.hero.vivo .figura{
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);
  transition:opacity .5s var(--salida),transform .7s var(--salida),visibility 0s .5s;
}
.hero.vivo .figura.act{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--salida),transform .7s var(--salida),visibility 0s 0s;
}
.hero-fig::before{
  content:'';position:absolute;z-index:0;top:50%;left:50%;
  width:min(130%,560px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(255,48,75,.50) 0%,rgba(255,48,75,0) 66%);
  filter:blur(26px);
}
/* Las tres capturas vienen con el aparato dentro —marco, isla y botones—,
   así que aquí NO se dibuja ninguno: hacerlo daría dos teléfonos, uno
   metido en el otro. Lo que queda es la caja que las coloca y el
   paralaje. La proporción es la del lienzo común de las tres imágenes:
   si se cambian por otras, hay que rehacerla o el `contain` deja franjas. */
.telefono{
  position:relative;z-index:2;
  width:min(48%,268px);flex:none;
  aspect-ratio:748/1570;
  transform:
    translate3d(calc(var(--px) * 9px), calc(var(--py) * 9px), 0)
    rotateY(calc(var(--px) * 3deg))
    rotateX(calc(var(--py) * -3deg));
  transition:transform .5s var(--salida);
}
.pantallas{position:relative;width:100%;height:100%;}
.pantallas img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  /* la sombra sigue la silueta del aparato, no un rectángulo: por eso es
     `drop-shadow` sobre la imagen y no `box-shadow` sobre la caja */
  filter:drop-shadow(0 6px 12px rgba(14,0,30,.34)) drop-shadow(0 34px 56px rgba(14,0,30,.50));
}
.hero.vivo .pantallas img[hidden]{display:block;}
.hero.vivo .pantallas img{
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity .5s var(--salida),transform .7s var(--salida),visibility 0s .5s;
}
.hero.vivo .pantallas img.act{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--salida),transform .7s var(--salida),visibility 0s 0s;
}

/* ---------- entrada de la escena ---------- */
@keyframes sube{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes sube-tel{from{opacity:0;transform:translateY(34px) scale(.965);}to{opacity:1;transform:none;}}
/* la entrada solo corre si el slider arrancó: si no, no hay nada que ocultar */
.hero.vivo .mando{animation:sube .8s var(--salida) .05s both;}
.hero.vivo .hero-paneles{animation:sube .8s var(--salida) .14s both;}
.hero.vivo .hero-acciones{animation:sube .8s var(--salida) .23s both;}
.hero.vivo .hero-fig{animation:sube-tel .95s var(--salida) .1s both;}


/* ============================================================
   RAZONES · tira bajo el hero
   ============================================================ */
.razones{background:var(--blanco);padding-block:var(--e6);border-bottom:1px solid var(--linea);}
/* la primera razón es más larga: se le da su parte para que no parta en dos */
.razones ul{display:grid;grid-template-columns:1.32fr 1fr 1fr;gap:var(--e4) var(--e6);}
.razones li{
  display:flex;align-items:center;gap:12px;
  font-size:.9688rem;font-weight:500;color:var(--texto-2);line-height:1.4;
}
.razones li + li{border-left:1px solid var(--linea);padding-left:var(--e6);}
.razones .ico{width:20px;height:20px;color:var(--rojo-texto);flex:none;}

/* ============================================================
   CÓMO FUNCIONA — riel de tres pasos
   ============================================================ */
/* La tira de razones y el riel de pasos ya cierran visualmente por sí solos:
   con el aire completo de sección quedaba un hueco muerto entre ellos. */
#funciona{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(56px,7vw,96px);}
.ti{padding-top:clamp(48px,6vw,84px);}
.pasos-enc{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e5);justify-content:space-between;margin-bottom:clamp(40px,6vw,72px);}
.pasos-enc .titulo-s{max-width:16ch;}
.pasos-enc p{max-width:44ch;color:var(--texto-2);font-size:1.0625rem;}

.riel{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  --riel-gap:clamp(24px,4vw,56px);gap:var(--riel-gap);}
/* La línea va de borde a borde de los círculos extremos y pasa POR DETRÁS del
   del medio (los pasos van en z-index 1). Los extremos se calculan con el gap
   real de la rejilla: `16.666%` daba el centro de la columna solo si el gap
   fuera cero, y con gap la línea quedaba corta a los dos lados. */
.riel::before{
  content:'';position:absolute;z-index:0;
  top:27px;height:2px;
  left:56px;right:calc((100% - var(--riel-gap) * 2) / 3);
  background:repeating-linear-gradient(90deg,var(--linea) 0 7px,transparent 7px 14px);
}
.paso{position:relative;z-index:1;}
.paso .n{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--g-rojo);color:#fff;
  font-family:'Oduda','Poppins',sans-serif;font-size:1.375rem;line-height:1;
  letter-spacing:.02em;
  box-shadow:0 2px 4px rgba(192,34,81,.20), 0 14px 26px -12px rgba(255,48,75,.60);
  margin-bottom:var(--e5);
}
.paso h3{
  font-size:1.3125rem;font-weight:700;color:var(--morado);
  line-height:1.28;margin-bottom:10px;
}
.paso p{color:var(--texto-2);font-size:1rem;max-width:34ch;}

/* ============================================================
   PARA TI
   ============================================================ */
.ti{background:var(--blanco);}
.ti-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center;}
.ti h2{margin-bottom:var(--e5);}
.ti .entrada{margin-bottom:var(--e6);}

.ventajas{display:flex;flex-direction:column;gap:var(--e5);}
.ventaja{display:flex;gap:var(--e4);}
.ventaja .ico-caja{
  flex:none;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,48,75,.10);color:var(--rojo-texto);
}
.ventaja .ico-caja .ico{width:22px;height:22px;}
.ventaja h3{font-size:1.0625rem;font-weight:700;color:var(--morado);margin-bottom:3px;}
.ventaja p{font-size:.9688rem;color:var(--texto-2);max-width:42ch;}

/* diagrama del lote de puntos */
.lote{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:clamp(24px,3.2vw,36px);
  box-shadow:var(--sombra);
}
.lote-tope{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e4);padding-bottom:var(--e4);border-bottom:1px solid var(--linea);margin-bottom:var(--e5);}
.lote-tope .et{font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3);}
.lote-tope .val{font-family:'Oduda','Poppins',sans-serif;font-size:1.75rem;color:var(--morado);letter-spacing:.01em;}

/* Los rubros de la red, con los nombres que usa la propia app: era el dato
   que faltaba —dónde sirve— y el sitio daba tres listas que no coincidían. */
.rubros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--e6);}
.rubros li{
  padding:8px 14px;border-radius:999px;background:#F3EFF7;
  font-size:.875rem;font-weight:600;color:var(--morado);
}

.sellos-caja{padding-top:var(--e5);border-top:1px solid var(--linea);}
.sellos-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);margin-bottom:12px;}
.sellos-cab .t{font-size:.9375rem;font-weight:600;color:var(--morado);}
.sellos-cab .p{font-size:.9375rem;font-weight:700;color:var(--rojo-texto);white-space:nowrap;}
.sellos{display:flex;flex-wrap:wrap;gap:8px;}
.sello{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:#F1ECF6;border:2px dashed #D6CCE2;
}
/* el sello es el isotipo de la marca, que es lo que estampa la app */
.sello.lleno{
  border:0;background:url('../img/iso-white.webp') center/54% no-repeat, var(--g-rojo);
  box-shadow:0 2px 5px rgba(192,34,81,.24);
  animation:sello-cae .5s var(--salida) both;animation-delay:var(--d,0ms);
}
@keyframes sello-cae{from{opacity:0;transform:scale(.5) rotate(-18deg);}to{opacity:1;transform:none;}}
.sello.lleno:nth-child(1){--d:80ms;}  .sello.lleno:nth-child(2){--d:150ms;}
.sello.lleno:nth-child(3){--d:220ms;} .sello.lleno:nth-child(4){--d:290ms;}
.sello.lleno:nth-child(5){--d:360ms;} .sello.lleno:nth-child(6){--d:430ms;}
.sello.lleno:nth-child(7){--d:500ms;}
.sellos-caja .nota{font-size:.8438rem;color:var(--texto-3);margin-top:12px;}

.premio{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:var(--e5);padding:16px 18px;border-radius:16px;
  background:rgba(255,48,75,.08);
}
.premio .ico{width:21px;height:21px;color:var(--rojo-texto);flex:none;margin-top:1px;}
.premio p{font-size:.9375rem;color:var(--texto);line-height:1.52;}
.premio b{color:var(--rojo-texto);}

/* ============================================================
   BANDA ROJA — una sola afirmación
   ============================================================ */
.banda{
  position:relative;overflow:hidden;
  background:var(--rojo);color:#fff;
  padding-block:clamp(64px,9vw,104px);
  text-align:center;
}
.banda h2{
  position:relative;z-index:1;
  font-size:clamp(2.25rem,5.6vw,4.25rem);
  max-width:18ch;margin-inline:auto;
}
.banda .bajo{
  position:relative;z-index:1;
  margin-top:var(--e5);margin-inline:auto;max-width:40ch;
  font-size:1.25rem;font-weight:700;line-height:1.5;color:#fff;
}
.banda .cintas{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e3);
  margin-top:var(--e6);
}
.banda .cintas li{
  padding:12px 22px;border-radius:999px;
  background:#fff;color:var(--morado);
  font-size:1rem;font-weight:600;
}

/* ============================================================
   PARA TU NEGOCIO
   ============================================================ */
.negocio{
  position:relative;overflow:hidden;
  background:var(--morado);color:#fff;
}
.negocio-enc{max-width:62ch;margin-bottom:clamp(40px,5vw,64px);}
.negocio-enc h2{margin-bottom:var(--e5);}

.dolor{
  display:flex;align-items:center;gap:var(--e4);
  padding:18px 22px;border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid var(--linea-oscura);
  margin-bottom:var(--e6);max-width:56ch;
}
.dolor .n{
  font-family:'Oduda','Poppins',sans-serif;font-size:2.125rem;line-height:1;
  color:var(--rojo);letter-spacing:.01em;flex:none;
}
.dolor p{font-size:1rem;color:var(--sobre-oscuro-2);line-height:1.5;}

.panel-marco{
  position:relative;border-radius:var(--radio-g);overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(10,0,25,.36), 0 48px 90px -34px rgba(10,0,25,.80);
  margin-bottom:clamp(40px,5vw,64px);
}
.panel-marco img{width:100%;}

.capacidades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);}
.capacidad{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e4);
  padding-block:var(--e5);
  border-top:1px solid var(--linea-oscura);
}
.capacidad .ico-caja{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,48,75,.20);color:#fff;
}
.capacidad .ico-caja .ico{width:21px;height:21px;}
.capacidad h3{font-size:1.0625rem;font-weight:700;color:#fff;margin-bottom:4px;}
.capacidad p{font-size:.9688rem;color:var(--sobre-oscuro-2);line-height:1.55;}

.negocio-pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5);
  margin-top:clamp(40px,5vw,64px);padding-top:var(--e6);
  border-top:1px solid var(--linea-oscura);
}
.negocio-pie p{font-size:1.0625rem;color:var(--sobre-oscuro-2);max-width:44ch;}

/* ============================================================
   DESCARGA — las dos tiendas
   ============================================================ */
.descarga{background:var(--blanco);padding-block:0 clamp(72px,10vw,128px);}
.descarga-in{
  position:relative;overflow:hidden;
  background:var(--g-morado);border-radius:var(--radio-g);
  padding:clamp(32px,4.4vw,56px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);align-items:center;
  color:#fff;
}
.descarga-in > div{position:relative;z-index:1;}
.descarga-in > .patron{position:absolute;z-index:0;}
.descarga h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:12px;}
.descarga p{font-size:1.0625rem;color:var(--sobre-oscuro-2);max-width:46ch;}
.tiendas{display:flex;flex-wrap:wrap;gap:var(--e3);}
.tienda{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 22px 13px 18px;border-radius:16px;
  background:#fff;color:var(--morado);
  transition:transform .18s var(--salida),box-shadow .18s var(--salida);
  box-shadow:0 2px 4px rgba(10,0,25,.18), 0 18px 34px -18px rgba(10,0,25,.60);
}
.tienda:hover{transform:translateY(-2px);box-shadow:0 3px 6px rgba(10,0,25,.20), 0 24px 44px -18px rgba(10,0,25,.70);}
.tienda .ico{width:26px;height:26px;flex:none;}
.tienda .txt{display:flex;flex-direction:column;line-height:1.15;}
.tienda .txt .a{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);}
.tienda .txt .b{font-size:1.0625rem;font-weight:700;}
.tienda[aria-disabled="true"]{
  background:rgba(255,255,255,.14);color:#fff;
  box-shadow:none;cursor:default;pointer-events:none;
  border:1px solid rgba(255,255,255,.28);
}
.tienda[aria-disabled="true"] .txt .a{color:rgba(255,255,255,.62);}

@media (max-width:860px){
  .descarga-in{grid-template-columns:1fr;}
  .tiendas .tienda{flex:1 1 200px;justify-content:center;}
}
@media (max-width:520px){
  .dolor{flex-direction:column;align-items:flex-start;gap:6px;}
  .dolor p{font-size:.9688rem;}
}

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faq-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;}
.faq-in > div:first-child{position:sticky;top:104px;}
.faq-in h2{margin-bottom:var(--e4);}
.faq-in .entrada{margin-bottom:var(--e5);}

.faq{border-top:1px solid var(--linea);}
.faq details{border-bottom:1px solid var(--linea);}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--e4);
  padding:var(--e5) 0;cursor:pointer;list-style:none;
  font-size:1.0625rem;font-weight:600;color:var(--morado);line-height:1.45;
  transition:color .18s var(--salida);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--rojo-texto);}
.faq summary .cruz{
  flex:none;margin-left:auto;width:22px;height:22px;position:relative;margin-top:3px;
}
.faq summary .cruz::before,.faq summary .cruz::after{
  content:'';position:absolute;inset:50% 0 auto 0;height:2px;border-radius:2px;
  background:var(--rojo);transform:translateY(-50%);
  transition:transform .24s var(--salida);
}
.faq summary .cruz::after{transform:translateY(-50%) rotate(90deg);}
.faq details[open] summary .cruz::after{transform:translateY(-50%) rotate(0deg);}
.faq .respuesta{padding:0 44px var(--e5) 0;}
.faq .respuesta p{color:var(--texto-2);font-size:1rem;max-width:62ch;}
.faq .respuesta p + p{margin-top:12px;}

/* ============================================================
   CIERRE — formulario de comercios
   ============================================================ */
.cierre{position:relative;overflow:hidden;background:#EFEAF4;}
.cierre-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.cierre h2{margin-bottom:var(--e5);}
.cierre .lista-c{display:flex;flex-direction:column;gap:14px;margin-top:var(--e6);}
.cierre .lista-c li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--texto-2);}
.cierre .lista-c .ico{width:20px;height:20px;color:var(--rojo-texto);flex:none;margin-top:2px;}

.formulario{
  background:var(--carta);border-radius:var(--radio-g);
  padding:clamp(24px,3.4vw,40px);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-alta);
}
.formulario h3{font-size:1.375rem;font-weight:700;color:var(--morado);margin-bottom:6px;}
.formulario .sub{font-size:.9375rem;color:var(--texto-2);margin-bottom:var(--e5);}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo.ancho{grid-column:1/-1;}
.campo label{font-size:.875rem;font-weight:600;color:var(--morado);}
.campo label .req{color:var(--rojo-texto);}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1rem;color:var(--texto);
  background:#FBFAFC;border:1.5px solid #DDD5E5;border-radius:12px;
  padding:13px 14px;min-height:50px;width:100%;
  transition:border-color .16s var(--salida),background-color .16s var(--salida),box-shadow .16s var(--salida);
}
.campo textarea{min-height:104px;resize:vertical;line-height:1.5;}
.campo input::placeholder,.campo textarea::placeholder{color:#8E82A0;}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#C6B9D4;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;background:#fff;border-color:var(--rojo);
  box-shadow:0 0 0 4px rgba(255,48,75,.16);
}
.campo .ayuda{font-size:.8125rem;color:var(--texto-3);}
.campo .error{
  display:none;align-items:center;gap:7px;
  font-size:.8438rem;font-weight:600;color:#B3123A;
}
.campo .error .ico{width:15px;height:15px;flex:none;}
.campo[data-error="1"] input,.campo[data-error="1"] select,.campo[data-error="1"] textarea{
  border-color:#B3123A;background:#FFF5F7;
}
.campo[data-error="1"] .error{display:flex;}

.formulario .btn-rojo{width:100%;margin-top:var(--e5);}
.formulario .btn-rojo[aria-busy="true"]{opacity:.72;pointer-events:none;}
.formulario .nota-p{font-size:.8125rem;color:var(--texto-3);margin-top:14px;text-align:center;line-height:1.5;}

.resumen-error{
  display:none;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:14px;margin-bottom:var(--e4);
  background:#FFF0F3;border:1.5px solid #F3C2CE;
}
.resumen-error[data-visible="1"]{display:flex;}
.resumen-error .ico{width:20px;height:20px;color:#B3123A;flex:none;margin-top:1px;}
.resumen-error p{font-size:.9063rem;font-weight:600;color:#B3123A;margin-bottom:4px;}
.resumen-error a{font-size:.875rem;color:#B3123A;text-decoration:underline;text-underline-offset:3px;display:block;}

.listo{display:none;text-align:center;padding:var(--e6) var(--e4);}
.listo[data-visible="1"]{display:block;}
.listo .marca-ok{
  width:64px;height:64px;border-radius:50%;margin:0 auto var(--e5);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,48,75,.12);color:var(--rojo-texto);
}
.listo .marca-ok .ico{width:32px;height:32px;}
.listo h3{font-size:1.375rem;color:var(--morado);margin-bottom:10px;}
.listo p{font-size:1rem;color:var(--texto-2);max-width:40ch;margin-inline:auto;}

/* ============================================================
   PIE
   ============================================================ */
.pie{background:var(--negro);color:#fff;padding-block:var(--e8) var(--e6);}
.pie-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:var(--e7);}
.pie .marca img{width:112px;}
.pie .lema{font-size:.9688rem;color:rgba(255,255,255,.70);max-width:38ch;margin-top:var(--e4);line-height:1.6;}
.pie h2{font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:var(--e4);}
.pie ul{display:flex;flex-direction:column;gap:1px;}
.pie ul a,.pie ul span{font-size:.9375rem;color:rgba(255,255,255,.80);transition:color .16s var(--salida);}
/* el enlace medía 21px de alto: el relleno le da área táctil sin mover
   el ritmo (el hueco entre líneas pasa de 11px a 1px + 2×5px) */
.pie ul a{display:inline-block;padding-block:5px;}
.pie ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.pie-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.875rem;color:rgba(255,255,255,.55);
}
.redes{display:flex;gap:10px;}
.redes a{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.80);
  transition:background-color .16s var(--salida),color .16s var(--salida);
}
.redes a:hover{background:var(--rojo);color:#fff;}
.redes .ico{width:19px;height:19px;}

/* ============================================================
   MOVIMIENTO — un solo momento autoral
   ============================================================ */
.revelar{opacity:1;}
html.js .revelar{
  opacity:0;transform:translateY(18px);filter:blur(6px);
  transition:opacity .72s var(--salida),transform .72s var(--salida),filter .72s var(--salida);
  transition-delay:var(--retraso,0ms);
}
html.js .revelar.visible{opacity:1;transform:none;filter:none;}

@media (prefers-reduced-motion:reduce){
  html.js .revelar{opacity:1;transform:none;filter:none;transition:none;}
  html.js .portada-fig,html.js .portada-txt > *{animation:none;}
  .sello.lleno{animation:none;}

  /* la barra de avance dispara el cambio de lámina: aquí no debe correr */
  .pestana .pista i{animation:none !important;transform:scaleX(0);}
  .hero.vivo .mando,
  .hero.vivo .hero-paneles,
  .hero.vivo .hero-acciones,
  .hero.vivo .hero-fig{opacity:1;animation:none !important;}
  .hero.vivo .grupo,
  .hero.vivo .burbuja,
  .hero.vivo .burbuja > span{opacity:1;transform:none;animation:none !important;}
  .hero.vivo .grupo[hidden]{visibility:hidden;}
  .hero.vivo .hero-panel,.hero.vivo .pantallas img,.hero.vivo .figura{transform:none;}
  .telefono{transform:none !important;transition:none;}

  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================================
   PÁGINA DE DESCARGA (descargar.html)

   Reutiliza el hero morado con su patrón. Lo propio es la rejilla,
   los pasos y el trato que reciben las dos tiendas: la del sistema
   del visitante manda, la otra se queda como alternativa visible.
   ============================================================ */
.portada{padding-bottom:clamp(64px,7vw,96px);}
.portada-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
}
.portada h1{font-size:clamp(2.375rem,4.6vw,3.75rem);margin-bottom:var(--e5);}
.portada .entrada{color:var(--sobre-oscuro-2);max-width:46ch;margin-bottom:var(--e7);}
.dp-tiendas{gap:var(--e3);}

/* Se muestra SOLO la ficha del sistema del visitante. La otra no
   desaparece del sitio: vive en el modal, a un clic del enlace de
   abajo. Sin `data-so` —escritorio, o un navegador que no supimos
   leer— se ven las dos, que es el estado correcto por defecto. */
.dp-tiendas[data-so="ios"] .tienda[data-tienda="android"],
.dp-tiendas[data-so="android"] .tienda[data-tienda="ios"]{display:none;}
.dp-tiendas[data-so] .tienda{padding:17px 30px 17px 24px;}
.dp-tiendas[data-so] .tienda .txt .b{font-size:1.1875rem;}

.dp-otro{margin-top:var(--e4);}
.dp-abrir{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:.9375rem;font-weight:600;color:#fff;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.42);
  transition:text-decoration-color .18s var(--salida);
}
.dp-abrir:hover{text-decoration-color:#fff;}

/* ---------- modal con las dos tiendas ---------- */
.dp-modal{
  width:min(440px,calc(100vw - 32px));padding:0;border:0;
  border-radius:var(--radio-g);background:var(--carta);color:var(--texto);
  box-shadow:0 40px 90px -30px rgba(12,0,26,.6);
}
.dp-modal::backdrop{background:rgba(20,0,42,.62);backdrop-filter:blur(3px);}
.dp-modal-in{position:relative;padding:clamp(26px,4vw,36px);}
.dp-modal h2{
  font-family:'Oduda','Poppins',sans-serif;text-transform:uppercase;letter-spacing:.006em;
  font-size:1.5rem;color:var(--morado);line-height:1.1;margin-bottom:10px;padding-right:40px;
}
.dp-modal p{font-size:.9688rem;color:var(--texto-2);line-height:1.6;margin-bottom:var(--e5);}
.dp-modal .tiendas{flex-direction:column;}
.dp-modal .tienda{
  /* `flex:none` a propósito: en columna, el `flex-basis:200px` que
     heredaba de la regla de móvil se convertía en ALTO y las fichas
     salían de 200px de alto. */
  flex:none;justify-content:flex-start;width:100%;
  background:#F3EFF7;color:var(--morado);box-shadow:none;
  border:1px solid var(--linea);
}
.dp-modal .tienda:hover{transform:none;background:#EBE4F2;box-shadow:none;}
.dp-cerrar{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(45,0,94,.08);color:var(--morado);
}
.dp-cerrar:hover{background:rgba(45,0,94,.16);}
.dp-cerrar .ico{width:16px;height:16px;}
@media (prefers-reduced-motion:no-preference){
  .dp-modal[open]{animation:dp-entra .28s var(--salida);}
  @keyframes dp-entra{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
}
.dp-pasos{
  display:flex;flex-direction:column;gap:var(--e4);
  margin-top:var(--e7);padding-top:var(--e6);
  border-top:1px solid rgba(255,255,255,.16);
}
.dp-pasos li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  font-size:1.0625rem;color:var(--sobre-oscuro-2);line-height:1.55;}
.dp-pasos .n{
  font-family:'Oduda','Poppins',sans-serif;font-size:.9375rem;color:var(--rojo);
  letter-spacing:.04em;
}
.dp-vuelta{margin-top:var(--e6);}
.dp-vuelta a{
  color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4);
}
.dp-vuelta a:hover{text-decoration-color:#fff;}

/* Dos capas a propósito: el resplandor vive en `.portada-fig`, que NO
   recorta, y el aparato en `.portada-marco`, que sí. Cuando el brillo
   estaba dentro del recorte, el móvil lo cortaba en seco por arriba y
   dejaba un canto recto a todo lo ancho de la sección. */
.portada-fig{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
}
.portada-luz{
  position:absolute;z-index:0;top:46%;left:50%;
  width:min(150%,540px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(255,48,75,.50) 0%,rgba(255,48,75,0) 66%);
  filter:blur(26px);pointer-events:none;
}
.portada-marco{
  position:relative;z-index:1;
  width:100%;display:flex;justify-content:center;align-items:flex-start;
}
/* el texto por delante del resplandor: al dejar de recortarlo, en una
   columna sube hasta la altura de los pasos */
.portada-txt{position:relative;z-index:1;}

/* Aquí el aparato se ve ENTERO: la página es corta y hay sitio. Solo se
   recorta por debajo de 860px, donde ya no cabe (ver más abajo). */
/* Max y el teléfono comparten suelo, igual que en la portada: él a la
   izquierda y el aparato por delante, de modo que el teléfono que
   sostiene queda escondido detrás del grande. Aquí el mockup va
   INCLINADO —un giro corto en dos ejes— para que la página no repita
   la misma estampa frontal del hero. */
.portada-escena{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;perspective:1400px;
}
.portada-max{
  order:-1;flex:none;position:relative;z-index:1;
  width:min(48%,258px);height:auto;max-width:none;
  margin-right:-15%;margin-bottom:-2%;
  filter:drop-shadow(0 22px 34px rgba(12,0,26,.45));
}
.portada-fig .telefono{
  width:min(56%,272px);flex:none;position:relative;z-index:2;
  transform:rotateY(-14deg) rotateZ(3deg);
}
@keyframes sube-portada{from{opacity:0;transform:translateY(26px) scale(.97);}to{opacity:1;transform:none;}}
html.js .portada-fig{animation:sube-portada .9s var(--salida) .1s both;}
html.js .portada-txt > *{animation:sube .8s var(--salida) both;}
html.js .portada-txt > :nth-child(1){animation-delay:.05s;}
html.js .portada-txt > :nth-child(2){animation-delay:.12s;}
html.js .portada-txt > :nth-child(3){animation-delay:.19s;}
html.js .portada-txt > :nth-child(4){animation-delay:.26s;}
html.js .portada-txt > :nth-child(5){animation-delay:.33s;}
html.js .portada-txt > :nth-child(6){animation-delay:.40s;}

@media (max-width:860px){
  .portada-in{grid-template-columns:1fr;gap:var(--e6);}
  .portada{padding-bottom:0;}
  .portada-fig{
    height:clamp(280px,64vw,380px);
    margin-inline:calc(var(--gutter) * -1);
  }
  /* solo el aparato se recorta; el resplandor se desvanece por su cuenta */
  .portada-marco{height:100%;overflow:hidden;}
  .portada-fig .telefono{width:min(54%,250px);}
  .portada-max{width:min(46%,215px);}
  .dp-tiendas .tienda{flex:1 1 220px;justify-content:center;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:var(--e7);}
  /* En una columna el teléfono va DESPUÉS del texto: así el titular y
     los botones caen sobre la línea de flotación, no debajo del mockup.

     Y en vez de encogerlo hasta que no se lea nada, se AGRANDA y se
     recorta contra el borde inferior del hero: se ve una pantalla real
     a tamaño legible, no un aparato entero de miniatura. Lo que sigue
     debajo insinúa que el teléfono continúa.

     El personaje no acompaña al teléfono en este tramo: al lado de uno
     que ya no cabe entero él tampoco cabría, y como están alineados por
     el suelo, el recorte le caería por la cintura. */
  .hero{padding-bottom:0;}
  .hero-fig{
    height:clamp(330px,96vw,430px);
    overflow:hidden;align-items:flex-end;
    margin-inline:calc(var(--gutter) * -1);
  }
  .hero-fig::before{top:34%;width:min(150%,480px);}
  .escena{align-items:flex-end;height:100%;}
  .figuras{display:none;}
  .telefono{width:min(74%,320px);flex:none;align-self:flex-start;}
  /* apilado no queda aire a los costados: las burbujas se montarían encima */
  .burbujas{display:none;}
  .ti-in,.cierre-in,.faq-in{grid-template-columns:1fr;gap:var(--e8);}
  .faq-in > div:first-child{position:static;}
  .capacidades{grid-template-columns:1fr;gap:0;}
}

/* Entre el hero de dos columnas y el de móvil hay un tramo ancho de una
   sola columna: ahí el teléfono tiene que crecer con la pantalla o queda
   perdido en el centro. */
@media (min-width:601px) and (max-width:1040px){
  .telefono{width:min(50%,420px);}
  .hero-fig{height:clamp(400px,52vw,500px);}
}

@media (max-width:860px){
  .menu{
    position:fixed;inset:78px 0 auto 0;z-index:99;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanco);
    border-bottom:1px solid var(--linea);
    box-shadow:0 20px 40px -20px rgba(31,0,60,.35);
    padding:var(--e3) var(--gutter) var(--e5);
    margin-left:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .22s var(--salida),transform .22s var(--salida),visibility .22s;
  }
  .menu[data-abierto="1"]{transform:none;opacity:1;pointer-events:auto;visibility:visible;}
  .menu li{display:block;width:100%;}
  .menu a:not(.btn){
    display:block;width:100%;color:var(--texto);
    padding:15px 0;border-bottom:1px solid var(--linea);font-size:1.0625rem;
  }
  .menu a:not(.btn)::after{display:none;}
  .menu li:last-of-type a:not(.btn){border-bottom:0;}
  .menu .btn-min{margin-top:var(--e4);width:100%;padding:17px 22px;font-size:1rem;background:var(--morado);color:#fff;}
  .hamburguesa{display:flex;}
  .barra .menu .btn-min,
  .barra .menu .btn-min:hover{background:var(--morado);color:#fff;box-shadow:none;}
}

@media (max-width:760px){
  body{font-size:16.5px;}
  .riel{grid-template-columns:1fr;gap:var(--e6);}
  .riel::before{
    top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--linea) 0 7px,transparent 7px 14px);
  }
  .paso{display:grid;grid-template-columns:56px 1fr;gap:var(--e4);align-items:start;}
  .paso .n{margin-bottom:0;}
  .paso p{max-width:none;}
  .pasos-enc{flex-direction:column;align-items:flex-start;}
  .campos{grid-template-columns:1fr;}
  .pie-in{grid-template-columns:1fr;gap:var(--e6);}
  .negocio-pie{flex-direction:column;align-items:flex-start;}
  .banda .bajo{font-size:1.125rem;}
  .hero-acciones .btn{width:100%;}
  .razones ul{grid-template-columns:1fr;gap:14px;}
  .razones li + li{border-left:0;padding-left:0;}
  .hero{padding-top:clamp(96px,22vw,116px);}
  .mando{gap:10px;margin-bottom:var(--e5);}
  .pestana{padding:8px 13px;font-size:.8125rem;}
  .pausa{width:30px;height:30px;}
  .hero-acciones{margin-top:var(--e6);}
  /* el isotipo del patrón se lee enorme en una pantalla de 390px */
  :root{--patron-tam:72px;}
  .rubros li{font-size:.8438rem;padding:7px 12px;}
  .sello{width:30px;height:30px;}
  /* Objetivos táctiles: las pestañas y la pausa median 30px de alto.
     Al agrandarlas dejaban de caber en una línea y la tercera saltaba
     abajo con la pausa flotando al costado. En vez de encogerlas otra
     vez, la tira no parte: se desplaza. En 390px entran las tres. */
  .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .pestanas::-webkit-scrollbar{display:none;}
  .pestana{flex:none;padding:10px 13px;min-height:40px;display:flex;align-items:center;}
  .pausa{width:40px;height:40px;}
}

@media (max-width:420px){
  :root{--gutter:18px;}
  .hero h1{font-size:2.5rem;}
  .marca img{width:92px;}
}

@media print{
  .barra,.hamburguesa,.formulario .btn-rojo,.redes{display:none;}
  html.js .revelar{opacity:1;transform:none;filter:none;}
  .patron{display:none;}
}