/* ────────────────────────────────────────────────────────────
   HESTIA BISTRÓ · WEB
   Layout: Aleia restaurant — elegant editorial, cream canvas
   Palette: Hestia brand — espresso, cobre, cream lino
   ──────────────────────────────────────────────────────────── */

@font-face{
  font-family: "Dahlia Display";
  src: url("assets/dahlia-medium.woff2") format("woff2"),
       url("assets/dahlia-medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{ font-family:"Barlow"; src:url("assets/fonts/barlow-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Barlow"; src:url("assets/fonts/barlow-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Barlow"; src:url("assets/fonts/barlow-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Barlow"; src:url("assets/fonts/barlow-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Barlow"; src:url("assets/fonts/barlow-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* Brand tokens (sampled from logo) */
  --hueso:   #E8DFCD;
  --crema:   #D9C9A8;
  --crema-2: #C7B58E;
  --tinta:   #15100A;
  --tinta-2: #1F1812;
  --tinta-3: #2A1F18;
  --sepia:   #6B5A47;
  --cobre:   #A87E48;
  --cobre-2: #8A6738;
  --ambar:   #C99B5C;

  /* White canvas, dark ink — Aleia-style light theme */
  --bg:        #F1ECE1;
  --bg-2:      #F7F2E8;
  --bg-3:      #EDE5D3;
  --ink:       #14100B;
  --ink-soft:  #443A2C;
  --ink-quiet: #6B5C46;
  --rule:      rgba(20,16,11,.14);
  --rule-2:    rgba(20,16,11,.06);
  --accent:    var(--cobre);
  --accent-2:  var(--cobre-2);

  --font-display: "Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-brand:   "Italiana","Cormorant Garamond",serif;
  --font-hand:    "La Belle Aurore","Caveat",cursive;
  --font-sans:    "Barlow","Inter",-apple-system,system-ui,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; max-width:100vw; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .25s ease, opacity .25s ease; }
a:hover{ color:var(--accent); }
button{ font-family:inherit; cursor:pointer; }


/* ─── Reusable type ───────────────────────────────────── */
.eyebrow{
  font-family:var(--font-sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 18px;
}

.display-title{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:.95;
  margin:0;
  color:#241E13;
  font-size:clamp(54px, 7vw, 110px);
}
.display-title span{ font-weight:300; }
.display-title em{
  font-style:italic;
  font-weight:300;
  display:block;
  color:#241E13;
}
.display-title.center{ text-align:center; }

/* Section titles — Aleia-style: ALL CAPS, stacked, upright */
.section-title{
  font-family:"Dahlia Display", var(--font-display);
  font-weight:500;
  font-style:normal;
  letter-spacing:-.005em;
  line-height:.92;
  font-size:clamp(44px, 10vw, 88px);
  text-transform:uppercase;
}
.section-title span{
  display:block;
  font-weight:500;
  font-style:normal;
  color:#241E13;
}

.brand-wordmark{
  font-family:var(--font-brand);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}
.brand-wordmark em{
  font-family:var(--font-hand);
  font-style:normal;
  text-transform:lowercase;
  letter-spacing:.02em;
  font-size:.85em;
  color:var(--accent);
  margin-left:.4em;
  display:inline-block;
  transform:translateY(.12em);
}

/* ─── Buttons / links ─────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:22px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  border-radius:0;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-amber{
  background:#E2B974;
  color:#000;
  border-color:#E2B974;
}
.btn-amber:hover{
  background:transparent;
  color:#000;
  border-color:#E2B974;
}

.btn-line{
  display:inline-block;
  padding:10px 0 6px;
  font-family:var(--font-sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  transition:color .25s ease, border-color .25s ease, letter-spacing .25s ease;
}
.btn-line:hover{
  color:var(--accent-2);
  border-color:var(--accent-2);
  letter-spacing:.26em;
}
.btn-line.small{
  font-size:10px;
}

.link-quiet{
  display:inline-block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:14px;
}
.link-quiet:hover{ color:var(--accent); }


/* ────────────────────────────────────────────────────────
   HEADER  (responsive: grid 3-col fluido en desktop · nav al bottom en mobile)
   ──────────────────────────────────────────────────────── */
.site-header{
  position:fixed;
  inset:0 0 auto 0;                  /* top:0 right:0 left:0 — sin bottom */
  z-index:9900;                      /* igual que el nav inferior, siempre por encima del contenido */
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  /* Padding fluido: escala suave entre móvil y desktop sin breakpoints */
  padding: clamp(14px, 2.4vw, 22px) clamp(20px, 4vw, 40px);
  /* safe-area-inset-top: respeta status bar / notch en cualquier dispositivo */
  padding-top: calc(clamp(14px, 2.4vw, 22px) + env(safe-area-inset-top, 0px));
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size: clamp(10px, 1vw, 11px);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
}

.header-mark{
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.header-mark img{
  width: clamp(36px, 5vw, 46px);
  height: clamp(36px, 5vw, 46px);
  object-fit: contain;
  transition: transform .3s ease;
}
.header-mark:hover img{ transform: rotate(-3deg) scale(1.05); }

/* nav-center centrado limpio con grid (sin position:absolute + translate) */
.nav-center{
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: clamp(18px, 2.5vw, 34px);
}
.nav-link{ position: relative; color: var(--ink); opacity: .85; }
.nav-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after{ transform: scaleX(1); }

.nav-right{
  grid-column: 3;
  justify-self: end;
}
.nav-right .lang{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 4px;
}
.lang-btn{
  background: transparent; border: 0;
  color: var(--ink);
  padding: 6px 10px;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .4;
  transition: opacity .25s ease, color .25s ease;
}
.lang-btn.active{ opacity: 1; color: var(--accent-2); }
.lang-btn:hover{ opacity: .95; }


/* ────────────────────────────────────────────────────────
   HERO  (Aleia-style: huge wordmark on canvas · photo full-bleed)
   ──────────────────────────────────────────────────────── */
.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  padding:120px 0 0;
  background:var(--bg);
  overflow:hidden;
  isolation:isolate;
}

/* The giant editorial wordmark */
.hero-wordmark{
  position:relative;
  z-index:3;
  text-align:center;
  margin:0 auto;
  padding:0 40px;
  width:100%;
  max-width:1280px;
}
.hero-wordmark-svg{
  display:block;
  width:min(88vw, 1080px);
  height:auto;
  margin:0 auto;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.35));
  animation: wordIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes wordIn{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}
@keyframes ruleIn{
  from{ opacity:0; transform:scaleX(0); }
  to  { opacity:1; transform:scaleX(1); }
}

/* Grey backdrop behind the photo — reveals when the photo fades on scroll */
.hero-backdrop{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:63.3vh;
  background:var(--bg);
  z-index:0;
}

/* The photo backdrop — full-bleed lateral · anchored to bottom · behind wordmark */
.hero-photo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:0;
  width:100%;
  height:63.3vh;
  z-index:1;
  overflow:hidden;
}
.hero-photo-fill{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(17,9,6,0) 0%, rgba(17,9,6,.15) 65%, rgba(17,9,6,.5) 100%),
    url('assets/hero.jpg?v=4') center/cover no-repeat #110906;
}
.hero-photo-grain{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  opacity:.55;
  mix-blend-mode:overlay;
}

