:root{
  --bg:#000; --text:#fff; --muted:#757575; /* AA on black (≈4.56:1) */
  --border:#2a2a2a; --ring:2px solid #fff;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  --max:70ch; --space:1.25rem;
}

/* Light reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;margin:0;padding:0}
img,svg{display:block;max-width:100%}

/* Base */
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}
a{color:var(--text);text-underline-offset:2px}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:var(--ring);outline-offset:2px}
::selection{background:#ffffff33}

/* Layout */
.wrapper{max-width:var(--max);margin:0 auto;padding:var(--space)}
header.site-header{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--space)}
header .brand{display:inline-flex;align-items:center;gap:0;text-decoration:none}
header .brand .logo{
  height:clamp(70px, 7vw, 100px);
  width:auto;
  aspect-ratio:620/249;
}

.lang-switch a{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--muted)}
.lang-switch .current{color:var(--text);cursor:default}
.lang-sep{margin:0 .5rem;color:var(--muted)}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:var(--text);color:var(--bg);padding:.5rem .75rem;border-radius:.25rem;text-decoration:none;z-index:9999}

/* Right dot navigation (desktop) */
.nav-dots{
  position:fixed;right:1rem;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.75rem;z-index:1000
}
.nav-dots a{
  position:relative;
  width:28px;height:10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--muted);
  border-radius:4px;
  text-decoration:none;
  transition:border-color .15s ease, background-color .15s ease
}
.nav-dots a[aria-current="page"]{border-color:#fff;background:#ffffff12}
.nav-dots a:hover{border-color:#ffffffaa}
.nav-dots a:focus-visible{outline:var(--ring)}
.nav-dots a .dot-label{
  position:absolute; right:100%; margin-right:.75rem;
  top:50%; transform:translateY(2px) scale(.98); transform-origin:right center;
  background:#fff; color:#000; border:1px solid var(--border);
  border-radius:.5rem; padding:.35rem .6rem;
  font-size:1rem; line-height:1.15; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; z-index:1001
}
.nav-dots a .dot-label::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:8px solid transparent; border-left-color:#fff
}
.nav-dots a:hover .dot-label,
.nav-dots a:focus-visible .dot-label{ opacity:1; transform:translateY(-50%) scale(1) }
@media (prefers-reduced-motion: reduce){ .nav-dots a .dot-label{ transition:none } }

.mobile-list .dot{
  width:24px;height:10px;border-radius:4px;border:2px solid #666;display:inline-block
}
.mobile-list .dot[data-active="true"]{ border-color:#000; background:#000 }


/* FAB (móvil) */
.fab{
  position:fixed; right:1rem; bottom:1rem; z-index:1100;
  width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000; border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.fab:hover{filter:brightness(0.95)}
.fab:focus-visible{outline:var(--ring); outline-offset:2px}

/* Bocadillo del menú */
.mobile-menu{
  position:fixed; right:1rem; bottom:5.25rem; z-index:1099;
  background:#fff; color:#000; border:1px solid var(--border);
  border-radius:.75rem; padding:.5rem; min-width:220px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.mobile-menu::after{
  content:""; position:absolute; right:18px; bottom:-10px;
  border:10px solid transparent; border-top-color:#fff;
}

/* Lista dentro del menú */
.mobile-list{list-style:none;margin:0;padding:0; display:grid; gap:.25rem}
.mobile-list a{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem; border-radius:.5rem; text-decoration:none;
  color:#000;
}
.mobile-list a:hover, .mobile-list a:focus-visible{
  outline:2px solid #000; outline-offset:-2px;
  background:#f3f3f3;
}

/* Responsivo: mostrar sólo en móvil */
@media (min-width: 640px){
  .fab, .mobile-menu{ display:none !important; }
}
@media (max-width: 639.98px){
  .nav-dots{ display:none !important; } /* ocultar bolitas en móvil */
}


/* Mostrar etiqueta en hover y accesible con teclado */
.nav-dots a:hover .dot-label,
.nav-dots a:focus-visible .dot-label{
  opacity:1;transform:translateY(-50%) scale(1);
}

/* A11y helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography */
main{display:block}
main .prose{padding-top:1rem}
main .prose p{margin-bottom:1rem}
h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.25rem);line-height:1.2;margin-bottom:.75rem}
h2{font-size:clamp(1.15rem,1rem + 1vw,1.5rem);margin-top:1.25rem;margin-bottom:.45rem}
.lead{color:var(--muted)}

/* Footer */
footer.site-footer{border-top:1px solid #1f1f1f;margin-top:2.5rem;padding:var(--space);font-size:.9rem;color:var(--muted)}
.footer-inner{display:grid;gap:.75rem}
.footer-nav a{color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--text);text-decoration:underline}
.social a{color:var(--muted);text-decoration:none;margin-right:.75rem}
.social a:hover{color:var(--text);text-decoration:underline}

/* Forms */
input,textarea,button{font:inherit}
button{background:transparent;color:var(--text);cursor:pointer}

/* Responsive */
@media (min-width:768px){
  header.site-header{padding:1.25rem 2rem}
  .wrapper{padding:2rem}
}

/* Print: white background, black text, remove fixed UI */
@media print{
  :root{--bg:#fff;--text:#000;--muted:#333}
  html,body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  header.site-header,.nav-dots,footer.site-footer{position:static;transform:none;border:none}
  .nav-dots{display:none !important}
  .wrapper{max-width:none;padding:0}
}


/* Flechas de navegación (estáticas, centradas sobre la columna) */
.nav-arrows{
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
  margin: .75rem 0;
}
.nav-arrows-top{  margin-top:  .5rem; }
.nav-arrows-bottom{ margin-bottom: .5rem; }

.nav-arrow{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  text-decoration: none;
}
.nav-arrow:hover{ filter: brightness(0.95); }
.nav-arrow:focus-visible{ outline: var(--ring); outline-offset: 2px; }

.nav-arrow svg{ width: 24px; height: 24px; }
@media (min-width: 768px){
  .nav-arrow{ width: 64px; height: 64px; }
  .nav-arrow svg{ width: 24px; height: 24px; }
}

.thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.thumb .play svg{ width:42px; height:42px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }

/* Components: Reels + Modal (comparten estilo entre Commercials/Publicidad y Fiction/Ficción) */
.reel-list{display:grid;gap:1rem;margin-top:.5rem}
.reel-card{border:1px solid #1f1f1f;border-radius:.75rem;overflow:hidden;background:transparent}
.thumb{position:relative;aspect-ratio:16/9;background:#111}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb a.cover{position:absolute;inset:0;display:block;text-decoration:none}
.thumb a.cover:focus-visible{outline:var(--ring);outline-offset:-2px}
.reel-body{padding:1rem}
.reel-title{font-size:clamp(1.15rem,1rem + 1vw,1.5rem);line-height:1.25;margin-bottom:.25rem}
.meta-line{color:var(--muted);font-size:.95rem;margin-top:.15rem}
.link-row{margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap}
.link-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:.5rem;text-decoration:none}
.link-icon:hover{border-color:#fff}
.more,.imdb-cta{margin-top:1.25rem;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;z-index:1200;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.modal-dialog{
  position:relative;max-width:min(960px,96vw);margin:5vh auto 0 auto;
  background:#000;border:1px solid #1f1f1f;border-radius:.75rem;box-shadow:0 20px 60px rgba(0,0,0,.6);
  color:#fff;outline:none;
}
.modal-header{display:flex;justify-content:flex-end}
.modal-close{
  margin:.5rem .5rem 0 0;background:#fff;color:#000;border:1px solid var(--border);
  width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center
}
.modal-close:hover{filter:brightness(.95)}
.modal-body{padding:.5rem .75rem 1rem}
.modal-tabs{display:flex;gap:.5rem;margin:.25rem 0 .5rem}
.modal-tabs[hidden]{display:none}
.modal-tabs button{
  background:#fff;color:#000;border:1px solid var(--border);border-radius:.5rem;
  padding:.35rem .6rem;font-size:.95rem
}
.modal-tabs button[aria-selected="true"]{outline:2px solid #fff;outline-offset:-2px}
.player-wrap{position:relative;aspect-ratio:16/9;background:#111;border:1px solid #1f1f1f;border-radius:.5rem;overflow:hidden}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:639.98px){ .modal-dialog{margin:3vh auto 0} .modal-close{width:36px;height:36px} }

/* Lazy: transición suave al revelar diferidos */
.reel-card.is-deferred{
  opacity:.01;
  transform: translateY(8px);
  filter: blur(2px);
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.reel-card.is-ready{
  opacity:1;
  transform:none;
  filter:none;
}

/* ===== Full-bleed util ===== */
.full-bleed{
  /* hace que la sección se “escape” del .wrapper y ocupe todo el ancho de la ventana */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===== Grid de reels ===== */
.reel-list{
  display: grid;
  grid-template-columns: 1fr;   /* móvil: 1 col */
  gap: var(--space);
}

/* tablet: 2 columnas por defecto */
@media (min-width: 768px){
  .reel-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* desktop grande: si pides 3 columnas explícitamente */
@media (min-width: 1200px){
  .reel-list.reel-cols-3{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Opcional: que las miniaturas mantengan ratio y ocupen bien */
.reel-card .thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.fab svg {
  pointer-events: none;
}

.footer-legal a{color:var(--muted);text-decoration:none}
.footer-legal a:hover{color:var(--text);text-decoration:underline}

#loading-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65)}
#loading-overlay::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 80px rgba(255,255,255,.06),inset 0 0 160px rgba(0,0,0,.85)}
#loading-overlay[data-visible="true"]{display:flex}
.loading-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem;background:#000;border:1px solid var(--border);border-radius:1rem;padding:1rem 1.25rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.spinner{width:44px;height:44px;border-radius:999px;border:3px solid #ffffff22;border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.legal-list{list-style:none;margin-left:0;padding-left:0}
.legal-list>li+li{margin-top:1rem}