/* =========================================================================
   LA FINCA — Chozas Carrascal
   Página editorial. Maquetación fluida y responsive (sin lienzo 1920px).
   Tipografía fiel al Figma (Cormorant Garamond + Inter), escalada con clamp().
   ========================================================================= */

.lf-page{
  --paper:#f9f7f5;
  --ink:#11100e;
  --gold:#a98d5e;
  --body:#2d2a25;
  --muted:#777067;
  --line:rgba(17,16,14,.14);
  background:var(--paper);
  color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-x:hidden;
}

/* ---- Contenedor y ritmo ---------------------------------------------- */
.lf-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.lf-sec{padding-block:clamp(46px,7vw,96px);}
.lf-sec:first-child{padding-top:clamp(104px,15vh,180px);} /* deja pasar el nav */

/* ---- Tipografía base (reset defensivo frente a estilos globales) ------ */
.lf-overline{
  display:inline-flex;align-items:center;gap:16px;margin:0;
  font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)!important;
}
.lf-overline::before{content:"";width:44px;height:1px;background:currentColor;opacity:.7;flex:0 0 auto;}
.lf-overline--center{justify-content:center;}
.lf-overline--center::after{content:"";width:44px;height:1px;background:currentColor;opacity:.7;flex:0 0 auto;}
.lf-display{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;text-transform:none!important;
  color:var(--ink);font-size:clamp(38px,6vw,74px);line-height:1.04;letter-spacing:-0.02em;margin:0;
}
.lf-h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;text-transform:none!important;
  color:var(--ink);font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-0.02em;margin:0;
}
:where(.lf-page) p{font-size:clamp(14px,1.2vw,16px);line-height:1.85;color:var(--body);margin:0;}

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

/* ======================================================================= */
/* 1. INTRO                                                                 */
/* ======================================================================= */
.lf-intro{min-height:calc(100svh - 110px);display:flex;align-items:center;}
.lf-intro__inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:940px;width:100%;}
.lf-intro__title{margin-top:clamp(18px,2.4vw,28px);width:100%;text-wrap:balance;}
.lf-intro__lead{margin-top:clamp(20px,2.6vw,30px);max-width:600px;font-weight:300;font-size:clamp(14px,1.3vw,16px);line-height:2;color:#26231f;}
.lf-cue{margin-top:clamp(30px,4vw,54px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);position:relative;padding-bottom:54px;}
.lf-cue::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:44px;background:var(--line);}

/* ======================================================================= */
/* 2. NAV INTERNA                                                           */
/* ======================================================================= */
.lf-nav{padding-block:clamp(20px,3vw,34px);border-block:1px solid var(--line);}
.lf-nav__list{list-style:none;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(28px,4vw,56px);}
.lf-nav__list a{font-size:clamp(12px,1.05vw,14px);letter-spacing:.06em;color:var(--body);text-decoration:none;transition:color .2s ease;}
.lf-nav__list a:hover{color:var(--gold);}

/* ======================================================================= */
/* 3. EL ORIGEN                                                             */
/* ======================================================================= */
.lf-origen__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,6vw,120px);align-items:start;}
.lf-origen__head{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);}
.lf-origen__head .lf-h2{max-width:12ch;}
.lf-origen__body{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);max-width:620px;}

/* ======================================================================= */
/* 4. BANDA IMAGEN                                                          */
/* ======================================================================= */
.lf-band__img{aspect-ratio:1076/490;width:100%;overflow:hidden;}

