/* Gativo · estilos públicos (móvil primero). Identidad: manual de Gativo v1.4 */

@font-face { font-family: "Fredoka"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fuentes/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/fredoka-700.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fuentes/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fuentes/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fuentes/dm-sans-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --azul: #0363FA;
  --azul-osc: #0247C2;
  --negro: #101116;
  --gris: #555968;
  --gris-cl: #CECECF;
  --nube: #EEF4FF;
  --blanco: #FFFFFF;
  --kraft: #DCAB6E;
  --cascabel: #FFC83D;
  --rojo: #C2311F;
  --rojo-fondo: #FDEEEC;
  --verde: #127A4B;
  --verde-fondo: #E6F5EC;

  --f-tit: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-txt: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-h1: clamp(2.3rem, 1.2rem + 4.2vw, 4.2rem);
  --t-h2: clamp(1.9rem, 1.15rem + 2.6vw, 3.2rem);
  --t-h3: clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
  --t-txt: clamp(1.03rem, .98rem + .25vw, 1.15rem);
  --t-lead: clamp(1.1rem, 1rem + .5vw, 1.38rem);

  --radio: 28px;
  --radio-ch: 18px;
  --sombra: 0 10px 30px rgb(3 99 250 / .12);
  --sombra-fuerte: 0 18px 44px rgb(16 17 22 / .16);
  --alto-encabezado: 64px;
  --esp: clamp(4rem, 2.6rem + 6vw, 8rem);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--negro); font: 400 var(--t-txt)/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -.012em; }
