/* ==========================================================================
   Landing de MUTA — entrada de la app (app.mutacol.com/) y lista de espera
   (mutacol.com). UNA sola hoja para las dos páginas.

   Port 1:1 del CSS de los conceptos aprobados por el fundador el 2026-10-05
   (company/01-tech-dev/ux-ui/referencias-entrada/fuente/*.src.html), con:
   - los colores pasados a tokens de packages/ui-kit/src/theme.css (cero
     hexadecimales aquí; los rgba() solo usan el RGB de un color de marca);
   - las sobrescrituras del concepto (.v2 …, .a …) resueltas en su valor final;
   - nombres más claros donde el del concepto era de trabajo:
     .v2 → .raiz · .a → .inicio · .a-hero → .inicio-rejilla ·
     .a-dentro → .dos-partes · .c-mesa → .mesa · input[type=range] → .rango ·
     .pub h3 → .pub .titulo;
   - dos ajustes de contraste AA aprobados por el fundador (rótulo de la
     herramienta y placeholder del correo) y piezas funcionales que el
     concepto no necesitaba (.oculta, .doble, .sin-foto, .panel-centrado,
     .enlace-boton, .aviso-cookies, .video).

   La lista de espera usa ESTE archivo copiado byte a byte
   (apps/landing-espera/estilos.css): cámbialo aquí y cópialo allá, o falla
   paridad-lista-espera.test.ts. No hay selectores de elemento sueltos
   (a, img, body…): en la app los pone el preflight de Tailwind y en la
   lista de espera, base.css.
   ========================================================================== */

