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

.hist-page{
  --paper:#f9f7f5;
  --ink:#11100e;
  --gold:#a98d5e;
  --gold-d:#5c4c32;
  --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 ---------------------------------------------- */
.hist-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.hist-sec{padding-block:clamp(44px,7vw,90px);}
.hist-sec:first-child{padding-top:clamp(104px,15vh,180px);} /* deja pasar el nav */

/* ---- Tipografía base (con reset defensivo frente a estilos globales) -- */
.hist-page .hist-overline{
  font-size:clamp(11px,1vw,13px);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0;
}
.hist-page .hist-display{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  text-transform:none;
  color:var(--ink);font-size:clamp(36px,6vw,66px);line-height:1.04;
  letter-spacing:-0.02em;margin:0;
}
.hist-page .hist-h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  text-transform:none;
  color:var(--ink);font-size:clamp(28px,4.4vw,52px);line-height:1.06;
  letter-spacing:-0.02em;margin:0;
}
:where(.hist-page) p{font-size:clamp(14px,1.25vw,16px);line-height:1.9;color:var(--body);margin:0;}

/* ---- Imagen + placeholder -------------------------------------------- */
.hist-imgbox{position:relative;width:100%;height:100%;overflow:hidden;}
.hist-imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
.hist-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;
}
.hist-ph-l{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.hist-ph-d{font-size:14px;font-weight:600;color:#6f6658;}

/* ======================================================================= */
/* 1. FAMILIA Y ORIGEN (centrado)                                          */
/* ======================================================================= */
.hist-intro__inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:940px;}
.hist-intro__title{margin-top:clamp(18px,2.4vw,28px);}
.hist-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;
}
.hist-rule{width:min(780px,100%);height:1px;background:var(--line);margin-top:clamp(30px,4vw,48px);}
.hist-facts{
  list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(24px,4vw,44px);
}
.hist-facts li{
  font-size:clamp(11px,1vw,13px);font-weight:300;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}

/* ======================================================================= */
/* 2. IMAGEN VIÑEDO                                                         */
/* ======================================================================= */
.hist-figure__fig{margin:0 auto;max-width:900px;}
.hist-figure__img{aspect-ratio:814/458;width:100%;overflow:hidden;}
.hist-figure__cap{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-top:20px;
}
.hist-figure__tag{
  font-size:clamp(10px,.9vw,11px);font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.hist-figure__note{
  font-size:clamp(10px,.9vw,11px);font-style:italic;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);text-align:right;
}

/* ======================================================================= */
/* 3. EL COMIENZO (1990)                                                    */
/* ======================================================================= */
.hist-begin{background:#fff;}
.hist-begin__grid{
  display:grid;grid-template-columns:0.85fr 1.15fr;
  gap:clamp(24px,5vw,120px);align-items:start;
}
.hist-begin__year{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  color:var(--gold);opacity:.9;line-height:.78;
  font-size:clamp(90px,15vw,220px);letter-spacing:-0.05em;
}
.hist-begin__text{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);max-width:640px;}
.hist-begin__text .hist-h2{margin-top:4px;}

/* ======================================================================= */
/* 4. DOS GENERACIONES                                                      */
/* ======================================================================= */
.hist-gen__grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:clamp(30px,7vw,130px);align-items:center;
}
.hist-gen__text{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:600px;}
.hist-gen__quote{
  margin:clamp(10px,1.4vw,18px) 0 0;padding-left:clamp(20px,2vw,30px);
  border-left:1px solid var(--gold);
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:normal;
  color:var(--gold-d);font-size:clamp(24px,3vw,40px);line-height:1.12;letter-spacing:-0.01em;
}
.hist-gen__figure{margin:0;}
.hist-gen__img{aspect-ratio:560/382;width:100%;overflow:hidden;border:1px solid var(--line);
  box-shadow:18px 18px 0 -1px var(--paper),18px 18px 0 0 var(--line);}

/* ======================================================================= */
/* 5. EL ARTE DE OBSERVAR                                                   */
/* ======================================================================= */
.hist-observe{background:#fff;}
.hist-observe__head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px;}
.hist-observe__head .hist-display{margin-top:clamp(16px,2vw,26px);}
.hist-observe__lead{
  margin-top:clamp(18px,2.2vw,26px);max-width:660px;font-weight:300;
  font-size:clamp(16px,1.7vw,21px);line-height:1.55;color:#33302a;
}
.hist-observe__grid{
  margin-top:clamp(48px,7vw,120px);
  display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(40px,9vw,160px);align-items:stretch;
}
.hist-observe__imgtall{aspect-ratio:440/587;width:100%;overflow:hidden;}
.hist-observe__col{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(30px,4vw,44px);}
.hist-observe__imgwide{aspect-ratio:692/432;width:100%;overflow:hidden;}
.hist-observe__note{display:grid;grid-template-columns:0.5fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;}
.hist-observe__big{
  grid-column:2;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  color:#2a2722;font-size:clamp(26px,3.2vw,52px);line-height:1.05;letter-spacing:-0.02em;
}

