/* ==========================================================
   Cabo Cigar Co. — Design tokens + components (mobile-first)
   ========================================================== */
:root {
  /* Paleta oficial */
  --crema:   #f3e9d6;
  --crema-2: #eadcc0;
  --tabaco:  #5a3a1e;
  --tabaco-2:#6f4826;
  --cafe:    #3b2314;
  --bronce:  #b8863f;
  --bronce-l:#d8ad6a;
  --bronce-d:#8a6128;
  --negro:   #120c08;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(18, 12, 8, .18);
  --shadow-lg: 0 22px 50px rgba(18, 12, 8, .32);
  --ease: cubic-bezier(.22, .7, .2, 1);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0; font-family: var(--font-sans); color: var(--negro);
  background: var(--crema); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.1; margin: 0 0 .5em; color: var(--tabaco); text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--bronce); outline-offset: 3px; }

.container { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.section { padding: 3.5rem 0; }

.eyebrow {
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--bronce-d); font-weight: 600; margin-bottom: 1rem;
}
.divider { width: 84px; height: 2px; background: linear-gradient(90deg, var(--bronce), transparent); margin: 1.2rem 0 1.6rem; position: relative; }
.divider.center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--bronce), transparent); width: 140px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .82rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-primary { background: linear-gradient(135deg, var(--bronce-l), var(--bronce) 55%, var(--bronce-d)); color: var(--negro); box-shadow: 0 6px 18px rgba(184, 134, 63, .35); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(184, 134, 63, .5); }
.btn-ghost-light { color: var(--crema); border-color: rgba(243, 233, 214, .55); }
.btn-ghost-light:hover { background: var(--crema); color: var(--negro); transform: translateY(-3px); }
.btn-outline { color: var(--tabaco); border-color: var(--bronce); padding: .7rem 1.2rem; }
.btn-outline:hover { background: var(--bronce); color: var(--negro); transform: translateY(-2px); }

/* ---------- Header ---------- */
/* El fondo difuminado va en un ::before, no en .site-header: si backdrop-filter
   estuviera en .site-header (que tiene position:fixed), se convertiría en el
   "contenedor" de cualquier descendiente position:fixed (como el drawer .nav en
   móvil) y este dejaría de posicionarse contra la ventana, rompiendo el overlay
   de pantalla completa. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  border-bottom: 1px solid rgba(184, 134, 63, .35);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(18, 12, 8, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: flex-start; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--crema); }

/* Logo real (logo.png, raíz del proyecto), reutilizado tal cual por Header y
   Footer para la misma identidad de marca. Solo altura fija + object-fit:contain
   para conservar su proporción real (1521x1034) sin deformarlo ni recortarlo. */
.brand-mark { height: 62px; width: auto; max-width: none; object-fit: contain; display: block; transition: transform .3s var(--ease); }
.brand:hover .brand-mark { transform: scale(1.05); }

/* Slogan independiente junto al logo: el logo ya lo incluye visualmente pero
   se vuelve ilegible al achicarse en móvil, así que se repite como texto HTML
   real que sigue siendo legible sin importar el tamaño del logo. No reemplaza
   ni reintroduce el sello/EST.1994 anterior. */
.brand-slogan {
  display: flex; flex-direction: column; align-items: flex-start;
  font: 600 .64rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bronce-l); line-height: 1.3;
}
.brand-slogan-line { display: block; white-space: nowrap; }
@media (max-width: 420px) {
  .brand-slogan { font-size: .52rem; letter-spacing: .07em; line-height: 1.25; }
}

/* Móvil: panel oscuro a pantalla completa (drawer) bajo el header, con scroll propio
   si el contenido no cabe. En desktop se convierte en una barra horizontal (ver 960px). */
.nav {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--negro);
  display: flex; flex-direction: column; gap: 1.4rem; padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(-8%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s linear .4s;
}
.nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s; }
.nav-links, .nav-actions { display: contents; }
.nav a:not(.btn) { color: var(--crema); font-size: 1.05rem; letter-spacing: .06em; position: relative; padding: .25rem 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--bronce); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta { padding: .8rem 1.1rem; text-align: center; }

.nav-toggle { background: none; border: 0; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--bronce-l); transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 3rem) 0 4rem; color: var(--crema); overflow: hidden; background: var(--negro); }
/* Fondo de dos tonos con corte marcado: mitad superior marrón oscuro (Negro→Tabaco),
   mitad inferior un marrón/dorado sensiblemente más claro, para dar peso geométrico
   detrás del video en vez de un degradado suave sin contraste. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--negro) 0%, var(--tabaco) 48%, #7a5427 52%, #8a6128 100%);
}
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,12,8,.9) 0%, rgba(18,12,8,.5) 55%, rgba(18,12,8,.15) 100%), linear-gradient(0deg, var(--negro) 0%, transparent 25%); }
.hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }
.hero h1 { color: var(--crema); font-size: clamp(2.8rem, 9vw, 5.6rem); font-weight: 600; letter-spacing: -.01em; }
.hero h1 em { color: var(--bronce-l); font-style: italic; }
.lead { font-size: 1.08rem; max-width: 34rem; color: rgba(243, 233, 214, .86); }
.hero .eyebrow { color: var(--bronce-l); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 2.5rem; }
.hero-social { display: flex; gap: 1.1rem; margin: 0 0 2rem; }
/* Fila de redes sociales exclusiva de móvil/tablet, sobre "SIGNATURE SERVICE"
   (ver .hero-social-top en index.html). Círculo discreto con área táctil de
   44x44px; oculta en desktop en el mismo breakpoint donde el Hero pasa a dos
   columnas (.hero-grid más abajo), ya que ahí sigue existiendo .hero-social. */
