:root{
  --ink:#17110d;
  --ink-soft:#221813;
  --panel:#261c16;
  --panel-strong:#2f231b;
  --paper:#f4e9d7;
  --paper-soft:#e5d5b6;
  --text:#f6edde;
  --text-dim:#d0bea2;
  --text-faint:#9b8468;
  --line:rgba(244,233,215,.14);
  --line-strong:rgba(244,233,215,.24);
  --copper:#cf8947;
  --copper-bright:#efb575;
  --wine:#9a4050;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --font-display:'Fraunces', Georgia, serif;
  --font-ui:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(207,137,71,.16), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(154,64,80,.16), transparent 28%),
    radial-gradient(circle at 80% 100%, rgba(111,144,119,.08), transparent 30%),
    var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
}

a{color:inherit;}
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--copper-bright);
  border-radius:var(--radius-sm);
}

.shell{
  position:relative;
  z-index:1;
  width:min(1280px, calc(100% - 2rem));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}

.topbar::before{
  content:'';
  position:absolute;
  inset:0 -1rem auto;
  height:100%;
  background:linear-gradient(180deg, rgba(23,17,13,.94), rgba(23,17,13,.75), transparent);
  backdrop-filter:blur(14px);
  z-index:-1;
}

.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
}

.brand-lockup__logo-shell{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.36rem .5rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,249,241,.98), rgba(241,230,210,.96));
  border:1px solid rgba(239,181,117,.36);
  box-shadow:0 16px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
}

.brand-lockup__logo{display:block; width:clamp(138px, 15vw, 182px); height:auto;}

.brand-lockup__name{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--paper);
}

.brand-lockup__tag{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.45rem .78rem;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-soft);
  white-space:nowrap;
}

@media (max-width:900px){
  .brand-lockup__tag{display:none;}
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.72rem 1rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
  background:rgba(38,28,22,.82);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

.nav-toggle svg{width:16px;height:16px;}

.topbar__links{
  position:absolute;
  top:100%;
  right:0;
  left:0;
  display:none;
  flex-direction:column;
  gap:.5rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(34,24,19,.98);
  box-shadow:var(--shadow);
}

.topbar__links.is-open{display:flex;}

.topbar__links a{
  text-decoration:none;
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.topbar__links a:hover,
.topbar__links a[aria-current="page"]{color:var(--copper-bright);}

@media (min-width:960px){
  .nav-toggle{display:none;}
  .topbar__links{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
  }
}

.page-hero{
  padding:4rem 0 2.4rem;
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
  margin-bottom:1rem;
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.crumbs a{
  text-decoration:none;
  color:var(--text-dim);
}

.crumbs a:hover{color:var(--copper-bright);}

.page-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.page-hero__kicker::before{
  content:'';
  width:22px;
  height:1px;
  background:currentColor;
}

.page-hero__title{
  margin:.9rem 0 0;
  max-width:12ch;
  font-family:var(--font-display);
  font-size:clamp(2.8rem, 7vw, 5.1rem);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--paper);
}

.page-hero__title i{
  font-style:italic;
  font-weight:500;
  color:var(--copper-bright);
}

.page-hero__lead{
  max-width:50rem;
  margin:1.2rem 0 0;
  font-size:1.08rem;
  color:var(--text-dim);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.5rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:50px;
  padding:.9rem 1.25rem;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.btn--primary{
  color:var(--ink);
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--copper-bright), var(--copper));
  box-shadow:0 16px 40px rgba(207,137,71,.26);
}

.btn--secondary{
  color:var(--paper);
  border:1px solid var(--line-strong);
  background:rgba(38,28,22,.55);
}

.content{
  padding:0 0 4.5rem;
}

.section{
  margin-top:2rem;
}

.section__head{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:baseline;
  margin-bottom:1.1rem;
}

.section__index{
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3vw, 2.25rem);
  color:var(--paper);
}

.section__title i{
  font-style:italic;
  color:var(--copper-bright);
  font-weight:500;
}

.section__copy{
  max-width:58rem;
  color:var(--text-dim);
}

.card-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}

@media (min-width:820px){
  .card-grid--2{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .card-grid--3{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

.card{
  padding:1.3rem 1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(47,35,27,.9), rgba(26,18,13,.92));
  box-shadow:var(--shadow);
}

.card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--paper);
}

.card p{
  margin:.7rem 0 0;
  color:var(--text-dim);
}

