/* ================================================================
   CASA SANTA QUINTA · OGAL MEZCAL
   style.css  v7.0 — Sistema de diseño maestro
   Versión limpia: sin duplicados, comentado, corregido
   Abril 2026
   ================================================================ */

/* ── Fuentes ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Josefin+Sans:wght@200;300;400;600&display=swap');

/* ================================================================
   1. VARIABLES Y RESET
   ================================================================ */

:root {
  /* Paleta de color */
  --ob:     #09090A;
  --carbon: #111110;
  --smoke:  #1A1917;
  --ash:    #252420;
  --stone:  #6A6458;  /* actualizado: más visible sobre fondos oscuros */
  /* --sand mejorado de #887E68 a #A09070 para mayor contraste en desktop */
  --sand:   #A09070;
  --parchm: #EDE4CF;
  --cream:  #EDE4CF;
  --amber:  #C07818;
  --amber2: #DA8F24;
  --amber3: #EDB048;
  --gold:   #C89A2A;
  --agave:  #2A4628;
  --agave2: #3A6038;
  --white:  #F8F3E8;
  /* Color de texto para cuerpo de texto en secciones oscuras */
  --text-body: #B8AE98;
  /* Tipografías */
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fu: 'Josefin Sans', sans-serif;
  /* Easing */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, .55, .45, 1);
  /* Layout */
  --nav-h:    76px;
  --pad-x:    4rem;
  --pad-x-sm: 1.6rem;
  /* Bordes ambar */
  --ba-faint: 1px solid rgba(192,120,24,.10);
  --ba-light: 1px solid rgba(192,120,24,.25);
  --ba-med:   1px solid rgba(192,120,24,.45);
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--fu); font-weight:300;
  background:var(--ob); color:var(--parchm);
  overflow-x:hidden; line-height:1.6;
}
img  { display:block; max-width:100%; }
a    { color:inherit; }
button { font-family:inherit; cursor:pointer; }

/* ================================================================
   2. TIPOGRAFÍA GLOBAL DESKTOP
   Tamaños base para pantallas >= 901px
   ================================================================ */

/* Texto de párrafo principal */
.sec-body {
  font-size: .95rem;
  letter-spacing: .03em;
  line-height: 2;
  color: var(--text-body);
  max-width: 560px;
}

/* Textos de párrafo secundarios */
.momento-body, .mundial-p, .cta-sub, .ac-desc,
.award-card-desc, .paso-desc, .founder-desc,
.value-desc, .founder-full-bio,
.legal-content p, .legal-content li {
  font-size: .88rem;
  line-height: 2;
  color: var(--text-body);
}

/* Labels y textos pequeños */
.sec-label, .hero-eyebrow, .paso-name, .aw-label, .aw-year,
.stat-label, .tag, .footer-col h4, .ac-title, .ac-year,
.ft-key, .founder-name, .founder-country, .page-hero-label {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Divider decorativo */
.divider {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,120,24,.2),transparent);
}

/* ================================================================
   3. BOTONES
   ================================================================ */

.btn {
  display:inline-block; text-decoration:none;
  font-family:var(--fu);
  font-size:.72rem; /* subido de .64rem */
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  border:none; transition:all .22s; white-space:nowrap; cursor:pointer;
}

/* Botón primario — relleno ambar */
.btn-primary { padding:.95rem 2.4rem; background:var(--amber); color:var(--ob); }
.btn-primary:hover { background:var(--amber2); }

/* Botón outline — CORREGIDO: border más grueso y color más brillante */
.btn-outline {
  padding:.9rem 2.4rem; background:transparent;
  border:2px solid rgba(192,120,24,.6); /* era .45 — ahora más visible */
  color:var(--amber3); /* era --parchm — ahora dorado claro visible */
  transition:all .22s;
}
.btn-outline:hover {
  border-color:var(--amber);
  background:rgba(192,120,24,.08);
  color:var(--amber2);
}

/* Botón agave verde */
.btn-agave { padding:.95rem 2.4rem; background:var(--agave); color:var(--white); }
.btn-agave:hover { background:var(--agave2); }

/* Grupo de botones */
.btn-group { display:flex; gap:1rem; flex-wrap:wrap; }

/* ================================================================
   4. NAVIGATION
   ================================================================ */

#site { display:block; }

nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h); display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--pad-x);
  transition:background .4s, border-color .4s;
}
nav.scrolled {
  background:rgba(9,9,10,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:var(--ba-faint);
}
.nav-logo img {
  height:40px; object-fit:contain;
  filter:brightness(0) invert(1); transition:opacity .2s;
}
.nav-logo:hover img { opacity:.75; }

/* Links desktop */
.nav-links { display:flex; gap:2.4rem; list-style:none; align-items:center; }
.nav-links a {
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); text-decoration:none; transition:color .2s;
  position:relative; padding-bottom:2px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--amber2);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--amber2); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

/* CTA en nav */
.nav-cta {
  font-family:var(--fu); font-size:.65rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.62rem 1.6rem; background:var(--amber); color:var(--ob);
  border:none; text-decoration:none; transition:background .2s; display:inline-block;
}
.nav-cta:hover { background:var(--amber2); }

/* Hamburger — CORREGIDO: líneas más gruesas (2px) y siempre oculto en desktop */
.nav-burger {
  display:none; background:none; border:none; padding:.3rem; cursor:pointer;
}
.nav-burger span {
  display:block; width:22px; height:2px; /* era 1px */
  background:var(--parchm); margin:5px 0; transition:all .3s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform:rotate(45deg)  translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Menú móvil overlay */
.mob-menu {
  position:fixed; inset:0; top:var(--nav-h); z-index:199;
  background:rgba(9,9,10,.98); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  opacity:0; pointer-events:none; transform:translateY(-12px);
  transition: opacity .28s ease, transform .28s ease;
}
.mob-menu.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.mob-menu a {
  font-size:1rem; /* subido de .88rem */
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--parchm); text-decoration:none; transition:color .2s;
}
.mob-menu a:hover { color:var(--amber2); }
.mob-btns { display:flex; flex-direction:column; gap:.8rem; align-items:center; margin-top:.5rem; }

/* Estado móvil controlado por JS con clase .nav-is-mobile en body */
body.nav-is-mobile .nav-links  { display:none !important; }
body.nav-is-mobile .nav-cta    { display:none !important; }
body.nav-is-mobile .nav-burger { display:block !important; }
body.nav-is-mobile nav         { padding:0 var(--pad-x-sm); }

/* Nav siempre sólido en móvil */
body.nav-is-mobile nav {
  background:rgba(9,9,10,.96) !important;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:var(--ba-faint);
}

/* ================================================================
   5. AGE GATE
   ================================================================ */

