/* ==========================================================================
   napoli — sistema visual compartido
   estandarización de interlineados, espacios y colores sobre imagen
   ========================================================================== */

:root{
  /* ---- paleta según manual de marca 2026 ----
     hex confirmados: arena, barranco, palta
     placeholders temporales (esperando hex finales del cliente):
     terracota, sol aguaymanto, chirimoya */
  --arena:#E8DDC9;              /* 60% — fondo principal */
  --arena-luz:#F0E6D5;           /* arena con luminosidad subida (evita blanco puro) */
  --barranco:#C8B396;            /* 20% — bordes, separadores, fondos secundarios */
  --palta:#5D7A5E;               /* 10% — titulares, logo */
  --palta-dark:#4a6549;          /* palta oscuro para contraste */
  --palta-90:rgba(93,122,94,.90);
  --palta-60:rgba(93,122,94,.60);
  --terra:#C77461;               /* 6% — terracota (acento, CTAs) — hex inferido del manual visual */
  --terra-dark:#a85c4e;
  --sol:#E5A030;                 /* 4% — sol aguaymanto (detalle ritual) — hex inferido del manual visual */
  --chirimoya:#1F2A24;           /* texto largo, reemplazo suave del negro — hex inferido del manual visual */
  --hairline:rgba(59,42,36,.14);
  --hairline-light:rgba(232,221,201,.20);
  --whatsapp:#1f8a4c;

  /* aliases de compatibilidad con clases existentes que usan nombres viejos */
  --jardin:var(--palta);
  --verde:var(--palta);
  --verde-90:var(--palta-90);
  --verde-60:var(--palta-60);
  --verde-30:rgba(93,122,94,.30);
  --crema:var(--arena);
  --blanco:var(--arena-luz);
  --cacao:var(--chirimoya);

  /* ---- espaciado ---- */
  --pad-x: clamp(20px, 5vw, 80px);
  --section-y: clamp(48px, 6vw, 96px);
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 80px;

  /* ---- tipografía ----
     display: Bitter como placeholder hasta comprar American Typewriter ITC Pro
     cuerpo: Raleway (manual de marca) */
  --display: 'Bitter', Georgia, serif;
  --sans: 'Raleway', system-ui, -apple-system, sans-serif;

  /* line-heights estandarizados */
  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.65;
  --lh-ui: 1.4;

  /* ---- layout ---- */
  --maxw: 1280px;
  --radius: 4px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-blob-1: 36px 36px 36px 6px;
  --radius-blob-2: 6px 36px 36px 36px;
  --radius-blob-3: 36px 6px 36px 36px;
  --radius-blob-4: 36px 36px 6px 36px;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 60px -30px rgba(38,57,43,.25);
  --shadow-card: 0 30px 80px -40px rgba(38,57,43,.4);

  /* ---- transitions ---- */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .35s;
}

/* ==========================================================================
   reset
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--blanco);
  color:var(--cacao);
  font-size:16px;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-weight:400; }

/* ==========================================================================
   tipografía compartida
   ========================================================================== */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--jardin);
  line-height:var(--lh-ui);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow-light{ color:var(--sol); }
.eyebrow-cream{ color:var(--crema); }

.h-display{
  font-family:var(--display);
  font-weight:400;
  line-height:var(--lh-tight);
  color:var(--verde);
  font-variation-settings:"opsz" 144;
  letter-spacing:-.005em;
}
.h-section{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px, 5vw, 48px);
  line-height:var(--lh-heading);
  color:var(--verde);
  font-variation-settings:"opsz" 72;
  letter-spacing:-.005em;
}
.h-section em{
  font-style:italic;
  color:var(--terra);
}
.lead{
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:var(--lh-body);
  color:var(--cacao);
  max-width:60ch;
}
.lead + .lead{ margin-top:var(--gap-sm); }
.tag{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cacao);
  opacity:.7;
  line-height:var(--lh-ui);
}
.note{
  font-size:13px;
  color:var(--cacao);
  opacity:.6;
  line-height:var(--lh-body);
  font-style:italic;
}

/* ==========================================================================
   botones
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1;
  min-height:48px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;
  border:1px solid transparent;
}
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:14px; height:14px; }

.btn-primary{ background:var(--palta); color:var(--arena); }
.btn-primary:hover{ background:var(--palta-dark); }

/* nav CTA invertido según estado
   hero-state (transparente): fondo claro para verse sobre foto
   scrolled (fondo arena): palta con texto claro */
