/* ==========================================================================
   Quattro Fratelli — Olio di famiglia
   Paleta de la identidad: papel de etiqueta, verde de tinta, negro de logotipo.
   ========================================================================== */

:root{
  /* Paleta tomada de la identidad: papel de etiqueta, verde de tinta,
     negro del logotipo. Sin dorado: el logo nuevo no lo lleva. */
  --paper:        #F2F0EA;
  --paper-warm:   #E8E5DB;
  --card:         #FBFAF6;
  --ink:          #1B1B16;
  --ink-deep:     #121210;
  --olive:        #4A4B29;
  --olive-deep:   #34351C;
  --olive-mid:    #6B6C41;
  --body:         #55564A;
  --accent:       #4A4B29;
  --accent-soft:  #ADAE86;
  --line:         rgba(27,27,22,.16);
  --line-light:   rgba(242,240,234,.20);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --sec:  clamp(4.5rem, 11vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--olive); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.9rem;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:720px; }
.section{ padding-block:var(--sec); }
.section--cream{ background:var(--paper-warm); }
.section--dark{ background:var(--ink); color:var(--paper); }

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.1rem;
}
.eyebrow--light{ color:#ADAE86; }

.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem);
  line-height:1.04; letter-spacing:-.022em;
  color:var(--olive); margin:0 0 1.4rem;
}
.h2--light{ color:var(--paper); }
.h2 em{ font-style:italic; color:var(--olive-mid); }
.h2--light em{ color:#ADAE86; }

.lead{
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);
  line-height:1.62; color:var(--body); max-width:56ch; margin:0;
}
.lead--light{ color:rgba(242,240,234,.78); }

.head-center{ text-align:center; max-width:660px; margin:0 auto clamp(3rem,6vw,4.5rem); }
.head-center .lead{ margin-inline:auto; }

.prose p{ margin:0 0 1.3em; }
.prose .lead{ margin-bottom:1.6em; color:var(--olive); max-width:none; }
.prose em{ font-family:var(--serif); font-size:1.12em; }
.signature{
  font-family:var(--serif); font-style:italic; font-size:1.35rem;
  color:var(--olive-mid); margin-top:2.2rem !important;
}