.hero-social-top { display: flex; gap: .6rem; margin: 0 0 1.4rem; }
.hero-social-top-link {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(184,134,63,.5); background: rgba(243,233,214,.06); color: var(--bronce-l);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.hero-social-top-link svg { width: 18px; height: 18px; }
.hero-social-top-link:hover, .hero-social-top-link:focus-visible { background: var(--bronce); color: var(--negro); transform: translateY(-2px); }
.hero-social-link { color: var(--crema); opacity: .85; transition: color .3s var(--ease), opacity .3s, transform .3s var(--ease); }
.hero-social-link svg { width: 22px; height: 22px; }
.hero-social-link:hover, .hero-social-link:focus-visible { color: #fff; opacity: 1; transform: translateY(-3px); }
/* En móvil/tablet (<960px) .hero-social-top ya cubre Instagram/Facebook arriba
   del todo; .hero-social (con WhatsApp incluido) se oculta ahí para no
   duplicar iconos — el WhatsApp flotante (.whatsapp-fab) sigue siempre visible.
   Desde 960px el Hero pasa a dos columnas y .hero-social-top se oculta, así
   que .hero-social (WA+IG+FB) vuelve a ser la fila visible en desktop. */
@media (max-width: 959px) { .hero-social { display: none; } }

/* Recuadro compacto "Surprise your guests with" — reutiliza .check-list/.check-ico
   (ya usados en Nuestra Historia) sobre un fondo oscuro translúcido. */
.hero-surprise { margin: 0 0 1.8rem; padding: 1.1rem 1.3rem; border: 1px solid rgba(184,134,63,.45); border-radius: var(--radius); background: rgba(18,12,8,.35); max-width: 34rem; }
.hero-surprise h3 { font: 700 .82rem var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--bronce-l); margin-bottom: .8rem; }
.hero-surprise .check-list { gap: .6rem; margin-top: 0; }
.hero-surprise .check-list li { color: rgba(243,233,214,.92); font-size: .88rem; }
.hero-surprise .check-ico { border-color: var(--bronce-l); color: var(--bronce-l); background: rgba(184,134,63,.14); width: 18px; height: 18px; padding: 3px; }

/* ==========================================================
   Hero — columna derecha: video con marco + sello superpuesto.
   ========================================================== */
.hero-stack { position: relative; width: 100%; height: 100%; min-height: 500px; padding: 0 .5rem; }

.hero-stack-video {
  position: relative; z-index: 10; width: 100%; max-width: 24rem; margin-inline: auto;
  border-radius: 2rem; overflow: hidden; border: 4px solid #3a2a21;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  aspect-ratio: 9 / 16;
}
.hero-stack-video-el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Nuestra Historia / About Us (editorial de lujo) ---------- */
.section-story { background: var(--crema); position: relative; }
.section-story::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 10%, rgba(184,134,63,.14), transparent 45%); pointer-events: none; }
.story-grid { position: relative; display: grid; gap: 3rem; }
.story-col p { font-size: 1rem; color: var(--cafe); }
.story-col h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 1rem; }
.story-eyebrow-sm { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronce-d); font-weight: 600; margin-bottom: .5rem; }
.hl { color: var(--bronce-d); font-weight: 700; }

.story-stamp { width: 92px; color: var(--bronce-d); opacity: .92; margin: 0 0 1.1rem; transition: transform .6s var(--ease); }
.story-col-heritage:hover .story-stamp { transform: rotate(-6deg) scale(1.04); }
/* Editorial drop cap on the lead paragraph */
.story-col-heritage p::first-letter { font-family: var(--font-serif); font-size: 3.4em; font-weight: 700; float: left; line-height: .78; padding: .05em .08em 0 0; color: var(--tabaco); }

.store-callout { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(184,134,63,.6); border-left: 3px solid var(--bronce); border-radius: 4px 12px 12px 4px; background: rgba(184,134,63,.08); }
.store-callout p { margin: 0; font-style: italic; font-size: .96rem; color: var(--tabaco); }

.story-col-events { padding-top: .2rem; }
.check-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .96rem; color: var(--cafe); }
.check-ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; border: 1.5px solid var(--bronce); color: var(--bronce-d); background: rgba(184,134,63,.08); flex: none; margin-top: .1rem; transition: background .3s, color .3s; }
.check-list li:hover .check-ico { background: var(--bronce); color: var(--negro); }

/* ---------- Section head ---------- */
.section-head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
.section-sub { color: var(--cafe); opacity: .85; }
.section-head.light h2 { color: var(--crema); }
.section-head.light .eyebrow { color: var(--bronce-l); }
.section-head.light .section-sub { color: rgba(243,233,214,.8); }

/* ---------- Catalog ---------- */
.section-catalog { background: var(--crema-2); background-image: linear-gradient(180deg, var(--crema) 0, transparent 120px); }

/* ---------- Experience (dark) ---------- */
.section-dark { background: radial-gradient(circle at 80% 0%, rgba(184,134,63,.16), transparent 45%), var(--negro); color: var(--crema); }