.nav.hero-state .nav-cta{ background:var(--arena); color:var(--palta); border-color:var(--arena); }
.nav.hero-state .nav-cta:hover{ background:var(--arena-luz); }
.nav.hero-state.scrolled .nav-cta{ background:var(--palta); color:var(--arena); border-color:var(--palta); }
.nav.hero-state.scrolled .nav-cta:hover{ background:var(--palta-dark); }

.btn-secondary{ background:transparent; color:var(--verde); border-color:var(--verde); }
.btn-secondary:hover{ background:var(--verde); color:var(--blanco); }

.btn-terra{ background:var(--terra); color:var(--blanco); }
.btn-terra:hover{ background:var(--terra-dark); }

.btn-white{ background:var(--blanco); color:var(--verde); }
.btn-white:hover{ background:var(--crema); color:var(--cacao); }

.btn-ghost-light{ background:transparent; color:var(--blanco); border-color:rgba(255,249,241,.55); }
.btn-ghost-light:hover{ background:var(--blanco); color:var(--verde); border-color:var(--blanco); }

.btn-sm{ padding:10px 18px; min-height:42px; font-size:13.5px; }

.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  color:var(--jardin);
  border-bottom:1px solid var(--jardin);
  padding-bottom:2px;
  transition:color .2s, border-color .2s, gap .2s;
}
.link:hover{ color:var(--terra); border-color:var(--terra); gap:12px; }

