/* =========================================
   Tipografía principal: Montserrat (Google Fonts)
   ========================================= */
body {
  font-family: 'Montserrat', sans-serif;
}

/* =========================================
   Variables + temas (claro / oscuro)
   ========================================= */
:root{
  --header-h: 72px;

  /* Paleta clara */
  --bg: #ffffff;
  --text: #222222;
  --nav-bg: #15173C;
  --azul: #15173C;           /* azul corporativo */
  --section-bg: #f7f7fb;

  /* Dorado */
  --gold-1: #c7a041;
  --gold-2: #e8c66a;

  /* Transiciones */
  --t-fast:.2s;
  --t-med:.4s;
}

/* Forzar tema por preferencia del usuario */
:root[data-theme="dark"]{
  --bg:#0b1322; --text:#e8ecf4;
  --nav-bg: linear-gradient(180deg, rgba(8,17,33,.9), rgba(8,17,33,.82));
  --azul:#15173C;
  --section-bg:#0f1830;
}
:root[data-theme="light"]{
  --bg:#ffffff; --text:#222222;
  --nav-bg:#15173C;          /* azul sólido también en modo claro */
  --azul:#15173C;
  --section-bg:#f7f7fb;
}

/* =========================================
   Base
   ========================================= */
*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;          /* BLOQUEO SCROLL LATERAL GLOBAL */
}

body{
  margin:0;
  padding-top: var(--header-h);   /* para que no se tape el menú */
  overflow-x: hidden;             /* refuerzo extra */
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  transition: background var(--t-med), color var(--t-med);
}

.container{ width:min(92%,1200px); margin-inline:auto; }

/* =========================================
   HEADER
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 9999; /* menú siempre encima */
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(8px);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.6rem 0;
}
.logo-link{ display:flex; align-items:center; }
.site-logo{ height:58px; width:auto; }

/* Tema: botón */
.theme-toggle{
  border:0; background:transparent; color:#fff; cursor:pointer;
  font-size:20px; line-height:1; margin-right:.5rem;
  width:40px; height:40px; display:grid; place-items:center; border-radius:999px;
  transition: background var(--t-fast);
}
.theme-toggle:hover{ background:rgba(255,255,255,.1); }

/* Menú (desktop) */
.main-nav{
  display:flex;
  gap:1rem;
  align-items:center;
}
.main-nav a{
  color:#fff; text-decoration:none; padding:.45rem .75rem;
  border-radius:999px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.main-nav a:hover{ background:rgba(255,255,255,.12); }
.main-nav a.is-active{ background:rgba(255,255,255,.16); }

.nav-toggle{ display:none; border:0; background:none; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:4px 0; }

/* =========================================
   Secciones
   ========================================= */
section{
  margin:0;
  padding:0;
  background:transparent;
  scroll-margin-top:var(--header-h);
  position:relative;
}

/* =========================================
   HERO
   ========================================= */
#inicio{ position:relative; }
.hero-video{
  width:100% !important; height:auto !important; display:block;
  object-fit:cover; position:relative; z-index:0;
}

#inicio::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.40)); z-index:1;
}

/* HERO — Texto centrado tipo cartel */
.hero-text{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 5vw;
  color:#fff;
  pointer-events:none;
  will-change:transform;
}

.hero-text__title{
  margin:0;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 3px 10px rgba(0,0,0,.45);
  font-size:clamp(32px, 6vw, 70px);
  text-transform:none;
}

.hero-text__subtitle{
  margin-top:1.2rem;
  font-size:clamp(18px, 2.5vw, 34px);
  letter-spacing:.08em;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  opacity:0.95;
}

/* =========================================
   Imágenes contenido
   ========================================= */
section img{
  width:100% !important;
  max-width:1400px;
  display:block;
  margin:0 auto;
  height:auto !important;
}

/* =========================================
   Animaciones Reveal + Zoom
   ========================================= */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:
    opacity 700ms cubic-bezier(.22,.61,.36,1),
    transform 700ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal .zoom-img{
  transform:scale(.985);
  transition: transform 900ms cubic-bezier(.22,.61,.36,1), opacity 700ms ease;
  opacity:.98;
}
.reveal.in-view .zoom-img{
  transform:scale(1.035);
  opacity:1;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal .zoom-img{ transition:none !important; transform:none !important; opacity:1 !important; }
}
/* =========================================
   Responsive menú móvil — VERSIÓN FINAL
   ========================================= */
@media (max-width: 940px){
  .site-logo{ height:40px; }
  .nav-toggle{ display:block; }

  .main-nav{
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;

    /* 🔵 Azul corporativo con transparencia elegante */
    background: rgba(15, 23, 60, 0.60);
    backdrop-filter: blur(18px) saturate(160%);

    flex-direction:column;
    gap:.6rem;
    padding:1.2rem;

    transform:translateY(-120%);
    transition:transform var(--t-fast);
    z-index:60;
  }

  .main-nav.open{
    transform:translateY(0);
  }
}

@media (max-width: 380px){
  .hero-text__subtitle span::before,
  .hero-text__subtitle span::after{ display:none; }
}