/* ---------- Reviews ---------- */
.section-reviews { background: var(--crema); }
.carousel { max-width: 780px; margin-inline: auto; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carousel-track::-webkit-scrollbar { display: none; }
.review { flex: 0 0 100%; scroll-snap-align: center; padding: .5rem; }
.review-inner { position: relative; text-align: center; padding: 2.5rem 1.6rem 2rem; background: var(--tabaco); color: var(--crema); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--bronce); }
.review-inner::before { content: "\201C"; position: absolute; top: -.1em; left: 50%; transform: translateX(-50%); font: 700 6rem/1 var(--font-serif); color: var(--bronce); opacity: .8; }
.stars { color: var(--bronce-l); letter-spacing: .2em; margin: 1rem 0 .8rem; }
.review blockquote { margin: 0 0 1.4rem; font: italic 500 1.35rem/1.45 var(--font-serif); }
.review cite { font-style: normal; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronce-l); }
.review cite span { display: block; opacity: .7; letter-spacing: .08em; text-transform: none; margin-top: .2rem; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bronce); background: transparent; color: var(--tabaco); font-size: 1.1rem; cursor: pointer; transition: all .3s var(--ease); }
.car-btn:hover { background: var(--bronce); color: var(--negro); transform: scale(1.08); }
.dots { display: flex; gap: .5rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bronce); background: transparent; padding: 0; cursor: pointer; transition: all .3s; }
.dot.is-active { background: var(--bronce); transform: scale(1.3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--negro); color: rgba(243,233,214,.8); padding-top: 4rem; border-top: 3px solid var(--bronce); }
.footer-grid { display: grid; gap: 2.2rem; padding-bottom: 3rem; }
.site-footer h4 { color: var(--bronce-l); font-size: 1.3rem; letter-spacing: .05em; }
.foot-list { font-style: normal; font-size: .92rem; display: grid; gap: .4rem; }
.foot-list a { transition: color .3s; } .foot-list a:hover { color: var(--bronce-l); }
.foot-brand .brand { margin-bottom: 1.1rem; }
.social { display: flex; gap: .6rem; margin-bottom: .9rem; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--bronce); border-radius: 50%; font-size: .75rem; font-weight: 600; color: var(--bronce-l); transition: all .3s var(--ease); }
.social a:hover { background: var(--bronce); color: var(--negro); transform: translateY(-3px); }
.social a svg { width: 18px; height: 18px; }
.legal { border-top: 1px solid rgba(184,134,63,.3); padding: 1.6rem 0 2rem; font-size: .78rem; opacity: .85; }
.legal .copy { margin: 0; opacity: .7; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Breakpoints (mobile-first) ---------- */
@media (min-width: 640px) {
  .section { padding: 4.5rem 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .story-stamp { float: right; margin: 0 0 1rem 1.4rem; width: 116px; }
}
@media (min-width: 960px) {
  .section { padding: 7rem 0; }
  .container { width: min(1280px, 100% - 4rem); }
  /* Header desktop: logo a la izquierda, enlaces centrados, CTA + idioma a la derecha */
  /* Grid de 3 columnas 1fr/auto/1fr: centra nav-links en el ancho de .nav cuando
     sobra espacio, y si no alcanza, las columnas 1fr simplemente se reducen sin
     que nav-links llegue a solaparse con el CTA (a diferencia de centrar con
     position:absolute, que sí podría superponerlos en ventanas angostas). */
  .nav {
    position: static; inset: auto; flex: 1; display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; column-gap: 1.5rem; padding: 0; background: none; overflow: visible;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none;
  }
  .nav-links { display: flex; grid-column: 2; justify-self: center; align-items: center; gap: 1.6rem; }
  .nav-actions { display: flex; grid-column: 3; justify-self: end; align-items: center; gap: .7rem; }
  .nav-toggle { display: none; }
  .nav-cta { padding: .7rem 1.2rem; font-size: .72rem; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .hero-stack { padding: 0; }
  .hero-social-top { display: none; }
  .story-grid { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; }
  .story-col-events { padding-left: 3rem; border-left: 1px solid rgba(184,134,63,.4); }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   v2 — Dual focus: eventos + tienda
   ========================================================== */
.btn-outline-light { color: var(--crema); border-color: rgba(216,173,106,.7); padding: .7rem 1.2rem; }
.btn-outline-light:hover { background: var(--bronce); border-color: var(--bronce); color: var(--negro); transform: translateY(-2px); }
.btn-outline-bronze { color: var(--bronce-l); border-color: var(--bronce); background: rgba(18,12,8,.35); }
.btn-outline-bronze:hover { background: var(--bronce); color: var(--negro); transform: translateY(-3px); }
.btn-lg { padding: 1.1rem 1.8rem; font-size: .85rem; line-height: 1.3; text-align: center; }
.btn-block { width: 100%; padding-block: 1rem; }

.hero h1 { font-size: clamp(2.05rem, 8vw, 4.6rem); }
.hero-actions .btn-lg { flex: 1 1 100%; }

/* Eventos */
.events-split { display: grid; gap: 2rem; align-items: start; }
.ideal { color: var(--crema); padding: 1rem 0; }
.ideal h3 { color: var(--bronce-l); font-size: 1.9rem; }
.ideal-list { display: grid; gap: .8rem; margin: 1.2rem 0 1.6rem; }
.ideal-list li { position: relative; padding-left: 1.8rem; font-size: 1.05rem; }
.ideal-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; transform: rotate(45deg); background: var(--bronce); }
.ideal-note { font-size: .9rem; color: rgba(243,233,214,.7); border-top: 1px solid rgba(184,134,63,.4); padding-top: 1rem; }

.quote-card { position: relative; background: var(--crema); color: var(--negro); border-radius: var(--radius); padding: 2rem 1.5rem; border: 2px solid var(--bronce); box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 1rem); }
.quote-card::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(184,134,63,.55); border-radius: calc(var(--radius) - 6px); pointer-events: none; }
.quote-card h3 { font-size: 2rem; margin-bottom: .2rem; }
.form-sub { font-size: .92rem; color: var(--cafe); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field-row { display: grid; gap: 0 1rem; }
.field label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cafe); }
.field input, .field select { font: 400 1rem var(--font-sans); padding: .8rem .9rem; border-radius: 8px; border: 1px solid rgba(90,58,30,.4); background: #fbf5e8; color: var(--negro); transition: border-color .3s, box-shadow .3s; width: 100%; }
.field input:hover, .field select:hover { border-color: var(--bronce); }
.field input:focus, .field select:focus { outline: none; border-color: var(--bronce); box-shadow: 0 0 0 3px rgba(184,134,63,.3); }
.field .invalid { border-color: #a3341f; }
.form-msg { margin: 1rem 0 0; font-size: .9rem; min-height: 1.2em; }
.form-msg.ok { color: #2f5d2a; } .form-msg.err { color: #a3341f; }

/* Lounge */
.section-lounge { background: linear-gradient(135deg, var(--tabaco), var(--cafe)); color: var(--crema); border-block: 1px solid var(--bronce); }
/* Dos columnas: copy (izquierda) + Google Maps (derecha). Una sola columna
   (mapa debajo del texto) por debajo de 860px, donde dos columnas lado a lado
   dejarían muy poco espacio al texto. */
.lounge-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; max-width: 46rem; }
.lounge-copy h2 { color: var(--crema); font-size: clamp(2rem, 5vw, 3rem); }
.lounge-copy .eyebrow { color: var(--bronce-l); }
.lounge-copy p { color: rgba(243,233,214,.85); }
.lounge-map {
  width: 100%; height: 300px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(184,134,63,.5); box-shadow: var(--shadow);
}
.lounge-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 480px) { .lounge-map { height: 330px; } }
@media (min-width: 860px) {
  .lounge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; max-width: 64rem; }
  .lounge-map { height: 400px; }
}