/* ==========================================================================
   nav
   ========================================================================== */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled{
  background:rgba(232,221,201,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-top:12px;
  padding-bottom:12px;
  box-shadow:0 1px 0 var(--hairline);
}
.nav-mark{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.nav-mark img{
  height:38px;
  width:auto;
  display:block;
  transition:opacity .3s var(--ease);
}
.nav-mark .logo-crema{ display:none; }
.nav.hero-state .nav-mark .logo-verde{ display:none; }
.nav.hero-state .nav-mark .logo-crema{ display:block; filter:drop-shadow(0 2px 12px rgba(38,42,36,.35)); }
.nav.hero-state.scrolled .nav-mark .logo-verde{ display:block; filter:none; }
.nav.hero-state.scrolled .nav-mark .logo-crema{ display:none; }
.nav-links{
  display:none;
  align-items:center;
  gap:28px;
}
.nav-links a{
  font-size:14px;
  font-weight:400;
  color:var(--verde);
  transition:color .2s;
  position:relative;
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:1px;
  background:var(--terra);
}
.nav.hero-state .nav-links a{ color:var(--blanco); text-shadow:0 2px 12px rgba(38,57,43,.4); }
.nav.hero-state.scrolled .nav-links a{ color:var(--verde); text-shadow:none; }
.nav-links a:hover{ color:var(--terra); }
.nav-cta{ display:none; }
.nav-burger{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px;
  margin-right:-10px;
}
.nav-burger span{
  display:block;
  width:22px;
  height:1.5px;
  background:var(--verde);
  transition:background .3s;
}
.nav.hero-state .nav-burger span{ background:var(--blanco); }
.nav.hero-state.scrolled .nav-burger span{ background:var(--verde); }

@media(min-width:900px){
  .nav-burger{ display:none; }
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
}

/* mobile menu overlay */
.menu{
  position:fixed;
  inset:0;
  background:var(--blanco);
  z-index:60;
  transform:translateY(-100%);
  transition:transform .4s var(--ease);
  display:flex;
  flex-direction:column;
  padding:24px var(--pad-x) 40px;
}
.menu.open{ transform:translateY(0); }
.menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:40px;
}
.menu-close{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:var(--verde);
}
.menu-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.menu-list a{
  display:block;
  font-family:var(--display);
  font-size:clamp(22px, 5.5vw, 28px);
  font-weight:400;
  color:var(--verde);
  padding:6px 0;
  line-height:var(--lh-heading);
}
.menu-list a.active{ color:var(--terra); font-style:italic; }
.menu-foot{
  margin-top:auto;
  padding-top:40px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ==========================================================================
   secciones base
   ========================================================================== */
.section{
  padding:var(--section-y) var(--pad-x);
}
/* variante con padding-top reducido en mobile (para secciones que siguen inmediatamente a otro bloque compacto) */
.section-tight-top{ padding-top:24px; }
@media(min-width:900px){ .section-tight-top{ padding-top:var(--section-y); } }
.section-cream{ background:var(--crema); }
.section-verde{ background:var(--verde); color:var(--blanco); }
.section-verde .h-section{ color:var(--crema); }
.section-verde .lead{ color:var(--blanco); opacity:.85; }
.section-verde .eyebrow{ color:var(--sol); }

.section-inner{
  max-width:var(--maxw);
  margin:0 auto;
}

/* head estandarizado (2 columnas asimétricas) */
.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:var(--gap-lg);
}
.section-head-title{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media(min-width:900px){
  .section-head{
    grid-template-columns:5fr 5fr;
    gap:80px;
    align-items:end;
    margin-bottom:var(--gap-xl);
  }
  .section-head-title{ gap:14px; }
}

/* ==========================================================================
   HERO estandarizado
   ========================================================================== */
.hero{
  position:relative;
  min-height:78svh;
  min-height:78vh;
  max-height:820px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--blanco);
  overflow:hidden;
  padding:100px var(--pad-x) 60px;
}
@media(min-width:900px){
  .hero{
    min-height:100svh;
    min-height:100vh;
    max-height:none;
    padding:120px var(--pad-x) 90px;
  }
}
.hero-img{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.88) saturate(1.02);
}
/* overlay estandarizado sobre TODA imagen con texto encima
   contraste asegurado tanto en imágenes claras (fachada turquesa, sombrilla)
   como en oscuras (jardín nocturno); doble gradient vertical + viñeta radial */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at center 40%, transparent 0%, rgba(38,57,43,.15) 60%, rgba(38,57,43,.25) 100%),
    linear-gradient(180deg, rgba(38,57,43,.55) 0%, rgba(38,57,43,.28) 22%, rgba(38,57,43,.40) 55%, rgba(38,57,43,.85) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
  text-shadow:0 2px 24px rgba(38,57,43,.35);
}
.hero-inner .btn{ text-shadow:none; }
.hero-eyebrow{
  color:var(--blanco);
  opacity:.92;
}
.hero-eyebrow .dot{
  width:6px; height:6px;
  background:var(--sol);
  border-radius:50%;
  display:inline-block;
}
.hero-wordmark{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(86px, 22vw, 280px);
  line-height:.85;
  letter-spacing:-.025em;
  color:var(--arena);
  display:block;
  margin:8px 0 4px;
}
/* logo grande del hero — reemplaza al wordmark tipográfico */
.hero-logo{
  display:block;
  width:min(300px, 55vw);
  height:auto;
  margin:12px 0 8px;
  filter:drop-shadow(0 4px 24px rgba(38,42,36,.35));
}
.hero-h1{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px, 3.5vw, 36px);
  line-height:var(--lh-heading);
  color:var(--blanco);
  max-width:18ch;
  font-variation-settings:"opsz" 72;
}
/* hero secundario (nosotros/carta/mesa) — wordmark NO gigante */
.hero-secondary{
  min-height:58svh;
  min-height:58vh;
  max-height:640px;
  padding:110px var(--pad-x) 56px;
}
@media(min-width:900px){
  .hero-secondary{
    min-height:70svh;
    min-height:70vh;
    max-height:none;
    padding:140px var(--pad-x) 80px;
  }
}
.hero-secondary .hero-h1{
  font-family:var(--display);
  font-style:normal;
  font-weight:400;
  font-size:clamp(38px, 6.5vw, 76px);
  line-height:var(--lh-tight);
  letter-spacing:-.01em;
  max-width:18ch;
  font-variation-settings:"opsz" 144;
}
.hero-secondary .hero-h1 em{
  font-style:italic;
  color:var(--sol);
}
.hero-sub{
  font-size:clamp(15px, 1.4vw, 17px);
  line-height:var(--lh-body);
  color:var(--blanco);
  opacity:.92;
  max-width:48ch;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}
.hero-stamp{
  position:absolute;
  top:96px;
  right:var(--pad-x);
  z-index:2;
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  color:var(--blanco);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}
.hero-stamp .line{ width:36px; height:1px; background:var(--blanco); opacity:.6; }
@media(min-width:900px){ .hero-stamp{ display:flex; } }

