/* =========================================================
   BOLAZO FILMS — Hoja de estilos principal
   Sistema de marca: navy / dorado / verde azulado / blanco roto
   Tipografía: Coolvetica (Compressed/Regular) · Lemon Milk · Bodoni Moda
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

@font-face{font-family:'Coolvetica';src:url('fonts/Coolvetica-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Coolvetica';src:url('fonts/Coolvetica-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Coolvetica Compressed';src:url('fonts/Coolvetica-Compressed.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Coolvetica Condensed';src:url('fonts/Coolvetica-Condensed.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lemon Milk';src:url('fonts/LemonMilk-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Lemon Milk';src:url('fonts/LemonMilk-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lemon Milk';src:url('fonts/LemonMilk-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Lemon Milk';src:url('fonts/LemonMilk-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --navy:#15172E;
  --navy-deep:#0D0E1E;
  --teal:#249B8B;
  --gold:#D6CA79;
  --offwhite:#E8EBF1;
  --white:#FFFFFF;
  --slate:#9AA0C8;
  --f-display:'Coolvetica Compressed', Impact, 'Arial Narrow', sans-serif;
  --f-body:'Coolvetica', Georgia, serif;
  --f-label:'Lemon Milk', 'Arial Narrow', sans-serif;
  --f-accent:'Bodoni Moda', 'Times New Roman', serif;
  --section-pad: clamp(24px, 6vw, 96px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy);
  color:var(--offwhite);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0 0 1em;}
::selection{background:var(--teal);color:var(--navy);}

/* ---------- Scroll container ---------- */
.scroller{
  height:100vh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.screen{
  min-height:100vh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--section-pad) + 70px) var(--section-pad) var(--section-pad);
  border-top:1px solid rgba(232,235,241,0.06);
}
.screen--scroll{ /* long content sections may scroll internally on small screens */
  min-height:100vh;
  height:auto;
}

/* ---------- Top navigation ---------- */
.topnav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px clamp(20px,4vw,56px);
  background:linear-gradient(to bottom, rgba(13,14,30,0.85), transparent);
}
.topnav__logo{display:flex;align-items:center;gap:10px;}
.topnav__logo img{height:30px;width:auto;}
.topnav__links{display:flex;align-items:center;gap:clamp(18px,3vw,40px);font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.topnav__links a{padding:6px 2px;position:relative;color:var(--offwhite);opacity:.85;transition:opacity .2s, color .2s;}
.topnav__links a:hover, .topnav__links a.active{opacity:1;color:var(--gold);}
.dropdown{position:relative;}
.dropdown__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--navy-deep);
  border:1px solid rgba(214,202,121,0.2);
  border-radius:2px;
  min-width:220px;
  padding:10px 0;
  opacity:0;visibility:hidden;
  transform-origin:top center;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown:hover .dropdown__panel, .dropdown:focus-within .dropdown__panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.dropdown__panel a{display:block;padding:10px 22px;font-size:11px;white-space:nowrap;}
.dropdown__panel a:hover{background:rgba(214,202,121,0.08);}
.burger{display:none;background:none;border:0;color:var(--offwhite);font-size:22px;cursor:pointer;}

/* ---------- Side dot navigation ---------- */
.dotnav{
  position:fixed;right:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:16px;
}
.dotnav a{
  width:9px;height:9px;border-radius:50%;
  background:rgba(232,235,241,0.28);
  border:1px solid transparent;
  transition:background .25s, transform .25s, border-color .25s;
  display:block;
}
.dotnav a:hover{background:var(--gold);transform:scale(1.2);}
.dotnav a.active{background:var(--teal);border-color:var(--gold);transform:scale(1.3);}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold);display:inline-block;}
.section-title{
  font-family:var(--f-display);
  font-size:clamp(38px, 7vw, 84px);
  line-height:.95;
  color:var(--offwhite);
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:20px;
}
.section-title em{font-style:normal;color:var(--teal);}
.section-num{
  position:absolute;top:var(--section-pad);left:var(--section-pad);
  font-family:var(--f-display);font-size:14px;color:var(--slate);letter-spacing:.15em;
}