@media (min-width: 640px) {
  .hero-actions .btn-lg { flex: 0 1 auto; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .quote-card { padding: 2.4rem 2.2rem; }
}
@media (min-width: 960px) {
  .nav a:not(.btn) { font-size: .82rem; }
  .events-split { grid-template-columns: .8fr 1.2fr; gap: 4rem; }
}

/* ==========================================================
   v3 — i18n switcher, mobile action bar
   ========================================================== */
/* Toggle limpio "EN | ES": el idioma activo resalta en Bronce + negrita, el inactivo
   se ve en Crema con menor opacidad. Siempre visible en el header (no vive dentro
   del drawer), arriba a la derecha junto al CTA / botón de menú. */
.lang-switch { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; margin-right: .9rem; }
.lang-switch span { opacity: .4; font-size: .7rem; color: var(--crema); }
.lang-switch button { background: none; border: 0; padding: .2rem; font: 600 .78rem var(--font-sans); letter-spacing: .06em; color: var(--crema); opacity: .7; cursor: pointer; transition: color .3s, opacity .3s; }
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] { color: var(--bronce-l); font-weight: 700; opacity: 1; }
.lang-switch-foot { margin: 0; }

/* Transición al cambiar idioma */
main, .site-footer, .nav, .mobile-bar { transition: opacity .22s ease; }
body.lang-fade main, body.lang-fade .site-footer, body.lang-fade .nav, body.lang-fade .mobile-bar { opacity: 0; }

/* Barra fija móvil */
.mobile-bar { position: fixed; inset: auto 0 0 0; z-index: 45; display: grid; grid-template-columns: 1fr; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(18,12,8,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--bronce); }
.mobile-bar .btn { padding: .85rem .5rem; font-size: .7rem; }
body { padding-bottom: 4.5rem; }
.site-header .nav-toggle { margin-left: 0; }

@media (min-width: 960px) {
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
}
@media (max-width: 420px) {
  .brand-mark { height: 50px; }
}

/* ==========================================================
   Premium Cigars-Habanos: placeholder de foto, sello de autenticidad,
   tabs de marca (18) y panel compacto por marca (sin precios/carrito:
   el contenido oficial solo trae nombre + descripción + productos).
   ========================================================== */

/* Foto real de Premium Cigars-Habanos (Imagenes/Premium Cigars/collection.png).
   width:100%+height:auto conserva su proporción original (cuadrada) sin
   recortar ni deformar; max-width la mantiene centrada y evita que domine
   la sección en desktop. */
.premium-photo-wrap { position: relative; display: block; width: 100%; max-width: 560px; margin: 0 auto 2rem; }
.premium-photo {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid rgba(184,134,63,.35); box-shadow: var(--shadow);
}

.cat-about { max-width: 62rem; margin: 0 auto 2.5rem; text-align: center; color: var(--cafe); }

/* Sello "GUARANTEED · 100% · AUTHENTIC": ahora superpuesto en la esquina
   inferior derecha de la foto principal (ver #seal-authentic en index.html),
   en vez de un bloque aparte debajo del párrafo. Tamaño reducido en móvil
   para que no domine la fotografía; nunca invade el párrafo de abajo porque
   está anclado dentro de .premium-photo-wrap (misma caja que la foto). */
