:root{
  color-scheme: light;
  --paper:#FAF6EE;
  --paper-deep:#F1EEE5;
  --ink:#211F1B;
  --muted:#726C60;
  --sage:#7C8271;
  --sage-deep:#4B5040;
  --sage-pale:#DDE0D2;
  --line:#D8D2C0;
  --clay:#A5583F;
  --shadow: 0 1px 2px rgba(33,31,27,.06), 0 20px 44px rgba(33,31,27,.10);
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
.display{font-family:"Playfair Display",Georgia,serif}
::selection{background:var(--sage-pale);color:var(--sage-deep)}

a{color:inherit}
.wrap{width:min(1080px,100%);margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(250,246,238,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(33,31,27,.02)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none}
.wordmark .mark{width:30px;height:30px;flex:none}
.wordmark .name{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--sage-deep)}
.wordmark .name em{font-style:italic;font-weight:400;color:var(--muted)}
.nav-tabs{display:flex;align-items:center;gap:6px;background:var(--paper-deep);border:1px solid var(--line);border-radius:999px;padding:4px}
.nav-tab{
  font-family:Poppins;font-size:.82rem;font-weight:600;color:var(--muted);
  text-decoration:none;padding:8px 16px;border-radius:999px;transition:color .15s ease, background .15s ease;
}
.nav-tab:hover{color:var(--sage-deep)}
.nav-tab.active{background:var(--sage-deep);color:var(--paper)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;padding:13px 24px;
  font-family:Poppins;font-weight:600;font-size:.86rem;letter-spacing:.01em;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.btn-primary{background:var(--sage-deep);color:var(--paper);box-shadow:0 10px 24px rgba(75,80,64,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(75,80,64,.34)}
.btn-ghost{background:transparent;border-color:var(--sage-deep);color:var(--sage-deep)}
.btn-ghost:hover{background:var(--sage-pale)}
.btn-sm{padding:10px 18px;font-size:.8rem}

/* ---------- hero ---------- */
.hero{padding:76px 0 64px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--sage-deep);margin:0 0 18px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--sage-deep)}
h1.headline{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:clamp(2.4rem,5.4vw,3.7rem);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 22px;text-wrap:balance;color:var(--ink);
}
h1.headline .accent{font-style:italic;color:var(--sage-deep)}
.lede{font-size:1.06rem;line-height:1.7;color:var(--muted);max-width:46ch;margin:0 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:40px}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
.hero-meta strong{display:block;color:var(--ink);font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;font-weight:600}

.bottles{display:flex;justify-content:center;gap:18px;padding-top:8px}
.bottle-unit{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(14px);animation:rise .7s ease forwards}
.bottle{width:46px;height:70px;border-radius:7px 7px 16px 16px;position:relative;box-shadow:inset 0 -10px 16px rgba(0,0,0,.10), inset 0 3px 3px rgba(255,255,255,.35), 0 10px 20px rgba(33,31,27,.14)}
.bottle::before{content:"";position:absolute;left:50%;top:-11px;transform:translateX(-50%);width:18px;height:15px;background:var(--ink);border-radius:3px 3px 1px 1px}
.bottle::after{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:10px;height:6px;background:var(--ink);border-radius:2px 2px 0 0;opacity:.85}
.bottle-name{font-size:.66rem;letter-spacing:.03em;color:var(--muted);text-align:center}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ---------- section shell ---------- */
section{padding:76px 0}
.section-head{max-width:56ch;margin:0 0 44px}
.section-head h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.35rem);margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance;
}
.section-head p{color:var(--muted);line-height:1.7;margin:0;font-size:.98rem}

/* ---------- páginas (nav superior en vez de scroll largo) ---------- */
/* .page anula el padding genérico de <section> -- cada página maneja su propio ritmo
   vertical (Inicio: .hero/.band/.final ya traen el suyo; las demás usan .page-inner). */
.page{padding:0;display:none}
.page.active{display:block}
.page-inner{padding-block:76px}

.band{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:76px 0}

/* ---------- sobre el estudio ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about p{font-size:1.02rem;line-height:1.85;color:var(--ink);margin:0 0 20px}
.pull{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.5rem;line-height:1.42;color:var(--sage-deep);
  border-left:2px solid var(--sage-pale);padding-left:22px;margin:0;text-wrap:balance;
}
.about-caption{margin-top:20px;font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:baseline}

/* ---------- servicios: menu, not cards ---------- */
.menu{border-top:1px solid var(--line)}
.menu-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.menu-index{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--sage);font-size:.95rem}
.menu-body h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:1.18rem;margin:0 0 6px;letter-spacing:-.005em}
.menu-body p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:52ch}
.menu-note{font-size:.78rem;color:var(--sage-deep);white-space:nowrap;text-align:right;align-self:start;padding-top:4px}