.note{
  text-align:center; font-size:.92rem; color:var(--body);
  max-width:48ch; margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  font-style:italic;
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.82rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2rem; border:1px solid var(--olive);
  background:var(--olive); color:var(--paper);
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ background:var(--olive-deep); border-color:var(--olive-deep); }
.btn--outline{ background:transparent; color:var(--olive); }
.btn--outline:hover{ background:var(--olive); color:var(--paper); }
.btn--light{ background:var(--paper); color:var(--olive); border-color:var(--paper); }
.btn--light:hover{ background:#fff; border-color:#fff; }
.btn--sm{ padding:.7rem 1.35rem; font-size:.72rem; }
.btn--full{ width:100%; }

.link-arrow{
  font-size:.86rem; letter-spacing:.06em; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:.2rem;
  transition:border-color .3s var(--ease);
}
.link-arrow::after{ content:" →"; }
.link-arrow:hover{ border-color:currentColor; }
.link-arrow--light{ color:var(--paper); border-color:var(--line-light); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block:1.1rem;
}
.nav__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.nav__brand{
  display:flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-family:var(--serif); font-size:1.3rem; letter-spacing:.01em;
  text-decoration:none; color:var(--paper); margin-right:auto;
  transition:color .4s var(--ease);
}
.nav__links{ display:flex; gap:1.7rem; }
.nav__links a{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; color:var(--paper); opacity:.82;
  transition:opacity .25s var(--ease), color .4s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav .btn{ background:transparent; border-color:var(--line-light); color:var(--paper); }
.nav .btn:hover{ background:var(--paper); border-color:var(--paper); color:var(--olive); }

.nav.is-stuck{
  background:rgba(242,240,234,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.7rem;
}
.nav.is-stuck .nav__brand,
.nav.is-stuck .nav__links a{ color:var(--olive); }
.nav.is-stuck .btn{ border-color:var(--olive); color:var(--olive); }
.nav.is-stuck .btn:hover{ background:var(--olive); color:var(--paper); }

.cypress{ width:31px; height:20px; fill:currentColor; flex:none; }
.cypress--lg{ width:54px; height:35px; }

@media (max-width:1040px){
  .nav__links{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-start;
  padding:clamp(7.5rem,17vh,11rem) 0 clamp(3rem,7vh,5rem);
  background:linear-gradient(160deg,#3D3E26,#121210 72%);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:46% 64%;
  animation:heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:0; } to{ transform:none; opacity:1; } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(18,18,15,.86) 0%,
      rgba(18,18,15,.62) 26%,
      rgba(18,18,15,.34) 48%,
      rgba(18,18,15,.30) 68%,
      rgba(18,18,15,.74) 100%),
    rgba(18,18,15,.10);
}
.hero__content{
  position:relative; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
  color:var(--paper); text-align:center;
}
.hero__logo{ margin:0 0 1.8rem; }
.hero__logo img{
  width:clamp(230px,34vw,400px); margin-inline:auto;
  /* fuerza a blanco cualquier versión del logotipo que nos deis */
  filter:brightness(0) invert(1) opacity(.96);
}
/* rótulo compuesto, mientras no exista el archivo del logotipo */
.hero__logo-fallback{ display:none; }
.hero__logo.no-img .hero__logo-fallback{ display:block; }
.hero__logo-name{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem,1.8rem + 5.7vw,5.4rem); line-height:.95; letter-spacing:-.028em;
}
.hero__logo-sub{
  display:block; margin-top:1.1rem;
  font-family:var(--sans); font-size:.78rem; font-weight:300;
  letter-spacing:.42em; text-transform:uppercase; color:#ADAE86;
}
.hero__claim{
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .95vw,1.65rem);
  font-style:italic; line-height:1.5; color:rgba(242,240,234,.9);
  max-width:36ch; margin:0 auto 2.6rem; text-wrap:balance;
}

/* el salto duro compone bien en ancho, pero en móvil deja huérfanos */
@media (max-width:700px){ .only-wide{ display:none; } }

/* en pantallas estrechas el reclamo del hero cabe en una línea si se aprieta */
@media (max-width:430px){
  .hero__actions .btn{ font-size:.74rem; letter-spacing:.09em; padding:1rem 1.3rem; }
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:center;
}
.hero__badge{
  position:absolute; left:50%; bottom:clamp(1.4rem,4vh,2.75rem);
  transform:translateX(-50%); margin:0; z-index:2;
  display:inline-flex; align-items:flex-start; justify-content:center; gap:.6rem;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,234,.82); text-align:center; max-width:min(72ch,88vw); width:max-content;
}
.dot{
  width:6px; height:6px; margin-top:.45em; flex:none;
  border-radius:50%; background:#ADAE86;
  box-shadow:0 0 0 0 rgba(173,174,134,.6); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(173,174,134,0); } 100%{ box-shadow:0 0 0 0 rgba(173,174,134,0); } }
@media (prefers-reduced-motion:reduce){
  .dot{ animation:none; }
  .hero__media img{ animation:none; }
}

/* ---------- tira de datos ---------- */
.strip{ background:var(--ink); color:var(--paper); }
.strip__list{
  list-style:none; margin:0 auto; padding:2.4rem var(--pad);
  max-width:var(--wrap);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center;
}
.strip__list li{ display:flex; flex-direction:column; gap:.25rem; }
.strip__list strong{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem);
  color:#C9CAA4;
}
.strip__list span{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,234,.6);
}
@media (max-width:640px){ .strip__list{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; } }

/* ---------- split (historia) ---------- */
.wrap--split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.split__aside{ position:sticky; top:7rem; }
@media (max-width:900px){
  .wrap--split{ grid-template-columns:1fr; }
  .split__aside{ position:static; }
}

/* ---------- grid de 3 (el aceite) ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3.5vw,3rem); }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }
.card-dark{ border-top:1px solid var(--line-light); padding-top:1.6rem; }
.card-dark__num{
  font-family:var(--serif); font-size:1rem; color:#ADAE86; letter-spacing:.1em;
}
.card-dark h3{
  font-family:var(--serif); font-weight:400; font-size:1.6rem;
  margin:.6rem 0 .8rem; color:var(--paper);
}
.card-dark p{ margin:0; color:rgba(242,240,234,.74); font-size:.98rem; }

/* ---------- productos ---------- */
.products{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.5rem); align-items:stretch;
}
@media (max-width:800px){ .products{ grid-template-columns:1fr; } }