.authenticity-seal {
  position: absolute; right: -10px; bottom: -10px; width: 130px; height: auto;
  object-fit: contain; filter: drop-shadow(0 6px 14px rgba(18,12,8,.35));
}
@media (max-width: 640px) {
  .authenticity-seal { width: 86px; right: -6px; bottom: -6px; }
}

/* Tabs de marca: mismo patrón horizontal-scroll ya usado antes, ahora con 20
   marcas (catálogo sincronizado con el menú oficial). Fila siempre alineada
   al inicio (nunca
   `justify-content: center`, que en un flex con overflow-x desplaza el punto
   de reposo hacia el centro del contenido y deja el primer tab inalcanzable
   con scrollLeft = 0) para que el primer y el último tab sean siempre
   alcanzables mediante scroll, en cualquier ancho de pantalla. */
.brand-tabs-wrap { position: relative; margin-bottom: 2rem; }
.brand-tabs-wrap::before, .brand-tabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none; }
.brand-tabs-wrap::before { left: 0; background: linear-gradient(90deg, var(--crema-2), transparent); }
.brand-tabs-wrap::after { right: 0; background: linear-gradient(-90deg, var(--crema-2), transparent); }
.brand-tabs { display: flex; gap: .65rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2.4rem; scrollbar-width: none; padding: .5rem 2.4rem; border-bottom: 1px solid rgba(184,134,63,.4); -webkit-overflow-scrolling: touch; }
.brand-tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; scroll-snap-align: start; position: relative; background: none; border: 0; padding: .4rem .3rem .85rem; font: 500 .72rem var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--cafe); cursor: pointer; transition: color .3s; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; min-height: 112px; width: 120px; }
.tab::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 2px; background: var(--bronce); transform: scaleX(0); transition: transform .35s var(--ease); }
/* Logo real dentro del tab (ver BRAND_LOGOS en script.js): marco propio con
   fondo claro semi-opaco para que SIEMPRE haya contraste, sin importar si el
   logo real es oscuro, dorado o él mismo claro/crema (el problema de "logo
   pálido sobre fondo claro"). object-fit:contain conserva proporción real,
   sin recortar ni deformar logos anchos, ovalados o con detalle fino. Las
   marcas sin logo (fallback futuro) conservan el tab de solo texto de antes. */