/* ===== Raíz ===== */
.raiz{
  --lp-display:var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  --lp-sans:var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --lp-mono:var(--font-ibm-plex-mono), ui-monospace, "Cascadia Code", monospace;
  --lp-suave:cubic-bezier(.2,.7,.2,1);
  background:var(--color-surface);color:var(--color-steel-blue);font-family:var(--lp-sans);line-height:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.raiz :focus-visible{outline:3px solid var(--color-light-blue);outline-offset:3px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.contenedor{width:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.oculta{opacity:0}

/* ===== Logo (igual a PanelRail: M blanca a 28 px + MUTA bold, tracking .14em) ===== */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marca .m{height:28px;width:auto;flex:none;color:var(--color-surface)}
.marca span{font-family:var(--font-titular);font-weight:700;font-size:16px;letter-spacing:.14em;color:var(--color-surface)}

/* ===== Barra superior ===== */
.barra{background:var(--color-midnight-800);color:var(--color-surface);position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.links{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--color-surface)}
.links a{text-decoration:none;opacity:.78;transition:opacity .2s}
.links a:hover{opacity:1}
.acciones{display:flex;align-items:center;gap:8px}
.btn-nav{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;transition:background .25s var(--lp-suave),color .25s,border-color .25s}
.barra .btn-nav.texto{color:var(--color-surface)}
.barra .btn-nav.texto:hover{background:rgba(255,255,255,.08)}
.barra .btn-nav.solido{background:var(--color-surface);color:var(--color-midnight-800)}
.barra .btn-nav.solido:hover{background:var(--color-champagne-light)}

/* ===== Inicio ===== */
.inicio{background:var(--color-surface);color:var(--color-steel-blue)}
.inicio-rejilla{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(28px,5vw,64px) clamp(56px,7vw,96px)}
.inicio-rejilla h1{margin:0;font-family:var(--lp-display);font-weight:600;font-size:clamp(42px,4.4vw,64px);line-height:1.02;letter-spacing:-.04em;color:var(--color-midnight-800);text-wrap:balance}
.inicio-rejilla .bajada{margin:22px 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--color-steel-blue);max-width:30em}
.lugar{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--color-light-blue);margin-bottom:22px}
.lugar svg{width:16px;height:16px}

/* Entradas: filas grandes, no píldoras */
.entradas{display:grid;gap:12px;margin-top:34px;max-width:560px}
.entrada{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:18px;border-radius:22px;text-decoration:none;border:1px solid var(--color-landing-linea);background:var(--color-surface);
  transition:background .3s var(--lp-suave),border-color .3s var(--lp-suave),transform .2s var(--lp-suave)}
.entrada .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--color-background);color:var(--color-steel-blue);transition:background .3s,color .3s}
.entrada .ico svg{width:24px;height:24px}
.entrada .t{font-family:var(--lp-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--color-midnight-800);display:block}
.entrada .s{display:block;margin-top:3px;font-size:14px;color:var(--color-light-blue)}
.entrada .flecha{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--color-landing-linea-fuerte);color:var(--color-steel-blue);transition:background .3s var(--lp-suave),color .3s,border-color .3s,transform .3s var(--lp-suave)}
.entrada .flecha svg{width:18px;height:18px;transition:transform .3s var(--lp-suave)}
.entrada:hover{border-color:var(--color-steel-blue)}
.entrada:hover .flecha{background:var(--color-steel-blue);border-color:var(--color-steel-blue);color:var(--color-surface)}
.entrada:hover .flecha svg{transform:translateX(2px)}
.entrada:active{transform:scale(.99)}
.entrada.principal{background:var(--color-midnight-800);border-color:var(--color-midnight-800)}
.entrada.principal .t{color:var(--color-surface)}
.entrada.principal .s{color:rgba(255,255,255,.72)}
.entrada.principal .ico{background:rgba(255,255,255,.1);color:var(--color-surface)}
.entrada.principal .flecha{border-color:rgba(255,255,255,.3);color:var(--color-surface)}
.entrada.principal:hover{background:var(--color-steel-blue);border-color:var(--color-steel-blue)}
.entrada.principal:hover .flecha{background:var(--color-surface);color:var(--color-midnight-800);border-color:var(--color-surface)}
.miniaturas{display:flex;flex:none;width:52px;height:52px;position:relative}
.miniaturas img{position:absolute;top:8px;width:36px;height:36px;border-radius:11px;object-fit:cover;border:2px solid var(--color-surface);transition:transform .35s var(--lp-suave)}
.miniaturas img:nth-child(1){left:0;transform:rotate(-6deg)}
.miniaturas img:nth-child(2){left:8px;z-index:2}
.miniaturas img:nth-child(3){left:16px;transform:rotate(6deg);z-index:3}
.entrada:hover .miniaturas img:nth-child(1){transform:translateX(-6px) rotate(-10deg)}
.entrada:hover .miniaturas img:nth-child(3){transform:translateX(6px) rotate(10deg)}
.garantia{margin:16px 0 0;font-size:14px;color:var(--color-light-blue);display:flex;gap:8px;align-items:center}
.garantia svg{width:16px;height:16px;flex:none}

/* Escenario de producto */
.escena-con-pie{min-width:0}
.escenario{position:relative;border-radius:36px;background:linear-gradient(160deg,var(--color-landing-escenario-desde) 0%,var(--color-landing-escenario-hasta) 100%);min-height:600px;display:grid;place-items:center;padding:44px 24px;overflow:hidden}
.escenario .telefono{--w:300px;position:relative;z-index:2}

/* Teléfono (marco limpio, pantalla real) */
.telefono{position:relative;width:var(--w,290px);aspect-ratio:390/790;border-radius:calc(var(--w,290px)*.16);background:var(--color-midnight-900);padding:calc(var(--w,290px)*.033);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(11,19,34,.55)}
.telefono .pantalla{width:100%;height:100%;border-radius:calc(var(--w,290px)*.13);overflow:hidden;background:var(--color-background)}
.telefono .pantalla img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Video real de la app (2026-10-20). Debajo, el primer cuadro como <img>
   perezosa (con el texto alternativo): no compite con la carga inicial como
   lo haría el atributo `poster`. Encima, el <video> decorativo, transparente
   hasta su primer cuadro, que es esa misma imagen. Sin eventos de puntero: el
   toque y el gesto de scroll pasan a la página, nunca al video. */