/* ---------- INICIO ---------- */
#inicio{padding:0;justify-content:center;align-items:center;}
.hero{position:relative;width:100%;height:100vh;overflow:hidden;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy-deep);}
.hero__bg video{width:100%;height:100%;object-fit:cover;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(13,14,30,.55) 0%, rgba(21,23,46,.35) 45%, rgba(13,14,30,.75) 100%);}
.hero__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
.hero__lockup{height:clamp(130px,18vw,210px);width:auto;max-width:80%;margin-bottom:26px;display:block;margin-left:auto;margin-right:auto;}
.hero__slogan{font-family:var(--f-body);font-weight:400;font-size:clamp(16px,2.1vw,24px);color:var(--offwhite);letter-spacing:.01em;}
.hero__quicknav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:11px 16px;margin-top:34px;max-width:820px;}
.hero__quicknav a{
  font-family:var(--f-label);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);opacity:.82;padding:2px 0;border-bottom:1px solid transparent;
  transition:opacity .2s, color .2s, border-color .2s;
}
.hero__quicknav a:hover{opacity:1;color:var(--offwhite);border-color:rgba(232,235,241,.5);}
.hero__quicknav-sep{color:rgba(214,202,121,.4);font-size:13px;line-height:1;}
.hero__scrolldown{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-label);font-size:10px;letter-spacing:.2em;color:var(--offwhite);opacity:.7;text-transform:uppercase;}
.hero__scrolldown .arrow{width:1px;height:34px;background:linear-gradient(var(--gold), transparent);animation:pulse-down 2s ease-in-out infinite;}
@keyframes pulse-down{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ---------- Galleries ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:120px;
  grid-auto-flow:dense;
  gap:8px;
  margin-top:36px;
  width:100%;
}
.gallery a, .gallery__item{position:relative;overflow:hidden;border-radius:1px;display:block;background:var(--navy-deep);}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.gallery a:hover img{transform:scale(1.06);}
.gallery__item--wide{grid-column:span 2;grid-row:span 2;}
.gallery__item--tall{grid-column:span 2;grid-row:span 3;}
.gallery__item--big{grid-column:span 3;grid-row:span 3;}
.gallery__item--sm{grid-column:span 2;grid-row:span 2;}
.gallery-caption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 10px;
  background:linear-gradient(180deg, transparent, rgba(13,14,30,.92));
  font-family:var(--f-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--offwhite);
  opacity:0;transform:translateY(6px);transition:opacity .25s, transform .25s;
}
.gallery a:hover .gallery-caption{opacity:1;transform:translateY(0);}

/* ---------- Video grids (embeds) ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;width:100%;}
.video-grid--2{grid-template-columns:repeat(2,1fr);}
.video-card{background:var(--navy-deep);border:1px solid rgba(232,235,241,0.08);}
.video-card__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.video-card__frame--vert{aspect-ratio:9/16;}
.video-card__frame iframe, .video-card__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card__meta{padding:14px 16px;}
.video-card__artist{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.video-card__title{font-family:var(--f-body);font-size:14px;color:var(--offwhite);opacity:.85;margin-top:4px;}
.video-card__tag{display:inline-block;margin-top:8px;font-family:var(--f-label);font-size:9px;letter-spacing:.1em;color:var(--teal);text-transform:uppercase;border:1px solid rgba(36,155,139,.4);padding:2px 8px;border-radius:20px;}

.section-scrollbox{width:100%;max-height:64vh;overflow-y:auto;overscroll-behavior-y:contain;padding-right:6px;-webkit-overflow-scrolling:touch;}
.section-scrollbox::-webkit-scrollbar{width:5px;}
.section-scrollbox::-webkit-scrollbar-thumb{background:rgba(214,202,121,.4);border-radius:4px;}

/* ---------- BODAS (Bodoni accent) ---------- */
#bodas .section-title{font-family:var(--f-accent);font-style:italic;font-weight:500;text-transform:none;font-size:clamp(38px,6.4vw,72px);}
#bodas .eyebrow{color:var(--offwhite);}
.bodas-video-slot{
  margin-top:30px;width:100%;max-width:760px;aspect-ratio:16/9;
  border:1px dashed rgba(214,202,121,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:center;padding:20px;
}

/* ---------- Sobre Bolazo ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;width:100%;margin-top:26px;}
.about__photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.about__photo-col{display:flex;flex-direction:column;}
.about__photo{position:relative;overflow:hidden;}
.about__photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;}
.about__caption{font-family:var(--f-body);font-size:12px;color:var(--slate);margin-top:8px;letter-spacing:.01em;}
.about__caption strong{color:var(--offwhite);font-weight:400;}
.about__text p{font-size:15.5px;color:var(--offwhite);opacity:.9;margin-bottom:1.3em;}

/* ---------- Editorial gallery (uncropped, 3 per row) ---------- */
.editorial-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;width:100%;}
.editorial-gallery__item{display:block;overflow:hidden;border-radius:1px;background:var(--navy-deep);}
.editorial-gallery__item img{width:100%;height:auto;display:block;transition:transform .6s ease;}
.editorial-gallery__item:hover img{transform:scale(1.03);}
.editorial-gallery__horizontals{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;width:100%;margin-top:26px;}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form input,.contact-form textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(232,235,241,.3);
  color:var(--offwhite);font-family:var(--f-body);font-size:15px;padding:10px 2px;outline:none;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--slate);}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold);}
