/* =========================================================================
   LAS OCHO — Chozas Carrascal
   Landing basada en Figma (node 15:92), refactor RESPONSIVE.
   Sin escalado: el cuerpo de texto es siempre 13px exactos.
   Tipografías: Cormorant, Inter, Archivo.
   ========================================================================= */

.lo-page{
  --gold:#b8924a;
  --gold-d:#886219;
  --gray:#6a6a6a;
  --ink:#0d0d0d;
  --ink2:#141312;
  --ink3:#0d0b08;
  --bg:#f9f7f5;
  --pad: clamp(22px, 8vw, 180px);   /* margen lateral fluido */
  --gap: clamp(60px, 9vw, 130px);   /* aire vertical entre secciones */

  width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lo-page *{box-sizing:border-box;margin:0;}

/* Texto de cuerpo: 13px FIJOS. :where() = especificidad 0 para no pisar clases específicas. */
:where(.lo-page) p{font-size:13px;line-height:19.64px;letter-spacing:-0.14px;color:var(--gray);}

/* ---- Imagen + placeholder -------------------------------------------- */
.lo-imgbox{width:100%;height:100%;position:relative;overflow:hidden;}
.lo-imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
.lo-ph{
  width:100%;height:100%;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:12px;
  background:repeating-linear-gradient(45deg,#e9e4dd 0 11px,#e2dcd4 11px 22px);
  border:1px dashed #c9bba8;color:#8c8275;
}
.lo-ph-l{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.lo-ph-d{font-size:15px;font-weight:600;color:#6f6658;letter-spacing:.02em;}

/* ---- Utilidades de tipografía ---------------------------------------- */
.lo-sec{position:relative;width:100%;}
.lo-inner{padding-inline:var(--pad);padding-block:var(--gap);}
.lo-overline{
  font-family:'Archivo',sans-serif;font-weight:400;font-size:13px;color:var(--gold);
  letter-spacing:3.52px;text-transform:uppercase;line-height:1.3;
}
.lo-h2{
  font-weight:500;font-size:clamp(22px,2.4vw,27px);color:var(--ink2);
  text-transform:uppercase;line-height:1.25;
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.lo-hero{display:flex;align-items:center;min-height:90vh;min-height:90svh;overflow:hidden;}
.lo-hero__bg{position:absolute;inset:0;z-index:0;}
/* Fondo desktop/móvil (imagen ACF distinta en móvil) */
.lo-bg-d,.lo-bg-m{position:absolute;inset:0;}
.lo-bg-m{display:none;}
@media (max-width:768px){
  /* Hero móvil: imagen 55% (ancho completo) arriba + contenido 45%, todo dentro de 100vh */
  .lo-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;height:100vh;height:100svh;overflow:hidden;}
  .lo-hero__grad{display:none;}
  .lo-hero__bg{position:static;flex:1 1 55%;min-height:0;width:100%;overflow:hidden;}
  .lo-bg-d{display:none;}
  .lo-bg-m{position:static;display:block;width:100%;height:100%;}
  .lo-bg-m .lo-imgbox,.lo-bg-m .lo-imgbox img,.lo-bg-m .lo-ph{width:100%;height:100%;}
  .lo-hero__inner{position:static;flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;margin:0;padding:10px var(--pad) 14px;text-align:center;}
  .lo-hero__overline{font-size:11px;}
  .lo-hero__title{margin-top:2px;font-size:clamp(26px,7.5vw,38px);line-height:1.02;}
  .lo-hero__desc{margin-top:6px;max-width:560px;margin-inline:auto;}
  .lo-hero__desc p{font-size:12px;line-height:15px;}
  .lo-hero__desc p+p{margin-top:5px;}
  /* números más comprimidos: cluster estrecho y centrado */
  .lo-stats{margin-top:10px;justify-content:center;gap:8px;max-width:330px;margin-inline:auto;}
  /* botones: lado a lado si caben, se apilan en pantallas estrechas */
  .lo-btns{margin-top:10px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;}
  .lo-btn{flex:1 1 140px;min-width:140px;max-width:220px;padding:0 14px;white-space:nowrap;}
}
.lo-hero__grad{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(67.89deg,
    rgba(255,255,255,.86) 12%,
    rgba(255,255,255,.72) 30%,
    rgba(255,255,255,.06) 46%,
    rgba(255,255,255,0) 100%);
}
.lo-hero__inner{position:relative;z-index:2;padding-inline:var(--pad);padding-block:60px;max-width:760px;}
.lo-hero__overline{font-size:14px;color:var(--gold);text-transform:uppercase;letter-spacing:-0.14px;}
.lo-hero__title{
  font-family:'Cormorant',serif;font-weight:700;font-size:clamp(34px,4vw,48px);
  color:var(--ink);text-transform:uppercase;letter-spacing:-0.561px;line-height:1.05;margin-top:10px;
}
.lo-hero__desc{max-width:430px;margin-top:24px;}
.lo-hero__desc p+p{margin-top:12px;}

/* stats */
.lo-stats{display:flex;flex-wrap:nowrap;gap:clamp(14px,3vw,44px);margin-top:42px;}
.lo-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;}
.lo-stat__num{font-family:'Cormorant',serif;font-weight:500;font-size:36px;color:var(--ink3);line-height:1;}
.lo-stat__line{width:48px;height:1px;background:var(--gold);opacity:.6;margin:14px 0 12px;}
.lo-stat__label{font-size:13px;font-weight:500;color:var(--gold-d);line-height:14px;letter-spacing:-0.14px;}

/* buttons */
.lo-btns{display:flex;flex-wrap:wrap;gap:24px;margin-top:42px;}
.lo-btn{
  width:179px;height:41px;display:flex;align-items:center;justify-content:center;
  border:1px solid #000;background:transparent;
  font-size:14px;color:var(--ink3);text-transform:uppercase;letter-spacing:-0.14px;
  text-decoration:none;cursor:pointer;
}
.lo-btn:hover{background:#0d0d0d;color:#fff;border-color:#0d0d0d;transition:.25s;}

/* =========================================================================
   2. ES PAISAJE
   ========================================================================= */
.lo-paisaje__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(32px,5vw,90px);align-items:center;
}
.lo-paisaje__text{max-width:440px;}
.lo-paisaje__text .lo-h2{margin-top:8px;}
.lo-paisaje__lead{margin-top:18px;}
.lo-paisaje__body{margin-top:16px;}
.lo-paisaje__body p+p{margin-top:14px;}
.lo-paisaje__italic{margin-top:22px;font-style:italic;color:var(--gold);}
.lo-paisaje__imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.lo-paisaje__img{aspect-ratio:491/542;}

/* =========================================================================
   3. PACIENCIA
   ========================================================================= */
.lo-paciencia__inner{text-align:center;padding-top:0;}
.lo-paciencia__h2{
  font-weight:500;font-size:clamp(22px,2.4vw,27px);color:var(--ink);
  text-transform:uppercase;line-height:1.25;margin-bottom:20px;
}
.lo-paciencia__p{max-width:1040px;margin:0 auto;}
.lo-paciencia__p p+p{margin-top:10px;}

/* =========================================================================
   4. CITA (barricas)
   ========================================================================= */
.lo-cita{position:relative;min-height:clamp(360px,42vw,586px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.lo-cita__bg{position:absolute;inset:0;}
.lo-cita__bg .lo-imgbox img{object-position:bottom;}
.lo-cita__overlay{position:absolute;inset:0;background:rgba(0,0,0,.20);}
.lo-cita__quote{
  position:relative;z-index:1;max-width:none;padding-inline:24px;text-align:center;
  font-style:italic;font-weight:300;font-size:20px;white-space:nowrap;
  color:rgba(255,255,255,.91);line-height:1.4;
}
@media (max-width:1100px){.lo-cita__quote{white-space:normal;max-width:680px;}}
.lo-cita__line{position:relative;z-index:1;width:239px;max-width:62%;height:1px;background:rgba(255,255,255,.5);margin-top:22px;}

/* =========================================================================
   6. OCHO VOCES
   ========================================================================= */
.lo-voces__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,84px);align-items:center;
}
.lo-voces__text{max-width:560px;}
.lo-voces__overline{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:13px;color:var(--ink2);
  letter-spacing:3.52px;text-transform:uppercase;opacity:.8;
}
.lo-voces__h2{
  margin-top:8px;font-weight:500;font-size:clamp(22px,2.4vw,27px);color:var(--ink);
  text-transform:uppercase;letter-spacing:-0.561px;line-height:1.2;
}
.lo-voces__p{margin-top:22px;font-size:13px;line-height:19.64px;letter-spacing:-0.14px;color:var(--gray);}
.lo-voces__p .sp{display:block;height:19.64px;}
.lo-voces__italic{margin-top:22px;font-style:italic;color:var(--gold);}
.lo-voces__link{position:relative;display:inline-block;margin-top:28px;padding-bottom:7px;font-size:14px;color:var(--ink3);text-transform:uppercase;letter-spacing:-0.14px;text-decoration:none;}
/* subrayado animado en hover (como el menú del hero) */
.lo-voces__link::after,.lo-cata__link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s ease;}
.lo-voces__link:hover::after,.lo-cata__link:hover::after{width:100%;}
.lo-voces__img{aspect-ratio:708/514;}

/* =========================================================================
   7. LA CATA
   ========================================================================= */
/* imagen = 50% de la sección (a sangre, izquierda); notas centradas sobre la imagen */
.lo-cata{padding-bottom:var(--gap);}
.lo-cata__inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.lo-cata__card{position:relative;overflow:hidden;min-height:clamp(420px,46vw,600px);}
.lo-cata__cardimg{position:absolute;inset:0;}
.lo-cata__cardgrad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(89.66deg,rgba(13,11,8,.64) 19%,rgba(13,13,13,.48) 50%,rgba(69,51,21,.49) 82%);
}
.lo-cata__notes{position:absolute;inset:0;}
.lo-cata__notes::before{content:"";position:absolute;left:50%;top:16%;bottom:16%;width:1px;background:rgba(255,255,255,.25);}
.lo-cata__notes::after{content:"";position:absolute;top:50%;left:14%;right:14%;height:1px;background:rgba(255,255,255,.25);}
/* notas alineadas por fila (Vista=Nariz, Boca=Final) y agrupadas hacia el centro */
.lo-q{position:absolute;color:#fff;width:clamp(150px,18.5%,185px);}
.lo-q:nth-child(1){left:28%;top:27%;}
.lo-q:nth-child(2){left:58%;top:27%;}
.lo-q:nth-child(3){left:28%;top:58%;}
.lo-q:nth-child(4){left:58%;top:58%;}
.lo-q__t{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(22px,3vw,36px);line-height:1;color:#fff;}
.lo-q__l{width:55px;height:1px;background:rgba(255,255,255,.7);margin:12px 0 10px;}
.lo-q__d{font-size:clamp(11px,1.05vw,13px);font-weight:500;line-height:1.3;letter-spacing:-0.14px;color:#fff;}
.lo-cata__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,7vw,100px) var(--pad) clamp(48px,7vw,100px) clamp(28px,4vw,72px);}
.lo-cata__overline{
  font-family:'Archivo',sans-serif;font-weight:400;font-size:13px;color:var(--gold);
  letter-spacing:3.52px;text-transform:uppercase;
}
.lo-cata__h2{margin-top:10px;font-weight:500;font-size:20px;white-space:nowrap;color:var(--ink2);text-transform:uppercase;line-height:1.3;}
.lo-cata__p{margin-top:18px;max-width:520px;}
.lo-cata__link{position:relative;display:inline-block;align-self:flex-start;margin-top:28px;padding-bottom:7px;font-size:14px;color:var(--ink3);text-transform:uppercase;letter-spacing:-0.14px;text-decoration:none;}

/* =========================================================================
   9. RITUAL DE SERVIR
   ========================================================================= */
.lo-ritual__inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.lo-ritual__panel{
  background:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vw,110px) clamp(28px,4vw,80px) clamp(48px,7vw,110px) var(--pad);
}
.lo-ritual__h2{font-weight:500;font-size:clamp(22px,2.4vw,27px);color:var(--ink);text-transform:uppercase;letter-spacing:-0.561px;line-height:1.2;}
.lo-ritual__p{margin-top:24px;max-width:480px;}
.lo-ritual__p p+p{margin-top:14px;}
.lo-ritual__italic{margin-top:24px;font-style:italic;color:var(--gray);max-width:400px;}
.lo-ritual__img{position:relative;overflow:hidden;min-height:320px;}

/* =========================================================================
   10. HISTORIA FAMILIAR
   ========================================================================= */
.lo-historia{position:relative;min-height:75vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lo-historia__bg{position:absolute;inset:0;}
.lo-historia__overlay{position:absolute;inset:0;background:rgba(0,0,0,.22);}
.lo-historia__inner{position:relative;z-index:1;text-align:center;padding-inline:var(--pad);text-shadow:0 1px 18px rgba(0,0,0,.55);}
.lo-historia__overline{font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:-0.14px;}
.lo-historia__h2{
  margin-top:14px;font-weight:500;font-size:clamp(34px,5vw,57px);color:#fff;
  text-transform:uppercase;letter-spacing:-2.337px;line-height:1.02;
}
.lo-historia__btn{
  display:inline-flex;align-items:center;justify-content:center;margin-top:28px;
  width:117.52px;height:40.91px;background:#0d0d0d;color:#fff;
  font-size:14px;text-transform:uppercase;letter-spacing:-0.14px;text-decoration:none;
}

/* =========================================================================
   12. DESCUBRE CHOZAS
   ========================================================================= */
.lo-descubre__inner{
  position:relative;max-width:1336px;margin:0 auto;
  min-height:clamp(220px,22vw,330px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lo-descubre__bg{position:absolute;inset:0;}
.lo-descubre__overlay{position:absolute;inset:0;background:rgba(0,0,0,.28);}
.lo-descubre__group{position:relative;z-index:1;text-align:center;color:#fff;text-transform:uppercase;padding:28px 24px;text-shadow:0 1px 18px rgba(0,0,0,.55);}
.lo-descubre__s1{display:block;max-width:481px;margin:0 auto;font-weight:300;font-size:12px;line-height:1.5;letter-spacing:-0.14px;}
.lo-descubre__h2{display:block;max-width:806px;margin:16px auto 0;font-weight:300;font-size:clamp(17px,2vw,22px);line-height:1.4;letter-spacing:2px;}
.lo-descubre__s2{position:relative;display:inline-block;margin:14px auto 0;font-weight:400;font-size:12px;letter-spacing:-0.14px;}
.lo-descubre__s2::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .4s ease;}
.lo-descubre__s2:hover::after{width:100%;}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .lo-paisaje__inner,
  .lo-voces__inner,
  .lo-cata__inner{grid-template-columns:1fr;gap:36px;}
  .lo-paisaje__text,
  .lo-voces__text,
  .lo-cata__text{max-width:none;}
  .lo-ritual__inner{grid-template-columns:1fr;}
  .lo-ritual__panel{padding:clamp(40px,8vw,64px) var(--pad);}
  .lo-ritual__img{aspect-ratio:4/3;min-height:0;}
  /* matriz de cata en móvil: rejilla 2x2 centrada (como escritorio) */
  .lo-cata__notes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
  .lo-q{position:static;width:auto;left:auto;top:auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,4vw,30px);}
}
@media (max-width:560px){
  .lo-stats{gap:8px;margin-top:10px;max-width:330px;margin-inline:auto;}
  .lo-stat__num{font-size:24px;}
  .lo-stat__line{width:30px;margin:5px 0 4px;}
  .lo-stat__label{font-size:10px;line-height:11px;}
  .lo-paisaje__imgs{gap:10px;}
  .lo-cata__h2{white-space:normal;}
}

/* === Imágenes originales: sin overlays/gradientes (legibilidad vía text-shadow) === */
.lo-hero__grad,.lo-cita__overlay,.lo-cata__cardgrad,.lo-historia__overlay,.lo-descubre__overlay{background:none !important;}
.lo-cita__quote,.lo-historia__inner,.lo-descubre__group{text-shadow:0 2px 16px rgba(0,0,0,.8);}
.lo-q{text-shadow:0 1px 10px rgba(0,0,0,.9);}