/* ============================================================
   HOME PAGE (index.html) — page-specific layout
   Load AFTER styles/main.css. Consumes design tokens only;
   no raw hex/px values except layout-only aspect ratios.
   Mobile breakpoint: 768px (in sync with --breakpoint-md).
   ============================================================ */
.home_hero__btn {
  border-color: var(--color-white);
  color: var(--color-white);
}

.home_hero__btn:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* ---- Media placeholders -----------------------------------
   Swap the background-image (or drop an <img>) for real photos.
   Kept as tokenised grey blocks so the layout renders offline. */
.media {
  background-color: var(--color-grey-light);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.media--dark { background-color: var(--color-black); }

.media--portrait  { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--square    { aspect-ratio: 4 / 5; }

/* ---- Section helpers -------------------------------------- */
.section--alt { background-color: var(--color-bg-alt); }

/* Section header: small label on the left, carousel nav on the right,
   separated from the content below by a hairline rule. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-divider);
}
.section-head .carousel-nav__label { color: var(--color-text-muted); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  background-color: var(--color-black);
  /* Slight top-and-bottom scrim keeps nav + caption legible over the photo */
  background-image: linear-gradient(180deg, rgba(5, 7, 6, 0.35) 0%, rgba(5, 7, 6, 0) 30%, rgba(5, 7, 6, 0.45) 100%),
                    url("/images/home/arte-visual-hero.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero__nav { flex: 0 0 auto; }

/* Title sits centered in the upper area; caption pinned to the bottom */
.hero__content {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: var(--space-100);
}

.hero__title {
  align-self: center;
  font-size: var(--font-size-headline-2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
}

/* Bottom row: caption on the left, Portafolio button on the right */
.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.hero__caption {
  color: rgba(255, 255, 255, 0.85);
}

/* Logo mark (SVG) in the transparent hero navbar */
.logo-img {
  height: var(--icon-size-md); /* 24px */
  width: auto;
}

/* Hamburger toggle — hidden on desktop, shown in the mobile navbar */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--icon-size-md);   /* 24px hit area */
  height: var(--icon-size-md);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Open state: turn the three bars into an "X" */
body.is-menu-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-menu-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.is-menu-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   NAVBAR SCROLL HANDOFF  (scripts/navbar.js toggles is-past-hero)
   The hero nav overlays the top of the hero, then hides; the solid
   navbar is sticky and takes over below the hero.

   mix-blend-mode: difference is applied to the individual white
   elements (links + logo) — NOT the CONTACTO button, which stays a
   normal solid-white button. For the per-element blend to reach the
   hero photo, .hero__nav must NOT establish a stacking context:
   it's position: absolute with z-index auto, so its children blend
   against the hero's paint context (the photo) rather than an empty
   isolated backdrop. (A fixed/sticky nav, or any z-index here, would
   isolate the blend and it would silently do nothing.)
   ------------------------------------------------------------ */
.hero__nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: auto; /* override .navbar--transparent's z-index:10 so the
                    nav is NOT a stacking context and the children can
                    blend against the hero photo. Positioned nav still
                    paints above the in-flow hero content. */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
/* Only the white text/logo invert against the photo; the solid
   CONTACTO button is intentionally excluded so it reads normally. */
.hero__nav .nav-link,
.hero__nav .navbar__brand {
  mix-blend-mode: difference;
}
body.is-past-hero .hero__nav {
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* Solid navbar sticks to the top and is revealed once past the hero */
.navbar--solid {
  position: sticky;
  top: 0;
  z-index: 20;
}
body.is-past-hero .navbar--solid {
  box-shadow: 0 1px 12px rgba(5, 7, 6, 0.06);
}

/* ============================================================
   PROJECTS — horizontal snap carousel of portrait cards
   Arrows (scripts/carousel.js) scroll the track by one card.
   On desktop all 5 fit; below that it scrolls with snap.
   ============================================================ */
.projects-track,
.destinations-track {
  display: flex;
  gap: var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}
.projects-track::-webkit-scrollbar,
.destinations-track::-webkit-scrollbar { display: none; } /* Chromium/Safari */

.project-card {
  flex: 0 0 calc((100% - 4 * var(--space-24)) / 5); /* 5 across on desktop */
  scroll-snap-align: start;
}

.project-card__link {
  display: block;
  color: inherit;
}
.project-card__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

.project-card__media {
  aspect-ratio: 2 / 3;          /* matches placehold.co/400x600 */
  overflow: hidden;
  margin-bottom: var(--space-16);
  background-color: var(--color-grey-light);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.project-card__link:hover .project-card__media img,
.project-card__link:focus-visible .project-card__media img {
  transform: scale(1.05);
}

.project-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}
.project-card__name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  transition: opacity 0.2s ease;
}
.project-card__link:hover .project-card__name { opacity: 0.55; }
.project-card__year { white-space: nowrap; }

/* ============================================================
   TRAJECTORY & STORY — two-column (text + image)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: center;
}
/* Top-aligned variant: text and image share the same top edge */
.split--top { align-items: start; }

.split__body { max-width: 80ch; }
.split__body--narrow { max-width: 46ch; }
.split__body > * + * { margin-top: var(--space-16); }

/* Muted intro paragraph (e.g. "Nuestra trayectoria") */
.split__lead { color: var(--color-text-muted); }

/* Uppercase location eyebrow (e.g. story location line) */
.split__eyebrow {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Story variant: body stretches the full row height so the link
   drops to the bottom, aligned with the image's lower edge. */
.split--story { align-items: stretch; }
.split--story .split__body { display: flex; flex-direction: column; }
.split--story .split__media { align-self: start; }
.split--story .split__link { margin-top: auto; }

/* Square image pinned to the right edge of its column */
.split__img {
  width: 100%;
  max-width: 327px;             /* matches placehold.co/327x327 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  justify-self: end;
  background-color: var(--color-grey-light);
}

/* Story media: the square image cross-fades into a muted clip on
   hover. Both share one grid cell, so the swap costs no layout and
   the wrapper carries the sizing the bare image used to. Touch has
   no hover, so the image simply stays. */
.split--story .split__media {
  display: grid;
  width: 100%;
  max-width: 327px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  overflow: hidden;
  background-color: var(--color-grey-light);
}
.split--story .split__media > * {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: none;              /* the wrapper caps the width now */
  object-fit: cover;
}
.split__video {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.split--story .split__media:is(:hover, :focus-within) .split__video { opacity: 1; }

/* Sticky variant: the text pins while the image column scrolls by.
   Sticky only travels while the media column is taller than the body,
   so the stack needs enough images to outrun the text. */
.split--sticky .split__media {
  display: grid;
  gap: var(--space-24);
  width: 100%;
  max-width: 327px;
  justify-self: end;
}
.split--sticky .split__body {
  position: sticky;
  top: calc(var(--space-24) * 4);
}
.split__img--tall { aspect-ratio: 3 / 4; }

/* ============================================================
   PROCESS — "¿Cómo trabajamos?"
   A header row of 4 columns (section title + 3 steps), each
   underlined by a hairline; the three step columns carry a
   portrait image. The lead (title) column has no image: it
   holds the copy for each step instead.

   At rest the lead column shows only the "00" section label.
   Hovering (or focusing) a step brings that step forward — its
   copy replaces the label and its title darkens — while the
   other two images fade back.
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(0, 256px));
  gap: var(--space-24);
  align-items: start;
}

.process-col__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  color: var(--color-text);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-divider);
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}
.process-col__title--lead {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.process-col__img {
  width: 100%;
  aspect-ratio: 256 / 385;      /* matches placehold.co/256x385 */
  object-fit: cover;
  background-color: var(--color-grey-light);
  transition: opacity 0.3s ease;
}

/* The resting label and the three copy panels share a single grid
   cell, so the column is as tall as the longest panel and nothing
   shifts as they cross-fade. */
.process-col--lead { display: grid; }
.process-lead__rest,
.process-lead__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.process-lead__rest { align-self: start; }
.process-lead__heading { margin-bottom: var(--space-16); }
.process-lead__desc { max-width: 46ch; }

/* Steps are focusable so the copy is reachable without a mouse. */
.process-step { cursor: pointer; outline-offset: var(--space-4); }
.process-step .process-col__title { color: var(--color-text-muted); }

/* What the lead column shows: just the label while the grid is at
   rest, otherwise the engaged step's copy. The rest and engaged
   cases are mutually exclusive by construction, so neither has to
   outweigh the other in the cascade. */
.process-grid:not(:has(.process-step:is(:hover, :focus-visible))) .process-lead__rest,
.process-grid:has(.process-step[data-process-step="1"]:is(:hover, :focus-visible)) .process-lead__panel[data-process-panel="1"],
.process-grid:has(.process-step[data-process-step="2"]:is(:hover, :focus-visible)) .process-lead__panel[data-process-panel="2"],
.process-grid:has(.process-step[data-process-step="3"]:is(:hover, :focus-visible)) .process-lead__panel[data-process-panel="3"] {
  opacity: 1;
  visibility: visible;
}

/* The engaged step's title darkens; at rest all three stay muted. */
.process-step:is(:hover, :focus-visible) .process-col__title {
  color: var(--color-text);
  border-bottom-color: var(--color-grey);
}

/* Only the steps that aren't engaged fade back, so the engaged
   one keeps its base opacity rather than having to override. */
.process-grid:has(.process-step:is(:hover, :focus-visible)) .process-step:not(:hover, :focus-visible) .process-col__img {
  opacity: 0.35;
}

/* ============================================================
   ENTENDER LA HISTORIA — mobile-only stacked steps.
   Replaces the desktop process grid below --breakpoint-md.
   Each step: square thumbnail on the left, copy on the right.
   ============================================================ */
.story-steps { display: none; }      /* shown only on mobile (see @768) */

.story-steps__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-24) * 2);
}
.story-step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-16);
  align-items: start;
}
.story-step__img {
  width: 100%;
}
.story-step__title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-16);
}
.story-step__desc { color: var(--color-black); line-height: 16px; }

