/* ============================================================
   Landing, login, registro y panel — estilos adicionales, NO tocan styles.css de producción.
   Se cargan encima de styles.css en index.html y registro.html de esta carpeta.
   ============================================================ */


/* ============================================================
   NAV — entrada animada + subrayado en los links + logo con vida.
   La centrada del nav usa transform:translateX(-50%), así que la
   animación de entrada tiene que incluir ese -50% en cada frame o
   el nav se desarma del centro apenas termina la animación.
   ============================================================ */
@keyframes nav-in{
  from{opacity:0;transform:translate(-50%,-14px);}
  to{opacity:1;transform:translate(-50%,0);}
}
.nav-pill{animation:nav-in .8s var(--ease) .1s both;}

.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-.3rem;height:2px;
  background:var(--cyan);transition:right .35s var(--ease);
}
.nav-links a:hover::after{right:0;}

.nav-logo-badge{transition:transform .4s var(--ease);}
.nav-logo:hover .nav-logo-badge{transform:rotate(-8deg) scale(1.08);}

/* ============================================================
   VITRINA — carrusel de catálogos reales, deslizable con dedo,
   mouse (arrastrando) o flechas. Mismo lenguaje visual que .hub-card.
   ============================================================ */
.vitrina{padding:5.5rem 0;}
.vitrina-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  width:var(--shell);margin:0 auto 2.2rem;}
.vitrina-arrows{display:flex;gap:.6rem;flex-shrink:0;}
.vitrina-arrow{
  width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--panel-border);
  background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.vitrina-arrow:hover{border-color:var(--cyan-dim);background:var(--bg-alt);}
.vitrina-arrow:active{transform:scale(.92);}
.vitrina-arrow svg{width:1.1rem;height:1.1rem;}

.vitrina-wrap{position:relative;}
.vitrina-wrap::before,.vitrina-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:6rem;z-index:2;pointer-events:none;
}
.vitrina-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.vitrina-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent);}

.vitrina-track{
  /* Sin scroll-snap: ahora el carrusel avanza solo (autoplay en script-beta.js) y el
     snap peleaba con eso — el navegador intentaba "trabar" la tarjeta más cercana en
     cada frame del autoplay y se sentía a tirones. El set de tarjetas está duplicado
     en el HTML (vía JS) para que el loop sea invisible. */
  display:flex;gap:1.3rem;overflow-x:auto;
  padding:.4rem var(--pad-side,calc((100vw - var(--shell))/2));
  cursor:grab;user-select:none;
  scrollbar-width:none;
}
.vitrina-track::-webkit-scrollbar{display:none;}
.vitrina-track.dragging{cursor:grabbing;}

.vitrina-card{
  /* Es un <button>, no un <a>: a propósito, para que quede claro (y accesible) que esto
     es solo un ejemplo para mirar, no un link a la tienda real. Reset de botón nativo. */
  flex:0 0 auto;width:17.5rem;scroll-snap-align:start;
  border-radius:var(--radius-lg);border:1px solid var(--panel-border);background:var(--panel);
  overflow:hidden;transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  padding:0;font:inherit;text-align:left;cursor:pointer;display:block;
}
.vitrina-card:hover{transform:translateY(-6px);border-color:var(--cyan-dim);
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--cyan) 45%,transparent);}

.vitrina-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt);}
.vitrina-media img{width:100%;height:100%;object-fit:cover;pointer-events:none;
  transition:transform .6s var(--ease);}
.vitrina-card:hover .vitrina-media img{transform:scale(1.06);}
.vitrina-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,12,20,.92) 100%);}
.vitrina-live{
  position:absolute;top:.8rem;left:.8rem;z-index:1;
  display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:99px;
  background:rgba(8,14,22,.6);backdrop-filter:blur(6px);font-size:.68rem;font-weight:700;
  color:#fff;letter-spacing:.03em;
}
.vitrina-live::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:#4ee08a;
  box-shadow:0 0 0 0 rgba(78,224,138,.6);animation:vitrina-pulse 1.8s infinite;}