/* Welcome card pinned bottom-left over the photo */
.hero-card{
  position:absolute;
  left:0; bottom:0;
  width:min(420px, 86vw);
  background:#F1EAD9;
  color:#1A130B;
  padding:32px 34px 30px;
  border-top:2px solid var(--accent);
  z-index:5;
  box-shadow: -10px -10px 40px rgba(0,0,0,.45);
}
.hero-card .eyebrow{ margin:0 0 16px; color:var(--cobre-2); }
.hero-card-text{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.5;
  color:#1A130B;
  font-weight:400;
  margin:0 0 24px;
  letter-spacing:-.002em;
}
.hero-card .link-quiet{ color:rgba(26,19,11,.62); }
.hero-card .link-quiet:hover{ color:var(--cobre-2); }
.hero-card .btn-amber{ margin-bottom:4px; }


/* ────────────────────────────────────────────────────────
   BLOCK SPLIT  (El Restaurante / Igualada)
   ──────────────────────────────────────────────────────── */
.block-split{
  padding:140px 130px 60px;
  position:relative;
}
.block-split-grid{
  max-width:1240px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:120px;
  align-items:start;
}
.block-split .display-title{
  font-size:clamp(48px, 6vw, 130px);
  line-height:.92;
}
.block-split .display-title em{ display:block; }