.telefono .pantalla .video{position:relative;display:block;width:100%;height:100%;pointer-events:none}
.telefono .pantalla .video img{position:absolute;inset:0}
.telefono .pantalla video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.telefono .pantalla video::-webkit-media-controls,
.telefono .pantalla video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.telefono .pantalla.doble{position:relative}
.telefono .pantalla.doble img,.telefono .pantalla.doble .video{position:absolute;inset:0}

/* Tarjeta de ejemplo (espejo de PublicacionCard) */
.pub{background:var(--color-surface);border-radius:20px;overflow:hidden;border:1px solid var(--color-landing-linea);width:var(--w,300px);text-decoration:none;color:var(--color-steel-blue);display:block}
.pub .foto{position:relative;aspect-ratio:4/3;overflow:hidden}
.pub .foto img{width:100%;height:100%;object-fit:cover}
.pub .pildora{position:absolute;top:12px;left:12px;display:inline-flex;white-space:nowrap;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.pub .pildora.promesa{background:var(--color-steel-blue);color:var(--color-surface)}
.pub .pildora.arriendo{background:var(--color-champagne);color:var(--color-midnight-800)}
.pub .pildora svg{width:12px;height:12px}
.pub .cuerpo{padding:16px 18px 18px;display:grid;gap:6px}
.pub .titulo{margin:0;font-family:var(--lp-display);font-weight:600;font-size:17px;line-height:1.25;color:var(--color-steel-blue);text-wrap:balance}
.pub .precio{font-family:var(--lp-display);font-weight:700;font-size:21px;color:var(--color-steel-blue);letter-spacing:-.01em}
.pub .precio small{font-family:var(--lp-sans);font-weight:500;font-size:13px;color:var(--color-light-blue)}
.pub .zona{font-size:13.5px;color:var(--color-light-blue)}
.pub .rasgos{display:flex;gap:12px;font-size:13px;color:var(--color-steel-blue);white-space:nowrap}
.pub .rasgos span{display:inline-flex;gap:5px;align-items:center}
.pub .rasgos svg{width:15px;height:15px;color:var(--color-light-blue)}
.escenario .flotante-pub{position:absolute;left:clamp(8px,3vw,36px);bottom:40px;z-index:3;--w:262px;box-shadow:0 30px 60px -28px rgba(15,26,48,.45)}
.escenario .flotante-pub .cuerpo{padding:12px 14px 14px;gap:4px}
.escenario .flotante-pub .titulo{font-size:14px}
.escenario .flotante-pub .precio{font-size:17px}
.chip-hoja{position:absolute;right:clamp(8px,3vw,36px);top:64px;z-index:3;background:var(--color-surface);border-radius:18px;padding:14px 16px;width:228px;box-shadow:0 30px 60px -28px rgba(15,26,48,.45);border:1px solid var(--color-landing-linea)}
.chip-hoja .rot{font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-light-blue)}
.chip-hoja .num{font-family:var(--lp-display);font-weight:600;font-size:20px;color:var(--color-midnight-800);margin-top:6px}
.chip-hoja .linea{font-size:12.5px;color:var(--color-steel-blue);margin-top:10px;display:flex;gap:6px;align-items:center}
.chip-hoja .linea svg{width:14px;height:14px;color:var(--color-steel-blue)}

