/* ==========================================================================
   UMD Films · main.css (Refactor pro, sin romper nada)
   - Orden y comentarios claros
   - Eliminado código muerto/duplicado
   - Blindajes de accesibilidad y rendimiento
   - Portafolio aislado de ScrollReveal
   - Carrusel en escritorio/tablet/móvil (cartelera--reel)
   ==========================================================================
*/

/* ========================================================================
   1) CONFIGURACIÓN GLOBAL
   ======================================================================== */
:root {
  --red: #E3000B;
  --red-2: #ff1a1a;
  --bg-0: #000;
  --bg-1: #0a0a0a;
  --bg-2: #111;
  --header-height: 80px; /* altura del header usado para reservar espacio en el contenido */
  /* Alias de marca para unificar nomenclaturas usadas en distintos bloques */
  --brand-red: var(--red);
  --brand-white: #fff;
  --brand-black: #0b0b0b;
}

/* Fuentes con font-display y métricas (reduce CLS) */
@font-face{
  font-family:"Bebas Neue";
  src:url("assets/fonts/bebasneue-regular.woff2") format("woff2");
  font-display:swap;
  /* Métricas aproximadas para estabilizar primera pintura */
  ascent-override:90%;
  descent-override:20%;
  line-gap-override:0%;
  size-adjust:100%;
}
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat-regular.woff2") format("woff2");
  font-display:swap;
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
  size-adjust:100%;
}

/* ========================================================================
   2) RESETS + BASE
   ======================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-0);
  color: #fff;
}
section { scroll-margin-top: var(--header-height); padding-block: clamp(3rem, 6vw, 7rem); }

/* Evitar que el padding global de <section> incremente la altura del hero y empuje
  las secciones siguientes fuera del viewport. Se aplica solo a .hero para no
  tocar la espaciación global de otras secciones. */
.hero { padding-block: 0; }

/* Accesibilidad */
.skip-link { position:absolute; top:-40px; left:0; background:var(--red-2); color:#fff; padding:8px; z-index:10000; text-decoration:none; }
.skip-link:focus { top:0; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========================================================================
   3) INTRO (overlay)
   ======================================================================== */
.intro-overlay { position:fixed; inset:0; background:var(--bg-0); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }
.logo-container { margin-bottom:30px; position:relative; }
.logo-container img { width:300px; height:auto; animation:glowRed 1.8s infinite alternate ease-in-out; filter:drop-shadow(0 0 10px rgba(255,0,0,.7)); }
@keyframes glowRed { 0%{filter:drop-shadow(0 0 8px rgba(255,0,0,.6));} 100%{filter:drop-shadow(0 0 14px rgba(255,0,0,.1));} }
.presenta-container { margin-bottom:20px; display:flex; justify-content:center; align-items:center; gap:8px; }
.presenta-container h1 { display:flex; gap:5px; font-size:42px; color:var(--red); font-weight:bold; text-shadow:0 0 15px var(--red); white-space:nowrap; }
.presenta-container h1 span { opacity:0; display:inline-block; will-change:opacity,transform; }
.presenta-container h1.animate span { animation:showLetter .5s forwards; }
.presenta-container h1 span:nth-child(1){animation-delay:.1s} .presenta-container h1 span:nth-child(2){animation-delay:.2s}
.presenta-container h1 span:nth-child(3){animation-delay:.3s} .presenta-container h1 span:nth-child(4){animation-delay:.4s}
.presenta-container h1 span:nth-child(5){animation-delay:.5s} .presenta-container h1 span:nth-child(6){animation-delay:.6s}
.presenta-container h1 span:nth-child(7){animation-delay:.7s} .presenta-container h1 span:nth-child(8){animation-delay:.8s}
@keyframes showLetter { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.intro-sub { color:#aaa; font-size:18px; font-style:italic; animation:fadeInGlow 2s ease-in-out infinite alternate; margin-top:10px; text-align:center; }
@keyframes fadeInGlow { from{opacity:.5; text-shadow:none;} to{opacity:1; text-shadow:0 0 10px #fff;} }
.fade-out-intro { animation:fadeOutIntro .4s forwards; }
@keyframes fadeOutIntro { to{opacity:0; visibility:hidden;} }

/* ========================================================================
   4) HEADER + NAV
   ======================================================================== */
header { position:fixed; top:0; left:0; width:100%; z-index:9999; }
.navbar { position:fixed; top:0; width:100%; background:rgba(0,0,0,.6); z-index:999; backdrop-filter:blur(6px); padding:10px 30px; transition:all .3s ease; }
.navbar-container { display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; }
.logo-navbar { height:64px; width:auto; display:block; filter:drop-shadow(0 0 3px rgba(255,0,0,.35)); }
.main-nav .nav-links { list-style:none; display:flex; gap:25px; }
.main-nav .nav-links a { color:#fff; text-decoration:none; font-weight:500; font-size:1rem; transition:color .3s ease; position:relative; font-family:'Montserrat', sans-serif; }
.main-nav .nav-links a:hover { color:var(--red-2); }
.main-nav .nav-links a::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:2px; opacity:.9; background:var(--red-2); transform:scaleX(0); transition:transform .3s ease; transform-origin:right; }
.main-nav .nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }
body.menu-open { overflow:hidden; }

/* Reservar espacio para headers fijos: evitar que el contenido quede oculto bajo la barra */
/* Aplicamos en el contenedor principal y en elementos ancla (skip-link apunta a #main-content) */
#main-content, main#main-content, .site-main {
  padding-top: var(--header-height);
}

/* Si el header cambia de tamaño en mobile, ajustamos la variable y garantizamos un mínimo razonable */
@media (max-width: 768px) {
  :root { --header-height: 60px; }
  #main-content, main#main-content, .site-main { padding-top: var(--header-height); }
}
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:10px; z-index:1000; }
.hamburger span { display:block; width:25px; height:3px; background:#fff; margin:5px 0; transition:all .3s ease; }
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px);} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* ========================================================================
   5) HERO (video)
   ======================================================================== */
