/* AndTechIA — página principal (v3: azul profundo + crema)
   Geist para el texto, Instrument Serif itálica para las palabras que
   importan, Geist Mono para etiquetas. Aparatos virtuales tipo iPhone
   Pro Max y iPad Pro que se usan de verdad. */

@property --k { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --fondo: #050A1A;
  --fondo-2: #081028;
  --azul-hondo: #0B1636;
  --superficie: #0D1631;
  --superficie-2: #121D3F;
  --superficie-3: #18244C;
  --borde: rgba(170, 190, 255, .10);
  --borde-fuerte: rgba(170, 190, 255, .18);
  --texto: #F2F1EC;
  --gris: #8D96B3;
  --gris-claro: #BCC3D8;

  --crema: #F4E7C5;
  --crema-oro: #E2C58C;
  --crema-hondo: #A88A52;
  --azul: #3D63F2;
  --azul-claro: #9DB6FF;
  --rojo: #E5484D;
  --rojo-suave: rgba(229, 72, 77, .16);
  --verde: #3DD68C;

  --f-texto: "Geist", system-ui, -apple-system, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --suave: cubic-bezier(.16, 1, .3, 1);
  --resorte: cubic-bezier(.34, 1.4, .5, 1);
  --radio: 24px;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1400px 800px at 50% -200px, rgba(61, 99, 242, .28), transparent 65%),
    var(--fondo);
  color: var(--texto);
  font: 400 17px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 8px; }
section[id] { scroll-margin-top: 64px; }
::selection { background: var(--crema); color: var(--azul-hondo); }

.envoltura { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.envoltura--angosta { width: min(780px, 100% - 40px); }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--crema); color: var(--azul-hondo); padding: 10px 14px; border-radius: 10px; font-weight: 600;
}
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.eyebrow {
  font: 500 12px/1.2 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul-claro);
  margin-bottom: 18px;
}
.titulo-seccion {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -.045em;
  max-width: 16ch; margin-bottom: 48px;
}
.acento {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; font-size: 1.08em;
  background: linear-gradient(100deg, var(--crema-hondo) 0%, var(--crema-oro) 25%, var(--crema) 45%, var(--crema-oro) 62%, var(--crema-hondo) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; padding-right: .06em;
}
@media (prefers-reduced-motion: no-preference) {
  .acento { animation: brillo 7s ease-in-out infinite; }
  @keyframes brillo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--f-texto); text-decoration: none;
  transition: transform .25s var(--suave), background-color .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.boton:active { transform: scale(.97); }
.boton--crema { background: var(--crema); color: var(--azul-hondo); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.boton--crema:hover { box-shadow: 0 10px 40px -8px rgba(244, 231, 197, .55), inset 0 1px 0 rgba(255,255,255,.6); }
.boton--contorno { border-color: var(--borde-fuerte); color: var(--texto); background: transparent; }
button.boton { -webkit-appearance: none; appearance: none; }
.boton--contorno:hover { border-color: var(--azul-claro); background: rgba(157, 182, 255, .07); }
.boton--chico { min-height: 38px; padding: 0 18px; font-size: 14px; }
.boton--grande { min-height: 58px; padding: 0 32px; font-size: 17px; }

/* Punto "en vivo" */
.vivo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--crema); margin-right: 8px; vertical-align: middle; flex: none; }
.vivo--rojo { background: var(--rojo); }
@media (prefers-reduced-motion: no-preference) {
  .vivo { animation: latido 2.2s ease-out infinite; }
  .vivo--rojo { animation-name: latido-rojo; }
  @keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(244,231,197,.55); } 100% { box-shadow: 0 0 0 9px rgba(244,231,197,0); } }
  @keyframes latido-rojo { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.6); } 100% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } }
}