/* ---------- galería / swatch board ---------- */
.swatch-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:36px;max-width:64ch;
}
.swatch-note svg{flex:none;margin-top:2px}
.swatch-note p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.6}
.swatch-note strong{color:var(--ink)}

.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:22px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.chip{width:100%;aspect-ratio:1/1.08;border-radius:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.chip::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.28),transparent 42%)}
.chip-name{font-size:.78rem;font-weight:600;color:var(--ink)}
.chip-tag{font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.chip.frame{
  background:transparent;box-shadow:none;border:1.5px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.chip.frame svg{opacity:.6}

/* ---------- ubicación ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-h2{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:1.9rem;margin:0 0 28px;letter-spacing:-.01em}
.contact-list{display:flex;flex-direction:column;gap:26px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-item svg{flex:none;margin-top:3px;color:var(--sage-deep)}
.contact-item h4{margin:0 0 4px;font-size:.95rem;font-weight:600}
.contact-item p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.contact-item a{text-decoration:none;color:var(--sage-deep);font-weight:600}
.placeholder-tag{
  display:inline-block;margin-left:8px;font-size:.66rem;font-weight:600;letter-spacing:.04em;
  color:var(--clay);border:1px solid currentColor;border-radius:5px;padding:1px 6px;vertical-align:middle;
}
.map-plate{
  border-radius:20px;background:var(--sage-pale);border:1px solid var(--line);
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--sage-deep);text-align:center;padding:32px;
}
.map-plate .display{font-size:1.2rem;font-weight:600}
.map-plate p{margin:0;color:var(--sage-deep);opacity:.8;font-size:.84rem;max-width:32ch}

/* ---------- cta final ---------- */
.final{text-align:center}
.final h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;font-style:italic;
  font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 18px;text-wrap:balance;
}
.final p{color:var(--muted);max-width:48ch;margin:0 auto 32px;line-height:1.7}

footer{padding:40px 0 48px;border-top:1px solid var(--line)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-bottom{margin-top:18px}
.foot-social{display:flex;gap:18px}
.foot-social a{color:var(--muted);text-decoration:none;font-size:.84rem;display:flex;align-items:center;gap:7px}
.foot-social a:hover{color:var(--sage-deep)}
.foot-credit{font-size:.76rem;color:var(--muted)}

/* ---------- modal de reserva (iframe embebido) ---------- */
#reservar-dialog{
  padding:0;border:none;border-radius:20px;overflow:hidden;
  width:min(480px,calc(100% - 32px));height:min(720px,calc(100% - 64px));
  box-shadow:0 30px 70px rgba(33,31,27,.35);background:var(--paper);color:var(--ink);
}
#reservar-dialog::backdrop{background:rgba(33,31,27,.5);backdrop-filter:blur(2px)}
#reservar-dialog .dialog-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--paper);
}
#reservar-dialog .dialog-title{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--sage-deep)}
#reservar-dialog .dialog-close{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);cursor:pointer;padding:0;
}
#reservar-dialog .dialog-close:hover{color:var(--sage-deep);border-color:var(--sage-deep)}
#reservar-frame{width:100%;height:calc(100% - 57px);border:0;background:var(--paper-deep)}

/* ---------- botón flotante de WhatsApp ---------- */
/* Verde real de WhatsApp a propósito, no la paleta salvia del resto del sitio -- es un
   widget de reconocimiento instantáneo (como un ícono de impresora), no una decisión de
   marca. Fijo y visible en las 4 páginas (vive fuera de .page, nunca se oculta al cambiar
   de pestaña). Conecta al WhatsApp con chatbot del estudio (809-346-3030), no al número
   personal que aparece en Ubicación. */
.whatsapp-fab{
  position:fixed;right:20px;bottom:20px;z-index:50;
  display:flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:999px;padding:14px 20px 14px 14px;
  box-shadow:0 10px 26px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.whatsapp-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.48), 0 2px 6px rgba(0,0,0,.14)}
.whatsapp-fab:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.whatsapp-fab svg{flex:none}
.whatsapp-fab span{font-family:Poppins;font-weight:600;font-size:.86rem;white-space:nowrap}

@media (max-width:640px){
  .whatsapp-fab{padding:14px;right:16px;bottom:16px}
  .whatsapp-fab span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
  }
}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .bottles{padding-top:0}
  .about,.contact{grid-template-columns:1fr;gap:36px}
  .nav-row{flex-wrap:wrap;gap:12px}
  .nav-tabs{order:3;width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{flex:none}
  .menu-row{grid-template-columns:auto 1fr;row-gap:6px}
  .menu-note{grid-column:2;text-align:left}
  #reservar-dialog{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}
}
@media (prefers-reduced-motion: reduce){
  .bottle-unit{animation:none;opacity:1;transform:none}
}