.product{
  position:relative; background:var(--paper); border:1px solid var(--line);
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3rem);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover{ transform:translateY(-4px); box-shadow:0 18px 50px -28px rgba(27,27,22,.4); }
.product--feature{ background:#fff; border-color:var(--olive-mid); }
.product__flag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--accent); color:var(--paper);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.45rem 1.1rem; margin:0; white-space:nowrap;
}
.product__figure{ margin-bottom:2rem; }
.product__figure svg{
  height:clamp(210px,26vw,290px); width:auto;
  filter:drop-shadow(0 22px 26px rgba(27,27,22,.22));
}
.product__body{ display:flex; flex-direction:column; align-items:center; flex:1; }
.product__size{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .5rem;
}
.product__name{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem);
  color:var(--olive); margin:0 0 .8rem; line-height:1.15; letter-spacing:-.012em;
}
.product__desc{ color:var(--body); font-size:.98rem; margin:0 0 1.6rem; max-width:32ch; }
.product__price{
  font-family:var(--serif); font-size:1.85rem; color:var(--olive);
  margin:auto 0 1.8rem; display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.product__price small{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--body);
}

/* ---------- timeline ---------- */
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.5rem);
  counter-reset:step;
}
@media (max-width:900px){ .timeline{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .timeline{ grid-template-columns:1fr; } }
.timeline li{ position:relative; padding-top:2.2rem; border-top:1px solid var(--line); }
.timeline li::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-.85rem; left:0;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--ink); color:var(--paper);
  font-size:.75rem; display:grid; place-items:center;
}
.timeline__when{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .5rem;
}
.timeline h3{
  font-family:var(--serif); font-weight:400; font-size:1.5rem;
  color:var(--olive); margin:0 0 .6rem;
}
.timeline p:last-child{ margin:0; color:var(--body); font-size:.96rem; }