.block-split-body{
  max-width:560px;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  color:rgb(33,37,41);
  font-weight:300;
}
.block-split-body p{ margin:0 0 28px; color:rgb(33,37,41); }
.block-split-body p:last-of-type{ margin-bottom:14px; }
.block-split-body .btn{ margin-top:0; }
.block-split-body strong,
.bio-text strong{
  font-weight:600;
  color:var(--ink);
}
.display-title:not(.section-title) em{ color:var(--accent-2); }


/* ────────────────────────────────────────────────────────
   FULL-WIDTH IMAGE PLACEHOLDERS (Aleia-style: left-aligned, gold rule right)
   ──────────────────────────────────────────────────────── */
.full-image-wrap{
  position:relative;
  max-width:1240px;
  margin:0 auto 120px;
  padding:0 130px;
  box-sizing:content-box;
}
.full-image-wrap .accent-rule{
  display:block;
  position:absolute;
  /* Starts 80px INSIDE the image right edge and extends to content right edge */
  left:calc(50% + 145px);
  right:130px;
  /* Always 50px above the bottom of the photo */
  bottom:50px;
  height:1px;
  background:var(--accent);
  opacity:.95;
  z-index:3;
}

.full-image{
  position:relative;
  /* Spans from grid left (title) to button right edge:
     left column (50% - 60) + full gap (120) + button width (~165) */
  width:calc(50% + 225px);
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#1a0e08;
}
.full-image[data-img="interior"] .full-image-fill{
  background: url('assets/the-restaurant.jpg?v=3') center/cover no-repeat;
  filter:none;
}
.full-image-fill{
  position:absolute; inset:0;
  background:
    radial-gradient(50% 40% at 60% 50%, rgba(220,160,90,.45) 0%, transparent 65%),
    radial-gradient(80% 60% at 20% 80%, rgba(178,112,66,.45) 0%, transparent 70%),
    linear-gradient(160deg, #4a2c18 0%, #1a0e08 100%);
  filter:saturate(.85);
}
.full-image[data-img="igualada"] .full-image-fill{
  background:
    radial-gradient(60% 45% at 50% 60%, rgba(214,152,90,.45) 0%, transparent 65%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,140,.25) 0%, transparent 70%),
    linear-gradient(180deg, #2c1810 0%, #1a0e08 60%, #3d2418 100%);
}
.img-cap{ display:none; }


/* ────────────────────────────────────────────────────────
   BIO ROW  (Chef / Sala)
   ──────────────────────────────────────────────────────── */
.bio-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  max-width:1240px;
  margin:0 auto 100px;
  padding:0 40px;
  gap:80px;
  align-items:start;
}
.bio-row.reverse{ direction:rtl; }
.bio-row.reverse > *{ direction:ltr; }

.bio-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#1a0e08;
}
.bio-photo .full-image-fill{
  background:
    radial-gradient(50% 40% at 50% 35%, rgba(232,223,205,.18) 0%, transparent 70%),
    radial-gradient(80% 60% at 40% 90%, rgba(178,112,66,.35) 0%, transparent 70%),
    linear-gradient(180deg, #1a0e08 0%, #2c1810 100%);
}
.bio-photo[data-img="chef-2"] .full-image-fill{
  background:
    radial-gradient(60% 50% at 60% 40%, rgba(214,152,90,.35) 0%, transparent 65%),
    linear-gradient(180deg, #2a1810 0%, #14090c 100%);
}

.bio-text{
  display:flex; flex-direction:column;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  font-weight:300;
  color:var(--ink-soft);
}
.bio-text .eyebrow{ color:var(--accent-2); margin-bottom:18px; }
.bio-name{ margin-bottom:30px !important; }
.bio-name span,
.bio-name em{ display:block; }
.bio-text p{ margin:0 0 18px; max-width:480px; color:var(--ink-soft); }
.bio-text .btn-line{ margin-top:12px; }


/* ────────────────────────────────────────────────────────
   PROPUESTA  (Nuestra propuesta · accordion)
   ──────────────────────────────────────────────────────── */
.propuesta{
  max-width:880px;
  margin:60px auto 80px;
  padding:80px 40px 40px;
  text-align:center;
}
.propuesta-head{ margin-bottom:60px; }
.propuesta-intro{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:560px;
  margin:28px auto 0;
}

.menu-list{
  list-style:none; padding:0; margin:0;
  border-top:1px solid var(--rule);
  text-align:left;
}
.menu-row{
  border-bottom:1px solid var(--rule);
}
.menu-row-trigger{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:28px; align-items:center;
  padding:26px 8px;
  background:transparent; border:0;
  text-align:left;
  color:var(--ink);
  transition:color .25s ease;
}
.menu-row-trigger:hover{ color:var(--accent-2); }
.menu-row-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:400;
  letter-spacing:-.003em;
}
.menu-row-price{
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-quiet);
}
.menu-row-icon{
  font-family:var(--font-display);
  font-size:22px;
  width:28px; height:28px;
  display:grid; place-items:center;
  color:var(--accent-2);
  transition:transform .3s ease;
}
.menu-row.open .menu-row-icon{ transform:rotate(45deg); }