/* =========================================
   Botones dorados
   ========================================= */
.gold-button{
  display:inline-block;
  padding:.75rem 1.6rem;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-1));
  color:#111;
  text-decoration:none;
  border-radius:999px;
  font-size:1rem;
  letter-spacing:.04em;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.gold-button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.gold-button:active{
  transform:translateY(0px);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}

/* =========================================
   GALERÍA MODAL
   ========================================= */
.gallery-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:9999;
}
.gallery-modal.open{
  opacity:1;
  pointer-events:auto;
}
.gallery-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px);
}
.gallery-content{
  position:relative;
  max-width:90vw;
  max-height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
#gallery-image{
  max-width:100%;
  max-height:80vh;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

/* Botones modal */
.gallery-close,
.gallery-prev,
.gallery-next{
  position:absolute;
  border:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(160%) blur(4px);
  color:#fff;
  font-size:28px;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover{
  background:rgba(0,0,0,.55);
  transform:translateY(-2px);
}
.gallery-close{ top:-40px; right:0; }

/* ⬇⬇⬇ AJUSTE: flechas dentro de pantalla, sin valores negativos */
.gallery-prev{ left:12px; }
.gallery-next{ right:12px; }

@media(max-width:640px){
  .gallery-prev{ left:8px; }
  .gallery-next{ right:8px; }
  .gallery-close{ top:-52px; right:0; }
}

/* =========================================
   MODALES (PDF y VINO)
   ========================================= */
.pdf-modal,
.vino-modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  z-index:9999;
}
.pdf-modal.open, .vino-modal.open{
  opacity:1; pointer-events:auto;
}
.pdf-backdrop, .vino-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px);
}
.pdf-frame-wrapper, .vino-frame-wrapper{
  position:relative;
  width:90vw; height:85vh;
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  background:#111;
}
.pdf-close, .vino-close{
  position:absolute; top:-40px; right:0;
  border:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(160%) blur(4px);
  color:#fff; font-size:28px;
  width:44px; height:44px;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pdf-close:hover, .vino-close:hover{
  background:rgba(0,0,0,.55);
  transform:translateY(-2px);
}

@media(max-width:640px){
  .pdf-close, .vino-close{ top:-52px; right:0; }
}

/* Optimización iPhone */
.pdf-frame-wrapper { -webkit-overflow-scrolling: touch; height: 90vh; }
.pdf-viewer { width: 100%; height: 100%; border: none; -webkit-overflow-scrolling: touch; }
.pdf-modal { overflow: hidden; }

/* =========================================
   Fondo de la sección vino — blanco
   ========================================= */
#vino {
  background-color: #ffffff !important;
}

/* =========================================
   Línea dorada decorativa
   ========================================= */
.gold-line{
  display:block;
  width:min(100%, 1200px);   /* AJUSTE: no se sale en móvil */
  height:2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-1));
  margin:1.5rem auto 2rem;
  border-radius:2px;
}
#producto h2 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
  margin-bottom: 1rem;
}
#producto h3 {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* Ocultar botón de tema */
.theme-toggle {
  display: none !important;
}
/* Miniaturas dentro del modal de galería */
.gallery-content{
  position:relative;
  max-width:90vw;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1rem 1rem 0.6rem;
  box-sizing:border-box;
}

#gallery-image{
  max-width:100%;
  max-height:72vh;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

/* tira de miniaturas abajo */
.gallery-thumbs{
  margin-top:0.4rem;
  display:flex;
  flex-wrap:nowrap;
  gap:0.45rem;
  max-width:100%;
  overflow-x:auto;
  padding:0.3rem 0.1rem 0.4rem;
  scrollbar-width:thin;
}

.gallery-thumbs img{
  flex:0 0 auto;
  width:70px;
  height:50px;
  object-fit:cover;
  border-radius:8px;
  opacity:0.65;
  border:2px solid transparent;
  cursor:pointer;
  transition:
    opacity .2s ease,
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.gallery-thumbs img:hover{
  opacity:0.9;
  transform:scale(1.03);
}

.gallery-thumbs img.is-active{
  opacity:1;
  border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
/* Miniaturas dentro del modal de galería */
.gallery-content{
  position:relative;
  max-width:90vw;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0.5rem 1rem 0.4rem;
  box-sizing:border-box;
}

#gallery-image{
  max-width:100%;
  max-height:70vh;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

/* tira de miniaturas abajo dentro del modal */
.gallery-thumbs{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:nowrap;
  gap:0.4rem;
  max-width:100%;
  overflow-x:auto;
  padding:0.2rem 0.1rem 0.3rem;
  scrollbar-width:thin;
}

.gallery-thumbs img{
  flex:0 0 auto;
  width:64px;
  height:48px;
  object-fit:cover;
  border-radius:8px;
  opacity:0.6;
  border:2px solid transparent;
  cursor:pointer;
  transition:
    opacity .2s ease,
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.gallery-thumbs img:hover{
  opacity:0.9;
  transform:scale(1.03);
}

.gallery-thumbs img.is-active{
  opacity:1;
  border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}