/* ==========================================================
   MESSINA FILM — Producción audiovisual de los DJ
   Puerto Cabello, Venezuela.
   Concepto: el sitio es el visor de cámara durante un live set.
   Negro de pantalla, blanco del logotipo y rojo "fiLM" / REC.
   ========================================================== */
:root {
  --bg: #070707;         /* negro de la marca */
  --surface: #111111;    /* superficies */
  --surface-2: #181818;
  --line: #262626;       /* bordes y retícula */
  --fg: #f4f3f0;         /* blanco del logotipo */
  --muted: #9b9a96;      /* texto secundario */
  --red: #e5161d;        /* rojo "fiLM" y REC */
  --red-soft: rgba(229, 22, 29, .12);

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --s-1: .8125rem; --s0: 1rem; --s1: 1.2rem; --s4: clamp(2.75rem, 7vw, 5.5rem);
  --wrap: 1240px;
  --radius: 3px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: var(--s0); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .95; margin: 0; text-wrap: balance; text-transform: uppercase; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--mono); font-size: var(--s-1); letter-spacing: .04em; }
.eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lead { color: var(--muted); font-size: var(--s1); max-width: 60ch; }
.rec-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); display: inline-block; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { opacity: .15; } }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .95rem 1.4rem; border-radius: var(--radius); border: 1px solid #3a3a3a; background: transparent; color: var(--fg); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.btn:hover { border-color: var(--fg); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #ff2a31; border-color: #ff2a31; }
.btn svg { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(7, 7, 7, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 54px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); transition: transform .25s ease; }
.brand:hover img { transform: scale(1.04) rotate(-1deg); }
@media (max-width: 560px) { .brand img { height: 46px; } }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: .9rem; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links .btn { color: #fff; padding: .65rem 1rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--fg); border-radius: var(--radius); padding: .5rem .7rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; cursor: pointer; }
@media (max-width: 920px) {
  .nav-toggle { display: inline-block; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); display: none; }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child a { border: 0; margin-top: .8rem; }
}

