:root{
  --bg:#120d0a;
  --paper:#f9f2e8;
  --paper-strong:#f6eadb;
  --ink:#211915;
  --ink-soft:#4f4038;
  --line:rgba(73,55,44,.24);
  --terracotta:#9f5a40;
  --barro:#7c4a35;
  --vino:#5b2534;
  --sage:#66765f;
  --dark:#17110e;
  --ok:#2b7540;
  --ok-dark:#1f5d33;
  --radius:18px;
  --shadow:0 14px 32px rgba(44,27,18,.14);
  --shadow-strong:0 24px 44px rgba(38,24,17,.2);
  --topbar-h:68px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#120d0a 0%,#211711 38%,#f2e3ce 38.1%,#f5ecdf 100%);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.58;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.08;
  background:repeating-linear-gradient(
    0deg,
    rgba(88,66,52,.06) 0,
    rgba(88,66,52,.06) 1px,
    transparent 1px,
    transparent 6px
  );
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.container{
  width:min(1160px,calc(100% - 1.2rem));
  margin-inline:auto;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(13,9,7,.82),rgba(13,9,7,.54));
  border-bottom:1px solid rgba(255,232,210,.13);
}

.topbar-inner{
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  padding:.3rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}

.brand-symbol{
  width:56px;
  height:56px;
  object-fit:contain;
}

.brand-name{
  margin:0;
  color:#fff3e6;
  font:700 clamp(1.02rem,2.4vw,1.28rem)/1.05 "Fraunces",serif;
  letter-spacing:.01em;
  white-space:nowrap;
}