.hero { position:relative; /* reduce full-viewport height so fixed header doesn't push content off-screen */
  height: calc(100vh - var(--header-height));
  min-height: 60vh; /* ensure hero keeps presence on small desktop screens */
  max-height: 100vh;
  overflow:hidden; }
.curtain-container { position:absolute; inset:0; z-index:10; pointer-events:none; overflow:hidden; }
.curtain { position:absolute; top:0; width:50%; height:100%; background:var(--bg-0); z-index:10; }
.curtain-left { left:0; transform-origin:left; animation:openCurtainLeft 1.5s ease-in-out forwards; }
.curtain-right { right:0; transform-origin:right; animation:openCurtainRight 1.5s ease-in-out forwards; }
@keyframes openCurtainLeft { 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }
@keyframes openCurtainRight{ 0%{transform:translateX(0);} 100%{transform:translateX(100%);} }
.hero-video,.hero-fallback img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-ambiente { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(255,0,0,.08) 0%, transparent 70%); z-index:2; pointer-events:none; animation:ambientGlow 8s ease-in-out infinite; }
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:3; }
.hero-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; text-align:center; color:#fff; padding:0; width:max-content; max-width:90%; animation:fadeInUp 1s ease-out; }
.hero-content h1 { font-family:'Bebas Neue', sans-serif; font-size:clamp(2.5rem, 6vw, 5rem); text-transform:uppercase; letter-spacing:10px; color:#fff; animation:cinematicEnter 1.3s ease-out forwards; text-shadow:0 0 8px var(--red), 0 0 5px #000; }
.hero-content p { font-size:1.3rem; color:#eee; text-shadow:1px 1px 5px rgba(0,0,0,.6); margin:1rem 0 2rem; animation:fadeInSubtitle 1.4s ease-out .6s forwards; opacity:0; }
@keyframes cinematicEnter { 0%{opacity:0; transform:translateY(20px); letter-spacing:4px;} 100%{opacity:1; transform:translateY(0); letter-spacing:10px;} }
@keyframes fadeInSubtitle { 0%{opacity:0; transform:translateY(30px); filter:blur(6px);} 100%{opacity:1; transform:translateY(0); filter:blur(0);} }
@keyframes ambientGlow { 0%,100%{opacity:.07} 50%{opacity:.12} }
.cta-btn { margin-top:3.5rem; padding:1rem 2.2rem; background:var(--red); color:#fff; font-weight:600; font-size:1rem; border-radius:50px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; position:relative; overflow:hidden; transition:all .3s ease; z-index:1; opacity:0; animation:revealButton 1.2s ease-out 1.2s forwards; box-shadow:0 0 20px color-mix(in oklab, var(--red) 30%, transparent); border:1px solid rgba(227,0,11,.4); }
.cta-btn::before { content:''; position:absolute; top:0; left:-100%; width:200%; height:100%; transform:skewX(-20deg); transition:left .5s ease; z-index:0; }
.cta-btn:hover { background:var(--red-2); box-shadow:0 0 40px rgba(255,26,26,.6); transform:translateY(-2px); }
@keyframes revealButton { 0%{opacity:0; transform:translateY(40px) scale(.98); filter:blur(4px);} 100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} }
/* Salta animaciones si el usuario ya vio la intro (clases que añade JS) */
body.skip-curtain .curtain { animation: none !important; transform: translateX(-100%) !important; }
body.skip-curtain .curtain-right { transform: translateX(100%) !important; }
body.skip-hero-anim .hero-ambiente { animation: none !important; }
body.skip-hero-anim .hero-content h1,
body.skip-hero-anim .hero-content p,
body.skip-hero-anim .cta-btn { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ========================================================================
   6) QUIÉNES SOMOS
   ======================================================================== */
.quienes-somos { position:relative; background:url('assets/imagen/fondo-historia.png') repeat center/240px 240px, radial-gradient(circle at top center, rgba(227,0,11,.07) 0%, transparent 70%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); z-index:1; padding:7rem 2rem; color:#fff; }
.quienes-somos::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.65) 100%); pointer-events:none; z-index:1; }
.quienes-somos .container { max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.quienes-grid { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:4rem; flex-wrap:wrap; }
.quienes-texto { flex:1; min-width:300px; }
.quienes-texto h2 { font-size:clamp(2rem,6vw,3rem); margin-bottom:.5rem; font-weight:800; color:var(--red-2); font-family:'Bebas Neue', sans-serif; text-shadow:0 0 15px rgba(227,0,11,.5); max-width:800px; }
.quienes-texto .subtitulo { font-size:1.2rem; color:#ddd; font-style:italic; margin-bottom:1.5rem; max-width:800px; }
.quienes-texto p { font-size:1.15rem; line-height:1.8; color:#eee; margin-bottom:1.2rem; max-width:600px; }
.quienes-imagen { flex:1; min-width:280px; text-align:center; }
.quienes-imagen img { max-width:100%; box-shadow:0 0 30px rgba(0,0,0,.7); border:20px solid black; border-left-width:10px; border-right-width:10px; transition:transform .4s ease, box-shadow .4s ease; }
.quienes-imagen img:hover { transform:scale(1.03); box-shadow:0 0 40px rgba(255,0,0,.5); }

/* Tabs + carruseles internos */
.qs-tabs { display:flex; gap:.8rem; justify-content:center; margin-bottom:.8rem; }
.qs-tab { background:var(--bg-2); color:#ddd; border:1px solid rgba(255,255,255,.15); padding:.5rem .9rem; border-radius:999px; font-weight:600; letter-spacing:.5px; cursor:pointer; transition:all .2s; }
.qs-tab.is-active { background:var(--red); color:#fff; border-color:color-mix(in oklab, var(--red) 60%, transparent); box-shadow:0 0 18px rgba(255,26,26,.25); }
.qs-tab:focus-visible { outline:2px solid var(--red-2); outline-offset:2px; }
.qs-default[hidden], .qs-carousel[hidden] { display:none !important; }
.qs-default img { width:100%; height:auto; display:block; }



/* Reel carousel */
#quienes-somos .reel-carousel { width:100% !important; max-width:none !important; padding:0 !important; margin:0 auto; overflow:hidden !important; position:relative; background:var(--bg-0); box-shadow: 0 40px 80px rgba(11,11,11,0.55), 0 8px 40px rgba(200,16,46,0.22); }
#quienes-somos .reel-track { display:flex; flex-wrap:nowrap !important; gap:0 !important; transition:transform .6s ease; will-change:transform; }
#quienes-somos .reel-frame { width:100% !important; max-width:600px; flex:0 0 auto !important; aspect-ratio:4/3; background:var(--brand-black, #0b0b0b); border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; position:relative; margin:0 auto; box-shadow: 0 10px 30px rgba(11,11,11,0.45), 0 2px 12px rgba(200,16,46,0.09); }
#quienes-somos .reel-frame img{ width:100%; height:100%; object-fit:cover; filter:none; transition:transform .35s ease; display:block; position:relative; z-index:0; }
#quienes-somos .reel-frame:is(:hover,:focus-within) img{ transform:scale(1.02); }
#quienes-somos .reel-caption{ display:none !important; }
#quienes-somos .reel-meta{ margin:14px auto 0; text-align:center; color:var(--brand-red, #c8102e); font-family:'Courier New', monospace; min-height:2.8em; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
#quienes-somos .reel-carousel.is-hot + .reel-meta{ opacity:1; transform:none; }
#quienes-somos .reel-meta__name{ margin:0; font-size:clamp(1.2rem,3.2vw,1.8rem); font-weight:700; color:var(--brand-white,#fff); text-shadow: 0 2px 18px rgba(200,16,46,0.12); letter-spacing: -0.2px; }
#quienes-somos .reel-meta__role{ margin:6px 0 0; font-size:clamp(.95rem,2.2vw,1.05rem); color:#ff4d4d; letter-spacing:1.6px; text-transform:uppercase; opacity:0.95; font-weight:600; }
#quienes-somos .reel-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.6); border:none; color:var(--brand-white, #ffffff); font-size:1.6rem; cursor:pointer; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; z-index:6; box-shadow:0 6px 18px rgba(0,0,0,0.35); transition:box-shadow .18s ease, background .18s ease, transform .12s ease; }
#quienes-somos .reel-arrow svg, #quienes-somos .reel-arrow i { color:var(--brand-white, #fff); fill:var(--brand-white, #fff); stroke:var(--brand-white, #fff); }
#quienes-somos .reel-arrow:hover, #quienes-somos .reel-arrow:focus { background:rgba(200,16,46,1); color:var(--brand-white, #fff); box-shadow: 0 18px 48px rgba(11,11,11,0.55), 0 8px 40px rgba(200,16,46,0.38); }
#quienes-somos .reel-arrow:focus-visible { outline:3px solid rgba(200,16,46,0.14); outline-offset:4px; }
#quienes-somos .reel-prev{left:8px} #quienes-somos .reel-next{right:8px}

/* ========================================================================
   7) SERVICIOS
   ======================================================================== */
.servicios { padding:6rem 2rem; background-image: image-set(
    url('assets/imagen/fondo-servicios-1280.avif') type('image/avif') 1x,
    url('assets/imagen/fondo-servicios-1280.webp') type('image/webp') 1x,
    url('assets/imagen/fondo-servicios.png') type('image/png') 1x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; color:#fff; text-align:center; position:relative; z-index:1; }
.servicios::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.06) 100%); mix-blend-mode:overlay; pointer-events:none; animation:flicker 6s infinite; }
.servicios::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
@keyframes flicker { 0%,100%{opacity:.25} 50%{opacity:.1} }
.titulo-seccion { font-size:clamp(2rem,6vw,3rem); font-family:'Bebas Neue', sans-serif; color:var(--red-2); margin-bottom:2.5rem; }
.titulo-seccion::after{ content:''; display:block; margin:.5rem auto 0; width:60px; height:3px; background:#ff4d4d; animation:fadeIn 1s ease-out; }
.servicios-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; }
.servicio-box { position:relative; background:#121212; padding:2.5rem; border-radius:20px; width:280px; box-shadow:0 6px 20px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06); overflow:hidden; transition:all .4s ease; isolation:isolate; min-height: 360px; }
.servicio-media { position:absolute; inset:0; z-index:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s ease; background:var(--bg-0); width:100%; height:100%; }
.servicio-media .servicio-video { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.95) contrast(1.05); transition:transform .8s cubic-bezier(.2,.65,.2,1); transform: none; }
.servicio-media .servicio-video,
.servicio-media img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.servicio-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; transition:opacity .35s ease, transform .35s ease; min-height: 220px; }
.servicio-box:hover .servicio-media, .servicio-box.is-playing .servicio-media { opacity:1; visibility:visible; }
.servicio-box:hover .servicio-media .servicio-video { transform:scale(1.08); }
.servicio-box:hover .servicio-content { opacity:1; transform:translateY(-6px); }
.servicio-box p { font-size:1rem; color:#eee; line-height:1.6; opacity:.9; max-height:240px; overflow:hidden; transition:opacity .25s ease, max-height .30s ease; line-height: 1.6; }
.servicio-box:hover p { opacity:0; max-height:0; }
.servicio-box::before { content:''; position:absolute; top:var(--y,50%); left:var(--x,50%); transform:translate(-50%,-50%); width:0; height:0; background:radial-gradient(circle, rgba(255,0,0,.15) 0%, transparent 70%); border-radius:50%; pointer-events:none; transition:width .4s ease, height .4s ease; }
.servicio-box:hover::before { width:300px; height:300px; }
.servicio-box:hover { box-shadow:0 0 35px rgba(255,0,0,.4); }
.servicio-media::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%), linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45)); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.servicio-box:hover .servicio-media::after { opacity:.45; }
.icono-servicio img { width:60px; height:60px; margin-bottom:1rem; transition:transform .3s ease, filter .3s ease; }
.servicio-box:hover .icono-servicio img { transform:scale(1.1); filter:drop-shadow(0 0 8px rgba(255,0,0,.8)); }
.servicio-box h3 { font-family:'Bebas Neue', sans-serif; font-size:1.6rem; letter-spacing:1px; position:relative; line-height: 1.2; }
.servicio-box h3::after{ content:''; position:absolute; left:0; bottom:-4px; width:0%; height:2px; background:var(--red-2); transition:width .3s ease; }
.servicio-box:hover h3::after{ width:100%; }

/* ========================================================================
   8) PORTAFOLIO / CARTELERA
   ======================================================================== */
/* Contenedor de sección con fondo cinematográfico + grano */
.portafolio-cartelera { padding:6rem 2rem; position:relative; overflow:hidden; text-align:center; background:
  radial-gradient(1200px 600px at 18% 0%, rgba(255,0,0,.08), transparent 60%),
  radial-gradient(900px 450px at 85% 100%, rgba(255,0,0,.06), transparent 55%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 8px),
  linear-gradient(180deg, var(--bg-0, #0b0b0d) 0%, #141414 100%);
  box-shadow: inset 0 40px 120px rgba(0,0,0,.6), inset 0 -60px 120px rgba(0,0,0,.8);
}
.portafolio-cartelera::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(200% 120% at 50% -10%, rgba(255,255,255,.025), transparent 55%),
  url("/assets/imagen/grain-2px.png") repeat; background-size:auto, 2px 2px; opacity:.06; mix-blend-mode:normal; }

/* Título */
.titulo-portafolio { font-size:3rem; color:var(--red); font-family:'Bebas Neue', sans-serif; margin-bottom:3rem; letter-spacing:1px; }

/* Grid base (fallback / desktop si no hay JS) */
.cartelera { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }

/* Tarjeta */
.cartel { width:240px; background:var(--bg-2); border-radius:12px; border:1px solid rgba(255,255,255,.06); overflow:hidden; transform:perspective(800px) rotateX(0) rotateY(0); transition:transform .4s ease, box-shadow .4s ease; position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 40px rgba(0,0,0,.45); }
.cartel:hover { transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-2px); }
.cartel-img img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; display:block; border-radius:6px 6px 0 0; filter:brightness(1.05) contrast(1.1); }