.tab-logo-frame {
  width: 100%; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(184,134,63,.3);
  padding: .3rem .45rem; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tab-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.tab-label { display: block; width: 100%; opacity: .8; transition: opacity .3s; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.22; min-height: 2.5em; }
.tab-label--sm { font-size: .64rem; }
.tab:hover { color: var(--bronce-d); }
.tab:hover .tab-logo-frame { background: rgba(255,255,255,.8); border-color: rgba(184,134,63,.55); }
.tab:hover .tab-label { opacity: 1; }
.tab[aria-selected="true"] { color: var(--tabaco); font-weight: 600; }
.tab[aria-selected="true"] .tab-logo-frame { background: #fff; border-color: var(--bronce); transform: scale(1.06); }
.tab[aria-selected="true"] .tab-label { opacity: 1; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
@media (min-width: 960px) {
  .tab { width: 140px; min-height: 120px; }
  .tab-logo-frame { height: 64px; }
  .brand-tabs-arrow { top: 40px; }
}
/* Flechas discretas (solo desktop/tablet ancho — en móvil el swipe basta).
   Separadas del borde (en vez de -6px) para que nunca se monten con la
   primera/última marca; el padding de .brand-tabs ya les deja espacio de
   sobra. Ocultas por completo cuando el contenido no desborda (.is-hidden) y
   deshabilitadas en cada extremo (ver updateTabsArrows en script.js). */
.brand-tabs-arrow {
  display: none; position: absolute; top: 36px; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
  border: 1.5px solid var(--bronce); background: var(--crema-2); color: var(--tabaco);
  font-size: .95rem; line-height: 1; cursor: pointer; transition: all .3s var(--ease);
}
.brand-tabs-arrow:hover { background: var(--bronce); color: var(--negro); }
.brand-tabs-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.brand-tabs-arrow.is-hidden { display: none !important; }
.brand-tabs-arrow--prev { left: 0; }
.brand-tabs-arrow--next { right: 0; }
@media (min-width: 768px) { .brand-tabs-arrow { display: flex; } }

/* Panel compacto de la marca activa: logo (placeholder hasta tener el oficial),
   descripción y lista de productos. Sin precios ni carrito — el documento de
   marca solo trae nombre + descripción + nombres de producto. */
.brand-panel { transition: opacity .18s ease, transform .18s ease; }
.brand-panel.is-swapping { opacity: 0; transform: translateY(8px); }
.brand-panel-card {
  display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem; border-radius: var(--radius);
  background: linear-gradient(170deg, var(--tabaco), var(--cafe)); color: var(--crema);
  border: 1px solid rgba(184,134,63,.35); box-shadow: var(--shadow); animation: panel-in .4s var(--ease) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
/* TODO: ADD OFFICIAL BRAND LOGO — hasta entonces, iniciales tipográficas */
.brand-logo {
  width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden;
  border: 1.5px dashed rgba(216,173,106,.6); background: rgba(18,12,8,.25);
  display: flex; align-items: center; justify-content: center;
  font: 700 1.1rem var(--font-serif); color: var(--bronce-l);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Logo real (ver BRAND_LOGOS en script.js): caja rectangular sin recorte,
   con espacio alrededor y colores originales intactos (sin filtros CSS),
   apta para logos horizontales o verticales, fondo/blanco/negro por igual. */
.brand-logo.brand-logo--img {
  width: auto; min-width: 96px; max-width: 150px; height: 76px; border-radius: 10px;
  border: 1px solid rgba(216,173,106,.45); background: var(--crema); padding: .55rem .8rem;
}
.brand-logo.brand-logo--img img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 420px) {
  .brand-logo.brand-logo--img { min-width: 84px; max-width: 130px; height: 64px; padding: .45rem .65rem; }
}
.brand-panel-body h3 { color: var(--crema); font-size: 1.5rem; margin-bottom: .5rem; }
.brand-panel-body p { color: rgba(243,233,214,.85); font-size: .92rem; }
.brand-products-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-l); margin: 1rem 0 .6rem; opacity: .85; }
.brand-products { display: flex; flex-wrap: wrap; gap: .5rem; }
.brand-products li { font-size: .74rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(216,173,106,.4); color: rgba(243,233,214,.92); }
/* Catálogo con fotos reales (Imagenes/Puros/): grid fluido de miniaturas
   compactas — se adapta al espacio disponible sin fijar un número de columnas
   por breakpoint, pero con ANCHO DE TARJETA CONTROLADO (auto-fill + minmax
   con tope fijo, sin `1fr`). `auto-fit` colapsa las columnas vacías y reparte
   ese espacio libre entre las tarjetas sobrevivientes (con `1fr`), por lo que
   una marca con 1-2 productos las estiraba a casi todo el ancho del panel;
   `auto-fill` conserva esas columnas vacías (el grid no las colapsa), así que
   las tarjetas existentes mantienen su tamaño de miniatura sin importar
   cuántos productos tenga la marca, y el resto de la fila queda vacío a la
   derecha en vez de estirarse. Imagen sin recortar (object-fit: contain) y
   nombre que puede ocupar varias líneas. Cada tarjeta es un <button> real
   (abre la ficha premium del puro, ver script.js) con affordance de clic/tap. */
.brand-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(108px, 100%), 128px)); gap: .9rem; width: 100%; }
.brand-photo-card {
  display: flex; flex-direction: column; gap: .5rem; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
}
.brand-photo-card:hover .brand-photo-frame, .brand-photo-card:focus-visible .brand-photo-frame { border-color: var(--bronce-l); transform: translateY(-2px); }
.brand-photo-card:focus-visible { outline: 2px solid var(--bronce-l); outline-offset: 3px; border-radius: calc(var(--radius) - 4px); }
.brand-photo-frame {
  aspect-ratio: 1 / 1; border-radius: calc(var(--radius) - 4px); padding: .6rem;
  border: 1px solid rgba(216,173,106,.4); background: rgba(18,12,8,.25);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.brand-photo-frame img { width: 100%; height: 100%; object-fit: contain; }
.brand-photo-caption { font-size: .74rem; text-align: center; line-height: 1.3; color: rgba(243,233,214,.92); overflow-wrap: anywhere; }
.brand-photo-card.is-pending .brand-photo-frame { border-style: dashed; }
.brand-photo-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; width: 100%; height: 100%; color: rgba(216,173,106,.55); }
.brand-photo-pending svg { width: 34%; height: 34%; flex-shrink: 0; }
.brand-photo-pending em { font-style: normal; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.2; opacity: .85; }
.brand-photo-card.is-pending .brand-photo-caption { color: rgba(243,233,214,.62); }
@media (min-width: 640px) {
  .brand-panel-card { flex-direction: row; align-items: flex-start; padding: 2rem; }
  .brand-panel-body { flex: 1 1 auto; min-width: 0; }
  .brand-photo-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 146px)); gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .brand-photo-frame { transition: none; } }

.catalog-note { margin: 1.6rem 0 0; text-align: center; font-size: .72rem; letter-spacing: .06em; color: var(--cafe); opacity: .65; }

/* Cinta continua de About Us (Imagenes/Tienda/, Imagenes/Accesorios/): una
   sola secuencia sin álbumes ni divisores entre fotos, en movimiento
   automático (JS: scrollLeft + rAF, ver script.js). A propósito full-bleed
   (fuera de .container, ver index.html) para que las tarjetas se sientan
   "de borde a borde"; un desvanecido sutil en los extremos refuerza la
   sensación de cinta infinita. Sin scroll-snap: pelearía con el scroll
   continuo controlado por JS. Un clic en una foto abre el lightbox
   (#aboutLightbox), que ahora recorre la secuencia completa. */
.about-ribbon-wrap { position: relative; padding: 2.2rem 0 .4rem; }
.ribbon-heading { text-align: center; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronce-d); font-weight: 600; margin: 0 0 1.2rem; }
.about-ribbon-wrap::before, .about-ribbon-wrap::after { content: ""; position: absolute; top: 2.2rem; bottom: .4rem; width: 60px; z-index: 1; pointer-events: none; }
.about-ribbon-wrap::before { left: 0; background: linear-gradient(90deg, var(--crema), transparent); }
.about-ribbon-wrap::after { right: 0; background: linear-gradient(-90deg, var(--crema), transparent); }
.about-ribbon {
  display: flex; align-items: stretch; gap: .8rem; overflow-x: auto; scroll-behavior: auto;
  scrollbar-width: none; padding: 0 1.2rem; -webkit-overflow-scrolling: touch;
}
.about-ribbon::-webkit-scrollbar { display: none; }
/* Aplicado solo mientras el autoplay corre de verdad (ver startRibbonMarquee en
   script.js): le indica al navegador que el scroll cambiará seguido para que
   lo optimice en su propia capa, sin dejar el hint permanentemente activo. */