/* ===== Herramienta ("Antes de decidir") ===== */
.herramienta{background:var(--color-background);padding-block:clamp(64px,8vw,104px);scroll-margin-top:72px}
.cab-seccion{max-width:720px}
.cab-seccion .rol{font-family:var(--lp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-light-blue)}
.herramienta .cab-seccion .rol{color:var(--color-steel-blue)}
.cab-seccion h2{margin:10px 0 0;font-family:var(--lp-display);font-weight:600;font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.03em;color:var(--color-midnight-800);text-wrap:balance}
.cab-seccion p{margin:14px 0 0;font-size:18px;line-height:1.55;max-width:34em}
.mesa{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;margin-top:40px;align-items:stretch}
.panel{background:var(--color-surface);border-radius:32px;padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:22px;min-width:0}
.panel.panel-centrado{justify-content:center}
.segmento{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--color-background);position:relative}
.segmento .marcador{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--color-midnight-800);transition:transform .4s var(--lp-suave)}
.segmento[data-activo="entrar"] .marcador{transform:translateX(100%)}
.segmento button{position:relative;z-index:1;border:0;background:transparent;height:52px;border-radius:999px;font-weight:600;font-size:15.5px;cursor:pointer;color:var(--color-steel-blue);transition:color .3s}
.segmento button[aria-selected="true"]{color:var(--color-surface)}
.vista{display:grid;gap:20px}
.etiq{font-family:var(--lp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-light-blue);display:block;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--color-landing-linea-fuerte);background:var(--color-surface);border-radius:999px;height:40px;padding:0 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--color-steel-blue);transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--color-steel-blue)}
.chip[aria-pressed="true"]{background:var(--color-steel-blue);border-color:var(--color-steel-blue);color:var(--color-surface)}