.menu-row-body{
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .3s ease;
  padding:0 8px;
}
.menu-row.open .menu-row-body{
  max-height:240px;
  padding:0 8px 24px;
}
.menu-row-body p{
  margin:0;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:560px;
}


/* ────────────────────────────────────────────────────────
   FOOD PAIR (two images side by side)
   ──────────────────────────────────────────────────────── */
.food-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  max-width:1240px;
  margin:0 auto 120px;
  padding:0 40px;
}
.food-pair-item{
  position:relative;
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1a0e08;
}
.food-pair-item[data-img="dish-1"] .full-image-fill{
  background:
    radial-gradient(40% 35% at 50% 45%, rgba(232,223,205,.5) 0%, transparent 60%),
    radial-gradient(80% 70% at 50% 95%, rgba(178,112,66,.45) 0%, transparent 70%),
    linear-gradient(180deg, #1a0e08 0%, #3d2418 100%);
}
.food-pair-item[data-img="dish-2"] .full-image-fill{
  background:
    radial-gradient(45% 35% at 55% 50%, rgba(214,152,90,.55) 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(120,60,30,.5) 0%, transparent 70%),
    linear-gradient(180deg, #2a1410 0%, #1a0905 100%);
}


/* ────────────────────────────────────────────────────────
   CTA STRIP  (Reservar)
   ──────────────────────────────────────────────────────── */
.cta-strip{
  text-align:center;
  padding:100px 40px 120px;
  max-width:760px;
  margin:0 auto;
}
.cta-strip .display-title{ margin-bottom:24px; }
.cta-strip p{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 32px;
}
.cta-strip .link-quiet{
  display:block; margin-top:18px;
  color:var(--ink-quiet);
}
.cta-strip .link-quiet:hover{ color:var(--accent-2); }


/* ────────────────────────────────────────────────────────
   FOOTER  (Aleia-style: white bg · 4 columns)
   ──────────────────────────────────────────────────────── */
.site-footer{
  background:var(--bg);
  color:rgb(33,37,41);
  padding:120px 130px 100px;
  position:relative;
}
.footer-wrap{
  max-width:1240px;
  margin:0 auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:60px;
  align-items:start;
}

.footer-brand .footer-logo{
  display:block;
  width:64px; height:64px;
  object-fit:contain;
  margin:0 0 24px;
  filter:none;
}
.footer-tagline{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:24px;
  color:rgb(33,37,41);
  font-weight:300;
  margin:0;
}
.footer-tagline a{
  color:var(--accent);
  text-decoration:none;
}
.footer-tagline a:hover{ text-decoration:underline; }

.footer-eyebrow{
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 22px;
}

.footer-address,
.footer-hours{
  font-style:normal;
}
.footer-address p,
.footer-hours p{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  color:rgb(33,37,41);
  font-weight:300;
  margin:0;
}
.footer-hours strong{
  display:inline-block;
  font-weight:600;
  margin-top:14px;
}
.footer-hours p:first-child strong{ margin-top:0; }

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  margin:0;
  white-space:nowrap;
}
.footer-links a{
  color:rgb(33,37,41);
  font-weight:300;
  text-decoration:none;
  transition:color .25s ease;
}
.footer-links a:hover{ color:var(--accent); }
.footer-links li.spacer{ height:14px; }
.footer-links li.footer-credit{
  color:rgb(33,37,41);
  font-weight:300;
}
.footer-links li.footer-credit a{
  color:var(--accent);
}
.footer-links li.footer-credit a:hover{ text-decoration:underline; }


/* ────────────────────────────────────────────────────────
   NUESTRA PROPUESTA  (Aleia-style)
   ──────────────────────────────────────────────────────── */
.proposal-section{
  padding:220px 130px 220px;
  position:relative;
  background:#EEE8D9;
}
.proposal-wrap{
  max-width:1240px;
  margin:0 auto;
}

.proposal-intro{
  max-width:760px;
  margin-top:56px;
}
.proposal-eyebrow{
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 12px;
}
.proposal-text{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  color:rgb(33,37,41);
  font-weight:300;
  margin:0;
}

.proposal-menu{
  max-width:760px;
  margin-top:84px;
}
.proposal-menu .btn{ margin-bottom:8px; }

.proposal-divider{
  border:0;
  border-top:1px solid var(--accent);
  margin:32px 0 0;
  opacity:1;
}

.menu-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--accent);
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:400;
}
.menu-line-name{ color:rgb(33,37,41); }
.menu-line-price{ color:var(--accent); }

