/* ==========================================================================
   Historia
   La página deja de ser una retícula de cuatro cuadros iguales y pasa a ser
   una línea de tiempo: bandas a sangre que alternan lado y fondo, unidas por
   un hilo — el mismo gesto de la técnica de la casa.
   ========================================================================== */

/* --- Portada ------------------------------------------------------------- */

.history-hero{
  padding-block:clamp(84px,9vw,140px) 0;
  background:var(--brown-deep);
  color:var(--white);
}
.history-hero__copy{max-width:1240px}
.history-hero h1{
  max-width:15ch;
  margin:26px 0 30px;
  font-size:clamp(3.4rem,7vw,7.6rem);
  font-weight:400;
  line-height:.94;
}
.history-hero h1 em{display:block;color:var(--accent);font-style:normal}
.history-hero p{
  max-width:58ch;
  margin:0;
  color:#c9c0b9;
  font-size:clamp(1rem,1.3vw,1.15rem);
}

/* Índice de capítulos: ancla y promesa de recorrido */
.history-index{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(56px,7vw,96px);
  border-top:1px solid rgba(255,255,255,.18);
}
.history-index>a{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:26px 26px 30px 0;
  border-right:1px solid rgba(255,255,255,.18);
  transition:color .3s var(--ease,ease);
}
.history-index>a:last-child{border-right:0}
.history-index>a+a{padding-left:26px}
.history-index span{
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--accent);
}
.history-index small{
  font-size:.6rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#a09891;
}
.history-index strong{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,1.7vw,1.6rem);
  font-weight:400;
  letter-spacing:-.02em;
}
.history-index>a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-1px;
  height:2px;
  background:var(--accent);
  transition:right .35s var(--ease,ease);
}
.history-index>a:hover::after{right:26px}
.history-index>a:hover strong{color:var(--accent)}

/* --- Línea de tiempo ----------------------------------------------------- */

.history-timeline{position:relative;isolation:isolate}

/* El hilo corre por la costura entre imagen y texto */
.history-timeline::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(229,122,45,0),rgba(229,122,45,.6) 6%,rgba(229,122,45,.6) 94%,rgba(229,122,45,0));
  pointer-events:none;
}

.history-chapter{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:clamp(560px,72vh,760px);
  scroll-margin-top:96px;
}
.history-chapter::before{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:0;
  width:11px;
  height:11px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(229,122,45,.18);
}
.history-chapter--dark{background:var(--brown-deep);color:var(--white)}
.history-chapter--light{background:var(--cream)}

.history-chapter__media{
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  background:var(--brown);
}
.history-chapter__media>img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(.98);
  transition:transform 1.1s var(--ease-soft,ease);
}
.history-chapter:hover .history-chapter__media>img{transform:scale(1.035)}
.history-chapter__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(28,28,28,0) 52%,rgba(28,28,28,.74));
  pointer-events:none;
}
.history-chapter__media figcaption{
  position:absolute;
  z-index:1;
  left:clamp(22px,3vw,34px);
  right:clamp(22px,3vw,34px);
  bottom:clamp(20px,2.6vw,30px);
  color:var(--white);
  font-size:.58rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.history-chapter__media--pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.history-chapter__media--pair>img{min-width:0}

/* La imagen va primero en el marcado; en los capítulos pares pasa a la derecha */
.history-chapter--flip .history-chapter__media{order:1}

.history-chapter__copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(48px,5.5vw,104px);
  overflow:hidden;
}
/* Numeral fantasma: da escala sin agregar ruido */
.history-chapter__copy::before{
  content:attr(data-step);
  position:absolute;
  right:.06em;
  top:-.1em;
  font-family:var(--font-display);
  font-size:clamp(8rem,14vw,15rem);
  line-height:1;
  letter-spacing:-.06em;
  opacity:.055;
  pointer-events:none;
}
.history-chapter__copy>*{position:relative}

.history-chapter__kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
}
.history-chapter--light .history-chapter__kicker{color:var(--accent-dark)}
.history-chapter__kicker b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.02em;
}

.history-chapter h2{
  max-width:17ch;
  margin:24px 0 24px;
  font-size:clamp(2.5rem,4.2vw,4.6rem);
  font-weight:400;
  line-height:1;
}
.history-chapter p{max-width:52ch;font-size:clamp(.92rem,1.05vw,1.02rem)}
.history-chapter--dark p{color:#c9c0b9}
.history-chapter p+p{margin-top:0}

.history-chapter blockquote{
  max-width:32ch;
  margin:12px 0 0;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.1vw,2rem);
  line-height:1.22;
  letter-spacing:-.03em;
  color:var(--white);
}

/* --- Números ------------------------------------------------------------- */

.history-figures{
  padding-block:clamp(70px,8vw,110px);
  background:var(--brown);
  color:var(--white);
}
.history-figures__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:38px;
  border-top:1px solid rgba(255,255,255,.18);
}
.history-figures__grid article{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:34px 26px 0 0;
  border-right:1px solid rgba(255,255,255,.18);
}
.history-figures__grid article:last-child{border-right:0}
.history-figures__grid article+article{padding-left:26px}
.history-figures strong{
  font-family:var(--font-display);
  font-size:clamp(3.4rem,6vw,6rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--accent);
}
.history-figures span{
  margin-top:16px;
  font-size:.62rem;
  line-height:1.55;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#b3a9a2;
}

/* --- Puente a prensa ----------------------------------------------------- */

.history-press-bridge{margin-top:0}

/* --- Adaptaciones -------------------------------------------------------- */

@media (max-width:1100px){
  .history-index{grid-template-columns:1fr 1fr}
  .history-index>a:nth-child(2){border-right:0}
  .history-index>a:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}
  .history-index>a:nth-child(3){padding-left:0}
  .history-chapter{min-height:0}
  .history-chapter__media{min-height:380px}
  .history-chapter h2{font-size:clamp(2.3rem,4.4vw,3.4rem)}
}

@media (max-width:760px){
  .history-hero{padding-top:64px}
  .history-hero h1{font-size:clamp(2.9rem,12vw,4.2rem)}
  .history-index{grid-template-columns:1fr}
  .history-index>a,
  .history-index>a+a{padding:18px 0}
  .history-index>a{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .history-index>a:last-child{border-bottom:0}
  .history-index>a:hover::after{right:0}

  /* En una sola columna el hilo se apaga: no hay costura que seguir */
  .history-timeline::before,
  .history-chapter::before{display:none}
  .history-chapter{grid-template-columns:1fr}
  .history-chapter--flip .history-chapter__media{order:0}
  .history-chapter__media{min-height:300px;height:300px}
  .history-chapter__media--pair{height:230px}
  .history-chapter__copy{padding:40px 22px 48px}
  .history-chapter__copy::before{font-size:7.5rem;top:-.1em}
  .history-chapter h2{font-size:2.6rem;margin:20px 0}
  .history-chapter blockquote{max-width:none;font-size:1.3rem}
  .history-figures__grid{grid-template-columns:1fr 1fr}
  .history-figures__grid article{padding:26px 18px 26px 0;border-bottom:1px solid rgba(255,255,255,.18)}
  .history-figures__grid article:nth-child(2n){border-right:0}
  .history-figures__grid article+article{padding-left:0}
  .history-figures__grid article:nth-child(2n){padding-left:18px}
  .history-figures__grid article:nth-last-child(-n+2){border-bottom:0}
  .history-figures strong{font-size:3rem}
}

@media (prefers-reduced-motion:reduce){
  .history-chapter__media>img,
  .history-chapter:hover .history-chapter__media>img{transition:none;transform:none}
}