.about-ribbon.is-animating { will-change: scroll-position; }
.ribbon-item {
  flex: 0 0 auto; width: min(76vw, 300px); aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 4px); overflow: hidden; padding: 0; cursor: pointer;
  border: 1px solid rgba(184,134,63,.4); background: rgba(18,12,8,.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ribbon-item:hover, .ribbon-item:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--bronce-l); }
.ribbon-item:focus-visible { outline: 2px solid var(--bronce-l); outline-offset: 2px; }
.ribbon-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px) { .ribbon-item { width: 210px; } }
@media (min-width: 960px) { .ribbon-item { width: 240px; } .about-ribbon { gap: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .ribbon-item { transition: none; } }

/* Modal de galería de About Us: overlay propio, independiente de la ficha de
   puros (#productModal / .pm-*) — mismo patrón técnico (overlay + close +
   nav + ESC + swipe), estado y DOM completamente separados. Header (título +
   X) queda fuera del área con scroll interno, así el botón X siempre es
   visible aunque la foto + miniaturas no quepan completas en pantallas bajas. */
.ab-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(18,12,8,.92); opacity: 0; transition: opacity .28s var(--ease);
}
.ab-overlay.is-visible { opacity: 1; }
.ab-overlay[hidden] { display: none; }
.ab-card {
  position: relative; width: min(calc(100% - 24px), 720px); max-height: 90vh; max-height: 90dvh;
  display: flex; flex-direction: column; background: linear-gradient(170deg, var(--tabaco), var(--cafe));
  border: 1px solid rgba(184,134,63,.35); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.ab-overlay.is-visible .ab-card { transform: translateY(0) scale(1); opacity: 1; }
.ab-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .6rem; flex: none; }
.ab-title { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bronce-l); }
.ab-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--bronce); background: var(--crema); color: var(--tabaco); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease);
}
.ab-close:hover { background: var(--bronce); color: var(--negro); }
.ab-body { overflow-y: auto; display: flex; flex-direction: column; gap: .9rem; padding: 0 1rem 1rem; }
.ab-media { position: relative; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.ab-media img {
  max-width: 100%; max-height: 50vh; max-height: 50dvh; width: auto; height: auto; object-fit: contain;
  border-radius: calc(var(--radius) - 4px); background: rgba(0,0,0,.15);
}
.ab-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex: none; }
.ab-nav {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--bronce); background: rgba(243,233,214,.92); color: var(--tabaco); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease);
}
.ab-nav:hover { background: var(--bronce); color: var(--negro); }
.ab-nav.is-hidden { visibility: hidden; }
.ab-counter { margin: 0; min-width: 3.6rem; text-align: center; font-size: .82rem; color: var(--crema); opacity: .85; }
.ab-counter.is-hidden { display: none; }
.ab-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem; scrollbar-width: none; flex: none; }
.ab-thumbs::-webkit-scrollbar { display: none; }
.ab-thumbs.is-hidden { display: none; }
.ab-thumb {
  flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; padding: 0;
  border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s;
}
.ab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-thumb:hover { opacity: .9; }
.ab-thumb.is-active { opacity: 1; border-color: var(--bronce-l); }
@media (prefers-reduced-motion: reduce) { .ab-overlay, .ab-card { transition: none; } }

/* Bloqueo de scroll de fondo mientras cualquiera de las dos ficha/lightbox
   está abierta (ambas clases ya las alterna script.js). */
body.pm-open, body.ab-open { overflow: hidden; }
body.ab-open .whatsapp-fab { display: none; }
/* Ver IntersectionObserver del mapa de Walk-in Humidor en script.js: evita
   que el FAB tape los controles de zoom de Google Maps. */
body.map-in-view .whatsapp-fab { display: none; }

@media (prefers-reduced-motion: reduce) { .brand-panel-card { animation: none; } .brand-panel { transition: none; } }

/* ==========================================================
   WhatsApp — botón flotante, footer y opción en el formulario
   ========================================================== */
.whatsapp-fab {
  position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 120;
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: #25d366; color: #fff; filter: drop-shadow(0 6px 14px rgba(18,12,8,.35));
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.whatsapp-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.whatsapp-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366;
  opacity: .55; animation: wa-pulse 2.4s ease-out infinite;
}
.whatsapp-fab:hover { transform: scale(1.1); filter: drop-shadow(0 10px 18px rgba(18,12,8,.42)); }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 960px) { .whatsapp-fab { bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-fab::before { animation: none; display: none; } }
/* Oculto mientras la ficha premium de producto está abierta: en móvil el FAB
   podría quedar encima de los botones Previous/Next o del cierre del modal. */
body.pm-open .whatsapp-fab { display: none; }

.social-wa svg { width: 18px; height: 18px; }
.foot-wa { display: inline-flex; align-items: center; gap: .5rem; }
.foot-wa-icon { width: 16px; height: 16px; flex: none; color: currentColor; }

.form-divider { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: rgba(184,134,63,.35); }
.form-divider span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cafe); opacity: .7; }