#age-gate {
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:var(--ob);
}
.ag-bg {
  position:absolute; inset:0;
  background:url('../assets/img/hero-agaves-campo.webp') center/cover no-repeat;
  opacity:.12; filter:saturate(.5);
}
.ag-box {
  position:relative; max-width:480px; width:90%;
  padding:3.5rem 3rem; text-align:center;
  border:var(--ba-light); background:rgba(9,9,10,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.ag-logo { height:60px; margin:0 auto 2rem; filter:brightness(0) invert(1); object-fit:contain; }
.ag-title {
  font-family:var(--fd); font-size:2rem; font-weight:300;
  color:var(--cream); letter-spacing:.04em; margin-bottom:.8rem;
}
.ag-box p {
  font-size:.82rem; /* mejorado de .72rem */
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-body); line-height:2; margin-bottom:2.5rem;
}
.ag-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.ag-yes, .ag-no {
  font-family:var(--fu); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.9rem 2.2rem; border:1px solid; transition:all .2s;
}
.ag-yes { background:var(--amber); border-color:var(--amber); color:var(--ob); }
.ag-yes:hover { background:var(--amber2); border-color:var(--amber2); }
.ag-no  { background:transparent; border-color:var(--stone); color:var(--text-body); }
.ag-no:hover  { border-color:var(--sand); color:var(--parchm); }
.ag-legal { margin-top:2rem; font-size:.68rem; letter-spacing:.06em; color:var(--text-body); line-height:2; }
.ag-legal a { color:var(--text-body); text-decoration:underline; text-underline-offset:3px; }

/* ================================================================
   6. HERO
   ================================================================ */

#hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
#hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-bg-img {
  position:absolute; inset:0;
  background:url('../assets/img/hero-agaves-campo.webp') center/cover no-repeat;
  filter:saturate(.65) brightness(.85);
  transform:scale(1.04); animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { from{transform:scale(1.06);} to{transform:scale(1.0);} }
.hero-ov {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(9,9,10,.92) 0%, rgba(9,9,10,.28) 55%, rgba(9,9,10,.6) 100%),
    linear-gradient(to top,   rgba(9,9,10,.7)  0%, transparent 55%),
    linear-gradient(to bottom,rgba(9,9,10,.4)  0%, transparent 30%);
}
.hero-content {
  position:relative; z-index:2;
  padding:calc(var(--nav-h) + 4rem) var(--pad-x) 4rem;
  max-width:760px;
}
.hero-eyebrow {
  font-size:.65rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.9rem;
  animation:fadeUp .8s var(--ease-out) both;
}
.hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--amber); }
.hero-h1 {
  font-family:var(--fd); font-size:clamp(3.8rem,7.5vw,6.5rem);
  font-weight:300; line-height:1.02; color:var(--white); margin-bottom:1.2rem;
  animation:fadeUp .9s .15s var(--ease-out) both;
}
.hero-h1 em { font-style:italic; color:var(--amber3); }
.hero-slogan {
  font-family:var(--fd); font-style:italic;
  font-size:clamp(1rem,1.8vw,1.3rem); font-weight:300;
  color:var(--amber3); letter-spacing:.05em; margin-bottom:1rem;
  animation:fadeUp .9s .25s var(--ease-out) both;
}
.hero-sub {
  font-size:.78rem; letter-spacing:.12em; line-height:2;
  color:var(--text-body); margin-bottom:2rem; text-transform:uppercase;
  animation:fadeUp .9s .35s var(--ease-out) both;
}
.hero-single-cta {
  margin-top:1.2rem; display:inline-block;
  animation:fadeUp .9s .5s var(--ease-out) both;
}
.hero-scroll {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  animation:scrollBob 2.5s 1s ease-in-out infinite;
}
.hero-scroll span { font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.hero-scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,var(--amber),transparent); }
@keyframes scrollBob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* ================================================================
   7. AWARDS BAR
   ================================================================ */

.awards-bar {
  background:var(--smoke); border-top:var(--ba-faint); border-bottom:var(--ba-faint);
  padding:2.4rem var(--pad-x); display:flex; align-items:center;
  justify-content:center; gap:clamp(1.5rem,3vw,4rem); flex-wrap:nowrap; overflow-x:auto;
}
.aw-item  { display:flex; align-items:center; gap:1.2rem; }
.aw-score { font-family:var(--fd); font-size:2.5rem; font-weight:300; color:var(--amber3); line-height:1; }
.aw-label {
  font-size:.68rem; /* subido de .6rem */
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-body); /* mejorado de --sand */
  margin-top:.2rem; max-width:160px; line-height:1.6;
}
.aw-year  { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand); margin-top:.15rem; }
.aw-sep   { width:1px; height:44px; background:rgba(192,120,24,.18); flex-shrink:0; }

/* ================================================================
   8. SECCIONES BASE
   ================================================================ */

.sec-dark   { background:var(--ob); }
.sec-carbon { background:var(--carbon); }
.sec-smoke  { background:var(--smoke); }
.sec     { padding:8rem var(--pad-x); }
.sec-med { padding:5rem var(--pad-x); }

/* Label de sección con línea dorada — CORREGIDO: línea 2px y más brillante */
.sec-label {
  font-size:.65rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1rem; display:flex; align-items:center; gap:.9rem;
}
.sec-label::before {
  content:''; width:32px;
  height:2px; /* era 1px — ahora 2px más visible */
  background:var(--amber); flex-shrink:0;
}
.sec-label.center { justify-content:center; }
.sec-label.center::before { display:none; }

/* H2 de sección */
.sec-h2 {
  font-family:var(--fd); font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:300; line-height:1.08; color:var(--cream); margin-bottom:1.4rem;
}
.sec-h2 em { font-style:italic; color:var(--amber3); }

/* ================================================================
   9. HISTORIA GRID
   ================================================================ */

.historia-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.historia-img { position:relative; overflow:hidden; }
.historia-img img {
  width:100%; height:520px; object-fit:cover;
  filter:saturate(.72); transition:transform 8s ease, filter 1s; display:block;
}
.historia-img:hover img { transform:scale(1.03); filter:saturate(.9); }
.historia-img::before {
  content:''; position:absolute; top:-16px; left:-16px; width:90px; height:90px;
  border-top:1px solid rgba(192,120,24,.35); border-left:1px solid rgba(192,120,24,.35);
  pointer-events:none;
}
.historia-img::after {
  content:''; position:absolute; bottom:-16px; right:-16px; width:90px; height:90px;
  border-bottom:1px solid rgba(192,120,24,.35); border-right:1px solid rgba(192,120,24,.35);
  pointer-events:none;
}
.stats-row { display:flex; gap:2.8rem; margin:2.4rem 0; flex-wrap:wrap; }
.stat-num  {
  font-family:var(--fd); font-size:3rem; font-weight:300;
  color:var(--amber3); /* mejorado de --amber */
  line-height:1;
}
.stat-label { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--sand); margin-top:.25rem; }

/* ================================================================
   10. MOMENTO — BOTELLA SPLIT-SCREEN
   ================================================================ */

.momento-sec { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.momento-img-col {
  position:relative; overflow:hidden; min-height:560px;
  background:var(--ob); display:flex; align-items:center; justify-content:center;
}
.momento-img-col::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(192,120,24,.12) 0%,transparent 70%);
  pointer-events:none;
}
.momento-bottle-img {
  width:100%; height:100%; object-fit:cover;
  position:relative; z-index:1; transition:transform .6s var(--ease);
}
.momento-img-col:hover .momento-bottle-img { transform:scale(1.02); }
.momento-text-col {
  background:var(--carbon); padding:5rem var(--pad-x);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
  overflow:hidden;
}
.momento-score {
  font-family:var(--fd); font-size:9rem; font-weight:300;
  color:rgba(192,120,24,.1); line-height:1; user-select:none;
}
.momento-award { font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }
.momento-h2 {
  font-family:var(--fd); font-size:clamp(2rem,3.2vw,2.8rem);
  font-weight:300; color:var(--cream); line-height:1.1;
}
.momento-h2 em { font-style:italic; color:var(--amber3); }
.momento-body { font-size:.88rem; color:var(--text-body); line-height:2.1; }

/* ================================================================
   11. PRODUCTO — FICHA TÉCNICA + BOTELLA
   ================================================================ */

.producto-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }

/* Flavor table — CORREGIDO: ft-key ahora en --amber, más visible */
.flavor-table {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin:2.2rem 0; background:rgba(192,120,24,.1); border:var(--ba-faint);
}
.ft-cell {
  background:var(--ob); padding:.9rem 1.2rem;
  transition:background .2s; display:flex; flex-direction:column; gap:.3rem;
}
.ft-cell:hover { background:rgba(192,120,24,.04); }
.ft-key {
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); /* CORREGIDO: era --stone, ahora --amber — más visible */
}
.ft-val { font-family:var(--fd); font-size:1rem; font-weight:300; color:var(--cream); }