.menu-toggle{
  display:inline-flex;
  border:1px solid rgba(255,232,210,.28);
  border-radius:11px;
  background:rgba(255,255,255,.12);
  color:#ffe9d5;
  padding:.5rem .68rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.menu{
  position:absolute;
  top:var(--topbar-h);
  left:0;
  right:0;
  background:rgba(26,18,14,.96);
  border-bottom:1px solid rgba(255,232,210,.16);
  box-shadow:0 14px 26px rgba(43,26,18,.14);
  padding:.65rem .6rem .9rem;
  display:grid;
  gap:.44rem;
  transition:opacity .2s ease, transform .2s ease;
  transform-origin:top;
}

.menu[aria-hidden="true"]{
  opacity:0;
  pointer-events:none;
  transform:scaleY(.92);
}

.menu[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
  transform:scaleY(1);
}

.menu a{
  border:1px solid rgba(255,232,210,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  padding:.52rem .7rem;
  text-align:center;
  font-size:.77rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:#f8e6d5;
}

.cta-wa,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:999px;
  border:1px solid transparent;
  padding:.8rem .95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.76rem;
  font-weight:800;
  text-align:center;
}

.cta-wa{
  min-height:auto;
  border-color:rgba(28,93,46,.35);
  background:linear-gradient(180deg,#32ba60,#227f42);
  color:#f2fff6;
  padding:.58rem .84rem;
  box-shadow:0 8px 14px rgba(22,79,39,.2);
  white-space:nowrap;
}

main{padding:1rem 0 3.2rem}
section{margin-top:1rem}

.hero{
  position:relative;
  display:grid;
  align-items:end;
  width:100vw;
  min-height:100svh;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:
    radial-gradient(circle at 78% 18%,rgba(159,90,64,.35),transparent 28%),
    linear-gradient(90deg,rgba(12,8,6,.92) 0%,rgba(12,8,6,.68) 44%,rgba(12,8,6,.12) 100%),
    linear-gradient(180deg,rgba(19,14,12,.18),rgba(19,14,12,.82)),
    url("/assets/hermoso/01_hero/hero_01.jpeg") center/cover no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:40%;
  background:linear-gradient(180deg,rgba(19,14,12,0),rgba(19,14,12,.58));
  pointer-events:none;
}

.hero-atmosphere{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(115deg,rgba(255,232,210,.08) 0 1px,transparent 1px 13px),
    radial-gradient(circle at 24% 76%,rgba(255,198,133,.16),transparent 24%);
  mix-blend-mode:screen;
}

.hero-content{
  position:relative;
  z-index:1;
  display:grid;
  gap:.78rem;
  width:min(1160px,calc(100% - 1.2rem));
  max-width:none;
  margin-inline:auto;
  padding:calc(var(--topbar-h) + 1.1rem) 0 4.5rem;
  color:#f8efe7;
}

.hero-status{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  max-width:760px;
}

.hero-status span{
  border:1px solid rgba(255,232,210,.25);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#ffe8d2;
  padding:.34rem .58rem;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.hero-restaurant,
.hero-kicker{
  margin:0;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}

.hero-restaurant{color:#f8e5d2}
.hero-kicker{color:#f7dbc7}

h1{
  margin:0;
  max-width:9ch;
  font:700 clamp(3.6rem,16vw,9.5rem)/.82 "Fraunces",serif;
  letter-spacing:0;
  text-wrap:balance;
}

.hero-sub{
  margin:0;
  max-width:26ch;
  color:#ffd8b8;
  font:600 clamp(1.18rem,4.2vw,2.25rem)/1.08 "Fraunces",serif;
}

.hero-copy{
  margin:0;
  max-width:48ch;
  color:#f4e7da;
  font-size:clamp(.97rem,2.7vw,1.08rem);
  line-height:1.62;
}

.hero-pricing{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  max-width:760px;
}

.price-chip{
  display:grid;
  gap:.06rem;
  min-width:132px;
  padding:.76rem .9rem;
  border:1px solid rgba(255,236,219,.34);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(248,233,220,.18),rgba(248,233,220,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(5px);
}

.price-chip-label{
  color:#ffe5cf;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
}

.price-chip-value{
  color:#fff7ef;
  font:700 1.02rem/1.05 "Fraunces",serif;
}

.hero-ctas{
  display:grid;
  gap:.52rem;
  max-width:760px;
}

.btn-primary{
  background:linear-gradient(180deg,#6d2c3f,#4d1f2c);
  color:#f9f0e6;
  border-color:rgba(44,16,23,.4);
}

.btn-outline{
  background:rgba(255,255,255,.12);
  color:#f7ece2;
  border-color:rgba(255,239,225,.48);
}

.btn-ghost{
  background:rgba(255,232,210,.08);
  color:#ffe6d1;
  border-color:rgba(255,239,225,.3);
}

.btn-whatsapp{
  background:linear-gradient(180deg,#32ba60,#227f42);
  color:#f3fff7;
  border-color:rgba(18,70,35,.34);
  box-shadow:0 10px 18px rgba(22,79,39,.18);
}

.btn-dark{
  background:linear-gradient(180deg,#6b2b3d,#4d1f2b);
  color:#f8efe5;
  border-color:rgba(53,20,30,.4);
}

.btn-sage{
  background:linear-gradient(180deg,#6e8066,#4d5f48);
  color:#f1f8ee;
  border-color:rgba(59,74,54,.35);
}

.panel{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(251,244,234,.9);
  box-shadow:var(--shadow);
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:1rem;
  z-index:2;
  width:52px;
  height:52px;
  display:none;
  place-items:center;
  transform:translateX(-50%);
  border:1px solid rgba(255,232,210,.28);
  border-radius:999px;
  background:rgba(12,8,6,.46);
  color:#ffe8d2;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.panel-grid{display:grid}

.panel-image{
  min-height:220px;
  background-size:cover;
  background-position:center;
}

.panel-body{
  display:grid;
  gap:.58rem;
  padding:1rem .9rem 1.08rem;
}

.eyebrow{
  margin:0;
  color:var(--barro);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72rem;
  font-weight:800;
}

h2{
  margin:0;
  color:#221915;
  font:700 clamp(1.66rem,5.6vw,2.9rem)/1 "Fraunces",serif;
}

h3{
  margin:0;
  color:#2b201a;
  font:700 clamp(1.24rem,4vw,1.72rem)/1.04 "Fraunces",serif;
}

.body-copy{
  margin:0;
  color:#493b33;
  font-size:clamp(.95rem,2.4vw,1rem);
  line-height:1.65;
}

.section-lead{max-width:64ch}

.product-grid{
  display:grid;
  gap:.62rem;
}

.product-card{
  display:grid;
  gap:.56rem;
  padding:.92rem .82rem;
  border:1px solid rgba(73,55,44,.18);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(246,236,223,.94));
  box-shadow:0 10px 18px rgba(41,27,18,.08);
}

.product-card.featured{
  border-color:rgba(91,37,52,.28);
  background:linear-gradient(180deg,rgba(255,248,243,.84),rgba(244,229,219,.96));
  box-shadow:0 16px 28px rgba(54,28,22,.12);
}

.product-card.sage{
  border-color:rgba(102,118,95,.28);
  background:linear-gradient(180deg,rgba(247,248,243,.94),rgba(232,237,228,.96));
}

.product-tag{
  margin:0;
  color:#6a5246;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
}

.product-price{
  margin:0;
  display:flex;
  align-items:flex-end;
  gap:.28rem;
  color:#245c35;
}

.product-price strong{
  color:#245c35;
  font:700 clamp(1.92rem,7vw,2.55rem)/.95 "Fraunces",serif;
}

.product-price span{
  color:#466c52;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}

.product-copy{
  margin:0;
  color:#43362d;
  font-size:.96rem;
  line-height:1.58;
}

.product-list,
.manifesto-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
}

.product-list{
  gap:.22rem;
  color:#40332b;
  font-size:.92rem;
}

.product-list li{
  display:flex;
  gap:.42rem;
  align-items:flex-start;
}

.product-list li::before{
  content:"•";
  color:var(--terracotta);
  font-weight:900;
  line-height:1.2;
}

.difference-card{
  display:grid;
  gap:.3rem;
  padding:.9rem .88rem;
  border:1px solid rgba(91,37,52,.16);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,249,245,.84),rgba(246,233,223,.94));
}

.difference-card p{
  margin:0;
  color:#463931;
  font-size:.95rem;
}

.difference-card strong{color:var(--vino)}

.catalog-reference{
  display:grid;
  gap:.28rem;
  padding:.92rem .88rem;
  border:1px solid rgba(102,118,95,.24);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(244,247,240,.92),rgba(233,239,228,.96));
  box-shadow:0 10px 18px rgba(41,27,18,.07);
}

.catalog-reference-label{
  margin:0;
  color:var(--sage);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
}

.catalog-reference-copy{
  margin:0;
  color:#3f342d;
  font-size:.95rem;
  line-height:1.56;
}

.catalog-reference-link{
  width:max-content;
  max-width:100%;
  color:var(--vino);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:.18em;
  word-break:break-all;
}

.actions{
  display:grid;
  gap:.5rem;
}

.steps{
  display:grid;
  gap:.5rem;
}

.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.58rem;
  align-items:start;
  padding:.62rem;
  border:1px solid rgba(78,58,46,.2);
  border-radius:14px;
  background:rgba(255,255,255,.6);
}

.step b{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(111,44,63,.36);
  border-radius:999px;
  background:rgba(111,44,63,.12);
  color:var(--vino);
  font-size:.8rem;
}

.step p{
  margin:.08rem 0 0;
  color:#3f322a;
  font-size:.95rem;
  line-height:1.48;
}

.food-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.48rem;
}

.food-card{
  min-height:140px;
  overflow:hidden;
  border:1px solid rgba(74,55,44,.2);
  border-radius:14px;
  background:#efe3d1;
  box-shadow:0 8px 14px rgba(41,27,18,.11);
}

.food-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.big-quote{
  margin:0;
  max-width:16ch;
  color:#2a1f19;
  font:700 clamp(1.6rem,5vw,2.4rem)/1.05 "Fraunces",serif;
}

.location-rows{
  display:grid;
  gap:.44rem;
}

.location-line{
  margin:0;
  color:#41342c;
  font-size:.95rem;
}

.location-line strong{
  display:block;
  margin-bottom:.06rem;
  color:#6d4b3a;
  font-size:.69rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.manifesto-list{
  gap:.3rem;
  color:#3f3229;
  font-weight:600;
  font-size:.95rem;
}

.manifesto-list li{
  border-left:3px solid rgba(91,37,52,.38);
  padding-left:.56rem;
}

.team-grid{
  display:grid;
  gap:.58rem;
}

.team-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.62rem;
  align-items:center;
  padding:.72rem;
  border:1px solid rgba(73,55,44,.2);
  border-radius:16px;
  background:rgba(255,255,255,.58);
}

.team-photo,
.team-photo-video{
  width:62px;
  height:62px;
  border:1px solid rgba(73,55,44,.24);
  border-radius:12px;
}

.team-photo{
  object-fit:cover;
  object-position:50% 38%;
}

.team-photo-video{
  background:#1a1410;
  object-fit:cover;
  object-position:center;
  display:block;
}

.team-name,
.author-name{
  margin:0;
  color:#2f241f;
  font-weight:800;
  font-size:.95rem;
}

.team-role,
.author-role{
  margin:.12rem 0 0;
  color:#5a483d;
  font-size:.84rem;
  line-height:1.45;
}

.team-link{
  display:inline-flex;
  width:max-content;
  margin:.22rem 0 0;
  color:var(--vino);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  border-bottom:1px dashed rgba(91,37,52,.4);
  padding-bottom:.1rem;
}

.author-card{
  display:flex;
  gap:.78rem;
  align-items:center;
  padding:.62rem;
  border:1px solid rgba(73,55,44,.22);
  border-radius:14px;
  background:rgba(255,255,255,.55);
}

.author-photo{
  width:68px;
  height:68px;
  flex:0 0 auto;
  object-fit:cover;
  object-position:50% 38%;
  border:1px solid rgba(73,55,44,.25);
  border-radius:12px;
  box-shadow:0 6px 12px rgba(46,31,23,.16);
}

.footer{
  display:grid;
  justify-items:center;
  gap:.5rem;
  margin-top:1.35rem;
  padding-top:1rem;
  border-top:1px solid rgba(70,54,43,.2);
  text-align:center;
}

.footer-wordmark{
  width:min(280px,70vw);
  filter:contrast(1.15);
  opacity:.94;
}

.footer-text{
  margin:0;
  color:#4a3a31;
  font-size:.93rem;
  line-height:1.55;
}

[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .62s ease, transform .62s ease;
}

[data-reveal].show{
  opacity:1;
  transform:none;
}

@media (min-width:860px){
  .container{width:min(1120px,calc(100% - 2rem))}
  :root{--topbar-h:74px}
  .topbar-inner{min-height:var(--topbar-h)}
  .brand-symbol{width:64px;height:64px}
  .menu-toggle{display:none}
  .menu{
    position:static;
    display:flex;
    gap:.32rem;
    padding:0;
    border:0;
    box-shadow:none;
    background:none;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .menu a{
    background:none;
    border-color:transparent;
    padding:.5rem .66rem;
  }
  .menu a:hover{
    border-color:rgba(255,232,210,.2);
    background:rgba(255,255,255,.1);
    color:#ffe8d2;
  }
  main{padding-top:0}
  section{margin-top:1.25rem}
  .hero-content{
    grid-template-columns:minmax(0,760px) minmax(220px,1fr);
    align-content:end;
    column-gap:2rem;
    padding-bottom:5rem;
  }
  .hero-status,
  .hero-restaurant,
  .hero-kicker,
  h1,
  .hero-sub,
  .hero-copy,
  .hero-pricing,
  .hero-ctas{grid-column:1}
  .price-chip{min-width:154px}
  .hero-ctas{
    display:flex;
    flex-wrap:wrap;
  }
  .hero-ctas .btn{min-width:190px}
  .scroll-cue{display:grid}
  .panel-grid{grid-template-columns:1fr 1fr}
  .panel-grid.reverse .panel-image{order:2}
  .panel-grid.reverse .panel-body{order:1}
  .panel-image{min-height:340px}
  .panel-body{padding:1.18rem 1.1rem 1.2rem}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{max-width:560px}
  .food-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.58rem;
  }
  .food-card{min-height:180px}
  .actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:760px;
  }
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .author-photo{width:76px;height:76px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  [data-reveal]{opacity:1;transform:none}
}