/* fade-up entrance */
.fade-up{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.fade-up.shown{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   editorial 2-col (imagen + texto)
   ========================================================================== */
.editorial{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
  align-items:center;
}
@media(min-width:700px){
  .editorial{ gap:var(--gap-lg); }
}
.editorial-body{
  display:flex;
  flex-direction:column;
  gap:var(--gap-md);
}
.editorial-body p{ max-width:52ch; }
.editorial-img{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius-blob-1);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.editorial-reverse .editorial-img{ border-radius:var(--radius-blob-2); }
.editorial-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.editorial-img:hover img{ transform:scale(1.03); }
.editorial-img .corner-mark{
  position:absolute;
  bottom:18px; right:20px;
  color:var(--blanco);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  text-shadow:0 1px 12px rgba(38,57,43,.7), 0 0 3px rgba(38,57,43,.5);
}
.editorial-img .corner-mark::after{
  content:"";
  width:18px;
  height:1px;
  background:var(--blanco);
  display:block;
  opacity:.85;
}
/* mobile: en editorial-reverse mostrar texto primero (body arriba, imagen abajo) */
@media(max-width:899px){
  .editorial-reverse .editorial-body{ order:-1; }
}
@media(min-width:900px){
  .editorial{
    grid-template-columns:5fr 6fr;
    gap:80px;
  }
  .editorial-reverse .editorial-img{ order:-1; }
  .editorial-reverse .editorial-body{ order:initial; }
}

/* ==========================================================================
   galería
   ========================================================================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.gallery .cell{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-lg);
  position:relative;
  box-shadow:var(--shadow-soft);
}
.gallery .cell:nth-child(4n+1){ border-radius:var(--radius-blob-1); }
.gallery .cell:nth-child(4n+2){ border-radius:var(--radius-blob-2); }
.gallery .cell:nth-child(4n+3){ border-radius:var(--radius-blob-3); }
.gallery .cell:nth-child(4n+4){ border-radius:var(--radius-blob-4); }
/* shade inferior para que los labels no se pierdan sobre fotos claras */
.gallery .cell::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:45%;
  background:linear-gradient(0deg, rgba(38,42,36,.55) 0%, rgba(38,42,36,.2) 55%, transparent 100%);
  pointer-events:none;
}
.gallery .cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.gallery .cell:hover img{ transform:scale(1.05); }
.gallery .cell .label{
  position:absolute;
  bottom:18px; left:20px;
  color:var(--blanco);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  text-shadow:0 1px 12px rgba(38,57,43,.7), 0 0 3px rgba(38,57,43,.5);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
}
.gallery .cell .label::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--blanco);
  display:block;
  opacity:.85;
}
@media(min-width:900px){
  .gallery{
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
  }
  .gallery-editorial .cell:nth-child(1){ aspect-ratio:3/4.5; }
  .gallery-editorial .cell:nth-child(2){ aspect-ratio:3/4.5; margin-top:56px; }
  .gallery-editorial .cell:nth-child(3){ aspect-ratio:3/4.5; }
  .gallery-editorial .cell:nth-child(4){ aspect-ratio:3/4.5; margin-top:56px; }
}

/* ==========================================================================
   mesa que florece (bloque destacado en Inicio)
   ========================================================================== */