/* Botella */
.bottle-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:500px; overflow:hidden; }
.bottle-ghost {
  position:absolute; font-family:var(--fd); font-size:9rem; font-weight:300;
  color:rgba(192,120,24,.05); letter-spacing:.12em; pointer-events:none; user-select:none;
}
.bottle-img {
  max-height:560px; width:auto; max-width:100%; object-fit:contain;
  position:relative; z-index:1;
  filter:drop-shadow(0 24px 64px rgba(0,0,0,.55)); transition:filter .4s;
  display:block; margin:0 auto;
}
.bottle-wrap:hover .bottle-img { filter:drop-shadow(0 32px 80px rgba(192,120,24,.25)); }

/* ================================================================
   12. RECONOCIMIENTOS — AWARD CARDS
   CORREGIDO: quitado ícono de medalla en tarjeta CAVA
   ================================================================ */

.awards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.award-card {
  padding:2.5rem 2rem; border:var(--ba-faint); background:rgba(192,120,24,.025);
  transition:border-color .35s,background .35s,transform .35s;
  position:relative; overflow:hidden; text-align:center;
}
.award-card::after {
  content:''; position:absolute; bottom:0; left:2rem; right:2rem; height:1px;
  background:linear-gradient(90deg,var(--amber),transparent); opacity:0; transition:opacity .3s;
}
.award-card:hover { border-color:rgba(192,120,24,.4); transform:translateY(-4px); }
.award-card:hover::after { opacity:.5; }
.award-card-img {
  width:100%; height:160px;
  object-fit:contain;   /* contain preserves aspect ratio — no crops logos */
  background:rgba(192,120,24,.03);  /* subtle bg so contain doesn't show gaps */
  padding:1rem;
  filter:saturate(.7) brightness(.9);
  margin-bottom:1.8rem; display:block; transition:filter .3s;
}
.award-card:hover .award-card-img { filter:saturate(1) brightness(1); }
.award-card:hover .award-card-img { filter:saturate(.85); }
.ac-score {
  font-family:var(--fd); font-size:4.5rem; font-weight:300;
  color:var(--amber3); line-height:1; margin-bottom:.5rem;
}
.ac-sup { font-family:var(--fd); font-size:1.5rem; color:var(--amber); vertical-align:super; }
.ac-title { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:.9rem; }
.ac-desc  { font-size:.82rem; color:var(--text-body); line-height:1.95; margin-bottom:.8rem; }
.ac-year  { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); margin-top:.9rem; }
/* Legacy */
.award-card-title { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:.8rem; }
.award-card-desc  { font-size:.82rem; color:var(--text-body); line-height:1.95; }

/* ================================================================
   13. GALLERY STRIP
   ================================================================ */

.gallery-strip { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; }
.gallery-item  { overflow:hidden; aspect-ratio:16/9; }
.gallery-item img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.65) brightness(.85); transition:filter .5s ease,transform .6s ease;
}
.gallery-item:hover img { filter:saturate(1) brightness(1); transform:scale(1.04); }

/* ================================================================
   14. PROCESO
   ================================================================ */

.proceso-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.paso {
  padding:2.2rem 1.8rem; border:1px solid rgba(192,120,24,.1);
  position:relative; transition:border-color .3s,transform .3s;
}
.paso::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--amber),transparent); opacity:0; transition:opacity .3s;
}
.paso:hover { border-color:rgba(192,120,24,.3); transform:translateY(-2px); }
.paso:hover::before { opacity:1; }
.paso-num  { font-family:var(--fd); font-size:3.5rem; font-weight:300; color:rgba(192,120,24,.65); line-height:1; margin-bottom:.6rem; }
.paso-name { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:.8rem; }
.paso-desc { font-size:.85rem; line-height:2; color:var(--text-body); }

/* ================================================================
   15. FUNDADORES
   ================================================================ */

.founders-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.founder { border:var(--ba-faint); overflow:hidden; transition:border-color .35s,transform .35s; }
.founder:hover { border-color:rgba(192,120,24,.35); transform:translateY(-4px); }
.founder-photo { width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--ash); position:relative; }
.founder-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:saturate(.75) grayscale(.15); transition:transform .7s var(--ease),filter .5s;
  display:block; position:absolute; inset:0;
}
.founder:hover .founder-photo img { transform:scale(1.06); filter:saturate(1) grayscale(0); }
.founder-photo-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:3.5rem; font-weight:300; color:var(--amber); background:var(--ash);
}
.founder-info    { padding:1.4rem 1.2rem; }
.founder-name    { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--cream); margin-bottom:.25rem; }
.founder-role    { font-size:.78rem; color:var(--text-body); font-style:italic; font-family:var(--fd); margin-bottom:.2rem; }
.founder-country { font-size:.62rem; letter-spacing:.1em; color:var(--amber3); margin-bottom:.6rem; }
.founder-desc    { font-size:.78rem; color:var(--text-body); line-height:1.88; }

/* ================================================================
   16. MUNDIAL 2026
   ================================================================ */

.mundial-sec {
  position:relative; padding:7rem var(--pad-x);
  background:var(--carbon); overflow:hidden; text-align:center;
}
.mundial-bg-year {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--fd); font-size:clamp(8rem,20vw,16rem); font-weight:300;
  color:rgba(192,120,24,.04); line-height:1; pointer-events:none; user-select:none; white-space:nowrap;
}
.mundial-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.mundial-h2 { font-family:var(--fd); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:300; color:var(--cream); line-height:1.12; margin-bottom:1.2rem; }
.mundial-p  { font-size:.88rem; color:var(--text-body); line-height:2.1; margin-bottom:2rem; }
.tags-row { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2rem; }
.tag {
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(192,120,24,.3); /* mejorado de .25 */
  padding:.4rem 1rem;
}

/* ================================================================
   17. CÓCTELES
   ================================================================ */

.cocteles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(192,120,24,.1); }
.coctel { position:relative; overflow:hidden; aspect-ratio:2/3; }
.coctel img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.65) brightness(.85); transition:transform .55s ease,filter .55s ease;
}
.coctel:hover img { transform:scale(1.07); filter:saturate(1) brightness(.95); }
.coctel-overlay {
  position:absolute; bottom:0; left:0; right:0; padding:1.5rem 1.2rem;
  background:linear-gradient(to top,rgba(9,9,10,.95) 0%,rgba(9,9,10,.4) 60%,transparent 100%);
}
.coctel-name { font-family:var(--fd); font-size:1.2rem; font-weight:300; color:var(--cream); margin-bottom:.3rem; }
.coctel-ingr {
  font-size:.62rem; letter-spacing:.1em;
  color:var(--amber3); /* MEJORADO de --sand a --amber3 — más visible */
  text-transform:uppercase;
}

/* ================================================================
   18. CTA FINAL
   ================================================================ */

.cta-inner { max-width:640px; margin:0 auto; text-align:center; }
.cta-h2    { font-family:var(--fd); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; color:var(--cream); margin-bottom:.9rem; }
.cta-h2 em { font-style:italic; color:var(--amber3); }
.cta-sub   { font-size:.88rem; letter-spacing:.04em; line-height:2.1; color:var(--text-body); margin-bottom:2.8rem; }

/* ================================================================
   19. FOOTER
   ================================================================ */

