/* Estilos compartidos por todas las páginas de zerobit.com.mx */

:root{
  --noche:#0B1120; --azul:#0066FF; --azul-hondo:#0052CC; --gris:#E2E8F0;
  /* Acento de interfaz: un azul más claro de la familia del logo. El cian se quitó (nov 2026). */
  --acento:#5B9BFF;
  --fondo:var(--noche); --superficie:#111A2E; --linea:#1F2A44; --texto:#F1F5F9;
  --tenue:#94A3B8; --apagado:#64748B; --wa:#1FAF5A;
  --ancho:1180px; --lado:clamp(16px,5vw,40px);
  color-scheme:dark;
}
/* La marca vive en la noche: el claro solo se prende con el botón del pie. */
:root[data-tema="claro"]{
  --fondo:#FFFFFF; --superficie:#F4F7FB; --linea:#E2E8F0; --texto:#0B1120;
  --tenue:#475569; --apagado:#64748B; --acento:#0066FF; color-scheme:light;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ background:var(--fondo); color:var(--texto); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
      font-size:17px; line-height:1.55; overflow-x:clip }
img{ display:block; max-width:100%; height:auto }
[hidden]:not(img){ display:none !important }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:6px }
.marco{ max-width:var(--ancho); margin:0 auto; padding:0 var(--lado) }
.num{ font-variant-numeric:tabular-nums }
.logo-claro{ display:none }
[data-tema="claro"] .logo-oscuro{ display:none }
[data-tema="claro"] .logo-claro{ display:block }

.boton{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:12px; font:inherit;
        font-weight:600; font-size:16px; text-decoration:none; border:1px solid transparent; cursor:pointer;
        transition:background .15s, border-color .15s }
.boton svg{ width:20px; height:20px; flex:none }
.boton.azul{ background:var(--azul); color:#fff }
.boton.azul:hover{ background:var(--azul-hondo) }
.boton.borde{ border-color:var(--linea); color:var(--texto) }
.boton.borde:hover{ border-color:var(--tenue) }

/* ---------- encabezado: aparece cuando el logo grande ya se fue ---------- */
header{ position:fixed; inset:0 0 auto; z-index:40; transition:background .3s, border-color .3s;
        border-bottom:1px solid transparent; padding-top:env(safe-area-inset-top) }
header .marco{ display:flex; align-items:center; gap:28px; height:64px }
header .logo{ opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s; pointer-events:none }
header .logo img{ height:19px; width:auto }
header nav{ display:flex; gap:24px; margin-left:auto; font-size:14.5px; color:var(--tenue) }
header nav a{ text-decoration:none }
header nav a:hover{ color:var(--texto) }
header .boton{ padding:9px 16px; font-size:14.5px; border-radius:10px }
body.bajo header{ background:color-mix(in srgb,var(--fondo) 86%,transparent); backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px); border-color:var(--linea) }
body.bajo header .logo{ opacity:1; transform:none; pointer-events:auto }
@media (max-width:860px){ header nav{ display:none } header .boton{ margin-left:auto } }

/* ---------- 1. la marca ---------- */
.identidad{ position:relative; height:150svh }
.identidad .fijo{ position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden }
#bits{ position:absolute; inset:0; width:100%; height:100% }
.identidad .centro{ position:relative; text-align:center; padding:0 var(--lado); width:100%;
        transform:translateY(calc(var(--p,0) * -60px)) scale(calc(1 - var(--p,0) * .28)); opacity:calc(1 - var(--p,0) * 1.15) }
.logo-grande{ display:block; width:min(88vw,760px); height:auto; margin:0 auto; overflow:visible }
[data-tema="claro"] .logo-grande path[fill="#FFFFFF"]{ fill:var(--noche) }
/* El rayo cae sobre el cero una vez, al llegar. Es la firma de la marca. */
.rayo{ transform-box:fill-box; transform-origin:100% 0% }
.llega .rayo{ animation:cae 1.1s cubic-bezier(.16,.9,.3,1) .35s both }
.llega .rayo path{ animation:destella 1.1s linear .35s both }
.llega .anillo{ animation:golpe 1.2s ease-out .35s both }
@keyframes cae{ 0%{ transform:scale(0) } 42%,100%{ transform:scale(1) } }
@keyframes destella{ 0%,26%{ fill:#fff } 52%,100%{ fill:#0066FF } }
@keyframes golpe{ 0%,32%{ filter:none } 44%{ filter:drop-shadow(0 0 22px rgba(0,209,255,.9)) } 100%{ filter:none } }
.lema{ margin-top:clamp(36px,6vh,60px); font-size:clamp(24px,3.6vw,40px); font-weight:800; letter-spacing:-.03em }
.que{ margin:14px auto 0; max-width:46ch; color:var(--tenue); font-size:clamp(16px,1.6vw,18.5px) }
.baja{ position:absolute; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); translate:-50% 0; display:grid; justify-items:center; gap:10px;
        font-size:13.5px; color:var(--apagado); opacity:calc(1 - var(--p,0) * 4) }
.baja i{ width:1px; height:44px; background:linear-gradient(var(--tenue),transparent); transform-origin:top; animation:gota 2.2s ease-in-out infinite }
@keyframes gota{ 0%{ transform:scaleY(0) } 50%{ transform:scaleY(1) } 100%{ transform:scaleY(1); opacity:0 } }

/* ---------- 2. la frase que se enciende al bajar ---------- */
.frase{ padding:clamp(40px,10vh,120px) 0 clamp(80px,16vh,180px) }
.frase p{ font-size:clamp(28px,4.6vw,58px); line-height:1.12; letter-spacing:-.035em; font-weight:800; max-width:22ch }
.frase span{ color:color-mix(in srgb,var(--texto) 18%,transparent); transition:color .25s }
.frase span.prendida{ color:var(--texto) }
.frase span.azul.prendida{ color:var(--azul) }


.escenario{ position:relative; height:min(76svh,640px); perspective:1400px }
.aparato{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none;
        transform:translateY(40px) scale(.94); transition:opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1) }
