/* Base común de las tres propuestas: marca (papel, tinta, rojo APEX, Cine), tipografías alojadas,
   formularios, cabecera, ventana de emergencias y pie. El diseño de cada propuesta va en su página. */

:root{
  --tinta:#16161A; --papel:#F6F5F2; --blanco:#FFFFFF; --piedra:#6B6A66; --linea:#E2E0DA;
  --rojo:#C81010; --rojo-suave:#FBE8E8;
  --cine:#111113; --cine-2:#1C1C1F; --linea-cine:#2E2E33; --texto-cine:#F3F2EF; --gris-cine:#A6A5A0; --rojo-cine:#FF5A52;
  --tan26:.4877;                     /* escalón a 26°: avance horizontal = alto / tan(26°) */
  --spring:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --soft:linear(0, .06 2.2%, .24 5%, .7 11.4%, .93 16.3%, 1.03 20.9%, 1.06 25%, 1.04 30.5%, 1 40%, .995 50%, 1);
  --gut:clamp(16px,4vw,56px);
  --ancho:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
[hidden]{display:none!important}
body{background:var(--papel);color:var(--tinta);font:17px/1.55 "Golos Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
.etq{font:500 12px/1.4 "Geist Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--piedra)}
.punto{color:var(--rojo)}
.cine .punto,.en-cine .punto{color:var(--rojo-cine)}
.caja{width:min(100% - 2*var(--gut),var(--ancho));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Logo trazado: piezas animables */
.logo-apex .l-pex,.logo-apex .l-pierna,.logo-apex .l-vel{fill:currentColor}
.logo-apex .l-cuna{fill:url(#cunaGrad)}
.logo-apex .l-cons{fill:var(--rojo)}
.cine .logo-apex .l-cons,.en-cine .logo-apex .l-cons{fill:var(--rojo-cine)}

/* Botones: rectos, tinta o blanco. El rojo no es color de botón. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:2px;
  font:600 15px "Golos Text",sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .5s var(--spring),background-color .2s,border-color .2s}
.btn:active{transform:scale(.95);transition-duration:.1s}
.btn small{font:500 11px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.btn.tinta{background:var(--tinta);color:#fff}
.btn.tinta:hover{background:#000}
.btn.blanco{background:#fff;color:var(--tinta)}
.btn.borde{border-color:var(--linea);background:transparent}
.btn.borde:hover{border-color:var(--tinta)}
.btn.borde-cine{border-color:#4A4A50;color:var(--texto-cine);background:transparent}
.btn.borde-cine:hover{border-color:var(--texto-cine)}
.flecha{display:inline-block;transition:transform .5s var(--spring)}
a:hover>.flecha,button:hover>.flecha{transform:translateX(4px)}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:40;background:var(--cine);color:var(--texto-cine);border-bottom:1px solid var(--linea-cine)}
.cab .caja{display:flex;align-items:center;gap:22px;min-height:64px}
.cab .marca{margin-right:auto;display:flex;align-items:center}
.cab .marca svg{width:132px;height:auto}
.cab nav{display:none;gap:22px;font-size:15px}
.cab nav a{text-decoration:none;color:#D9D8D3;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.cab nav a:hover{color:#fff;border-color:#fff}
.cab .ver{display:none;min-height:40px;padding:8px 14px;font-size:14px}
.cab .emerg{font:600 14px "Golos Text";color:var(--rojo-cine);padding:10px 2px;white-space:nowrap}
.cab .emerg:hover{color:#fff}
.cab .abrir-menu{font:600 14px "Golos Text";padding:10px 4px;color:#fff}
@media (min-width:1100px){
  .cab nav{display:flex}
  .cab .ver{display:inline-flex}
  .cab .abrir-menu{display:none}
}

/* ---------- Hojas (menú móvil y emergencias) ---------- */
.hoja{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:flex-end;background:rgba(10,10,12,0);transition:background-color .35s}
.hoja.abierta{background:rgba(10,10,12,.55)}
.hoja .panel{width:min(440px,100%);max-height:100svh;overflow:auto;background:var(--blanco);color:var(--tinta);
  transform:translateY(-16px);opacity:0;transition:transform .55s var(--soft),opacity .25s}
.hoja.abierta .panel{transform:none;opacity:1}
.hoja.cerrando .panel{transition:transform .25s cubic-bezier(.5,0,.75,0),opacity .2s;transform:translateY(-10px);opacity:0}
.hoja .barra{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--linea)}
.hoja .barra .etq{color:var(--rojo)}
.hoja .cerrar{font:500 12px "Geist Mono";letter-spacing:.09em;text-transform:uppercase;padding:10px 0 10px 16px}
.hoja .bloque{padding:22px 20px;display:grid;gap:10px;border-bottom:1px solid var(--linea)}
.hoja .bloque h2{font-size:22px}
.hoja .bloque p{color:var(--piedra);font-size:15px}
.hoja .bloque .btn{justify-self:start;margin-top:6px}
.menu-movil{display:grid}
.menu-movil a{padding:16px 20px;border-bottom:1px solid var(--linea);text-decoration:none;font-weight:600;font-size:18px}
.menu-movil .btn{margin:18px 20px;justify-self:start}

/* ---------- Formularios ---------- */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600}
.form .opc{font-weight:400;color:var(--piedra)}
.form input[type=text],.form input[type=email]{width:100%;min-height:48px;border:1px solid var(--linea);border-radius:2px;padding:11px 13px;background:var(--blanco);font-size:16px;transition:border-color .2s}
.form input:focus{outline:2px solid var(--tinta);outline-offset:1px}
.form .fila2{display:grid;gap:14px}
@media (min-width:640px){.form .fila2{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:8px 13px;border:1px solid var(--linea);border-radius:2px;background:var(--blanco);font:500 14px "Golos Text";transition:transform .45s var(--spring),background-color .2s,color .2s,border-color .2s}
.chip:active{transform:scale(.93);transition-duration:.1s}
.chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.consent{display:grid!important;grid-template-columns:auto 1fr;gap:10px!important;font-weight:400!important;font-size:13.5px!important;color:var(--piedra);align-items:start}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--tinta)}
.aviso-priv{font-size:12.5px;color:var(--piedra)}
.aviso-priv a{color:inherit}
.msg{font-size:14.5px;padding:12px 14px;border-radius:2px}
.msg.falta{background:var(--rojo-suave);color:var(--rojo)}
.msg.ok{background:var(--tinta);color:#fff}
.bad{animation:sacude .4s}
@keyframes sacude{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Formularios sobre fondo Cine */
.en-cine .form input[type=text],.en-cine .form input[type=email]{background:var(--cine-2);border-color:var(--linea-cine);color:#fff}
.en-cine .form input:focus{outline-color:#fff}
.en-cine .form .opc,.en-cine .aviso-priv,.en-cine .consent{color:var(--gris-cine)}
.en-cine .chip{background:transparent;border-color:var(--linea-cine);color:var(--texto-cine)}
.en-cine .chip[aria-pressed=true]{background:var(--texto-cine);color:var(--tinta);border-color:var(--texto-cine)}
.en-cine .consent input{accent-color:#fff}
.en-cine .msg.ok{background:#fff;color:var(--tinta)}
.en-cine .msg.falta{background:#3A1615;color:#FFB4AF}

/* ---------- Pie ---------- */
.pie{background:var(--cine);color:#CFCEC9;font-size:15px;padding:56px 0 28px}
.pie .cols{display:grid;gap:32px;grid-template-columns:1fr 1fr}
.pie h3{font:500 12px "Geist Mono";letter-spacing:.09em;text-transform:uppercase;color:var(--gris-cine);margin-bottom:12px}
.pie ul{list-style:none;display:grid;gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .marca-pie{grid-column:1/-1;display:grid;gap:16px;max-width:380px}
.pie .marca-pie svg{width:170px}
.pie .pyme{display:inline-flex;gap:8px;color:#fff;font-weight:600}
.pie .legal{margin-top:44px;padding-top:18px;border-top:1px solid var(--linea-cine);font:500 12px/1.7 "Geist Mono";color:#8E8D88;display:flex;flex-wrap:wrap;gap:6px 22px}
@media (min-width:900px){.pie .cols{grid-template-columns:1.4fr repeat(4,1fr)}.pie .marca-pie{grid-column:auto}}

/* Aviso de páginas aún no construidas (solo la portada está en la demo) */
.toast{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));margin:auto;width:max-content;max-width:calc(100% - 32px);z-index:80;
  background:var(--tinta);color:#fff;padding:12px 16px;border-radius:2px;font-size:14px;transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .55s var(--soft),visibility 0s .55s}
.toast.ver{transform:none;visibility:visible;transition:transform .55s var(--soft)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}