/* La portada de CEEntella: una calle de verdad y un héroe de tebeo.
   Foto fotográfica de noche + trazo grueso de tinta, sombras duras y letra enorme. */

@font-face { font-family: "Sora"; src: url("/estatico/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/estatico/plex.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --tinta: #10261a;
  --tinta-2: #1b3727;
  --claro: #eef3ec;
  --claro-2: #b3c5b8;
  --papel: #f6f8f4;
  --blanco: #ffffff;
  --verde: #157a3e;
  --verde-o: #0b5e2c;
  --amarillo: #ffd93b;
  --burdeos: #7a2e52;
  --morado: #4c1d95;
  --trazo: 4px;
  --titulos: "Sora", system-ui, sans-serif;
  --texto: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tinta); color: var(--blanco); font: 400 18px/1.5 var(--texto); overflow-x: clip; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.saltar { position: fixed; left: 16px; top: -60px; z-index: 60; background: var(--amarillo); color: var(--tinta); padding: 10px 14px; font-weight: 600; }
.saltar:focus { top: 12px; }

.antetitulo { font: 600 14px/1.2 var(--texto); letter-spacing: 1.6px; text-transform: uppercase; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border: var(--trazo) solid var(--blanco); border-radius: 14px;
  background: var(--verde); color: var(--blanco);
  font: 700 19px/1 var(--titulos); letter-spacing: -0.3px; text-decoration: none; cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.boton:hover { background: var(--verde-o); transform: translate(-2px, -2px); }
.boton:active { transform: translate(2px, 2px); }

/* --- cabecera --- */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 3vw, 40px); pointer-events: none; }
.cabecera > * { pointer-events: auto; }
.marca { display: block; width: clamp(160px, 16vw, 230px); padding: 8px 14px; border-radius: 999px; background: rgba(16, 38, 26, 0.72); }
.marca svg { display: block; width: 100%; height: auto; }
.cabecera nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); background: rgba(16, 38, 26, 0.72); padding: 8px 8px 8px 18px; border-radius: 999px; }
.cabecera nav a { font: 600 15px/1 var(--texto); text-decoration: none; color: var(--claro); }
.cabecera nav a:hover { color: var(--amarillo); }
.cabecera nav a.entrar { background: var(--blanco); color: var(--tinta); padding: 10px 16px; border-radius: 999px; }
.cabecera nav a.entrar:hover { background: var(--amarillo); color: var(--tinta); }

/* --- Centi: va por encima de todo y no se come los clics --- */
#centi { position: fixed; left: 0; top: 0; z-index: 30; width: calc(var(--alto-centi, 240px) * 0.774); height: var(--alto-centi, 240px); pointer-events: none; will-change: transform; display: none; }
#centi svg { display: block; width: 100%; height: 100%; overflow: visible; }
#estela { position: fixed; inset: 0; z-index: 29; width: 100vw; height: 100vh; pointer-events: none; display: none; }
#bocadillo {
  position: fixed; left: 0; top: 0; z-index: 31; max-width: min(340px, 72vw);
  background: var(--blanco); color: var(--tinta);
  border: var(--trazo) solid var(--tinta); border-radius: 18px; box-shadow: 7px 7px 0 var(--amarillo);
  padding: 12px 16px; font: 500 17px/1.35 var(--texto);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
#bocadillo.ver { opacity: 1; }
.con-js #centi, .con-js #estela { display: block; }
.sin-centi #centi, .sin-centi #estela, .sin-centi #bocadillo { display: none; }