.btn-whatsapp { background: #25d366; color: #fff; box-shadow: 0 6px 16px rgba(37,211,102,.35); }
.btn-whatsapp:hover { background: #1fb959; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.45); }
.btn-whatsapp svg { width: 18px; height: 18px; }

/* ==========================================================
   Ficha premium de producto (Premium Cigars-Habanos): modal
   reutilizable con foto real, specs con iconos y zoom interactivo.
   Un único modal en el DOM (ver #productModal en index.html); su
   contenido se reescribe por producto en script.js.
   ========================================================== */
.pm-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(18,12,8,.72);
  opacity: 0; transition: opacity .28s var(--ease);
}
.pm-overlay.is-visible { opacity: 1; }
.pm-overlay[hidden] { display: none; }
.pm-card {
  position: relative; width: min(100%, 960px);
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overflow-x: hidden;
  background: var(--crema); border-radius: var(--radius); border: 1px solid rgba(184,134,63,.35);
  box-shadow: var(--shadow-lg); padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem;
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.pm-overlay.is-visible .pm-card { transform: translateY(0) scale(1); opacity: 1; }

.pm-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--bronce); background: var(--crema); color: var(--tabaco); font-size: 1.3rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease);
}
.pm-close:hover { background: var(--bronce); color: var(--negro); }
.pm-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--bronce); background: rgba(243,233,214,.92); color: var(--tabaco); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s var(--ease);
}
.pm-nav:hover { background: var(--bronce); color: var(--negro); }
.pm-nav.is-hidden { display: none; }
.pm-nav--prev { left: .6rem; }
.pm-nav--next { right: .6rem; }

.pm-brand { display: flex; align-items: center; gap: .7rem; padding-right: 2.2rem; }
.pm-logo {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(184,134,63,.6); background: rgba(184,134,63,.08);
  font: 700 .85rem var(--font-serif); color: var(--bronce-d); overflow: hidden;
}
.pm-logo.pm-logo--img { border-style: solid; background: #fff; }
.pm-logo img { width: 100%; height: 100%; object-fit: contain; }
.pm-brand span { font: 600 .78rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bronce-d); }

#pmName { color: var(--tabaco); font-size: clamp(1.35rem, 4vw, 1.9rem); margin: 0; }

.pm-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 4px); overflow: hidden;
  background: rgba(18,12,8,.06); border: 1px solid rgba(184,134,63,.3);
  flex-shrink: 0; /* .pm-card es flex column: overflow:hidden anula el alto mínimo
    automático (queda en 0), así que sin flex-shrink:0 el flex-shrink por defecto
    aplastaba esta caja en vez de respetar aspect-ratio cuando el contenido total
    superaba max-height. */
}
.pm-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; transform-origin: center center; will-change: transform; }
.pm-media.is-zoomed img { transition: transform .05s linear; }
@media (hover: hover) and (pointer: fine) {
  .pm-media { cursor: zoom-in; }
  .pm-media.is-zoomed { cursor: zoom-out; }
  .pm-media.pm-media--pending { cursor: default; }
}
.pm-media-pending {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; color: var(--bronce-d); background: rgba(18,12,8,.04);
}
.pm-media-pending[hidden] { display: none; }
.pm-media-pending svg { width: 48px; height: 48px; opacity: .55; }
.pm-media-pending span { font: 600 .74rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
/* El icono de lupa solo tiene sentido donde existe el zoom personalizado
   (mouse real): oculto por defecto, visible únicamente con hover:hover +
   pointer:fine — así un iPad/tablet táctil (que puede compartir resolución
   con una laptop) nunca lo muestra, ya que ahí no hay zoom que anunciar. */
.pm-zoom-hint {
  display: none; position: absolute; right: .6rem; bottom: .6rem; width: 30px; height: 30px; border-radius: 50%;
  align-items: center; justify-content: center; color: var(--bronce-d);
  background: rgba(243,233,214,.85); border: 1px solid rgba(184,134,63,.5); opacity: .6;
  transition: opacity .25s var(--ease); pointer-events: none;
}
.pm-zoom-hint svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .pm-zoom-hint { display: flex; }
  .pm-media:hover .pm-zoom-hint { opacity: 1; }
}

.pm-desc { color: var(--cafe); font-size: .94rem; margin: 0; }

.pm-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem 1.2rem; margin-top: .2rem; }
.pm-spec { display: flex; align-items: flex-start; gap: .55rem; }
.pm-spec-icon { width: 22px; height: 22px; flex: none; color: var(--bronce); margin-top: 1px; }
.pm-spec-icon svg { width: 100%; height: 100%; }
.pm-spec-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pm-spec-label { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronce-d); opacity: .85; }
.pm-spec-value { font-size: .88rem; color: var(--cafe); word-break: break-word; }
.pm-strength-bars { display: inline-flex; gap: 3px; margin-left: .5rem; vertical-align: middle; }
.pm-strength-bars i { width: 8px; height: 12px; border-radius: 1px; background: rgba(184,134,63,.25); font-style: normal; display: inline-block; }
.pm-strength-bars i.is-filled { background: var(--bronce); }

@media (min-width: 780px) {
  .pm-card {
    display: grid; grid-template-columns: minmax(260px, 42%) 1fr; column-gap: 2rem; row-gap: .7rem; padding: 2rem;
    grid-template-areas: "media brand" "media name" "media desc" "media specs";
  }
  /* aspect-ratio se anula aquí: con align-self:stretch dentro de un grid, el
     motor calculaba el ancho a partir del alto estirado (columna+fila) en vez
     de respetar el ancho real de la columna, desbordando sobre el texto. */
  .pm-media { grid-area: media; align-self: stretch; aspect-ratio: auto; }
  .pm-brand { grid-area: brand; padding-right: 0; }
  #pmName { grid-area: name; }
  .pm-desc { grid-area: desc; }
  .pm-specs { grid-area: specs; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-overlay, .pm-card, .pm-media img { transition: none; }
}