.proposal-subheading{
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:36px 0 10px;
}
.proposal-subtext{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  color:rgb(33,37,41);
  font-weight:300;
  margin:0 0 24px;
}


/* ────────────────────────────────────────────────────────
   PLATOS · CAROUSEL (Aleia food slider)
   ──────────────────────────────────────────────────────── */
.dishes-carousel{
  padding:180px 130px;
  background:var(--bg);
  position:relative;
}
.dishes-wrap{
  max-width:1240px;
  margin:0 auto;
  position:relative;
  padding-left:70px;
}
.dishes-rule{
  display:block;
  position:absolute;
  left:0;
  right:38%;
  top:110px;
  height:1px;
  background:var(--accent);
  z-index:5;
  pointer-events:none;
}
.dishes-viewport{
  overflow:hidden;
  position:relative;
}
.dishes-track{
  display:flex;
  gap:40px;
  transition:transform .9s cubic-bezier(.4,.0,.2,1);
  will-change:transform;
}
.dish-slide{
  flex:0 0 calc(50% - 20px);
  margin:0;
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  background:#F2EEE5;
}
.dish-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}


/* ────────────────────────────────────────────────────────
   TERRITORIO SECTION  (Aleia HOTEL CASA FUSTER pattern)
   ──────────────────────────────────────────────────────── */
.territorio-section{
  /* Image is inside, so let section padding handle spacing */
}
.territorio-intro{ max-width:760px; margin-top:50px; }
.territorio-btn{ margin-top:32px; }

.territorio-image-wrap{
  margin:80px auto 0;
  padding:0;
}

.full-image--square{ aspect-ratio:1/1; }

.full-image[data-img="anoia"] .full-image-fill{
  background: url('assets/anoia.jpg?v=1') center/cover no-repeat;
  filter: none;
}


/* ────────────────────────────────────────────────────────
   CHEF SECTION  (Aleia-style: square photo left · bio right)
   ──────────────────────────────────────────────────────── */
.chef-section{
  padding:180px 130px;
  background:var(--bg);
  position:relative;
}
.chef-wrap{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start;
}
.chef-photo{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#1a0e08;
}
.chef-photo-fill{
  position:absolute; inset:0;
  background:url('assets/chef.jpg?v=3') center/cover no-repeat #1a0e08;
}

.chef-text{ padding-top:12px; }
.chef-eyebrow{
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin:0 0 6px;
}
.chef-name{
  margin-bottom:36px !important;
}
.chef-name span{ display:block; }

.chef-body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:29px;
  color:rgb(33,37,41);
  font-weight:300;
}
.chef-body p{ margin:0 0 22px; color:rgb(33,37,41); }
.chef-body strong{ font-weight:600; color:rgb(33,37,41); }
.chef-body .btn{ margin-top:14px; }