/* ---------- Hero / visor ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
/* Reel de portada: tomas que alternan con movimiento de cámara y transiciones */
.hero-reel { position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 0; isolation: isolate; }
.hero::after { z-index: 1; }
.hero-reel .slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero-reel .slide:first-child { opacity: 1; } /* visible incluso antes de que cargue el script */
.hero-reel .slide img, .hero-reel .slide video { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; will-change: transform; }
.hero-reel .slide.leaving { opacity: 1; z-index: 1; }
.hero-reel .slide.active { opacity: 1; z-index: 2; }
.hero-reel .slide.active img, .hero-reel .slide.active video { animation: kb-in 7.5s ease-out both; }
.hero-reel .slide:nth-child(even).active img, .hero-reel .slide:nth-child(even).active video { animation-name: kb-out; }
@keyframes kb-in { from { transform: scale(1.2) translateX(2.5%); } to { transform: scale(1.05) translateX(-1%); } }
@keyframes kb-out { from { transform: scale(1.04) translateX(-2%); } to { transform: scale(1.18) translateX(1.5%); } }
.hero-reel .slide.active.fade { animation: reel-fade 1.4s ease both; }
.hero-reel .slide.active.zoom { animation: reel-zoom 1.3s cubic-bezier(.2,.7,.2,1) both; }
.hero-reel .slide.active.wipe { animation: reel-wipe 1s cubic-bezier(.75,0,.2,1) both; }
@keyframes reel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reel-zoom { from { opacity: 0; transform: scale(1.25); filter: blur(8px) brightness(1.6); } to { opacity: 1; transform: none; filter: none; } }
@keyframes reel-wipe { from { clip-path: inset(0 0 0 100%); filter: brightness(1.5); } to { clip-path: inset(0 0 0 0); filter: none; } }
/* destello rojo de corte, como una fuga de luz */
.hero-reel .slide.active.wipe::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, rgba(229,22,29,.55), transparent); animation: leak 1s cubic-bezier(.75,0,.2,1) both; pointer-events: none; }
@keyframes leak { from { left: 100%; } to { left: -18%; } }
.hero-progress { position: absolute; z-index: 4; right: max(34px, env(safe-area-inset-right, 0px)); bottom: 40px; display: flex; gap: 6px; width: min(340px, 46%); }
.hero-progress button { all: unset; cursor: pointer; flex: 1; padding: 8px 0; }
.hero-progress button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hero-progress i { display: block; height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; }
.hero-progress i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.hero-progress .done i::after { transform: scaleX(1); background: rgba(255,255,255,.75); }
.hero-progress .on i::after { animation: fill var(--dur, 6s) linear forwards; }
.hero-progress button:hover i { background: rgba(255,255,255,.55); }
@keyframes fill { to { transform: scaleX(1); } }
#hud-now { transition: opacity .3s; }
#hud-now.swap { opacity: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.94) 0%, rgba(7,7,7,.7) 45%, rgba(7,7,7,.15) 100%), linear-gradient(0deg, rgba(7,7,7,.7), transparent 40%); pointer-events: none; }
.viewfinder { position: relative; z-index: 2; padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(5rem, 9vw, 7rem); }
.hud { position: absolute; inset: 14px; z-index: 3; pointer-events: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: rgba(244,243,240,.82); }
.hud > span { position: absolute; display: flex; gap: .9rem; align-items: center; white-space: nowrap; }
.hud .tl { top: 6px; left: 10px; } .hud .tr { top: 6px; right: 10px; }
.hud .bl { bottom: 6px; left: 10px; } .hud .br { bottom: 6px; right: 10px; }
.hud .corner { position: absolute; width: 22px; height: 22px; border-color: rgba(244,243,240,.55); border-style: solid; border-width: 0; }
.hud .c1 { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud .c2 { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud .c3 { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud .c4 { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hud .red { color: var(--red); }
.hero h1 { font-size: clamp(3.2rem, 9.5vw, 7.6rem); max-width: 12ch; margin-block: 1.2rem 1.5rem; }
/* Logo de portada: se "escribe" como un trazo de pincel */
.hero-logo { width: clamp(240px, 38vw, 470px); height: auto; margin: 0 0 1.4rem -.4rem; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); animation: brush 1.4s cubic-bezier(.7,0,.2,1) .15s both; }
@keyframes brush { from { clip-path: inset(0 100% 0 0); transform: translateX(-12px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero .now { margin-top: 2.6rem; display: flex; align-items: center; gap: .8rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero .now b { color: var(--fg); font-weight: 400; }
@media (max-width: 640px) {
  .hud .tr, .hud .br { display: none; } .hud { font-size: .65rem; }
  .hero-reel .slide img, .hero-reel .slide video { object-position: 72% 40%; }
  .hero-progress { left: max(30px, env(safe-area-inset-left, 0px)); right: max(30px, env(safe-area-inset-right, 0px)); width: auto; bottom: 44px; }
}

/* ---------- Cifras ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.6rem 1.2rem; border-right: 1px solid var(--line); display: grid; gap: .3rem; }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .88rem; }
.stats-band { border-bottom: 1px solid var(--line); }
.stats-note { font-family: var(--mono); font-size: .66rem; color: var(--muted); letter-spacing: .06em; padding-block: .6rem; border-top: 1px dashed var(--line); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 3rem; }
.section-head h2 { font-size: var(--s4); margin-top: .9rem; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }

/* Servicios */
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service { padding: 2rem 1.6rem 2.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; min-width: 0; transition: background .25s; }
.service:hover { background: var(--surface); }
.service .icon { width: 40px; height: 40px; color: var(--red); }
.service h3 { font-size: 1.9rem; }
.service p { color: var(--muted); }
.service ul { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.service li { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); padding: .3rem .55rem; border-radius: 2px; color: var(--muted); }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }

/* Desde el aire */
.aerial { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.aerial .shot { margin: 0; padding: 0; font: inherit; color: #fff; text-align: left; cursor: pointer; background: var(--surface); position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 9; max-width: 100%; }
.aerial .shot:nth-child(1) { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
.aerial .shot:nth-child(2), .aerial .shot:nth-child(3) { grid-column: span 2; }
.aerial .shot:nth-child(4), .aerial .shot:nth-child(5) { grid-column: span 3; }
.aerial img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.aerial .shot:hover img { transform: scale(1.04); }
.aerial .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); display: flex; justify-content: space-between; align-items: end; gap: .6rem; }
.aerial .cap span { color: var(--red); white-space: nowrap; }
.aerial .shot .play { position: absolute; inset: 0; display: grid; place-items: center; }
.aerial .shot .play i { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.aerial .shot:hover .play i { background: var(--red); border-color: var(--red); }
.aerial .shot .play svg { width: 16px; height: 16px; margin-left: 3px; color: #fff; }
@media (max-width: 760px) { .aerial { grid-template-columns: 1fr 1fr; } .aerial .shot:nth-child(n) { grid-column: span 1; grid-row: auto; aspect-ratio: 16 / 9; } .aerial .shot:nth-child(1) { grid-column: 1 / -1; } }

/* Locaciones */
.locations { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.loc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.loc-list li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.loc-list .n { font-family: var(--mono); font-size: .7rem; color: var(--red); }
.loc-list b { font-family: var(--display); font-size: 1.55rem; text-transform: uppercase; font-weight: 800; line-height: 1.05; }
.loc-list small { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; font-family: var(--body); text-transform: none; font-weight: 400; }
.loc-list .who { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
@media (max-width: 900px) { .locations { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .loc-list li { grid-template-columns: 2rem 1fr; } .loc-list .who { grid-column: 2; text-align: left; } }

/* Portafolio */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--muted); padding: .55rem .9rem; border-radius: 2px; cursor: pointer; }
.filter[aria-pressed="true"] { border-color: var(--red); color: var(--fg); background: var(--red-soft); }
.reel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.2rem; }
.reel { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; display: grid; gap: .8rem; align-content: start; font: inherit; }
.reel[hidden] { display: none !important; }
.reel .frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.reel .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.reel:hover .frame img { transform: scale(1.05); }
.reel .play { position: absolute; inset: 0; display: grid; place-items: center; }
.reel .play i { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.reel:hover .play i { background: var(--red); border-color: var(--red); }
.reel .play svg { width: 18px; height: 18px; margin-left: 3px; color: #fff; }
.reel .tc { position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-size: .68rem; color: #fff; background: rgba(0,0,0,.75); padding: .15rem .4rem; border-radius: 2px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.reel .views { position: absolute; left: 8px; top: 8px; font-family: var(--mono); font-size: .64rem; color: #fff; background: rgba(0,0,0,.65); padding: .15rem .45rem; border-radius: 2px; letter-spacing: .06em; display: flex; gap: .4rem; align-items: center; }
.reel h3 { font-size: 1.5rem; }
.reel .sub { font-size: .88rem; color: var(--muted); margin-top: .25rem; }
@media (max-width: 900px) { .reel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reel-grid { grid-template-columns: 1fr; } }

dialog.lightbox { border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 0; border-radius: var(--radius); width: min(900px, calc(100% - 32px)); }
dialog.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox .frame { aspect-ratio: 16 / 9; position: relative; background: #000; }
.lightbox .frame img { width: 100%; height: 100%; object-fit: cover; }
.lightbox .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox .frame.vertical { aspect-ratio: auto; height: min(72vh, 680px); }
.lightbox .frame.vertical img { object-fit: contain; }
.lightbox .frame .play-hint { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.lightbox .frame .play-hint i { width: 72px; height: 72px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.5); transition: transform .2s; }
.lightbox .frame .play-hint:hover i { transform: scale(1.08); }
.lightbox .frame .play-hint svg { width: 26px; height: 26px; margin-left: 4px; color: #fff; }
.lightbox .row { justify-content: flex-start; }
.lightbox .lb-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* Locaciones clicables */
.loc-list button { all: unset; cursor: pointer; border-bottom: 1px solid #444; transition: color .2s, border-color .2s; }
.loc-list button:hover { color: var(--fg); border-color: var(--red); }
.loc-list button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.service .more { margin-top: .4rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); text-decoration: none; display: inline-flex; gap: .5rem; align-self: flex-start; border-bottom: 1px solid var(--red); padding-bottom: .2rem; }
.service .more:hover { color: var(--red); }
.hero .now button { all: unset; cursor: pointer; color: var(--fg); border-bottom: 1px solid var(--red); }
.hero .now button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
a.stat { color: inherit; text-decoration: none; transition: background .2s; }
a.stat:hover { background: var(--surface); }
a.stat:hover b { color: var(--red); }
.lightbox .body { padding: 1.4rem 1.6rem 1.6rem; display: grid; gap: .8rem; }
.lightbox h3 { font-size: 2rem; }
.lightbox p { color: var(--muted); }
.lightbox .row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin-top: .4rem; }
.lightbox .close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.6); }

/* Proceso */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: step; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.step { padding: 1.6rem 1.2rem 0 0; position: relative; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: .75rem; color: var(--red); letter-spacing: .1em; }
.step::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--red); border-radius: 50%; }
.step h3 { font-size: 1.6rem; }
.step p { color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 2rem; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Paquetes */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; }
.plan.featured { border-color: var(--red); background: linear-gradient(180deg, var(--red-soft), transparent 60%); }
.plan .tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.plan h3 { font-size: 2.2rem; }
.plan > p { color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: .7rem; font-size: .93rem; }
.plan li::before { content: ""; width: 10px; height: 1px; background: var(--red); margin-top: .8rem; }
.plan .btn { margin-top: auto; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* Prensa */
.press { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.press figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.press blockquote { margin: 1.2rem 0 1.4rem; font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.press blockquote::before { content: "“"; color: var(--red); }
.press cite { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .press { grid-template-columns: 1fr; } }

/* Banda EPK */
.epk-band { background: var(--surface); border-block: 1px solid var(--line); }
.epk-band .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 5rem); }
.epk-band h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-block: .9rem 1.2rem; }
.epk-band ul { list-style: none; margin: 0; padding: 0; display: grid; font-family: var(--mono); font-size: .8rem; }
.epk-band li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.epk-band li b { color: var(--fg); font-weight: 400; text-align: right; }
@media (max-width: 820px) { .epk-band .wrap { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 1.1rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--red); font-size: 1.2rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 1.4rem; max-width: 70ch; }

/* Contacto / cotizador */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: start; }
.contact-info { display: grid; gap: 1.6rem; }
.info-row { display: grid; gap: .25rem; }
.info-row .mono { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; }
.info-row .val { font-size: 1.15rem; }
.info-row a.val { text-decoration: none; border-bottom: 1px solid var(--line); justify-self: start; }
.info-row a.val:hover { border-color: var(--red); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); }
.field { display: grid; gap: .4rem; min-width: 0; }
.full { grid-column: 1 / -1; }
.field label, .field .label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: var(--radius); padding: .8rem .9rem; font: inherit; font-size: .95rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field textarea { min-height: 120px; resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 2px; padding: .5rem .75rem; font-size: .88rem; cursor: pointer; }
.check input { accent-color: var(--red); }
.form-out { border: 1px solid var(--red); background: var(--red-soft); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: .8rem; }
.form-out pre { margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: .78rem; color: var(--fg); }
.form-out .row { display: flex; flex-wrap: wrap; gap: .6rem; }
.error { color: #ff8a8e; font-size: .82rem; }
.error:empty { display: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem; color: var(--muted); font-size: .88rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); }

/* ==========================================================
   EPK
   ========================================================== */
.epk-hero { border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.epk-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.epk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.95), rgba(7,7,7,.55)); }
.epk-hero .wrap { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem); display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: end; }
.epk-hero .logo-big { width: min(560px, 100%); height: auto; margin-block: 1rem 1.4rem; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); animation: brush 1.4s cubic-bezier(.7,0,.2,1) .15s both; }
.factsheet { background: rgba(17,17,17,.9); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin: 0; }
.factsheet div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.factsheet div:last-child { border-bottom: 0; }
.factsheet dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.factsheet dd { margin: 0; text-align: right; }
@media (max-width: 860px) { .epk-hero .wrap { grid-template-columns: 1fr; } }

.epk-toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.epk-toc .wrap { display: flex; gap: 1.4rem; overflow-x: auto; padding-block: .8rem; scrollbar-width: none; }
.epk-toc a { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.epk-toc a:hover { color: var(--red); }

.bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bio { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bio header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bio .mono { color: var(--red); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }
.bio p { color: var(--muted); }
.bio .count { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.copy-btn { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--fg); padding: .45rem .7rem; border-radius: 2px; cursor: pointer; }
.copy-btn:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 760px) { .bio-grid { grid-template-columns: 1fr; } }

.team { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
.team figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.team figure img { width: 100%; height: auto; }
.team figcaption { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .7rem .9rem; border-top: 1px solid var(--line); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.roles li { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.roles b { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.roles span { color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

.artists { display: flex; flex-wrap: wrap; gap: .5rem; }
.artists a { text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1; padding: .55rem .9rem .5rem; border: 1px solid var(--line); border-radius: 2px; transition: border-color .2s, color .2s; }
.artists a:hover { border-color: var(--red); color: var(--red); }

.deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.deliver div { border-top: 1px solid var(--red); padding-top: 1rem; display: grid; gap: .4rem; align-content: start; }
.deliver b { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.deliver span { color: var(--muted); font-size: .92rem; }
@media (max-width: 760px) { .deliver { grid-template-columns: 1fr; } }

.brand-kit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; }
.logo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.logo-tile { border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; padding: 1.5rem 1rem 2.2rem; position: relative; background: #000; min-width: 0; }
.logo-tile.wide { grid-column: 1 / -1; }
.logo-tile img { max-height: 180px; width: auto; }
.logo-tile .lbl { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.swatches { display: grid; gap: .6rem; }
.swatch { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; }
.swatch i { height: 40px; border-radius: 2px; border: 1px solid #333; }
.swatch b { font-weight: 500; font-size: .92rem; }
.swatch span { font-family: var(--mono); font-size: .75rem; color: var(--muted); user-select: all; }
.type-spec { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: grid; gap: .8rem; margin-top: .6rem; }
.type-spec .d { font-family: var(--display); font-size: 2.2rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.type-spec .m { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
@media (max-width: 860px) { .brand-kit { grid-template-columns: 1fr; } }

.rider { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.rider section { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.rider h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.rider ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.rider li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; color: var(--muted); font-size: .93rem; }
.rider li::before { content: "▸"; color: var(--red); font-size: .8rem; margin-top: .15rem; }
@media (max-width: 760px) { .rider { grid-template-columns: 1fr; } }

.booking { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.booking > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: .4rem; min-width: 0; }
.booking .mono { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; }
.booking .val { font-size: 1.05rem; overflow-wrap: anywhere; }
@media (max-width: 760px) { .booking { grid-template-columns: 1fr; } }

.placeholder { color: var(--red); font-family: var(--mono); font-size: .85em; }

/* Equipo técnico */
.gear { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gear-item { padding: 1.6rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: .5rem; align-content: start; min-width: 0; }
.gear-item .type { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.gear-item h3 { font-size: 1.9rem; }
.gear-item p { color: var(--muted); font-size: .93rem; }
@media (max-width: 900px) { .gear { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gear { grid-template-columns: 1fr; } }

/* Crédito */
.credit { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; }
.credit a { color: var(--fg); border-bottom: 1px solid var(--red); text-decoration: none; }
.credit a:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .epk-toc, .site-footer, .copy-btn, .hud { display: none !important; }
}