footer {
  background:var(--carbon); padding:5rem var(--pad-x) 3rem; border-top:var(--ba-faint);
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo-img { height:36px; object-fit:contain; filter:brightness(0) invert(1); opacity:.65; margin-bottom:1.2rem; display:block; }
.footer-tagline { font-size:.72rem; color:var(--text-body); line-height:2; letter-spacing:.04em; }
.footer-col h4  { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem; }
.footer-col ul  { list-style:none; }
.footer-col ul li { margin-bottom:.5rem; }
.footer-col ul a { font-size:.76rem; color:var(--text-body); text-decoration:none; transition:color .2s; }
.footer-col ul a:hover { color:var(--amber2); }
.footer-bottom {
  border-top:1px solid rgba(192,120,24,.08); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.65rem; color:var(--text-body); letter-spacing:.06em; }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:.65rem; color:var(--text-body); text-decoration:none; transition:color .2s; }
.footer-legal a:hover { color:var(--amber2); }
.social-row { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.soc-btn {
  width:40px; height:40px;          /* larger tap target */
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(192,120,24,.45);  /* more visible border */
  background:rgba(192,120,24,.06);        /* subtle fill so it's always visible */
  transition:all .2s; text-decoration:none;
}
.soc-btn:hover { background:var(--amber); border-color:var(--amber); }
.soc-btn svg {
  width:17px; height:17px;
  fill:var(--parchm);               /* bright fill — always visible */
  transition:fill .2s; display:block;
}
.soc-btn:hover svg { fill:var(--ob); }

/* ================================================================
   20. FLOAT BUTTONS + MOB-BUY-BAR + COOKIE BAR
   ================================================================ */

.float-zone {
  position:fixed; bottom:5rem; right:1.4rem; z-index:140;
  display:flex; flex-direction:column; gap:.55rem;
}
.float-btn {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(26,25,23,.92); border:1px solid rgba(192,120,24,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; color:var(--parchm); position:relative; transition:all .22s;
}
.float-btn:hover, .float-btn:active { background:var(--amber); border-color:var(--amber); color:var(--ob); }
.float-btn svg { width:17px; height:17px; }
.float-flag {
  position:absolute; top:-5px; right:-5px; font-size:.7rem; line-height:1;
  background:var(--ob); border-radius:50%; padding:2px;
}
#f-top { opacity:0; transition:opacity .3s; pointer-events:none; }
#f-top.vis { opacity:1; pointer-events:auto; }

/* Sticky bar compra móvil */
.mob-buy-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:130;
  background:rgba(9,9,10,.97); border-top:var(--ba-light);
  padding:.8rem 1.5rem; display:none; align-items:center; justify-content:space-between; gap:.8rem;
}
.mob-buy-bar.vis { display:flex; }
.mob-buy-bar-text { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-body); }
.mob-buy-bar-text strong { color:var(--amber3); display:block; font-family:var(--fd); font-size:1rem; font-weight:300; }

/* Cookie bar */
#cookie-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  background:rgba(17,17,16,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:var(--ba-light); padding:1.1rem var(--pad-x);
  display:none; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
#cookie-bar p { font-size:.75rem; color:var(--text-body); line-height:1.8; }
#cookie-bar a { color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
.ck-btns { display:flex; gap:.7rem; flex-shrink:0; }
.ck-btn { font-family:var(--fu); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; padding:.55rem 1.4rem; transition:all .2s; }
.ck-ok { background:var(--amber); border:none; color:var(--ob); font-weight:600; }
.ck-ok:hover { background:var(--amber2); }
.ck-no { background:transparent; border:1px solid var(--stone); color:var(--text-body); }
.ck-no:hover { border-color:var(--sand); color:var(--parchm); }

/* ================================================================
   21. REVEAL — ANIMACIONES AL HACER SCROLL
   ================================================================ */

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.vis { opacity:1; transform:translateY(0); }

/* ================================================================
   22. PÁGINAS INTERNAS
   ================================================================ */

/* Hero de páginas internas */
.page-hero { padding:10rem var(--pad-x) 5.5rem; background:var(--carbon); position:relative; overflow:hidden; }
.page-hero::before {
  content:''; position:absolute; bottom:0; left:var(--pad-x); right:var(--pad-x); height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,120,24,.2),transparent);
}
.page-hero-label { font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--amber); margin-bottom:.8rem; }
.page-hero h1 { font-family:var(--fd); font-size:clamp(2.5rem,5vw,4.5rem); font-weight:300; color:var(--cream); line-height:1.06; }
.page-hero h1 em { font-style:italic; color:var(--amber3); }
.page-hero p { font-size:.9rem; color:var(--text-body); line-height:2.1; margin-top:1rem; max-width:580px; }

/* Legal */
.legal-content { max-width:820px; margin:0 auto; padding:5rem var(--pad-x); }
.legal-content h2 { font-family:var(--fd); font-size:1.8rem; font-weight:300; color:var(--cream); margin:2.8rem 0 .9rem; }
.legal-content h3 { font-family:var(--fd); font-size:1.2rem; font-weight:300; color:var(--amber3); margin:1.8rem 0 .6rem; }
.legal-content p, .legal-content li { font-size:.88rem; color:var(--text-body); line-height:2.1; margin-bottom:.8rem; }
.legal-content ul { padding-left:1.4rem; }
.legal-content a { color:var(--amber); text-decoration:underline; }

/* Contacto */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.form-group { margin-bottom:1.5rem; }
.form-group label { font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:.5rem; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid rgba(192,120,24,.22); color:var(--parchm);
  font-family:var(--fu); font-size:.88rem; font-weight:300; padding:.75rem 0; outline:none; transition:border-color .2s;
}
.form-group input:focus, .form-group textarea:focus { border-bottom-color:var(--amber); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-group select { cursor:pointer; }
.form-group select option { background:var(--carbon); }

/* Nosotros: fundador completo */
.founder-full { display:grid; grid-template-columns:110px 1fr; gap:2.5rem; align-items:start; padding:2.5rem 0; border-bottom:1px solid rgba(192,120,24,.08); }
.founder-full:last-child { border-bottom:none; }
.founder-full-letter { font-family:var(--fd); font-size:5rem; font-weight:300; color:rgba(192,120,24,.18); line-height:1; display:flex; align-items:center; justify-content:center; }
.founder-full-letter span { font-size:3rem; color:var(--amber); position:relative; z-index:1; }
.founder-full-name { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin-bottom:.2rem; }
.founder-full-role { font-family:var(--fd); font-size:1.15rem; font-weight:300; color:var(--amber3); margin-bottom:.2rem; }
.founder-full-country { font-size:.65rem; letter-spacing:.12em; color:var(--sand); margin-bottom:1rem; }
.founder-full-bio { font-size:.88rem; color:var(--text-body); line-height:2.1; }

/* Nosotros: valores */
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.5rem; }
.value-item { padding:2rem; border:1px solid rgba(192,120,24,.1); transition:border-color .3s,background .3s; }
.value-item:hover { border-color:rgba(192,120,24,.3); background:rgba(192,120,24,.03); }
.value-icon { width:44px; height:44px; margin-bottom:1.2rem; }
.value-icon svg { width:44px; height:44px; fill:none; stroke:var(--amber); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.value-title { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:.6rem; }
.value-desc { font-size:.85rem; color:var(--text-body); line-height:1.95; }

/* Galería */
.gal-intro { padding:8rem var(--pad-x) 2.5rem; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; background:var(--carbon); }
.gal-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:4px; background:var(--ob); content-visibility:auto; contain-intrinsic-size:0 1200px; }
.gal-cell { overflow:hidden; position:relative; }
.gal-cell.tall { grid-row:span 2; }
.gal-cell.wide { grid-column:span 2; }
.gal-cell img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); transition:filter .5s,transform .6s; display:block; }
.gal-cell:hover img { filter:saturate(1); transform:scale(1.04); }

/* Recetas grid */
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }

/* ================================================================
   23. COMPONENTES REUTILIZABLES
   ================================================================ */