/* ────────────────────────────────────────────────────────
   REVEAL ON SCROLL
   ──────────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:none; }


/* ────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px){
  /* Cream un punto más suave en móvil */
  :root{ --bg: #F4EFE6; }

  /* html en espresso: capa de seguridad para cualquier overscroll de iOS */
  html{ background: #191514; }

  /* Garantizar scroll vertical en Android sin sobreescribir lo necesario */
  html, body{ touch-action: pan-y; }

  /* El nav-center se DESCONECTA del grid del header y se ancla al bottom del viewport */
  .nav-center{
    position: fixed;
    inset: auto 0 0 0;                              /* bottom:0, left:0, right:0 */
    grid-column: unset;                             /* anular grid-column:2 de desktop */
    justify-self: unset;                            /* anular justify-self:center */
    /* Altura = 70px visibles + safe-area abajo (sistema Android / home indicator iOS) */
    height: calc(70px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: #191514;
    border-top: 1px solid rgba(255,255,255,.06);
    z-index: 9900;
    /* Centrar los 3 links con flex — más simple que line-height tricks */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 8vw, 50px);
  }
  .nav-center .nav-link{
    color: #F4EFE6;
    opacity: 1;
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--font-sans);
    padding: 8px 12px;                              /* mejor touch target */
    line-height: 1;
  }
  /* Sin línea de underline animada en mobile (que pertenece al desktop) */
  .nav-center .nav-link::after{ display: none; }

  /* Body padding-bottom para que el contenido no quede tapado por el nav */
  body{ padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .site-footer{
    margin-bottom: 0;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 980px){
  /* Header ya escala fluido con clamp() — no necesita override aquí */
  .nav-left{ gap:20px; }

  .hero{ padding:120px 22px 60px; min-height:90vh; }
  .hero-photo, .hero-backdrop{ height:76vh; }
  .hero-card{ left:22px; right:22px; bottom:40px; width:auto; }
  .hero-bottom{ left:22px; right:22px; bottom:14px; font-size:9.5px; }

  .block-split{ padding:55px 16px 30px; }
  .block-split-grid{ grid-template-columns:1fr; gap:14px; }
  .block-split-body{ max-width:none; }

  /* Mobile: smaller section titles */
  .display-title.section-title,
  .section-title{
    line-height:1;
    font-size:35px !important;
  }
  /* EL RESTAURANTE specifically: keep on a single line */
  #restaurante .section-title span{ display:inline; }

  /* NUESTRA PROPUESTA & TERRITORIO mobile spacing */
  .proposal-section{
    padding:50px 24px 60px;
  }
  /* La página dedicada de la carta es la PRIMERA sección bajo el header, así que
     necesita más padding-top en mobile para no solaparse con él */
  .proposal-section.carta-page{
    padding-top: calc(130px + env(safe-area-inset-top, 0px));
  }
  /* En la carta-page, el título "NUESTRA CARTA" debe ir en una sola línea
     (en vez de apilado como en las secciones de la home) */
  .proposal-section.carta-page .section-title{
    font-size: clamp(36px, 9vw, 64px);
  }
  .proposal-section.carta-page .section-title span{
    display: inline;
  }
  .proposal-intro{
    max-width:none;
    margin-top:24px;
  }
  .proposal-menu{
    max-width:none;
    margin-top:36px;
  }
  .menu-line{
    font-size:13px;
    padding:14px 0;
  }
  .proposal-subheading{
    margin-top:28px;
  }
  .proposal-divider{ margin-top:24px; }

  /* EL CHEF mobile: photo on top full-width, text below */
  .chef-section{ padding:50px 24px 60px; }
  .chef-wrap{
    grid-template-columns:1fr;
    gap:28px;
  }
  .chef-photo{ aspect-ratio:3/4; }
  .chef-text{ padding-top:0; }
  .chef-name{ margin-bottom:22px !important; }
  .chef-body{ font-size:15px; line-height:27px; }
  .chef-body p{ margin:0 0 18px; }

  /* TERRITORIO image: align LEFT with the El Territorio button above it */
  .territorio-image-wrap{
    padding:0 !important;
    margin:24px 0 0 0 !important;
    display:block !important;
    max-width:none !important;
    width:100% !important;
    box-sizing:border-box;
  }
  .territorio-image-wrap .full-image{
    width:86% !important;
    margin-left:0 !important;
    margin-right:auto !important;
    display:block !important;
    position:relative !important;
    flex:none !important;
  }
  .territorio-image-wrap .accent-rule{
    right:0;
    left:auto;
    width:30%;
    bottom:50px;
  }
  .territorio-btn{ margin-top:24px; }
  .territorio-intro{ margin-top:20px; }
  .proposal-text{ font-size:15px; line-height:27px; }

  /* PLATOS · CARROUSEL mobile: compact, slides, line crosses middle full width */
  .dishes-carousel{ padding:50px 16px 60px; overflow:hidden; }
  .dishes-wrap{ padding-left:0; }
  .dishes-rule{
    left:-16px;          /* starts at the left viewport edge */
    right:35%;           /* ends at ~65% of viewport */
    top:50%;             /* vertically centered on the photos */
    transform:translateY(-50%);
    bottom:auto;
    width:auto;
  }
  .dishes-track{ gap:14px; }
  .dish-slide{
    flex:0 0 calc(50% - 7px);
    aspect-ratio:3/4;
  }

  .full-image-wrap{ padding:0 16px; margin:24px auto 60px; overflow:visible; }
  .full-image-wrap .accent-rule{
    /* Line crosses the bottom-right inside the image and extends out to page edge */
    top:auto;
    bottom:50px;
    left:55%;
    right:-16px;
    width:auto;
  }
  .full-image-wrap.reverse .accent-rule{ left:-16px; right:55%; width:auto; }
  .full-image{ width:100%; aspect-ratio:4/3; }

  .bio-row{ grid-template-columns:1fr; gap:36px; padding:0 22px; margin-bottom:70px; }
  .bio-row.reverse{ direction:ltr; }
  .bio-photo{ aspect-ratio:5/4; }

  .propuesta{ padding:60px 22px 30px; }
  .menu-row-trigger{
    grid-template-columns: 1fr auto;
    gap:14px;
  }
  .menu-row-price{ display:none; }
  .menu-row-title{ font-size:18px; }

  .food-pair{ grid-template-columns:1fr; gap:14px; padding:0 22px; margin-bottom:80px; }

  .cta-strip{ padding:70px 22px 90px; }

  .site-footer{ padding:80px 22px 60px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:36px; }

  /* Footer mobile: hide H logo + put tagline on one line */
  .footer-brand .footer-logo{ display:none; }
  .footer-tagline br{ display:none; }
  .footer-tagline a{ margin-left:6px; }
  .footer-tagline a::before{ content:"· "; color:rgb(33,37,41); }
}

@media (max-width: 560px){
  .nav-left{ gap:14px; }
  .nav-left .nav-link:last-child{ display:none; }

  .hero-logo-img{ width:78vw; }
  .hero-card-text{ font-size:15.5px; }

  .footer-grid{ grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────
   PÁGINA RESERVAR — placeholder para el widget de CoverManager
   ──────────────────────────────────────────────────────── */
.reservar-main{
  /* Margen superior = altura del header (fluido + safe-area) + algo de aire */
  padding-top: calc(clamp(14px, 2.4vw, 22px) * 2 + 50px + env(safe-area-inset-top, 0px));
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  max-width: 1240px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Placeholder "Próximamente" mientras no esté el widget de reservas */
.reservar-placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(60px, 12vw, 160px) clamp(20px, 4vw, 40px);
  min-height: 50vh;
}
.reservar-placeholder-title{
  font-family: "Dahlia Display", var(--font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.005em;
  line-height: 1;
  font-size: clamp(48px, 8vw, 96px);
  text-transform: uppercase;
  color: #241E13;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.reservar-placeholder-text{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: #212529;
  font-weight: 300;
  max-width: 600px;
  margin: 0;
}
.reservar-placeholder-text a{
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  transition: color .25s ease, border-color .25s ease;
}
.reservar-placeholder-text a:hover{
  color: var(--accent-2);
  border-color: var(--accent-2);
}


/* ────────────────────────────────────────────────────────
   PÁGINA FAQ — estilo editorial Aleia: pregunta XL + respuesta a la derecha
   ──────────────────────────────────────────────────────── */
.faq-main{
  padding-top: calc(clamp(14px, 2.4vw, 22px) * 2 + 240px + env(safe-area-inset-top, 0px));
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  max-width: 1240px;
  margin: 0 auto;
}
.faq-list{
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 7vw, 100px);
}
/* Cada Q&A ocupa 7/12 del ancho · alterna lado: impar a la derecha, par a la izquierda
   (mismas proporciones que Aleia: col-lg-7 + offset-lg-5 en su Bootstrap grid) */
.faq-item{
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 50px);
  width: 58.3333%;                       /* 7/12 columnas */
  box-sizing: border-box;
}
.faq-item:nth-child(odd){
  margin-left: 41.6667%;                 /* 5/12 columnas de offset desde la izquierda → derecha */
  margin-right: 0;
}
.faq-item:nth-child(even){
  margin-left: 0;                        /* sin offset → izquierda */
  margin-right: 41.6667%;
}
.faq-question{
  margin: 0;
  font-family: "Dahlia Display", var(--font-display);
  font-weight: 500;                         /* match Aleia */
  font-style: normal;                       /* match Aleia */
  letter-spacing: -.005em;
  line-height: 1;                           /* match Aleia (64/64 = 1.0) */
  font-size: clamp(36px, 6vw, 64px);        /* desktop cap 64px (Aleia) — escala en mobile */
  text-transform: uppercase;
  color: #212529;                           /* exact Aleia color rgb(33,37,41) */
}
.faq-question span{
  display: block;
}
.faq-answer{
  margin: 0;
  font-family: var(--font-sans);            /* Barlow (match Aleia) */
  font-size: 16px;                          /* exact Aleia */
  line-height: 1.8;                         /* match Aleia (29/16 ≈ 1.8) */
  color: #212529;                           /* exact Aleia color rgb(33,37,41) */
  font-weight: 300;                         /* match Aleia */
}
/* Para respuestas con varios párrafos: envolverlas en .faq-answer-block
   y heredan gap pequeño en vez del gap grande del .faq-item */
.faq-answer-block{
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}
.faq-answer a{
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  transition: color .25s ease, border-color .25s ease;
}
.faq-answer a:hover{
  color: var(--accent-2);
  border-color: var(--accent-2);
}

@media (max-width: 768px){
  /* Padding-top mobile reducido — la primera pregunta empieza más arriba
     (en desktop hay 240px de aire, aquí basta con ~100px para no solaparse) */
  .faq-main{
    padding-top: calc(clamp(14px, 2.4vw, 22px) * 2 + 100px + env(safe-area-inset-top, 0px));
  }
  .faq-item,
  .faq-item:nth-child(odd),
  .faq-item:nth-child(even){
    width: 100%;                       /* ancho completo en móvil */
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
  }
  .faq-list{
    gap: clamp(70px, 14vw, 100px);
  }
}


/* ────────────────────────────────────────────────────────
   PÁGINAS LEGALES — Términos, Privacidad, Cookies (lista numerada)
   ──────────────────────────────────────────────────────── */
.legal-main{
  padding-top: calc(clamp(14px, 2.4vw, 22px) * 2 + 180px + env(safe-area-inset-top, 0px));
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  max-width: 1240px;
  margin: 0 auto;
}
.legal-list{
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.legal-item{
  margin: 0;
  font-family: var(--font-sans);            /* Barlow */
  font-size: 16px;                          /* mismo que faq-answer */
  line-height: 1.8;                         /* mismo que faq-answer */
  color: #212529;
  font-weight: 300;
}
.legal-item strong{
  font-weight: 500;
}
.legal-item a{
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  transition: color .25s ease, border-color .25s ease;
}
.legal-item a:hover{
  color: var(--accent-2);
  border-color: var(--accent-2);
}


/* ────────────────────────────────────────────────────────
   PÁGINA CARTA — menu-line convertidos en links clickables a PDFs
   ──────────────────────────────────────────────────────── */
/* Override del bg de la proposal-section: en la página dedicada de la carta
   queremos que sea el mismo crema que el header/body (no el #EEE8D9 de la home) */
.proposal-section.carta-page{
  background: var(--bg);
}
.carta-link{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(33,37,41);
  cursor: pointer;
}
.carta-link .menu-line-cta{
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .15em;
}