/* ============================================================
   García Tapia Studio · Portafolio
   ============================================================ */
:root{
  --bg:#121212; --bg-2:#1a1a1a;
  --text:#ffffff; --gold:#d4af37; --wine:#cd0c53; --gray:#b0b0b0; --gray-d:#2a2a2a;
  --font-title:"Cinzel",serif; --font-sub:"Montserrat",sans-serif; --font-body:"Poppins",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
::selection{ background:var(--wine); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--gray-d); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ---------------- NAV ---------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,60px); transition:background .4s var(--ease), padding .4s var(--ease); }
.nav.scrolled{ background:rgba(18,18,18,.85); backdrop-filter:blur(14px); padding:12px clamp(20px,5vw,60px); border-bottom:1px solid var(--gray-d); }
.nav__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav__logo{ width:38px; height:38px; border-radius:50%; }
.nav__word{ font-family:var(--font-title); font-size:clamp(.9rem,2vw,1.2rem); letter-spacing:.14em; color:var(--gold); text-transform:uppercase; }
.nav__word b{ color:var(--text); font-weight:400; }
.nav__links{ display:flex; gap:clamp(18px,3vw,40px); }
.nav__links a{ font-family:var(--font-sub); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text); text-decoration:none; position:relative; padding:4px 0; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease); }
.nav__links a:hover{ color:var(--gold); }
.nav__links a:hover::after{ width:100%; }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; width:30px; height:22px; position:relative; z-index:110; }
.nav__toggle span{ position:absolute; left:0; width:100%; height:2px; background:var(--text); transition:.3s var(--ease); }
.nav__toggle span:nth-child(1){ top:0; } .nav__toggle span:nth-child(2){ top:10px; } .nav__toggle span:nth-child(3){ top:20px; }
.nav.open .nav__toggle span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.open .nav__toggle span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ---------------- HERO ---------------- */
.hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,.6) 0%, rgba(18,18,18,.35) 45%, rgba(18,18,18,.9) 100%); }
.hero__content{ position:relative; text-align:center; padding:0 20px; z-index:2; animation:fadeUp 1.4s var(--ease) both; }
.hero__logo{ width:clamp(96px,15vw,150px); height:auto; margin:0 auto 26px; border-radius:50%; box-shadow:0 12px 50px rgba(0,0,0,.6); }
.hero__title{ font-family:var(--font-title); font-weight:500; font-size:clamp(2rem,6vw,4.6rem); line-height:1.05; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; }
.hero__sub{ font-family:var(--font-sub); font-weight:300; letter-spacing:.36em; text-transform:uppercase; font-size:clamp(.7rem,1.5vw,.95rem); color:var(--text); margin-top:18px; }
.hero__scrollhint{ font-family:var(--font-sub); letter-spacing:.24em; text-transform:uppercase; font-size:.66rem; color:var(--gray); margin-top:40px; }
.hero__scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; }
.hero__scroll span{ display:block; width:1px; height:52px; background:linear-gradient(var(--gold),transparent); animation:scrollpulse 2s var(--ease) infinite; }
@keyframes scrollpulse{ 0%{opacity:0;transform:scaleY(.2);} 50%{opacity:1;} 100%{opacity:0;transform:scaleY(1) translateY(10px);} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:none;} }