/* ======================================================================= */
/* 5. ALTITUD                                                               */
/* ======================================================================= */
.lf-altitud__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(30px,6vw,120px);align-items:center;}
.lf-altitud__text{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:560px;}
.lf-altitud__figure{margin:0;}
.lf-altitud__img{aspect-ratio:618/771;width:100%;overflow:hidden;}
.lf-stats{margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
.lf-stat{display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:1px solid var(--line);}
.lf-stat__num{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;color:var(--ink);font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-0.02em;}
.lf-stat__label{font-size:clamp(12px,1.05vw,14px);font-weight:300;color:var(--muted);}

/* ======================================================================= */
/* 6. VIÑA Y OLIVAR (2 imágenes)                                            */
/* ======================================================================= */
.lf-frutos__head{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.lf-frutos__h2{margin-top:clamp(16px,2vw,26px);font-size:clamp(30px,4.6vw,58px);}
.lf-frutos__grid{margin-top:clamp(44px,7vw,120px);display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(40px,8vw,160px);align-items:center;}
.lf-frutos__tall{aspect-ratio:640/852;width:100%;overflow:hidden;}
.lf-frutos__wide{aspect-ratio:691/432;width:100%;overflow:hidden;}

/* ======================================================================= */
/* 7. FRASE                                                                 */
/* ======================================================================= */
.lf-statement__inner{max-width:1040px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,36px);}
.lf-statement__h2{font-size:clamp(30px,4.6vw,56px);}
.lf-statement__sign{font-size:clamp(11px,1vw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}

/* ======================================================================= */
/* 8. BIODIVERSIDAD                                                         */
/* ======================================================================= */
.lf-bio__grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(30px,6vw,120px);align-items:center;}
.lf-bio__figure{margin:0;}
.lf-bio__img{aspect-ratio:568/760;width:100%;overflow:hidden;}
.lf-bio__text{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:620px;}
.lf-bio__cards{list-style:none;margin:clamp(44px,6vw,80px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.lf-bio__card{padding:clamp(28px,3vw,44px);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;}
.lf-bio__cardt{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--ink);font-size:clamp(24px,2.4vw,30px);line-height:1.1;}
.lf-scenes{margin-top:clamp(44px,7vw,110px);display:grid;grid-template-columns:0.42fr 0.58fr;gap:clamp(24px,4vw,54px);align-items:end;}
.lf-scenes__tall{aspect-ratio:485/606;width:100%;overflow:hidden;}
.lf-scenes__wide{aspect-ratio:693/433;width:100%;overflow:hidden;}

/* ======================================================================= */
/* 9. LA VIÑA — VARIEDADES                                                  */
/* ======================================================================= */
.lf-vinas__head{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,56px);}
.lf-vinas__headl{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);}
.lf-vinas__intro{max-width:520px;font-weight:300;font-size:clamp(14px,1.3vw,16px);line-height:1.8;color:#33302a;}
.lf-grapes{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.lf-grape{padding:clamp(24px,2.4vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.lf-grape__cat{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.lf-grape__name{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--ink);font-size:clamp(22px,2.2vw,30px);line-height:1.05;}

/* ======================================================================= */
/* 10. CULTIVAR CON RESPETO (timeline)                                      */
/* ======================================================================= */
.lf-cultivo__head{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px);}
.lf-cultivo__headl{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);}
.lf-cultivo__intro{max-width:520px;font-weight:300;font-size:clamp(14px,1.3vw,16px);line-height:1.8;color:#33302a;}
.lf-tl{list-style:none;margin:0 auto;padding:0;max-width:1013px;}
.lf-tl__row{display:grid;grid-template-columns:170px 1fr;gap:clamp(20px,4vw,46px);align-items:start;padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--line);}
.lf-tl__row:last-child{border-bottom:1px solid var(--line);}
.lf-tl__year{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;color:var(--ink);font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-0.02em;}
.lf-tl__d{max-width:760px;}

/* ======================================================================= */
/* 11. EL OLIVAR                                                            */
/* ======================================================================= */
.lf-olivar__head{max-width:880px;margin-bottom:clamp(30px,4vw,56px);display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);}
.lf-olivar__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:center;}
.lf-olivar__img{aspect-ratio:444/440;width:100%;overflow:hidden;}
.lf-olivar__card{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:560px;}
.lf-olivar__h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--ink);font-size:clamp(26px,3vw,44px);line-height:1.06;letter-spacing:-0.01em;}
.lf-olivar__link{align-self:flex-start;margin-top:6px;padding-bottom:4px;border-bottom:1px solid var(--gold);color:var(--gold);font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;}