/* --- la calle --- */
.calle { position: relative; height: 340vh; background: var(--tinta); }
.escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.escena { position: absolute; inset: 0; will-change: transform; }
.escena img, #luz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#etiquetas { position: absolute; inset: 0; pointer-events: none; }
.etiqueta {
  position: absolute; width: clamp(46px, 5vw, 76px); height: clamp(32px, 3.4vw, 50px);
  display: flex; align-items: center; justify-content: center; padding-right: 14px;
  font: 800 clamp(20px, 2.3vw, 34px)/1 var(--titulos);
  clip-path: polygon(0 0, 74% 0, 100% 50%, 74% 100%, 0 100%);
  transform: translate(-50%, -50%) scale(0) rotate(-14deg);
  transition: transform 0.38s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.etiqueta.ver { transform: translate(-50%, -50%) scale(1) rotate(-4deg); }

.escenario::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16, 38, 26, 0.82), rgba(16, 38, 26, 0.5) 34%, rgba(16, 38, 26, 0) 62%); transition: opacity 0.2s; opacity: var(--velo, 1); }
.portada-texto { position: absolute; z-index: 2; left: clamp(16px, 4vw, 64px); top: clamp(84px, 12vh, 130px); max-width: 66vw; will-change: opacity, transform; }
.marcador, .baja { z-index: 2; }
.portada-texto .antetitulo { color: var(--amarillo); margin-bottom: 14px; }
h1 { font: 800 clamp(40px, min(7.2vw, 13vh), 128px)/0.96 var(--titulos); letter-spacing: -0.045em; }
h1 span, h1 em { display: block; font-style: normal; }
h1 em { color: var(--amarillo); }
h1 em + em { color: var(--amarillo); }
.entradilla { margin-top: 22px; max-width: 30em; font-size: clamp(17px, 1.5vw, 21px); color: var(--claro); text-shadow: 0 1px 12px rgba(16, 38, 26, 0.9); }
.llamada { margin-top: 24px; }

.marcador { position: absolute; left: clamp(16px, 4vw, 64px); bottom: clamp(16px, 4vh, 36px); font: 600 15px/1 var(--texto); color: var(--claro); background: rgba(16, 38, 26, 0.78); padding: 10px 14px; border-radius: 999px; }
.marcador b { color: var(--amarillo); font: 800 18px/1 var(--titulos); }
.baja { position: absolute; right: clamp(16px, 4vw, 64px); bottom: clamp(16px, 4vh, 36px); font: 700 15px/1 var(--titulos); color: var(--claro); animation: baja 1.4s ease-in-out infinite; }
.baja::after { content: " ↓"; }
@keyframes baja { 50% { transform: translateY(8px); } }

.interior { position: absolute; inset: 0; background: url("/estatico/interior.webp") center / cover; opacity: 0; }

/* --- los pasos: la casa va de lado --- */
.pasos { position: relative; height: 480vh; background: var(--tinta); }
.pasos-marco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pasos-pista { display: flex; height: 100%; width: 500vw; will-change: transform; }
.paso { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 70px); padding: 90px clamp(24px, 6vw, 110px) 150px; }
.paso-inicio { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: url("/estatico/interior.webp") center / cover; }
.paso-inicio::before { content: ""; position: absolute; inset: 0; background: rgba(16, 38, 26, 0.52); }
.paso-inicio > * { position: relative; }
.paso-inicio .antetitulo { color: var(--amarillo); margin-bottom: 16px; }
.paso-inicio h2 { font: 800 clamp(44px, 8vw, 128px)/0.98 var(--titulos); letter-spacing: -0.045em; }
.sigue { margin-top: 22px; font-size: 19px; color: var(--claro); }
.paso-cifra { position: absolute; right: -2vw; bottom: -9vw; font: 800 clamp(280px, 46vw, 760px)/0.8 var(--titulos); letter-spacing: -0.06em; opacity: 0.14; pointer-events: none; }
.paso-texto { position: relative; }
.rol { display: inline-block; padding: 6px 12px; margin-bottom: 18px; border: 3px solid currentColor; border-radius: 999px; font: 700 15px/1 var(--titulos); }
.paso h3 { font: 800 clamp(34px, 5vw, 80px)/1 var(--titulos); letter-spacing: -0.04em; margin-bottom: 18px; }
.paso-texto p:last-child { max-width: 28em; font-size: clamp(18px, 1.5vw, 21px); }
.vineta { position: relative; border: 6px solid var(--tinta); border-radius: 6px; box-shadow: 14px 14px 0 var(--tinta); background: var(--tinta); overflow: hidden; }
.vineta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.inclinada-i { transform: rotate(-2.2deg); }
.inclinada-d { transform: rotate(2deg); }