.mesa-feature{
  background:var(--crema);
  padding:var(--section-y) var(--pad-x);
  position:relative;
  overflow:hidden;
}
.mesa-feature-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
/* mobile: card verde primero, imagen después */
.mesa-feature-inner .mesa-image{ order:2; }
.mesa-feature-inner .feature-card,
.mesa-feature-inner .mesa-body{ order:1; }
@media(min-width:900px){
  .mesa-feature-inner .mesa-image,
  .mesa-feature-inner .feature-card,
  .mesa-feature-inner .mesa-body{ order:initial; }
}
.mesa-image{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-blob-1);
  box-shadow:var(--shadow-soft);
}
.mesa-image img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.mesa-image:hover img{ transform:scale(1.04); }
.mesa-image .floating-tag{
  position:absolute;
  bottom:22px;
  left:22px;
  color:var(--blanco);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-shadow:0 1px 12px rgba(38,57,43,.7), 0 0 3px rgba(38,57,43,.5);
}
.mesa-image .floating-tag::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--blanco);
  display:block;
  opacity:.85;
  border-radius:0;
}
.mesa-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
}
.mesa-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px, 5.5vw, 60px);
  line-height:var(--lh-tight);
  color:var(--verde);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
}
.mesa-title em{ font-style:italic; color:var(--terra); font-weight:400; }
.mesa-desc{
  font-size:clamp(15px, 1.5vw, 17px);
  line-height:var(--lh-body);
  color:var(--cacao);
  max-width:46ch;
}
.mesa-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:8px;
}
.mesa-list li{
  font-size:14px;
  color:var(--jardin);
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1.4;
}
@media(min-width:700px){
  .mesa-list{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 24px;
  }
}
.mesa-list li::before{
  content:"";
  width:5px;
  height:5px;
  background:var(--terra);
  border-radius:50%;
  flex-shrink:0;
}
.mesa-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding-top:8px;
  align-items:center;
}
@media(min-width:900px){
  .mesa-feature-inner{
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
}

/* ==========================================================================
   carta — categorías + productos
   ========================================================================== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px 16px;
}
@media(min-width:700px){ .cat-grid{ grid-template-columns:repeat(3, 1fr); gap:30px 24px; } }
@media(min-width:1000px){ .cat-grid{ grid-template-columns:repeat(6, 1fr); } }
.cat{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}
.cat-img{
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.cat:nth-child(3n+1) .cat-img{ border-radius:var(--radius-blob-1); }
.cat:nth-child(3n+2) .cat-img{ border-radius:var(--radius-blob-2); }
.cat:nth-child(3n+3) .cat-img{ border-radius:var(--radius-blob-3); }
.cat-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .4s;
}
.cat:hover .cat-img img{ transform:scale(1.04); filter:brightness(.95); }
.cat-name{
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
  color:var(--verde);
  font-variation-settings:"opsz" 24;
}
.cat-tag{
  font-size:12px;
  color:var(--cacao);
  opacity:.6;
}

/* productos por categoría */
.prod-section{ margin-top:56px; }
.prod-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid var(--hairline);
}
.prod-section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(22px, 3vw, 30px);
  color:var(--verde);
  font-variation-settings:"opsz" 48;
  line-height:var(--lh-heading);
}
.prod-list{ display:flex; flex-direction:column; }
.prod{
  padding:16px 0;
  border-bottom:1px dashed var(--hairline);
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.prod:last-child{ border-bottom:none; }
.prod-name{
  font-family:var(--display);
  font-size:17px;
  font-weight:500;
  color:var(--cacao);
  font-variation-settings:"opsz" 20;
}
.prod-desc{
  font-size:14px;
  color:var(--cacao);
  opacity:.75;
  line-height:1.55;
  max-width:60ch;
}

/* ==========================================================================
   ubicación / cómo llegar
   ========================================================================== */
.ubicacion-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:stretch;
}
.ubicacion-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
}
.ubicacion-data{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:8px;
}
.ubicacion-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ubicacion-row .label{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--terra);
}
.ubicacion-row .value{
  font-size:16px;
  color:var(--cacao);
  font-weight:400;
}
.ubicacion-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.ubicacion-map{
  aspect-ratio:1/1;
  min-height:320px;
  background:var(--jardin);
  border-radius:var(--radius-blob-2);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  width:100%;
}
.ubicacion-map iframe{ width:100%; height:100%; border:0; filter:saturate(.9) contrast(.95); }
.ubicacion-map .map-pin{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-100%);
  width:36px; height:36px;
  pointer-events:none;
  color:var(--terra);
}
@media(min-width:900px){
  .ubicacion-inner{
    grid-template-columns:1fr 1.1fr;
    gap:80px;
  }
  .ubicacion-map{ aspect-ratio:auto; min-height:520px; }
}

/* ==========================================================================
   carrusel horizontal (fotos)
   ========================================================================== */
.carrusel{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 8px 20px;
  margin:0 -8px;
  -webkit-overflow-scrolling:touch;
}
.carrusel::-webkit-scrollbar{ height:6px; }
.carrusel::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:3px; }
.carrusel .slide{
  flex:0 0 48%;
  scroll-snap-align:start;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-soft);
}
.carrusel .slide:nth-child(3n+1){ border-radius:var(--radius-blob-1); }
.carrusel .slide:nth-child(3n+2){ border-radius:var(--radius-blob-2); }
.carrusel .slide:nth-child(3n+3){ border-radius:var(--radius-blob-3); }
/* shade inferior para captions sobre fotos claras */
.carrusel .slide::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:45%;
  background:linear-gradient(0deg, rgba(38,42,36,.55) 0%, rgba(38,42,36,.2) 55%, transparent 100%);
  pointer-events:none;
}
.carrusel .slide .caption{ z-index:2; }
.carrusel .slide img{
  width:100%; height:100%; object-fit:cover;
}
.carrusel .slide .caption{
  position:absolute;
  bottom:18px; left:20px;
  color:var(--blanco);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  text-shadow:0 1px 12px rgba(38,57,43,.7), 0 0 3px rgba(38,57,43,.5);
  display:flex;
  align-items:center;
  gap:10px;
}
.carrusel .slide .caption::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--blanco);
  display:block;
  opacity:.85;
}
@media(min-width:700px){
  .carrusel .slide{ flex:0 0 44%; }
}
@media(min-width:1200px){
  .carrusel .slide{ flex:0 0 28%; }
}