@keyframes vitrina-pulse{
  0%{box-shadow:0 0 0 0 rgba(78,224,138,.55);}
  70%{box-shadow:0 0 0 .45rem rgba(78,224,138,0);}
  100%{box-shadow:0 0 0 0 rgba(78,224,138,0);}
}
.vitrina-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1rem 1.1rem 1.1rem;}
.vitrina-body h3{font-size:1.02rem;margin-bottom:.15rem;color:#fff;}
.vitrina-body p{font-size:.76rem;color:rgba(255,255,255,.72);}

/* ============================================================
   LIGHTBOX de la vitrina — vista rápida al tocar una tarjeta.
   No hay ningún link hacia afuera: cerrar es la única salida.
   ============================================================ */
.vitrina-lightbox{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.vitrina-lightbox.open{opacity:1;visibility:visible;}
.vitrina-lightbox-backdrop{position:absolute;inset:0;background:rgba(6,10,16,.82);backdrop-filter:blur(4px);}
.vitrina-lightbox-panel{
  position:relative;width:min(30rem,100%);max-height:calc(100vh - 3rem);overflow:hidden;
  border-radius:calc(var(--radius-lg) + .2rem);border:1px solid var(--panel-border);
  background:var(--bg-alt);box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  transform:scale(.92) translateY(10px);transition:transform .4s var(--ease);
}
.vitrina-lightbox.open .vitrina-lightbox-panel{transform:scale(1) translateY(0);}
.vitrina-lightbox-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.vitrina-lightbox-info{padding:1.4rem 1.5rem 1.6rem;}
.vitrina-lightbox-info h3{font-size:1.2rem;margin:.6rem 0 .2rem;}
.vitrina-lightbox-info p{font-size:.85rem;color:var(--text-dim);}
.vitrina-lightbox-nota{margin-top:.6rem;font-size:.74rem;color:var(--text-faint);}
.vitrina-lightbox-cerrar{
  position:absolute;top:.8rem;right:.8rem;z-index:2;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(8,14,22,.55);backdrop-filter:blur(6px);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.vitrina-lightbox-cerrar svg{width:1rem;height:1rem;}

@media (max-width:768px){
  .vitrina{padding:3.6rem 0;}
  .vitrina-head{width:92vw;flex-direction:column;align-items:flex-start;gap:.8rem;}
  .vitrina-arrows{display:none;}
  .vitrina-card{width:13.8rem;}
}

@media (prefers-reduced-motion:reduce){
  .vitrina-live::before{animation:none;}
}

/* ============================================================
   LANDING v3 (2026-09-28) — Catálogo Web como herramienta estrella.
   Pensado primero para celular (~390px). Todas las animaciones
   usan solo transform/opacity (GPU) y se apagan con
   prefers-reduced-motion. Clases nuevas con prefijo propio
   (hx-, demo-, show-, mk-, flow-, precio-, promo-dock, au-) para no pisar
   nada de styles.css de producción.
   ============================================================ */

/* Color de "promo": rojo con buen contraste sobre el navy (blanco encima = 4.5:1). Reemplaza
   al dorado de la ronda anterior, que sobre el fondo oscuro se veía marrón. */
:root{--promo:#dc3545;--promo-soft:rgba(220,53,69,.12);--promo-line:rgba(255,120,132,.45);}

/* ---------- HERO ---------- */
.hx{position:relative;padding:8.6rem 1.5rem 4rem;overflow:hidden;isolation:isolate;}
.hx-inner{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center;}


/* Entrada escalonada al cargar — puro CSS, no espera a ningún script. */
@keyframes hx-rise{from{opacity:0;transform:translateY(1.4rem);}to{opacity:1;transform:none;}}
.hx-promo,.hx-line > span,.hx-sub,.hx-price,.hx-actions,.hx-checks{animation:hx-rise .9s var(--ease) both;}
.hx-promo{animation-delay:.05s;}
.hx-line:nth-child(1) > span{animation-delay:.15s;}
.hx-line:nth-child(2) > span{animation-delay:.27s;}
.hx-line:nth-child(3) > span{animation-delay:.39s;}
.hx-sub{animation-delay:.55s;}
.hx-price{animation-delay:.68s;}
.hx-actions{animation-delay:.8s;}
.hx-checks{animation-delay:.92s;}

/* Pastilla de la promo con un brillo que la cruza cada tanto. */
.hx-promo{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;
  padding:.3rem .85rem .3rem .3rem;margin-bottom:1.5rem;border-radius:999px;
  border:1px solid var(--promo-line);background:var(--promo-soft);
  font-size:.82rem;font-weight:600;color:var(--text);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hx-promo:hover{border-color:#ff7884;background:rgba(220,53,69,.18);}
.hx-promo-tag{background:var(--promo);color:#fff;font-weight:800;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.32rem .62rem;border-radius:999px;}
.hx-promo svg{width:.95rem;height:.95rem;color:#ff8a95;transition:transform .35s var(--ease);}
.hx-promo:hover svg{transform:translateX(3px);}
.hx-promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  transform:translateX(-120%);animation:tv-shine 4.5s 1.4s ease-in-out infinite;
}
@keyframes tv-shine{0%{transform:translateX(-120%);}28%,100%{transform:translateX(120%);}}

.hx-title{font-size:clamp(2.2rem,8.6vw,3.7rem);line-height:1.04;margin-bottom:1.3rem;letter-spacing:-.03em;}
.hx-line{display:block;overflow:hidden;padding-bottom:.08em;}
.hx-line > span{display:inline-block;}
/* Resaltador que se "pinta" de izquierda a derecha. Con background (no un SVG aparte),
   así sigue funcionando aunque el texto se parta en 2 líneas en celular. */
.hx-mark{color:var(--cyan);}
.hx-sub{color:var(--text-dim);font-size:1.08rem;max-width:34rem;}

/* Precio: el S/40 se tacha solo (línea que se dibuja) y el número baja contando a 20. */
.hx-price{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;margin:1.7rem 0 1.6rem;}
.hx-old{position:relative;font-family:var(--font-head);font-size:1.6rem;font-weight:600;color:var(--text-faint);}
.hx-strike{position:absolute;left:-6%;right:-6%;top:50%;height:3px;border-radius:3px;background:#ff5d6c;
  transform-origin:left center;transform:rotate(-10deg) scaleX(0);animation:hx-strike .55s var(--ease) 1.05s forwards;}
@keyframes hx-strike{to{transform:rotate(-10deg) scaleX(1);}}
.hx-new{font-family:var(--font-head);font-weight:700;font-size:clamp(3.2rem,13vw,4.4rem);line-height:.95;color:var(--cyan);
  letter-spacing:-.04em;text-shadow:0 0 28px rgba(53,224,208,.35);font-variant-numeric:tabular-nums;}
.hx-new small{font-size:.3em;font-weight:600;color:var(--text-dim);letter-spacing:0;margin-left:.2rem;text-shadow:none;}
.hx-save{align-self:center;padding:.4rem .7rem;border-radius:.7rem;background:var(--promo);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1rem;transform:scale(0) rotate(-12deg);
  animation:hx-pop .6s cubic-bezier(.34,1.56,.64,1) 1.85s forwards;}
@keyframes hx-pop{to{transform:scale(1) rotate(-6deg);}}

.hx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-bottom:1.4rem;}
.hx-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;}
.hx-checks li{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--text-dim);}
.hx-checks svg{width:1rem;height:1rem;color:var(--cyan);flex-shrink:0;}

/* Botón con brillo que lo cruza + respuesta al toque en celular (sin hover). */
.btn-shine{position:relative;overflow:hidden;isolation:isolate;}
.btn-shine::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:tv-shine 3.8s 2.2s ease-in-out infinite;
}
.btn:active{transform:scale(.96);transition-duration:.12s;}

/* ---------- DEMO (celular animado) ---------- */
.hx-art{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
/* Geometría del celular en un solo lugar. Regla: grosor del marco ≥ 0.293 × radio exterior
   → así la esquina CUADRADA de la pantalla cae entera dentro de la silueta del teléfono y el
   bisel (.demo-bezel) la tapa siempre, aunque el navegador no redondee nada (ver nota abajo). */
.demo-stage{--tel-r:2.8rem;--tel-p:.85rem;--tel-rp:1.95rem;
  position:relative;width:min(290px,74vw);animation:hx-rise 1s var(--ease) .45s both;}
/* La ÚNICA luz del hero: un brillo quieto detrás del celular, como un producto en vitrina.
   Reemplaza a las 3 manchas que flotaban por el fondo (se leían como manchas sucias,
   sobre todo la dorada en pantallas anchas). */
.demo-stage::before{
  content:"";position:absolute;left:50%;top:46%;width:175%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(53,224,208,.15),rgba(53,224,208,.05) 55%,transparent);
}
.demo-phone{
  position:relative;aspect-ratio:9/18.6;border-radius:var(--tel-r);padding:var(--tel-p);
  background:linear-gradient(155deg,#243a55,#0a1420 55%,#16263b);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.35) inset;
  animation:demo-float 6s ease-in-out infinite;
}
@keyframes demo-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.demo-notch{position:absolute;top:calc(var(--tel-p) + .45rem);left:50%;width:30%;height:1.05rem;transform:translateX(-50%);
  border-radius:999px;background:#03070c;z-index:22;}
/* Bisel del celular POR ENCIMA de la pantalla: un anillo (box-shadow con spread) que sigue la
   curva de las esquinas y pinta el marco por fuera de ella. Así las 4 esquinas se ven
   redondas SIEMPRE, aunque el navegador falle al recortar lo que se anima adentro (pasaba en
   Brave/celulares: las esquinas de arriba salían en ángulo recto). No depende de ningún
   recorte: tapa. El spread = padding del celular, así el borde externo calza con el marco. */
.demo-bezel{position:absolute;inset:0;border-radius:var(--tel-r);overflow:hidden;pointer-events:none;z-index:21;}
/* El anillo es MUY ancho (3rem) para tapar la esquina entera de la pantalla, no solo la franja
   junto a la curva; el .demo-bezel (quieto, sin animación → su recorte redondeado es confiable)
   lo corta con la forma exterior del celular. */
.demo-bezel::before{content:"";position:absolute;inset:var(--tel-p);border-radius:var(--tel-rp);
  box-shadow:0 0 0 3rem #0e1a2b,inset 0 0 0 1px #0e1a2b;}
.demo-screen{position:relative;height:100%;border-radius:var(--tel-rp);overflow:hidden;background:#111b2e;
  font-family:var(--font-body);color:#fff;
  /* border-radius + overflow:hidden NO recorta lo que se está animando adentro (vistas que se
     deslizan, la foto que vuela, el scroll): el navegador lo pinta en otra capa y las esquinas
     de arriba quedaban en ángulo recto, "rompiendo" el marco del celular (medido: 179 de 190
     cuadros con contenido fuera de la esquina). clip-path sí recorta todas las capas. */
  clip-path:inset(0 round var(--tel-rp));-webkit-clip-path:inset(0 round var(--tel-rp));isolation:isolate;}
/* IMPORTANTE (2026-09-29): dentro de la pantalla del celular NADA se anima con transform ni
   opacity en las partes que tocan las esquinas de arriba. Esas propiedades hacen que el
   navegador pinte el elemento en una "capa" aparte, y en algunos equipos (Brave del dueño)
   esa capa NO respetaba el redondeo: las esquinas de arriba salían en ángulo recto sobre el
   marco. Con left/top/right el elemento se pinta en la misma capa que la pantalla y el
   recorte redondeado siempre se aplica. */
/* z-index + isolation: cada vista es un bloque propio. Sin esto (desde que ya no usan
   transform), el panel "Tu pedido" y el velo del catálogo (z-index 6 y 8) quedaban ENCIMA del
   chat de WhatsApp al cambiar de vista. */
.demo-view{position:absolute;top:0;bottom:0;left:0;width:100%;overflow:hidden;border-radius:var(--tel-rp);transition:left .55s var(--ease);
  z-index:1;isolation:isolate;}
.demo-view.demo-wa{z-index:2;}
.demo-wa{display:flex;flex-direction:column;left:100%;background:#0b141a;visibility:hidden;
  transition:left .55s var(--ease),visibility 0s linear .55s;}
/* El catálogo se oscurece con un velo (color, no opacity) cuando entra WhatsApp. */
.demo-cat::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:rgba(8,14,22,0);transition:background .55s var(--ease);}
.demo-phone.is-wa .demo-cat::after{background:rgba(8,14,22,.7);}
.demo-phone.is-wa .demo-cat{left:-30%;}
.demo-phone.is-wa .demo-wa{left:0;visibility:visible;transition:left .55s var(--ease),visibility 0s;}

/* Catálogo de EJEMPLO "Munay Store" — misma estructura que catalogo/ver.html (portada que se
   funde al fondo, logo centrado, filtros por categoría que se quedan pegados arriba al bajar,
   tarjeta con presentaciones/tallas, precio en pastilla, botón redondo de carrito, botón
   flotante "Carrito" y panel "Tu pedido"), con un tema claro coral propio de esa tienda:
   así además se ve que cada catálogo tiene su estilo. */
.demo-cat{--mn:#e8546b;--mn-osc:#c23a55;--mn-suave:#fde8eb;--mn-fondo:#faf6f2;--mn-tinta:#1f1a1c;--mn-gris:#857a7e;--mn-linea:#eee3e5;
  background:var(--mn-fondo);color:var(--mn-tinta);}
.dc-scroll{position:absolute;left:0;right:0;top:0;transition:top 1s var(--ease);}
.dc-cover{position:relative;height:6.3rem;overflow:hidden;border-radius:var(--tel-rp) var(--tel-rp) 0 0;}
.dc-cover img{width:100%;height:100%;object-fit:cover;}
.dc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,246,242,0) 40%,var(--mn-fondo));}

.mn-logo{display:grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,#ff7d6b,#dd4379);}
.mn-logo svg{width:72%;height:72%;}
.dc-brand{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-2.1rem;padding:0 .8rem;}
.dc-logo{width:3.4rem;height:3.4rem;border-radius:1rem;border:3px solid var(--mn-fondo);box-shadow:0 10px 20px -8px rgba(221,67,121,.6);}
.dc-brand b{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em;margin-top:.4rem;}
.dc-brand span{font-size:.55rem;color:var(--mn-gris);margin-top:.1rem;}

.dc-chips{display:flex;gap:.3rem;padding:.75rem .6rem .55rem;overflow:hidden;}
.dc-chips span{flex-shrink:0;font-size:.55rem;font-weight:700;padding:.32rem .62rem;border-radius:99px;background:#fff;color:#4a4145;
  box-shadow:inset 0 0 0 1px var(--mn-linea);transition:background .3s,color .3s,box-shadow .3s,transform .2s var(--ease);}
.dc-chips span.on{background:var(--mn);color:#fff;box-shadow:0 4px 10px -4px rgba(232,84,107,.7);}
.dc-chips span.press{transform:scale(.88);}
.dc-search{display:flex;align-items:center;gap:.35rem;margin:0 .6rem .65rem;padding:.42rem .65rem;border-radius:99px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--mn-linea);font-size:.55rem;color:#a2979b;}
.dc-search svg{width:.72rem;height:.72rem;flex-shrink:0;}

/* Filtros pegados arriba cuando el cliente baja, como en el catálogo real. */
.dc-sticky{position:absolute;left:0;right:0;top:0;z-index:4;padding-top:2rem;background:var(--mn-fondo);
  box-shadow:0 8px 16px -10px rgba(80,40,50,.35);
  /* Baja desde arriba moviendo "top" (no transform/opacity, ver nota arriba) y queda
     invisible mientras está escondida. Esquinas de arriba con el mismo radio de la pantalla:
     aunque algún navegador fallara al recortar, ella misma ya es redonda. */
  border-radius:var(--tel-rp) var(--tel-rp) 0 0;top:-5.5rem;visibility:hidden;
  transition:top .35s var(--ease),visibility 0s linear .35s;}
.dc-sticky.on{top:0;visibility:visible;transition:top .35s var(--ease),visibility 0s;}
.dc-sticky .dc-chips{padding:.45rem .6rem .5rem;}

.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;padding:.15rem .55rem 5rem;align-items:stretch;}
.dc-grid.cambia{animation:dc-fade .45s var(--ease);}
@keyframes dc-fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.demo-item{display:flex;flex-direction:column;overflow:hidden;border-radius:.85rem;background:#fff;color:var(--mn-tinta);
  box-shadow:0 6px 16px -10px rgba(80,40,50,.35);}
.demo-item[hidden]{display:none;}
.demo-ph{position:relative;aspect-ratio:1;overflow:hidden;background:#f3eeea;}
.demo-ph img{width:100%;height:100%;object-fit:cover;}
.dc-badge{position:absolute;top:.35rem;left:.35rem;padding:.15rem .36rem;border-radius:.35rem;background:var(--mn);color:#fff;
  font-family:var(--font-head);font-size:.5rem;font-weight:700;}
.dc-body{display:flex;flex-direction:column;flex:1;padding:.42rem .45rem .45rem;}
.demo-item b{display:block;font-family:var(--font-head);font-size:.58rem;font-weight:600;line-height:1.2;min-height:2.4em;}
.dc-var{margin-top:.2rem;}
.dc-var-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.42rem;font-weight:800;letter-spacing:.015em;
  text-transform:uppercase;color:var(--mn-gris);}
.dc-var-head em{font-style:normal;font-size:.52rem;letter-spacing:0;text-transform:none;color:var(--mn-tinta);}
.dc-opts{display:flex;gap:.18rem;margin-top:.22rem;}
.dc-opts span{flex:1;min-width:0;text-align:center;padding:.2rem 0;border-radius:.3rem;background:#f6eff0;font-size:.48rem;font-weight:700;
  color:#4a4145;white-space:nowrap;transition:background .25s,color .25s,transform .2s var(--ease);}
.dc-opts span.sel{background:var(--mn);color:#fff;}
.dc-opts span.press{transform:scale(.86);}
.dc-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-top:auto;padding-top:.38rem;}
.dc-price{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.6rem;color:var(--mn-osc);background:var(--mn-suave);
  padding:.22rem .4rem;border-radius:.42rem;white-space:nowrap;}
.dc-price s{color:#a2979b;font-weight:600;font-size:.5rem;margin-right:.22rem;}
.dc-price.flip{animation:dc-flip .45s var(--ease);}
@keyframes dc-flip{from{transform:translateY(-45%);opacity:0;}to{transform:none;opacity:1;}}
.demo-add{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;flex-shrink:0;
  background:linear-gradient(160deg,#f06a80,#d63f5c);color:#fff;box-shadow:0 6px 12px -5px rgba(214,63,92,.8);
  transition:transform .2s var(--ease),background .3s;}
.demo-add svg{width:.75rem;height:.75rem;}
.demo-add.press{transform:scale(.82);}
.demo-add.done{background:#25d366;box-shadow:0 6px 12px -5px rgba(37,211,102,.8);}

.dc-fab{position:absolute;right:.6rem;bottom:.85rem;z-index:3;display:flex;align-items:center;gap:.35rem;
  padding:.42rem .45rem .42rem .7rem;border-radius:99px;background:var(--mn);color:#fff;font-size:.68rem;font-weight:700;
  box-shadow:0 12px 24px -10px rgba(214,63,92,.9);transition:transform .2s var(--ease);}
.dc-fab svg{width:.9rem;height:.9rem;}
.demo-badge{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .2rem;border-radius:99px;
  background:#fff;color:var(--mn-osc);font-style:normal;font-size:.6rem;font-weight:800;}
.dc-fab.bump{animation:demo-bump .45s cubic-bezier(.34,1.56,.64,1);}
.dc-fab.press{transform:scale(.92);}
@keyframes demo-bump{40%{transform:scale(1.14);}100%{transform:scale(1);}}

/* Panel "Tu pedido": entra desde la derecha, igual que el carrito real. */
.dc-drawer{position:absolute;inset:0;z-index:6;background:rgba(20,10,14,0);pointer-events:none;transition:background .4s;}
.dc-drawer.on{background:rgba(20,10,14,.45);}
.dc-dr-panel{position:absolute;top:0;right:0;bottom:0;width:86%;display:flex;flex-direction:column;background:#fff;color:var(--mn-tinta);
  right:-90%;visibility:hidden;transition:right .5s var(--ease),visibility 0s linear .5s;
  border-radius:0 var(--tel-rp) var(--tel-rp) 0;overflow:hidden;}
.dc-drawer.on .dc-dr-panel{right:0;visibility:visible;transition:right .5s var(--ease),visibility 0s;}
.dc-dr-head{display:flex;justify-content:space-between;align-items:center;padding:2.3rem .8rem .65rem;border-bottom:1px solid var(--mn-linea);}
.dc-dr-head b{font-family:var(--font-head);font-size:.82rem;}
.dc-dr-head span{font-size:1.05rem;line-height:1;color:var(--mn-gris);}
.dc-dr-item{display:flex;align-items:flex-start;gap:.5rem;padding:.65rem .8rem;border-bottom:1px solid var(--mn-linea);}
.dc-dr-item img{width:2.3rem;height:2.3rem;border-radius:.45rem;object-fit:cover;background:#f3eeea;flex-shrink:0;}
.dc-dr-item div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem;}
.dc-dr-item b{font-family:var(--font-head);font-size:.58rem;line-height:1.2;}
.dc-dr-item small{font-size:.5rem;color:var(--mn-gris);}
.dc-dr-item small em{font-style:normal;font-weight:700;color:var(--mn-osc);}
.dc-qty{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;padding:.14rem .22rem;border-radius:99px;background:#f4eef0;
  font-size:.52rem;font-weight:700;}
.dc-qty i{display:grid;place-items:center;width:.95rem;height:.95rem;border-radius:50%;background:#fff;font-style:normal;}
.dc-dr-item strong{align-self:flex-end;font-family:var(--font-head);font-size:.62rem;}
.dc-dr-foot{margin-top:auto;padding:.7rem .8rem 1.1rem;border-top:1px solid var(--mn-linea);}
.dc-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55rem;}
.dc-total span{font-size:.62rem;}
.dc-total b{font-family:var(--font-head);font-size:.92rem;}
.dc-wa-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem;border-radius:99px;background:#25d366;
  color:#07351b;font-size:.62rem;font-weight:700;transition:transform .2s var(--ease);}
.dc-wa-btn i{display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:rgba(0,0,0,.14);}
.dc-wa-btn svg{width:.7rem;height:.7rem;}
.dc-wa-btn.press{transform:scale(.94);}
.demo-wa-av{width:1.8rem;height:1.8rem;border-radius:50%;}

/* WhatsApp */
.demo-logo{object-fit:cover;background:#fff;flex-shrink:0;}
.demo-wa-head{display:flex;align-items:center;gap:.45rem;padding:2.3rem .7rem .6rem;background:#1f2c34;border-radius:var(--tel-rp) var(--tel-rp) 0 0;}
.demo-wa-head .demo-logo{width:1.8rem;height:1.8rem;border-radius:50%;}
.demo-wa-head b{display:block;font-size:.74rem;}
.demo-wa-head span{font-size:.54rem;color:rgba(255,255,255,.6);}
.demo-wa-back{width:1rem;height:1rem;color:rgba(255,255,255,.8);flex-shrink:0;}
.demo-wa-body{flex:1;padding:.9rem .6rem;display:flex;flex-direction:column;justify-content:flex-end;
  background:#0b141a radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px) 0 0/14px 14px;}
.demo-bubble{
  align-self:flex-end;max-width:92%;background:#005c4b;border-radius:.8rem .8rem .2rem .8rem;padding:.55rem .6rem .35rem;
  font-size:.56rem;line-height:1.4;color:#e9edef;transform-origin:bottom right;
  opacity:0;transform:translateY(12px) scale(.9);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.demo-bubble.on{opacity:1;transform:none;}
.demo-bubble p + p{margin-top:.45rem;}
.demo-ticks{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;font-size:.48rem;color:rgba(255,255,255,.55);margin-top:.2rem;}
.demo-ticks svg{width:.8rem;height:.55rem;color:rgba(255,255,255,.55);transition:color .4s;}
.demo-bubble.read .demo-ticks svg{color:#53bdeb;}
.demo-wa-input{display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem .8rem;background:#0b141a;}
.demo-wa-input span{flex:1;font-size:.58rem;color:rgba(255,255,255,.4);background:#1f2c34;border-radius:999px;padding:.45rem .7rem;}
.demo-wa-input i{width:1.7rem;height:1.7rem;border-radius:50%;background:#00a884;}

/* "Dedo" que toca la pantalla (lo mueve script-beta.js con transform). */
.demo-finger{
  position:absolute;left:0;top:0;z-index:8;width:1.9rem;height:1.9rem;margin:-.95rem 0 0 -.95rem;border-radius:50%;
  background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0;transition:transform .6s var(--ease),opacity .3s;
}
.demo-finger.on{opacity:1;}
.demo-finger.swipe{transition:transform 1s var(--ease),opacity .3s;}
.demo-finger.tap::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;animation:demo-tap .5s ease-out;}
@keyframes demo-tap{from{transform:scale(1);opacity:1;}to{transform:scale(2.2);opacity:0;}}
.demo-fly{position:absolute;z-index:7;border-radius:.5rem;object-fit:cover;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.4);}

.demo-toast{
  position:absolute;left:-16%;top:30%;z-index:10;display:flex;align-items:center;gap:.55rem;
  padding:.55rem .85rem .55rem .55rem;border-radius:1rem;background:#fff;color:#0b1522;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateX(-14px) scale(.9);transition:opacity .45s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1);
}
.demo-toast.on{opacity:1;transform:none;}
.demo-toast-ico{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;background:#25d366;color:#fff;flex-shrink:0;}
.demo-toast-ico svg{width:1.1rem;height:1.1rem;}
.demo-toast b{display:block;font-size:.78rem;line-height:1.2;}
.demo-toast small{font-size:.66rem;color:#5b6b7d;}

.demo-chibi{position:absolute;right:-30%;bottom:-3%;width:46%;z-index:4;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));}
.demo-cap{font-size:.78rem;color:var(--text-faint);text-align:center;}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);
  background:var(--bg-alt);padding:1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;width:max-content;animation:tv-marquee 38s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex;flex-shrink:0;}
.marquee-group li{display:flex;align-items:center;gap:1.4rem;padding-right:1.4rem;white-space:nowrap;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--text-dim);}
.marquee-group li::after{content:"";width:.42rem;height:.42rem;border-radius:2px;background:var(--cyan);transform:rotate(45deg);opacity:.8;}
@keyframes tv-marquee{to{transform:translateX(-50%);}}

/* ---------- CÓMO FUNCIONA ---------- */
.flow-list{position:relative;width:min(1000px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;list-style:none;}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.6rem 1.4rem 1.8rem;border-radius:1.6rem;
  border:1px solid var(--panel-border);background:var(--panel);}
.flow-art{position:relative;height:9.5rem;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1rem;}
.flow-art::before{content:"";position:absolute;bottom:0;left:50%;width:8rem;height:8rem;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(53,224,208,.2),transparent);}
.flow-art img{position:relative;height:100%;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));}
.flow-num{display:inline-grid;place-items:center;min-width:2.1rem;height:2.1rem;padding:0 .5rem;border-radius:.7rem;margin-bottom:.7rem;
  background:var(--cyan);color:#04231f;font-family:var(--font-head);font-weight:700;font-size:.85rem;}
.flow-body h3{font-size:1.12rem;margin-bottom:.4rem;}
.flow-body p{font-size:.9rem;color:var(--text-dim);}

/* ---------- PRECIO ---------- */
/* Borde que gira: conic-gradient animado con @property. En navegadores sin @property
   queda un borde estático con el mismo degradado — se ve bien igual. */
@property --tv-ang{syntax:'<angle>';initial-value:0deg;inherits:false;}
.precio{padding-top:5rem;}
.precio-card{
  position:relative;width:min(460px,100%);margin:0 auto;padding:2px;border-radius:2rem;
  background:conic-gradient(from var(--tv-ang),rgba(53,224,208,.15),var(--cyan),rgba(209,168,96,.9),rgba(53,224,208,.15) 60%,rgba(53,224,208,.15));
  animation:tv-spin 6s linear infinite;
  box-shadow:0 40px 90px -40px rgba(53,224,208,.45);
}
@keyframes tv-spin{to{--tv-ang:360deg;}}
.precio-inner{position:relative;border-radius:calc(2rem - 2px);padding:1.8rem 1.6rem 1.7rem;
  background:linear-gradient(170deg,#13253a,var(--bg-alt) 60%);}
.precio-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.precio-tag{display:inline-block;padding:.3rem .7rem;border-radius:999px;background:var(--promo);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem;}
.precio-top h3{font-size:1.6rem;}
.precio-chibi{width:5.6rem;margin:-4rem -.4rem -1rem 0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));}
.precio-monto{display:flex;align-items:baseline;gap:.9rem;margin:1rem 0 .4rem;}
.precio-old{position:relative;font-family:var(--font-head);font-size:1.5rem;color:var(--text-faint);font-weight:600;}
.precio-old::after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:2.5px;border-radius:2px;background:#ff5d6c;transform:rotate(-10deg);}
.precio-new{font-family:var(--font-head);font-size:3.6rem;font-weight:700;color:var(--cyan);line-height:1;letter-spacing:-.04em;}
.precio-new small{font-size:.3em;color:var(--text-dim);font-weight:600;margin-left:.2rem;letter-spacing:0;}
.precio-nota{font-size:.84rem;color:var(--text-dim);margin-bottom:1.3rem;}
.precio-list{display:flex;flex-direction:column;gap:.65rem;padding:1.2rem 0 1.5rem;border-top:1px solid var(--panel-border);}
.precio-list li{position:relative;padding-left:1.7rem;font-size:.9rem;color:var(--text);}
.precio-list li::before{content:"";position:absolute;left:0;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:rgba(53,224,208,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335e0d0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/70% no-repeat;}
.precio-cta{width:100%;justify-content:space-between;}
.precio-wa{display:block;text-align:center;margin-top:1rem;font-size:.84rem;color:var(--text-dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--panel-border);}
.precio-wa:hover{color:var(--text);}

/* ---------- BARRA FIJA DE PROMO (celular) ---------- */
.promo-dock{
  position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:44;
  display:none;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.55rem .55rem .55rem 1rem;border-radius:1.2rem;
  background:rgba(11,21,34,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(53,224,208,.3);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.promo-dock.on{transform:none;}
.promo-dock-precio{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.promo-dock-label{font-size:.66rem;color:var(--text-faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.promo-dock-monto{font-family:var(--font-head);white-space:nowrap;}
.promo-dock-monto s{color:var(--text-faint);font-size:.9rem;text-decoration-color:#ff5d6c;text-decoration-thickness:2px;}
.promo-dock-monto b{color:var(--cyan);font-size:1.35rem;}
.promo-dock-monto small{font-size:.62rem;color:var(--text-dim);margin-left:.15rem;}
.promo-dock-btn{flex-shrink:0;}

/* ---------- Ajustes a secciones heredadas ---------- */
.faq{padding-top:3rem;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .hx{padding:7.4rem 1.25rem 3rem;}
  .hx-inner{grid-template-columns:1fr;gap:2.6rem;}
  .hx-copy{text-align:left;}
  .flow-list{grid-template-columns:1fr;max-width:34rem;}
  .promo-dock{display:flex;}
  /* En celular/tablet el botón flotante de WhatsApp tapaba el botón principal del hero
     (en 320px) y el texto de las tarjetas. Se esconde y WhatsApp pasa a vivir DENTRO de
     la barra fija de la promo (.promo-dock-wa), que nunca se monta sobre el contenido. */
  .wa-fab{display:none;}
}
@media (max-width:640px){
  .hx-title{margin-bottom:1rem;}
  .hx-sub{font-size:.98rem;}
  .hx-price{margin:1.3rem 0 1.3rem;}
  .hx-actions{flex-direction:column;align-items:stretch;gap:.9rem;}
  .hx-actions .btn{justify-content:space-between;}
  .hx-checks{gap:.4rem .9rem;}
  .hx-checks li{font-size:.78rem;}
  .demo-toast{left:-10%;top:32%;padding:.45rem .7rem .45rem .45rem;}
  .demo-toast b{font-size:.7rem;}
  .demo-toast small{font-size:.6rem;}

  .marquee{padding:.8rem 0;}
  .marquee-group li{font-size:.88rem;gap:1.1rem;padding-right:1.1rem;}


  /* Pasos: fila compacta (personaje chico a la izquierda) + línea que se llena. */
  .flow-list{gap:.8rem;padding-left:1.1rem;}
  .flow-list::before,.flow-list::after{content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:2px;border-radius:2px;}
  .flow-list::before{background:var(--panel-border);}
  .flow-list::after{background:linear-gradient(var(--cyan),var(--gold));transform-origin:top;transform:scaleY(var(--flow,0));}
  .flow-step{flex-direction:row;align-items:center;text-align:left;gap:.9rem;padding:.9rem 1rem .9rem .6rem;border-radius:1.2rem;}
  .flow-art{height:6.2rem;width:4.2rem;flex-shrink:0;margin:0;}
  .flow-art::before{width:4.6rem;height:4.6rem;}
  .flow-num{min-width:1.7rem;height:1.7rem;font-size:.72rem;border-radius:.55rem;margin-bottom:.4rem;}
  .flow-body h3{font-size:.98rem;}
  .flow-body p{font-size:.8rem;line-height:1.45;}

  .precio{padding-top:4rem;}
  .precio-inner{padding:1.5rem 1.2rem 1.4rem;}
  .precio-new{font-size:3.1rem;}
  .precio-list li{font-size:.85rem;}
  .precio-cta{font-size:.95rem;}

  /* Deja sitio abajo para que la barra fija no tape el final del footer. */
  .footer{padding-bottom:6.5rem;}
}
@media (max-width:360px){
  .hx-title{font-size:2rem;}
  .hx-new{font-size:2.9rem;}
}

@media (prefers-reduced-motion:reduce){
  .hx-promo::after,.btn-shine::after,.demo-phone,.marquee-track,.precio-card{animation:none !important;}
  .hx-promo,.hx-line > span,.hx-sub,.hx-price,.hx-actions,.hx-checks,.demo-stage{animation:none;}
  .hx-strike{animation:none;transform:rotate(-10deg) scaleX(1);}
  .hx-save{animation:none;transform:rotate(-6deg);}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center;}
  .marquee-group[aria-hidden="true"]{display:none;}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:.5rem;}
}

/* ============================================================
   RONDA 2 (2026-09-28) — funciones como mini-pantallas reales,
   páginas de cuenta (registro / login) y cinta BETA corta.
   ============================================================ */

/* Cinta BETA: en celular la versión larga ocupaba 2 líneas y tapaba el nav. */
@media (max-width:640px){
}

/* Foco visible con teclado en todo lo tocable. */
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ---------- FUNCIONES: mini-pantallas ---------- */
/* width con 100% (no var(--shell)=92vw): dentro del padding de <section> en celular, 92vw
   era más ancho que el espacio real y dejaba el margen derecho más angosto que el izquierdo. */
.show-head{width:min(1220px,100%);margin:0 auto 2.2rem;}
.show-head h2{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.035em;}
.show-grid{width:min(1220px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;}
.show-a{grid-column:span 7;}
.show-b{grid-column:span 5;}
.show-c{grid-column:span 5;}
.show-d{grid-column:span 7;}
.show-item{
  display:flex;flex-direction:column;overflow:hidden;border-radius:1.6rem;background:var(--bg-alt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -40px rgba(3,10,20,.9);
}
.show-mock{
  position:relative;height:15.5rem;display:flex;align-items:center;justify-content:center;gap:1.2rem;overflow:hidden;
  background:
    radial-gradient(70% 90% at 50% 110%,rgba(53,224,208,.13),transparent 70%),
    linear-gradient(180deg,#132338,#0e1a2a);
}
.show-copy{padding:1.15rem 1.4rem 1.35rem;}
.show-copy h3{font-size:1.18rem;margin-bottom:.2rem;}
.show-copy p{color:var(--text-dim);font-size:.9rem;}
.show-more{width:min(1220px,100%);margin:1.5rem auto 0;color:var(--text-dim);font-size:.92rem;text-wrap:balance;}
.show-more b{color:var(--text);font-weight:600;}

/* Superficie "de producto": blanca, como se ve un catálogo real, contra el fondo navy. */
.mk-card,.mk-ticket,.mk-stock,.mk-mini{background:#fff;color:#14161a;box-shadow:0 24px 44px -20px rgba(2,8,18,.85);}

/* Tallas y colores */
.mk-card{display:flex;gap:.9rem;width:min(21rem,86%);padding:.7rem;border-radius:1rem;}
.mk-ph{width:42%;aspect-ratio:1;border-radius:.7rem;overflow:hidden;background:#eef0f3;flex-shrink:0;}
.mk-ph img{width:100%;height:100%;object-fit:cover;}
.mk-info{display:flex;flex-direction:column;min-width:0;justify-content:center;}
.mk-info b{font-size:.84rem;margin-bottom:.3rem;}
.mk-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;color:#8a9099;margin:.3rem 0 .25rem;font-weight:700;}
.mk-chips{display:flex;gap:.28rem;}
.mk-chips span{min-width:1.75rem;padding:.26rem .3rem;border-radius:.4rem;border:1px solid #d9dce1;font-size:.68rem;font-weight:700;text-align:center;
  transition:background .3s,color .3s,border-color .3s;}
.mk-chips span.on{background:#14161a;color:#fff;border-color:#14161a;}
.mk-dots{display:flex;gap:.45rem;padding-left:.15rem;}
.mk-dots i{width:1.05rem;height:1.05rem;border-radius:50%;box-shadow:0 0 0 1px #d0d3d8;transition:box-shadow .3s;}
.mk-dots i.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #14161a;}
.d1{background:#1c1c1e;}
.d2{background:#f1f1f1;}
.d3{background:#c9a47a;}

/* Ofertas */
.mk-ticket{position:relative;width:min(15rem,74%);padding:1.1rem 1.25rem 1rem;border-radius:1rem;transform:rotate(-3deg);}
.mk-ticket b{display:block;font-size:.9rem;}
.mk-price{display:flex;align-items:baseline;gap:.6rem;margin:.35rem 0 .2rem;font-family:var(--font-head);font-weight:700;}
.mk-price s{position:relative;color:#9aa0a8;text-decoration:none;font-size:1rem;}
.mk-price s::after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:2px;border-radius:2px;background:#e5484d;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.mk-price strong{display:inline-block;font-size:2.2rem;line-height:1;letter-spacing:-.03em;color:#14161a;opacity:.2;
  transform:scale(.86);transform-origin:left bottom;transition:opacity .3s,color .3s,transform .5s cubic-bezier(.34,1.56,.64,1);}
.mk-ticket.on .mk-price s::after{transform:scaleX(1);}
.mk-ticket.on .mk-price strong{opacity:1;transform:none;color:#e5484d;}
.mk-ticket small{font-size:.72rem;color:#6b7280;}
.mk-flag{position:absolute;top:-.85rem;right:-.8rem;padding:.42rem .6rem;border-radius:.5rem;background:#e5484d;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1rem;transform:rotate(8deg);box-shadow:0 10px 20px -8px rgba(229,72,77,.7);}
.mk-ticket.on .mk-flag{animation:mk-wiggle .7s var(--ease);}
@keyframes mk-wiggle{30%{transform:rotate(-5deg) scale(1.14);}65%{transform:rotate(12deg);}100%{transform:rotate(8deg);}}

/* Stock */
.mk-stock{width:min(19rem,84%);padding:.9rem;border-radius:1rem;}
.mk-row{display:flex;align-items:center;gap:.75rem;}
.mk-row img{width:3.3rem;height:3.3rem;border-radius:.6rem;object-fit:cover;background:#eef0f3;flex-shrink:0;}
.mk-row b{display:block;font-size:.84rem;}
.mk-left{font-size:.76rem;color:#6b7280;}
.mk-left em{display:inline-block;font-style:normal;font-weight:800;color:#14161a;font-variant-numeric:tabular-nums;}
.mk-left em.tick{animation:mk-tick .4s var(--ease);}
@keyframes mk-tick{from{transform:translateY(-70%);opacity:0;}to{transform:none;opacity:1;}}
.mk-bar{height:.42rem;border-radius:99px;background:#eceef1;margin:.85rem 0;overflow:hidden;}
.mk-bar i{display:block;height:100%;border-radius:inherit;background:#1f9d6b;transform-origin:left;transition:transform .5s var(--ease),background .3s;}
.mk-stock.bajo .mk-bar i{background:#f59e0b;}
.mk-btn{display:block;text-align:center;padding:.55rem;border-radius:.6rem;background:#14161a;color:#fff;font-size:.74rem;font-weight:700;transition:transform .15s;}
.mk-btn.press{transform:scale(.94);}

/* Con tu marca */
.show-d .show-mock{--acc:#2e86de;}
.mk-mini{width:min(12.5rem,58%);border-radius:1rem;overflow:hidden;}
.mk-mini-head{display:flex;align-items:center;gap:.5rem;padding:.7rem;background:var(--acc);color:#fff;transition:background .5s var(--ease);}
.mk-mini-logo{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.5rem;background:#fff;color:var(--acc);
  font-size:.6rem;font-weight:800;transition:color .5s var(--ease);}
.mk-mini-head b{font-size:.8rem;}
.mk-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.6rem;}
.mk-mini-grid i{position:relative;aspect-ratio:1.55;border-radius:.5rem;background:#f0f1f4;}
.mk-mini-grid i::after{content:"";position:absolute;left:.35rem;right:45%;bottom:.35rem;height:.34rem;border-radius:99px;background:var(--acc);
  transition:background .5s var(--ease);}
.mk-swatches{display:flex;flex-direction:column;gap:.6rem;padding:.55rem;border-radius:99px;background:rgba(255,255,255,.07);}
.mk-swatches i{width:1.3rem;height:1.3rem;border-radius:50%;transition:box-shadow .3s;}
.mk-swatches i.on{box-shadow:0 0 0 2px #0e1a2a,0 0 0 3.5px #fff;}
.s1{background:#2e86de;}
.s2{background:#c8963e;}
.s3{background:#d9486f;}
.s4{background:#1f9d6b;}

@media (max-width:920px){
  .show-a,.show-b,.show-c,.show-d{grid-column:span 6;}
}
@media (max-width:640px){
  .show-head{margin-bottom:1.6rem;}
  .show-grid{gap:.8rem;}
  .show-a,.show-b,.show-c,.show-d{grid-column:1 / -1;}
  .show-item{border-radius:1.3rem;}
  .show-mock{height:12.5rem;}
  .show-copy{padding:1rem 1.15rem 1.15rem;}
  .show-copy h3{font-size:1.05rem;}
  .show-copy p{font-size:.85rem;}
  .show-more{font-size:.85rem;}
  /* Mismo problema de 92vw en las tarjetas del hub (grilla de styles.css de producción). */
  .hub-grid{width:100%;}
}

/* ============================================================
   CUENTA — registro.html y login.html. Pantalla partida en PC
   (lado izquierdo fijo con la promo, formulario a la derecha),
   una sola columna en celular. Sin scroll interno en la tarjeta:
   la página scrollea normal, como cualquier sitio.
   ============================================================ */
.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:calc(100dvh - 2.1rem);}
.au-side{
  position:sticky;top:2.1rem;height:calc(100dvh - 2.1rem);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:2.2rem 2.8rem 2.4rem;
  background:
    radial-gradient(60% 55% at 15% 10%,rgba(53,224,208,.16),transparent 70%),
    var(--bg-alt);
  border-right:1px solid var(--panel-border);
}
.au-side-body{max-width:26rem;}
.au-side h2{font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:-.035em;line-height:1.05;margin-bottom:1.4rem;text-wrap:balance;}
.au-side h2 em{font-style:normal;color:var(--cyan);}
.au-side p{color:var(--text-dim);font-size:1rem;max-width:22rem;}

.au-ticket{display:inline-flex;align-items:baseline;gap:.7rem;padding:.8rem 1.1rem;border-radius:1rem;margin-bottom:1.6rem;
  background:rgba(255,255,255,.04);border:1px solid var(--panel-border);}
.au-ticket span{font-size:.8rem;font-weight:600;color:var(--text-dim);align-self:center;}
.au-ticket s{font-family:var(--font-head);color:var(--text-faint);text-decoration-color:#ff5d6c;text-decoration-thickness:2px;}
.au-ticket b{font-family:var(--font-head);font-size:1.9rem;color:var(--cyan);line-height:1;letter-spacing:-.03em;}
.au-ticket small{font-size:.75rem;color:var(--text-dim);margin-left:-.4rem;}

.au-steps{list-style:none;display:flex;flex-direction:column;gap:.75rem;}
.au-steps li{display:flex;align-items:center;gap:.8rem;font-size:.95rem;color:var(--text);}
.au-steps b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.55rem;flex-shrink:0;
  background:rgba(53,224,208,.12);color:var(--cyan);font-family:var(--font-head);font-size:.8rem;}
.au-steps em{font-style:normal;color:var(--text-faint);}

.au-proof{display:flex;align-items:center;gap:.8rem;position:relative;z-index:1;max-width:60%;}
.au-avatars{display:flex;flex-shrink:0;}
.au-avatars img{width:2.2rem;height:2.2rem;border-radius:.7rem;object-fit:cover;background:#fff;border:2px solid var(--bg-alt);}
.au-avatars img + img{margin-left:-.6rem;}
.au-proof span{font-size:.8rem;color:var(--text-dim);line-height:1.35;}
.au-chibi{position:absolute;right:-1rem;bottom:-1rem;width:min(15rem,38%);z-index:0;pointer-events:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));}

.au-main{display:flex;flex-direction:column;padding:1.6rem 2rem 3rem;}
.au-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.au-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--text-dim);transition:color .2s;}
.au-back:hover{color:var(--text);}
.au-back svg{width:1rem;height:1rem;}
.au-logo-m{display:none;}
.au-form{width:min(25rem,100%);margin:auto;padding:1rem 0;}
.au-form h1{font-size:clamp(1.9rem,4vw,2.3rem);letter-spacing:-.03em;margin-bottom:.35rem;}
.au-sub{color:var(--text-dim);font-size:.95rem;margin-bottom:1.4rem;}
.au-promo-m{display:none;}
.au-progress{height:3px;border-radius:3px;background:var(--panel-border);overflow:hidden;margin-bottom:1.6rem;}
.au-progress i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#8ff2e8);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}

.au-form .field{margin-bottom:1.05rem;}
.au-form .field label{margin-bottom:.4rem;}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.field-top a{font-size:.8rem;color:var(--cyan);font-weight:600;}
.au-form .field-hint{margin-top:.35rem;}
/* Validación en vivo: borde + check cuando el campo ya está bien, rojo solo al salir
   del campo con algo inválido (no mientras recién escribes). */
.au-form .input-wrap input{transition:border-color .25s var(--ease),background-color .25s var(--ease);}
.au-form .input-wrap input.is-ok{
  border-color:rgba(53,224,208,.55);padding-right:2.6rem;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335e0d0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right .95rem center/1rem;
}
.au-form .input-wrap input.is-ok:focus{background-color:var(--bg-soft);}
.au-form .input-wrap input#password.is-ok{background-position:right 5.3rem center;padding-right:6.6rem;}
.au-form .input-wrap input.is-bad{border-color:#e0685f;}
.au-form .check-row{margin:1.2rem 0 1.1rem;}
.au-form .auth-submit{justify-content:space-between;padding:.95rem .95rem .95rem 1.4rem;font-size:.98rem;}
.au-foot{margin-top:1.4rem;text-align:center;font-size:.9rem;color:var(--text-dim);}
.au-foot a{color:var(--cyan);font-weight:600;}
.au-foot a:hover{text-decoration:underline;}

@media (max-width:900px){
  .au{grid-template-columns:1fr;min-height:0;}
  .au-side{display:none;}
  .au-main{padding:1rem 1.25rem 2.5rem;}
  .au-top{margin-bottom:.6rem;}
  .au-logo-m{display:flex;}
  .au-form{margin:0 auto;padding-top:1.2rem;}
  .au-promo-m{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem .55rem .55rem;margin-bottom:1.4rem;border-radius:.9rem;
    background:var(--promo-soft);border:1px solid var(--promo-line);font-size:.82rem;color:var(--text);}
  .au-promo-m .hx-promo-tag{flex-shrink:0;}
  .au-promo-m b{color:var(--cyan);font-family:var(--font-head);}
}

/* WhatsApp dentro de la barra fija (solo existe en celular/tablet, ver arriba). */
.promo-dock-wa{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;flex-shrink:0;margin-left:auto;
  background:#25d366;color:#fff;transition:transform .2s var(--ease);}
.promo-dock-wa svg{width:1.4rem;height:1.4rem;}
.promo-dock-wa:active{transform:scale(.92);}
.promo-dock{gap:.55rem;}
/* Titular: reparte las palabras parejo, sin dejar "link." solo en una línea. */
.hx-line > span{text-wrap:balance;}
@media (max-width:360px){
  .promo-dock-label{display:none;}
  .promo-dock{padding-left:.8rem;}
}

@media (max-width:920px){
  /* Sin los links del medio, "Crear cuenta" quedaba flotando al centro del nav. */
  .nav-actions{margin-left:auto;}
}
@media (max-width:560px){
  /* Footer: 2 columnas en vez de una lista larguísima; la marca ocupa todo el ancho. */
  .footer-inner{grid-template-columns:1fr 1fr;gap:1.8rem 1.2rem;}
  .footer-brand{grid-column:1 / -1;}
  .footer-col a{margin-bottom:.55rem;font-size:.88rem;}
}

/* ============================================================
   RONDA 3 (2026-09-29)
   ============================================================ */
.hx-price-note{margin:-.7rem 0 1.5rem;font-size:.86rem;color:var(--text-dim);}
.hx-price-note b{color:var(--text);font-weight:700;}

/* Íconos de botones en SVG (antes era el carácter "↗", que cada celular dibuja distinto). */
.btn-icon svg{display:block;width:1rem;height:1rem;}
.btn-small .btn-icon svg{width:.9rem;height:.9rem;}
.btn:hover .btn-icon{transform:translateX(2px);}

/* En pantallas táctiles el :hover se queda "pegado" después de tocar (iPhone/Android):
   la tarjeta quedaba levantada. Los efectos de hover solo existen con mouse. */
@media (hover:none){
  .vitrina-card:hover,.hub-card-active:hover,.hub-card-owned:hover,.step:hover{transform:none;box-shadow:none;}
  .vitrina-card:hover .vitrina-media img{transform:none;}
  .hx-promo:hover svg{transform:none;}
}

/* iPhone hace zoom automático al tocar un campo con letra menor a 16px y la página queda
   corrida. En celular/tablet los campos de cuenta van a 16px exactos. */
@media (max-width:900px){
  .au-form .input-wrap input{font-size:16px;}
}

/* Celular acostado (poca altura): el menú de pantalla completa no entraba entero. */
@media (max-height:500px) and (orientation:landscape){
  .nav-overlay{justify-content:flex-start;padding:5.5rem 1rem 1.5rem;gap:.9rem;overflow-y:auto;}
  .overlay-link{font-size:1.2rem;}
}

/* Personaje junto al celular: el celular + lo que sobresale el personaje se centran JUNTOS
   (margin-right = lo que sobresale), así nunca se sale del borde de la pantalla — antes se
   cortaba en todos los celulares y en iPad horizontal. */
.demo-stage{margin-right:calc(min(290px,74vw) * .3);}
@media (max-width:640px){
  .demo-stage{width:min(250px,62vw);margin-right:calc(min(250px,62vw) * .36);}
  .demo-chibi{right:-36%;width:40%;}
}
/* Celulares muy angostos (≤380px): "Crear cuenta" queda solo con su ícono, si no el
   botón del menú se salía de la pantalla. El texto sigue para lectores de pantalla. */
@media (max-width:380px){
  .nav-actions .btn-small{padding:.5rem;}
  .nav-actions .btn-small > span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .nav-actions .btn-small .btn-icon{width:1.7rem;height:1.7rem;}
}

/* Cabecera del chat de WhatsApp: nombre y "en línea" juntos, como en la app real. */
.demo-wa-head div{display:flex;flex-direction:column;line-height:1.2;}

/* Celular acostado: titular y celular de la demo a escala de la poca altura disponible. */
@media (max-height:500px) and (orientation:landscape){
  .hx{padding-top:6.2rem;}
  .hx-title{font-size:2.3rem;}
  .hx-new{font-size:2.8rem;}
  .demo-stage{width:210px;margin-right:calc(210px * .3);}
}

/* Demo en celulares angostos (≤360px): la tarjeta mide ~90px y "PRESENTACIÓN 60 ml" no
   entraba. Recorte con "…" como red de seguridad en anchos intermedios. */
.dc-var-head{gap:.15rem;}
.dc-var-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dc-var-head em{white-space:nowrap;}
@media (max-width:380px){
  /* A este ancho solo el valor elegido ("60 ml", "37"): la etiqueta cortada con "…" y el
     valor partido en 2 líneas se veía roto. Los botones de abajo ya dicen qué es. */
  .dc-var-head span{display:none;}
}

/* ============================================================
   RONDA 7 (2026-09-29) — registro y login más profesionales:
   ejemplos DEBAJO del campo (no dentro), contraste AA en todo
   texto chico, selector de país para el WhatsApp, requisitos de
   la contraseña a la vista, y sin las lucecitas del fondo.
   ============================================================ */
/* --text-faint (#64768c) sobre el navy da 3.6:1: no llega al mínimo AA (4.5:1) para letra
   chica. --text-soft da ~6:1 y se usa en ayudas, contadores y notas. */
:root{--text-soft:#8fa1b6;--campo-bg:#0a1522;--campo-borde:rgba(255,255,255,.2);}

/* Las estrellas y partículas del fondo (script.js) pasaban por encima/detrás del formulario
   y se veían como puntos sueltos rotos: en las páginas de cuenta no van. */
.au-page .bg-stars,.au-page .bg-anim{display:none;}
.au-page .au-side{background:var(--bg-alt);}
.au-page .au-main{background:var(--bg);}
.au-steps em{color:var(--text-soft);}
.au-ticket s{color:var(--text-soft);}
.au-proof span{color:var(--text-dim);}

.au-form{width:min(27rem,100%);}
.au-sub{margin-bottom:1.2rem;}
.au-progress{margin-bottom:.75rem;}
.au-req{font-size:.8rem;color:var(--text-soft);margin-bottom:1.5rem;}

.au-form .field{margin-bottom:1.35rem;}
.au-form .field label{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:.45rem;}
.au-form .field-top{margin-bottom:.45rem;align-items:center;}
.au-form .field-top label{margin-bottom:0;}
.field-count{font-size:.76rem;color:var(--text-soft);font-variant-numeric:tabular-nums;}

/* Campos: fondo un poco más hundido que la página y borde visible (≥3:1, WCAG 1.4.11). */
.au-form .input-wrap input{background-color:var(--campo-bg);border-color:var(--campo-borde);border-radius:.8rem;
  font-size:1rem;padding:.82rem 1rem;}
.au-form .input-wrap input:hover{border-color:rgba(255,255,255,.3);}
.au-form .input-wrap input:focus{border-color:var(--cyan);background-color:#0c1a2a;box-shadow:0 0 0 3px rgba(53,224,208,.16);}
.au-form .input-wrap input.is-ok,.au-form .input-wrap input.is-ok:focus{background-color:var(--campo-bg);}
.au-form .input-wrap input.is-bad{border-color:#ff8f86;box-shadow:0 0 0 3px rgba(255,143,134,.12);}
.au-form .pw-toggle{color:var(--text-dim);font-weight:600;font-size:.8rem;padding:.35rem .4rem;}
.au-form .pw-toggle:hover{color:var(--text);}

/* Ejemplo en su propia línea, arriba de la regla: se lee primero cómo tiene que verse. */
.au-form .field-hint{font-size:.8rem;line-height:1.5;color:var(--text-soft);margin-top:.5rem;}
.hint-ej{display:block;color:var(--text-dim);font-weight:600;margin-bottom:.1rem;}
.au-form .field-error{font-size:.82rem;line-height:1.45;color:#ff9f97;margin-top:.4rem;}

/* WhatsApp: país (bandera + código) + número, en una sola fila. */
.tel-group{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;}
.tel-pais{position:relative;display:flex;align-items:center;gap:.45rem;padding:0 .75rem 0 .8rem;border-radius:.8rem;
  background:var(--campo-bg);border:1px solid var(--campo-borde);font-weight:600;font-size:.95rem;color:var(--text);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.tel-pais:hover{border-color:rgba(255,255,255,.3);}
.tel-pais:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,224,208,.16);}
.tel-flag{display:block;width:1.4rem;height:.94rem;border-radius:.18rem;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.28);}
.tel-flag svg{display:block;width:100%;height:100%;}
.tel-cod{font-variant-numeric:tabular-nums;min-width:2.6rem;}
.tel-caret{width:.9rem;height:.9rem;color:var(--text-soft);flex-shrink:0;}
.tel-pais select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;}

/* Requisitos de la contraseña: se van marcando mientras escribe. */
.pw-reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.6rem,1fr));gap:.4rem .9rem;margin-top:.65rem;list-style:none;}
.pw-reglas li{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-soft);transition:color .25s;}
.pw-reglas li::before{content:"";width:1rem;height:1rem;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
  transition:background-color .25s,box-shadow .25s;}
.pw-reglas li.ok{color:var(--text);}
.pw-reglas li.ok::before{box-shadow:none;background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304231f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/72% no-repeat;}
.pw-reglas + .field-hint{margin-top:.55rem;}

/* Aceptación: casilla más grande y fácil de tocar; en rojo si falta al intentar crear. */
.au-form .check-row{margin:1.5rem 0 .4rem;font-size:.86rem;color:var(--text-dim);gap:.7rem;}
.au-form .check-row input[type=checkbox]{width:1.2rem;height:1.2rem;margin-top:.12rem;}
.au-form .check-row.is-bad input[type=checkbox]{outline:2px solid #ff8f86;outline-offset:2px;}
.field-error-check{margin:0 0 .4rem 1.9rem;}

/* Botón: se ve apagado hasta que todo está bien (pero al tocarlo marca lo que falta). */
.au-form .auth-submit{margin-top:1.1rem;}
.au-form .auth-submit[aria-disabled="true"]{background:#1b2e42;color:#a7b6c7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.au-form .auth-submit[aria-disabled="true"] .btn-icon{background:rgba(255,255,255,.07);}
.au-form .auth-submit[aria-disabled="true"]::after{display:none;}
.au-form .auth-submit[aria-disabled="true"]:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
.au-falta{margin-top:.6rem;text-align:center;font-size:.8rem;color:var(--text-soft);}
.au-falta.oculto{visibility:hidden;}

.au-legal{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--panel-border);font-size:.78rem;line-height:1.55;color:var(--text-soft);}
.au-legal a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px;}
.au-legal a:hover{color:var(--text);}
.au-foot{margin-top:1.6rem;}
/* Con error a la vista, la ayuda del campo se oculta: el error ya dice qué corregir (con
   ejemplo) y así no se apilan 4 líneas de texto bajo un campo. */
.au-form .field.has-error .field-hint{display:none;}

/* ============================================================
   RONDA 6 (2026-09-29) — landing con sesión iniciada. El <head>
   pone <html class="con-sesion"> si hay token: se esconde todo lo
   que vende y aparece el inicio tipo panel (.ses).
   ============================================================ */
html:not(.con-sesion) .solo-sesion{display:none !important;}
.con-sesion .solo-visitante{display:none !important;}

.ses{padding:9.2rem 1.5rem 2rem;}
.ses-inner{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem;align-items:stretch;}
.ses-guia{display:flex;align-items:flex-end;gap:1.8rem;padding:2.2rem 2.4rem 0;border-radius:1.8rem;overflow:hidden;
  background:linear-gradient(160deg,rgba(53,224,208,.1),var(--bg-alt) 62%);border:1px solid var(--panel-border);}
.ses-chibi{width:8.2rem;height:auto;flex-shrink:0;align-self:flex-end;filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));}
.ses-copy{padding-bottom:2.2rem;min-width:0;}
.ses-copy h1{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.03em;line-height:1.08;margin:.9rem 0 .6rem;overflow-wrap:anywhere;}
.ses-copy h1 span{color:var(--cyan);}
.ses-copy p{color:var(--text-dim);font-size:1.02rem;max-width:28rem;margin-bottom:1.5rem;}
.ses-accesos{display:flex;flex-direction:column;gap:.75rem;}
.ses-acceso{flex:1;display:flex;align-items:center;gap:1rem;padding:1.05rem 1.15rem;border-radius:1.3rem;
  background:var(--panel);border:1px solid var(--panel-border);transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.ses-acceso:hover{border-color:var(--cyan-dim);background:rgba(255,255,255,.065);}
.ses-acceso:hover .ses-flecha{transform:translateX(3px);color:var(--text);}
.ses-ico{display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:.95rem;flex-shrink:0;background:rgba(53,224,208,.12);color:var(--cyan);}
.ses-ico svg{width:1.3rem;height:1.3rem;}
.ses-ico-wa{background:rgba(37,211,102,.14);color:#25d366;}
.ses-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3;}
.ses-txt b{font-family:var(--font-head);font-size:1.02rem;font-weight:600;}
.ses-txt small{font-size:.85rem;color:var(--text-dim);margin-top:.15rem;}
.ses-flecha{width:1.1rem;height:1.1rem;color:var(--text-soft);flex-shrink:0;transition:transform .3s var(--ease),color .3s;}

/* Nav con sesión: saludo con avatar + "Mi panel". */
.nav-usuario{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--text-dim);max-width:13rem;min-width:0;}
.nav-usuario [data-usuario]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-usuario-av{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;flex-shrink:0;background:rgba(53,224,208,.12);color:var(--cyan);}
.nav-usuario-av svg{width:1.05rem;height:1.05rem;}
.overlay-salir{background:none;border:0;cursor:pointer;font-family:inherit;color:var(--text-dim);}
.footer-salir{display:block;background:none;border:0;padding:0;margin-bottom:.7rem;cursor:pointer;font:inherit;font-size:.92rem;color:var(--text-dim);text-align:left;transition:color .3s var(--ease);}
.footer-salir:hover{color:var(--text);}
.con-sesion .hub{padding-top:3.5rem;}

@media (max-width:920px){
  .ses{padding:7.6rem 1.25rem 1.5rem;}
  .ses-inner{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .ses{padding-top:7rem;}
  .ses-guia{gap:1rem;padding:1.5rem 1.3rem 0;border-radius:1.4rem;}
  .ses-chibi{width:5.2rem;}
  .ses-copy{padding-bottom:1.5rem;}
  .ses-copy h1{font-size:1.8rem;margin-top:.7rem;}
  .ses-copy p{font-size:.92rem;margin-bottom:1.2rem;}
  .ses-copy .btn{width:100%;justify-content:space-between;}
  .ses-acceso{padding:.9rem 1rem;}
  .ses-txt small{font-size:.8rem;}
}
@media (max-width:560px){
  .nav-usuario{display:none;}
}
@media (max-width:380px){
  .ses-chibi{display:none;}
}

/* ============================================================
   RONDA 9 (2026-09-29) — pulido de la landing sin sesión:
   contraste de letra chica, títulos de sección alineados igual,
   "Hecho para vender" en tarjetas parejas y casi cuadradas, menos
   aire muerto entre secciones, footer en una sola fila.
   ============================================================ */
/* Gris "tenue": de #64768c (3.6:1, bajo el mínimo AA) a #8295ab (5.5:1). Sigue siendo el tono
   más apagado de la paleta, pero ya se lee en letras chicas (etiquetas, notas, footer). */
:root{--text-faint:#8295ab;}

/* Fondo: las partículas que suben y titilan (script.js) se leían como puntos de luz sueltos
   sobre los botones y textos. Queda solo la textura quieta de estrellas, más suave. */
.bg-anim{display:none;}
.bg-stars{opacity:.35;}

/* Menos aire muerto: con 7rem arriba y abajo, entre dos secciones quedaban ~220px vacíos. */
section{padding-top:5.2rem;padding-bottom:5.2rem;}
.vitrina{padding:5.2rem 0;}
.precio{padding-top:5.2rem;}
.faq{padding:5.2rem 0;}

/* Todos los títulos de sección centrados, como "Cómo funciona" y "Precio". */
.vitrina-head{position:relative;flex-direction:column;align-items:center;text-align:center;}
.vitrina-head .section-sub{margin-top:.9rem;}
.vitrina-arrows{position:absolute;right:0;bottom:0;}
.show-head{text-align:center;}

/* "Hecho para vender": 4 tarjetas iguales. En PC en una fila (casi cuadradas); en tablet y
   celular 2x2, como las tarjetas del panel. Las mini-pantallas se achican con zoom (achica
   también su layout, a diferencia de transform:scale) para calzar en tarjetas más chicas. */
.show-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.show-a,.show-b,.show-c,.show-d{grid-column:auto;}
.show-mock{height:auto;aspect-ratio:5/4;gap:.9rem;}
.show-mock > *{zoom:.74;}
.show-copy{padding:1.05rem 1.2rem 1.25rem;}
.show-copy h3{font-size:1.08rem;}
.show-copy p{font-size:.88rem;line-height:1.5;}
.show-more{text-align:center;}
@media (max-width:920px){
  .show-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .show-a,.show-b,.show-c,.show-d{grid-column:auto;}
  .show-mock{aspect-ratio:16/10;}
  .show-mock > *{zoom:.82;}
}
@media (max-width:640px){
  section{padding-top:3.8rem;padding-bottom:3.8rem;}
  .vitrina{padding:3.8rem 0;}
  .precio{padding-top:3.8rem;}
  .faq{padding:3.8rem 0;}
  .show-grid{gap:.65rem;}
  .show-a,.show-b,.show-c,.show-d{grid-column:auto;}
  .show-item{border-radius:1.15rem;}
  .show-mock{height:auto;aspect-ratio:1/.92;gap:.5rem;}
  .show-mock > *{zoom:.5;}
  .show-copy{padding:.8rem .85rem .95rem;}
  .show-copy h3{font-size:.95rem;line-height:1.25;margin-bottom:.25rem;}
  .show-copy p{font-size:.8rem;line-height:1.45;}
}

/* "Próximamente": antes toda la tarjeta a 50% de opacidad dejaba el texto en ~3:1. Ahora el
   texto se lee normal y lo "apagado" es solo el personaje. */
.hub-card-soon{opacity:1;}
.hub-card-soon .hub-card-media img{opacity:.55;filter:grayscale(.6) drop-shadow(0 10px 16px rgba(0,0,0,.5));}
.hub-card-soon h3{color:var(--text-dim);}

/* Contacto: las letras chicas del celular (subtítulos, pista de abajo) a gris legible. */
.contact-txt small{color:var(--text-soft);font-size:.7rem;}
.contact-screen-hint{color:var(--text-soft);}
.contact-arrow{color:var(--text-soft);}

/* Footer: marca + 4 columnas en UNA fila ("Comunidad" ya no cae sola a otra fila). */
.footer-inner{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:2rem;}
.footer-brand p{color:var(--text-soft);}
.footer-bottom{color:var(--text-soft);}
.footer-libro{display:inline-flex !important;align-items:center;gap:.45rem;}
.footer-libro svg{width:1rem;height:1rem;flex-shrink:0;}
@media (max-width:920px){
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-brand{grid-column:1 / -1;}
}

/* Nota legal bajo la tarjeta de precio + marcador de dato pendiente (solo BETA). */
.precio-legal{margin-top:.9rem;text-align:center;font-size:.76rem;line-height:1.5;color:var(--text-soft);}
.pendiente{padding:0 .3rem;border-radius:.3rem;border:1px dashed #e8c88a;color:#f0d49c;-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:anywhere;}

/* Títulos de sección todos del mismo tamaño (antes "Clientes reales" salía más chico y
   "Hecho para vender" más grande que el resto). */
.section-head h2,.vitrina-head h2,.show-head h2{font-size:clamp(1.85rem,3.6vw,2.6rem);letter-spacing:-.03em;line-height:1.12;}
.show-mock > *{zoom:.8;}
@media (max-width:920px){ .show-mock > *{zoom:.84;} }
@media (max-width:640px){ .show-mock > *{zoom:.56;} }
@media (max-width:360px){ .show-mock > *{zoom:.5;} }
/* Celulares angostos (≤380px) con sesión: "Mi panel" conserva su texto (una flecha sola no
   dice a dónde lleva) y suelta el ícono, que es lo que no entraba. */
@media (max-width:380px){
  .nav-actions-sesion .btn-small{padding:.55rem .95rem;}
  .nav-actions-sesion .btn-small > span:first-child{position:static;width:auto;height:auto;overflow:visible;clip:auto;}
  .nav-actions-sesion .btn-small .btn-icon{display:none;}
}
/* ============================================================
   RONDA 10 (2026-09-29) — celular "como app": Clientes reales en
   grilla quieta, respuesta visual al TOCAR (en pantallas táctiles
   no existe el hover) y todo lo tocable con tamaño de dedo (≥40px).
   ============================================================ */

/* ---------- Clientes reales en celular: grilla 2 por fila ----------
   La primera tarjeta va a lo ancho (destacada) y las otras 6 quedan en 3 filas parejas de 2:
   con 7 clientes, así ninguna queda sola al final. script-beta.js pone .es-grilla (≤640px). */
.vitrina-track.es-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;overflow:visible;
  padding:0 1.25rem;cursor:default;user-select:auto;}
.vitrina-wrap.es-grilla::before,.vitrina-wrap.es-grilla::after{display:none;}
.vitrina-track.es-grilla .vitrina-card{width:auto;border-radius:1.15rem;}
.vitrina-track.es-grilla .vitrina-card:first-child{grid-column:1 / -1;}
.vitrina-track.es-grilla .vitrina-card:first-child .vitrina-media{aspect-ratio:16/10;}
.vitrina-track.es-grilla .vitrina-body{padding:.75rem .8rem .8rem;}
.vitrina-track.es-grilla .vitrina-body h3{font-size:.92rem;line-height:1.2;}
.vitrina-track.es-grilla .vitrina-body p{font-size:.72rem;color:rgba(255,255,255,.8);}
.vitrina-track.es-grilla .vitrina-card:first-child .vitrina-body h3{font-size:1.08rem;}
/* Celulares muy angostos (<360px): de uno en uno, en formato apaisado para que la lista no
   se haga eterna. */
@media (max-width:359px){
  .vitrina-track.es-grilla{grid-template-columns:1fr;}
  .vitrina-track.es-grilla .vitrina-media{aspect-ratio:16/10;}
}

/* ---------- Respuesta al tocar (pantallas táctiles) ----------
   Se quita el rectángulo gris/azul que pinta el celular por defecto al tocar un link y se
   reemplaza por el mismo "encendido" cian de la marca: la tarjeta se hunde un poco y se ilumina
   su borde mientras el dedo está encima, como el botón de una app. */
a,button,summary,label,select{-webkit-tap-highlight-color:transparent;}
@media (hover:none){
  .vitrina-card,.hub-card-active,.ses-acceso,.contact-social,.faq-item summary,.footer-col a,.footer-salir,
  .overlay-link,.hx-promo,.precio-wa{transition:transform .14s var(--ease),border-color .14s,box-shadow .14s,background-color .14s,color .14s;}
  .vitrina-card:active,.hub-card-active:active{transform:scale(.97);border-color:var(--cyan-dim);
    box-shadow:0 0 0 3px rgba(53,224,208,.16),0 14px 30px -16px rgba(53,224,208,.45);}
  .ses-acceso:active,.contact-social:active{transform:scale(.98);border-color:var(--cyan-dim);background-color:rgba(53,224,208,.08);}
  .faq-item summary:active{background-color:rgba(53,224,208,.07);}
  .footer-col a:active,.footer-salir:active,.overlay-link:active,.precio-wa:active{color:var(--cyan);}
  .hx-promo:active{transform:scale(.98);border-color:#ff7884;}
  .nav-burger:active{transform:scale(.92);}
}
/* Texto seleccionado con el color de la marca (en vez del azul del sistema). */
::selection{background:rgba(53,224,208,.3);color:#fff;}

/* ---------- Tamaño de dedo: nada tocable por debajo de ~40px de alto ---------- */
@media (max-width:920px){
  .nav-actions .btn-small{min-height:2.6rem;}
  .nav-burger{width:2.75rem;height:2.75rem;}
  .precio-wa{padding:.65rem 0;margin-top:.4rem;}
  .contact-social{min-height:2.75rem;}
  .footer-col a,.footer-salir{margin-bottom:0;padding:.55rem 0;}
  .footer-col h4{margin-bottom:.35rem;}
  .au-back{padding:.55rem .4rem .55rem 0;}
  .au-form .pw-toggle{min-height:2.5rem;padding:0 .6rem;right:.4rem;}
  .field-top a{padding:.5rem 0;}
  .au-foot a{display:inline-block;padding:.55rem .15rem;}
  .au-form .check-row{padding:.35rem 0;}
}

/* Clientes reales en celular: el nombre va DEBAJO de la foto, no encima. En tarjetas chicas
   el texto sobre portadas muy cargadas (logos, afiches) no se leía. */
.vitrina-track.es-grilla .vitrina-media{aspect-ratio:auto;}
.vitrina-track.es-grilla .vitrina-media::after{display:none;}
.vitrina-track.es-grilla .vitrina-media img{display:block;height:auto;aspect-ratio:1;}
.vitrina-track.es-grilla .vitrina-card:first-child .vitrina-media{aspect-ratio:auto;}
.vitrina-track.es-grilla .vitrina-card:first-child .vitrina-media img{aspect-ratio:16/9;}
.vitrina-track.es-grilla .vitrina-body{position:static;background:var(--bg-alt);border-top:1px solid var(--panel-border);}
.vitrina-track.es-grilla .vitrina-body p{color:var(--text-dim);margin-top:.1rem;}
@media (max-width:359px){
  .vitrina-track.es-grilla .vitrina-media img{aspect-ratio:16/9;}
}
/* ============================================================
   RONDA 11 (2026-09-29) — inicio.html: la "landing" EXCLUSIVA de
   quien ya tiene sesión, armada con SU catálogo y SUS herramientas
   (API /api/catalogos/mio y /api/mis-accesos). Prefijo in-.
   ============================================================ */
.pagina-inicio .bg-stars{opacity:.25;}
.in-hero{padding:8.6rem 1.5rem 1.2rem;}
.in-hero-inner{width:min(1100px,100%);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;}
.in-hero-copy{min-width:0;padding-bottom:.6rem;}
.in-hero-copy h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.035em;line-height:1.06;margin:.85rem 0 .6rem;overflow-wrap:anywhere;}
.in-hero-copy h1 span{color:var(--cyan);}
.in-resumen{color:var(--text-dim);font-size:1.05rem;max-width:36rem;min-height:1.6em;}
.in-hero-chibi{width:7.5rem;height:auto;flex-shrink:0;filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));}

.in-sec{width:min(1100px,100%);margin:0 auto;padding:2.4rem 1.5rem;}
.in-sec-head{margin-bottom:1.2rem;}
.in-sec-head h2{font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.02em;}
.in-sec-head p{color:var(--text-dim);font-size:.94rem;margin-top:.25rem;}

/* ---------- Tarjeta de Mi Catálogo Web ---------- */
.in-cat-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-radius:1.6rem;overflow:hidden;
  background:var(--bg-alt);border:1px solid var(--panel-border);box-shadow:0 30px 60px -40px rgba(3,10,20,.9);}
.in-cat-cover{position:relative;min-height:17rem;background:linear-gradient(150deg,#1b3148,#0e1a2a);}
.in-cat-portada{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.in-cat-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(11,21,34,.55));}
.in-cat-logo{position:absolute;left:1.3rem;bottom:1.3rem;z-index:1;width:4.6rem;height:4.6rem;border-radius:1.2rem;object-fit:cover;background:#fff;
  border:3px solid var(--bg-alt);box-shadow:0 12px 26px -10px rgba(0,0,0,.6);}
.in-cat-logo-ini{display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:1.8rem;color:#04231f;background:var(--cyan);}
.in-cat-body{display:flex;flex-direction:column;gap:1rem;padding:1.7rem 1.8rem 1.8rem;min-width:0;}
.in-cat-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;}
.in-cat-head h3,.in-cat-body > h3{font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;}
.in-cat-lema{color:var(--text-dim);font-size:.94rem;margin-top:-.5rem;}
.in-estado{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--text-dim);background:rgba(255,255,255,.06);border:1px solid var(--panel-border);}
.in-estado::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;}
.in-estado-ok{color:#4ee08a;background:rgba(78,224,138,.1);border-color:rgba(78,224,138,.3);}
.in-estado-prep{color:#f5c26b;background:rgba(245,194,107,.1);border-color:rgba(245,194,107,.3);}

.in-link{display:flex;align-items:center;gap:.5rem;padding:.35rem .35rem .35rem .95rem;border-radius:.9rem;background:var(--campo-bg);border:1px solid var(--campo-borde);}
.in-link-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;color:var(--text);font-variant-numeric:tabular-nums;}
.in-link-copiar{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:0 .85rem;border-radius:.65rem;border:0;cursor:pointer;flex-shrink:0;
  background:rgba(53,224,208,.14);color:var(--cyan);font:600 .82rem var(--font-body);transition:background-color .2s;}
.in-link-copiar:hover{background:rgba(53,224,208,.22);}
.in-link-copiar svg{width:1rem;height:1rem;}

.in-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;}
.in-stats div{padding:.8rem .9rem;border-radius:1rem;background:var(--panel);border:1px solid var(--panel-border);}
.in-stats dt{font-size:.74rem;color:var(--text-soft);font-weight:600;}
.in-stats dd{font-family:var(--font-head);font-size:1.55rem;font-weight:700;line-height:1.1;margin-top:.15rem;font-variant-numeric:tabular-nums;}

.in-acciones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;}
.in-acciones .btn{justify-content:center;min-height:2.9rem;}
.in-acciones .btn-ghost{display:inline-flex;align-items:center;gap:.45rem;}
.in-acciones .btn-ghost svg{width:1.05rem;height:1.05rem;}
.in-acciones-3{display:grid;grid-template-columns:1.4fr 1fr 1fr;}
.in-acciones-3 .btn-primary{justify-content:space-between;}

.in-avance-top{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-dim);margin-bottom:.4rem;}
.in-avance-top b{color:var(--text);font-family:var(--font-head);}
.in-avance-barra{height:.5rem;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
.in-avance-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#8ff2e8);transform-origin:left;}
.in-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .9rem;list-style:none;}
.in-check li{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--text-soft);}
.in-check li span{display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);}
.in-check li.ok{color:var(--text);}
.in-check li.ok span{background:var(--cyan);color:#04231f;box-shadow:none;}
.in-check li span svg{width:.8rem;height:.8rem;}
.in-nota{font-size:.84rem;color:var(--text-soft);}

.in-cat-vacio{grid-template-columns:auto minmax(0,1fr);align-items:end;background:linear-gradient(160deg,rgba(53,224,208,.08),var(--bg-alt) 60%);}
.in-vacio-chibi{width:10rem;align-self:end;margin:1.5rem 0 0 1.6rem;filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));}
.in-pasos{display:flex;flex-direction:column;gap:.7rem;list-style:none;}
.in-pasos li{display:flex;align-items:flex-start;gap:.7rem;font-size:.95rem;color:var(--text);}
.in-pasos b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.55rem;flex-shrink:0;background:rgba(53,224,208,.12);color:var(--cyan);font-family:var(--font-head);font-size:.82rem;}
.in-pasos em{font-style:normal;color:var(--cyan);font-weight:600;}
.in-cat-error{grid-template-columns:1fr;}

/* Esqueleto mientras carga (sin saltos de diseño al llegar los datos). */
.in-cargando .in-cat-body{gap:.9rem;}
.in-sk{border-radius:.7rem;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));background-size:200% 100%;animation:in-sk 1.3s linear infinite;}
.in-sk-cover{min-height:17rem;border-radius:0;}
.in-sk-l1{height:1.8rem;width:60%;}
.in-sk-l2{height:3rem;}
.in-sk-l3{height:4.5rem;}
@keyframes in-sk{to{background-position:-200% 0;}}

/* Herramientas y ayuda */
.in-herr{width:100%;}
.in-entrar{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--cyan);}
.in-entrar svg{width:1rem;height:1rem;}
.in-ayuda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;}
.nav-usuario-av.con-logo{overflow:hidden;background:#fff;}
.nav-usuario-av.con-logo img{width:100%;height:100%;object-fit:cover;}

.in-toast{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100% - 2rem);
  padding:.8rem 1.1rem;border-radius:1rem;background:#fff;color:#0b1522;font-size:.9rem;font-weight:600;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  transform:translate(-50%,150%);transition:transform .35s var(--ease);pointer-events:none;}
.in-toast.on{transform:translate(-50%,0);}

@media (max-width:920px){
  .in-hero{padding:7.4rem 1.25rem 1rem;}
  .in-sec{padding:2rem 1.25rem;}
  .in-cat-card{grid-template-columns:1fr;}
  .in-cat-cover{min-height:0;aspect-ratio:16/7;}
  .in-cat-cover::after{background:linear-gradient(180deg,transparent 50%,rgba(11,21,34,.6));}
  .in-sk-cover{min-height:0;aspect-ratio:16/7;}
  .in-cat-logo{bottom:-1.8rem;width:4rem;height:4rem;border-radius:1rem;}
  .in-cat-cover + .in-cat-body{padding-top:2.6rem;}
  .in-ayuda{grid-template-columns:1fr;}
  .in-cat-vacio{grid-template-columns:1fr;}
  .in-vacio-chibi{display:none;}
}
@media (max-width:640px){
  .in-hero{padding-top:6.8rem;}
  .in-hero-chibi{width:4.8rem;}
  .in-resumen{font-size:.95rem;}
  .in-cat-card{border-radius:1.3rem;}
  .in-cat-body{padding:1.25rem 1.15rem 1.3rem;gap:.9rem;}
  .in-cat-cover{aspect-ratio:16/8;}
  .in-stats dd{font-size:1.3rem;}
  .in-stats div{padding:.65rem .7rem;}
  .in-check{grid-template-columns:1fr;}
  .in-acciones{display:grid;grid-template-columns:1fr 1fr;}
  .in-acciones .btn-primary{grid-column:1 / -1;justify-content:space-between;}
  .in-acciones-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:380px){
  .in-hero-chibi{display:none;}
}
@media (prefers-reduced-motion:reduce){ .in-sk{animation:none;} }

/* ---------- Nav en celular: "Iniciar sesión" a la vista, a la izquierda de "Crear cuenta" ----------
   Antes solo estaba dentro del menú de las barritas, y mucha gente no lo abre. */
@media (max-width:920px){
  .nav-actions{gap:.45rem;}
  .nav-actions .nav-login{display:inline-flex;align-items:center;min-height:2.6rem;padding:0 .9rem;border-radius:999px;
    border:1px solid rgba(255,255,255,.24);color:var(--text);font-size:.84rem;font-weight:600;white-space:nowrap;}
  .nav-actions .nav-login:active{border-color:var(--cyan-dim);color:var(--cyan);}
}
@media (max-width:480px){
  /* Para que entren logo + los 2 botones + menú: los botones sin ícono y un poco más chicos. */
  .nav-actions .btn-small .btn-icon{display:none;}
  .nav-actions .btn-small{padding:0 .9rem;min-height:2.6rem;font-size:.82rem;}
  .nav-actions .btn-small > span:first-child{position:static;width:auto;height:auto;overflow:visible;clip:auto;}
  .nav-actions .nav-login{padding:0 .75rem;font-size:.82rem;}
}
@media (max-width:400px){
  /* Solo el cuadrito "TV" como logo (como el ícono de una app). */
  .nav-pill > .nav-logo > span:last-child{display:none;}
}

/* ---------- Login ---------- */
.lg-preview{margin:1.6rem 0 1.4rem;padding:1rem 1.1rem;border-radius:1.2rem;max-width:23rem;
  background:linear-gradient(160deg,rgba(53,224,208,.08),rgba(255,255,255,.02));border:1px solid var(--panel-border);}
.lg-prev-top{display:flex;align-items:center;gap:.7rem;}
.lg-prev-top > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.lg-prev-top b{font-family:var(--font-head);font-size:.95rem;}
.lg-prev-top small{font-size:.74rem;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lg-prev-logo{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.8rem;flex-shrink:0;
  background:linear-gradient(135deg,#ff7d6b,#dd4379);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.2rem;}
.lg-prev-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.85rem;}
.lg-prev-stats div{padding:.55rem .6rem;border-radius:.8rem;background:rgba(255,255,255,.04);border:1px solid var(--panel-border);}
.lg-prev-stats small{display:block;font-size:.68rem;color:var(--text-soft);}
.lg-prev-stats b{font-family:var(--font-head);font-size:1rem;}
.lg-lista{display:flex;flex-direction:column;gap:.7rem;list-style:none;}
.lg-lista li{display:flex;align-items:center;gap:.7rem;font-size:.93rem;color:var(--text);}
.lg-lista span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;flex-shrink:0;background:rgba(53,224,208,.12);color:var(--cyan);}
.lg-lista svg{width:1.05rem;height:1.05rem;}
.lg-ayuda{margin-top:.6rem;text-align:center;font-size:.84rem;color:var(--text-soft);}
.lg-ayuda a{display:inline-block;padding:.45rem .1rem;color:var(--text-dim);text-decoration:underline;text-underline-offset:2px;}
.lg-hola-m{display:none;}
.au-page .au-side .au-side-body > p{margin-bottom:0;}
/* La vista previa del login y el personaje comparten el lado izquierdo: en pantallas bajas se
   quita el personaje para que no se monte sobre la lista. */
@media (max-height:760px){ .au-page .au-chibi{display:none;} .au-proof{max-width:none;} }
@media (max-width:900px){
  .lg-hola-m{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem;padding:.6rem .9rem .6rem .6rem;border-radius:1rem;
    background:linear-gradient(160deg,rgba(53,224,208,.1),rgba(255,255,255,.02));border:1px solid var(--panel-border);font-size:.9rem;color:var(--text);}
  .lg-hola-m img{width:2.6rem;height:2.6rem;object-fit:cover;object-position:top;border-radius:.8rem;background:rgba(53,224,208,.12);flex-shrink:0;}
}
.auth-alert.ok{background:rgba(53,224,208,.1);}

/* Ajustes inicio.html: el aviso oculto asomaba como pastilla vacía (solo se bajaba 150% de su
   propio alto); ahora además se esconde. Saludo alineado con el borde de las secciones. */
.in-toast{opacity:0;visibility:hidden;transition:transform .35s var(--ease),opacity .25s,visibility 0s linear .35s;}
.in-toast.on{opacity:1;visibility:visible;transition:transform .35s var(--ease),opacity .25s,visibility 0s;}
.in-hero{padding-left:0;padding-right:0;}
.in-hero-inner{padding:0 1.5rem;}
@media (max-width:920px){ .in-hero{padding-left:0;padding-right:0;} .in-hero-inner{padding:0 1.25rem;} }
/* Nav en celulares angostos: el espacio entre logo, botones y menú era de 1.5rem (24px) y a
   320px dejaba el botón del menú fuera del borde. */
@media (max-width:480px){
  .nav-pill{gap:.45rem;padding-left:.7rem;}
  .nav-pill .nav-actions{margin-left:auto;}
}
@media (max-width:360px){
  .nav-pill{padding:.45rem .45rem .45rem .55rem;gap:.35rem;}
  .nav-pill .nav-logo-badge{width:2.1rem;height:2.1rem;}
  .nav-actions{gap:.3rem;}
  .nav-actions .nav-login,.nav-actions .btn-small{padding:0 .62rem;font-size:.76rem;min-height:2.5rem;}
  .nav-burger{width:2.5rem;height:2.5rem;flex-shrink:0;}
}
/* ---------- Ronda 12: "Mis herramientas" (activadas) aparte de "por activar" ----------
   Fila horizontal con acceso directo: se lee como algo YA tuyo, no como una tarjeta de venta. */
.in-mias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
.in-mia{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem .8rem .8rem;border-radius:1.3rem;
  background:linear-gradient(160deg,rgba(53,224,208,.09),var(--bg-alt) 65%);border:1px solid var(--cyan-dim);
  transition:border-color .3s var(--ease),transform .3s var(--ease);}
.in-mia:hover{border-color:var(--cyan);}
.in-mia-img{display:grid;place-items:end center;width:4.6rem;height:4.6rem;border-radius:1rem;overflow:hidden;flex-shrink:0;
  background:radial-gradient(closest-side,rgba(53,224,208,.2),transparent),var(--bg-soft);}
.in-mia-img img{width:88%;height:auto;max-height:98%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.in-mia-txt{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0;}
.in-mia-txt b{font-family:var(--font-head);font-size:1.02rem;line-height:1.25;}
.in-mia-txt small{font-size:.82rem;color:var(--text-dim);line-height:1.4;}
.in-mia-txt .in-estado{padding:.18rem .6rem;font-size:.68rem;}
.in-mia-btn{display:inline-flex;align-items:center;gap:.35rem;min-height:2.6rem;padding:0 1rem;border-radius:999px;flex-shrink:0;
  background:var(--cyan);color:#04231f;font-weight:700;font-size:.86rem;}
.in-mia-btn svg{width:1rem;height:1rem;}
@media (hover:none){ .in-mia:active{transform:scale(.98);border-color:var(--cyan);} }
@media (max-width:920px){ .in-mias{grid-template-columns:1fr;} }
@media (max-width:480px){
  .in-mia{flex-wrap:wrap;}
  .in-mia-img{width:4rem;height:4rem;}
  .in-mia-btn{width:100%;justify-content:center;}
}

/* Login en celular: el personaje en busto, grande y nítido (antes era el cuerpo entero
   metido en 42px y se veía borroso). */
@media (max-width:900px){
  .lg-hola-m{gap:1rem;padding:.7rem 1rem .7rem .7rem;}
  .lg-hola-m img{width:4.4rem;height:4.4rem;object-fit:cover;object-position:center;border-radius:1rem;
    background:radial-gradient(closest-side,rgba(53,224,208,.22),rgba(53,224,208,.06));}
  .lg-hola-m span{display:flex;flex-direction:column;font-size:.92rem;color:var(--text-dim);line-height:1.35;}
  .lg-hola-m b{font-family:var(--font-head);font-size:1.12rem;color:var(--text);}
}
/* "Por activar": las tarjetas llenan el ancho según cuántas haya (3 → 3 columnas, sin hueco).
   En celular 2 por fila; si queda una sola al final, va a lo ancho en horizontal. */
.in-herr{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));}
@media (max-width:640px){
  .in-herr{grid-template-columns:repeat(2,minmax(0,1fr));}
  .in-herr > .hub-card:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row;}
  .in-herr > .hub-card:last-child:nth-child(odd) .hub-card-media{width:42%;aspect-ratio:auto;border-radius:var(--radius-lg) 0 0 var(--radius-lg);}
  .in-herr > .hub-card:last-child:nth-child(odd) .hub-card-inner{border-radius:0 var(--radius-lg) var(--radius-lg) 0;justify-content:center;}
}.in-mia-img{width:5.4rem;height:5.4rem;}
.in-mia-img img{width:auto;height:100%;max-height:none;}
@media (max-width:480px){ .in-mia-img{width:4.8rem;height:4.8rem;} }
/* ---------- Ronda 13: el inicio ES "Mi panel" (ya no hay otro panel aparte) ---------- */
.in-intro{color:var(--text);font-size:1.05rem;max-width:36rem;margin-bottom:.35rem;}
.in-resumen{font-size:.98rem;}
.nav-salir{background:transparent;color:var(--text-dim);border:1px solid rgba(255,255,255,.2);padding:0 1rem;min-height:2.5rem;font-weight:600;}
.nav-salir:hover{color:var(--text);border-color:rgba(255,255,255,.35);box-shadow:none;}
@media (max-width:640px){ .in-intro{font-size:.95rem;} .in-resumen{font-size:.9rem;} }/* "Ver mi catálogo" nunca en 2 líneas: su columna toma el ancho que necesita el texto. */
.in-acciones .btn{white-space:nowrap;}
.in-acciones-3{grid-template-columns:minmax(max-content,1.4fr) 1fr 1fr;}
@media (max-width:640px){ .in-acciones-3{grid-template-columns:1fr 1fr;} }
/* ---------- Ronda 14: guía del panel + QR del catálogo activo ---------- */
/* Guía rápida bajo el saludo: qué es cada parte (cada ítem lleva a su sección). */
.in-guia{width:min(1100px,100%);margin:1.6rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem;list-style:none;}
.in-guia li[hidden]{display:none;}
.in-guia a{display:flex;align-items:flex-start;gap:.8rem;height:100%;padding:.9rem 1rem;border-radius:1.1rem;background:var(--panel);border:1px solid var(--panel-border);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);}
.in-guia a:hover{border-color:var(--cyan-dim);background:rgba(255,255,255,.06);}
.in-guia span:last-child{display:flex;flex-direction:column;gap:.15rem;font-size:.84rem;line-height:1.45;color:var(--text-dim);}
.in-guia b{font-family:var(--font-head);font-size:.98rem;color:var(--text);}
.in-guia-ico{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.7rem;flex-shrink:0;background:rgba(53,224,208,.12);color:var(--cyan);}
.in-guia-ico svg{width:1.1rem;height:1.1rem;}
.in-guia-estrella{background:rgba(245,194,107,.14);color:#f5c26b;}
@media (hover:none){ .in-guia a:active{border-color:var(--cyan-dim);background-color:rgba(53,224,208,.08);} }
@media (max-width:920px){ .in-guia{padding:0 1.25rem;} }
@media (max-width:640px){ .in-guia{grid-template-columns:1fr;gap:.55rem;margin-top:1.3rem;} .in-guia a{padding:.8rem .9rem;} }

/* Link + QR juntos: el QR (siempre sobre blanco, para que cualquier cámara lo lea) a la izquierda. */
.in-compartir{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;}
.in-compartir.sin-qr{grid-template-columns:1fr;}
.in-qr{width:7.2rem;height:7.2rem;border-radius:1rem;background:#fff;padding:.35rem;flex-shrink:0;box-shadow:0 10px 24px -14px rgba(0,0,0,.7);}
.in-qr[aria-busy="true"]{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.16),rgba(255,255,255,.08));background-size:200% 100%;animation:in-sk 1.3s linear infinite;}
.in-qr img{display:block;width:100%;height:100%;image-rendering:pixelated;border-radius:.6rem;}
.in-compartir-der{display:flex;flex-direction:column;gap:.55rem;min-width:0;}
.in-qr-txt{font-size:.8rem;line-height:1.45;color:var(--text-soft);}
.in-qr-desc{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:2.4rem;padding:0 .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:var(--text);font-size:.84rem;font-weight:600;transition:border-color .2s,color .2s;}
.in-qr-desc:hover{border-color:var(--cyan-dim);color:var(--cyan);}
.in-qr-desc[hidden]{display:none;}
.in-qr-desc svg{width:1rem;height:1rem;}
@media (max-width:480px){
  .in-compartir{grid-template-columns:1fr;}
  .in-qr{width:9.5rem;height:9.5rem;justify-self:center;}
  .in-qr-desc{align-self:stretch;justify-content:center;}
}

/* Clientes reales en celular: con un número par de tarjetas, la última quedaría sola en su
   fila — va a lo ancho, igual que la primera. */
.vitrina-track.es-grilla .vitrina-card:last-child:nth-child(even){grid-column:1 / -1;}
.vitrina-track.es-grilla .vitrina-card:last-child:nth-child(even) .vitrina-media img{aspect-ratio:16/9;}

/* Al saltar desde el menú (Mi catálogo / Herramientas / Ayuda), el título de la sección quedaba
   tapado por la barra fija de arriba: se deja libre ese alto. */
.in-sec{scroll-margin-top:5.2rem;}
@media (max-width:920px){ .in-sec{scroll-margin-top:4.6rem;} }
/* Catálogo sin portada: el espacio vacío dice qué va ahí. */
.in-cat-cover.sin-foto::before{content:"Aquí va tu portada";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.9rem;font-weight:600;color:var(--text-soft);border:2px dashed rgba(255,255,255,.14);border-radius:inherit;margin:1rem;}/* Celular: si solo hay un botón secundario (ej. "Activarlo por S/20"), va a lo ancho. */
@media (max-width:640px){ .in-acciones .btn-primary + .btn:last-child{grid-column:1 / -1;} }/* Logo pendiente (catálogo armándose sin logo): recuadro punteado que dice qué falta. */
.in-cat-logo-vacio{display:grid;place-items:center;text-align:center;font-size:.72rem;font-weight:700;color:var(--text-soft);
  background:var(--bg-soft);border:2px dashed rgba(255,255,255,.22);box-shadow:none;}
/* Un solo botón (catálogo aún vacío): a lo ancho del cuerpo en celular y de su contenido en PC. */
.in-acciones .btn-primary:only-child{grid-column:1 / -1;}
/* ---------- Servicio "Te armamos tu catálogo" (cotiza por WhatsApp) ----------
   Franja a lo ancho debajo de las 4 herramientas: es un servicio, no una herramienta más, y así
   la grilla de 4 no queda con una tarjeta suelta. */
.hub-servicio{width:var(--shell);margin:1.1rem auto 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.4rem;
  padding:1rem 1.6rem 1rem 1rem;border-radius:calc(var(--radius-lg) + .3rem);border:1px solid var(--cyan-dim);
  background:linear-gradient(120deg,rgba(53,224,208,.12),var(--bg-alt) 55%);transition:border-color .3s var(--ease),transform .3s var(--ease);}
.hub-servicio:hover{border-color:var(--cyan);}
.hub-servicio-img{display:grid;place-items:end center;width:7.5rem;height:7.5rem;border-radius:1.2rem;overflow:hidden;
  background:radial-gradient(closest-side,rgba(53,224,208,.22),transparent),var(--bg-soft);}
.hub-servicio-img img{height:96%;width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));}
.hub-servicio-txt{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.hub-servicio-txt b{font-family:var(--font-head);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.2;color:var(--text);}
.hub-servicio-txt > span:last-child{font-size:.9rem;line-height:1.5;color:var(--text-dim);max-width:40rem;}
.hub-tag-cotiza{margin-bottom:.1rem;color:#f5c26b;border-color:rgba(245,194,107,.4);background:rgba(245,194,107,.08);font-weight:700;}
.hub-servicio-btn{white-space:nowrap;}
@media (hover:none){ .hub-servicio:active{transform:scale(.985);border-color:var(--cyan);} }
@media (max-width:920px){
  .hub-servicio{grid-template-columns:auto minmax(0,1fr);padding:1rem;}
  .hub-servicio-btn{grid-column:1 / -1;justify-content:space-between;}
}
@media (max-width:640px){
  .hub-servicio{width:100%;gap:.9rem;}
  .hub-servicio-img{width:5.4rem;height:5.4rem;align-self:start;}
  .hub-servicio-txt > span:last-child{font-size:.85rem;}
}
/* Tarjetas de herramientas en celular: la descripción recortada a 3 líneas ya no se estira (antes
   asomaba una 4ta línea debajo de los "…"); el precio se queda abajo igual. Letra un poco más
   grande (.72rem = 11.5px era muy chica). */
@media (max-width:640px){
  .hub-card p{flex-grow:0;font-size:.78rem;line-height:1.4;}
  .hub-card-inner .hub-price{margin-top:auto;padding-top:.8rem;}
}
/* "ADQUIÉRELO YA" nunca en 2 líneas. */
.hub-tag{white-space:nowrap;}
@media (max-width:400px){ .hub-tag{letter-spacing:.04em;padding:.25rem .55rem;} }
/* Servicio "Te armamos tu Catálogo Web" en celulares angostos: personaje arriba y el texto
   a todo el ancho (al lado del personaje quedaba en una columna muy angosta). */
@media (max-width:400px){
  .hub-servicio{grid-template-columns:1fr;}
  .hub-servicio-img{width:4.8rem;height:4.8rem;}
}
.hub-servicio[hidden]{display:none;}
.in-sec .hub-servicio{width:100%;}

/* Fuera de Perú el Catálogo Web cuesta $35 al mes, sin promoción: landing.js agrega
   .en-dolares a <html> y se esconde todo lo que es "promo" (precio tachado, etiquetas). */
.en-dolares .solo-soles{display:none !important;}