h2 { font-size: var(--t-h2); line-height: 1.07; letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* menos de 16 px y iOS hace zoom */
[id] { scroll-margin-top: calc(var(--alto-encabezado) + 16px); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
.azul-texto { color: var(--azul); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 5%; top: -100px; z-index: 100; background: var(--azul); color: #fff; padding: .75rem 1.1rem; border-radius: 14px; font: 600 1rem var(--f-tit); text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- Ancho: 90 % en celular y 80 % en escritorio (igual que gativo.com.mx) ---------- */
.contenedor { width: 90%; margin-inline: auto; }

/* ---------- Botones, cápsulas e íconos ---------- */
.icono { display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: currentColor; vertical-align: -.2em; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px;
  padding: .95em 1.5em; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
  font: 600 clamp(1.04rem, 1rem + .2vw, 1.15rem)/1.1 var(--f-tit);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton .icono { width: 1.3em; height: 1.3em; }
.boton:active { transform: scale(.97); }
.boton-azul { background: var(--azul); color: #fff; box-shadow: 0 8px 20px rgb(3 99 250 / .28); }
.boton-azul:hover { background: var(--azul-osc); transform: translateY(-2px); }
.boton-linea { background: transparent; color: var(--negro); box-shadow: inset 0 0 0 3px var(--gris-cl); }
.boton-linea:hover { color: var(--azul); box-shadow: inset 0 0 0 3px var(--azul); }
.boton-blanco { background: #fff; color: var(--azul); }
.boton-blanco:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.boton-borde-blanco { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .6); }
.boton-borde-blanco:hover { box-shadow: inset 0 0 0 3px #fff; }
.boton-nube { background: var(--nube); color: var(--azul); }
.boton-nube:hover { background: #dde9ff; }
.boton-globito { background: var(--nube); color: var(--azul); width: 56px; min-width: 56px; padding: 0; }
.boton[disabled], .boton.cargando { opacity: .7; pointer-events: none; }
.boton-ancho { width: 100%; }

.cap { display: inline-flex; align-items: center; gap: .5em; border-radius: 999px; padding: .55em 1em; font: 600 .98rem/1.1 var(--f-tit); white-space: nowrap; }
.cap .punto { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.cap-nube { background: var(--nube); color: var(--azul); }
.cap-azul { background: var(--azul); color: #fff; }
.cap-blanca { background: #fff; color: var(--azul); }
.chica { font: 500 .95rem/1.5 var(--f-txt); color: var(--gris); }

/* ---------- Encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; transition: box-shadow .25s ease; }
/* el fondo translúcido va en ::before: en el encabezado atraparía al menú fijo del celular */
.encabezado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.encabezado.con-scroll { box-shadow: 0 1px 0 var(--nube), 0 8px 24px rgb(16 17 22 / .06); }
.encabezado .contenedor { height: var(--alto-encabezado); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; -webkit-tap-highlight-color: transparent; }
.logo-h { display: block; height: 36px; width: auto; overflow: visible; }
.logo-h #lg-g-gato { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s var(--rebote); }
.marca:hover #lg-g-gato { transform: translateY(-6%) rotate(-3deg); }
.logo-h .g-punto { animation: escribe 1.2s ease-in-out infinite; }
.logo-h .g-punto:nth-of-type(2) { animation-delay: .15s; }
.logo-h .g-punto:nth-of-type(3) { animation-delay: .3s; }
@keyframes escribe { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .25; } }
.avance { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--azul); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Menú ---------- */
.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.menu a:not(.boton) { font: 600 1.05rem var(--f-tit); text-decoration: none; color: var(--negro); white-space: nowrap; transition: color .2s ease; }
.menu a:not(.boton):hover, .menu a[aria-current="page"]:not(.boton) { color: var(--azul); }
.menu .boton { min-height: 46px; padding: .7em 1.2em; font-size: 1.02rem; }
.menu-pie { display: none; }
.menu-boton { display: none; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--nube); color: var(--azul); cursor: pointer; padding: 0; flex: none; }
.menu-boton span, .menu-boton span::before, .menu-boton span::after { display: block; width: 20px; height: 3px; border-radius: 2px; background: currentColor; margin-inline: auto; position: relative; transition: transform .3s var(--rebote), background-color .2s ease; }
.menu-boton span::before, .menu-boton span::after { content: ""; position: absolute; left: 0; }
.menu-boton span::before { top: -7px; }
.menu-boton span::after { top: 7px; }
.menu-abierto .menu-boton span { background: transparent; }
.menu-abierto .menu-boton span::before { transform: translateY(7px) rotate(45deg); }
.menu-abierto .menu-boton span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .menu-boton { display: block; }
  .menu {
    position: fixed; inset: var(--alto-encabezado) 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 5% calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--blanco); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .32s var(--rebote), visibility 0s linear .32s;
  }
  .menu-abierto .menu { transform: none; opacity: 1; visibility: visible; transition: opacity .2s ease, transform .32s var(--rebote), visibility 0s; }
  .menu-abierto .encabezado::before { background: var(--blanco); }
  .menu a:not(.boton) { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: .9rem 0; border-bottom: 2px solid var(--nube); font-size: clamp(1.3rem, 1.15rem + 1vw, 1.6rem); }
  .menu a:not(.boton)::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--nube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='%230363FA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
  .menu .boton { margin-top: 1.4rem; min-height: 56px; font-size: 1.15rem; }
  .menu-pie { display: grid; gap: .15rem; margin-top: auto; padding-top: 2rem; color: var(--gris); font-size: .98rem; }
  .menu-pie b { font: 700 1.3rem var(--f-tit); color: var(--negro); }
  html.menu-abierto { overflow: hidden; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--esp); }
.seccion-nube { background: var(--nube); }
.seccion-azul { background: var(--azul); color: #fff; }
.cabeza { display: grid; gap: 1rem; max-width: 46rem; }
.cabeza .lead, .lead { font-size: var(--t-lead); color: var(--gris); }
.cabeza > .cap { justify-self: start; }
.cabeza-centro > .cap { justify-self: center; }
.seccion-azul .lead { color: rgb(255 255 255 / .95); }
.seccion-azul .chica { color: #fff; }

/* ---------- Héroe ---------- */
.heroe { padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--esp); overflow: clip; }
.heroe .contenedor { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
.heroe h1 { margin-top: 1.1rem; }
.heroe .lead { margin-top: 1.2rem; max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; align-items: center; }
.acciones .boton { flex: 1 1 auto; }
.entrega-aviso { width: fit-content; max-width: 100%; display: flex; gap: .8rem; align-items: flex-start; margin-top: 1.6rem; padding: 1rem 1.1rem; border-radius: var(--radio-ch); background: var(--nube); color: var(--negro); font-weight: 500; line-height: 1.45; }
.entrega-aviso .icono { width: 1.6rem; height: 1.6rem; color: var(--azul); margin-top: .05rem; }
.entrega-aviso b { color: var(--azul); }
.heroe .chica { margin-top: 1rem; }
.nota-heroe { max-width: 78ch; text-wrap: balance; }
.entrega-textos { display: grid; justify-items: start; gap: .6rem; }
.entrega-frase { display: block; text-wrap: balance; }
.con-chispas { position: relative; display: inline-flex; flex: 1 1 auto; }
.con-chispas .boton { width: 100%; }
.con-chispas .chispas { position: absolute; right: -14px; top: -26px; width: 34px; height: 36px; fill: var(--azul); pointer-events: none; }

/* escena del héroe: celular con la portada + gato tecleando */
.escena { position: relative; isolation: isolate; width: 100%; max-width: 500px; margin-inline: auto; aspect-ratio: 1 / 1.12; }
.escena::before { content: ""; position: absolute; inset: 12% 0 4% 4%; z-index: -1; background: var(--nube); border-radius: 48px; }
.escena .tel { position: absolute; right: 3%; top: 5%; width: 50%; max-width: none; }
.escena .gato { position: absolute; left: -1%; bottom: 2%; width: 58%; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.escena .gato svg { width: 100%; height: auto; overflow: visible; }
.escena .gato #hm-g-gato { transform-box: fill-box; transform-origin: 50% 100%; }
.escena .gato .g-punto { animation: escribe 1.2s ease-in-out infinite; }
.escena .gato .g-punto:nth-of-type(2) { animation-delay: .15s; }
.escena .gato .g-punto:nth-of-type(3) { animation-delay: .3s; }
.escena .etiqueta { position: absolute; right: 0; top: 0; z-index: 2; box-shadow: var(--sombra-fuerte); }
.escena .burbuja { position: absolute; left: 2%; top: 16%; z-index: 2; display: inline-flex; align-items: center; gap: .6rem; max-width: 46%; padding: .7rem 1rem; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--negro); font: 600 clamp(.9rem, .85rem + .3vw, 1.05rem)/1.25 var(--f-tit); box-shadow: var(--sombra-fuerte); }
.escena .burbuja .icono { color: var(--azul); width: 1.4em; height: 1.4em; }

/* celulares (héroe y ejemplos) */
.tel { background: var(--negro); border-radius: 38px; padding: 10px; box-shadow: 0 20px 40px rgb(16 17 22 / .22); width: 100%; max-width: 290px; margin-inline: auto; }
.tel-pantalla { background: #fff; border-radius: 29px; overflow: hidden; aspect-ratio: 9 / 18.5; display: flex; flex-direction: column; color: var(--negro); }
.pg-barra { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1rem .7rem; font: 700 .98rem var(--f-tit); }
.pg-barra i { width: 20px; height: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.pg-foto { margin: 0 .8rem; border-radius: 18px; aspect-ratio: 16 / 11; display: flex; align-items: center; justify-content: center; }
.pg-foto .icono { width: 38%; height: auto; aspect-ratio: 1; }
.pg-cuerpo { padding: .9rem 1rem; display: grid; gap: .6rem; }
.pg-titulo { font: 700 1.08rem/1.15 var(--f-tit); }
.pg-dato { display: flex; align-items: center; gap: .45rem; font: 500 .82rem/1.3 var(--f-txt); color: var(--gris); }
.pg-dato .icono { width: 1.05rem; height: 1.05rem; color: var(--azul); }
.pg-botones { display: grid; gap: .45rem; margin-top: .2rem; }
.pg-btn { display: flex; align-items: center; justify-content: center; border-radius: 999px; padding: .62rem; background: var(--azul); color: #fff; font: 600 .9rem var(--f-tit); }
.pg-btn.sec { background: var(--nube); color: var(--azul); }

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
.paso { position: relative; background: var(--nube); border-radius: var(--radio); padding: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); transition: box-shadow .3s ease, transform .3s var(--rebote); }
.paso .huella { width: 60px; height: 60px; margin-bottom: 1.1rem; }
.paso h3 { margin-bottom: .55rem; }
.paso p { color: var(--gris); }
.paso .sticker { position: absolute; right: 4px; top: -44px; width: 138px; transform: rotate(9deg); filter: drop-shadow(0 6px 10px rgb(16 17 22 / .14)); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.nota-pasos { margin-top: 1.4rem; }
.nota-centro { text-align: center; text-wrap: balance; }

/* planes */
.cabeza-centro { margin-inline: auto; text-align: center; justify-items: center; }
.cabeza-centro .lead { text-wrap: balance; }
.cap-amarilla { background: var(--cascabel); color: var(--negro); }
.planes-panel { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); padding: clamp(1.1rem, .6rem + 2.4vw, 2.6rem); border-radius: clamp(28px, 4vw, 44px); background: var(--nube); }
.planes { display: grid; gap: 1.2rem; }
.plan { position: relative; display: grid; align-content: start; gap: 1rem; padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); border-radius: var(--radio); background: #fff; border: 2px solid #fff; box-shadow: var(--sombra); transition: translate .3s var(--rebote), box-shadow .3s ease; }
.plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plan-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--nube); color: var(--azul); }
.plan-ico .icono { width: 26px; height: 26px; }
.plan-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; font: 700 clamp(3.2rem, 2.5rem + 2.4vw, 4.4rem)/1 var(--f-tit); color: var(--azul); }
.plan-precio small { font: 600 1.1rem var(--f-tit); color: var(--gris); }
.plan-desc { font-size: 1.05rem; color: var(--gris); text-wrap: pretty; }
.plan .lista-check { gap: .7rem; padding-top: 1rem; border-top: 2px solid var(--nube); }
.plan-destacado { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: var(--sombra-fuerte); }
.plan-destacado .plan-precio, .plan-destacado .plan-precio small, .plan-destacado .plan-desc, .plan-destacado .lista-check .icono { color: #fff; }
.plan-destacado .plan-ico { background: rgb(255 255 255 / .16); color: #fff; }
.plan-destacado .lista-check { border-top-color: rgb(255 255 255 / .24); }
.plan-aviso { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--radio-ch); background: #fff; border: 2px dashed var(--azul); }
.plan-aviso-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--nube); color: var(--azul); }
.plan-aviso-ico .icono { width: 24px; height: 24px; }
.plan-aviso p { line-height: 1.45; }
.plan-aviso b { color: var(--azul); }
.nota-planes { margin: 1.4rem auto 0; color: var(--gris); font-size: .85rem; line-height: 1.6; text-align: center; text-wrap: balance; }
.acciones-centro { justify-content: center; margin-top: 1.8rem; }

/* ---------- Qué incluye ---------- */
.incluye { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.caja-svg { width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.lista-incluye { display: grid; gap: 1rem; margin-top: 2rem; }
.item { display: grid; gap: .7rem; align-items: start; background: #fff; border-radius: 22px; padding: 1.2rem 1.3rem; }
.item .cap { justify-self: start; }
.item p { color: var(--gris); }
.nota-caja { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.6rem; font: 600 1.05rem/1.35 var(--f-tit); color: var(--azul); }
.nota-caja .icono { width: 1.6rem; height: 1.6rem; }

/* ---------- Apartado ---------- */
.apartado { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
.tarjeta { background: #fff; border: 2px solid var(--nube); border-radius: var(--radio); padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); display: grid; gap: .8rem; align-content: start; transition: transform .3s var(--rebote), box-shadow .3s ease; }
.tarjeta-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--nube); color: var(--azul); display: grid; place-items: center; }
.tarjeta-ico .icono { width: 28px; height: 28px; }
.tarjeta p { color: var(--gris); }
.formas { display: flex; flex-wrap: wrap; gap: .5rem; }
.formas .cap { font-size: .95rem; padding: .5em .85em; white-space: normal; }
.precio-grande { font: 700 clamp(3rem, 2rem + 4vw, 4.6rem)/1 var(--f-tit); color: var(--azul); letter-spacing: -.02em; }
.precio-grande small { font-size: .32em; color: var(--gris); letter-spacing: 0; margin-left: .2em; }

/* ---------- Ejemplos ---------- */
#ejemplos .cabeza { margin-inline: auto; justify-items: center; text-align: center; }
/* flechas del carrusel de ejemplos (en celular y tableta): a media altura del celular */
.ejemplos-marco { position: relative; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.flecha { position: absolute; top: calc(min(90vw, 290px) * 1.028 + 18px); z-index: 3; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--azul); box-shadow: var(--sombra-fuerte); cursor: pointer; transition: opacity .2s ease, transform .2s var(--rebote); -webkit-tap-highlight-color: transparent; }
.flecha .icono { width: 22px; height: 22px; }
.flecha:active { transform: scale(.92); }
.flecha[disabled] { visibility: hidden; }
.flecha-ant { left: 6px; }
.flecha-sig { right: 6px; }
/* en celular y tableta el carrusel va de orilla a orilla de la pantalla: las páginas entran y salen por el borde
   (no se cortan a media pantalla); cada una queda centrada al 90 % y la siguiente espera fuera de la vista */
@media (max-width: 899px) {
  .ejemplos-marco { margin-inline: calc(50% - 50vw); }
  .ejemplos { padding-inline: 5vw; gap: 10vw; scroll-padding-inline: 5vw; }
}
/* en celular y tableta, un ejemplo a la vez y completo (sin que se asome el siguiente cortado) */
.ejemplos { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .2rem 1.5rem; scrollbar-width: none; }
.ejemplos::-webkit-scrollbar { display: none; }
.ejemplos figure { margin: 0; }
.ejemplos > .ejemplo-caja { scroll-snap-align: center; scroll-snap-stop: always; display: grid; align-content: start; gap: 1.6rem; }
@media (min-width: 900px) { .testimonio { width: 70%; justify-self: center; } }
.testimonio { position: relative; justify-self: center; width: min(100%, 340px); margin: 0; padding: 1.1rem 1.25rem; border-radius: 22px; background: #fff; color: var(--negro); box-shadow: 0 14px 30px rgb(16 17 22 / .18); }
.testimonio::before { content: ""; position: absolute; top: -9px; left: 50%; width: 22px; height: 22px; background: #fff; border-radius: 4px; transform: translateX(-50%) rotate(45deg); }
.testimonio p { position: relative; font: 500 1rem/1.5 var(--f-txt); }
.testimonio footer { position: relative; margin-top: .6rem; font: 600 1rem/1.2 var(--f-tit); color: var(--azul); }
.ejemplo { display: block; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ejemplo .tel { display: block; transition: transform .35s var(--rebote), box-shadow .35s ease; }
.ejemplo .tel-pantalla { display: block; }
.ejemplo .tel-pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ejemplo-nombre { display: grid; justify-items: center; gap: .2rem; text-align: center; margin-top: 1.7rem; font: 700 1.15rem/1.2 var(--f-tit); color: #fff; }
.ejemplo-nombre span { font: 500 .95rem/1.35 var(--f-txt); color: #fff; }
.ejemplo-nombre .ver { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: rgb(255 255 255 / .16); font: 600 1rem var(--f-tit); transition: background-color .2s ease; }
.ejemplo-nombre .ver .icono { width: 1.05rem; height: 1.05rem; }
.ejemplo:hover .ver, .ejemplo:focus-visible .ver { background: #fff; color: var(--azul); }
.desliza { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; color: #fff; font: 600 1rem var(--f-tit); }
.desliza .icono { width: 1.4rem; height: 1.4rem; }
.ejemplos-nota { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; text-wrap: balance; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 2rem; align-items: start; }
/* escena de las preguntas: el gato de la marca y su estambre */
.preg-escena { width: 100%; max-width: 400px; margin-top: 1rem; }
.preg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.preg-gato-mov, .preg-bola-mov { cursor: pointer; }
.preg-gato-mov { transform-box: fill-box; transform-origin: 50% 100%; }
.preg-gato .g-cabeza { transform-box: view-box; transform-origin: 520px 641.5px; }
.preg-gato .g-cola { transform-box: view-box; transform-origin: 252px 848.5px; }
.preg-gato .pata-der { transform-box: fill-box; transform-origin: 30% 100%; }
.preg-bola .bola-giro { transform-box: view-box; transform-origin: 50px 50px; }
.preg-globo { transform-box: fill-box; transform-origin: 8% 100%; }
.preg-sombra-gato, .preg-sombra-bola { transform-box: fill-box; transform-origin: 50% 50%; }
.faq { display: grid; gap: .8rem; }
.faq details { background: #fff; border-radius: 22px; padding: 0 1.2rem 0 1rem; border: 2px solid transparent; box-shadow: 0 6px 18px rgb(3 99 250 / .06); transition: box-shadow .25s ease, border-color .25s ease; }
.faq details[open] { border-color: var(--azul); box-shadow: 0 16px 34px rgb(3 99 250 / .14); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .9rem; min-height: 60px; padding: 1.05rem 0; font: 600 clamp(1.06rem, 1rem + .3vw, 1.25rem)/1.25 var(--f-tit); }
.faq-num { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--nube); color: var(--azul); font: 700 1rem/1 var(--f-tit); transition: background-color .25s ease, color .25s ease, transform .3s var(--rebote); }
.faq details[open] .faq-num { background: var(--azul); color: #fff; transform: rotate(-6deg); }
.faq-pregunta { flex: 1; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--nube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%230363FA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .25s var(--rebote); }
.faq details[open]:not(.cerrando) summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 0 1.25rem; color: var(--gris); }
@media (min-width: 600px) { .faq details p { padding-left: calc(42px + .9rem); } }

/* ---------- Cierre ---------- */
.cierre .contenedor { display: grid; gap: 2rem; align-items: center; }
.globito { position: relative; display: inline-flex; align-items: center; gap: .9rem; background: #fff; color: var(--azul); border-radius: 999px; padding: .75rem 1.4rem; font: 700 clamp(1.15rem, 1rem + .7vw, 1.6rem) var(--f-tit); }
.globito::after { content: ""; position: absolute; left: 2rem; bottom: -13px; width: 28px; height: 28px; background: #fff; clip-path: path("M0,0 L28,0 C21,9 11,20 2,28 C6,19 7,9 0,0 Z"); }
.puntos { display: inline-flex; gap: .3rem; }
.puntos i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; animation: escribe 1.2s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
.cierre h2 { margin-top: 1.7rem; }
.cierre .lead { margin-top: 1rem; }
.cierre .entrega-aviso { background: rgb(255 255 255 / .12); color: #fff; }
.cierre .entrega-aviso .icono, .cierre .entrega-aviso b { color: #fff; }
.cierre-dibujo { position: relative; max-width: 360px; width: 80%; margin-inline: auto; }
.cierre-dibujo img { width: 100%; }
.sticker-cierre { transform: rotate(-5deg); filter: drop-shadow(0 12px 20px rgb(0 25 80 / .35)); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }

/* ---------- Pie ---------- */
.pie { padding-block: 3rem calc(3rem + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--nube); }
.pie .contenedor { display: grid; gap: 1.6rem; justify-items: center; text-align: center; }
.pie-marca { display: grid; gap: .8rem; justify-items: center; }
.pie-marca img { height: 46px; width: auto; }
.pie-marca p, .pie-legal { color: var(--gris); font-size: .95rem; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font: 600 1rem var(--f-tit); text-decoration: none; }
.pie-enlaces a:hover { color: var(--azul); }

/* ---------- Barra de acción (celular) ---------- */
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .6rem; padding: .7rem 5% calc(.7rem + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .96); box-shadow: 0 -8px 24px rgb(16 17 22 / .1); transform: translateY(110%); visibility: hidden; transition: transform .4s var(--rebote), visibility 0s linear .4s; }
.barra-accion .boton-azul { flex: 1; }
.barra-accion.visible { transform: none; visibility: visible; transition: transform .4s var(--rebote), visibility 0s; }

/* ---------- Páginas interiores ---------- */
.titulo-pagina { padding-block: clamp(2rem, 1rem + 3vw, 3.6rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.titulo-pagina .lead { margin-top: .9rem; max-width: 44rem; }
.titulo-pagina .cap { margin-bottom: 1rem; }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: 1.5rem; padding-bottom: var(--esp); }
.bloque { margin: 0; border: 0; padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); background: #fff; border-radius: var(--radio); box-shadow: 0 0 0 2px var(--nube); display: grid; gap: 1.3rem; min-width: 0; }
.bloque legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: .8rem; font: 700 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.15 var(--f-tit); }
.bloque legend + * { clear: both; }
.num { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font: 600 1.4rem/1 var(--f-tit); box-shadow: 0 6px 16px rgb(3 99 250 / .25); }
.bloque-intro { color: var(--gris); margin-top: -.4rem; }
.campos-2 { display: grid; gap: 1.3rem; }
.campo { display: grid; gap: .45rem; min-width: 0; }
.campo > label, .etiqueta { font: 600 1.05rem/1.3 var(--f-tit); }
.opcional { font: 500 .88rem var(--f-txt); color: var(--gris); margin-left: .3rem; }
.ayuda { font-size: .95rem; color: var(--gris); line-height: 1.45; }
.entrada {
  width: 100%; min-height: 54px; padding: .8rem 1rem; border: 2px solid var(--gris-cl); border-radius: 16px; background: #fff;
  font: 400 16px/1.4 var(--f-txt); color: var(--negro); transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none;
}
.entrada::placeholder { color: #8A8D99; }
.entrada:hover { border-color: #AEB0B8; }
.entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgb(3 99 250 / .16); }
.con-prefijo { display: flex; align-items: stretch; }
.con-prefijo span { display: flex; align-items: center; padding: 0 .9rem; border: 2px solid var(--gris-cl); border-right: 0; border-radius: 16px 0 0 16px; background: var(--nube); font-weight: 600; color: var(--gris); }
.con-prefijo .entrada { border-radius: 0 16px 16px 0; }
.error { display: none; align-items: flex-start; gap: .4rem; color: var(--rojo); font: 600 .95rem/1.4 var(--f-txt); }
.error .icono { width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.con-error .error { display: flex; }
.con-error .entrada, .con-error .con-prefijo span { border-color: var(--rojo); }
.alerta { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radio-ch); background: var(--rojo-fondo); color: var(--rojo); font-weight: 600; }
.alerta .icono { width: 1.4rem; height: 1.4rem; margin-top: .05rem; }
.alerta ul { list-style: disc; padding-left: 1.2rem; font-weight: 500; margin-top: .3rem; }

.servicios { display: grid; gap: .6rem; counter-reset: servicio; }
.servicio { display: flex; align-items: center; gap: .6rem; }
.servicio::before { counter-increment: servicio; content: counter(servicio); flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--nube); color: var(--azul); display: grid; place-items: center; font: 700 .95rem var(--f-tit); }
.servicio .entrada { flex: 1; min-width: 0; }
.quitar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--gris); cursor: pointer; display: grid; place-items: center; }
.quitar:hover { background: var(--rojo-fondo); color: var(--rojo); }
.js .servicio.oculto { display: none; }
.quitar[hidden], .agregar[hidden] { display: none; }
.agregar { justify-self: start; min-height: 46px; padding: .6em 1.1em; font-size: 1rem; }

/* estilos */
.estilos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.estilo { position: relative; display: grid; gap: .55rem; padding: .7rem .7rem 1rem; border-radius: 22px; border: 2px solid var(--gris-cl); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .25s var(--rebote); -webkit-tap-highlight-color: transparent; }
/* el campo real queda del tamaño de la tarjeta pero recortado: se toca la etiqueta completa */
.estilo input, .archivo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; clip-path: inset(50%); cursor: pointer; }
.estilo:hover { border-color: #AEB0B8; }
.estilo:has(input:checked) { border-color: var(--azul); box-shadow: 0 0 0 4px rgb(3 99 250 / .16); }
.estilo:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 3px; }
.estilo-nombre { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding-inline: .2rem; font: 700 1.05rem var(--f-tit); }
.estilo-nombre .icono { width: 1.4rem; height: 1.4rem; color: var(--azul); visibility: hidden; transform: scale(.4); transition: transform .3s var(--rebote), visibility 0s; }
.estilo:has(input:checked) .estilo-nombre .icono { visibility: visible; transform: none; }
.estilo-texto { padding-inline: .2rem; font-size: .9rem; line-height: 1.35; color: var(--gris); }
.mini { border-radius: 14px; padding: .55rem; display: grid; gap: .35rem; aspect-ratio: 4 / 3; align-content: start; overflow: hidden; background: var(--m-fondo); }
.mini-barra { display: flex; justify-content: space-between; align-items: center; }
.mini-barra b { width: 38%; height: 7px; border-radius: 4px; background: var(--m-texto); opacity: .85; }
.mini-barra i { width: 14px; height: 7px; border-radius: 3px; background: var(--m-texto); opacity: .5; }
.mini-foto { border-radius: 9px; background: var(--m-sup); aspect-ratio: 16 / 7; }
.mini-linea { height: 6px; border-radius: 4px; background: var(--m-texto); opacity: .75; width: 78%; }
.mini-linea.corta { width: 52%; opacity: .4; }
.mini-boton { width: 46%; height: 12px; border-radius: 999px; background: var(--m-acento); margin-top: .1rem; }

/* archivos */
.archivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.archivo { position: relative; display: grid; place-items: center; text-align: center; gap: .4rem; aspect-ratio: 1; padding: .8rem; border: 2px dashed #AEB0B8; border-radius: 22px; background: #fff; color: var(--gris); cursor: pointer; overflow: hidden; transition: border-color .15s ease, background-color .15s ease; }
.archivo:hover { border-color: var(--azul); background: var(--nube); color: var(--azul); }
.archivo:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.archivo-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--nube); color: var(--azul); }
.archivo-ico .icono { width: 26px; height: 26px; }
.archivo-txt { font: 600 1rem/1.2 var(--f-tit); color: var(--negro); }
.archivo-sub { font-size: .82rem; line-height: 1.3; }
.archivo img.vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.archivo.logo img.vista { object-fit: contain; padding: 12%; background: #fff; }
.archivo .quitar-archivo { position: absolute; right: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(16 17 22 / .78); color: #fff; display: none; place-items: center; cursor: pointer; }
.archivo.con-archivo { border-style: solid; border-color: var(--azul); }
.archivo.con-archivo .quitar-archivo { display: grid; }
.archivo.con-archivo .archivo-ico, .archivo.con-archivo .archivo-txt, .archivo.con-archivo .archivo-sub { visibility: hidden; }
.archivo.con-error { border-color: var(--rojo); }

/* casilla */
.casilla { display: flex; gap: .3rem; align-items: flex-start; cursor: pointer; line-height: 1.45; }
/* casilla de 44 × 44 para el dedo; el cuadro visible mide 28 */
.casilla input {
  flex: none; width: 44px; height: 44px; margin: -.55rem 0 0 -.5rem; border: 0; border-radius: 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fff' stroke='%23AEB0B8' stroke-width='2'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.casilla input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%230363FA'/%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.con-error .casilla input:not(:checked) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fff' stroke='%23C2311F' stroke-width='2'/%3E%3C/svg%3E"); }
.casilla a { color: var(--azul); font-weight: 600; }

/* trampa contra bots: fuera de la vista y del lector de pantalla */
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* resumen y pago */
.resumen { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: var(--radio); background: var(--nube); align-self: start; }
.resumen h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); }
.resumen .precio { display: flex; align-items: baseline; gap: .5rem; font: 700 2.8rem/1 var(--f-tit); color: var(--azul); }
.resumen .precio small { font: 600 1rem var(--f-tit); color: var(--gris); }
.tope { padding-top: 1.1rem; border-top: 1px solid rgb(3 99 250 / .16); font-size: 1rem; line-height: 1.5; color: var(--gris); }
.tope b { color: var(--negro); }
.tope a { color: var(--azul); font-weight: 600; }
.lista-check { display: grid; gap: .6rem; }
.lista-check li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.lista-check .icono { color: var(--azul); width: 1.3rem; height: 1.3rem; margin-top: .1rem; }
.pagar { display: grid; gap: 1rem; }
.condiciones { padding: 1rem 1.1rem; border-radius: var(--radio-ch); background: var(--nube); font-weight: 500; line-height: 1.45; }
.condiciones b { color: var(--azul); }
.seguro { display: flex; gap: .5rem; align-items: center; justify-content: center; color: var(--gris); font-size: .95rem; text-align: center; }
.seguro .icono { width: 1.1rem; height: 1.1rem; }
.boton .girando { display: none; width: 1.2em; height: 1.2em; border-radius: 50%; border: 3px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: gira .8s linear infinite; }
.boton.cargando .girando { display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Resultado (gracias / pagar) ---------- */
.resultado { display: grid; gap: 1.6rem; padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--esp); }
.resultado-cabeza { display: grid; gap: 1rem; justify-items: start; }
.sello { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--nube); color: var(--azul); }
.sello .icono { width: 40px; height: 40px; }
.sello.ok { background: var(--verde-fondo); color: var(--verde); }
.sello.alerta-sello { background: var(--rojo-fondo); color: var(--rojo); }
.sello.espera { background: #FFF6DC; color: #8A6200; }
.tarjeta-entrega { display: grid; gap: .4rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: var(--radio); background: var(--azul); color: #fff; }
.tarjeta-entrega span { font: 600 1.05rem var(--f-tit); opacity: .9; }
.tarjeta-entrega strong { font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.12 var(--f-tit); }
.datos-pedido { display: grid; gap: .1rem; padding: 1.2rem 1.3rem; border-radius: var(--radio-ch); background: var(--nube); }
.datos-pedido div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgb(3 99 250 / .12); }
.datos-pedido div:last-child { border-bottom: 0; }
.datos-pedido dt { color: var(--gris); }
.datos-pedido dd { margin: 0; font-weight: 700; text-align: right; }
.siguientes { display: grid; gap: .9rem; counter-reset: sig; }
.siguientes li { display: flex; gap: .8rem; align-items: flex-start; }
.siguientes li::before { counter-increment: sig; content: counter(sig); flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--nube); color: var(--azul); display: grid; place-items: center; font: 700 1rem var(--f-tit); }
.esperando { display: flex; align-items: center; gap: .7rem; color: var(--gris); font-weight: 500; }
.esperando .girando-azul { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid var(--nube); border-top-color: var(--azul); animation: gira .8s linear infinite; }

/* ---------- Legales ---------- */
.legal { max-width: 72ch; padding-bottom: var(--esp); }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); margin: 2.2rem 0 .8rem; }
.legal p, .legal li { color: #2C2E37; }
.legal p + p { margin-top: .8rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .5rem; margin-top: .6rem; }
.legal .borrador { margin-bottom: 1.6rem; }
.pendiente { background: #FFF6DC; padding: 0 .3em; border-radius: 6px; }

/* ---------- Error / 404 ---------- */
.pagina-error { display: grid; gap: 1.2rem; justify-items: start; padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--esp); }
.pagina-error img { width: min(280px, 70%); }

/* ---------- Aparición al bajar (sin JS todo se ve) ---------- */
.js [data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s var(--suave); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-revelar].visible { opacity: 1; transform: none; }
.js .plan[data-revelar] { transition: opacity .5s ease-out, transform .5s var(--suave), translate .3s var(--rebote), box-shadow .3s ease; transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s; }

/* ---------- Estados con mouse ---------- */
@media (hover: hover) {
  .plan:hover { translate: 0 -4px; box-shadow: var(--sombra-fuerte); }
  .paso:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
  .tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
  .ejemplo:hover .tel { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 28px 50px rgb(16 17 22 / .3); }
  .faq details:hover { box-shadow: 0 0 0 3px rgb(3 99 250 / .14); }
  .estilo:hover { transform: translateY(-2px); }
}

/* ---------- 600 px ---------- */
@media (min-width: 600px) {
  .paso .sticker { right: -10px; }
  .campos-2 { grid-template-columns: 1fr 1fr; }
  .archivos-fotos { grid-template-columns: repeat(3, minmax(0, 170px)); }
  .acciones .boton, .con-chispas { flex: 0 0 auto; }
  .con-chispas .boton { width: auto; }
  .item { grid-template-columns: 8.2rem 1fr; gap: 1rem; }
  .item .cap { justify-self: stretch; justify-content: center; }
}

/* ---------- 900 px (escritorio) ---------- */
@media (min-width: 900px) {
  :root { --alto-encabezado: 76px; }
  .logo-h { height: 44px; }
  .heroe .contenedor { grid-template-columns: 1.08fr .92fr; }
  .pasos, .apartado { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.2vw, 2.2rem); }
  .incluye { grid-template-columns: .95fr 1.05fr; }
  .ejemplos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; padding: 0; }
  .flecha { display: none; }
  .ejemplos > :nth-child(2) { margin-top: -18px; }
  .desliza { display: none; }
  .preguntas { grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); }
  .preguntas-cabeza { position: sticky; top: calc(var(--alto-encabezado) + 2rem); }
  .preg-escena { max-width: 430px; }
  .cierre .contenedor { grid-template-columns: 1.2fr .8fr; }
  .barra-accion { display: none; }
  .estilos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 1100 px (escritorio): contenido al 80 % y formulario con resumen a un lado ---------- */
@media (min-width: 1100px) {
  .heroe .lead { font-size: 1.3rem; }
  .heroe .contenedor { grid-template-columns: 1.15fr .85fr; }
  .contenedor { width: 80%; }
  .formulario { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 2rem; }
  .formulario .resumen { position: sticky; top: calc(var(--alto-encabezado) + 1.5rem); grid-column: 2; grid-row: 1 / span 10; }
  .resultado { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 3rem; align-items: start; }
  .resultado > .lado { grid-column: 2; grid-row: 1 / span 6; }
}

/* ---------- Para quién (rescatada de gativo.com.mx) ---------- */
.pq { display: grid; gap: 2.2rem; align-items: center; }
.pq-texto { min-width: 0; }
.giros { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.giros .cap { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); padding: .75em 1.15em; background: #fff; color: var(--azul); box-shadow: 0 2px 0 rgb(3 99 250 / .08); white-space: normal; transition: transform .3s var(--rebote), box-shadow .3s ease; }
.giros .icono { width: 1.35em; height: 1.35em; }
.pegados { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 3 / 1.3; justify-self: center; }
.pegados .sticker { position: absolute; left: var(--xm); top: var(--ym); width: var(--wm); max-width: none; height: auto; transform: rotate(var(--r)); filter: drop-shadow(0 6px 10px rgb(16 17 22 / .16)); user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform .35s var(--rebote), filter .35s ease; }
.s-fonda { --r: 7deg; --x: 47%; --y: 1%; --w: 44%; --xm: 34%; --ym: 0%; --wm: 31%; }
.s-tiendita { --r: -8deg; --x: 1%; --y: 9%; --w: 52%; --xm: 0%; --ym: 10%; --wm: 36%; }
.s-taller { --r: -3deg; --x: 25%; --y: 47%; --w: 50%; --xm: 63%; --ym: 8%; --wm: 37%; }

/* ---------- Tu negocio, también en internet (rescatada de gativo.com.mx) ---------- */
.razones { display: grid; gap: 2rem; margin-top: 2.6rem; }
.razon { display: flex; flex-direction: column; gap: .9rem; }
.razon .dibujo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; padding: 6%; border-radius: var(--radio); background: transparent; transition: transform .35s var(--rebote); }
.razon .dibujo img { max-height: 100%; width: auto; }
.razon p { color: var(--gris); }
.zzz { position: absolute; left: 22%; top: 8%; width: 30%; height: 42%; pointer-events: none; font: 700 clamp(1.2rem, 1rem + .8vw, 1.7rem)/1 var(--f-tit); }
.zzz i { position: absolute; left: 0; bottom: 0; font-style: normal; color: transparent; animation: zeta 5s ease-in-out infinite; }
.zzz i:nth-child(2) { animation-delay: .9s; font-size: .82em; left: 24%; }
.zzz i:nth-child(3) { animation-delay: 1.8s; font-size: .66em; left: 44%; }
@keyframes zeta { 0% { color: transparent; transform: translate(0, 0) scale(.5); } 12%, 52% { color: var(--azul); } 70%, 100% { color: transparent; transform: translate(28px, -72px) scale(1.15); } }
.dibujo-chat { padding: 0; }
.chat { width: 80%; display: grid; gap: .7rem; zoom: 1.1; }
.msg { max-width: 84%; padding: .7rem 1rem; border-radius: 20px; font: 500 clamp(.92rem, .86rem + .25vw, 1.05rem)/1.3 var(--f-txt); }
.msg.cliente { justify-self: start; background: var(--nube); color: var(--negro); border-bottom-left-radius: 6px; }
.msg.negocio { justify-self: end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.tarjeta-link { justify-self: end; width: 84%; display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.tl-img { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: var(--nube); display: grid; place-items: center; color: var(--azul); }
.tl-img .icono { width: 62%; height: 62%; }
.tl-txt { display: grid; font: 700 1rem/1.2 var(--f-tit); }
.tl-txt small { font: 500 .85rem var(--f-txt); color: var(--gris); }

@media (hover: hover) {
  .giros .cap:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgb(3 99 250 / .18); }
  .pegados .sticker:hover { transform: translateY(-6px) rotate(calc(var(--r) - 3deg)) scale(1.05); filter: drop-shadow(0 14px 18px rgb(16 17 22 / .2)); }
  .razon:hover .dibujo { transform: translateY(-6px) rotate(-1deg); }
}
@media (min-width: 700px) {
  .planes { grid-template-columns: 1fr 1fr; }
  .plan-destacado { rotate: -1.2deg; }
  .razones { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .pq { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: clamp(2rem, 4vw, 4.5rem); }
  .pegados { max-width: 25rem; aspect-ratio: 1 / .95; }
  .pegados .sticker { left: var(--x); top: var(--y); width: var(--w); }
  .razones { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.4rem); }
}

/* ---------- Movimiento de la marca (rescatado de gativo.com.mx) ---------- */
.escena .miau { position: absolute; left: 30%; bottom: 46%; z-index: 3; padding: .45em .95em; border-radius: 999px; background: var(--azul); color: #fff; font: 700 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.1 var(--f-tit); pointer-events: none; transform: scale(0); transform-origin: 15% 100%; }
.escena .miau::after { content: ""; position: absolute; left: 1.1em; bottom: -10px; width: 22px; height: 22px; background: var(--azul); clip-path: path("M0,0 L22,0 C16,8 9,15 1,22 C4,15 6,8 0,0 Z"); }
.escena { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.marca { -webkit-tap-highlight-color: transparent; }
.logo-h #lg-g-chispas path, .escena .gato .g-chispa { transform-box: fill-box; transform-origin: 0 100%; }
.escena .gato #hm-g-globito { transform-box: fill-box; transform-origin: 100% 100%; }
.pegados .sticker { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.caja-svg { cursor: pointer; -webkit-tap-highlight-color: transparent; transform-origin: 50% 93%; }
.razon .dibujo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.razon .dibujo img { transform-origin: 50% 100%; }
.pin-onda { position: absolute; left: 50%; bottom: 6%; width: 32%; aspect-ratio: 3 / 1; border-radius: 50%; border: 3px solid var(--azul); transform: translateX(-50%) scale(0); pointer-events: none; }
.msg.escribiendo { display: none; justify-self: end; align-items: center; gap: .32rem; padding: .8rem 1rem; border-radius: 20px; border-bottom-right-radius: 6px; background: var(--azul); }
.msg.escribiendo i { width: .45em; height: .45em; border-radius: 50%; background: #fff; animation: escribe 1.2s ease-in-out infinite; }
.msg.escribiendo i:nth-child(2) { animation-delay: .15s; }
.msg.escribiendo i:nth-child(3) { animation-delay: .3s; }
/* el chat «se platica solo»: los globitos aparecen uno por uno */
.chat.en-vivo .cliente, .chat.en-vivo .negocio, .chat.en-vivo .tarjeta-link { visibility: hidden; transform: translateY(10px) scale(.85); transition: transform .45s var(--rebote), visibility 0s linear .45s; }
.chat.en-vivo .cliente { transform-origin: 0 100%; }
.chat.en-vivo .negocio, .chat.en-vivo .tarjeta-link { transform-origin: 100% 100%; }
.chat.en-vivo .ver { visibility: visible; transform: none; transition: transform .45s var(--rebote), visibility 0s; }
.chat.en-vivo .escribiendo.ver { display: inline-flex; }
.faq details { overflow: hidden; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .js [data-revelar] { opacity: 1; transform: none; }
  .avance { display: none; }
}
.lado { display: grid; gap: 1rem; align-content: start; }

/* ---------- Cupo real y avisos de apartados reales ---------- */
/* portada en celular y tableta: título, la escena, el texto, el botón, el aviso y la letra chica */
@media (max-width: 899px) {
  .heroe .contenedor { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .heroe .contenedor > div:first-child { display: contents; }
  .heroe .contenedor > div:first-child > .cap { order: 1; }
  .heroe h1 { order: 2; }
  .heroe .escena { order: 3; margin-top: 2rem; }
  .heroe .lead { order: 4; margin-top: 1.6rem; }
  .heroe .acciones { order: 5; align-self: stretch; }
  .heroe .entrega-aviso { order: 6; }
  .heroe .nota-heroe { order: 7; }
}
/* en celular, el cuadro del cupo ocupa todo lo ancho del aviso (sin palabras sueltas) */
@media (max-width: 599px) {
  .entrega-textos { justify-items: stretch; }
  .entrega-textos .cupo { width: auto; margin-left: -2.4rem; justify-content: center; text-align: center; text-wrap: balance; font-size: .94rem; }
}
/* el cupo del día va en su propio cuadro */
.cupo { display: inline-flex; align-items: center; justify-self: start; width: fit-content; margin-top: .55rem; padding: .35rem .8rem; border-radius: 10px; background: var(--azul); color: #fff; font: 600 .98rem/1.3 var(--f-tit); }
.entrega-textos .cupo { margin-top: 0; }
.cierre .cupo { color: #fff; }
/* en celular va arriba, bajo el encabezado, para no estorbar al escribir; en escritorio, abajo a la izquierda */
.aviso-apartado { position: fixed; left: 5%; right: 5%; top: calc(74px + env(safe-area-inset-top, 0px)); z-index: 45; width: fit-content; max-width: 90%; margin-inline: auto; display: flex; align-items: center; gap: .55rem; padding: .35rem .3rem .35rem .45rem; border-radius: 999px; background: #fff; box-shadow: var(--sombra-fuerte); opacity: 0; transform: translateY(-14px); transition: opacity .3s ease, transform .4s var(--rebote); }
.aviso-apartado.visible { opacity: 1; transform: none; }
.aviso-apartado-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; }
.aviso-apartado-ico svg { width: 17px; height: 17px; fill: #fff; }
.aviso-apartado-txt { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.aviso-apartado-txt b { font: 600 .86rem/1.2 var(--f-tit); }
.aviso-apartado-txt small { font-size: .76rem; color: var(--gris); }
.aviso-apartado button { flex: none; width: 44px; height: 44px; margin: -4px -2px -4px 0; border: 0; border-radius: 50%; background: transparent; color: var(--gris); cursor: pointer; display: grid; place-items: center; }
.aviso-apartado button .icono { width: 1.05rem; height: 1.05rem; }
.aviso-apartado button:hover { background: var(--nube); }
@media (min-width: 900px) { .aviso-apartado { top: auto; left: 24px; right: auto; bottom: 24px; margin: 0; max-width: 330px; padding: .45rem .4rem .45rem .55rem; border-radius: 18px; transform: translateY(14px); } .aviso-apartado.visible { transform: none; } }

/* reembolsos en la página de seguimiento */
.nota-reembolso { display: flex; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; margin: .6rem auto 0; padding: .6rem 1rem; border-radius: 16px; background: var(--rojo-fondo); color: var(--rojo); font-weight: 600; text-align: left; }
.nota-reembolso .icono { flex: none; }

/* colores para la página (formulario): una barra de colores que se tocan, hasta 3; en celular se desliza */
.barra-colores { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--nube); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.barra-colores::-webkit-scrollbar { display: none; }
.color-seg { position: relative; flex: 1 0 44px; height: 48px; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.color-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; clip-path: inset(50%); cursor: pointer; }
.seg { display: grid; place-items: center; height: 100%; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(16 17 22 / .12); transition: transform .25s var(--rebote), box-shadow .15s ease, opacity .15s ease; }
.color-seg:first-child .seg { border-radius: 999px 10px 10px 999px; }
.color-seg:last-child .seg { border-radius: 10px 999px 999px 10px; }
.seg .icono { width: 1.3rem; height: 1.3rem; color: #fff; visibility: hidden; transform: scale(.4); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .45)); transition: transform .25s var(--rebote), visibility 0s; }
.color-seg:hover .seg { transform: scaleY(.9); }
.color-seg input:checked + .seg { transform: scale(.82); box-shadow: inset 0 0 0 1px rgb(16 17 22 / .12), 0 0 0 3px #fff, 0 0 0 5px var(--azul); }
.color-seg input:checked + .seg .icono { visibility: visible; transform: none; }
.color-seg input:focus-visible + .seg { outline: 3px solid var(--azul); outline-offset: 2px; }
.color-seg input:disabled + .seg { opacity: .3; }
.color-seg:has(input:disabled) { cursor: not-allowed; }
/* en el blanco, el amarillo y el celeste la palomita va oscura */
.color-seg input[value="blanco"] + .seg .icono, .color-seg input[value="amarillo"] + .seg .icono, .color-seg input[value="celeste"] + .seg .icono { color: var(--negro); filter: none; }

/* ---------- Interruptores que abren las secciones opcionales del formulario ---------- */
.interruptor { position: relative; display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .75rem 1rem; border-radius: 20px; background: var(--nube); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease; }
.interruptor:hover { background: #E2ECFF; }
.interruptor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; clip-path: inset(50%); cursor: pointer; }
.interruptor-pista { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: #B9BCC6; transition: background-color .2s ease; }
.interruptor-pista::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(16 17 22 / .25); transition: transform .3s var(--rebote); }
.interruptor input:checked + .interruptor-pista { background: var(--azul); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--azul); outline-offset: 3px; }
.interruptor-txt { display: grid; gap: .15rem; min-width: 0; }
.interruptor-txt b { font: 600 1.04rem/1.25 var(--f-tit); }
.interruptor-txt small { font: 400 .95rem/1.35 var(--f-txt); color: var(--gris); }
.desplegable { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 1.3rem; }
.js .desplegable:not([data-abierto]) { display: none; }
.archivos-logo { grid-template-columns: minmax(0, 1fr); max-width: 160px; }
/* en celular la barra se desliza: las orillas se desvanecen para que se note que hay más colores */
@media (max-width: 759px) { .barra-colores { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); } }
.nota-despues { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 18px; border: 2px dashed var(--gris-cl); color: var(--gris); line-height: 1.45; }
.nota-despues .icono { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1rem; color: var(--azul); }
.nota-despues b { color: var(--negro); }
@media (prefers-reduced-motion: reduce) { .interruptor-pista, .interruptor-pista::after, .seg { transition: none; } }
/* celular: el resumen, los términos y el cuadro del precio van un 20 % más chicos, para llegar antes a «Guardar y pagar» */
@media (max-width: 899px) {
  .formulario .resumen { gap: .9rem; padding: 1.15rem 1.2rem; }
  .formulario .resumen h2 { font-size: 1.12rem; }
  .formulario .resumen .precio { font-size: 2.24rem; }
  .formulario .resumen .precio small { font-size: .8rem; }
  .formulario .resumen .lista-check { gap: .5rem; font-size: .8em; }
  .formulario .resumen .lista-check .icono { width: 1.05rem; height: 1.05rem; }
  .formulario .resumen .tope { padding-top: .9rem; font-size: .8rem; }
  .pagar .casilla { font-size: .8em; }
  .pagar .condiciones { padding: .8rem .9rem; font-size: .8em; }
  .pagar .cupo { font-size: .78rem; }
}

/* ---------- WhatsApp: botón flotante, pie y preguntas ---------- */
:root { --wa: #1DA851; }
.wa-flotante { position: fixed; right: 5%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 42; display: flex; align-items: center; gap: .6rem; border-radius: 999px; color: var(--negro); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: bottom .4s var(--rebote), opacity .2s ease, transform .25s var(--rebote), visibility 0s; }
.wa-ico { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 10px 26px rgb(29 168 81 / .38); }
.wa-ico .icono { width: 31px; height: 31px; vertical-align: 0; }
.wa-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wa-flotante:hover { transform: translateY(-3px); }
.wa-flotante:active { transform: scale(.96); }
.wa-flotante:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
body:has(.barra-accion.visible) .wa-flotante { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.wa-flotante.oculto { opacity: 0; visibility: hidden; transform: scale(.6); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
@media (min-width: 900px) {
  .wa-flotante { right: 24px; bottom: 24px; padding: .4rem 1.2rem .4rem .4rem; background: #fff; box-shadow: var(--sombra-fuerte); font: 600 1.02rem var(--f-tit); }
  .wa-ico { width: 44px; height: 44px; box-shadow: none; }
  .wa-ico .icono { width: 25px; height: 25px; }
  .wa-txt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .wa-flotante:hover { color: var(--verde); }
}
.boton-wa .icono { color: var(--wa); }
.boton-wa:hover { color: var(--verde); box-shadow: inset 0 0 0 3px var(--wa); transform: translateY(-2px); }
.cierre .boton-wa { color: #fff; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .6); }
.cierre .boton-wa .icono { color: #fff; }
.cierre .boton-wa:hover { color: #fff; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 3px #fff; }
.pie-wa .icono { width: 1.15em; height: 1.15em; margin-right: .4em; color: var(--wa); vertical-align: -.15em; }
.faq-wa { margin-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; color: var(--gris); }
.faq-wa a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font: 600 1.02rem var(--f-tit); color: var(--verde); text-decoration: none; }
.faq-wa a .icono { width: 1.35em; height: 1.35em; color: var(--wa); }
.faq-wa a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .wa-flotante, .wa-flotante.oculto { transition: none; } }