/* ==========================================================================
   footer
   ========================================================================== */
.footer{
  background:var(--verde);
  color:var(--blanco);
  padding:56px var(--pad-x) 0;
  border-top:1px solid var(--hairline-light);
}
@media(min-width:900px){ .footer{ padding-top:60px; } }
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.footer-mark{
  display:block;
  line-height:1;
}
.footer-mark img{
  width:120px;
  height:auto;
  display:block;
}
.footer-tag{
  font-size:13px;
  color:var(--crema);
  opacity:.7;
  margin-top:6px;
}
.footer-cta{ margin-top:18px; }
.footer-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 20px;
}
.footer-col h4{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--sol);
  margin-bottom:10px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:14px;
  color:var(--blanco);
  opacity:.78;
  line-height:1.9;
  transition:opacity .2s;
}
.footer-col a:hover{ opacity:1; }

/* iconos SVG de redes en footer */
.footer-social{
  display:flex;
  gap:14px;
  margin-top:8px;
}
.footer-social a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hairline-light);
  border-radius:50%;
  color:var(--arena);
  opacity:.8;
  transition:opacity .2s, background .2s, border-color .2s;
}
.footer-social a:hover{
  opacity:1;
  background:var(--sol);
  color:var(--palta);
  border-color:var(--sol);
}
.footer-social a svg{ width:16px; height:16px; }

/* tagline del footer bajo el logo */
.footer-tagline{
  margin-top:12px;
  max-width:26ch;
  font-family:var(--display);
  font-style:italic;
  font-size:15px;
  color:var(--arena);
  opacity:.85;
  line-height:1.4;
}
.footer-bottom{
  padding:20px 0 16px;
  margin-top:32px;
  border-top:1px solid var(--hairline-light);
  display:flex;
  justify-content:center;
  text-align:center;
  font-size:12px;
  color:var(--crema);
  opacity:.6;
}
@media(min-width:900px){
  .footer-inner{ grid-template-columns:1fr 2fr; gap:60px; }
  .footer-cols{ grid-template-columns:repeat(3, 1fr); }
}

/* ==========================================================================
   whatsapp flotante
   ========================================================================== */
.wa-fixed{
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--whatsapp);
  color:var(--blanco);
  padding:14px 18px 14px 14px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:500;
  box-shadow:0 8px 24px rgba(31,138,76,.35);
  transition:transform .2s, box-shadow .2s;
}
.wa-fixed:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(31,138,76,.45); }
.wa-fixed svg{ width:22px; height:22px; }
.wa-label{ display:inline; }
@media(max-width:480px){
  .wa-fixed{ padding:14px; }
  .wa-label{ display:none; }
}
@media(min-width:900px){
  .wa-fixed{ bottom:24px; right:24px; padding:14px 20px 14px 16px; }
}

/* ==========================================================================
   símbolos (historia)
   ========================================================================== */
.simbolos{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid var(--hairline);
}
.simbolo{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.simbolo-icon{
  width:32px;
  height:32px;
  color:var(--terra);
  flex-shrink:0;
}
.simbolo-text{ display:flex; flex-direction:column; gap:4px; }
.simbolo-name{
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
  color:var(--verde);
  font-variation-settings:"opsz" 24;
}
.simbolo-desc{ font-size:14px; color:var(--cacao); opacity:.78; line-height:1.55; }
@media(min-width:700px){
  .simbolos{ grid-template-columns:repeat(3,1fr); gap:32px; }
}

/* ==========================================================================
   reveal
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   accesibilidad
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--terra);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  [data-reveal], .fade-up{ opacity:1; transform:none; }
}

/* ==========================================================================
   REDISEÑO — divisores, cards destacadas, ornamentos decorativos
   ========================================================================== */

/* ---------- divisores entre secciones ---------- */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:8px var(--pad-x);
  color:var(--jardin);
}
.section-divider::before,
.section-divider::after{
  content:"";
  flex:1;
  max-width:120px;
  height:1px;
  background:var(--hairline);
}
.section-divider svg{
  width:22px;
  height:22px;
  opacity:.7;
}
.section-cream + .section-divider,
.section-verde + .section-divider{ background:var(--blanco); }