/* Calculadora */
.calc2{display:grid;gap:22px}
.monto-fila{display:flex;align-items:center;gap:14px;margin-top:4px}
.monto-fila .valor{flex:1;text-align:center;font-family:var(--lp-display);font-weight:600;font-size:clamp(28px,2.6vw,36px);color:var(--color-midnight-800);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.paso{width:48px;height:48px;border-radius:50%;border:1px solid var(--color-landing-linea-fuerte);background:var(--color-surface);display:grid;place-items:center;cursor:pointer;color:var(--color-steel-blue);flex:none;transition:background .2s,color .2s,border-color .2s,transform .15s}
.paso svg{width:20px;height:20px}
.paso:hover{background:var(--color-steel-blue);border-color:var(--color-steel-blue);color:var(--color-surface)}
.paso:active{transform:scale(.95)}
.rango{width:100%;accent-color:var(--color-steel-blue);margin-top:10px}
.comparar{display:grid;gap:12px}
.opcion{background:var(--color-landing-arena-clara);border-radius:20px;padding:16px 18px;display:grid;gap:10px}
.op-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.op-cab span{font-size:14.5px;color:var(--color-steel-blue);font-weight:500}
.op-cab b{font-family:var(--lp-display);font-weight:700;font-size:clamp(24px,2.2vw,30px);color:var(--color-midnight-800);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.barra-c{height:10px;border-radius:99px;background:rgba(43,63,92,.1);overflow:hidden}
.barra-c i{display:block;height:100%;width:100%;border-radius:99px;background:var(--color-midnight-800)}
.desglose{font-size:13px;color:var(--color-light-blue);line-height:1.45}
.nota-legal{margin:0;font-size:12px;line-height:1.5;color:var(--color-light-blue)}
.boton-ancho{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 10px 0 26px;border-radius:999px;background:var(--color-midnight-800);color:var(--color-surface);text-decoration:none;font-weight:600;font-size:17px;transition:background .3s var(--lp-suave),transform .2s var(--lp-suave)}
.boton-ancho .fl{width:46px;height:46px;border-radius:50%;background:var(--color-surface);color:var(--color-midnight-800);display:grid;place-items:center;transition:transform .35s var(--lp-suave)}
.boton-ancho .fl svg{width:20px;height:20px}
.boton-ancho:hover{background:var(--color-steel-blue)}
.boton-ancho:hover .fl{transform:translateX(3px)}
.boton-ancho:active{transform:scale(.99)}

/* "Quiero entrar": lista con las publicaciones reales */
.lista-mini{display:grid;gap:8px;max-height:264px;overflow:auto;padding-right:2px}
.mini{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;border-radius:18px;text-decoration:none;color:var(--color-steel-blue);border:1px solid transparent;transition:background .2s,border-color .2s}
.mini:hover{background:var(--color-landing-arena-clara);border-color:var(--color-landing-linea)}
.mini img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.mini .sin-foto{width:64px;height:64px;border-radius:14px;background:var(--color-background)}
.mini .ti{font-family:var(--lp-display);font-weight:600;font-size:15px;color:var(--color-midnight-800);line-height:1.25}
.mini .zo{font-size:13px;color:var(--color-light-blue);margin-top:2px}
.mini .pr{font-family:var(--lp-display);font-weight:600;font-size:15px;color:var(--color-midnight-800);text-align:right;white-space:nowrap}
.mini .pr small{display:block;font-family:var(--lp-mono);font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--color-light-blue);text-transform:uppercase}
.vacio{margin:0;font-size:14px;color:var(--color-light-blue);padding:12px 4px}

/* Celular de la herramienta */
.escaparate{background:linear-gradient(165deg,var(--color-steel-blue) 0%,var(--color-landing-acero-hondo) 100%);border-radius:32px;display:grid;place-items:center;padding:36px 20px 64px;position:relative;overflow:hidden;min-height:560px}
.escaparate .telefono{--w:270px}
.escaparate .telefono img,.escaparate .telefono .video{transition:opacity .45s var(--lp-suave)}
.escaparate .leyenda{position:absolute;left:20px;right:20px;bottom:18px;text-align:center;font-size:13px;color:rgba(255,255,255,.72)}

/* ===== Confianza ===== */
.confianza{background:var(--color-surface);padding-block:clamp(64px,8vw,104px)}
.conf-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:40px}
.conf{background:var(--color-landing-tinte);border-radius:28px;padding:clamp(22px,2.6vw,32px);display:grid;gap:10px;align-content:start}
.conf-ia{grid-row:span 3;background:var(--color-midnight-800);color:var(--color-surface)}
.conf .ico{width:48px;height:48px;border-radius:14px;background:var(--color-surface);color:var(--color-steel-blue);display:grid;place-items:center}
.conf .ico svg{width:24px;height:24px}
.conf-ia .ico{background:rgba(255,255,255,.1);color:var(--color-surface)}
.conf h3{margin:4px 0 0;font-family:var(--lp-display);font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.015em;color:var(--color-midnight-800)}
.conf-ia h3{color:var(--color-surface);font-size:clamp(24px,2.3vw,30px)}
.conf p{margin:0;font-size:15.5px;line-height:1.6;color:var(--color-steel-blue)}
.conf-ia > p{color:rgba(255,255,255,.78)}
.mini-hoja{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.mini-hoja li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 14px}
.mini-hoja .ck{margin-top:1px;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center}
.mini-hoja .hecho .ck{background:var(--color-surface);border-color:var(--color-surface);color:var(--color-midnight-800)}
.mini-hoja .ck svg{width:15px;height:15px}
.mini-hoja .tx{font-size:14.5px;line-height:1.35;color:var(--color-surface);display:grid;gap:3px}
.mini-hoja .tx small{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.4}
.mini-hoja .tag{font-family:var(--lp-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-champagne);white-space:nowrap}
.mini-hoja .tag.tuyo{color:rgba(255,255,255,.6)}
.conf-ia .mini-nota{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:4px}
.conf:not(.conf-ia){grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:6px;padding:22px 24px}
.conf:not(.conf-ia) .ico{grid-row:span 2;width:44px;height:44px}
.conf:not(.conf-ia) h3{margin:0;font-size:19px;align-self:end}
.conf:not(.conf-ia) p{font-size:15px;line-height:1.55}