.contact-form button{
  margin-top:10px;align-self:flex-start;background:var(--teal);color:var(--navy-deep);
  border:0;padding:14px 34px;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.contact-form button:hover{background:var(--gold);}
.contact-info{display:flex;flex-direction:column;gap:26px;}
.contact-info__block h4{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.contact-info__block p, .contact-info__block a{font-size:15px;color:var(--offwhite);opacity:.9;}
.social-row{display:flex;gap:18px;margin-top:6px;}
.social-row a{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(214,202,121,.4);padding-bottom:2px;}
.social-row a:hover{color:var(--gold);border-color:var(--gold);}
.footer-mini{margin-top:60px;font-size:12px;color:var(--slate);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;width:100%;}
.footer-mini__legal{display:flex;gap:16px;flex-wrap:wrap;}
.footer-mini__legal a{font-size:12px;color:var(--slate);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(154,160,200,.4);}
.footer-mini__legal a:hover{color:var(--gold);text-decoration-color:var(--gold);}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .topnav__links{display:none;}
  .burger{display:block;}
  .dotnav{display:none;}
  .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:100px;}
  /* Las fotos llevan una posición de rejilla fija calculada en Python
     para la rejilla de escritorio (6 columnas). En una rejilla más
     estrecha esa posición fija sobra columnas por fuera de las
     definidas y el navegador crea una columna extra diminuta para
     encajarla — de ahí la tira fina de foto que se veía pegada al
     borde. La anulamos aquí y dejamos que cada foto solo ocupe el
     ancho/alto que le toca según su tipo. */
  .gallery a{grid-column:auto !important;grid-row:auto !important;}
  .gallery__item--big{grid-column:span 3 !important;grid-row:span 2 !important;}
  .gallery__item--wide{grid-column:span 2 !important;grid-row:span 2 !important;}
  .gallery__item--tall{grid-column:span 2 !important;grid-row:span 3 !important;}
  .editorial-gallery{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:1fr 1fr;}
  .video-grid--2{grid-template-columns:1fr;}
  .about,.contact{grid-template-columns:1fr;gap:34px;}
  .about__photos{grid-template-columns:1fr 1fr;}
}
@media (max-width: 600px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
  .gallery a{grid-column:auto !important;grid-row:auto !important;}
  .gallery__item--big,.gallery__item--wide,.gallery__item--tall{grid-column:span 2 !important;grid-row:span 2 !important;}
  .editorial-gallery{grid-template-columns:repeat(2,1fr);}
  .editorial-gallery__horizontals{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .about__photos{grid-template-columns:1fr;}
}

/* ---------- Scroll táctil ---------- */
/* En pantallas táctiles, "scroll-snap-type:mandatory" junto con
   "scroll-snap-stop:always" obliga al navegador a frenar en seco en
   cada sección aunque el dedo deslice rápido — eso es lo que se
   siente "poco fluido" al hacer scroll con el móvil. Detectamos
   touch por capacidad real del dispositivo (no por ancho de
   pantalla, para no afectar a tablets/portátiles con ratón) y
   relajamos el encaje: "proximity" solo ajusta cerca del borde de
   cada sección, y "normal" permite que un gesto rápido pase de largo
   varias secciones en vez de forzar parada en cada una. */
@media (hover:none) and (pointer:coarse){
  .scroller{scroll-snap-type:y proximity;}
  .screen{scroll-snap-stop:normal;}
}

/* ---------- Aviso de cookies ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  display:none;
  align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  background:var(--navy-deep);
  border-top:1px solid rgba(214,202,121,.25);
  padding:16px clamp(20px, 5vw, 48px);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
}
.cookie-banner.show{display:flex;}
.cookie-banner p{margin:0;max-width:760px;font-size:13px;line-height:1.6;color:var(--slate);}
.cookie-banner p a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner button{
  flex-shrink:0;
  font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-deep);background:var(--gold);border:none;border-radius:2px;
  padding:12px 26px;cursor:pointer;transition:opacity .2s;
}
.cookie-banner button:hover{opacity:.85;}

/* ---------- Páginas legales (aviso legal, privacidad, cookies) ---------- */
.legal-header{padding:28px var(--section-pad) 0;}
.legal-header .topnav__logo img{height:34px;}
.legal-back{display:inline-block;margin:20px var(--section-pad) 0;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);}
.legal-back:hover{color:var(--gold);}
.legal-page{
  max-width:760px;margin:0 auto;
  padding:40px var(--section-pad) 120px;
  color:var(--offwhite);
}
.legal-page h1{font-family:var(--f-display);font-size:clamp(36px,6vw,54px);font-weight:400;margin-bottom:8px;}
.legal-page .legal-intro{color:var(--slate);font-size:15px;margin-bottom:44px;}
.legal-page h2{font-family:var(--f-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:40px 0 14px;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p{font-size:15px;line-height:1.75;color:var(--offwhite);opacity:.9;margin-bottom:14px;}
.legal-page ul{margin:0 0 14px;padding-left:20px;}
.legal-page li{font-size:15px;line-height:1.75;color:var(--offwhite);opacity:.9;margin-bottom:6px;}
.legal-page a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.legal-page strong{color:var(--offwhite);opacity:1;}
.legal-page .legal-updated{margin-top:50px;font-size:12px;color:var(--slate);}

/* ---------- Mobile menu overlay ---------- */
.mobilemenu{position:fixed;inset:0;background:var(--navy-deep);z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;}
.mobilemenu.open{display:flex;}
.mobilemenu a{font-size:15px;color:var(--offwhite);}
.mobilemenu__close{position:absolute;top:24px;right:24px;background:none;border:0;color:var(--offwhite);font-size:22px;}

/* ---------- Lightbox (visor de fotos a pantalla completa) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(13,14,30,.96);
  padding:70px 20px;
}
.lightbox.open{display:flex;}
.lightbox__img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transform:scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.lightbox__img.loaded{opacity:1;transform:scale(1);}
.lightbox__close,
.lightbox__nav{
  position:fixed;
  background:rgba(21,23,46,.7);
  border:1px solid rgba(214,202,121,.3);
  color:var(--offwhite);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover{background:rgba(214,202,121,.18);border-color:var(--gold);color:var(--gold);}
.lightbox__close{
  top:20px;right:20px;
  width:44px;height:44px;
  font-size:26px;line-height:1;
  z-index:2;
}
.lightbox__nav{
  top:50%;transform:translateY(-50%);
  width:52px;height:52px;
  font-size:30px;line-height:1;
  z-index:2;
}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.08);}
.lightbox__prev{left:16px;}
.lightbox__next{right:16px;}
.lightbox__nav[hidden]{display:none;}
@media (max-width:600px){
  .lightbox{padding:56px 12px;}
  .lightbox__close{top:12px;right:12px;width:40px;height:40px;font-size:22px;}
  .lightbox__nav{width:44px;height:44px;font-size:24px;}
  .lightbox__prev{left:8px;}
  .lightbox__next{right:8px;}
}