/* ======================================================================= */
/* 12. CIERRE                                                               */
/* ======================================================================= */
.lf-cierre{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:0;}
.lf-cierre__bg{position:absolute;inset:0;}
.lf-cierre__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.lf-cierre__inner{position:relative;z-index:1;text-align:center;padding:clamp(48px,8vw,96px) clamp(20px,5vw,80px);max-width:900px;display:flex;flex-direction:column;align-items:center;}
.lf-cierre__title{color:#fff!important;font-size:clamp(34px,5vw,62px);}
.lf-cierre__lead{margin-top:clamp(16px,2vw,24px);max-width:640px;font-weight:300;font-size:clamp(14px,1.3vw,17px)!important;line-height:1.7!important;color:rgba(255,255,255,.9)!important;}
.lf-cierre__btns{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.lf-cierre__btn{display:inline-flex;align-items:center;justify-content:center;min-width:240px;height:52px;padding:0 26px;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease;}
.lf-cierre__btn:hover{background:#fff;color:#14120f;}

/* ======================================================================= */
/* RESPONSIVE                                                              */
/* ======================================================================= */
@media (max-width:900px){
  .lf-origen__grid,
  .lf-altitud__grid,
  .lf-frutos__grid,
  .lf-bio__grid,
  .lf-vinas__head,
  .lf-cultivo__head,
  .lf-olivar__grid{grid-template-columns:1fr;gap:clamp(24px,6vw,48px);align-items:start;}
  .lf-bio__figure{order:-1;}
  .lf-stats{grid-template-columns:repeat(2,1fr);}
  .lf-bio__cards{grid-template-columns:1fr;}
  .lf-grapes{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .lf-stats{grid-template-columns:1fr;}
  .lf-grapes{grid-template-columns:1fr;}
  .lf-scenes{grid-template-columns:1fr;}
  .lf-tl__row{grid-template-columns:1fr;gap:10px;}
}

/* ======================================================================= */
/* SECCIONES OSCURAS (fondo negro, texto claro, acentos dorados)          */
/* ======================================================================= */
.lf-nav{background:#14120f;border-block-color:rgba(255,255,255,.14);}
.lf-nav__list a{color:#fff;}
.lf-nav__list a:hover{color:var(--gold);}

.lf-bio__cardt,.lf-grape__name,.lf-olivar__h3{text-transform:none!important;}

.lf-altitud,.lf-statement,.lf-vinas{background:#14120f;}
.lf-altitud .lf-h2,
.lf-statement .lf-display,
.lf-vinas .lf-h2{color:#fff;}
.lf-altitud p{color:rgba(255,255,255,.7);}
.lf-stat{border-top-color:rgba(255,255,255,.18);}
.lf-stat__num{color:var(--gold);}
.lf-stat__label{color:rgba(255,255,255,.58);}
.lf-statement__sign{color:var(--gold);}
.lf-vinas__intro{color:rgba(255,255,255,.82);}
.lf-grapes{border-top-color:rgba(255,255,255,.14);border-left-color:rgba(255,255,255,.14);}
.lf-grape{border-right-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14);}
.lf-grape__name{color:#fff;}
.lf-grape p{color:rgba(255,255,255,.58);}

/* ---- El parcelario — mapa interactivo --------------------------------- */
.lf-parcelas__head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(30px,4vw,56px);
}
.lf-parcelas__head h2{margin-top:18px;}
.lf-parcelas__layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;}

.lf-parcelas__map{
  position:relative;aspect-ratio:5315/3508;overflow:hidden;
  background:#ece8e2;border:1px solid var(--line);
}
.lf-parcelas__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* El <svg> ocupa toda la tarjeta: si captura el puntero, las parcelas no
   reciben ni hover ni clic. Solo los trazados son interactivos. */
.lf-parcelas__zones{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}

.lf-zone{
  fill:rgba(169,141,94,.06);
  stroke:rgba(122,97,63,.58);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  cursor:pointer;
  pointer-events:all;
  transition:fill .22s ease,stroke .22s ease,opacity .22s ease;
}
.lf-parcelas__zones:hover .lf-zone{opacity:.5;}
.lf-zone:hover,.lf-zone:focus-visible,.lf-zone.is-active{
  opacity:1;fill:rgba(169,141,94,.42);stroke:#7a613f;stroke-width:3;outline:none;
}

.lf-parcelas__hint{
  position:absolute;left:16px;bottom:16px;z-index:3;margin:0;
  padding:9px 12px;background:rgba(249,247,245,.9);border:1px solid rgba(17,16,14,.1);
  font-size:10px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important;
  line-height:1.2!important;
}
.lf-parcelas__tip{
  position:absolute;z-index:5;top:0;left:0;min-width:170px;max-width:250px;
  padding:11px 14px 12px;background:rgba(23,21,19,.94);color:#fbf8f1;
  pointer-events:none;opacity:0;transition:opacity .12s ease;
}
.lf-parcelas__tip.is-on{opacity:1;}
.lf-parcelas__tip span{display:block;margin-bottom:3px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.62;}
.lf-parcelas__tip strong{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:21px;line-height:1.15;}

.lf-parcelas__panel{
  position:sticky;top:24px;padding:26px 24px 28px;
  background:#fff;border:1px solid var(--line);
}
.lf-parcelas__num{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:84px!important;line-height:.8!important;
  color:rgba(17,16,14,.13)!important;margin:0 0 20px!important;
}
.lf-parcelas__title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;text-transform:none;
  color:var(--ink);font-size:34px;line-height:1.06;letter-spacing:-0.01em;margin:0 0 12px;min-height:74px;
}
.lf-parcelas__rule{border:0;height:1px;background:var(--line);margin:22px 0 16px;}
.lf-parcelas__label{display:block;margin-bottom:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.lf-parcelas__reset{
  margin-top:22px;padding:0 0 4px;border:0;border-bottom:1px solid var(--ink);background:none;
  color:var(--ink);font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.lf-parcelas__reset:hover{color:#7a613f;border-color:#7a613f;}

.lf-parcelas__legend{
  list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:22px;
}
.lf-parcelas__legend button{
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  padding:11px 0 0;cursor:pointer;font:inherit;display:block;
  transition:border-color .2s ease;
}
.lf-parcelas__legend button:hover,.lf-parcelas__legend button.is-active{border-color:#7a613f;}
.lf-parcelas__legend span{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.16em;color:#7a613f;}
.lf-parcelas__legend em{font-style:normal;font-size:13px;line-height:1.45;color:var(--body);}

@media (max-width:1080px){
  .lf-parcelas__legend{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:900px){
  .lf-parcelas__head{grid-template-columns:1fr;align-items:start;}
  .lf-parcelas__layout{grid-template-columns:1fr;}
  .lf-parcelas__panel{position:static;}
  .lf-parcelas__title{min-height:0;font-size:30px;}
  .lf-parcelas__num{font-size:64px!important;}
  .lf-parcelas__hint{display:none;}
  .lf-parcelas__legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
}
@media (prefers-reduced-motion:reduce){
  .lf-zone,.lf-parcelas__tip{transition:none;}
}