/* ===== Las dos partes (MacBooks) ===== */
.dos-partes{background:var(--color-background);padding-block:clamp(64px,8vw,112px);scroll-margin-top:72px}
.dos-partes h2{margin:0;font-family:var(--lp-display);font-weight:600;font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;color:var(--color-midnight-800);max-width:16em;text-wrap:balance}
.dos-partes .bajada{margin:16px 0 0;font-size:18px;line-height:1.55;max-width:36em}
.lados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
.lado{background:var(--color-surface);border-radius:32px;padding:32px 32px 28px;display:grid;gap:8px;overflow:hidden;align-content:start}
.lado .rol{font-family:var(--lp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-light-blue)}
.lado h3{margin:0;font-family:var(--lp-display);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--color-midnight-800)}
.lado p{margin:0;font-size:16px;line-height:1.55;max-width:30em}
.mac{width:100%;max-width:640px;margin:28px auto 0;position:relative}
.mac .tapa{position:relative;background:var(--color-dispositivo-marco);border-radius:14px 14px 4px 4px;padding:1.9% 1.9% 2.4%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mac .tapa::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:13%;height:2.6%;background:var(--color-dispositivo-marco);border-radius:0 0 6px 6px;z-index:2}
.mac .pantalla{position:relative;aspect-ratio:1024/665;overflow:hidden;border-radius:3px;background:var(--color-background);cursor:pointer}
.mac .pantalla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity .6s var(--lp-suave)}
.mac .base{position:relative;height:clamp(8px,1.6vw,14px);margin:0 -6.5%;background:linear-gradient(180deg,var(--color-dispositivo-base-claro) 0%,var(--color-dispositivo-base-medio) 55%,var(--color-dispositivo-base-oscuro) 100%);border-radius:0 0 14px 14px/0 0 10px 10px}
.mac .base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:15%;height:45%;background:var(--color-dispositivo-bisagra);border-radius:0 0 8px 8px}
.mac-sombra{height:16px;margin:0 -2%;background:radial-gradient(50% 100% at 50% 0,rgba(15,26,48,.22),transparent 70%)}
.cambio{display:flex;gap:6px;justify-content:center;margin-top:14px}
.cambio button{border:1px solid var(--color-landing-linea-fuerte);background:var(--color-surface);border-radius:999px;height:34px;padding:0 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--color-steel-blue);transition:background .25s,color .25s,border-color .25s}
.cambio button[aria-pressed="true"]{background:var(--color-steel-blue);border-color:var(--color-steel-blue);color:var(--color-surface)}

/* ===== Franja final ===== */
.franja{background:var(--color-steel-blue);color:var(--color-surface);padding-block:clamp(64px,8vw,104px);scroll-margin-top:72px}
.franja h2{margin:0;font-family:var(--lp-display);font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.035em;max-width:14em;text-wrap:balance}
.franja .entradas{max-width:880px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
.franja .entrada{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.franja .entrada .t{color:var(--color-surface)}
.franja .entrada .s{color:rgba(255,255,255,.72)}
.franja .entrada .ico{background:rgba(255,255,255,.1);color:var(--color-surface)}
.franja .entrada .flecha{border-color:rgba(255,255,255,.3);color:var(--color-surface)}
.franja .entrada:hover{background:rgba(255,255,255,.1);border-color:var(--color-surface)}
.franja .entrada:hover .flecha{background:var(--color-surface);color:var(--color-steel-blue);border-color:var(--color-surface)}
.franja .entrada.principal{background:var(--color-surface);border-color:var(--color-surface)}
.franja .entrada.principal .t{color:var(--color-midnight-800)}
.franja .entrada.principal .s{color:var(--color-light-blue)}
.franja .entrada.principal .ico{background:var(--color-background);color:var(--color-steel-blue)}
.franja .entrada.principal .flecha{border-color:var(--color-landing-linea-fuerte);color:var(--color-steel-blue)}
.franja .entrada.principal:hover{background:var(--color-champagne-light);border-color:var(--color-champagne-light)}
.franja .entrada.principal:hover .flecha{background:var(--color-midnight-800);color:var(--color-surface);border-color:var(--color-midnight-800)}
.franja .miniaturas img{border-color:var(--color-steel-blue)}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);max-width:880px}
.datos b{display:block;font-family:var(--lp-display);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}
.datos span{font-size:14.5px;color:rgba(255,255,255,.74);line-height:1.45}