/* ============================================================
   PRESS — logo strip
   ============================================================ */
.press__note { margin-bottom: calc(var(--space-24) * 2); }
.press-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--space-24) * 2) var(--space-24);
  align-items: center;
  justify-items: center;
}
.press-logo {
  width: 100px;                 /* matches placehold.co/100x40 */
  height: 40px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);         /* muted press-logo look; color on hover */
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.press-logo:hover { opacity: 1; filter: grayscale(0); }

/* ============================================================
   DESTINATIONS — carousel of square cards with captions
   Shares the track mechanics with PROJECTS (carousel.js).
   ============================================================ */
.destination-card {
  flex: 0 0 calc((100% - 4 * var(--space-24)) / 5); /* 5 across on desktop */
  scroll-snap-align: start;
}

.destination-card__link {
  display: block;
  color: inherit;
}
.destination-card__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

.destination-card__media {
  aspect-ratio: 1 / 1;          /* matches placehold.co/217x217 */
  overflow: hidden;
  margin-bottom: var(--space-16);
  background-color: var(--color-grey-light);
}
.destination-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.destination-card__link:hover .destination-card__media img,
.destination-card__link:focus-visible .destination-card__media img {
  transform: scale(1.05);
}

.destination-card__name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  color: var(--color-text);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
}
.cta__title {
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
}
.cta__actions { display: inline-flex; gap: var(--space-24); }