/* Agave tabs (productos.html) */
.agave-tabs { display:flex; gap:0; margin-bottom:3rem; border-bottom:1px solid rgba(192,120,24,.2); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.agave-tabs::-webkit-scrollbar { display:none; }
.agave-tab {
  font-family:var(--fu); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-body); background:transparent; border:none; border-bottom:2px solid transparent;
  padding:1rem 2.5rem; cursor:pointer; transition:color .25s,border-color .25s;
  white-space:nowrap; position:relative; bottom:-1px;
}
.agave-tab:hover { color:var(--amber2); }
.agave-tab.active { color:var(--amber); border-bottom-color:var(--amber); }
.agave-panel { display:none; animation:panelFade .4s ease; }
.agave-panel.active { display:block; }
@keyframes panelFade { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.agave-badge { display:inline-block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ob); background:var(--amber); padding:.35rem 1rem; margin-bottom:1.2rem; }
.agave-h3 { font-family:var(--fd); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:300; color:var(--cream); line-height:1.1; margin-bottom:1rem; }
.agave-h3 em { font-style:italic; color:var(--amber3); }

/* Bottle story stats (productos.html) */
.bottle-story-stats { display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(192,120,24,.1); flex-wrap:wrap; }
.bs-item { display:flex; flex-direction:column; gap:.3rem; }
.bs-num  { font-family:var(--fd); font-size:3rem; font-weight:300; color:var(--amber3); line-height:1; }
.bs-label{ font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); }

/* Separadores entre secciones */
.sec-carbon + .divider, .sec-dark + .divider, .sec-smoke + .divider { opacity:.6; }

/* ================================================================
   24. RESPONSIVE
   Breakpoints: 1200 → 1100 → 900 → 768 → 640 → 480 → 420
   ================================================================ */

/* ── 1200px ─────────────────────────────────────────────────── */
@media (max-width:1200px) {
  :root { --pad-x: 3rem; }
}

/* ── 1100px: tablet grande — grids a columna simple ─────────── */
@media (max-width:1100px) {
  .historia-grid, .producto-grid, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .historia-img  { order:-1; }
  .founders-grid { grid-template-columns:repeat(2,1fr); }
  .proceso-grid  { grid-template-columns:repeat(2,1fr); }
  .awards-grid   { grid-template-columns:repeat(2,1fr); }
  .cocteles-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid   { grid-template-columns:1fr 1fr; }
  .momento-sec   { grid-template-columns:1fr; }
  .momento-img-col { min-height:380px; }
}

/* ── 900px: tablet / móvil grande ───────────────────────────── */
@media (max-width:900px) {
  :root { --pad-x: var(--pad-x-sm); }
  .sec, .sec-med   { padding:5rem var(--pad-x-sm); }
  .awards-bar      { padding:1.8rem var(--pad-x-sm); gap:1.5rem; }
  .aw-score { font-size:2rem; }
  .aw-label { font-size:.6rem; max-width:120px; }
  .mundial-sec     { padding:5.5rem var(--pad-x-sm); }
  .page-hero       { padding:8rem var(--pad-x-sm) 3.5rem; }
  .legal-content   { padding:3rem var(--pad-x-sm); }
  .gal-intro       { padding:8rem var(--pad-x-sm) 2.5rem; }
  footer           { padding:3.5rem var(--pad-x-sm) 5rem; }
  .footer-grid     { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer-bottom   { flex-direction:column; text-align:center; }
  #cookie-bar      { padding:1.1rem var(--pad-x-sm); }
  .momento-sec     { grid-template-columns:1fr; }
  .momento-img-col { min-height:300px; }
  .momento-text-col{ padding:3rem var(--pad-x-sm); }
  .momento-score   { font-size:5rem; }
  .mob-buy-bar     { display:flex; }
  .proceso-grid    { grid-template-columns:repeat(2,1fr); }
  .float-zone      { bottom:5.2rem; }
  /* Tipografía ligeramente más grande en tablet */
  .sec-body { font-size:1rem; max-width:100%; }
  .momento-body, .mundial-p, .cta-sub, .ac-desc,
  .paso-desc, .founder-desc, .legal-content p,
  .legal-content li, .founder-full-bio { font-size:.92rem; }
  /* Galería simplificada */
  .gal-grid  { grid-template-columns:repeat(2,1fr); }
  .gal-cell.tall, .gal-cell.wide { grid-row:span 1; grid-column:span 1; }
  .gallery-strip  { grid-template-columns:1fr; }
  .gallery-item   { aspect-ratio:16/7; }
  .recipe-grid    { grid-template-columns:repeat(2,1fr); }
  .awards-grid    { grid-template-columns:1fr; }
}

/* ── 768px: MÓVIL — tipografía grande, layouts simplificados ── */
@media (max-width:768px) {
  /* Hero */
  #hero { min-height:100svh; align-items:flex-start; }
  .hero-content { padding-top:calc(var(--nav-h) + 2rem); padding-left:var(--pad-x-sm); padding-right:var(--pad-x-sm); }
  .hero-h1      { font-size:clamp(2.6rem,9vw,3.8rem); line-height:1.04; }
  .hero-slogan  { font-size:1rem; margin-bottom:.7rem; }
  .hero-sub     { font-size:.78rem; letter-spacing:.08em; margin-bottom:1.2rem; }
  .hero-scroll  { display:none; }

  /* Párrafos — tamaño mínimo 16px en móvil */
  .sec-body, .momento-body, .mundial-p, .cta-sub, .ac-desc,
  .paso-desc, .founder-desc, .value-desc,
  .legal-content p, .legal-content li,
  .founder-full-bio, .award-card-desc { font-size:1rem; line-height:1.8; }

  /* Labels */
  .sec-label { font-size:.72rem; letter-spacing:.16em; }
  .sec-label::before { width:24px; height:2px; }
  .paso-name, .aw-label, .ac-title { font-size:.72rem; }

  /* Botones más fáciles de tocar */
  .btn { font-size:.78rem; padding:1rem 2rem; }
  .btn-group { flex-direction:column; }
  .btn-group .btn { text-align:center; }

  /* Awards bar vertical */
  .awards-bar { flex-direction:column; align-items:flex-start; gap:1.5rem; padding:2rem var(--pad-x-sm); }
  .aw-sep { display:none; }
  .aw-item { justify-content:flex-start; }
  .aw-label { max-width:220px; font-size:.75rem; }
  .aw-score { font-size:2.2rem; }

  /* Sección H2 */
  .sec-h2 { font-size:clamp(1.9rem,7vw,2.6rem); }

  /* Stats */
  .stat-num { font-size:2.4rem; }
  .stat-label { font-size:.68rem; }

  /* Flavor table 1 columna */
  .flavor-table { grid-template-columns:1fr; }

  /* Proceso 1 columna */
  .proceso-grid { grid-template-columns:1fr; }

  /* Fundadores 2 columnas */
  .founders-grid { grid-template-columns:repeat(2,1fr); }
  .founder-info  { padding:1rem; }

  /* Award cards */
  .ac-score { font-size:3.8rem; }
  .ac-desc  { font-size:.95rem; }

  /* Cócteles 2 columnas */
  .cocteles-grid { grid-template-columns:repeat(2,1fr); }
  .coctel-name   { font-size:1rem; }
  .coctel-ingr   { font-size:.68rem; }

  /* ── FOOTER MÓVIL: compacto, social visible ─────────────── */
  footer { padding:2.5rem var(--pad-x-sm) 6rem; }

  /* Grid: logo=full | Explorar=col1 | Tiendas+Contacto=col2 | Síguenos+Legal=full */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 2rem;
  }

  /* Logo + tagline: fila completa, en horizontal */
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: var(--ba-faint);
  }
  .footer-logo-img  { height:28px; margin-bottom:0; flex-shrink:0; }
  .footer-tagline   { font-size:.70rem; line-height:1.5; }

  /* Columna Síguenos+Legal: fila completa al final */
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }

  /* Social icons: grandes, horizontal, siempre visibles */
  .social-row       { gap:.7rem; margin-bottom:1rem; flex-wrap:wrap; }
  .soc-btn          { width:44px; height:44px; }
  .soc-btn svg      { width:20px; height:20px; }

  /* Legal links en la col Síguenos: compactos en 2 columnas */
  .footer-col:last-child ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .5rem;
  }

  .footer-col ul a { font-size:.80rem; }
  .footer-col h4   { font-size:.60rem; margin-bottom:.7rem; margin-top:1rem; }
  .footer-col h4:first-child { margin-top:0; }

  /* Footer bottom: centrado y compacto */
  .footer-bottom    { flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
  .footer-bottom p  { font-size:.66rem; }
  .footer-legal     { gap:.8rem; flex-wrap:wrap; justify-content:center; }
  .footer-legal a   { font-size:.66rem; }

  /* Floats */
  .float-zone { bottom:5.5rem; right:.8rem; }
  .float-btn  { width:44px; height:44px; }
  #f-top { display:none !important; }

  /* Cookie bar */
  #cookie-bar { padding:1rem var(--pad-x-sm); gap:1rem; }
  #cookie-bar p { font-size:.78rem; }

  /* Botella */
  .bottle-img { max-height:380px; }
  .bottle-wrap { min-height:300px; }

  /* Momento */
  .momento-text-col { padding:3rem var(--pad-x-sm); }

  /* Page hero */
  .page-hero { padding:8rem var(--pad-x-sm) 3.5rem; }
  .page-hero h1 { font-size:clamp(2rem,8vw,3rem); }
  .page-hero p  { font-size:.95rem; }

  /* Galería */
  .gal-intro { padding:8rem var(--pad-x-sm) 2rem; flex-direction:column; gap:1rem; }
  .gal-grid  { grid-auto-rows:200px; }

  /* Recetas 1 columna */
  .recipe-grid { grid-template-columns:1fr; }

  /* Historia */
  .historia-img img { height:360px; }

  /* Nosotros */
  .founder-full { grid-template-columns:1fr; gap:1rem; }
  .values-grid  { grid-template-columns:1fr; }

  /* Agave tabs */
  .agave-tab { padding:.8rem 1.6rem; font-size:.62rem; }

  /* Bottle stats */
  .bs-num { font-size:2.4rem; }
}