/* ===== Pie ===== */
.pie-pagina{background:var(--color-midnight-800);color:rgba(255,255,255,.72);padding-block:40px;font-size:14px}
.pie-pagina .fila{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.pie-pagina nav{display:flex;flex-wrap:wrap;gap:20px}
.pie-pagina a{text-decoration:none}
.pie-pagina a:hover{color:var(--color-surface)}
.pie-pagina .enlace-boton{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.pie-pagina .enlace-boton:hover{color:var(--color-surface)}
.pie-pagina .legal{margin:24px 0 0;font-family:var(--lp-mono);font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.56);max-width:70em}
.pie-pagina .ig{display:inline-flex;align-items:center;gap:8px}
.pie-pagina .ig svg{width:18px;height:18px}

/* ===== Solo lista de espera: formulario, etiqueta "Muy pronto" y aviso de cookies ===== */
.formulario{margin-top:30px;max-width:560px;background:var(--color-surface);border:1px solid var(--color-landing-linea);border-radius:24px;padding:22px;display:grid;gap:12px}
.formulario label{font-family:var(--lp-display);font-weight:600;font-size:18px;color:var(--color-midnight-800);letter-spacing:-.01em}
.formulario .fila-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.formulario input{height:56px;border-radius:16px;border:1px solid rgba(43,63,92,.18);background:var(--color-surface);padding:0 18px;font:inherit;font-size:16px;color:var(--color-midnight-800);min-width:0;transition:border-color .2s,box-shadow .2s}
.formulario input::placeholder{color:var(--color-light-blue)}
.formulario input:focus{outline:none;border-color:var(--color-light-blue);box-shadow:0 0 0 4px rgba(91,113,145,.14)}
.formulario button{height:56px;border:0;border-radius:16px;padding:0 24px;background:var(--color-midnight-800);color:var(--color-surface);font-weight:600;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .25s var(--lp-suave),transform .2s var(--lp-suave)}
.formulario button svg{width:18px;height:18px;transition:transform .3s var(--lp-suave)}
.formulario button:hover{background:var(--color-steel-blue)}
.formulario button:hover svg{transform:translateX(3px)}
.formulario button:active{transform:scale(.98)}
.formulario button[disabled]{opacity:.7;cursor:progress}
.formulario .nota{margin:0;font-size:13.5px;color:var(--color-light-blue);display:flex;gap:8px;align-items:center}
.formulario .nota svg{width:16px;height:16px;flex:none}
.formulario .autorizacion{margin:0;font-size:12.5px;line-height:1.5;color:var(--color-light-blue)}
.formulario .autorizacion a{text-decoration:underline;text-underline-offset:2px}
.formulario .error{margin:0;font-size:14px;color:var(--color-landing-error)}
.formulario .listo{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--color-midnight-800);font-weight:500}
.formulario .listo span.ok{width:40px;height:40px;border-radius:50%;background:var(--color-steel-blue);color:var(--color-surface);display:grid;place-items:center;flex:none}
.formulario .listo svg{width:20px;height:20px}
.franja .formulario{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);margin-top:32px}
.franja .formulario label{color:var(--color-surface)}
.franja .formulario input{border-color:rgba(255,255,255,.25)}
.franja .formulario button{background:var(--color-surface);color:var(--color-midnight-800)}
.franja .formulario button:hover{background:var(--color-champagne-light)}
.franja .formulario .nota,.franja .formulario .autorizacion{color:rgba(255,255,255,.72)}
.franja .formulario .error{color:var(--color-landing-error-sobre-oscuro)}
.franja .formulario .listo{color:var(--color-surface)}
.franja .formulario .listo span.ok{background:var(--color-surface);color:var(--color-steel-blue)}
.pronto{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;background:rgba(43,63,92,.08);color:var(--color-steel-blue);font-size:13px;font-weight:600;margin-bottom:20px}
.pronto i{width:8px;height:8px;border-radius:50%;background:var(--color-light-blue);box-shadow:0 0 0 0 rgba(91,113,145,.5);animation:latido 2.4s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(91,113,145,.45)}70%{box-shadow:0 0 0 8px rgba(91,113,145,0)}100%{box-shadow:0 0 0 0 rgba(91,113,145,0)}}
.vista-previa{margin:12px 0 0;text-align:center;font-size:13px;color:var(--color-light-blue)}
.aviso-cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.aviso-cookies .caja{pointer-events:auto;width:100%;max-width:672px;background:var(--color-surface);border:1px solid var(--color-hairline);border-radius:16px;padding:20px;box-shadow:0 24px 60px -24px rgba(11,19,34,.4)}
.aviso-cookies .aviso-titulo{margin:0;font-family:var(--lp-display);font-size:15px;font-weight:600;color:var(--color-steel-blue)}
.aviso-cookies .aviso-texto{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--color-steel-blue)}
.aviso-cookies .aviso-texto a{text-decoration:underline;text-underline-offset:2px}
.aviso-cookies .aviso-acciones{margin-top:16px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.aviso-cookies button{height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--color-landing-linea-fuerte);background:var(--color-surface);color:var(--color-steel-blue)}
.aviso-cookies button.aceptar{background:var(--color-steel-blue);border-color:var(--color-steel-blue);color:var(--color-surface)}