/* ============================================================
   RESPONSIVE  (<= 768px)
   ============================================================ */
/* Tablet: show ~3 project / destination cards across */
@media (max-width: 1024px) {
  .project-card,
  .destination-card { flex-basis: calc((100% - 2 * var(--space-24)) / 3); }

  /* Process: title becomes a full-width header, 3 steps below */
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .process-col--lead { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .hero { min-height: 100vh; }

  /* ---- MOBILE NAVBAR --------------------------------------
     One dark, blurred bar: logo centered, hamburger on the
     right. Links live behind the burger (revealed on tap).
     Reveal-on-scroll-up is driven by scripts/navbar.js. */
  .navbar--solid { display: none; }   /* single bar on mobile */

  .hero__nav {
    /* Mobile bar is fixed so it can reveal-on-scroll-up (navbar.js)
       and cover the screen when the menu opens. Fixed re-establishes
       a stacking context, so the child mix-blend is inert here — the
       single dark bar reads on its own without blending. */
    position: fixed;
    z-index: 30;
    padding-top: var(--space-24) !important;
    background-color: transparent;
  }

  /* Logo pinned to the true center of the bar */
  .hero__nav .navbar__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* Hamburger: first in flow, pushed to the right edge */
  .hero__nav .nav-toggle {
    display: flex;
    order: -1;
    margin-left: auto;
  }

  /* Nav links are hidden in the collapsed bar */
  .hero__nav .navbar__group { display: none; }
  .hero__nav .nav-link--menu { display: none; } /* menu-only extra link */

  /* ---- OPEN MENU: full-screen white overlay ----------------
     Logo + close (X) pinned to the top; links centered. */
  body.is-menu-open { overflow: hidden; }

  body.is-menu-open .hero__nav {
    position: fixed;
    inset: 0;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-24);
    background-color: var(--color-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    overflow-y: auto;
  }
  /* White SVG logo → black on the light overlay; bars → black */
  body.is-menu-open .hero__nav .logo-img { filter: invert(1); }
  body.is-menu-open .nav-toggle__bar { background-color: var(--color-black); }

  /* Logo top-center, X top-right. Kill the hero blend so the
     inverted (now dark) logo isn't turned back to white against
     the light overlay. */
  body.is-menu-open .hero__nav .navbar__brand {
    top: var(--space-24);
    mix-blend-mode: normal;
  }
  body.is-menu-open .nav-toggle {
    position: absolute;
    top: var(--space-24);
    right: var(--container-gutter);
    margin: 0;
  }

  /* Centered vertical link stack */
  body.is-menu-open .hero__nav .navbar__group {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
  }
  body.is-menu-open .hero__nav .navbar__group--end { justify-content: center; }
  body.is-menu-open .hero__nav .nav-link--menu { display: block; }
  body.is-menu-open .hero__nav .nav-link {
    color: var(--color-black);
    font-size: 14px;
    text-align: center;
    mix-blend-mode: normal;   /* stop difference-blend hiding the black links on the white overlay */
  }
  /* CONTACTO stays a solid black button on the white overlay */
  body.is-menu-open .hero__nav .nav-link-contact {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  /* Scroll behaviour: not permanently sticky. Ignore the
     desktop past-hero hide; slide up when scrolling down,
     slide back in when scrolling up (body.nav-hidden). */
  body.is-past-hero .hero__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  body.nav-hidden .hero__nav {
    transform: translateY(-100%);
  }
  .home_hero__title { text-transform: initial; }
  .home_hero__caption { font-size: 14px; text-transform: uppercase; max-width: 250px; }
  .home_hero__btn { color: var(--color-white); border-color: var(--color-white); }
  .hero__foot { flex-direction: column; align-items: flex-start; }

  .home_carousel_nav { display: none; }
  .home_about_section { display: flex; flex-direction: column-reverse; }
  .home_about_section img { width: 100%; max-width: 100%; }
  /* Stacked layout leaves no room to pin the text without covering it */
  .split--sticky .split__body { position: static; }
  .split--sticky .split__media { max-width: 100%; }
  .home_about_title { font-weight: var(--font-weight-bold); }
  .home_about_title { font-size: 14px; font-weight: var(--font-weight-bold); }
  .home_about_description { color: var(--color-black); line-height: 16px; }
  .home_history_container { display: flex; flex-direction: column-reverse; }
  .home_history_subtitle {font-size: 14px; }
  .home_history_title { font-weight: var(--font-weight-bold); }
  .home_history_description { color: var(--color-black); padding-bottom: var(--space-16); }
  .home_history_btn { text-transform: uppercase; }
  .home_published_head { justify-content: center; }
  .home_published_title { color: var(--color-black) !important; font-size: 14px; }
  .home_published_subtitle { color: var(--color-black) !important; font-size: 14px; text-align: center; }
  .split--story .split__media { max-width: 100%; }
  .home_destinos_arrows { display: none; }
  .destination-card__name { font-size: 14px; text-transform: uppercase; }
  .home_cta_title { font-weight: var(--font-weight-bold); text-transform: uppercase; }
  .home_cta_actions { display: flex; flex-direction: column; }
  .home_cta_btn_portafolio { color: var(--color-white); background-color: var(--color-black); padding: var(--space-8) var(--space-16); border-radius: 4px; text-decoration: none; width: fit-content; }
  .home_cta_btn_contacto { color: var(--color-black); background-color: transparent; border: 1px solid var(--color-black); padding: var(--space-8) var(--space-16); border-radius: 4px; text-decoration: none; width: fit-content; }

  /* Mobile: ~1.3 cards visible so the carousel invites a swipe */
  .project-card { flex-basis: calc((100% - var(--space-24)) / 1.3); }
  .destination-card { flex-basis: calc((100% - var(--space-24)) / 1.6); }

  .process-grid { grid-template-columns: 1fr; }

  /* Swap the desktop process grid for the stacked "Entender la historia" steps */
  .process-section--desktop { display: none; }
  .story-steps { display: block; }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }

  .press-logos { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }

  .cta { flex-direction: column; align-items: flex-start; }
  .cta__actions { width: 100%; }
}