.rol-propietario { background: #7a2e52; color: var(--blanco); }
.rol-tecnico { background: var(--verde); color: var(--blanco); }
.rol-centi { background: var(--amarillo); color: var(--tinta); }
.rol-ce3x { background: var(--morado); color: var(--blanco); }
.insignia { justify-self: center; width: clamp(180px, 24vw, 340px); aspect-ratio: 1; border: 6px solid var(--blanco); border-radius: 22%; display: flex; align-items: center; justify-content: center; font: 800 clamp(48px, 7vw, 100px)/1 var(--titulos); letter-spacing: -0.03em; }

/* --- la escala --- */
.letras { position: relative; min-height: 100vh; background: var(--papel); color: var(--tinta); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: clamp(20px, 4vw, 60px); padding: 120px clamp(24px, 6vw, 110px) 0; }
.letras-texto { align-self: center; padding-bottom: 60px; }
.letras .antetitulo { color: var(--verde); margin-bottom: 14px; }
.letras h2 { font: 800 clamp(40px, 6.4vw, 104px)/0.98 var(--titulos); letter-spacing: -0.045em; margin-bottom: 20px; }
.pista-letras { margin-top: 14px; font-size: 15px; color: #56665b; }
.escala { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: clamp(4px, 0.7vw, 10px); height: min(68vh, 640px); }
.barra { display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; border: var(--trazo) solid var(--tinta); border-bottom: 0; border-radius: 12px 12px 0 0; font: 800 clamp(26px, 4vw, 60px)/1 var(--titulos); transition: height 0.18s; }
.b-a { background: #00a651; color: #fff; height: 30%; }
.b-b { background: #4cb848; color: #fff; height: 40%; }
.b-c { background: #bfd730; height: 50%; }
.b-d { background: #fff200; height: 60%; }
.b-e { background: #fdb913; height: 70%; }
.b-f { background: #f37021; color: #fff; height: 80%; }
.b-g { background: #ed1c24; color: #fff; height: 90%; }

/* --- lo que no hace --- */
.nohace { background: var(--tinta); padding: clamp(90px, 14vh, 160px) clamp(24px, 6vw, 110px); }
.nohace .antetitulo { color: var(--amarillo); margin-bottom: 14px; }
.nohace h2 { font: 800 clamp(44px, 8vw, 128px)/0.98 var(--titulos); letter-spacing: -0.045em; margin-bottom: clamp(30px, 6vh, 60px); }
.tachado { list-style: none; max-width: min(1050px, calc(100% - 200px)); }
.tachado li { padding: 20px 0; border-top: 2px solid var(--tinta-2); font-size: clamp(18px, 1.6vw, 22px); color: var(--claro-2); }
.tachado s { display: block; font: 700 clamp(26px, 3.6vw, 52px)/1.1 var(--titulos); letter-spacing: -0.03em; color: var(--blanco); text-decoration: none; background: linear-gradient(var(--amarillo), var(--amarillo)) 0 56% / 0 6px no-repeat; transition: background-size 0.6s ease-out; width: fit-content; margin-bottom: 6px; }
.tachado li.visto s { background-size: 100% 6px; }

/* --- precios --- */
.precios { background: var(--amarillo); color: var(--tinta); padding: clamp(90px, 14vh, 150px) clamp(24px, 6vw, 110px); }
.precios h2 { font: 800 clamp(44px, 8vw, 128px)/0.98 var(--titulos); letter-spacing: -0.045em; }
.beta { margin: 16px 0 clamp(30px, 6vh, 56px); font-size: clamp(19px, 1.7vw, 24px); }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); align-items: stretch; }
.ticket { position: relative; background: var(--blanco); border: var(--trazo) solid var(--tinta); border-radius: 18px; box-shadow: 10px 10px 0 var(--tinta); padding: 26px; transition: transform 0.15s, box-shadow 0.15s; }
.ticket:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--tinta); }
.ticket h3 { font: 700 22px/1.2 var(--titulos); }
.cifra { font: 800 clamp(52px, 6vw, 92px)/1 var(--titulos); letter-spacing: -0.05em; margin-top: 10px; }
.por { font-weight: 600; margin-bottom: 14px; }
.destacado { background: var(--tinta); color: var(--blanco); }
.sello { position: absolute; top: -18px; right: 18px; transform: rotate(3deg); background: var(--verde); color: var(--blanco); border: 3px solid var(--tinta); border-radius: 8px; padding: 6px 10px; font: 700 14px/1 var(--titulos); }
.iva { margin-top: 28px; font-size: 15px; }

/* --- pide --- */
.pide { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(24px, 5vw, 80px); align-items: center; min-height: 100vh; padding: clamp(90px, 14vh, 150px) clamp(24px, 6vw, 110px); background: linear-gradient(90deg, rgba(16, 38, 26, 0.78), rgba(16, 38, 26, 0.3)), url("/estatico/calle-luz.webp") center / cover; }
.pide h2 { font: 800 clamp(44px, 7vw, 128px)/0.94 var(--titulos); letter-spacing: -0.05em; color: var(--amarillo); margin-bottom: 18px; }
.pide-texto p { max-width: 24em; font-size: clamp(19px, 1.7vw, 24px); }
.formulario, .gracias { background: var(--blanco); color: var(--tinta); border: var(--trazo) solid var(--tinta); border-radius: 18px; box-shadow: 12px 12px 0 var(--amarillo); padding: 26px; }
.formulario { display: flex; flex-direction: column; gap: 6px; }
.formulario label { font: 600 14px/1.3 var(--texto); margin-top: 8px; }
.formulario input:not([type="checkbox"]) { height: 48px; padding: 0 12px; border: 2px solid var(--tinta); border-radius: 10px; font: 400 17px var(--texto); color: var(--tinta); background: var(--blanco); width: 100%; }
.casilla { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 10px; font-weight: 400 !important; }
.casilla input { width: 20px; height: 20px; accent-color: var(--verde); flex: none; margin: 1px 0 0; }
.formulario .boton { border-color: var(--tinta); width: 100%; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { background: #fee4e2; color: #912018; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.gracias { font: 700 24px/1.25 var(--titulos); }

.pie { background: var(--tinta); color: var(--claro-2); padding: 32px clamp(24px, 6vw, 110px); font-size: 15px; }
.pie p + p { margin-top: 6px; }

/* --- móvil: sin pistas de lado, todo hacia abajo --- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .cabecera nav a:not(.entrar) { display: none; }
  .cabecera nav { padding: 0; background: none; }
  .calle { height: 260vh; }
  .portada-texto { max-width: none; right: 16px; }
  h1 { font-size: clamp(40px, 12.4vw, 72px); }
  .portada-texto { max-width: none; }
  .escenario::after { background: linear-gradient(180deg, rgba(16, 38, 26, 0.84), rgba(16, 38, 26, 0.5) 52%, rgba(16, 38, 26, 0) 74%); }
  .pasos { height: auto; }
  .pasos-marco { position: static; height: auto; overflow: visible; }
  .pasos-pista { display: block; width: auto; transform: none !important; }
  .paso { width: auto; height: auto; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 70px 16px 90px; }
  .paso-cifra { right: 0; bottom: -40px; font-size: 62vw; }
  .vineta { box-shadow: 8px 8px 0 var(--tinta); }
  .insignia { align-self: center; }
  .letras { grid-template-columns: minmax(0, 1fr); padding: 90px 16px 0; }
  .escala { height: 46vh; }
  .tickets { grid-template-columns: minmax(0, 1fr); }
  .tachado { max-width: none; }
  .pista-letras { display: none; }
  .formulario { margin-top: 70px; }
  .pide { grid-template-columns: minmax(0, 1fr); padding: 80px 16px; }
  .formulario, .gracias { box-shadow: 8px 8px 0 var(--amarillo); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .baja { animation: none; }
  .calle { height: 100vh; }
  .pasos { height: auto; }
  .pasos-marco { position: static; height: auto; overflow: visible; }
  .pasos-pista { display: block; width: auto; }
  .paso { width: auto; height: auto; min-height: 100vh; }
  .etiqueta, .tachado s, .ticket, .boton { transition: none; }
}