/* ===== Responsive ===== */
@media (max-width:980px){
  .links{display:none}
  .inicio-rejilla{grid-template-columns:1fr}
  .escenario{min-height:540px}
  .lados{grid-template-columns:1fr}
  .mesa{grid-template-columns:1fr}
  .franja .entradas{grid-template-columns:1fr}
  .conf-grid{grid-template-columns:1fr}
  .conf-ia{grid-row:auto}
}
@media (max-width:560px){
  .nav{height:64px}
  .nav .btn-nav.texto{display:none}
  .barra .btn-nav.solido{height:36px;padding:0 14px;font-size:13px}
  .entrada{padding:14px;gap:12px;border-radius:20px}
  .entrada .ico,.miniaturas{width:46px;height:46px}
  .entrada .t{font-size:17px}
  .entrada .flecha{width:38px;height:38px}
  .escenario{border-radius:28px;min-height:520px;padding:28px 12px}
  .escenario .telefono{--w:240px}
  .escenario .flotante-pub{--w:170px;bottom:22px;left:10px}
  .escenario .flotante-pub .rasgos{display:none}
  .escenario .flotante-pub .largo{display:none}
  .escenario .flotante-pub .pildora{font-size:9px;letter-spacing:.06em;padding:5px 8px;top:8px;left:8px}
  .chip-hoja{width:170px;top:28px;right:10px;padding:11px 12px}
  .chip-hoja .linea{display:none}
  .lado{padding:24px 20px 28px;border-radius:26px}
  .panel{border-radius:26px}
  .escaparate{min-height:500px;border-radius:26px}
  .escaparate .telefono{--w:230px}
  .boton-ancho{font-size:16px;height:60px}
  .datos{grid-template-columns:1fr;gap:16px}
  .mini-hoja li{grid-template-columns:auto minmax(0,1fr)}
  .mini-hoja .tag{grid-column:2}
  .formulario .fila-form{grid-template-columns:1fr}
  .formulario button{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .raiz *{transition:none!important;animation:none!important}
}