.mini-label{
  display:inline-flex;
  margin-bottom:.8rem;
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.list{
  display:grid;
  gap:.7rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none;
}

.list li{
  padding:0 0 .7rem;
  border-bottom:1px dashed var(--line);
  color:var(--text-dim);
}

.list li:last-child{border-bottom:none;padding-bottom:0;}

.steps{
  counter-reset:step;
  display:grid;
  gap:1rem;
}

.step{
  display:grid;
  gap:.6rem;
  padding:1.15rem 1.15rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(38,28,22,.55);
}

.step::before{
  counter-increment:step;
  content:"Paso " counter(step, decimal-leading-zero);
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.step h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--paper);
}

.step p{
  margin:0;
  color:var(--text-dim);
}

.faq-list{
  display:grid;
  gap:.9rem;
}

.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(38,28,22,.58);
  overflow:hidden;
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:1.1rem 1.15rem;
  font-family:var(--font-display);
  font-size:1.18rem;
  color:var(--paper);
}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item p,
.faq-item ul{
  margin:0;
  padding:0 1.15rem 1.15rem;
  color:var(--text-dim);
}

.faq-item ul{
  padding-left:2.25rem;
}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:rgba(38,28,22,.52);
}

.table th,
.table td{
  padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.table th{
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.table td{
  color:var(--text-dim);
}

.table tr:last-child td{border-bottom:none;}

.recipe-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}

@media (min-width:760px){
  .recipe-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

.recipe-card{
  display:grid;
  gap:.85rem;
  padding:1.2rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(47,35,27,.94), rgba(25,18,14,.95));
  box-shadow:var(--shadow);
}

.recipe-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.recipe-card__name{
  margin:0;
  font-family:var(--font-display);
  font-size:1.45rem;
  color:var(--paper);
}

.pill{
  display:inline-flex;
  width:max-content;
  padding:.35rem .6rem;
  border-radius:var(--radius-pill);
  background:rgba(207,137,71,.14);
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.recipe-card__formula{
  font-family:var(--font-mono);
  color:var(--paper-soft);
  font-size:.8rem;
}

.recipe-card__note{
  color:var(--text-dim);
}

.cta-panel{
  margin-top:2rem;
  padding:1.4rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(207,137,71,.16), rgba(154,64,80,.12));
}

.cta-panel h2{
  margin:0;
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--paper);
}

.cta-panel p{
  margin:.6rem 0 0;
  color:var(--text-dim);
  max-width:46rem;
}

.not-found-card{
  display:grid;
  gap:1rem;
  padding:1.35rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(47,35,27,.96), rgba(25,18,14,.94)),
    rgba(38,28,22,.6);
  box-shadow:var(--shadow);
}

.not-found-code{
  display:inline-flex;
  width:max-content;
  padding:.42rem .72rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(239,181,117,.26);
  background:rgba(207,137,71,.12);
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.not-found-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.65rem;
  color:var(--paper);
}

.not-found-card p{
  margin:0;
  color:var(--text-dim);
  max-width:48rem;
}

.not-found-links{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.8rem;
}

.not-found-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.95rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.03);
  color:var(--paper);
  text-decoration:none;
}

.not-found-links a::after{
  content:'↗';
  color:var(--copper-bright);
  font-family:var(--font-mono);
  font-size:.88rem;
}

.not-found-links a:hover{
  border-color:rgba(239,181,117,.28);
  background:rgba(207,137,71,.08);
}

.page-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem 0 2rem;
  border-top:1px solid var(--line);
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:.72rem;
}

.page-footer__identity{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem 1.1rem;
  min-width:min(100%, 31rem);
}

.parent-brand{
  display:inline-flex;
  align-items:center;
  gap:.58rem;
  padding:.38rem .72rem .38rem .42rem;
  border:1px solid rgba(239,181,117,.2);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(207,137,71,.1), rgba(255,255,255,.035));
  color:var(--paper);
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s, background .18s, transform .18s;
}

.parent-brand:hover{
  border-color:rgba(239,181,117,.42);
  background:linear-gradient(135deg, rgba(207,137,71,.17), rgba(255,255,255,.055));
  transform:translateY(-1px);
}

.parent-brand__mark{
  width:2rem;
  height:2rem;
  flex:0 0 2rem;
  object-fit:contain;
  padding:.14rem;
  border-radius:50%;
  background:#f8f1e7;
}

.parent-brand__text{
  display:grid;
  gap:.12rem;
  line-height:1.08;
}

.parent-brand__label{
  color:var(--text-faint);
  font-size:.58rem;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.parent-brand__name{
  color:var(--paper);
  font-family:var(--font-display);
  font-size:.88rem;
  letter-spacing:0;
  line-height:1.05;
}

.project-origin{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.project-origin__copy{
  max-width:42rem;
}

@media (max-width:700px){
  .project-origin{align-items:flex-start; flex-direction:column;}
  .page-footer__identity{align-items:flex-start; flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .parent-brand{transition:none;}
}