/* ======================================================================= */
/* 6. CRONOLOGÍA ESENCIAL                                                   */
/* ======================================================================= */
.hist-timeline{background:#fafafa;}
.hist-timeline__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,68px);
}
.hist-timeline__intro{max-width:480px;font-weight:300;font-size:clamp(13px,1.15vw,14px);line-height:1.66;color:var(--muted);}
.hist-timeline__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.hist-tl{position:relative;padding:28px clamp(14px,1.4vw,25px) 40px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px;}
.hist-tl:last-child{border-right:0;}
.hist-tl__dot{position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--gold);}
.hist-tl__year{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;color:#2b271f;font-size:clamp(28px,3vw,38px);letter-spacing:-0.02em;line-height:1;}
.hist-tl__d{font-size:clamp(12px,1.05vw,13px);font-weight:300;line-height:1.5;color:var(--muted);}

/* ======================================================================= */
/* 7. LA BODEGA COMO MEMORIA                                                */
/* ======================================================================= */
.hist-memory__grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(30px,6vw,110px);align-items:center;}
.hist-memory__lead{grid-column:1;margin:0;align-self:center;}
.hist-memory__leadimg{aspect-ratio:5/6;width:100%;overflow:hidden;}
.hist-memory__text{grid-column:2;display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:720px;}
.hist-memory__h2{font-size:clamp(32px,5vw,60px);}
.hist-memory__p{font-weight:300;font-size:clamp(15px,1.5vw,20px);line-height:1.55;color:#2f2b25;}
.hist-memory__scenes{
  margin-top:clamp(48px,8vw,120px);
  display:grid;grid-template-columns:0.42fr 0.58fr;gap:clamp(24px,4vw,54px);align-items:end;
}
.hist-memory__img{width:100%;overflow:hidden;}
.hist-memory__img--tall{aspect-ratio:485/606;}
.hist-memory__img--wide{aspect-ratio:693/433;}

/* ======================================================================= */
/* RESPONSIVE                                                              */
/* ======================================================================= */
@media (max-width:900px){
  .hist-begin__grid,
  .hist-gen__grid,
  .hist-observe__grid,
  .hist-memory__grid{grid-template-columns:1fr;gap:clamp(24px,6vw,48px);}
  .hist-begin__year{line-height:.85;}
  .hist-memory__text{grid-column:1;}
  .hist-gen__figure{order:-1;}
  .hist-observe__imgtall{aspect-ratio:16/11;}
  .hist-observe__col{justify-content:flex-start;}
  .hist-timeline__list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hist-tl:nth-child(3n){border-right:0;}
}
@media (max-width:560px){
  .hist-figure__cap{flex-direction:column;gap:6px;}
  .hist-figure__note{text-align:left;}
  .hist-observe__note{grid-template-columns:1fr;}
  .hist-observe__big{grid-column:1;}
  .hist-memory__scenes{grid-template-columns:1fr;}
  .hist-timeline__list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hist-tl{border-right:0;border-bottom:1px solid var(--line);padding-right:0;}
  .hist-tl:nth-child(3n){border-right:0;}
}

/* ======================================================================= */
/* 8. CIERRE — La historia no termina en la botella (fondo oscuro)         */
/* ======================================================================= */
.hist-close{background:#0d0d0c;color:#fff;}
.hist-close__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,6vw,110px);align-items:center;}
.hist-close__text{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);max-width:520px;}
.hist-page .hist-close__title{color:#fff;max-width:16ch;}
.hist-close__note{font-weight:300;font-size:clamp(14px,1.3vw,16px);line-height:1.85;color:rgba(255,255,255,.72);}
.hist-close__btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(8px,1.4vw,16px);padding:15px clamp(24px,3vw,34px);
  border:1px solid rgba(255,255,255,.5);color:#fff;
  font-size:clamp(11px,1vw,13px);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.hist-close__btn:hover{background:#fff;color:#0d0d0c;border-color:#fff;}
.hist-close__figure{margin:0;}
.hist-close__img{aspect-ratio:900/680;width:100%;overflow:hidden;}

@media (max-width:900px){
  .hist-memory__lead{grid-column:auto;order:-1;}
  .hist-close__grid{grid-template-columns:1fr;}
}