/* ============================================================
   HISTORIA INDIVIDUAL (historia-individual.html) — page layout
   Load AFTER styles/main.css and styles/home.css. Reuses the
   navbar, footer, .section, .split, .cta and button helpers;
   this file only carries the article-specific blocks.
   Consumes design tokens only; no raw hex/px values except
   layout-only aspect ratios. Mobile breakpoint: 768px.
   ============================================================ */

/* ============================================================
   MOBILE NAVBAR — this page has no hero photo, so the transparent
   .hero__nav exists only to carry the shared mobile bar + hamburger
   menu (styled in home.css under <=768px). Hide it on desktop, where
   the solid navbar is used instead.
   ============================================================ */
@media (min-width: 769px) {
  .hero__nav { display: none; }
}

/* ============================================================
   ARTICLE HEADER — centered eyebrow + title above the hero photo
   ============================================================ */
.article-header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.article-header__eyebrow {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}
.article-header__title {
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* Full-width editorial hero photo below the header */
.article-hero {
  margin-top: calc(var(--space-24) * 2);
}
.article-hero__img {
  width: 100%;
}

/* ============================================================
   ARTICLE BODY — three columns:
     left  → sticky meta (category / date / back link)
     center→ the article copy
     right → share icons
   ============================================================ */
.article-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 32px;
  column-gap: calc(var(--space-24) * 3);   /* 72px */
  align-items: start;
}

/* ---- Meta sidebar ----------------------------------------- */
.article-meta {
  position: sticky;
  top: calc(var(--space-24) * 4);
}
.article-meta__group + .article-meta__group { margin-top: var(--space-24); }

.article-meta__label {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.article-meta__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.article-meta__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: calc(var(--space-24) * 1.5);
  font-size: var(--font-size-body);
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.article-meta__back:hover { opacity: 0.55; }

/* ---- Share icons (right rail) ------------------------------ */
.article-share {
  position: sticky;
  top: calc(var(--space-24) * 4);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.article-share__link {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.article-share__link:hover { color: var(--color-text); }
.article-share__link svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* ---- Article copy ----------------------------------------- */
.article-body__intro > * + * { margin-top: var(--space-16); }
.article-body__intro { color: var(--color-text); }

.article-section {
  margin-top: calc(var(--space-24) * 2);
}
.article-section__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-16);
}
.article-section__title--plain { text-transform: none; letter-spacing: 0; }
.article-section > .paragraph + .paragraph { margin-top: var(--space-16); }

.article-body .divider { margin-block: calc(var(--space-24) * 2); }

/* ============================================================
   ¿POR QUÉ ESCOGERNOS? — text column + portrait photo
   Reuses .split; the photo runs taller than the square default.
   ============================================================ */
.why__body { max-width: 100% !important; }
.why__body > * + * { margin-top: var(--space-16); }
.why__title { margin-bottom: var(--space-8); font-weight: var(--font-weight-bold); }
.why__signoff { color: var(--color-text-muted); }
.why__cta { margin-top: var(--space-24); }

/* ============================================================
   RESPONSIVE  (<= 1024px / <= 768px)
   ============================================================ */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: calc(var(--space-24) * 2);
  }
  /* Share rail drops below the meta column */
  .article-share {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    position: static;
    margin-top: var(--space-24);
  }
}

@media (max-width: 768px) {
  /* Mobile navbar: like the servicios page, this bar sits over a light
     surface (no dark photo hero), so the shared white logo + white
     hamburger would be invisible. Give the bar a solid white surface and
     flip the marks to dark. The open-menu overlay is still handled by
     home.css. */
  body:not(.is-menu-open) .hero__nav {
    background-color: var(--color-grey-light);
  }
  body:not(.is-menu-open) .hero__nav .navbar__brand { mix-blend-mode: normal; }
  body:not(.is-menu-open) .hero__nav .logo-img { filter: invert(1); }
  body:not(.is-menu-open) .nav-toggle__bar { background-color: var(--color-black); }

  .article-header__title { font-size: var(--font-size-headline-2); }
  .article-hero { margin-top: var(--space-24); }

  /* Single column: meta stacks above the copy */
  .article-layout { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .article-meta { position: static; }
  .article-meta__group { display: inline-block; margin-right: calc(var(--space-24) * 2); }
  .article-meta__group + .article-meta__group { margin-top: 0; }
  .article-share { order: 3; }

  .why__img { max-width: none; justify-self: stretch; }
}