/* Almagre Studios · la web que cuelga A.L.M.A. */
:root {
  --tinta: #24100A;
  --noche: #170A06;
  --rojo: #6E2416;
  --rojo-hondo: #3E140B;
  --ladrillo: #8A3120;
  --almagre: #A33A26;
  --crema: #F6E3C4;
  --suave: #EBD3B4;
  --tenue: #D9BC98;
  --oro: #E0A35C;
  --bombilla: #FFE7BA;
  --lona: #E9D9B8;
  --carton: #C9A273;
  --carton-tinta: #3B2414;
  --neon: #FF4F9A;
  --serif: 'Playfair Display', Georgia, serif;
  --pixel: 'Pixelify Sans', 'Courier New', monospace;
  --mano: 'Permanent Marker', 'Comic Sans MS', cursive;
  --texto: 'Josefin Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tinta); color: var(--crema); font-family: var(--texto); font-size: 17px; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--crema); text-decoration: none; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--bombilla); outline-offset: 3px; }
.ancho { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.pix { image-rendering: pixelated; }
.muro { background: var(--ladrillo) url(/img/ladrillo.svg); background-size: 160px 72px; }
.pizarra { background-color: var(--tinta); background-image: repeating-linear-gradient(0deg, rgba(255,231,186,.035) 0 2px, transparent 2px 46px); }
.oculto { display: none !important; }

/* tipografías y piezas */
.antetitulo { font-family: var(--pixel); font-size: 14px; letter-spacing: .18em; color: var(--bombilla); text-transform: uppercase; margin: 0; }
.titular { font-family: var(--serif); font-weight: 900; line-height: .95; margin: 0; }
.titular.grande { font-size: clamp(44px, 5.6vw, 72px); text-shadow: 0 4px 0 var(--rojo-hondo); }
.brilla { text-shadow: 0 0 26px rgba(255,180,110,.55), 0 5px 0 #8A2C1A; }
.neon { display: inline-block; font-family: var(--pixel); font-weight: 700; letter-spacing: .18em; color: #FFE1EE; text-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon), 0 0 30px var(--neon); padding: 3px 12px; border: 2px solid var(--neon); border-radius: 6px; box-shadow: 0 0 12px var(--neon), inset 0 0 10px var(--neon); }
.caja { display: inline-block; background: #000; border: 3px solid #fff; color: #fff; font-family: var(--pixel); padding: 2px 9px; }
.dialogo { display: inline-flex; align-items: center; gap: 14px; background: #000; border: 4px solid #fff; padding: 8px 18px 8px 8px; }
.dialogo img { width: 60px; height: 60px; }
.dialogo span { font-family: var(--pixel); font-size: 21px; color: #fff; }
.lona { display: inline-block; background: var(--lona); color: var(--almagre); font-family: var(--mano); font-weight: 400; line-height: 1; padding: 12px 22px 8px; transform: rotate(-2deg); margin: 0; }
.etiqueta-carton { background: var(--carton); color: var(--carton-tinta); font-family: var(--mano); box-shadow: 0 3px 6px rgba(30,8,4,.35); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 4px; font-family: var(--pixel); font-size: 16px; letter-spacing: .08em; cursor: pointer; border: 2px solid transparent; text-transform: uppercase; }
.boton.lleno { background: var(--crema); color: var(--rojo); box-shadow: 0 4px 0 #8A2C1A; font-weight: 700; }
.boton.lleno:hover { background: #fff; color: var(--rojo); }
.boton.borde { border-color: var(--oro); color: var(--crema); background: transparent; }
.boton.borde:hover { background: rgba(224,163,92,.12); }
.boton[aria-disabled="true"] { opacity: .6; cursor: not-allowed; box-shadow: none; }
.enlace-pixel { font-family: var(--pixel); font-size: 15px; letter-spacing: .1em; color: var(--bombilla); padding: 12px 0; border-bottom: 2px solid var(--oro); }

/* marquesina de bombillas */
.marquesina { border: 11px dotted var(--bombilla); border-radius: 16px; padding: 10px; background: var(--tinta); box-shadow: 0 0 0 5px var(--oro), 0 0 46px rgba(255,205,130,.4); }
.pantalla { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.pantalla > img, .pantalla > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pantalla .rotulo { position: absolute; left: 14px; bottom: 14px; font-size: 15px; }
.reproducir { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.reproducir span { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--crema); background: rgba(110,36,22,.88); display: grid; place-items: center; box-shadow: 0 0 30px rgba(255,190,120,.5); transition: transform .15s; }
.reproducir:hover span { transform: scale(1.06); }

/* cinta y cabecera */
.cinta { border-bottom: 2px solid var(--oro); overflow: hidden; }
.cinta p { margin: 0; padding: 9px 24px; white-space: nowrap; font-family: var(--pixel); font-size: 14px; letter-spacing: .14em; color: var(--bombilla); }
.cabecera { background: var(--rojo); border-bottom: 4px solid var(--tinta); position: sticky; top: 0; z-index: 10; }
.cabecera .ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 12px; padding-bottom: 12px; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca img { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 0 3px var(--oro), 0 0 18px rgba(255,200,120,.45); }
.marca b { display: block; font-family: var(--serif); font-weight: 900; font-size: 25px; line-height: 1; text-shadow: 0 0 14px rgba(255,180,110,.45); }
.marca small { display: block; font-family: var(--pixel); font-size: 12px; letter-spacing: .2em; color: #E8C9A6; padding-top: 4px; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-family: var(--pixel); font-size: 15px; letter-spacing: .1em; }
.menu a { padding: 10px 0; }
.menu a[aria-current="page"] { color: var(--bombilla); border-bottom: 2px solid var(--oro); }
.menu .boton { min-height: 44px; padding: 0 16px; font-size: 15px; box-shadow: 0 3px 0 var(--tinta); }

/* secciones */
.seccion { padding: 72px 0 80px; }
.seccion.roja { background: var(--rojo); border-top: 4px solid var(--tinta); }
.seccion.oscura { background: var(--noche); border-top: 4px solid var(--oro); }
.borde-oro { border-top: 4px solid var(--oro); }
.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.cabeza > div { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cabeza p { margin: 0; font-size: 19px; color: var(--suave); }
.centrada { text-align: center; align-items: center; justify-content: center; }
.centrada > div { align-items: center; max-width: none; }

/* estreno */
.estreno .ancho { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 60px; padding-bottom: 68px; }
.tablon { flex: 1 1 440px; min-width: 0; background: var(--tinta); border: 4px solid var(--oro); border-radius: 12px; padding: 34px 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 0 0 6px var(--tinta), 0 18px 40px rgba(20,6,3,.55); }
.tablon .fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tablon h1 { font-size: clamp(50px, 7vw, 96px); }
.tablon p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--suave); }
.estreno .marquesina { flex: 1.35 1 560px; min-width: 0; }

/* pósters de la saga */
.carrusel { display: flex; gap: 28px; overflow-x: auto; padding: 18px 6px 22px; scroll-snap-type: x proximity; }
.poster { flex: 0 0 210px; display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; transition: transform .2s; }
.poster:nth-child(odd) { transform: rotate(-1.6deg); }
.poster:nth-child(even) { transform: rotate(1.4deg); }
.poster:hover { transform: rotate(0) translateY(-4px); }
.poster .papel { position: relative; background: var(--crema); padding: 8px 8px 10px; box-shadow: 0 14px 24px rgba(30,8,4,.5); }
.poster .papel img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.poster .chincheta { position: absolute; top: -10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--oro); box-shadow: 0 2px 0 var(--rojo); }
.poster .numero { position: absolute; right: -10px; bottom: 54px; font-size: 20px; padding: 4px 10px; transform: rotate(4deg); }
.poster strong { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.poster small { display: flex; justify-content: space-between; gap: 8px; font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; color: #E8C9A6; text-transform: uppercase; }

/* tarjetas de la cartelera */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 24px; }
.tarjeta { display: flex; flex-direction: column; gap: 10px; }
.tarjeta .mini { position: relative; border: 3px solid var(--oro); border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.tarjeta .mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.tarjeta:hover .mini img { transform: scale(1.04); }
.tarjeta .mini .caja { position: absolute; right: 10px; bottom: 10px; font-size: 15px; }
.tarjeta .mini .sello { left: 10px; top: 10px; right: auto; bottom: auto; font-size: 13px; }
.tarjeta strong { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.tarjeta small { font-size: 16px; line-height: 1.4; color: var(--tenue); }
.aviso-legal { margin: 28px 0 0; font-size: 14px; color: var(--tenue); max-width: 760px; }

/* A.L.M.A. */
.alma .ancho { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.alma .foto { flex: 1 1 520px; min-width: 0; position: relative; }
.alma .foto > div { background: var(--lona); padding: 10px; box-shadow: 0 18px 36px rgba(30,8,4,.55); transform: rotate(-1.2deg); }
.alma .foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.alma .placa { position: absolute; right: -6px; bottom: -26px; font-size: 30px; padding: 10px 20px; transform: rotate(-6deg); border: 2px solid #A9824F; }
.alma .texto { flex: 1 1 400px; min-width: 0; background: var(--tinta); border-radius: 10px; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 18px 40px rgba(20,6,3,.5); }
.alma .texto p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--suave); }
.alma .lema { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--crema) !important; }

/* recreativa */
.recreativa { display: flex; flex-direction: column; }
.recreativa .techo { background: var(--tinta); border-radius: 20px 20px 0 0; padding: 18px 20px; text-align: center; border: 4px solid #0D0503; border-bottom: 0; box-shadow: inset 0 0 0 3px #4FD8FF, 0 0 24px rgba(79,216,255,.35); }
.recreativa .techo h2, .recreativa .techo span { margin: 0; font-family: var(--pixel); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: .12em; color: #E9FBFF; text-shadow: 0 0 8px #4FD8FF, 0 0 20px #4FD8FF; }
.recreativa .cuerpo { background: var(--rojo); padding: 22px; border-left: 4px solid #0D0503; border-right: 4px solid #0D0503; }
.recreativa .cristal { background: #000; border-radius: 12px; padding: 14px; box-shadow: inset 0 0 0 4px var(--rojo-hondo); position: relative; }
.recreativa .cristal img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.recreativa .cristal .caja { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 18px; letter-spacing: .14em; padding: 6px 18px; white-space: nowrap; }
.recreativa .mandos { background: var(--ladrillo); padding: 20px 24px 24px; border: 4px solid #0D0503; border-top-color: var(--tinta); border-radius: 0 0 10px 10px; display: flex; flex-direction: column; gap: 16px; }
.recreativa .botonera { display: flex; align-items: center; gap: 22px; }
.recreativa .palanca { width: 54px; height: 54px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center; }
.recreativa .palanca::after { content: ''; width: 24px; height: 24px; border-radius: 50%; background: var(--almagre); box-shadow: inset 0 -4px 0 var(--rojo); }
.recreativa .pulsador { width: 30px; height: 30px; border-radius: 50%; }
.recreativa .mandos p { margin: 0; font-size: 17px; line-height: 1.55; }

.juegos-portada { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.juegos-portada .recreativa { flex: 1.4 1 520px; min-width: 0; }
.juegos-portada .texto { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.juegos-portada .texto p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--suave); }
.miniposters { display: flex; flex-wrap: wrap; gap: 8px; }
.miniposters img { width: 56px; height: 84px; object-fit: cover; border: 2px solid var(--oro); }

/* el pueblo: datapad */
.pueblo .ancho { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.pueblo .texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pueblo .texto p { margin: 0; font-size: 18px; color: var(--suave); }
.datapad { flex: 1.3 1 520px; min-width: 0; background: #2B2F2A; border-radius: 22px; padding: 18px; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 18px 36px rgba(20,6,3,.55); }
.datapad .pantallita { background: #0C161B; border-radius: 10px; border: 2px solid #3F6560; padding: 18px 20px; font-family: var(--pixel); color: #5CF08A; }
.datapad .barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 13px; letter-spacing: .12em; border-bottom: 2px solid #3F6560; padding-bottom: 10px; margin-bottom: 12px; }
.datapad ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 20px; font-size: 17px; }

/* ficha de película */
.reproductor .ancho { max-width: 1180px; padding-top: 36px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 18px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 10px; }
.pestanas button { min-height: 48px; padding: 0 20px; border-radius: 4px; font: 700 15px var(--pixel); letter-spacing: .1em; cursor: pointer; border: 2px solid var(--oro); background: var(--tinta); color: var(--crema); }
.pestanas button[aria-selected="true"] { background: var(--crema); color: var(--rojo); border-color: var(--crema); box-shadow: 0 4px 0 var(--tinta); }
.ficha .ancho { max-width: 1180px; display: flex; flex-wrap: wrap; gap: 48px; padding-top: 56px; padding-bottom: 64px; }
.ficha .principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ficha h1 { font-size: clamp(48px, 6.6vw, 92px); text-shadow: 0 0 26px rgba(255,180,110,.45), 0 5px 0 var(--rojo-hondo); }
.ficha .subtitulo { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--suave); margin: 0; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha .chips .caja { font-size: 15px; padding: 5px 10px; text-transform: uppercase; }
.ficha .sinopsis p { margin: 0 0 14px; font-size: 19px; line-height: 1.65; color: var(--suave); }
.ficha .lado { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ficha .lado .poster { flex: none; max-width: 240px; transform: rotate(1.5deg); }

/* pie */
.pie { border-top: 4px solid var(--oro); }
.pie > div { background: rgba(36,16,10,.88); }
.pie .ancho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding-top: 44px; padding-bottom: 28px; }
.pie .marca img { width: 68px; height: 68px; }
.pie i { font-family: var(--serif); font-size: 17px; color: #E8C9A6; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--pixel); font-size: 15px; letter-spacing: .08em; }
.pie nav a { padding: 8px 0; }
.pie .legal { margin: 0; padding: 0 24px 28px; text-align: center; font-size: 14px; color: #CDAE8A; }

.cargando { padding: 40px 0; text-align: center; font-family: var(--pixel); letter-spacing: .14em; color: var(--tenue); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .seccion { padding: 52px 0 60px; }
  .tablon { padding: 24px 20px; }
  .tablon h1 { font-size: 46px; }
  .marquesina { border-width: 7px; padding: 6px; }
  .menu { gap: 2px 16px; font-size: 13px; }
  .marca b { font-size: 21px; }
  .marca img { width: 44px; height: 44px; }
  .cabecera { position: static; }
  .poster { flex-basis: 170px; }
  .alma .placa { font-size: 22px; right: 4px; }
  .recreativa .cristal .caja { font-size: 14px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .poster, .tarjeta .mini img, .reproducir span { transition: none; }
}