/* Enlace del póster (desactivado: solo el botón "Ver" es clicable) */
.cartel-link { position:relative; display:block; pointer-events:none; cursor:default; color:inherit; text-shadow:none; text-decoration:none; }
.cartel-link:focus { outline:none; }

/* Hover Overlay: oscurece + título + botón Ver */
.cartel-hover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding:1rem; background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.75)); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:2; backdrop-filter:saturate(110%) blur(.5px); pointer-events:auto; }
/* Blindaje adicional: solo el botón acepta interacción dentro del overlay */
.cartel-hover * { pointer-events:none; }     /* bloquea hijos por defecto */
.cartel-cta     { pointer-events:auto; }     /* ✅ el botón sí recibe el click */
.cartel:hover .cartel-hover, .cartel:focus-within .cartel-hover { opacity:1; visibility:visible; transform:none; }
.cartel-hover__title, .cartel-hover h3 { margin:0; font-family:'Bebas Neue', sans-serif; font-size:1.6rem; letter-spacing:1px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.cartel-cta { display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--red-2); color:#fff; font-weight:700; letter-spacing:.3px; text-transform:uppercase; font-size:.9rem; backdrop-filter:blur(4px); background:color-mix(in oklab, #000 60%, var(--red) 10%); transition:transform .15s ease, background .2s ease, border-color .2s ease; pointer-events:auto; cursor:pointer; }
.cartel-cta:hover { transform:translateY(-1px); background:var(--red-2); border-color:var(--red-2); }

/* Modal vídeo (detallado) */
dialog.umd-vp{ border:none; padding:0; background:transparent; }
dialog.umd-vp::backdrop{ background:rgba(0,0,0,.85); }
dialog.umd-vp[open]{ position:fixed; inset:0; display:grid; place-items:center; padding:0; background:transparent; }
.umd-vp__frame{ width:min(960px,92vw); margin:0 !important; position:relative; }
.umd-vp__ratio{ position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.umd-vp__ratio iframe, .umd-vp__ratio video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.umd-vp__close{ position:fixed; top:16px; right:16px; z-index:10; border:none; background:#fff; padding:.5rem .65rem; border-radius:999px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); }
body:has(dialog.umd-vp[open]){ overflow:hidden; } /* Fallback: usar .umd-modal-open en JS si hace falta */
body.umd-modal-open{ overflow:hidden; }

/* Modal detallado (vídeo + meta) */
.umd-vp__body{ display:block; }
.umd-vp__meta[hidden]{ display:none !important; }
.umd-vp--detail .umd-vp__frame{ width:min(1200px,96vw); }
.umd-vp--detail .umd-vp__body{ display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:1rem; align-items:start; }
.umd-vp__meta{ background:var(--bg-2); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1rem 1rem 1.1rem; text-align:left; max-height:70vh; overflow:auto; color:#eee; }
.umd-vp__title{ margin:0 0 .25rem; font-family:'Bebas Neue', sans-serif; font-size:clamp(1.4rem,2.4vw,1.8rem); color:#fff; letter-spacing:.5px; }
.umd-vp__year{ margin:0 0 .5rem; color:#fff; opacity:.85; font-weight:600; }
.umd-vp__desc{ margin:.25rem 0 0; line-height:1.55; color:#eee; }
@media (max-width:900px){ .umd-vp--detail .umd-vp__body{ grid-template-columns:1fr; } .umd-vp__meta{ max-height:none; } }

/* Filtros Portafolio */
.portfolio-filters{ display:flex; gap:.75rem; justify-content:center; align-items:center; margin:-1rem 0 2rem; flex-wrap:wrap; }
.pf-btn{ border:1px solid color-mix(in oklab, var(--red-2) 60%, #fff 0%); background:color-mix(in oklab, #000 80%, var(--red) 20%); color:#fff; padding:.5rem .9rem; border-radius:999px; font-weight:700; letter-spacing:.3px; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.pf-btn:hover{ transform:translateY(-1px); }
.pf-btn.is-active{ background:var(--red-2); border-color:var(--red-2); box-shadow:0 6px 22px rgba(255,0,0,.18); }

/* ========================================================================
   9) CONTACTO
   ======================================================================== */
.contact-section { background:#0b0b0b; padding:60px 20px; text-align:center; box-shadow:inset 0 0 50px rgba(255,0,0,.05); }
.contact-section h2{ color:var(--red-2); font-size:clamp(2rem,6vw,3rem); margin-bottom:30px; }
.contact-microcopy{ font-size:clamp(.9rem,2.5vw,1rem); color:rgba(255,255,255,.8); margin-bottom:1.5rem; font-style:italic; }
.contact-form{ max-width:600px; margin:0 auto; display:grid; gap:1rem; grid-auto-rows:min-content; }
.contact-form>*{ min-width:0; }
.contact-form input,.contact-form textarea,.contact-form select{ width:100%; background:var(--bg-2); border:1px solid #333; color:#fff; padding:15px; margin-bottom:20px; border-radius:6px; font-size:1rem; }
.contact-form textarea{ min-height:150px; resize:vertical; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-label{ font-size:.95rem; font-weight:600; color:rgba(255,255,255,.85); text-align:left; display:block; margin-bottom:6px; }
.contact-form input[type="date"]{ height:52px; line-height:52px; color-scheme:dark; }
.contact-form input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.85); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:none; border-color:color-mix(in oklab, var(--red-2) 60%, #333); box-shadow:0 0 0 3px rgba(255,26,26,.15); }
.inline-group{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.inline-group .inline{ display:flex; flex:0 1 auto; gap:.5rem; align-items:center; font-size:.95rem; color:#ddd; background:var(--bg-2); border:1px solid #333; padding:10px 14px; border-radius:999px; cursor:pointer; user-select:none; transition:border-color .2s, background .2s, transform .1s; }
.inline-group .inline:hover{ border-color:#555; transform:translateY(-1px); }
.inline-group .inline input{ accent-color:var(--red-2); }
.contact-form button{ background:#ff1f1f; color:#fff; border:none; padding:12px 25px; border-radius:6px; font-weight:bold; font-size:1rem; cursor:pointer; transition:background-color .3s ease; }
.contact-form button:hover{ background:#cc0000; }
.mensaje-exito,.mensaje-error{ margin-top:20px; font-weight:bold; padding:.8rem 1rem; border-radius:6px; }
.mensaje-exito{ color:#4caf50; background:#0f2b15; border:1px solid #3a5; }
.mensaje-error{ color:#f44336; background:#2b0c0c; border:1px solid #a33; }

/* ========================================================================
   10) FOOTER
   ======================================================================== */
.site-footer{ position:fixed; left:0; right:0; bottom:0; background:linear-gradient(to bottom, var(--bg-2) 0%, var(--bg-0) 100%); padding:50px 20px 40px; text-align:center; border-top:1px solid rgba(255,0,0,.1); box-shadow:0 -5px 20px rgba(255,0,0,.1); transform:translateY(100%); opacity:0; pointer-events:none; transition:transform .45s ease, opacity .35s ease; z-index:999; will-change:transform, opacity; backface-visibility:hidden; }
body.footer-open .site-footer{ transform:translateY(0); opacity:1; pointer-events:auto; }
/* Partners carousel */
.footer-partners{ margin:0 auto 24px; max-width:1200px; padding-inline:12px; }
.partners-carousel{ position:relative; max-width:1200px; margin:0 auto; }
.partners-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.partners-viewport::-webkit-scrollbar{ display:none; }
.partners-row{ display:flex; flex-wrap:nowrap !important; gap:clamp(24px,4vw,48px); padding:8px 6px; align-items:center; }
.partner{ flex:0 0 clamp(160px, 18vw, 220px); display:flex; flex-direction:column; align-items:center; text-align:center; scroll-snap-align:center; user-select:none; }
.partner img{
  display:block;
  max-width:100%;
  max-height:90px;
  width:auto;
  height:auto;
  aspect-ratio: 3 / 1; /* reserva altura visual aproximada para evitar CLS */
  object-fit:contain;
  filter:grayscale(100%) contrast(1.05) brightness(.92);
  transition:filter .25s ease, transform .25s ease;
}
.partner span{ margin-top:8px; font-size:.9rem; color:#fff; opacity:.85; min-height:1.6em; }
.partner:hover img{ filter:grayscale(0%) contrast(1.08) brightness(1); transform:scale(1.05); }
.partner:hover span{ opacity:1; }
.partners-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,44,44,.25); background:rgba(0,0,0,.55); color:#ff2c2c; display:grid; place-items:center; font-size:28px; line-height:1; cursor:pointer; z-index:2; transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.partners-arrow:hover{ transform:translateY(-50%) scale(1.05); background-color:rgba(255,44,44,.15); box-shadow:0 0 14px rgba(255,0,0,.25); }
.partners-prev{ left:-6px; } .partners-next{ right:-6px; }
@media (max-width:680px){ .partners-arrow{ display:none; } }
@media (min-width:681px){ .partners-carousel{ overflow:visible; } .partners-prev{ left:-54px; } .partners-next{ right:-54px; } }
.footer-heading{ color:#ff2c2c; font-family:'Bebas Neue', sans-serif; font-size:2rem; letter-spacing:1.5px; margin-bottom:20px; text-shadow:0 0 10px rgba(255,0,0,.5); animation:fadeIn 1.2s ease-in-out; }
.footer-social{ display:flex; justify-content:center; gap:40px; margin-bottom:25px; }
.footer-social a{ font-size:30px; color:#ff2c2c; transition:transform .25s ease, color .25s ease; background:none; border:none; box-shadow:none; border-radius:0; padding:6px; display:inline-flex; align-items:center; justify-content:center; line-height:1; text-decoration:none !important; }
.footer-social a i, .footer-social a svg{ width:1em; height:1em; display:block; }
.footer-social a img{ width:28px; height:28px; object-fit:contain; display:block; }
.footer-social a:hover{ transform:translateY(-2px) scale(1.05); color:#fff; }
.footer-copy{ color:#bbb; font-size:.95rem; font-style:italic; margin-top:20px; text-shadow:0 0 5px #000; }

/* ========================================================================
   11) NOTIFICACIONES + TRANSICIONES DE PÁGINA
   ======================================================================== */
.notification{ position:fixed; top:80px; left:50%; transform:translateX(-50%); padding:15px 30px; border-radius:8px; font-weight:bold; text-align:center; width:90%; max-width:600px; z-index:10000; box-shadow:0 4px 12px rgba(0,0,0,.3); animation:slideIn .3s ease-out; }
.notification.success{ background:#0f2b15; color:#4caf50; border:1px solid #3a5; }
.notification.error{ background:#2b0c0c; color:#f44336; border:1px solid #a33; }
.notification.fade-out{ animation:fadeOut .5s ease-out forwards; }
@keyframes slideIn { from{ top:-50px; opacity:0;} to{ top:80px; opacity:1;} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }
body.is-entering main{ opacity:0; transform:translateY(8px); }
body.is-ready main{ opacity:1; transform:none; transition:opacity .35s ease, transform .35s ease; }
#page-fader{ position:fixed; inset:0; background:var(--bg-0); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:9999; }
body.is-leaving #page-fader{ opacity:1; }

/* Defensive: hide the global page-fader and intro-overlay on any page that is NOT the front page
   The front page adds `intro-active` to <body> (see header.php). This ensures the cinematic
   intro still works on the home page while preventing stray overlays from blocking
   internal pages when deferred scripts or race conditions insert them. */
body:not(.intro-active) #page-fader,
body:not(.intro-active) .intro-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========================================================================
   12) SCROLLREVEAL: fallback + aislamiento Portafolio
   ======================================================================== */
/* Visibilidad segura por defecto */
.fade-up, .quienes-texto, .servicio-box, .cartel { opacity:1; visibility:visible; transform:none; }
/* Animar solo cuando SR esté armado (Portafolio queda fuera) */
body.sr-armed .fade-up, body.sr-armed .quienes-texto, body.sr-armed .servicio-box { opacity:0; visibility:hidden; transform:translateY(15px); }
/* Fallback explícito si marcamos no-sr desde JS */
body.no-sr .fade-up, body.no-sr .quienes-texto, body.no-sr .servicio-box, body.no-sr .cartel { opacity:1 !important; visibility:visible !important; transform:none !important; }
/* Blindaje Portafolio */
body.sr-armed .cartel, body.sr-armed .cartel .fade-up{ opacity:1 !important; visibility:visible !important; transform:none !important; }

/* ✅ Móvil táctil: desactivar cualquier ocultamiento/animación de ScrollReveal para tarjetas del portafolio */
body.no-sr-mobile .cartel,
body.no-sr-mobile .cartel .fade-up {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Pequeña guía visual centrada en pantallas táctiles para indicar el punto de snap (sólo sugerencia visual) */
@media (max-width:680px){
  .cartelera.cartelera--reel::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-0.5px);
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    pointer-events: none;
    opacity: 0.08;
    z-index: 3;
  }
}

/* ========================================================================
   13) PORTAFOLIO · CARRUSEL (Escritorio + Tablet + Móvil)
   ======================================================================== */
.portafolio-cartelera { position:relative; } /* posicionamiento de flechas */

/* Activado por JS: .cartelera.cartelera--reel */
.cartelera.cartelera--reel{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(220px,16vw,300px); gap:1rem; overflow-x:auto; overflow-y:visible; padding:0 24px; scroll-snap-type:x proximity; scroll-padding:0 24px; -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain; scrollbar-width:none; justify-content:start; }
.cartelera.cartelera--reel::-webkit-scrollbar{ display:none; }
.cartelera.cartelera--reel .cartel{ width:auto; scroll-snap-align:start; overflow:visible; }

/* Mejoras para scroll lateral en móvil: snap centrado y scroll suave */
@media (max-width:680px){
  .cartelera.cartelera--reel{ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling:touch; }
  .cartelera.cartelera--reel .cartel{ scroll-snap-align: center; }
  /* Reducir gap ligeramente para mejor sensación táctil */
  .cartelera.cartelera--reel{ gap: .7rem; }
}
.cartelera.cartelera--reel.is-dragging{ scroll-snap-type:none; }
/* Flechas */
.pf-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.25); color:#fff; z-index:5; backdrop-filter:blur(4px); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.pf-prev{ left:.25rem; } .pf-next{ right:.25rem; }
.pf-arrow:disabled{ opacity:.35; cursor:default; }
/* Gutter + snap consistentes (también desktop) */
.cartelera.cartelera--reel{ padding-inline-start:clamp(16px,6vw,48px); padding-inline-end:clamp(16px,6vw,48px); scroll-padding-inline-start:clamp(16px,6vw,48px); scroll-padding-inline-end:clamp(16px,6vw,48px); }
.cartelera.cartelera--reel > .cartel:first-child{ scroll-margin-inline-start:clamp(16px,6vw,48px); }
@media (max-width:1024px){ .cartelera.cartelera--reel{ grid-auto-columns:clamp(46%,60vw,320px); padding:0 16px; } }
@media (max-width:680px){ .cartelera.cartelera--reel{ grid-auto-columns:78vw; gap:.9rem; padding-inline-start:11vw; padding-inline-end:22vw; } .pf-prev,.pf-next{ display:none; } }

/* ========================================================================
   14) RESPONSIVE (nav, hero, grids, etc.)
   ======================================================================== */

@media (max-width: 768px){
  .servicios{
    background-image: image-set(
      url('assets/imagen/fondo-servicios-768.avif') type('image/avif') 1x,
      url('assets/imagen/fondo-servicios-768.webp') type('image/webp') 1x,
      url('assets/imagen/fondo-servicios.png') type('image/png') 1x
    );
    background-attachment: scroll; /* evita jank en móvil */
  }
}
@media (max-width:768px){
  .main-nav .nav-links{ display:none; position:absolute; top:60px; left:0; width:100%; background:rgba(0,0,0,.9); flex-direction:column; padding:20px; text-align:center; }
  .main-nav .nav-links.active{ display:flex; }
  .hamburger{ display:block; }
  .main-nav .nav-links a{ font-size:1.2rem; padding:10px 0; }
  .logo-navbar{ height:46px; }
  .intro-sub{ font-size:16px; }
  .hero-content h1{ font-size:2.5rem; }
  .hero-content p{ font-size:1rem; }
  .quienes-somos, .servicios{ padding:3rem 1.5rem; }
  .quienes-grid{ flex-direction:column-reverse; text-align:center; }
  .quienes-texto h2{ font-size:1.8rem; }
  .quienes-texto p{ font-size:1rem; line-height:1.7; }
  .servicio-box{ width:90%; }
  .servicio-media{ opacity:0; visibility:hidden; }
  .servicio-box.is-playing .servicio-media{ opacity:1; visibility:visible; }
  .titulo-seccion{ font-size:2rem; }
  .cta-btn{ animation:revealButton 1.2s ease-out 1.2s forwards; }
  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .contact-form textarea, .contact-form button{ grid-column:1 / -1; }
  .contact-form button{ justify-self:center; }
  .qs-carousel{ padding-inline:1.75rem; }
  .qs-prev{ left:.15rem; } .qs-next{ right:.15rem; }
  .notification{ top:100px; }
}
@media (max-width:767.98px){ .contact-form button{ width:100%; } }
@media (max-width:500px){
  .logo-navbar{ height:40px; }
  .navbar{ padding:10px 20px; }
  .intro-sub{ font-size:14px; }
  .cta-btn{ display:block; margin:20px auto 0; padding:12px 24px; font-size:14px; text-align:center; }
  .hero-content{ display:flex; flex-direction:column; align-items:center; }
  .titulo-portafolio{ font-size:2rem; line-height:1.2; }
  .cartel{ width:85%; margin:0 auto; }
}
@media (min-width:768px){
  .hero-content{ transform:translate(-49%,-50%); }
  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .contact-form textarea, .contact-form button{ grid-column:1 / -1; }
  .contact-form button{ justify-self:center; }
}

/* Touch targets + rendimiento */
.hero-content, .curtain, .servicio-box, .reel-track { will-change:transform, opacity; }
.hamburger, .qs-arrow, .reel-arrow, .cta-btn { touch-action:manipulation; }

/* Ajustes móviles reel */
@media (max-width:600px){
  #quienes-somos .reel-frame{ max-width:90vw !important; }
  #quienes-somos .reel-arrow{ width:40px; height:40px; font-size:1.5rem; }
  #quienes-somos .reel-caption h3{ font-size:1.2rem; }
  #quienes-somos .reel-caption p{ font-size:1rem; }
}

/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .curtain-left, .curtain-right { transform: translateX(0) !important; }
  .hero-ambiente { animation: none !important; }
}

/* Ajustes de anclado en móvil (header fijo) */
@media (max-width:768px){ #quienes-somos, #qsMedia, .qs-tabs{ scroll-margin-top:120px; } }

/* Táctiles: asegurar vídeo visible si está reproduciéndose */
@media (hover:none) and (pointer:coarse){ .servicio-box.is-playing .servicio-media{ opacity:1 !important; visibility:visible !important; } #quienes-somos .reel-frame img{ filter:none; } #quienes-somos .reel-meta{ opacity:1; transform:none; } }

/* Evitar que ScrollReveal oculte/animen estas tarjetas en móvil si activamos esta clase */
@media (max-width:768px){
  body.no-sr-mobile .servicio-box,
  body.no-sr-mobile .cartel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* === WhatsApp CTA ============================================== */
.btn-umd {
  display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius:999px;
  font-weight:600; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid rgba(255,0,0,.45);
  background: rgba(0,0,0,.7);
  color:#fff;
}
.btn-umd--whatsapp:hover {
  background: linear-gradient(135deg,#ff1a1a,#cc0000);
  box-shadow:0 0 16px rgba(255,0,0,.45);
  transform: translateY(-1px);
}
.btn-umd--whatsapp svg { display:block; }

/* FAB móvil (visible <992px) */
.wa-fab{
  position:fixed; right:14px; bottom:16px; z-index:9999;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,#ff1a1a,#cc0000);
  box-shadow:0 8px 24px rgba(255,0,0,.35), 0 2px 6px rgba(0,0,0,.45);
  border:1px solid rgba(255,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wa-fab:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(255,0,0,.45), 0 3px 8px rgba(0,0,0,.5); }

/* Solo mostrar fab en móvil/tablet; en escritorio lo puedes colocar en el header con el shortcode */
@media (min-width: 992px){
  .wa-fab { display:none; }
}