/* ── 640px ──────────────────────────────────────────────────── */
@media (max-width:640px) {
  .gallery-strip { grid-template-columns:1fr; }
  .gal-grid { grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
  .cocteles-grid { grid-template-columns:1fr; }
  .agave-tab { padding:.7rem 1.2rem; font-size:.6rem; letter-spacing:.12em; }
  .founder-full-letter { font-size:3.5rem; }
}

/* ── 480px ──────────────────────────────────────────────────── */
@media (max-width:480px) {
  .founders-grid { grid-template-columns:1fr; 
  .bottle-ghost  { display:none; } /* prevents horizontal overflow on small screens */
}
  .cocteles-grid { grid-template-columns:1fr; }
  .awards-grid   { grid-template-columns:1fr; }
  .hero-h1 { font-size:2.6rem; }
  .stats-row { gap:1.5rem; }
  .stat-num  { font-size:2.2rem; }
  .gal-grid { grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .footer-logo-img { height:30px; }
}

/* ── 420px: móvil pequeño ───────────────────────────────────── */
@media (max-width:420px) {
  .hero-h1    { font-size:2.3rem; }
  .hero-slogan{ font-size:.95rem; }
  .sec        { padding:4rem var(--pad-x-sm); }
  .sec-med    { padding:3rem var(--pad-x-sm); }
  .btn        { font-size:.72rem; padding:.85rem 1.8rem; }
  .awards-bar { padding:1.5rem 1rem; }
  .gal-grid   { grid-template-columns:1fr 1fr; grid-auto-rows:150px; }
  .ac-score   { font-size:3.2rem; }
  .mundial-bg-year { font-size:6rem; }
}


/* ================================================================
   GLOBE LANGUAGE DROPDOWN — Selector de idioma premium
   ================================================================ */

/* ── Wrapper del globo en nav desktop ───────────────────────── */
.lang-globe {
  position: relative;
  margin-left: .8rem;
  padding-left: .8rem;
  border-left: var(--ba-faint);
}

/* ── Botón del globo ─────────────────────────────────────────── */
.lang-globe-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-body);
  padding: .3rem .2rem;
  transition: color .2s;
  font-family: var(--fu);
}
.lang-globe-btn:hover { color: var(--amber2); }
.lang-globe-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex-shrink: 0;
}
.lang-globe-current {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Dropdown de idiomas ─────────────────────────────────────── */
.lang-dropdown {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 150px;
  background: rgba(9,9,10,.97);
  border: var(--ba-light);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  list-style: none;
  padding: .4rem 0;
  z-index: 400;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

/* Visible when open */
.lang-globe.open .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-globe.open .lang-globe-btn { color: var(--amber); }

/* ── Cada opción de idioma ───────────────────────────────────── */
.lang-opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem 1.1rem;
  font-family: var(--fu);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.lang-opt:hover {
  color: var(--amber2);
  background: rgba(192,120,24,.06);
}
.lang-opt.active {
  color: var(--amber);
  background: rgba(192,120,24,.06);
}
.lang-flag {
  font-size: .85rem;
  line-height: 1;
}

/* Small indicator next to active flag */
.lang-opt.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  margin-left: auto;
}

/* ── Ocultar en móvil (usa mob-lang en su lugar) ─────────────── */
body.nav-is-mobile .lang-globe { display: flex !important; margin-left:.3rem; padding-left:.3rem; border-left:none; }
body.nav-is-mobile .lang-globe .lang-dropdown { right:0; }
body.nav-is-mobile .lang-globe-btn { padding:.2rem; }
body.nav-is-mobile .lang-globe-current { display:none; }

/* ── Selector de idioma en menú móvil ───────────────────────── */
.mob-lang {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.mob-lang .lang-btn {
  font-size: .7rem;
  font-family: var(--fu);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  border: 1px solid rgba(192,120,24,.22);
  color: var(--text-body);
  text-decoration: none;
  transition: all .2s;
  background: transparent;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.mob-lang .lang-btn:hover,
.mob-lang .lang-btn.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(192,120,24,.08);
}

/* ================================================================
   LANG SWITCHER — Selector de idioma (matches nav aesthetic)
   ================================================================ */
.lang-switcher {
  display:flex; gap:.25rem; align-items:center; margin-left:.6rem;
}
.lang-btn {
  font-size:.58rem; letter-spacing:.14em; font-weight:500;
  text-transform:uppercase; color:var(--stone);
  text-decoration:none; padding:.22rem .42rem;
  border-radius:2px; border:1px solid transparent;
  transition:color .2s, border-color .2s; cursor:pointer; opacity:.6;
  background:transparent;
}
.lang-btn:hover { color:var(--amber2); border-color:rgba(192,120,24,.4); opacity:1; }
.lang-btn.active { color:var(--amber2); border-color:rgba(192,120,24,.5); opacity:1; }
body.nav-is-mobile .lang-switcher { display:none !important; }

.mob-lang {
  display:flex; gap:.7rem; margin-top:.2rem;
}
.mob-lang .lang-btn {
  font-size:.72rem; padding:.38rem .7rem;
  border:1px solid rgba(192,120,24,.25); border-radius:3px; opacity:.65;
}
.mob-lang .lang-btn:hover,
.mob-lang .lang-btn.active {
  border-color:var(--amber2); color:var(--amber2); opacity:1;
}


/* ================================================================
   VISUAL FIXES v2.0 — Homogenización completa del sitio
   Mejoras de contraste, amber, tipografía, y consistencia global
   ================================================================ */

/* ── 1. SEC-LABEL: línea dorada MÁS VISIBLE ─────────────────────
   El problema: la línea de 2px es difícil de ver sobre fondos muy
   oscuros. Solución: usar un gradient con más opacidad + brillo.   */
.sec-label::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(192,120,24,.5);  /* glow sutil */
  flex-shrink: 0;
}

/* ── 2. SEC-LABEL texto: letra-spacing y tamaño optimizados ────── */
.sec-label {
  font-size: .67rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}

/* ── 3. BTN-OUTLINE: más visible en todos los fondos ────────────── */
.btn-outline {
  padding: .9rem 2.4rem;
  background: transparent;
  border: 2px solid rgba(192,120,24,.65);
  color: var(--amber3);
  letter-spacing: .16em;
  transition: all .22s;
}
.btn-outline:hover {
  border-color: var(--amber);
  background: rgba(192,120,24,.10);
  color: var(--amber2);
}

/* ── 4. PASO-NAME: dorado con mejor legibilidad ──────────────────
   La letra dorada sobre fondo casi-negro necesita más brillo        */
.paso-name {
  font-size: .67rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber2);  /* subido de --amber a --amber2 */
  margin-bottom: .8rem;
  font-weight: 400;
}