/* ---------- Marco de luz (rectángulo con dos luces que lo recorren) ---------- */
.marco-luz { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
.marco-luz rect { fill: none; stroke-linecap: round; }
.marco-luz__riel { stroke: rgba(170, 190, 255, .11); stroke-width: 1; }
.marco-luz__cola { stroke-width: 1.4; stroke-dasharray: 180 820; opacity: .5; }
.marco-luz__cabeza { stroke-width: 2.2; stroke-dasharray: 36 964; stroke-dashoffset: -144; }
.marco-luz--a { stroke: var(--crema); }
.marco-luz--b { stroke: #FF8A8E; }
.marco-luz__cabeza.marco-luz--b { stroke: #FFB0B2; }
@media (prefers-reduced-motion: no-preference) {
  .marco-luz__cola { animation: vuelta-cola 18s linear infinite; }
  .marco-luz__cabeza { animation: vuelta-cabeza 18s linear infinite; }
  .marco-luz--b { animation-delay: -9s !important; }
  @keyframes vuelta-cola { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
  @keyframes vuelta-cabeza { from { stroke-dashoffset: -144; } to { stroke-dashoffset: -1144; } }
}
@media (prefers-reduced-motion: reduce) { .marco-luz__cola, .marco-luz__cabeza { display: none; } }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(5, 10, 26, .7);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--borde);
}
.barra__fila { display: flex; align-items: center; gap: 24px; height: 60px; }
.marca { font-weight: 650; font-size: 20px; letter-spacing: -.04em; text-decoration: none; display: inline-flex; align-items: baseline; }
.marca__ia { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: 0; color: var(--crema-oro); margin-left: 1px; }
.barra__nav { display: flex; gap: 28px; margin-left: auto; }
.barra__nav a { text-decoration: none; font-size: 14px; color: var(--gris-claro); transition: color .2s ease; }
.barra__nav a:hover { color: var(--texto); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 84px 0 80px; overflow-x: clip; }
.hero__halo {
  position: absolute; left: 50%; top: 280px; width: 1400px; height: 900px; transform: translateX(-50%);
  background:
    radial-gradient(45% 45% at 50% 50%, rgba(61, 99, 242, .30), transparent 70%),
    radial-gradient(25% 25% at 22% 62%, rgba(229, 72, 77, .10), transparent 70%);
  pointer-events: none;
}
.hero__texto {
  position: relative; text-align: center;
  display: grid; justify-items: center;
  opacity: calc(1 - var(--p, 0) * 1.4);
  transform: translate3d(0, calc(var(--p, 0) * 60px), 0) scale(calc(1 - var(--p, 0) * .05));
}
.hero__titulo {
  font-weight: 600;
  font-size: clamp(42px, 7.2vw, 104px);
  line-height: .98; letter-spacing: -.055em;
  margin-bottom: 26px;
}
.hero__titulo > span { display: block; }
.hero__sub { font-size: 19px; color: var(--gris-claro); max-width: 52ch; margin-bottom: 32px; font-weight: 350; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Entrada al cargar */
.js .entra { opacity: 0; transform: translateY(30px); filter: blur(12px); }
.js.listo .entra {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1.2s var(--suave), transform 1.2s var(--suave), filter 1.2s var(--suave);
  transition-delay: calc(var(--d, 0) * 120ms + 150ms);
}

/* ---------- Escena de aparatos (hero) ---------- */
.escena { position: relative; margin-top: 64px; }
.escena__pista { text-align: center; font: 400 13px/1.5 var(--f-mono); color: var(--gris); margin: 0 auto 28px; width: min(var(--ancho), 100% - 40px); }
.escena__lienzo {
  position: relative;
  width: min(1100px, 100% - 40px); margin-inline: auto;
  height: calc(700px * var(--k-lienzo, 1));
}
.escala {
  position: absolute;
  left: calc(var(--x) * var(--k, 1) * 1px);
  top: calc(var(--y) * var(--k, 1) * 1px);
  width: calc(var(--w) * var(--k, 1) * 1px);
  height: calc(var(--h) * var(--k, 1) * 1px);
  transform: translate3d(0, calc(var(--p, 0) * var(--par, 0) * -1px), 0);
}
.escala > * {
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform: scale(var(--k, 1)); transform-origin: 0 0;
}
.escala--iphone { --par: 110; z-index: 2; }
.escala--ipad { --par: 30; z-index: 1; }

/* ---------- iPhone Pro Max (virtual) ---------- */
.iphone, .aparato {
  position: relative;
  border-radius: 58px; padding: 3.5px;
  background: linear-gradient(140deg, #6d717a 0%, #2b2d33 18%, #9a9ea6 46%, #2b2d33 70%, #5e626a 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 0 1px rgba(255, 255, 255, .5),
    0 70px 120px -50px rgba(0, 0, 0, .95),
    0 0 160px -50px rgba(61, 99, 242, .7);
}
.iphone__bisel, .aparato__bisel { position: relative; width: 100%; height: 100%; background: #000; border-radius: 54.5px; padding: 10px; }
.iphone__pantalla, .aparato__pantalla { position: relative; width: 100%; height: 100%; border-radius: 45px; overflow: hidden; background: #0C1328; isolation: isolate; }
.iphone__pantalla::after, .aparato__pantalla::after, .ipad__pantalla::after {
  content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%);
}
.isla {
  position: absolute; top: 21px; left: 50%; transform: translateX(-50%);
  width: 98px; height: 29px; border-radius: 20px; background: #000; z-index: 25;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.isla::after { content: ""; position: absolute; right: 22px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a6b, #05070d 70%); }
.iphone__btn {
  position: absolute; width: 3px; border-radius: 2px; z-index: -1;
  background: linear-gradient(90deg, #2e3036, #8a8e96);
  transition: opacity .5s ease;
}
.iphone__btn--accion { left: -2.5px; top: 118px; height: 30px; }
.iphone__btn--vol1 { left: -2.5px; top: 172px; height: 56px; }
.iphone__btn--vol2 { left: -2.5px; top: 238px; height: 56px; }
.iphone__btn--lado { right: -2.5px; top: 200px; height: 88px; background: linear-gradient(270deg, #2e3036, #8a8e96); }
.indicador { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 124px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.75); z-index: 21; }

/* Barra de estado */
.estatus {
  position: relative; z-index: 22;
  height: 52px; padding: 19px 30px 0 34px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font: 600 15px/1 var(--f-texto); color: #fff; letter-spacing: -.01em;
  flex: none;
}
.estatus__iconos { display: flex; gap: 5px; align-items: center; }
.estatus__iconos i { display: block; background: center / contain no-repeat; }
.ico-senal { width: 17px; height: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' fill='white'%3E%3Crect x='0' y='7' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='1'/%3E%3Crect x='9' y='2.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='0' width='3' height='11' rx='1'/%3E%3C/svg%3E"); }
.ico-wifi { width: 15px; height: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11' fill='white'%3E%3Cpath d='M7.5 2.3c2.2 0 4.2.9 5.7 2.3l1.1-1.1A9.6 9.6 0 0 0 7.5.7 9.6 9.6 0 0 0 .7 3.5l1.1 1.1a8 8 0 0 1 5.7-2.3Z'/%3E%3Cpath d='M7.5 5.4c1.4 0 2.6.5 3.5 1.4l1.1-1.1a6.5 6.5 0 0 0-9.2 0L4 6.8c.9-.9 2.1-1.4 3.5-1.4Z'/%3E%3Cpath d='M7.5 8.4c.6 0 1.1.2 1.4.6L7.5 10.6 6.1 9c.3-.4.8-.6 1.4-.6Z'/%3E%3C/svg%3E"); }
.ico-bateria { width: 26px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Crect x='.5' y='.5' width='22' height='11' rx='3.5' fill='none' stroke='white' stroke-opacity='.45'/%3E%3Crect x='2' y='2' width='17' height='8' rx='2' fill='white'/%3E%3Crect x='23.6' y='4' width='1.6' height='4' rx='.8' fill='white' fill-opacity='.45'/%3E%3C/svg%3E"); }

/* ---------- iPad Pro (virtual) ---------- */
.ipad {
  position: relative;
  border-radius: 34px; padding: 3px;
  background: linear-gradient(140deg, #7a7f88 0%, #33363c 22%, #a4a9b1 50%, #33363c 76%, #6a6e76 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 1px rgba(255,255,255,.5),
    0 80px 140px -60px rgba(0,0,0,.95),
    0 0 180px -60px rgba(61, 99, 242, .6);
}
.ipad__camara {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; z-index: 30;
  background: radial-gradient(circle at 35% 35%, #2b3a6b, #04060c 70%);
  box-shadow: 0 0 0 1.5px #0b0c10;
}
.ipad__pantalla {
  position: relative; height: 100%;
  border: 16px solid #000; border-radius: 31px;
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0E1631, #0A1128);
  display: flex; flex-direction: column;
}
.estatus--ipad { height: 30px; padding: 9px 22px 0; font-size: 13px; }
.estatus--ipad .estatus__iconos i { transform: scale(.9); }

/* Aviso tipo iOS */
.aviso {
  position: absolute; top: 12px; left: 50%; z-index: 24;
  width: 400px; max-width: calc(100% - 24px);
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px 12px 12px; border-radius: 22px;
  background: rgba(38, 44, 66, .86);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: translate(-50%, -150%); opacity: 0;
  transition: transform .7s var(--resorte), opacity .4s ease;
}
.aviso.mostrar { transform: translate(-50%, 0); opacity: 1; }
.aviso__icono {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--crema), var(--crema-hondo)); color: var(--azul-hondo);
  font: 700 19px/1 var(--f-texto);
}
.aviso__app { font: 500 11px/1.3 var(--f-texto); letter-spacing: .04em; color: var(--gris-claro); display: flex; justify-content: space-between; gap: 12px; }
.aviso__app span { letter-spacing: 0; text-transform: none; color: var(--gris); }
.aviso__texto { font-size: 14px; font-weight: 550; line-height: 1.3; color: #fff; }
.aviso > div { flex: 1; min-width: 0; }

/* Panel de la cocina (en iPad) */
.cocina { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 22px 22px; }
.cocina__cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cocina__titulo { font-weight: 650; font-size: 26px; letter-spacing: -.035em; }
.cocina__sub { font-size: 13px; color: var(--gris); }
.cocina__vivo { display: inline-flex; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #FF9A9D; background: var(--rojo-suave); padding: 7px 11px; border-radius: 999px; }
.cocina__cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cocina__col { background: rgba(157, 182, 255, .05); border: 1px solid var(--borde); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.cocina__coltit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cuenta { font: 500 12px/1 var(--f-mono); color: var(--gris); }
.cocina__lista { display: grid; gap: 10px; align-content: start; overflow: hidden; }
.orden {
  background: var(--superficie-3); border: 1px solid var(--borde); border-radius: 14px;
  padding: 11px 12px; display: grid; gap: 5px;
}
.orden__fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.orden b { font: 500 14px/1 var(--f-mono); }
.orden__tipo { font-size: 11px; color: var(--gris-claro); background: rgba(255,255,255,.06); padding: 3px 7px; border-radius: 6px; }
.orden__items { font-size: 12.5px; line-height: 1.35; color: var(--gris); }
.orden em { font: normal 500 13px/1 var(--f-mono); color: var(--crema); }
.orden__btn {
  border: 1px solid rgba(244, 231, 197, .35); background: transparent;
  color: var(--crema); font: 500 12px/1 var(--f-texto);
  padding: 7px 11px; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
button.orden__btn:hover { background: var(--crema); color: var(--azul-hondo); }
.orden--nueva { border-color: rgba(229, 72, 77, .55); box-shadow: 0 0 30px -8px rgba(229, 72, 77, .55); }
.orden.entrando { animation: llega .8s var(--resorte) both; }
.orden.saliendo { animation: sale .45s ease both; }
@keyframes llega { from { opacity: 0; transform: translateY(-18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sale { to { opacity: 0; transform: scale(.94); } }

.estado {
  display: inline-flex; align-items: center;
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px;
}
.estado--nuevo { background: var(--rojo-suave); color: #FF9A9D; }
.estado--prep { background: rgba(244, 231, 197, .14); color: var(--crema); }
.estado--listo { background: rgba(61, 214, 140, .14); color: #74E4AF; }

/* ---------- App del restaurante (en iPhone) ---------- */
.app { display: flex; flex-direction: column; color: var(--texto); background: linear-gradient(180deg, #0F1730, #0B1226); }
.app__cabeza { display: flex; gap: 12px; align-items: center; padding: 8px 18px 12px; flex: none; }
.app__logo {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, var(--crema), var(--crema-hondo)); color: var(--azul-hondo);
  font: 700 20px/1 var(--f-texto);
}
.app__nombre { font-weight: 650; font-size: 17px; line-height: 1.2; letter-spacing: -.025em; }
.app__estado { font-size: 12px; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); display: inline-block; }

.tipo {
  position: relative; flex: none;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(157, 182, 255, .08);
  border-radius: 12px; padding: 3px; margin: 0 18px 12px;
}
.tipo__fondo {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 9px; background: #26315A;
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .5s var(--resorte);
}
.tipo[data-tipo="domicilio"] .tipo__fondo { transform: translateX(100%); }
.tipo__op { position: relative; border: 0; background: transparent; padding: 9px 0; border-radius: 9px; text-align: center; font-weight: 500; font-size: 13px; color: var(--gris); transition: color .3s ease; }
.tipo__op.activo { color: #fff; }

.chips { display: flex; gap: 8px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--borde-fuerte); background: transparent;
  color: var(--gris-claro); font-size: 12.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.chip.activo { background: var(--crema); border-color: var(--crema); color: var(--azul-hondo); }

.app__lista {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 14px);
          mask: linear-gradient(180deg, transparent 0, #000 14px);
}
.app__lista::-webkit-scrollbar { display: none; }
.app__lista.arrastrando { cursor: grabbing; user-select: none; }
.app__lista:focus-visible { outline-offset: -3px; }
.app__contenido { padding: 4px 18px 110px; will-change: transform; }
.app__contenido.regresa { transition: transform .5s var(--resorte); }

.cat__titulo { font-weight: 650; font-size: 19px; letter-spacing: -.03em; padding: 14px 0 6px; }
.platillo {
  display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.platillo__foto {
  width: 70px; height: 70px; border-radius: 16px;
  display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 30% 25%, var(--c1, #3a3150), var(--c2, #1a1830));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.platillo__nombre { font-weight: 600; font-size: 14.5px; line-height: 1.25; letter-spacing: -.015em; }
.platillo__desc { font-size: 11.5px; color: var(--gris); line-height: 1.3; margin: 2px 0 6px; }
.platillo__pie { display: flex; justify-content: space-between; align-items: center; }
.platillo__precio { font: 500 13px/1 var(--f-mono); color: var(--crema); }
.contador { display: flex; align-items: center; gap: 7px; }
.contador button {
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: var(--crema); color: var(--azul-hondo);
  font-weight: 600; font-size: 17px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .25s var(--resorte);
}
.contador button:active { transform: scale(.82); }
.contador button.menos { background: rgba(157, 182, 255, .14); color: #fff; }
.contador span { min-width: 14px; text-align: center; font: 500 13px/1 var(--f-mono); }

.app__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 26px 16px 26px;
  background: linear-gradient(180deg, rgba(11, 18, 38, 0), #0B1226 45%);
}
.app__pedir {
  width: 100%; min-height: 52px; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center;
  border: 0; border-radius: 18px;
  background: var(--crema); color: var(--azul-hondo);
  font-weight: 650; font-size: 15px;
  transition: opacity .3s ease, transform .25s var(--resorte), background-color .3s ease;
}
.app__pedir:disabled { opacity: .3; cursor: not-allowed; }
.app__pedir:not(:disabled):active { transform: scale(.97); }
.app__pedir.enviado { background: var(--verde); color: #04261A; opacity: 1; }

/* ---------- Plataformas (cinta) ---------- */
.plataformas { position: relative; border-block: 1px solid var(--borde); background: rgba(5, 10, 26, .5); }
.plataformas__fila { display: flex; align-items: center; gap: 28px; padding: 22px 0; width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.plataformas__titulo { flex: none; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); }
.cinta { overflow: hidden; flex: 1; min-width: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta__pista { list-style: none; margin: 0; padding: 0; display: flex; gap: 44px; width: max-content; font-weight: 500; font-size: 18px; letter-spacing: -.02em; color: var(--gris-claro); }
.cinta__pista li { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .cinta__pista.doble { animation: cinta 28s linear infinite; }
  .cinta:hover .cinta__pista { animation-play-state: paused; }
  @keyframes cinta { to { transform: translateX(calc(-50% - 22px)); } }
}
@media (prefers-reduced-motion: reduce) { .cinta__pista { flex-wrap: wrap; width: auto; gap: 8px 28px; } }

/* ---------- Manifiesto: se escribe letra por letra ---------- */
.manifiesto { position: relative; height: 260vh; }
.manifiesto__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.manifiesto__texto {
  width: min(1040px, 100% - 40px);
  font-weight: 600; font-size: clamp(30px, 4.8vw, 66px);
  line-height: 1.1; letter-spacing: -.045em; text-align: center;
}
.manifiesto__texto .pal { display: inline-block; white-space: nowrap; }
.letra {
  position: relative; display: inline-block;
  opacity: 0; transform: translate3d(0, -.55em, 0) rotate(-10deg) scale(1.15); filter: blur(8px);
  transition: opacity .3s ease, transform .6s var(--resorte), filter .45s ease, color .5s ease;
}
.letra.on { opacity: 1; transform: none; filter: none; }
.pal--acento .letra.on { color: var(--crema-oro); }
.letra.cursor::after, .letra.cursor-antes::before {
  content: ""; position: absolute; top: .12em; bottom: .02em; width: .055em;
  background: var(--crema); border-radius: 2px;
  box-shadow: 0 0 14px rgba(244, 231, 197, .8);
}
.letra.cursor::after { right: -.09em; }
.letra.cursor-antes::before { left: -.12em; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .letra.cursor::after, .letra.cursor-antes::before { animation: parpadeo 1s steps(1) infinite; }
  @keyframes parpadeo { 50% { opacity: 0; } }
}

/* ---------- Secciones ---------- */
.seccion { position: relative; padding: 120px 0; }
.js .aparece {
  opacity: 0; transform: translateY(44px) scale(.98);
  transition: opacity 1s var(--suave), transform 1.2s var(--suave), border-color .4s ease;
  transition-delay: var(--retraso, 0ms);
}
.js .aparece.visto { opacity: 1; transform: none; }

/* Servicios (bento) */
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.servicio {
  position: relative; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 28px 26px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.foco {
  background:
    radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(157, 182, 255, .13), transparent 45%),
    linear-gradient(180deg, var(--superficie-2), var(--superficie));
}
.servicio:hover { border-color: rgba(157, 182, 255, .35); }
.servicio h3 { font-weight: 600; font-size: 22px; line-height: 1.12; letter-spacing: -.035em; }
.servicio p { color: var(--gris); font-size: 15.5px; }
.servicio__ico { width: 30px; height: 30px; fill: none; stroke: var(--crema); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.servicio__ico--rojo { stroke: #FF9A9D; }
.servicio__para {
  align-self: flex-start;
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul-claro); border: 1px solid rgba(157, 182, 255, .3);
  padding: 6px 9px; border-radius: 999px; margin-bottom: 8px;
}
.servicio__para--rojo { color: #FF9A9D; border-color: rgba(229, 72, 77, .35); }
.servicio--ancho {
  grid-column: span 2; grid-row: span 2;
  justify-content: flex-end;
  padding: 36px 36px 38px; min-height: 440px;
  border-color: rgba(157, 182, 255, .22);
}
.servicio--ancho.foco {
  background:
    radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(157, 182, 255, .16), transparent 45%),
    radial-gradient(70% 60% at 85% 10%, rgba(61, 99, 242, .35), transparent 70%),
    linear-gradient(180deg, #13204A, var(--superficie));
}
.servicio--ancho h3 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.05em; }
.servicio--ancho p { color: var(--gris-claro); max-width: 46ch; }

/* NFC: ondas sobre el gafete */
.nfc { position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; }
.nfc i { position: absolute; inset: 0; border: 1.5px solid var(--azul-claro); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nfc i { animation: onda 2.6s ease-out infinite; }
  .nfc i:nth-child(2) { animation-delay: .85s; }
  .nfc i:nth-child(3) { animation-delay: 1.7s; }
  @keyframes onda { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
}

.qr {
  position: absolute; right: 36px; top: 36px;
  width: 170px; height: 170px; padding: 14px;
  background: var(--crema); border-radius: 18px; transform: rotate(-5deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 70px -10px rgba(61, 99, 242, .6);
  overflow: hidden;
}
.qr svg { width: 100%; height: 100%; display: block; }
.qr__barrido { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(61, 99, 242, .5)); mix-blend-mode: multiply; transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .qr__barrido { animation: escaneo 3.4s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes escaneo { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(400%); } }
}

/* ---------- Escenario fijo: iPhone que se vuelve iPad ---------- */
.escenario { position: relative; height: 560vh; }
.escenario__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.escenario__rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding-top: 60px; }
.escenario .titulo-seccion { margin-bottom: 30px; font-size: clamp(32px, 4vw, 54px); }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etapa { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 12px 0; opacity: .28; transition: opacity .6s var(--suave); }
.etapa.activa { opacity: 1; }
.etapa__num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borde-fuerte); font: 500 12px/1 var(--f-mono); color: var(--gris-claro);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.etapa.activa .etapa__num { background: var(--crema); border-color: var(--crema); color: var(--azul-hondo); }
.etapa h3 { font-weight: 600; font-size: 19px; letter-spacing: -.03em; margin-bottom: 3px; }
.etapa p { color: var(--gris); font-size: 15px; max-width: 40ch; }
.escenario__barra { margin-top: 22px; height: 1px; background: var(--borde-fuerte); max-width: 360px; }
.escenario__barra span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--azul), var(--crema));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px rgba(157, 182, 255, .8);
}

.aparato-caja { position: relative; height: calc(var(--caja-h, 660) * 1px); }
.aparato {
  position: absolute; left: 50%; top: 50%;
  width: 300px; height: 650px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  transition: width .95s var(--suave), height .95s var(--suave), border-radius .95s var(--suave), --k .95s var(--suave);
}
.aparato__bisel { transition: border-radius .95s var(--suave), padding .95s var(--suave); }
.aparato__pantalla { transition: border-radius .95s var(--suave); }
.aparato .ipad__camara { top: 5px; opacity: 0; transition: opacity .5s ease; }
.aparato .isla, .aparato .indicador { transition: opacity .4s ease; }
.aparato[data-modo="ipad"] { width: 720px; height: 520px; border-radius: 32px; }
.aparato[data-modo="ipad"] .aparato__bisel { border-radius: 29px; padding: 14px; }
.aparato[data-modo="ipad"] .aparato__pantalla { border-radius: 16px; }
.aparato[data-modo="ipad"] .isla,
.aparato[data-modo="ipad"] .indicador,
.aparato[data-modo="ipad"] .iphone__btn { opacity: 0; }
.aparato[data-modo="ipad"] .ipad__camara { opacity: 1; }
.aparato[data-modo="ipad"] .estatus { height: 30px; padding: 8px 20px 0; font-size: 13px; }

.pantalla {
  position: absolute; inset: 0; padding-top: 52px;
  display: flex; flex-direction: column;
  opacity: 0; transform: scale(.96); filter: blur(10px);
  transition: opacity .6s var(--suave), transform .8s var(--suave), filter .6s var(--suave);
  pointer-events: none;
}
.aparato[data-pantalla="0"] .pantalla--camara,
.aparato[data-pantalla="1"] .pantalla--menu,
.aparato[data-pantalla="2"] .pantalla--carrito,
.aparato[data-pantalla="3"] .pantalla--listo,
.aparato[data-pantalla="4"] .pantalla--panel,
.aparato[data-pantalla="5"] .pantalla--rastreo { opacity: 1; transform: none; filter: none; }
.aparato .estatus { position: absolute; top: 0; left: 0; right: 0; z-index: 22; }

/* Cámara */
.pantalla--camara { padding-top: 0; background: #000; }
.camara { position: absolute; inset: 0 0 150px; overflow: hidden; }
.camara__mesa {
  position: absolute; inset: -20%;
  background:
    radial-gradient(28% 20% at 22% 78%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(22% 16% at 80% 20%, rgba(240,210,160,.22), transparent 70%),
    repeating-linear-gradient(100deg, #3b2a1d 0 18px, #33241a 18px 34px),
    #2d2016;
  filter: blur(6px) brightness(.8);
  transform: scale(1.05);
}
.camara__tarjeta {
  position: absolute; left: 50%; top: 46%;
  width: 150px; padding: 14px 14px 10px; border-radius: 14px;
  background: var(--crema); color: var(--azul-hondo); text-align: center;
  font: 600 13px/1.4 var(--f-texto);
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.7);
}
.qr--mesa { position: static; width: 122px; height: 122px; padding: 0; transform: none; box-shadow: none; background: transparent; border-radius: 0; }
.esq { position: absolute; width: 30px; height: 30px; border: 3px solid #FFD60A; }
.esq--1 { left: calc(50% - 98px); top: calc(46% - 112px); border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.esq--2 { left: calc(50% + 68px); top: calc(46% - 112px); border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.esq--3 { left: calc(50% - 98px); top: calc(46% + 82px); border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.esq--4 { left: calc(50% + 68px); top: calc(46% + 82px); border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.camara__enlace {
  position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0;
  white-space: nowrap; padding: 9px 14px; border-radius: 999px;
  background: #FFD60A; color: #111; font: 600 12.5px/1 var(--f-texto);
  transition: transform .6s var(--resorte) .5s, opacity .4s ease .5s;
}
.camara__enlace b { background: #111; color: #FFD60A; border-radius: 4px; padding: 2px 4px; margin-right: 6px; font-size: 10px; }
.aparato[data-pantalla="0"] .camara__enlace { transform: translate(-50%, 0); opacity: 1; }
.camara__barra { position: absolute; bottom: 104px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; font: 600 11px/1 var(--f-texto); letter-spacing: .06em; color: rgba(255,255,255,.7); }
.camara__barra .activo { color: #FFD60A; }
.camara__disparador { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 66px; height: 66px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: inset 0 0 0 3px #000; }
@media (prefers-reduced-motion: no-preference) {
  .aparato[data-pantalla="0"] .esq { animation: enfoca 2.4s var(--suave) infinite; }
  @keyframes enfoca { 0% { transform: scale(1.25); opacity: .4; } 35%, 100% { transform: scale(1); opacity: 1; } }
}

/* Menú guiado por el scroll */
.app__portada {
  flex: none; margin: 0 18px 8px; height: 120px; border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(255, 190, 110, .45), transparent 70%),
    linear-gradient(135deg, #3A2A1F, #1B1530);
  position: relative; overflow: hidden;
}
.app__portada::after { content: "🍔"; position: absolute; right: 14px; top: 8px; font-size: 64px; transform: rotate(-10deg); }
.app__portada p { font-weight: 650; font-size: 20px; letter-spacing: -.03em; }
.app__portada span { font-size: 12px; color: rgba(255,255,255,.75); }
.app__ventana { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent 0, #000 16px, #000 85%, transparent); mask: linear-gradient(180deg, transparent 0, #000 16px, #000 85%, transparent); }
#menuGuiado { transform: translate3d(0, calc(var(--y, 0) * -1px), 0); padding-bottom: 40px; }

/* Carrito */
.pantalla--carrito { padding: 60px 18px 30px; }
.app__grande { font-weight: 650; font-size: 26px; letter-spacing: -.04em; margin-bottom: 14px; }
.tipo--quieto { margin: 0 0 12px; }
.campo { background: rgba(157, 182, 255, .07); border-radius: 13px; padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px; }
.campo small { display: block; font: 500 10px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.resumen { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.resumen li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--borde); color: var(--gris-claro); }
.resumen li.resumen__total { font-weight: 650; font-size: 16px; color: var(--texto); border-bottom: 0; }
.resumen__total span:last-child { color: var(--crema); }
.app__boton { margin-top: auto; display: grid; place-items: center; min-height: 52px; border-radius: 18px; background: var(--crema); color: var(--azul-hondo); font-weight: 650; font-size: 15px; }

/* Confirmación */
.pantalla--listo { justify-content: center; align-items: center; text-align: center; padding: 0 30px; gap: 6px; }
.palomita { width: 110px; height: 110px; margin-bottom: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.palomita circle { stroke: var(--verde); stroke-width: 4; stroke-dasharray: 230; stroke-dashoffset: 230; }
.palomita path { stroke: var(--verde); stroke-width: 6; stroke-dasharray: 60; stroke-dashoffset: 60; }
.aparato[data-pantalla="3"] .palomita circle { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--suave) .2s; }
.aparato[data-pantalla="3"] .palomita path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--suave) .8s; }
.app__nota { color: var(--gris-claro); font-size: 14px; }

/* Panel en el iPad del escenario */
.pantalla--panel { padding-top: 30px; }
.pantalla--panel .cocina { padding: 6px 18px 18px; }
.pantalla--panel .cocina__titulo { font-size: 22px; }
.aviso--fijo { width: 360px; }
.aparato[data-pantalla="4"] .aviso--fijo { transform: translate(-50%, 0); opacity: 1; transition-delay: .9s; }
.aparato[data-pantalla="4"] .orden--nueva { animation: llega .8s var(--resorte) 1.3s both; }

/* ---------- Proceso ---------- */
.pasos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos::before, .pasos::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.pasos::before { background: var(--borde-fuerte); }
.pasos::after { background: linear-gradient(90deg, var(--azul), var(--crema)); box-shadow: 0 0 14px rgba(157, 182, 255, .9); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.paso { padding: 30px 26px 0 0; display: grid; gap: 12px; align-content: start; }
.paso__num { font-family: var(--f-serif); font-style: italic; font-size: 64px; line-height: .9; color: var(--crema-oro); }
.paso h3 { font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -.03em; }
.paso p { color: var(--gris); font-size: 15.5px; }

/* ---------- Trabajo ---------- */
.caso {
  border: 1px solid rgba(157, 182, 255, .22); border-radius: var(--radio);
  padding: 40px; margin-bottom: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
}
.caso.foco {
  background:
    radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(157, 182, 255, .14), transparent 45%),
    radial-gradient(60% 80% at 0% 0%, rgba(61, 99, 242, .3), transparent 70%),
    linear-gradient(180deg, #13204A, var(--superficie));
}
.caso h3 { font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -.045em; margin: 6px 0 14px; }
.caso p { color: var(--gris-claro); }
.caso__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.caso__chips li {
  font-size: 13.5px; color: var(--texto);
  border: 1px solid var(--borde-fuerte); background: rgba(5, 10, 26, .35);
  padding: 8px 13px; border-radius: 999px;
}
.js .caso.visto .caso__chips li { animation: chip .6s var(--resorte) both; animation-delay: calc(var(--i, 0) * 50ms + 300ms); }
@keyframes chip { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

.trabajos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.trabajo { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--borde); }
.trabajo::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--crema), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--suave); }
.trabajo:hover::after { transform: scaleX(1); }
.trabajo h3 { font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; transition: color .3s ease; }
.trabajo:hover h3 { color: var(--crema); }
.trabajo p { color: var(--gris); font-size: 15.5px; }
.trabajo__tags { font: 400 11.5px/1.6 var(--f-mono); color: var(--gris-claro); text-align: right; }

/* ---------- Preguntas ---------- */
.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font-weight: 500; font-size: 20px; letter-spacing: -.025em; transition: color .2s ease; }
.faq summary:hover { color: var(--crema); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  background:
    linear-gradient(var(--texto), var(--texto)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--texto), var(--texto)) center / 1.5px 11px no-repeat;
  transition: transform .45s var(--suave), border-color .3s ease;
}
.faq details[open] summary::after {
  transform: rotate(135deg); border-color: var(--crema);
  background:
    linear-gradient(var(--azul-hondo), var(--azul-hondo)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--azul-hondo), var(--azul-hondo)) center / 1.5px 11px no-repeat,
    var(--crema);
}
.faq__resp p { padding: 0 48px 26px 0; color: var(--gris-claro); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__resp { animation: abre .5s var(--suave); }
  @keyframes abre { from { opacity: 0; transform: translateY(-8px); } }
}

/* ---------- Contacto ---------- */
.contacto { position: relative; padding: 170px 0 150px; overflow: hidden; }
.contacto__halo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(61, 99, 242, .55), transparent 70%),
    linear-gradient(180deg, var(--fondo), var(--azul-hondo) 55%, var(--fondo-2));
}
.contacto__fila {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end;
  transform: scale(calc(.9 + var(--p, 1) * .1)); opacity: calc(.2 + var(--p, 1) * .8);
}
.contacto__titulo { font-weight: 600; font-size: clamp(38px, 5.6vw, 76px); line-height: 1; letter-spacing: -.055em; color: #fff; }
.contacto__titulo em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; color: var(--crema); }
.contacto__acciones { display: grid; gap: 12px; justify-items: start; }
.contacto__nota { color: rgba(244, 231, 197, .7); font-size: 15px; }

/* ---------- Pie ---------- */
.pie { background: var(--fondo-2); color: rgba(244, 231, 197, .55); font-size: 13.5px; border-top: 1px solid rgba(244,231,197,.08); }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0 34px; flex-wrap: wrap; }
.marca--pie { color: #fff; font-size: 18px; }
.marca--pie .marca__ia { color: var(--crema); }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .escena__lienzo { height: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
  .escala { position: relative; left: auto; top: auto; transform: none; }
  .escala--iphone { order: -1; }
}

@media (max-width: 900px) {
  .barra__nav { display: none; }
  .barra__fila .boton { margin-left: auto; }
  .servicios { grid-template-columns: 1fr 1fr; }
  .servicio--ancho { grid-row: auto; min-height: 380px; }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .trabajo { grid-template-columns: 1fr; gap: 6px; }
  .trabajo__tags { text-align: left; }
  .contacto__fila { grid-template-columns: 1fr; }
  .caso { grid-template-columns: 1fr; padding: 30px 26px; gap: 24px; }

  .escenario { height: 540vh; }
  .escenario__rejilla { grid-template-columns: 1fr; gap: 14px; align-content: center; padding-top: 56px; }
  .escenario .titulo-seccion { font-size: clamp(24px, 6.2vw, 38px); margin-bottom: 8px; max-width: 22ch; }
  .escenario .eyebrow { margin-bottom: 8px; }
  .etapas { position: relative; min-height: 104px; }
  .etapa { position: absolute; inset: 0 0 auto; padding: 6px 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--suave), transform .6s var(--suave); }
  .etapa.activa { opacity: 1; transform: none; }
  .etapa p { font-size: 14px; }
  .escenario__barra { margin-top: 2px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .envoltura, .envoltura--angosta { width: calc(100% - 36px); }
  .hero { padding: 56px 0 60px; }
  .hero__sub { font-size: 17px; }
  .escena { margin-top: 44px; }
  .seccion { padding: 88px 0; }
  .servicios { grid-template-columns: 1fr; }
  .servicio--ancho { grid-column: auto; padding: 190px 24px 28px; min-height: 0; }
  .qr { top: 26px; right: 24px; width: 136px; height: 136px; }
  .pasos { grid-template-columns: 1fr; row-gap: 34px; }
  .paso { padding-right: 0; }
  .faq__resp p { padding-right: 0; }
  .plataformas__fila { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cinta { width: 100%; }
  .contacto { padding: 120px 0 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__texto, .contacto__fila, .escala { transform: none !important; opacity: 1 !important; }
  .letra { opacity: 1; transform: none; filter: none; }
}

/* =====================================================================
   v3.1 · Notificaciones iPhone/Android, isla dinámica, selector de
   sistema, notificaciones reales y seguimiento en el mapa
   ===================================================================== */

/* Controles de la escena */
.escena__controles { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px auto 36px; width: min(var(--ancho), 100% - 40px); }
.selector-so { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: rgba(157, 182, 255, .08); border: 1px solid var(--borde); }
.selector-so button { position: relative; z-index: 1; border: 0; background: transparent; padding: 9px 20px; font-size: 14px; font-weight: 500; color: var(--gris-claro); border-radius: 999px; transition: color .3s ease; }
.selector-so button.activo { color: var(--azul-hondo); }
.selector-so__fondo { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--crema); transition: transform .55s var(--resorte); }
.selector-so[data-so="android"] .selector-so__fondo { transform: translateX(100%); }
.noti-real { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--gris-claro); padding: 10px 16px; border-radius: 999px; font-size: 14px; text-align: left; transition: border-color .2s ease, color .2s ease; }
.noti-real svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.noti-real:hover { border-color: var(--azul-claro); color: var(--texto); }
.noti-real.activo { border-color: rgba(61, 214, 140, .5); color: #74E4AF; }
.noti-real.aviso-ios { border-color: rgba(244, 231, 197, .4); color: var(--crema); }

/* El teléfono puede verse como iPhone o como Android */
.iphone { transition: border-radius .6s var(--suave), padding .6s var(--suave); }
.iphone .iphone__bisel { transition: border-radius .6s var(--suave), padding .6s var(--suave); }
.iphone .iphone__pantalla { transition: border-radius .6s var(--suave); }
.iphone .iphone__btn { transition: opacity .4s ease, top .6s var(--suave), height .6s var(--suave); }
.agujero {
  position: absolute; top: 19px; left: 50%; width: 13px; height: 13px; transform: translateX(-50%) scale(0);
  border-radius: 50%; z-index: 25;
  background: radial-gradient(circle at 35% 35%, #2b3a6b, #000 65%);
  transition: transform .5s var(--resorte);
}
.iphone.android { border-radius: 44px; padding: 3px; background: linear-gradient(90deg, #50545d, #23252b 5%, #30333a 50%, #23252b 95%, #50545d); }
.iphone.android .iphone__bisel { border-radius: 41px; padding: 8px; }
.iphone.android .iphone__pantalla { border-radius: 34px; }
.iphone.android .isla { opacity: 0; visibility: hidden; }
.iphone.android .agujero { transform: translateX(-50%) scale(1); }
.iphone.android .iphone__btn--accion, .iphone.android .iphone__btn--vol1 { opacity: 0; }
.iphone.android .iphone__btn--vol2 { left: auto; right: -2.5px; top: 236px; height: 84px; background: linear-gradient(270deg, #2e3036, #8a8e96); }
.iphone.android .iphone__btn--lado { top: 150px; height: 50px; }
.iphone.android .estatus { padding: 16px 24px 0 28px; font-weight: 500; font-size: 14px; height: 48px; }
.iphone.android .estatus__iconos { gap: 6px; }
.iphone.android .ico-wifi { order: 1; }
.iphone.android .ico-senal { order: 2; }
.iphone.android .ico-bateria { order: 3; }
.iphone.android .indicador { width: 96px; height: 4px; bottom: 7px; }

/* Isla dinámica con actividad en vivo */
.isla--viva { overflow: hidden; display: block; transition: width .6s var(--resorte), height .6s var(--resorte), border-radius .6s var(--resorte), opacity .3s ease; }
.isla--viva::after { transition: opacity .2s ease; }
.isla--viva.compacta { width: 232px; height: 36px; border-radius: 20px; cursor: pointer; }
.isla--viva.expandida { width: 276px; height: 116px; border-radius: 40px; }
.isla--viva.compacta::after, .isla--viva.expandida::after { opacity: 0; }
.isla__compacta, .isla__expandida { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.isla--viva.compacta .isla__compacta { opacity: 1; transition-delay: .25s; }
.isla--viva.expandida .isla__expandida { opacity: 1; transition-delay: .3s; }
.isla__compacta { display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 7px; }
.isla__logo { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, var(--crema), var(--crema-hondo)); color: var(--azul-hondo); font: 700 11px/1 var(--f-texto); }
.isla__estado { font: 600 12px/1 var(--f-texto); color: var(--crema); letter-spacing: -.01em; white-space: nowrap; }
.isla__expandida { padding: 16px 18px 15px; display: flex; flex-direction: column; justify-content: space-between; }
.isla__fila { display: flex; align-items: center; gap: 10px; }
.isla__logo--grande { width: 40px; height: 40px; font-size: 17px; }
.isla__textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.isla__textos b { font: 600 14px/1.2 var(--f-texto); color: #fff; letter-spacing: -.01em; }
.isla__textos small { font-size: 11px; color: rgba(235, 235, 245, .6); }
.isla__tiempo { display: grid; justify-items: end; font: 650 19px/1 var(--f-texto); color: var(--crema); letter-spacing: -.02em; }
.isla__tiempo small { font-size: 10px; font-weight: 500; color: rgba(235, 235, 245, .6); margin-top: 2px; }
.isla__pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.isla__pasos i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); transition: background-color .5s ease; }
.isla__pasos i.on { background: var(--crema); }

/* Notificaciones dentro del teléfono */
.noti {
  position: absolute; left: 8px; right: 8px; top: 52px; z-index: 30; pointer-events: none;
  transform: translateY(-150%) scale(.94); opacity: 0;
  transition: transform .7s var(--resorte), opacity .35s ease;
}
.noti.mostrar { transform: none; opacity: 1; }
.iphone.android .noti { top: 8px; left: 6px; right: 6px; }

.noti__ios {
  display: flex; gap: 10px; align-items: center;
  padding: 11px 14px 12px 11px; border-radius: 24px;
  background: rgba(46, 48, 62, .74);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7), inset 0 0 0 .5px rgba(255, 255, 255, .08);
}
.noti__icono { width: 37px; height: 37px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(145deg, var(--crema), var(--crema-hondo)); color: var(--azul-hondo); font: 700 17px/1 var(--f-texto); }
.noti__cuerpo { flex: 1; min-width: 0; }
.noti__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.noti__fila b { font: 600 13.5px/1.25 var(--f-texto); color: #fff; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noti__fila span { font-size: 12px; color: rgba(235, 235, 245, .55); flex: none; }
.noti__texto { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.noti__and {
  padding: 12px 14px 14px; border-radius: 26px;
  background: #272C3B; color: #E3E3EC;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7);
  font-family: "Roboto", var(--f-texto);
}
.na__cabeza { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #C4C7D4; margin-bottom: 7px; }
.na__ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #B9C6FF; color: #12204F; font: 700 10px/1 var(--f-texto); }
.na__flecha { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .08); position: relative; }
.na__flecha::after { content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-right: 1.5px solid #C4C7D4; border-bottom: 1.5px solid #C4C7D4; transform: translate(-50%, -50%) rotate(45deg); }
.na__fila { display: flex; gap: 10px; align-items: center; }
.na__fila > div { flex: 1; min-width: 0; }
.na__titulo { font-weight: 500; font-size: 14px; line-height: 1.3; color: #F0F0F7; }
.na__texto { font-size: 13px; line-height: 1.35; color: #C4C7D4; }
.na__grande { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 20px; background: #3A3320; }
.na__prog { display: block; height: 4px; border-radius: 2px; background: rgba(185, 198, 255, .2); margin-top: 11px; overflow: hidden; }
.na__prog i { display: block; height: 100%; border-radius: 2px; background: #B9C6FF; transition: width .6s var(--suave); }

/* Invitar a usar el panel: el botón del pedido del visitante late */
.orden.tuyo { border-color: rgba(244, 231, 197, .45); }
.orden.tuyo.orden--nueva { border-color: rgba(229, 72, 77, .55); }
@media (prefers-reduced-motion: no-preference) {
  .orden.tuyo .orden__btn { animation: invita 1.8s ease-out infinite; }
  @keyframes invita { 0% { box-shadow: 0 0 0 0 rgba(244, 231, 197, .5); } 100% { box-shadow: 0 0 0 10px rgba(244, 231, 197, 0); } }
}

/* ---------- Seguimiento del repartidor ---------- */
.rastreo {
  position: absolute; inset: 0; z-index: 15;
  background: #0E1527;
  transform: translateY(102%);
  transition: transform .75s var(--suave);
}
.rastreo.abierto { transform: none; }
.rastreo--fijo { transform: none; }
.pantalla--rastreo { padding-top: 0; }
.rastreo__mapa { position: absolute; left: 0; right: 0; top: 0; height: 66%; overflow: hidden; }
.rastreo__mapa svg { width: 100%; height: 100%; display: block; }
.rastreo__arriba { position: absolute; top: 56px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.iphone.android .rastreo__arriba { top: 52px; }
.rastreo__atras {
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: rgba(14, 21, 39, .86); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rastreo__atras svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rastreo__pill { background: rgba(14, 21, 39, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 9px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.rastreo__hoja {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: #111A31; border-radius: 26px 26px 0 0;
  padding: 9px 18px 28px;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 9px;
}
.rastreo__asa { width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin: 0 auto 2px; flex: none; }
.rastreo__eta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rastreo__eta b { font-size: 21px; font-weight: 650; letter-spacing: -.035em; }
.rastreo__eta span { font-size: 11.5px; color: var(--gris); white-space: nowrap; }
.rastreo__barra { height: 5px; border-radius: 3px; background: rgba(157, 182, 255, .15); overflow: hidden; flex: none; }
.rastreo__barra i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--azul), var(--crema)); border-radius: 3px; }
.rastreo__estado { font-size: 12.5px; color: var(--gris-claro); }
.rastreo__rep { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borde); }
.rastreo__foto { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(145deg, #3D63F2, #1B2A6B); font: 600 14px/1 var(--f-texto); }
.rastreo__rep > div { flex: 1; min-width: 0; display: grid; }
.rastreo__rep b { font-size: 14px; font-weight: 600; }
.rastreo__rep small { font-size: 11px; color: var(--gris); }
.rastreo__btn { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(157, 182, 255, .12); }
.rastreo__btn svg { width: 16px; height: 16px; fill: none; stroke: var(--crema); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.repartidor__pulso { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .repartidor__pulso { animation: pulso 1.8s ease-out infinite; }
  @keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
}

/* =====================================================================
   v3.2 · Sucursales: panel del dueño en una laptop virtual
   ===================================================================== */
.sucursales__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: end; margin-bottom: 26px; }
.sucursales__intro .titulo-seccion { margin-bottom: 0; }
.sucursales__texto p { color: var(--gris-claro); margin-bottom: 18px; }
.checks-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks-mini li { position: relative; padding-left: 26px; font-size: 15px; color: var(--texto); }
.checks-mini li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(244, 231, 197, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23F4E7C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sucursales .escena__pista { margin-bottom: 36px; }

/* Laptop virtual (se escala completa con --k) */
.laptop-caja { width: min(1100px, 100% - 40px); margin-inline: auto; height: calc(694px * var(--k, 1)); }
.laptop { width: 1100px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.laptop__tapa {
  position: relative; width: 1000px; height: 660px; margin: 0 auto;
  padding: 16px 16px 20px; border-radius: 24px 24px 10px 10px;
  background: #07080b;
  box-shadow:
    0 0 0 2px #50545d, 0 0 0 3px #22242a,
    0 60px 120px -50px rgba(0, 0, 0, .95),
    0 0 200px -60px rgba(61, 99, 242, .6);
}
.laptop__camara { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a6b, #000 70%); }
.laptop__pantalla { position: relative; height: 100%; border-radius: 8px; overflow: hidden; background: #0A1128; isolation: isolate; }
.laptop__pantalla::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%); }
.laptop__base {
  position: relative; width: 1100px; height: 20px; margin-top: -2px;
  border-radius: 2px 2px 22px 22px;
  background: linear-gradient(180deg, #c3c8d0 0%, #9ba0a9 35%, #5f636b 100%);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9);
}
.laptop__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 150px; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #7d828b, #a9aeb6); }

/* Panel del dueño */
.dueno { height: 100%; display: flex; flex-direction: column; padding: 16px 20px 18px; gap: 14px; color: var(--texto); }
.dueno__barra { display: flex; justify-content: space-between; align-items: center; }
.dueno__marca { display: flex; align-items: center; gap: 10px; }
.dueno__marca .app__logo { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.dueno__marca b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.dueno__marca small { font-size: 12px; color: var(--gris); }
.dueno__derecha { display: flex; align-items: center; gap: 12px; }
.dueno__fecha { font: 500 12px/1 var(--f-mono); color: var(--gris-claro); }

.dueno__kpis { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; }
.kpi { background: rgba(157, 182, 255, .06); border: 1px solid var(--borde); border-radius: 16px; padding: 13px 16px; display: grid; gap: 4px; align-content: start; }
.kpi small { font-size: 12px; color: var(--gris); }
.kpi b { font-weight: 650; font-size: 26px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi--heroe { background: linear-gradient(135deg, rgba(61, 99, 242, .28), rgba(61, 99, 242, .06)); border-color: rgba(157, 182, 255, .25); }
.kpi--heroe b { font-size: 34px; }
.kpi__delta { font-size: 12px; color: #74E4AF; }
.kpi b.sube { animation: sube .6s var(--suave); }
@keyframes sube { 0% { color: var(--crema); text-shadow: 0 0 16px rgba(244, 231, 197, .8); } 100% { color: inherit; text-shadow: none; } }

.dueno__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.tarjeta-d { background: rgba(157, 182, 255, .05); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
.tarjeta-d__cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tarjeta-d h4 { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.tarjeta-d__cabeza span { font-size: 11.5px; color: var(--gris); }

/* Gráfica de barras: una sola serie, sin leyenda (el título la nombra) */
.grafica { position: relative; height: 200px; }
.grafica svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafica .eje { font: 500 10px var(--f-mono); fill: var(--gris); }
.grafica .reja { stroke: rgba(170, 190, 255, .08); stroke-width: 1; }
.grafica .barra { fill: #6F8EF7; transition: opacity .2s ease; }
.grafica .barra--viva { fill: var(--crema); }
.grafica .barra-hit { fill: transparent; cursor: pointer; }
.grafica .etiqueta { font: 600 10.5px var(--f-texto); fill: var(--texto); }
.grafica:hover .barra { opacity: .55; }
.grafica .barra.activa { opacity: 1; }
.grafica__tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: #1B2650; border: 1px solid var(--borde-fuerte); border-radius: 10px;
  padding: 7px 10px; font-size: 12px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); opacity: 0; transition: opacity .15s ease;
}
.grafica__tip.ver { opacity: 1; }
.grafica__tip b { display: block; font-weight: 600; }
.grafica__tip span { color: var(--gris-claro); }

.top { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.top h4 { margin-bottom: 8px; }
.top__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.top__lista li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.top__lista .ico { font-size: 16px; }
.top__lista .cant { font: 500 12px/1 var(--f-mono); color: var(--gris-claro); }

/* Sucursales */
.suc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.suc {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(5, 10, 26, .35); border: 1px solid var(--borde);
  transition: opacity .4s ease, border-color .4s ease;
}
.suc__nombre { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.suc__datos { grid-column: 1; display: flex; gap: 10px; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.suc__datos b { color: var(--texto); font-weight: 600; }
.suc__barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(157, 182, 255, .1); overflow: hidden; }
.suc__barra i { display: block; height: 100%; border-radius: 2px; background: #6F8EF7; width: var(--w, 0%); transition: width .8s var(--suave); }
.suc__estado {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px; padding: 6px 10px 6px 8px;
  font-size: 12px; font-weight: 600; background: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.suc__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.suc__estado[data-estado="abierta"] { color: #74E4AF; background: rgba(61, 214, 140, .12); border-color: rgba(61, 214, 140, .3); }
.suc__estado[data-estado="pausa"] { color: #F5C66B; background: rgba(245, 198, 107, .12); border-color: rgba(245, 198, 107, .3); }
.suc__estado[data-estado="cerrada"] { color: var(--gris-claro); background: rgba(255, 255, 255, .05); border-color: var(--borde-fuerte); }
.suc__estado:hover { filter: brightness(1.15); }
.suc[data-estado="pausa"] .suc__barra i { background: #8a7a55; }
.suc[data-estado="cerrada"] { opacity: .55; }
.suc__mas {
  position: absolute; right: 108px; top: 8px;
  font: 600 12px/1 var(--f-mono); color: var(--crema);
  opacity: 0; transform: translateY(6px);
}
.suc__mas.ver { animation: mas 1.4s var(--suave) both; }
@keyframes mas { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Celular: sin marco de laptop; el panel se acomoda en columnas */
@media (max-width: 760px) {
  .sucursales__intro { grid-template-columns: 1fr; gap: 20px; }
  .laptop-caja { height: auto; width: calc(100% - 36px); }
  .laptop { width: auto; transform: none; }
  .laptop__tapa { width: auto; height: auto; padding: 0; background: none; box-shadow: none; }
  .laptop__camara, .laptop__base { display: none; }
  .laptop__pantalla { border-radius: 22px; border: 1px solid var(--borde-fuerte); }
  .dueno { padding: 16px 14px; }
  .dueno__barra { flex-wrap: wrap; gap: 10px; }
  .dueno__kpis { grid-template-columns: 1fr 1fr; }
  .kpi--heroe { grid-column: 1 / -1; }
  .dueno__cuerpo { grid-template-columns: 1fr; }
  .grafica { height: 170px; }
}

/* =====================================================================
   v3.3 · Giros: galería horizontal de páginas de ejemplo
   ===================================================================== */
.giros { position: relative; height: 340vh; }
.giros__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 34px; padding-top: 50px; }
.giros__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.giros__cabeza .titulo-seccion { margin-bottom: 0; }
.giros__texto { color: var(--gris-claro); }
.giros__pista {
  display: flex; gap: 28px; align-items: flex-start;
  padding-left: max(20px, calc((100vw - var(--ancho)) / 2));
  padding-right: 60px;
  width: max-content;
  transform: translate3d(calc(var(--x, 0) * 1px), 0, 0);
  will-change: transform;
}

.web { flex: none; width: calc(560px * var(--kw, 1)); }
.web__barra {
  height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: #1C2440; border: 1px solid var(--borde-fuerte); border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.web__barra i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.web__barra i:nth-child(2) { background: #FEBC2E; }
.web__barra i:nth-child(3) { background: #28C840; }
.web__url { margin-left: 10px; flex: 1; max-width: 260px; height: 22px; border-radius: 7px; background: rgba(0,0,0,.3); color: var(--gris-claro); font: 400 11px/22px var(--f-mono); padding: 0 10px; overflow: hidden; white-space: nowrap; }
.web__sitio {
  height: calc(340px * var(--kw, 1)); overflow: hidden;
  border: 1px solid var(--borde-fuerte); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 100px -50px rgba(61, 99, 242, .5);
}
.web__lienzo { position: relative; width: 560px; height: 340px; transform: scale(var(--kw, 1)); transform-origin: 0 0; overflow: hidden; }
.web__giro { margin-top: 14px; font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.web h5 { margin: 0; }

/* Hospital */
.web--hospital .web__lienzo { background: #F6FAFB; color: #0E3440; font-family: var(--f-texto); }
.h-nav { display: flex; align-items: center; gap: 16px; padding: 14px 22px; font-size: 11px; color: #4A6670; }
.h-nav b { color: #0E3440; font-size: 13px; margin-right: auto; } .h-nav b span { color: #0098B4; }
.h-nav em { font-style: normal; background: #E5484D; color: #fff; padding: 5px 10px; border-radius: 999px; font-weight: 600; }
.h-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; padding: 8px 22px 0; align-items: center; }
.h-hero h5 { font-size: 27px; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 8px; }
.h-hero p { font-size: 11.5px; color: #4A6670; margin-bottom: 12px; }
.h-btn { display: inline-block; background: #0098B4; color: #fff; font-size: 11px; font-weight: 600; padding: 8px 12px; border-radius: 9px; margin-right: 6px; }
.h-btn--l { background: transparent; color: #0098B4; box-shadow: inset 0 0 0 1px #0098B4; }
.h-foto { height: 150px; border-radius: 18px; background: radial-gradient(70% 70% at 30% 30%, #7FD6E4, #0E6F84); display: grid; place-items: center; font-size: 60px; }
.h-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 22px; }
.h-cards span { background: #fff; border-radius: 12px; padding: 12px; font-size: 11.5px; font-weight: 600; box-shadow: 0 4px 14px -6px rgba(14, 52, 64, .2); }

/* Arquitectos */
.web--arq .web__lienzo { background: #EDEBE6; color: #121212; }
.a-nav { display: flex; gap: 18px; padding: 16px 24px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.a-nav b { margin-right: auto; color: #121212; letter-spacing: .3em; font-size: 11px; }
.a-titulo { font-family: var(--f-serif); font-weight: 400; font-size: 40px; line-height: .98; padding: 4px 24px 16px; letter-spacing: -.01em; }
.a-titulo i { color: #8A6D4B; }
.a-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 0 24px; height: 150px; }
.a-grid figure { margin: 0; position: relative; border-radius: 4px; overflow: hidden; }
.a-grid figcaption { position: absolute; left: 8px; bottom: 6px; font-size: 9.5px; color: #fff; letter-spacing: .04em; }
.a-f1 { background: linear-gradient(180deg, #9DB4C8 0 45%, transparent 45%), linear-gradient(90deg, #2E2E2E 0 20%, #D9D4CA 20% 80%, #3B3B3B 80%), #888; background-size: 100% 100%, 100% 55%; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
.a-f2 { background: repeating-linear-gradient(90deg, #6B7A86 0 10px, #A9B8C3 10px 12px), #6B7A86; }
.a-f3 { background: radial-gradient(60% 40% at 50% 100%, #C9A27A, transparent 70%), linear-gradient(180deg, #E7D9C5, #B88C63); }

/* Constructora */
.web--obra .web__lienzo { background: #15171C; color: #fff; }
.c-nav { display: flex; align-items: center; gap: 16px; padding: 14px 22px; font-size: 11px; color: #AEB2BC; }
.c-nav b { margin-right: auto; color: #F5B700; letter-spacing: .08em; }
.c-nav em { font-style: normal; background: #F5B700; color: #15171C; padding: 6px 11px; border-radius: 4px; font-weight: 700; }
.c-hero { padding: 16px 22px 18px; }
.c-hero h5 { font-size: 30px; line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; margin-bottom: 8px; text-transform: uppercase; }
.c-hero p { font-size: 11.5px; color: #AEB2BC; }
.c-franja { height: 16px; background: repeating-linear-gradient(-45deg, #F5B700 0 14px, #15171C 14px 28px); }
.c-datos { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 22px; gap: 10px; }
.c-datos span { font-size: 11px; color: #AEB2BC; display: grid; }
.c-datos b { font-size: 28px; color: #fff; letter-spacing: -.03em; }

/* Inmobiliaria */
.web--casa .web__lienzo { background: #fff; color: #10231A; }
.i-nav { display: flex; gap: 16px; padding: 14px 22px; font-size: 11px; color: #4D6157; }
.i-nav b { margin-right: auto; color: #127A4A; font-size: 13px; }
.i-busca { margin: 6px 22px 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.25), inset 0 0 0 1px #E3E8E5; font-size: 12px; color: #6A7A72; }
.i-busca em { font-style: normal; background: #127A4A; color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 11px; }
.i-casas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 22px; }
.i-casas div { display: grid; gap: 3px; }
.i-foto { height: 120px; border-radius: 12px; margin-bottom: 4px; }
.i-foto--1 { background: linear-gradient(180deg, #B9DCF2 0 50%, #7DB36A 50%); position: relative; }
.i-foto--2 { background: linear-gradient(180deg, #F2D9B9 0 55%, #B58A5E 55%); }
.i-foto--3 { background: repeating-linear-gradient(0deg, #8FA7B8 0 14px, #C8D6E0 14px 16px); }
.i-casas b { font-size: 14px; letter-spacing: -.02em; }
.i-casas small { font-size: 10.5px; color: #6A7A72; }

/* Escuela */
.web--escuela .web__lienzo { background: #EAF4FF; color: #17325C; }
.e-nav { display: flex; gap: 16px; padding: 14px 22px; font-size: 11px; color: #4A6188; position: relative; z-index: 1; }
.e-nav b { margin-right: auto; color: #17325C; font-size: 13px; }
.e-hero { position: relative; z-index: 1; padding: 14px 22px; display: grid; justify-items: start; gap: 12px; }
.e-sello { background: #FFCF3F; color: #3A2A00; font-size: 10.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.e-hero h5 { font-size: 34px; line-height: 1; letter-spacing: -.035em; max-width: 12ch; }
.e-niveles { display: flex; gap: 6px; }
.e-niveles span { background: #fff; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; box-shadow: 0 3px 10px -5px rgba(23, 50, 92, .3); }
.e-btn { background: #2F6BFF; color: #fff; font-size: 11.5px; font-weight: 600; padding: 9px 14px; border-radius: 12px; }
.e-deco { position: absolute; border-radius: 50%; }
.e-deco--1 { right: -40px; top: 60px; width: 230px; height: 230px; background: #FFCF3F; opacity: .8; }
.e-deco--2 { right: 120px; bottom: -50px; width: 120px; height: 120px; background: #FF7A8A; opacity: .7; }

/* Despacho */
.web--despacho .web__lienzo { background: #0F1B33; color: #F2EEE4; }
.d-nav { display: flex; gap: 16px; padding: 16px 24px; font-size: 11px; color: #A8B1C6; }
.d-nav b { margin-right: auto; font-family: var(--f-serif); font-weight: 400; font-size: 17px; color: #D8B977; }
.d-hero { padding: 16px 24px 18px; display: grid; justify-items: start; gap: 8px; border-bottom: 1px solid rgba(216, 185, 119, .25); }
.d-hero small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #D8B977; }
.d-hero h5 { font-family: var(--f-serif); font-weight: 400; font-size: 36px; line-height: 1; }
.d-btn { border: 1px solid #D8B977; color: #D8B977; font-size: 11px; padding: 8px 13px; border-radius: 2px; margin-top: 4px; }
.d-lista { list-style: none; margin: 0; padding: 14px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 11.5px; color: #C9CFDC; }
.d-lista li { border-left: 2px solid #D8B977; padding-left: 8px; }

/* Tarjeta final */
.web--tuyo { align-self: stretch; display: flex; }
.web__tuyo {
  margin-bottom: 36px; flex: 1;
  border: 1px dashed rgba(244, 231, 197, .35); border-radius: 18px;
  padding: 36px; display: grid; align-content: center; justify-items: start; gap: 12px;
  background: radial-gradient(80% 80% at 0% 0%, rgba(61, 99, 242, .25), transparent 70%);
}
.web__tuyo h5 { font-size: 32px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.web__tuyo p { color: var(--gris-claro); max-width: 36ch; }

/* Celular y tablet: carrusel con el dedo, sin fijar */
@media (max-width: 900px) {
  .giros { height: auto; padding: 96px 0 40px; }
  .giros__fijo { position: static; height: auto; overflow: visible; padding-top: 0; gap: 28px; }
  .giros__cabeza { grid-template-columns: 1fr; gap: 14px; }
  .giros__pista {
    width: auto; transform: none; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 18px 10px; gap: 16px; scrollbar-width: none;
  }
  .giros__pista::-webkit-scrollbar { display: none; }
  .web { scroll-snap-align: center; }
  .web--tuyo { width: calc(100vw - 56px); }
  .web__tuyo { padding: 26px; }
}

/* ajuste: la hora estimada va debajo del tiempo de llegada */
.rastreo__eta { flex-direction: column; align-items: flex-start; gap: 2px; }

/* =====================================================================
   v3.4 · Cursos de IA
   ===================================================================== */
.servicio--banda {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 28px;
  border-color: rgba(229, 72, 77, .28);
}
.servicio--banda.foco {
  background:
    radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 154, 157, .12), transparent 45%),
    radial-gradient(50% 120% at 100% 50%, rgba(229, 72, 77, .14), transparent 70%),
    linear-gradient(180deg, var(--superficie-2), var(--superficie));
}
.servicio--banda > div { display: grid; gap: 8px; max-width: 70ch; }
.servicio--banda .boton { flex: none; }

.cursos__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cursos .titulo-seccion { margin-bottom: 20px; }
.cursos__intro { color: var(--gris-claro); margin-bottom: 26px; max-width: 48ch; }
.modulos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 16px; }
.modulo { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.modulo svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: rgba(157, 182, 255, .08); border: 1px solid var(--borde);
  fill: none; stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.modulo h3 { font-weight: 600; font-size: 17px; letter-spacing: -.02em; margin-bottom: 2px; }
.modulo p { color: var(--gris); font-size: 15px; }

.prompts { display: grid; gap: 16px; }
.prompt { border: 1px solid var(--borde); border-radius: 20px; padding: 20px 22px; background: linear-gradient(180deg, var(--superficie-2), var(--superficie)); }
.prompt__tit { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.prompt__tit span { color: var(--crema); letter-spacing: .06em; }
.prompt__txt { font: 400 16px/1.65 var(--f-mono); color: var(--texto); min-height: 1.6em; }
.prompt--basico .prompt__txt { color: var(--gris-claro); }
.prompt--pro { border-color: rgba(244, 231, 197, .3); box-shadow: 0 30px 70px -40px rgba(61, 99, 242, .7); }
.prompt--pro .prompt__txt { min-height: 9.9em; }
.parte { border-bottom: 2px solid var(--c); padding-bottom: 1px; }
.prompt__cursor { display: inline-block; width: .5em; height: 1.1em; vertical-align: -.18em; background: var(--crema); margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .prompt__cursor { animation: parpadeo 1s steps(1) infinite; } }
.prompt__leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.prompt__leyenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris-claro); }
.prompt__leyenda span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.prompt__res { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borde-fuerte); font-size: 13.5px; color: var(--gris); }
.prompt__res--pro { color: var(--crema); }

@media (max-width: 900px) {
  .servicio--banda { flex-direction: column; align-items: flex-start; }
  .cursos__rejilla { grid-template-columns: 1fr; gap: 40px; }
}

/* =====================================================================
   v3.5 · Botón "Me interesa" y su formulario
   ===================================================================== */
.barra__acciones { display: flex; gap: 8px; align-items: center; }
.barra__acciones .boton { margin-left: 0 !important; }
@media (max-width: 900px) { .barra__acciones { margin-left: auto; } }
@media (max-width: 380px) { .barra__acciones .boton { padding: 0 12px; font-size: 13px; } }
.contacto__acciones .boton--contorno { border-color: rgba(244, 231, 197, .35); }

.modal {
  width: min(620px, 100% - 24px); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 26px;
  background: linear-gradient(180deg, #111C3E, #0B1430); color: var(--texto);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(61, 99, 242, .6);
  overflow: auto; overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(3, 6, 16, .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-entra .5s var(--resorte); }
  .modal[open]::backdrop { animation: fondo-entra .4s ease; }
  @keyframes modal-entra { from { opacity: 0; transform: translateY(24px) scale(.97); } }
  @keyframes fondo-entra { from { opacity: 0; } }
}
.interes { position: relative; padding: 30px 30px 26px; }
.modal__cerrar {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--borde-fuerte); background: transparent; display: grid; place-items: center; color: var(--gris-claro);
}
.modal__cerrar:hover { color: var(--texto); border-color: var(--azul-claro); }
.modal__cerrar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.interes .eyebrow { margin-bottom: 10px; }
.interes__titulo { font-weight: 600; font-size: 28px; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 6px; }
.interes__sub { color: var(--gris-claro); font-size: 15px; margin-bottom: 20px; }
.interes__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo-f { display: grid; gap: 6px; margin-bottom: 14px; }
.campo-f > span { font-size: 13px; font-weight: 500; color: var(--gris-claro); }
.campo-f i { font-style: normal; color: var(--gris); font-weight: 400; }
.campo-f input, .campo-f textarea {
  width: 100%; font: 400 16px/1.4 var(--f-texto); color: var(--texto);
  background: rgba(5, 10, 26, .55); border: 1px solid var(--borde-fuerte); border-radius: 13px;
  padding: 12px 14px; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo-f input::placeholder, .campo-f textarea::placeholder { color: #5E6888; }
.campo-f input:focus, .campo-f textarea:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(157, 182, 255, .18); }
.campo-f input[aria-invalid="true"] { border-color: #FF8A8E; }
.temas { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.temas legend { font-size: 13px; font-weight: 500; color: var(--gris-claro); margin-bottom: 8px; padding: 0; }
.temas label { cursor: pointer; }
.temas input { position: absolute; opacity: 0; pointer-events: none; }
.temas span {
  display: inline-block; font-size: 13px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); color: var(--gris-claro);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.temas input:checked + span { background: var(--crema); border-color: var(--crema); color: var(--azul-hondo); }
.temas input:focus-visible + span { outline: 2px solid var(--crema); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.interes__error { color: #FF9A9D; font-size: 14px; min-height: 0; margin-bottom: 10px; }
.interes__error:empty { display: none; }
.interes__error a { color: var(--crema); }
.interes__enviar { width: 100%; }
.interes__enviar[disabled] { opacity: .6; cursor: progress; }
.interes__nota { text-align: center; color: var(--gris); font-size: 12.5px; margin-top: 10px; }
.interes__listo { text-align: center; display: grid; justify-items: center; gap: 4px; padding: 24px 0 10px; }
.palomita--sola { width: 96px; height: 96px; margin-bottom: 14px; }
.palomita--sola circle { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--suave) .1s; }
.palomita--sola path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--suave) .6s; }
.interes__listo:not([hidden]) .palomita--sola circle { animation: traza-c .8s var(--suave) both; }
.interes__listo:not([hidden]) .palomita--sola path { animation: traza-p .5s var(--suave) .6s both; }
@keyframes traza-c { from { stroke-dashoffset: 230; } }
@keyframes traza-p { from { stroke-dashoffset: 60; } }
@media (max-width: 560px) {
  .interes { padding: 26px 18px 20px; }
  .interes__fila { grid-template-columns: 1fr; gap: 0; }
  .interes__titulo { font-size: 24px; }
}
.interes__listo[hidden], #interesPaso[hidden] { display: none; }

[hidden] { display: none !important; }

/* =====================================================================
   v3.6 · Marco de luz rehecho para el celular: las luces se mueven solo
   con transform (las anima la tarjeta gráfica, a 60 cuadros), sin filtros
   ni SVG que haya que repintar. La ruta la calcula demo.js (ajustarMarco).
   ===================================================================== */
.marco { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; --m: 12px; --r: 30px; }
@media (max-width: 699px) { .marco { --m: 6px; --r: 24px; } }
.marco__riel { position: absolute; inset: var(--m); border: 1px solid rgba(170, 190, 255, .11); border-radius: var(--r); }
.chispa {
  position: absolute; left: 0; top: 0; width: 120px; height: 2px; margin-top: -.5px;
  border-radius: 2px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(244, 231, 197, 0), rgba(244, 231, 197, .25) 45%, #F4E7C5);
  will-change: transform; backface-visibility: hidden;
  transform: translate3d(-200px, -200px, 0);
}
.chispa::after {
  content: ""; position: absolute; right: -2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: #FFF9EA; box-shadow: 0 0 8px 3px rgba(244, 231, 197, .75);
}
.chispa--b { background: linear-gradient(90deg, rgba(255, 138, 142, 0), rgba(255, 138, 142, .25) 45%, #FFB0B2); }
.chispa--b::after { background: #FFE3E4; box-shadow: 0 0 8px 3px rgba(255, 138, 142, .7); }
@media (prefers-reduced-motion: no-preference) {
  .marco.lista .chispa { animation: vuelta-luz 18s linear infinite; }
  .marco.lista .chispa--b { animation-delay: -9s; }
}
@media (prefers-reduced-motion: reduce) { .chispa { display: none; } }

/* v3.6 · "Diseñamos…" ligero: sin desenfoque por letra (era lo que lo
   trababa en el celular); solo movimiento y transparencia, como la cinta. */
.letra {
  filter: none;
  transform: translate3d(0, -.5em, 0) rotate(-8deg);
  transition: opacity .25s ease, transform .45s var(--resorte), color .4s ease;
  backface-visibility: hidden;
}
.letra.on { filter: none; transform: translate3d(0, 0, 0); }
@media (max-width: 900px) { .manifiesto { height: 190vh; } }

/* =====================================================================
   v3.7 · RENDIMIENTO EN CELULAR
   Regla: lo que se mueve, se mueve con transform/opacity (lo anima la
   tarjeta gráfica, como la cinta "Programamos para"). Nada de animar
   sombras, filtros o fondos, y nada animándose fuera de pantalla.
   ===================================================================== */

/* Secciones fuera de pantalla: sus animaciones en pausa (demo.js pone .fuera) */
.fuera, .fuera * { animation-play-state: paused !important; }

/* Lo que se mueve con el scroll vive en su propia capa */
.hero__texto, .contacto__fila, #menuGuiado, .escenario__barra span, .giros__pista, .cinta__pista { will-change: transform; }

/* Puntos "en vivo": el pulso ahora es un anillo que crece (transform), no una sombra */
.vivo { position: relative; animation: none !important; box-shadow: none !important; }
.vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vivo::after { animation: latido-capa 2.2s ease-out infinite; }
  @keyframes latido-capa { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
}
/* Botón del pedido del visitante en el iPad: mismo truco */
.orden.tuyo .orden__btn { position: relative; animation: none !important; }
.orden.tuyo .orden__btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--crema); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .orden.tuyo .orden__btn::after { animation: invita-capa 1.8s ease-out infinite; }
  @keyframes invita-capa { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35, 1.6); opacity: 0; } }
}

/* Aparecer al hacer scroll: más rápido y ligero */
.js .aparece {
  transform: translate3d(0, 18px, 0);
  transition: opacity .5s ease, transform .6s var(--suave), border-color .4s ease;
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 900px), (hover: none) {
  /* sin desenfoques de fondo */
  .barra, .aviso, .noti__ios, .rastreo__atras, .rastreo__pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 6, 16, .8); }
  .barra { background: rgba(5, 10, 26, .96); }
  .noti__ios { background: rgba(46, 48, 62, .97); }
  .aviso { background: rgba(38, 44, 66, .97); }
  /* sin animaciones que repintan */
  .acento { animation: none !important; background-position: 35% 0; }
  .repartidor__pulso { animation: none !important; opacity: 0; }
  .js .entra { filter: none; }
  .pantalla { filter: none !important; }
  /* sombras más ligeras */
  .iphone, .aparato, .ipad, .laptop__tapa { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 60px -30px rgba(0, 0, 0, .9); }
  .web__sitio { box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); }
  .qr, .qr--grande { box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .9); }
  .orden--nueva { box-shadow: none; }
  .prompt--pro { box-shadow: none; }
}

/* =====================================================================
   v3.7 · "Páginas para cualquier giro" como cinta que corre sola
   ===================================================================== */
.giros { height: auto; padding: 120px 0 100px; }
.giros__fijo { position: static; height: auto; overflow: visible; padding-top: 0; gap: 40px; }
.giros__cinta {
  overflow: hidden; padding: 6px 0 4px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.giros__pista { transform: none; padding: 0; gap: 28px; width: max-content; overflow: visible; scroll-snap-type: none; }
@media (prefers-reduced-motion: no-preference) {
  .giros__pista.corre { animation: cinta-giros var(--dur, 70s) linear infinite; }
  .giros__cinta:hover .giros__pista { animation-play-state: paused; }
  @keyframes cinta-giros { to { transform: translate3d(calc(-50% - 14px), 0, 0); } }
}
@media (prefers-reduced-motion: reduce) { .giros__cinta { overflow-x: auto; } }
.giros__tuyo { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.giros__tuyo-titulo { font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.035em; line-height: 1.2; }
.giros__tuyo-texto { color: var(--gris-claro); margin-top: 6px; }
@media (max-width: 900px) {
  .giros { padding: 90px 0 70px; }
  .giros__pista { gap: 18px; padding: 0; }
  .giros__tuyo { flex-direction: column; align-items: flex-start; }
}

/* La "g" de "giro" y otras letras con cola ya no se cortan */
.acento { padding-bottom: .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* v3.7 · el brillo del cierre nace difuminado (antes cortaba recto arriba) */
.contacto__halo {
  background:
    radial-gradient(75% 55% at 50% 38%, rgba(61, 99, 242, .42), transparent 72%),
    linear-gradient(180deg, var(--fondo), var(--azul-hondo) 60%, var(--fondo-2));
}
/* caso destacado: etiquetas compactas en celular */
@media (max-width: 620px) {
  .caso__chips { gap: 6px; }
  .caso__chips li { font-size: 12.5px; padding: 6px 10px; }
}