/* ---------------- PORTALES DE COLECCIÓN ---------------- */
.portal{ position:relative; height:88vh; min-height:560px; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.portal__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; transform:scale(1.04); filter:brightness(.62); transition:transform 1.6s var(--ease), filter .6s; }
.portal:hover .portal__media{ transform:scale(1.12); filter:brightness(.5); }
.portal__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,.55) 0%, rgba(18,18,18,.25) 50%, rgba(18,18,18,.75) 100%); }
.portal__content{ position:relative; z-index:2; text-align:center; padding:0 24px; opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.portal.in .portal__content{ opacity:1; transform:none; }
.portal__eyebrow{ font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.4em; font-size:.72rem; color:var(--wine); font-weight:600; margin-bottom:18px; }
.portal__title{ font-family:var(--font-title); font-weight:600; text-transform:uppercase; font-size:clamp(2.4rem,8vw,5.5rem); letter-spacing:.08em; color:var(--gold); line-height:1; }
.portal__line{ font-family:var(--font-sub); font-weight:300; font-style:italic; font-size:clamp(.9rem,2vw,1.25rem); color:var(--text); margin-top:22px; letter-spacing:.02em; }
.portal__cta{ display:inline-flex; align-items:center; gap:10px; margin-top:34px; font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; color:var(--text); border:1px solid var(--gold); padding:14px 32px; border-radius:2px; transition:.35s var(--ease); }
.portal:hover .portal__cta{ background:var(--gold); color:var(--bg); }
.portal__count{ position:absolute; bottom:26px; right:clamp(20px,5vw,50px); z-index:2; font-family:var(--font-sub); letter-spacing:.16em; font-size:.66rem; text-transform:uppercase; color:var(--gray); }

/* ---------------- CIERRE ---------------- */
.closing{ text-align:center; padding:clamp(80px,12vw,150px) 22px; background:radial-gradient(ellipse at center, #191919 0%, var(--bg) 70%); }
.closing__logo{ width:clamp(80px,12vw,120px); height:auto; margin:0 auto 26px; border-radius:50%; }
.closing__eyebrow{ font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.36em; font-size:.72rem; color:var(--wine); font-weight:600; margin-bottom:22px; }
.closing__title{ font-family:var(--font-title); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.15; }
.closing__text{ color:var(--gray); margin-top:22px; font-weight:300; max-width:520px; margin-left:auto; margin-right:auto; }
.closing__cta{ display:inline-block; margin-top:40px; font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.22em; font-size:.82rem; color:var(--bg); background:var(--gold); text-decoration:none; padding:17px 46px; border-radius:2px; transition:.35s var(--ease); }
.closing__cta:hover{ background:var(--text); letter-spacing:.28em; }
.closing__legal{ font-family:var(--font-sub); font-size:.66rem; letter-spacing:.14em; color:var(--gray); opacity:.55; text-transform:uppercase; margin-top:56px; }

/* ---------------- VISOR DE GALERÍA ---------------- */
.gallery{ position:fixed; inset:0; z-index:200; background:var(--bg); overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
.gallery.open{ opacity:1; visibility:visible; }
.gallery__bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(18px,4vw,48px); background:rgba(18,18,18,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--gray-d); }
.gallery__back, .gallery__close{ background:none; border:0; color:var(--text); cursor:pointer; font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; transition:color .3s; }
.gallery__back:hover, .gallery__close:hover{ color:var(--gold); }
.gallery__close{ font-size:1.6rem; line-height:1; }
.gallery__title{ font-family:var(--font-title); font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-size:clamp(1rem,2.4vw,1.5rem); text-align:center; }
.gallery__body{ padding:clamp(20px,4vw,52px); max-width:1600px; margin:0 auto; }
.gallery__intro{ text-align:center; margin-bottom:clamp(30px,5vw,54px); }
.gallery__intro p{ font-family:var(--font-sub); font-style:italic; color:var(--gray); font-size:clamp(.9rem,2vw,1.15rem); }
.gallery__intro .rule{ width:56px; height:1px; background:var(--gold); margin:20px auto 0; }
.gallery__section-label{ font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.3em; font-size:.72rem; color:var(--wine); font-weight:600; text-align:center; margin:10px 0 26px; }

/* bloque por sesión + separador sutil */
.gblock{ margin-bottom:6px; }
.gdivider{ width:70px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:clamp(38px,6vw,64px) auto; opacity:.6; }

/* videos */
.films{ display:grid; gap:16px; margin-bottom:clamp(14px,2vw,22px); grid-template-columns:1fr; }
.films.multi{ grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); }
.film{ position:relative; background:#000; border-radius:4px; overflow:hidden; border:1px solid var(--gray-d); }
.film video{ width:100%; height:100%; display:block; max-height:80vh; margin:0 auto; }

/* collage (grid encuadrado y centrado) */
.collage{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.1vw,16px); }
@media (max-width:1000px){ .collage{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .collage{ grid-template-columns:repeat(2,1fr); } }
.collage__item{ aspect-ratio:4/5; overflow:hidden; border-radius:3px; background:var(--bg-2); cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.collage__item.in{ opacity:1; transform:none; }
.collage__item img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 1s var(--ease), filter .4s; }
.collage__item:hover img{ transform:scale(1.05); filter:brightness(1.07); }

/* ---------------- LIGHTBOX ---------------- */
.lb{ position:fixed; inset:0; z-index:300; background:rgba(10,10,10,.97); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.lb.open{ opacity:1; visibility:visible; }
.lb__img{ max-width:92vw; max-height:86vh; object-fit:contain; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb__close{ position:absolute; top:22px; right:28px; background:none; border:0; color:var(--gray); font-size:2.4rem; line-height:1; cursor:pointer; transition:color .3s; }
.lb__close:hover{ color:var(--gold); }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--gray); font-size:3.2rem; cursor:pointer; padding:20px; transition:color .3s; user-select:none; }
.lb__nav:hover{ color:var(--gold); }
.lb__prev{ left:clamp(6px,2vw,32px); } .lb__next{ right:clamp(6px,2vw,32px); }
.lb__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--font-sub); letter-spacing:.2em; font-size:.78rem; color:var(--gray); }

/* ---------------- MÓVIL ---------------- */
@media (max-width:820px){
  .nav__toggle{ display:block; }
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; justify-content:center; gap:32px; background:rgba(18,18,18,.97); backdrop-filter:blur(16px); padding:60px; transform:translateX(100%); transition:transform .45s var(--ease); }
  .nav.open .nav__links{ transform:none; }
  .nav__links a{ font-size:1rem; }
  .portal{ height:80vh; }
}