/* ── 5. STEP NUMBERS: visibles sin opacar el contenido ──────────── */
.paso-num {
  font-family: var(--fd);
  font-size: 3.2rem;
  font-weight: 300;
  color: rgba(192,120,24,.35);  /* era .18 → .35 */
  line-height: 1;
  margin-bottom: .6rem;
}

/* ── 6. TIMELINE NUMBERS (proceso.html) ─────────────────────────── */
.tl-num {
  font-family: var(--fd);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(192,120,24,.65);  /* más visible */
  line-height: 1;
  text-align: right;
  padding-top: .2rem;
}
.tl-name {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber2);  /* era --amber → más brillante */
  margin-bottom: .6rem;
}

/* ── 7. FOOTER LINKS: siempre legibles ──────────────────────────── */
.footer-col ul a {
  font-size: .78rem;
  color: var(--text-body);
  text-decoration: none;
  transition: color .2s;
}
.footer-col ul a:hover { color: var(--amber2); }

/* ── 8. AC-TITLE (award cards): amber más visible ───────────────── */
.ac-title {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber2);  /* era --amber → --amber2 */
  margin-bottom: .9rem;
}

/* ── 9. AW-LABEL (awards bar): contraste mejorado ───────────────── */
.aw-label {
  font-size: .70rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-body);
  margin-top: .2rem;
  max-width: 180px;
  line-height: 1.6;
}

/* ── 10. STAT-LABEL: más legible ─────────────────────────────────── */
.stat-label {
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-body);
  margin-top: .25rem;
}

/* ── 11. VALOR-TITLE (nosotros): dorado visible ─────────────────── */
.value-title {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber2);
  margin-bottom: .6rem;
}

/* ── 12. FOUNDER-NAME: crema nítida ─────────────────────────────── */
.founder-name {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: .25rem;
}
.founder-country {
  font-size: .63rem;
  letter-spacing: .1em;
  color: var(--amber3);
  margin-bottom: .6rem;
}

/* ── 13. PAGE-HERO label: contraste ─────────────────────────────── */
.page-hero-label {
  font-size: .67rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--amber2);
  margin-bottom: .8rem;
}

/* ── 14. HERO EYEBROW: visible ──────────────────────────────────── */
.hero-eyebrow {
  font-size: .67rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber2);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  animation: fadeUp .8s var(--ease-out) both;
}
.hero-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--amber2);
  box-shadow: 0 0 4px rgba(218,143,36,.6);
}

/* ── 15. COCTEL-INGR: amber3 (era sand, demasiado oscuro) ───────── */
.coctel-ingr {
  font-size: .63rem;
  letter-spacing: .1em;
  color: var(--amber3);
  text-transform: uppercase;
}

/* ── 16. TAG (mundial section): visible ─────────────────────────── */
.tag {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber2);
  border: 1px solid rgba(192,120,24,.35);
  padding: .4rem 1rem;
}

/* ── 17. MOMENTO-AWARD: visible ─────────────────────────────────── */
.momento-award {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber2);
  margin-top: -1.5rem;
}

/* ── 18. SOCIAL ICONS: siempre visibles ─────────────────────────── */
.soc-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192,120,24,.35);
  background: rgba(192,120,24,.05);
  transition: all .2s;
  text-decoration: none;
}
.soc-btn:hover { background: var(--amber); border-color: var(--amber); }
.soc-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--text-body);
  transition: fill .2s;
  display: block;
}
.soc-btn:hover svg { fill: var(--ob); }

/* ── 19. GLOBAL P TAG: better line-height for readability ───────── */
.sec-body {
  font-size: .96rem;
  letter-spacing: .03em;
  line-height: 2.05;
  color: var(--text-body);
  max-width: 560px;
}

/* ── 20. FOOTER-TAGLINE: visible ────────────────────────────────── */
.footer-tagline {
  font-size: .74rem;
  color: var(--text-body);
  line-height: 1.9;
  letter-spacing: .04em;
}

/* ── 21. FOOTER-BOTTOM: visible ─────────────────────────────────── */
.footer-bottom p {
  font-size: .67rem;
  color: var(--text-body);
  letter-spacing: .06em;
}