.aparato.activo{ opacity:1; transform:none; pointer-events:auto }
.aparato.salio{ transform:translateY(-40px) scale(.96) }
.giro{ transform:rotateY(calc(var(--g,0) * -9deg)) rotateX(calc(var(--g,0) * 3deg)); transition:transform .1s linear }

.celular{ width:min(300px,62vw); aspect-ratio:9/19; border-radius:46px; padding:11px; background:#05080F;
        box-shadow:0 0 0 1px #2A3550, 0 50px 90px -30px rgba(0,102,255,.55) }
.celular .pantalla{ position:relative; height:100%; border-radius:36px; overflow:hidden; background:#fff }
.celular .pantalla img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:opacity .4s }
.celular .isla{ position:absolute; top:20px; left:50%; translate:-50% 0; width:86px; height:24px; border-radius:20px; background:#05080F; z-index:2 }
.toque{ position:absolute; z-index:3; width:54px; height:54px; border-radius:50%; border:2px solid var(--acento); opacity:0; pointer-events:none }
.aparato.activo .toque{ animation:toque 2.6s ease-out 1s infinite }
@keyframes toque{ 0%{ opacity:0; transform:scale(.4) } 15%{ opacity:.9 } 45%{ opacity:0; transform:scale(1.5) } 100%{ opacity:0 } }

.navegador{ width:min(620px,92%); border-radius:14px; overflow:hidden; background:#fff; color:#1b1b1b;
        box-shadow:0 0 0 1px #2A3550, 0 50px 90px -30px rgba(0,102,255,.5) }
.barra{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:#E8ECF2 }
.barra i{ width:10px; height:10px; border-radius:50%; background:#C3CAD6 }
.barra span{ margin-left:12px; flex:1; background:#fff; border-radius:7px; font-size:12px; color:#667; padding:4px 10px }
.ventana{ height:min(52svh,430px); overflow:hidden; position:relative }
.sitio-demo{ transform:translateY(calc(var(--s,0) * -1 * var(--recorrido,0px))) }
.sd-nav{ display:flex; justify-content:space-between; align-items:center; padding:14px 22px; font-size:12px; font-weight:600 }
.sd-nav b{ font-size:15px; letter-spacing:.02em }
.sd-portada{ margin:0 14px; border-radius:12px; padding:34px 24px; background:#2C2A26; color:#F6EFE6 }
.sd-portada h4{ font-size:28px; line-height:1.05; letter-spacing:-.02em; font-weight:800; max-width:13ch }
.sd-portada p{ font-size:13px; opacity:.75; margin-top:8px }
.sd-botones{ display:flex; gap:8px; margin-top:16px }
.sd-botones span{ font-size:12px; font-weight:700; padding:8px 12px; border-radius:8px; background:#E9B872; color:#2C2A26 }
.sd-botones span+span{ background:#1FAF5A; color:#fff }
.sd-servicios{ padding:20px 22px 6px; font-size:13px }
.sd-servicios h5{ font-size:15px; margin-bottom:8px }
.sd-servicios div{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #EEE }
.sd-agenda{ margin:14px 22px; border:1px solid #EEE; border-radius:10px; padding:14px; font-size:12.5px }
.sd-agenda .dias{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:10px }
.sd-agenda .dias span{ text-align:center; padding:8px 0; border-radius:7px; background:#F3F1EE }
.sd-agenda .dias span.si{ background:#2C2A26; color:#fff }
.sd-mapa{ margin:0 22px 22px; height:120px; border-radius:10px; background:
        repeating-linear-gradient(90deg,#ECEFF3 0 38px,#E2E6EC 38px 40px), #ECEFF3; position:relative }
.sd-mapa::after{ content:""; position:absolute; left:46%; top:34%; width:18px; height:18px; border-radius:50% 50% 50% 0; background:#E5484D; transform:rotate(-45deg) }

.monitor{ width:min(680px,96%) }
.monitor .marco-monitor{ border-radius:14px; padding:10px; background:#05080F; box-shadow:0 0 0 1px #2A3550, 0 50px 90px -30px rgba(0,102,255,.5) }
.monitor .pantalla{ position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:#fff }
.monitor .pantalla img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s }
.monitor .pie{ width:22%; height:34px; margin:0 auto; background:linear-gradient(#1a2236,#0d1424); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%) }
.monitor .etiqueta{ text-align:center; margin-top:14px; font-size:14px; color:var(--tenue); min-height:1.5em }

/* La conversación de WhatsApp se arma con HTML: es una ilustración, no una captura. */
.chat{ position:absolute; inset:0; display:flex; flex-direction:column; background:#EFE9E1; color:#111B21; font-size:12.5px; line-height:1.35 }
.chat .cabeza{ display:flex; align-items:center; gap:9px; padding:46px 12px 10px; background:#0B1120; color:#fff }
.chat .cabeza i{ width:30px; height:30px; border-radius:50%; background:var(--azul); display:grid; place-items:center; font-style:normal; font-weight:800; font-size:12px }
.chat .cabeza b{ display:block; font-size:13px }
.chat .cabeza small{ font-size:10.5px; opacity:.7 }
.chat .mensajes{ flex:1; display:flex; flex-direction:column; gap:7px; padding:12px 10px; overflow:hidden }
.chat .dia{ align-self:center; background:#fff; color:#54656F; font-size:10.5px; padding:3px 9px; border-radius:7px }
.burbuja{ max-width:84%; padding:7px 9px 5px; border-radius:9px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.08);
        opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s }
.burbuja.ve{ opacity:1; transform:none }
.burbuja.mio{ align-self:flex-end; background:#D9FDD3 }
.burbuja time{ display:block; text-align:right; font-size:9.5px; color:#667781; margin-top:2px }
.burbuja .opciones{ display:grid; gap:1px; margin:7px -9px -5px; border-top:1px solid #E9EDEF }
.burbuja .opciones span{ text-align:center; color:#0066FF; font-weight:600; padding:6px 0 }
.burbuja .opciones span+span{ border-top:1px solid #E9EDEF }
/* Nota de voz: el asistente también las entiende, por eso la plática empieza con una. */
.burbuja.voz{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:62% }
.burbuja.voz .play{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #54656F }
.burbuja.voz .onda{ flex:1; height:14px; border-radius:2px; background:repeating-linear-gradient(90deg,#8696A0 0 2px,transparent 2px 4px) }
.burbuja.voz .dura{ font-size:10px; color:#667781 }
.burbuja.voz time{ flex-basis:100%; margin-top:0 }

/* ---------- 5. casos: dónde ya está trabajando ---------- */
section.casos{ padding:clamp(72px,12vw,140px) 0; border-top:1px solid var(--linea) }
.casos h2{ font-size:clamp(30px,4.4vw,50px); line-height:1.05; letter-spacing:-.035em; font-weight:800; max-width:20ch }
.casos .intro{ margin-top:12px; color:var(--tenue); max-width:56ch; font-size:17.5px }
.caso{ margin-top:clamp(56px,8vw,100px); display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); align-items:center }
.caso.vuelta{ grid-template-columns:minmax(0,7fr) minmax(0,4fr) }
.caso.vuelta .relato{ order:2 }
.caso .giro-negocio{ font-size:15px; font-weight:600; color:var(--acento) }
.caso h3{ margin-top:8px; font-size:clamp(24px,2.8vw,34px); line-height:1.1; letter-spacing:-.03em; font-weight:800 }
.caso .relato > p{ margin-top:14px; color:var(--tenue); font-size:16.5px }
.caso dl{ margin-top:22px; display:grid; gap:14px }
.caso dt{ font-weight:600; font-size:16px }
.caso dd{ color:var(--tenue); font-size:15.5px }
/* Dos pantallas encimadas: la venta al frente y la ficha del cliente detrás, como en el mostrador. */
.apilado{ position:relative; padding-bottom:16% }
.apilado button{ display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:12px; width:100% }
.apilado img{ width:100%; border-radius:12px; border:1px solid var(--linea); background:#fff; box-shadow:0 40px 80px -40px rgba(0,0,0,.7) }
.apilado .atras{ position:absolute; width:62%; right:-3%; bottom:0; transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.caso.vuelta .apilado .atras{ right:auto; left:-3% }
.apilado .atras img{ box-shadow:0 30px 60px -20px rgba(0,0,0,.8) }
.apilado .atras:hover{ transform:translateY(-6px) }
@media (max-width:860px){
  .caso, .caso.vuelta{ grid-template-columns:1fr }
  .caso.vuelta .relato{ order:0 }
  .apilado .atras{ right:0 } .caso.vuelta .apilado .atras{ left:0 }
}

dialog{ border:0; padding:0; background:transparent; max-width:min(1400px,94vw); max-height:92vh; margin:auto }
dialog::backdrop{ background:rgba(5,8,15,.88) }
dialog img{ max-height:84vh; width:auto; border-radius:10px; margin:0 auto }
dialog p{ color:#E2E8F0; text-align:center; margin-top:10px; font-size:15px }
dialog button{ position:fixed; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:0; background:#1F2A44; color:#fff; font-size:22px; cursor:pointer }


/* ---------- 6. precios: se leen como la carta de un restaurante ---------- */
section.precios, section.tratos{ padding:clamp(72px,12vw,140px) 0; border-top:1px solid var(--linea) }
.columnas{ margin-top:52px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,6vw,88px) }
@media (max-width:900px){ .columnas{ grid-template-columns:1fr } }
.columnas h2{ font-size:15px; font-weight:600; color:var(--tenue); padding-bottom:14px; border-bottom:1px solid var(--linea) }
.renglon{ padding:20px 0; border-bottom:1px solid var(--linea) }
.renglon .linea{ display:flex; align-items:baseline; gap:12px }
.renglon h3{ font-size:clamp(19px,2vw,23px); letter-spacing:-.015em; white-space:nowrap }
.renglon .puntos{ flex:1; min-width:20px; height:2px; transform:translateY(-6px);
        background:radial-gradient(circle,var(--apagado) 1px,transparent 1.4px) 0 0/8px 2px repeat-x;
        clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.3,.7,.2,1) }
.renglon.visto .puntos{ clip-path:inset(0 0 0 0) }
.renglon .monto{ font-size:clamp(19px,2vw,23px); font-weight:700; letter-spacing:-.02em; white-space:nowrap }
.renglon p{ margin-top:6px; color:var(--tenue); font-size:15.5px; max-width:56ch }
.renglon .plazo{ color:var(--apagado); font-size:14px; margin-top:2px }
.sello{ display:inline-block; margin-left:8px; font-size:12.5px; font-weight:600; color:#fff; background:var(--azul); padding:3px 8px; border-radius:6px; vertical-align:3px; letter-spacing:0 }
.nota{ margin-top:18px; color:var(--apagado); font-size:14.5px }
@media (max-width:520px){
  .renglon .linea{ flex-wrap:wrap; gap:2px 10px }
  .renglon h3{ white-space:normal; flex-basis:100% }
  .renglon .puntos{ display:none }
}

.tratos .cuatro{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.tratos h3{ font-size:19px; letter-spacing:-.015em }
.tratos p{ color:var(--tenue); font-size:15.5px; margin-top:6px }
@media (max-width:860px){ .tratos .cuatro{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .tratos .cuatro{ grid-template-columns:1fr } }

.cierre{ background:var(--azul); color:#fff; padding:clamp(64px,11vw,128px) 0; overflow:hidden; position:relative }
.cierre img.marca-agua{ position:absolute; right:-6%; top:50%; width:min(46vw,520px); translate:0 -50%; opacity:.14; pointer-events:none;
                     /* a una tinta blanca: el rayo azul desaparecía sobre el fondo azul */
                     filter:brightness(0) invert(1) }
.cierre h2{ position:relative; font-size:clamp(34px,5.4vw,64px); letter-spacing:-.04em; line-height:1.02; font-weight:800; max-width:15ch }
.cierre p{ position:relative; margin-top:18px; font-size:18px; max-width:46ch; color:#DCE8FF }
.cierre .boton{ position:relative; margin-top:32px; background:#fff; color:var(--noche); font-size:17px; padding:16px 26px }
.cierre .boton:hover{ background:var(--gris) }
.cierre :focus-visible{ outline-color:#fff }

footer{ padding:40px 0 calc(40px + env(safe-area-inset-bottom)); font-size:14.5px; color:var(--apagado) }
footer .marco{ display:flex; gap:18px 30px; flex-wrap:wrap; align-items:center }
footer img{ height:16px; width:auto }
footer a{ text-decoration:none }
footer a:hover{ color:var(--texto) }
footer .tema{ margin-left:auto; font:inherit; color:inherit; background:none; border:1px solid var(--linea); border-radius:8px; padding:6px 12px; cursor:pointer }

.flotante{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; display:none;
        width:58px; height:58px; border-radius:50%; background:var(--wa); color:#fff; place-items:center;
        box-shadow:0 10px 30px -8px rgba(0,0,0,.6); transition:transform .3s, opacity .3s }
.flotante svg{ width:30px; height:30px }
@media (max-width:860px){ .flotante{ display:grid } body:not(.bajo) .flotante{ transform:scale(.6); opacity:0; pointer-events:none } }

/* =========================================================================
   Varias páginas: lo que se agregó al dividir el sitio
   ========================================================================= */
.oculto-visual{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
body.interna main{ padding-top:calc(64px + env(safe-area-inset-top)) }
.identidad{ height:130svh }

/* El menú marca la página en la que estás. */
header nav a[aria-current="page"]{ color:var(--texto); text-decoration:underline; text-decoration-color:var(--azul); text-decoration-thickness:2px; text-underline-offset:8px }
.abrir-menu{ display:none; width:44px; height:44px; border:1px solid var(--linea); border-radius:10px; background:none; color:var(--texto); cursor:pointer; position:relative }
.abrir-menu span:not(.oculto-visual){ position:absolute; left:12px; right:12px; height:2px; background:currentColor; transition:transform .2s }
.abrir-menu span:nth-child(1){ top:16px } .abrir-menu span:nth-child(2){ top:25px }
body.menu-abierto .abrir-menu span:nth-child(1){ transform:translateY(4.5px) rotate(45deg) }
body.menu-abierto .abrir-menu span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg) }
@media (max-width:1040px){
  header nav{ display:none }
  header .boton{ margin-left:auto }
  .abrir-menu{ display:block }
  /* En el teléfono el menú baja como una hoja y deja el botón de WhatsApp a la vista. */
  body.menu-abierto header{ background:var(--fondo); border-color:var(--linea) }
  body.menu-abierto header .logo{ opacity:1; pointer-events:auto; transform:none }
  body.menu-abierto header nav{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
        background:var(--fondo); border-bottom:1px solid var(--linea); padding:6px var(--lado) 18px; font-size:19px }
  body.menu-abierto header nav a{ padding:14px 0; color:var(--texto); border-bottom:1px solid var(--linea) }
  body.menu-abierto header nav a:last-child{ border-bottom:0 }
}

/* Títulos de sección iguales en todas las páginas. */
.bloque{ padding:clamp(64px,10vw,120px) 0; border-top:1px solid var(--linea) }
.bloque h2, .precios h1, .tratos h2, .portada-simple h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.05; letter-spacing:-.035em; font-weight:800; max-width:20ch }
.bloque .intro, .precios .intro{ margin-top:12px; color:var(--tenue); max-width:56ch; font-size:17.5px }
.ruta{ font-size:15px; font-weight:600; color:var(--acento); margin-bottom:12px }
.mas{ margin-top:36px }
.nota a{ color:var(--texto) }

/* ---------- portada de cada producto: el texto y el aparato lado a lado ---------- */
.portada-producto .marco{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,5vw,72px); align-items:center; min-height:calc(100svh - 64px); padding-top:24px; padding-bottom:48px }
.portada-producto h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.02; letter-spacing:-.04em; font-weight:800 }
.portada-producto .bajada{ margin-top:16px; color:var(--tenue); font-size:18px; max-width:42ch }
.puntos-lista{ list-style:none; margin-top:22px; display:grid; gap:10px; font-size:16px }
.puntos-lista li{ padding-left:22px; position:relative }
.puntos-lista li::before{ content:""; position:absolute; left:2px; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--azul) }
.cierre-ficha{ margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.desde{ font-size:15px; color:var(--tenue) }
.desde b{ display:block; font-size:30px; color:var(--texto); letter-spacing:-.03em; line-height:1.1 }
.portada-producto .escenario{ height:min(78svh,660px); display:grid; place-items:center; perspective:none }
.portada-producto .escenario > .celular{ height:100%; width:auto; max-width:100% }
.portada-producto .navegador .ventana{ height:min(56svh,440px) }
/* La página de ejemplo baja sola, despacio, como si alguien la estuviera leyendo. */
.baja-sola{ animation:leer 14s ease-in-out 1s infinite alternate }
@keyframes leer{ 0%,12%{ transform:none } 88%,100%{ transform:translateY(-38%) } }
.chat .burbuja{ transition-duration:.45s }
@media (max-width:860px){
  .portada-producto .marco{ grid-template-columns:1fr; min-height:0; padding-top:36px; gap:36px }
  .portada-producto .escenario{ height:min(72svh,560px) }
  .portada-producto .navegador{ width:100% }
  .portada-producto .navegador .ventana{ height:52svh }
}

/* ---------- inicio: los cuatro productos ----------
   Una lista que se lee de corrido y, en computadora, una sola pantalla grande
   que cambia con el servicio que señalas. Cuatro tarjetas iguales se veían a
   plantilla y hacían chiquitas las capturas. */
.vitrina{ margin-top:44px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,5vw,64px); align-items:center }
.vitrina-lista{ list-style:none; border-top:1px solid var(--linea) }
.vitrina-lista a{ position:relative; display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:22px 6px 22px 20px;
                  border-bottom:1px solid var(--linea); text-decoration:none }
.vitrina-lista a::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:3px;
                          background:var(--azul); transform:scaleY(0); transition:transform .25s }
.vitrina-lista a::after{ content:"›"; grid-column:2; grid-row:1 / span 3; align-self:center; font-size:30px; line-height:1;
                         color:var(--apagado); transition:transform .2s, color .2s }
.vitrina-lista a.activa::before{ transform:scaleY(1) }
.vitrina-lista a.activa::after{ color:var(--texto); transform:translateX(4px) }
.v-nombre{ font-size:14.5px; font-weight:600; color:var(--tenue); transition:color .2s }
.vitrina-lista a.activa .v-nombre{ color:var(--acento) }
.v-titulo{ margin-top:2px; font-size:clamp(19px,1.9vw,23px); font-weight:700; letter-spacing:-.02em; line-height:1.2 }
.v-cuanto{ margin-top:6px; color:var(--tenue); font-size:15px }
.v-cuanto b{ color:var(--texto); font-size:17px }
.vitrina-vista{ position:relative; aspect-ratio:4/3; border-radius:20px; background:var(--superficie); border:1px solid var(--linea); overflow:hidden }
.v-pantalla{ position:absolute; inset:0; opacity:0; transition:opacity .35s; display:grid; place-items:center }
.v-pantalla.activa{ opacity:1 }
.vp-cel{ place-items:end center; padding-top:32px }
.vp-cel img{ width:42%; border:7px solid #000; border-bottom:0; border-radius:28px 28px 0 0 }
.vp-web{ padding:clamp(20px,3vw,36px) }
.vp-web img{ width:100%; border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.35) }
.vp-chat{ background:#EFE9E1; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:28px 12%; font-size:15.5px; color:#111B21 }
.vp-chat .burbuja{ max-width:78%; align-self:flex-start }
.vp-chat .burbuja.mio{ align-self:flex-end }
/* En computadora la vitrina se queda fija y el scroll pasa de un servicio al
   siguiente: un tramo de pantalla por servicio, como el escenario de antes. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .vitrina-pista{ height:calc(100svh + 4 * 42svh) }
  .vitrina-pista .vitrina{ position:sticky; top:calc(50svh - 230px); margin-top:0 }
  .vitrina-pista{ margin-top:44px }
}
@media (max-width:860px){
  .vitrina{ grid-template-columns:1fr }
  .vitrina-vista{ display:none }
  .vitrina-lista a{ padding-left:4px }
  .vitrina-lista a::before{ display:none }
  .vitrina-lista a.activa::after{ color:var(--apagado); transform:none }
  .vitrina-lista .v-nombre{ color:var(--acento) }
}

/* ---------- clientes en tarjeta ---------- */
.clientes-rejilla{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.clientes-rejilla.dos{ grid-template-columns:repeat(2,1fr) }
.cliente{ display:block; text-decoration:none }
.cliente img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:12px; border:1px solid var(--linea); background:#fff; transition:transform .25s }
.cliente:hover img{ transform:translateY(-4px) }
.cliente b{ display:block; margin-top:14px; font-size:18px; letter-spacing:-.01em }
.cliente span{ display:block; color:var(--tenue); font-size:15px }
@media (max-width:860px){ .clientes-rejilla, .clientes-rejilla.dos{ grid-template-columns:1fr } }

.aviso-precios{ text-align:left }

/* ---------- dos columnas: título a un lado, lista al otro ---------- */
.dos-columnas{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,6vw,88px) }
.dos-columnas .puntos-lista{ margin-top:4px; font-size:17px; gap:14px }
@media (max-width:860px){ .dos-columnas{ grid-template-columns:1fr } }

/* Los pasos sí van numerados: es el orden en que pasa. */
.pasos{ list-style:none; counter-reset:paso; margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.pasos li{ counter-increment:paso; border-top:2px solid var(--azul); padding-top:18px }
.pasos li::before{ content:counter(paso); display:block; font-size:15px; font-weight:700; color:var(--azul); margin-bottom:8px }
.pasos b{ display:block; font-size:19px; letter-spacing:-.015em }
.pasos span{ display:block; margin-top:6px; color:var(--tenue); font-size:15.5px }
@media (max-width:760px){ .pasos{ grid-template-columns:1fr } }

/* ---------- paquetes de páginas ---------- */
.paquetes{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start }
.paquete{ border:1px solid var(--linea); border-radius:16px; padding:26px 24px; background:var(--superficie) }
.paquete.destacado{ border-color:var(--azul) }
.paquete h3{ font-size:21px; letter-spacing:-.015em }
.paquete .monto{ margin-top:12px; font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.paquete .plazo{ margin-top:6px; color:var(--apagado); font-size:14px }
.paquete .puntos-lista{ font-size:15.5px }
/* El menú tiene dos tamaños, no tres: dos columnas más angostas. */
.paquetes.dos{ grid-template-columns:repeat(2,1fr); max-width:860px }
@media (max-width:900px){ .paquetes, .paquetes.dos{ grid-template-columns:1fr } }

/* ---------- pantallas del sistema: se deslizan de lado ---------- */
.pantallas .riel{ margin-top:36px; display:flex; gap:22px; padding:0 var(--lado) 8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--lado); scrollbar-width:thin }
.pantallas .riel figure{ flex:0 0 min(62vw,720px); scroll-snap-align:start }
.pantallas .riel figure.parada{ flex-basis:min(26vw,300px) }
.pantallas .riel button{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:12px }
.pantallas .riel img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:12px; border:1px solid var(--linea); background:#fff }
.pantallas .riel figure.parada img{ aspect-ratio:3/4.1 }
.pantallas .riel figcaption{ margin-top:10px; font-size:14.5px; color:var(--tenue) }
@media (max-width:860px){ .pantallas .riel figure{ flex-basis:84vw } .pantallas .riel figure.parada{ flex-basis:46vw } }

/* ---------- páginas de texto ---------- */
.portada-simple{ padding:clamp(48px,8vw,96px) 0 clamp(24px,4vw,40px) }
.portada-simple .bajada{ margin-top:16px; color:var(--tenue); font-size:18px; max-width:56ch }
.legal p{ margin-top:16px; max-width:70ch; color:var(--tenue) }
.legal p b{ color:var(--texto) }
.legal a{ color:var(--texto) }
section.casos{ border-top:0; padding-top:0 }
.casos .caso:first-child{ margin-top:24px }
.liga-caso{ margin-top:20px }
.liga-caso a{ font-weight:600; color:var(--texto); text-underline-offset:5px; text-decoration-color:var(--azul) }
/* Una captura de teléfono atrás va angosta: si no, tapa la de la computadora. */
.apilado .atras.tel{ width:27% }
.precios .ruta{ margin-bottom:12px }
.columnas h2{ font-size:15px; font-weight:600; color:var(--tenue); padding-bottom:14px; border-bottom:1px solid var(--linea) }
body.interna section.precios{ border-top:0; padding-top:clamp(48px,8vw,96px) }

/* Preguntas: se abren de una en una, sin JavaScript. */
.preguntas{ margin-top:32px; max-width:780px; border-top:1px solid var(--linea) }
.preguntas details{ border-bottom:1px solid var(--linea) }
.preguntas summary{ cursor:pointer; list-style:none; padding:20px 36px 20px 0; font-size:18px; font-weight:600; position:relative }
.preguntas summary::-webkit-details-marker{ display:none }
.preguntas summary::after{ content:"+"; position:absolute; right:4px; top:16px; font-size:26px; font-weight:400; color:var(--tenue); transition:transform .2s }
.preguntas details[open] summary::after{ transform:rotate(45deg) }
.preguntas details p{ padding:0 0 22px; color:var(--tenue); max-width:62ch }

/* ---------- menú digital: dos teléfonos juntos ---------- */
/* La pantalla empieza abajo de la isla: si no, la cámara tapa el nombre del restaurante. */
.celular .pantalla img{ top:5.5%; height:94.5% }
.pareja{ position:relative; height:100%; width:min(100%,560px); margin:0 auto }
.pareja .celular{ position:absolute; aspect-ratio:9/19; width:auto }
.pareja .frente-cel{ left:4%; bottom:0; height:94%; z-index:2 }
.pareja .atras-cel{ right:2%; top:0; height:82%; transform:rotate(5deg); box-shadow:0 0 0 1px #2A3550, 0 30px 60px -30px rgba(0,0,0,.8) }
@media (max-width:860px){
  .portada-producto .escenario:has(.pareja){ height:min(56svh,460px) }
}

/* Quien pidió menos movimiento ve todo, sin trucos: nada fijo, nada que cruce. */
@media (prefers-reduced-motion:reduce){
  .llega .rayo, .llega .rayo path, .llega .anillo, .baja i, .baja-sola{ animation:none }
  .identidad{ height:100svh }
  .identidad .centro{ transform:none; opacity:1 }
  .frase span{ color:var(--texto) }
  .renglon .puntos{ clip-path:none; transition:none }
  .cliente img, .v-pantalla, .vitrina-lista a::before, .vitrina-lista a::after{ transition:none }
  .vp-chat .burbuja{ opacity:1; transform:none }
}

/* Pruébalo: en computadora se escanea el QR; en el teléfono basta el botón,
   porque nadie escanea la pantalla del mismo celular. */
.pruebalo .marco{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,6vw,88px) }
.pruebalo .boton{ margin-top:24px }
.qr-demo{ flex:none; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--tenue); font-size:14.5px; text-decoration:none }
.qr-demo svg{ width:180px; height:180px; padding:14px; background:#FFFFFF; border-radius:16px; border:1px solid var(--linea) }
.qr-demo:focus-visible svg{ outline:3px solid var(--azul); outline-offset:3px }
.solo-tel{ display:none }
@media (max-width:860px){
  .qr-demo{ display:none }
  .solo-tel{ display:inline-flex }
}

/* ¿Otra idea?: tres cosas que no son paquete. No van numeradas porque no son pasos. */
.otra-idea{ background:var(--superficie); border-block:1px solid var(--linea) }
.ideas{ margin-top:36px; display:grid; gap:28px }
.tres-ideas{ grid-template-columns:repeat(3,1fr) }
.cuatro-ideas{ grid-template-columns:repeat(4,1fr) }
.ideas > div{ border-top:2px solid var(--acento); padding-top:18px }
.ideas h3{ font-size:19px; letter-spacing:-.015em }
.ideas p{ margin-top:6px; color:var(--tenue); font-size:15.5px }
@media (max-width:1040px){ .cuatro-ideas{ grid-template-columns:1fr 1fr } }
@media (max-width:860px){ .tres-ideas{ grid-template-columns:1fr; gap:22px } }
@media (max-width:560px){ .cuatro-ideas{ grid-template-columns:1fr; gap:22px } }

/* Un caso con una sola pantalla de teléfono: centrada, del tamaño de un teléfono. */
.apilado.solo{ padding-bottom:0; display:grid; place-items:center }
.apilado.solo button{ width:min(300px,58%) }
.apilado.solo img{ border-radius:28px; border:7px solid #000 }

/* ---------- al bajar, cada bloque entra ----------
   Un solo movimiento para todo el sitio: sube un poco y aparece. comun.js pone
   la clase .anima en <html> solo si hay JavaScript y nadie pidió menos
   movimiento; sin ella, todo se ve desde el principio. */
.anima .sube{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--retraso,0s) }
.anima .sube.lado{ transform:translateX(32px) }
.anima .caso.vuelta .sube.lado{ transform:translateX(-32px) }
.anima .sube.visto{ opacity:1; transform:none }

/* Planes de cada mes: cuatro tarjetas, como los paquetes de cada producto. */
.paquetes.cuatro-planes{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .paquetes.cuatro-planes{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .paquetes.cuatro-planes{ grid-template-columns:1fr } }

/* ---------- inicio: clientes en una franja clara ----------
   Rompe la noche de arriba a abajo: la prueba (clientes reales) se ve distinta
   a todo lo demás. Los colores se redefinen solo dentro de la franja. */
.clara{ --fondo:#EEF2F7; --superficie:#FFFFFF; --linea:#D5DDE8; --texto:#0B1120; --tenue:#475569; --acento:#0066FF;
  background:var(--fondo); color:var(--texto); border-top:0 }
:root[data-tema="claro"] .clara{ --fondo:#E8EEF6 }
.clara .boton.borde{ border-color:#B9C4D4 }
/* Carrusel de logos: desfilan solos; al señalar uno se detiene y se pinta en sus colores.
   Dos listas iguales que se recorren juntas: cuando la primera sale, la copia ya ocupó su lugar. */
.carrusel-logos{ margin-top:40px; display:flex; overflow:hidden; padding:14px 0 6px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) }
.logos-pista{ list-style:none; flex:none; display:flex; align-items:flex-end; animation:desfile 42s linear infinite }
.carrusel-logos:hover .logos-pista, .carrusel-logos:focus-within .logos-pista{ animation-play-state:paused }
@keyframes desfile{ to{ transform:translateX(-100%) } }
.logo-item{ flex:none; margin-right:clamp(48px,7vw,96px); display:flex; flex-direction:column; align-items:center; gap:12px; cursor:default }
.logo-par{ position:relative; display:block; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.logo-par img{ display:block; height:72px; width:auto; transition:opacity .35s }
.logo-par .tinta{ filter:brightness(0); opacity:.62 }
.logo-par .tinta.sin-filtro{ filter:grayscale(1) brightness(.6) contrast(1.5); opacity:.8 }
.logo-par .color{ position:absolute; inset:0; opacity:0 }
.logo-item b{ font-size:13px; font-weight:600; color:var(--tenue); letter-spacing:-.005em; white-space:nowrap; transition:color .35s }
.logo-item:hover .logo-par{ transform:translateY(-6px) scale(1.08) }
.logo-item:hover .tinta{ opacity:0 }
.logo-item:hover .color{ opacity:1 }
.logo-item:hover b{ color:var(--texto) }
@media (max-width:700px){ .logo-par img{ height:52px } }
/* Sin movimiento: los logos quietos y centrados, una sola vez */
@media (prefers-reduced-motion:reduce){
  .carrusel-logos{ -webkit-mask:none; mask:none; justify-content:center }
  .logos-pista{ animation:none; flex:1 1 100%; flex-wrap:wrap; justify-content:center; row-gap:28px }
  .logo-item{ margin:0 clamp(20px,3vw,40px) }
  .logos-pista.copia{ display:none }
  .logo-par, .logo-par img{ transition:none }
}
.clara .clientes-rejilla{ margin-top:36px }
.clara .cliente img{ box-shadow:0 18px 40px rgba(11,17,32,.12) }

/* ---------- inicio: ¿necesitas algo más? ---------- */
.ideas-lista{ list-style:none; display:grid; gap:22px; font-size:17.5px; color:var(--tenue); align-self:center }
.ideas-lista li{ padding-left:20px; border-left:2px solid var(--azul) }
.ideas-lista b{ color:var(--texto); font-weight:700 }

/* ---------- inicio: sin costo extra, en un solo renglón de frases ---------- */
.sin-costo .marco{ display:flex; align-items:baseline; gap:clamp(24px,5vw,64px); flex-wrap:wrap }
.sin-costo h2{ flex:none }
.sin-costo-lista{ list-style:none; flex:1; min-width:280px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px; font-size:17px }
.sin-costo-lista li{ position:relative; padding-left:28px }
.sin-costo-lista li::before{ content:""; position:absolute; left:0; top:.32em; width:16px; height:9px; border-left:2.5px solid var(--acento); border-bottom:2.5px solid var(--acento); transform:rotate(-45deg) }
@media (max-width:700px){ .sin-costo-lista{ grid-template-columns:1fr } }