/* ---------- formulario ---------- */
.form{ display:flex; flex-direction:column; gap:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field-row{ display:grid; grid-template-columns:2fr 1fr; gap:1.3rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field label{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,234,.7);
}
.field .opt{ text-transform:none; letter-spacing:.02em; opacity:.6; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--paper);
  background:rgba(242,240,234,.06);
  border:1px solid var(--line-light); border-radius:0;
  padding:.9rem 1rem; width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(242,240,234,.6) 50%),linear-gradient(135deg,rgba(242,240,234,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.35rem),calc(100% - 15px) calc(1.35rem);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field select option{ color:var(--ink); }
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:#ADAE86; background:rgba(242,240,234,.1);
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#D98A6A; }

.check{ display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; color:rgba(242,240,234,.72); cursor:pointer; }
.check input{ margin-top:.35rem; accent-color:#ADAE86; flex:none; width:1rem; height:1rem; }
.check a{ color:#ADAE86; }

.form__msg{ margin:.2rem 0 0; font-size:.92rem; min-height:1.4em; }
.form__msg.is-ok{ color:#ADAE86; }
.form__msg.is-err{ color:#E8A78A; }

/* ---------- faq ---------- */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.15rem,1rem + .5vw,1.4rem); color:var(--olive);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1px solid var(--olive-mid); border-bottom:1px solid var(--olive-mid);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ margin:0 0 1.5rem; color:var(--body); max-width:62ch; }

/* ---------- footer ---------- */
.footer{ background:var(--ink-deep); color:rgba(242,240,234,.72); padding-top:clamp(3.5rem,7vw,5.5rem); }
.footer__inner{
  display:grid; grid-template-columns:1fr auto; gap:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
@media (max-width:700px){ .footer__inner{ grid-template-columns:1fr; } }
.footer__brand .cypress{ color:#ADAE86; margin-bottom:1rem; }
.footer__name{ font-family:var(--serif); font-size:1.8rem; color:var(--paper); margin:0; }
.footer__sub{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; margin:.5rem 0 0; }
.footer__cols{ display:flex; gap:clamp(2.5rem,6vw,5rem); }
.footer__cols h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:#ADAE86; margin:0 0 1rem; font-weight:400;
}
.footer__cols p{ margin:0 0 .55rem; font-size:.94rem; }
.footer__cols a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s var(--ease); }
.footer__cols a:hover{ border-color:currentColor; }
.footer__copy{
  border-top:1px solid var(--line-light); margin:0;
  padding:1.6rem var(--pad); text-align:center;
  font-size:.78rem; letter-spacing:.06em; color:rgba(242,240,234,.5);
}

/* ---------- reveal al hacer scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- impresión ---------- */
@media print{
  .nav,.hero__actions,.form,.footer{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- páginas legales ---------- */
.legal{ padding:clamp(7rem,14vh,10rem) 0 var(--sec); background:var(--paper); }
.legal .wrap{ max-width:760px; }
.legal h1{
  font-family:var(--serif); font-weight:400; color:var(--olive);
  font-size:clamp(2rem,1.5rem + 2vw,3rem); line-height:1.1; margin:0 0 2rem;
}
.legal h2{
  font-family:var(--serif); font-weight:400; color:var(--olive);
  font-size:1.5rem; margin:2.6rem 0 .8rem;
}
.legal p,.legal li{ color:var(--body); }
.legal ul{ padding-left:1.2rem; }
.legal a{ color:var(--olive); }
.todo{
  background:#FBF3DE; border-left:3px solid var(--accent);
  padding:1.1rem 1.3rem; margin:0 0 2.5rem; font-size:.93rem; color:#6B5B2A;
}
.todo strong{ color:#4A3E18; }

/* la botella de 500 ml se dibuja a menor escala para que el tamaño
   comunique la capacidad de un vistazo */
.product__figure--sm svg{ height:clamp(175px,21.5vw,240px); }

/* ---------- banda editorial del olivar ---------- */
.feature{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; gap:2.5rem; }
}
.feature__media{ margin:0; position:relative; }
.feature__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:52% 50%;
  box-shadow:0 30px 70px -35px rgba(27,27,22,.55);
}
.feature__media::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(242,240,234,.35); margin:.9rem; pointer-events:none;
}
.feature__text .h2{ margin-bottom:1.6rem; }
.feature__text p{ color:var(--body); margin:0 0 1.2em; max-width:46ch; }
.pull{
  margin:2.2rem 0 0; padding:0 0 0 1.4rem;
  border-left:2px solid var(--accent);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem); line-height:1.45;
  color:var(--olive); max-width:34ch;
}

/* ==========================================================================
   Octubre 2026: secciones nuevas (una sola botella, aceite en dos columnas)
   ========================================================================== */

/* honeypot del formulario: invisible para personas */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- el aceite: titular a la izquierda, ficha a la derecha ---------- */
.oil{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start;
}
.oil__head .lead{ max-width:38ch; }
.oil__list{ margin:0; display:flex; flex-direction:column; }
.oil__list .card-dark{
  display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:1.5rem;
  padding:1.6rem 0; border-top:1px solid var(--line-light);
}
.oil__list .card-dark:last-child{ border-bottom:1px solid var(--line-light); }
.oil__list dt{ font-family:var(--serif); font-size:1.5rem; line-height:1.2; color:var(--paper); }
.oil__list dd{ margin:0; color:rgba(242,240,234,.74); font-size:1rem; max-width:52ch; }
@media (max-width:900px){
  .oil{ grid-template-columns:1fr; }
  .oil__list .card-dark{ grid-template-columns:1fr; gap:.5rem; }
}

/* ---------- la botella ---------- */
.bottle{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.bottle__figure{
  background:var(--paper-warm); display:grid; place-items:center;
  aspect-ratio:4/5; padding:clamp(2rem,5vw,4rem);
}
.bottle__figure svg{
  height:min(100%, 440px); width:auto;
  filter:drop-shadow(0 26px 30px rgba(27,27,22,.24));
  transition:transform .8s var(--ease);
}
.bottle:hover .bottle__figure svg{ transform:translateY(-6px) rotate(-1.5deg); }
.bottle__body .lead{ margin-bottom:2rem; }
.bottle__facts{
  list-style:none; margin:0 0 2.2rem; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem 2rem;
}
.bottle__facts li{ font-family:var(--serif); font-size:1.25rem; color:var(--olive); line-height:1.25; }
.bottle__facts span{
  display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--body); margin-bottom:.3rem;
}
.bottle .product__price{ align-items:flex-start; margin:0 0 1.6rem; }
.note--left{ text-align:left; margin:1.2rem 0 0; max-width:44ch; }
@media (max-width:860px){
  .bottle{ grid-template-columns:1fr; }
  .bottle__figure{ aspect-ratio:auto; height:360px; }
}
@media (prefers-reduced-motion:reduce){ .bottle:hover .bottle__figure svg{ transform:none; } }