/* LIVRA — hoja de estilo única */

:root{
  --hueso:#F6F2EA;
  --hueso-2:#EDE6DA;
  --verde:#3E4B3F;
  --verde-2:#55654F;
  --salvia:#96A796;
  --oro:#A8884C;
  --tinta:#2B2F2A;
  --tinta-suave:#5C6159;
  --linea:#DCD3C4;
  --blanco:#FFFDF9;
  --ancho:1080px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--hueso);
  color:var(--tinta);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:500;
  color:var(--verde);
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.2rem,5.5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.8vw,2.4rem);margin-top:2.2em}
h3{font-size:clamp(1.2rem,2.4vw,1.45rem);margin-top:1.8em}
h2:first-child,h3:first-child{margin-top:0}

p{margin:0 0 1.15em}
a{color:var(--verde);text-decoration-color:var(--salvia);text-underline-offset:3px}
a:hover{color:var(--oro)}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.estrecho{max-width:760px}

/* ---------- cabecera ---------- */
header.sitio{
  border-bottom:1px solid var(--linea);
  background:var(--blanco);
  position:sticky;top:0;z-index:50;
}
.barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 20px;max-width:var(--ancho);margin:0 auto;flex-wrap:wrap;
}
.marca{
  display:flex;align-items:center;
  text-decoration:none;padding:2px 0;
}
/* el logotipo lleva su propio degradado de oro dentro del SVG:
   cargado con <img> queda aislado y no hereda color de esta hoja */
.marca img{height:27px;width:auto;display:block;transition:opacity .18s}
.marca:hover img{opacity:.78}
@media (max-width:860px){ .marca img{height:23px} }
nav.sitio{display:flex;gap:4px;flex-wrap:wrap}
nav.sitio a{
  font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-suave);text-decoration:none;padding:7px 11px;border-radius:3px;
}
nav.sitio a:hover{background:var(--hueso-2);color:var(--verde)}
nav.sitio a[aria-current="page"]{color:var(--verde);box-shadow:inset 0 -2px 0 var(--oro)}

/* ---------- bloques ---------- */
section{padding:clamp(48px,7vw,86px) 0}
section.claro{background:var(--blanco)}
section.oscuro{background:var(--verde);color:var(--hueso)}
section.oscuro h1,section.oscuro h2,section.oscuro h3{color:var(--hueso)}
section.oscuro a{color:var(--hueso)}

.entradilla{
  font-size:clamp(1.08rem,2.1vw,1.3rem);
  color:var(--tinta-suave);font-weight:300;max-width:62ch;
}
section.oscuro .entradilla{color:#D9D3C6}

.sobre{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin:0 0 1.1em;font-weight:400;
}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero img{width:100%;height:auto;border-radius:3px;display:block}

.rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.5vw,42px)}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}

.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:3px;padding:clamp(22px,3vw,32px);
}
.tarjeta img{width:100%;height:auto;border-radius:2px;margin-bottom:18px;display:block}
.tarjeta h3{margin-top:0}

/* ---------- botones ---------- */
.boton{
  display:inline-block;background:var(--verde);color:var(--hueso)!important;
  padding:13px 30px;border-radius:2px;text-decoration:none;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--verde);transition:.18s;
}
.boton:hover{background:var(--verde-2);border-color:var(--verde-2);color:var(--hueso)!important}
.boton.linea{background:transparent;color:var(--verde)!important;border-color:var(--salvia)}
.boton.linea:hover{background:var(--hueso-2);color:var(--verde)!important}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
caption{text-align:left;font-size:.84rem;color:var(--tinta-suave);padding-bottom:10px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
th{
  font-weight:400;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--verde);background:var(--hueso-2);
}
td.num{white-space:nowrap}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- lista de ingredientes ---------- */
.ingrediente{
  border-top:1px solid var(--linea);padding:26px 0;
  display:grid;grid-template-columns:230px 1fr;gap:clamp(18px,3vw,40px);
}
.ingrediente:last-child{border-bottom:1px solid var(--linea)}
.ingrediente h3{margin:0 0 .25em;font-size:1.3rem}
.ingrediente .papel{
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--oro);
}
.ingrediente p:last-child{margin-bottom:0}

/* ---------- avisos ---------- */
.nota{
  background:var(--hueso-2);border-left:3px solid var(--salvia);
  padding:20px 24px;margin:1.8em 0;font-size:.95rem;
}
.nota p:last-child{margin-bottom:0}
.nota strong{color:var(--verde)}

.legal{font-size:.86rem;color:var(--tinta-suave);line-height:1.65}

ul.limpia{list-style:none;padding:0;margin:0 0 1.2em}
ul.limpia li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--linea)}
ul.limpia li:before{
  content:"";position:absolute;left:0;top:19px;
  width:9px;height:1px;background:var(--oro);
}

dl.datos{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
dl.datos dt{
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--verde);
  padding:11px 22px 11px 0;border-bottom:1px solid var(--linea);white-space:nowrap;
}
dl.datos dd{margin:0;padding:11px 0;border-bottom:1px solid var(--linea)}

/* ---------- preguntas ---------- */
details.faq{border-bottom:1px solid var(--linea);padding:4px 0}
details.faq summary{
  cursor:pointer;padding:17px 0;list-style:none;
  font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--verde);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";color:var(--oro);font-size:1.4rem;flex-shrink:0}
details.faq[open] summary:after{content:"–"}
details.faq .cuerpo{padding:0 0 20px}
details.faq .cuerpo p:last-child{margin-bottom:0}

/* ---------- pie ---------- */
footer.sitio{
  background:var(--verde);color:#CFC9BC;
  padding:clamp(46px,6vw,70px) 0 34px;font-size:.9rem;
}
footer.sitio a{color:#CFC9BC;text-decoration-color:var(--salvia)}
footer.sitio a:hover{color:var(--hueso)}
footer.sitio h4{
  color:var(--hueso);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:'Jost',sans-serif;font-weight:400;margin:0 0 14px;
}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.pie-rejilla ul{list-style:none;padding:0;margin:0}
.pie-rejilla li{padding:4px 0}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;
  font-size:.8rem;color:#A8A294;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero,.rejilla-2,.rejilla-3,.pie-rejilla{grid-template-columns:1fr}
  .hero img{max-width:400px;margin:0 auto}
  .ingrediente{grid-template-columns:1fr;gap:10px}
  dl.datos{grid-template-columns:1fr}
  dl.datos dt{border-bottom:0;padding-bottom:0}
  dl.datos dd{padding-top:2px}
  .barra{padding:12px 16px}
  .contenedor{padding:0 16px}
  nav.sitio a{padding:6px 8px;font-size:.78rem}
}

@media print{
  header.sitio,footer.sitio,nav.sitio{display:none}
  body{background:#fff}
}