/* ── 22. NAV-LINKS: brighter on hover ───────────────────────────── */
.nav-links a {
  font-size: .67rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  transition: color .2s;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a:hover, .nav-links a.active { color: var(--amber2); }

/* ── 23. DIVIDER: more presence ─────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,120,24,.28), transparent);
}

/* ── 24. PROCESS-INTRO (proceso.html) ───────────────────────────── */
.process-intro {
  max-width: 680px;
  margin: 0 auto 5rem;
  text-align: center;
}

/* ── 25. MOBILE: ensure amber labels stay visible ───────────────── */
@media (max-width: 768px) {
  .sec-label {
    font-size: .72rem;
    letter-spacing: .16em;
  }
  .sec-label::before {
    width: 24px;
    height: 2px;
    box-shadow: 0 0 5px rgba(192,120,24,.5);
  }
  .paso-name   { font-size: .72rem; }
  .tl-name     { font-size: .72rem; }
  .ac-title    { font-size: .72rem; }
  .page-hero-label { font-size: .72rem; }
  .value-title { font-size: .72rem; }
  .btn-outline { 
    border-width: 2px;
    border-color: rgba(192,120,24,.7);
  }
}

/* ================================================================
   AESTHETIC IMPROVEMENTS v3.0 — Visual polish & micro-interactions
   ================================================================ */

/* ── Paso cards: stronger hover glow ─────────────────────────── */
.paso {
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.paso:hover {
  border-color: rgba(192,120,24,.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(192,120,24,.12), 0 0 0 1px rgba(192,120,24,.15);
}
.paso-num {
  transition: color .3s;
}
.paso:hover .paso-num {
  color: rgba(192,120,24,.9) !important;
}

/* ── Hero H1: subtle amber gradient on em ────────────────────── */
#hero .hero-h1 em {
  background: linear-gradient(135deg, #c6a05d 0%, #e8c97a 50%, #c6a05d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Award cards: lift on hover ──────────────────────────────── */
.award-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.award-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(192,120,24,.2);
}

/* ── Nav CTA pulse ───────────────────────────────────────────── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,120,24,.3); }
  50%       { box-shadow: 0 0 0 6px rgba(192,120,24,.0); }
}
.nav-cta { animation: subtlePulse 3s ease-in-out infinite; }

/* ── Smooth scroll reveal with stagger ───────────────────────── */
.reveal {
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* ── Awards bar aw-item hover ─────────────────────────────────── */
.aw-item {
  transition: transform .25s;
  cursor: default;
}
.aw-item:hover { transform: scale(1.04); }
.aw-item:hover .aw-score { color: var(--amber); }
.aw-score { transition: color .25s; }

/* ── Bottle image: subtle float animation ────────────────────── */
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.bottle-img { animation: bottleFloat 5s ease-in-out infinite; }

/* ── Timeline items: left accent line on hover ───────────────── */
.tl-item {
  transition: background .25s;
  border-radius: 4px;
  padding-left: .5rem;
}
.tl-item:hover { background: rgba(192,120,24,.03); }
.tl-item:hover .tl-num { color: rgba(192,120,24,.85) !important; }
.tl-num { transition: color .3s; }

/* ── Mobile: ensure awards bar scrollable ─────────────────────── */
@media (max-width: 640px) {
  .awards-bar {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 1.5rem;
    padding: 2rem 1.2rem;
  }
  .aw-sep { display: none; }
  .aw-item { justify-content: flex-start; }
  .aw-score { font-size: 2.2rem; }
  .aw-label { max-width: 220px; font-size: .75rem; }
}

/* ── Lang globe visible + styled on mobile in nav ─────────────── */
@media (max-width: 900px) {
  body.nav-is-mobile .lang-globe-btn svg {
    width: 20px;
    height: 20px;
  }
  body.nav-is-mobile .lang-globe {
    order: 1;
  }
  body.nav-is-mobile .nav-burger {
    order: 2;
  }
}

/* ── Mobile nav layout: logo left, globe+burger right ──────────── */
body.nav-is-mobile nav {
  justify-content: space-between;
}
body.nav-is-mobile .nav-logo {
  flex: 1;
}
body.nav-is-mobile .lang-globe {
  margin-left: auto;
  margin-right: .6rem;
  border-left: none;
  padding-left: 0;
}
body.nav-is-mobile .lang-globe-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--parchm);
}
body.nav-is-mobile .lang-globe-btn:hover svg,
body.nav-is-mobile .lang-globe.open .lang-globe-btn svg {
  stroke: var(--amber2);
}

/* ================================================================
   GALERIA — Improved bento-style grid layout v2
   ================================================================ */
.gal-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: 280px !important;
  gap: 4px !important;
  background: var(--ob) !important;
}

/* Override span classes for better bento layout */
.gal-cell { position:relative; overflow:hidden; background:var(--ash); cursor:zoom-in; }
.gal-cell img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1), filter .4s; filter:saturate(.6); }
.gal-cell:hover img { transform:scale(1.06); filter:saturate(1) brightness(1.05); }

/* Label overlay */
.gal-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:.7rem 1rem;
  background:linear-gradient(transparent, rgba(9,9,10,.85));
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  opacity:0; transition:opacity .3s;
}
.gal-cell:hover .gal-label { opacity:1; }

/* Bento layout assignments */
.gal-cell:nth-child(1)  { grid-column:span 2; grid-row:span 2; } /* hero tall-wide */
.gal-cell:nth-child(2)  { grid-column:span 1; grid-row:span 1; }
.gal-cell:nth-child(3)  { grid-column:span 1; grid-row:span 1; }
.gal-cell:nth-child(4)  { grid-column:span 1; grid-row:span 2; }
.gal-cell:nth-child(5)  { grid-column:span 1; grid-row:span 1; }
.gal-cell:nth-child(6)  { grid-column:span 2; grid-row:span 1; }
.gal-cell:nth-child(7)  { grid-column:span 1; grid-row:span 2; }
.gal-cell:nth-child(8)  { grid-column:span 1; grid-row:span 1; }
.gal-cell:nth-child(9)  { grid-column:span 2; grid-row:span 1; }
.gal-cell:nth-child(10) { grid-column:span 2; grid-row:span 2; }
.gal-cell:nth-child(11) { grid-column:span 1; grid-row:span 1; }
.gal-cell:nth-child(12) { grid-column:span 1; grid-row:span 1; }

/* Remove old span classes overrides */
.gal-cell.tall { grid-row:unset; }
.gal-cell.wide { grid-column:unset; }

@media (max-width:900px) {
  .gal-grid {
    grid-template-columns: repeat(2,1fr) !important;
    grid-auto-rows: 220px !important;
    gap: 3px !important;
  }
  .gal-cell:nth-child(n) { grid-column:span 1 !important; grid-row:span 1 !important; }
  .gal-cell:nth-child(1), .gal-cell:nth-child(6), .gal-cell:nth-child(10) {
    grid-column:span 2 !important;
  }
}
@media (max-width:600px) {
  .gal-grid {
    grid-template-columns: repeat(2,1fr) !important;
    grid-auto-rows: 180px !important;
  }
}

/* ================================================================
   SITE IMPROVEMENTS v4.0 — Polish, UX & Aesthetic Upgrades
   ================================================================ */

/* ── 1. Smooth scroll & selection color ─────────────────────── */
html { scroll-behavior: smooth; }
::selection { background: rgba(192,120,24,.3); color: var(--cream); }

/* ── 2. Focus styles for accessibility ──────────────────────── */
*:focus-visible {
  outline: 2px solid var(--amber2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 3. Nav active link underline always visible ─────────────── */
.nav-links a.active { color: var(--amber2); }
.nav-links a.active::after { transform: scaleX(1); }

/* ── 4. Mobile lang globe z-index fix ───────────────────────── */
.lang-dropdown { z-index: 500 !important; }

/* ── 5. Footer — hover effect on links ──────────────────────── */
footer a { transition: color .2s; }
footer a:hover { color: var(--amber2); }
.footer-col h4 {
  position: relative;
  padding-bottom: .4rem;
  margin-bottom: .8rem;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--amber);
  opacity: .5;
}

/* ── 6. Improved page-hero with gradient text ────────────────── */
.page-hero h1 em {
  background: linear-gradient(135deg, #c6a05d 0%, #f0d98a 50%, #c6a05d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 7. Award card — amber top border on hover ───────────────── */
.award-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.award-card { position: relative; }
.award-card:hover::before { opacity: 1; }

/* ── 8. Scroll-reveal improvement — reduce motion ────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .bottle-img, .paso { 
    animation: none !important;
    transition: none !important;
  }
}

/* ── 9. Better form styling ──────────────────────────────────── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-bottom-color: var(--amber2) !important;
  outline: none;
}
.form-group label {
  transition: color .2s;
}
.form-group:focus-within label {
  color: var(--amber2);
}

/* ── 10. WhatsApp buttons hover ─────────────────────────────── */
.wa-btn {
  transition: background .2s, border-color .2s, transform .2s;
}
.wa-btn:hover {
  background: rgba(192,120,24,.08) !important;
  border-color: rgba(192,120,24,.4) !important;
  transform: translateX(4px);
}

/* ── 11. CTA section — ambient glow ─────────────────────────── */
.cta-inner {
  position: relative;
}
.cta-inner::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 200px;
  background: radial-gradient(ellipse, rgba(192,120,24,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 12. Stat numbers — count-up visual indicator ────────────── */
.stat-num {
  background: linear-gradient(135deg, var(--amber3) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 13. Improved mobile menu animation ─────────────────────── */
.mob-menu {
  transition: opacity .25s, transform .25s;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.mob-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 14. Process timeline — number accent ───────────────────── */
.tl-name {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.tl-name::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--amber);
  flex-shrink: 0;
}

/* ── 15. Galeria — image hover caption overlay improved ─────── */
.gal-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(192,120,24,.0) 0%, rgba(9,9,10,.2) 100%);
  opacity: 0;
  transition: opacity .35s;
}
.gal-cell:hover::after { opacity: 1; }