/* variante con solo hoja/marca */
.divider-leaf{
  padding:56px var(--pad-x) 24px;
}

/* ---------- feature-card (bloque destacado con fondo verde) ---------- */
/* Encapsula contenido importante como en el mockup de Stitch */
.feature-card{
  position:relative;
  background:var(--verde);
  color:var(--blanco);
  border-radius:var(--radius-xl);
  padding:clamp(28px, 4vw, 48px);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.feature-card .h-section,
.feature-card .mesa-title{ color:var(--crema); }
.feature-card .h-section em,
.feature-card .mesa-title em{ color:var(--sol); }
.feature-card .lead,
.feature-card .mesa-desc{ color:var(--blanco); opacity:.9; max-width:52ch; }
.feature-card .eyebrow{ color:var(--menta); }
.feature-card .mesa-list li{
  color:var(--crema);
}
.feature-card .mesa-list li::before{
  background:var(--sol);
}

/* ornamento SVG decorativo — isotipo napoli con buen contraste sobre fondo verde */
.feature-card .card-ornament{
  position:absolute;
  bottom:-24px;
  right:-24px;
  width:200px;
  height:200px;
  color:var(--arena);
  opacity:.14;
  pointer-events:none;
}
/* variante como <img> usando el isotipo oficial (PNG del manual de marca)
   el PNG tiene ~60% de whitespace, así que va con width grande y posición
   negativa para que solo se vea el trazado en la esquina */
.feature-card .card-ornament-img{
  position:absolute;
  bottom:-56px;
  right:-40px;
  width:200px;
  height:auto;
  opacity:.5;
  pointer-events:none;
  user-select:none;
}
@media(min-width:900px){
  .feature-card .card-ornament-img{
    width:280px;
    bottom:-80px;
    right:-60px;
  }
}
.feature-card .card-ornament-top{
  position:absolute;
  top:22px;
  right:26px;
  width:38px;
  height:38px;
  color:var(--sol);
  opacity:.9;
}

/* ---------- pill-badge (etiqueta destacada) ---------- */
.pill-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  background:var(--menta);
  color:var(--verde);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
.pill-badge svg{ width:14px; height:14px; }

/* ---------- section-note (nota decorativa entre secciones) ---------- */
.section-note{
  text-align:center;
  padding:24px var(--pad-x) 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.section-note-icon{
  width:44px;
  height:44px;
  color:var(--jardin);
  opacity:.75;
  padding:10px;
  border:1px solid var(--hairline);
  border-radius:50%;
}
.section-note-text{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(17px, 2vw, 20px);
  color:var(--jardin);
  max-width:32ch;
  line-height:1.4;
}

/* ---------- ornamentos flotantes en secciones ---------- */
.section{ position:relative; }
.ornament{
  position:absolute;
  pointer-events:none;
  color:var(--jardin);
  opacity:.15;
  z-index:0;
}
.ornament-tr{ top:40px; right:5%; width:60px; height:60px; }
.ornament-bl{ bottom:40px; left:5%; width:80px; height:80px; }
.ornament-tl{ top:60px; left:6%; width:52px; height:52px; }
.section-inner{ position:relative; z-index:1; }

/* fondo decorativo con puntos (patrón sutil) */
.dot-bg{
  background-image:radial-gradient(var(--hairline) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:0 0;
}

/* ---------- overlaps y stacked images (dos imágenes superpuestas) ---------- */
.stack-images{
  position:relative;
  min-height:520px;
}
.stack-images .stack-a{
  position:relative;
  width:78%;
  aspect-ratio:4/5;
  border-radius:var(--radius-blob-1);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.stack-images .stack-b{
  position:absolute;
  bottom:-30px;
  right:0;
  width:52%;
  aspect-ratio:1/1;
  border-radius:var(--radius-blob-3);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:6px solid var(--blanco);
}
.stack-images .stack-a img,
.stack-images .stack-b img{ width:100%; height:100%; object-fit:cover; }

/* ---------- editorial variant con imagen extendida hacia el borde ---------- */
.editorial-tight{
  gap:var(--gap-lg);
}

/* ---------- hero-card (card grande dentro de un hero secundario) ---------- */
.hero-card-below{
  margin-top:-80px;
  position:relative;
  z-index:5;
}

/* ---------- mejorar spacing en simbolos con contenedor decorativo ---------- */
.simbolos-box{
  background:var(--blanco);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:28px;
  margin-top:20px;
}
.simbolos-box .simbolos{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* ---------- ajustes finos para secciones con fondo verde ---------- */
.section-verde{ position:relative; overflow:hidden; }
.section-verde .ornament{ color:var(--sol); opacity:.12; }

/* ---------- info-cards (grid de 3 datos con íconos) ---------- */
.info-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:24px;
}
.info-card{
  background:var(--blanco);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .3s var(--ease), border-color .3s;
}
.info-card:hover{ transform:translateY(-2px); border-color:var(--terra); }
.info-card-icon{
  width:36px;
  height:36px;
  color:var(--terra);
  padding:8px;
  background:var(--crema);
  border-radius:50%;
}
.info-card-title{
  font-family:var(--display);
  font-size:17px;
  font-weight:500;
  color:var(--verde);
}
.info-card-desc{ font-size:14px; color:var(--cacao); opacity:.75; line-height:1.55; }
@media(min-width:700px){
  .info-cards{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}

/* ---------- category tile mejorada (con fondo suave por categoría) ---------- */
.cat-alt{
  background:var(--blanco);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:14px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.cat-alt:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.cat-alt .cat-img{ margin-bottom:12px; }

/* ---------- mesa-feature con fondo decorativo mejorado ---------- */
.mesa-feature{ position:relative; }
.mesa-feature::before{
  content:"";
  position:absolute;
  top:-40px; right:-60px;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(184,107,75,.08) 0%, transparent 65%);
  pointer-events:none;
}
.mesa-feature::after{
  content:"";
  position:absolute;
  bottom:0; left:-80px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(63,95,69,.1) 0%, transparent 65%);
  pointer-events:none;
}

/* ---------- imagen del logo dentro de body ---------- */
.brand-mark{
  display:block;
  width:min(320px, 60vw);
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--menta);
  box-shadow:var(--shadow-soft);
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }

/* ---------- ubicacion-row ajustado ---------- */
.ubicacion-row .note{ font-size:12px; color:var(--jardin); opacity:.6; font-style:italic; }

/* ---------- experiencias-grid (otras-experiencias.html) ---------- */
.experiencias-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:700px){
  .experiencias-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
}
.experiencia-card{
  background:var(--arena-luz);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.experiencia-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.experiencia-card:nth-child(4n+1){ border-radius:var(--radius-blob-1); }
.experiencia-card:nth-child(4n+2){ border-radius:var(--radius-blob-2); }
.experiencia-card:nth-child(4n+3){ border-radius:var(--radius-blob-3); }
.experiencia-card:nth-child(4n+4){ border-radius:var(--radius-blob-4); }
.experiencia-img{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
}
.experiencia-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.experiencia-card:hover .experiencia-img img{ transform:scale(1.04); }
.experiencia-body{
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.experiencia-tag{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terra);
  font-weight:500;
}
.experiencia-title{
  font-family:var(--display);
  font-size:clamp(22px, 3vw, 26px);
  font-weight:500;
  color:var(--palta);
  line-height:1.15;
  margin-top:2px;
}
.experiencia-desc{
  font-size:14.5px;
  line-height:1.55;
  color:var(--chirimoya);
  opacity:.85;
  max-width:44ch;
}
.experiencia-body .link{ margin-top:6px; align-self:flex-start; }

/* ---------- CTA rows/stacks para mobile ---------- */
/* .cta-row: botones centrados en mobile, wrap normal en desktop */
.cta-row{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
}
@media(min-width:700px){
  .cta-row{ justify-content:flex-start; }
}

/* .cta-stack: en columna (uno abajo del otro) en mobile, en fila en desktop */
.cta-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  margin-top:8px;
  width:100%;
  max-width:360px;
}
.cta-stack .btn{ width:100%; justify-content:center; }
@media(min-width:700px){
  .cta-stack{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    max-width:none;
    width:auto;
  }
  .cta-stack .btn{ width:auto; }
}