/*
 * home.css — CSS específico de la Home de NOVE Producciones.
 * Depende de tokens.css (cargado antes en head.php).
 * Artboard 1600pt. Factor orientativo 0.9.
 * Tokens en px, 0 overrides de variables globales.
 */


/* ================================================================
   1. HERO
   Full-bleed: imagen + overlay oscuro + H1 rojo centrado-izq.
   ================================================================ */
.home-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Título anclado al CENTRO VERTICAL (round 2): manifiesto sitúa el bloque
     en y=286–502 sobre un hero de ~870 → centro del bloque ≈ 45%, izquierda.
     El scroll-indicator queda al pie por el margin-top:auto de su propio bloque. */
  justify-content: center;
  padding-bottom: 0;
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- Variante video: reveal del título ----
   El contenido arranca OCULTO (opacity 0) solo cuando hay video (.home-hero--video).
   La clase .is-revealed (agregada por hero-video.js al llegar a ~5s) dispara el
   fade-in. Scopeado a .home-hero--video para no afectar index.php estático. */
.home-hero--video .home-hero__content {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.home-hero--video .home-hero__content.is-revealed {
  opacity: 1;
}

/* Variante video: <video> de fondo reemplaza la imagen estática.
   Mismas dimensiones + object-fit que __img; z-index 0 (detrás del overlay
   ::after z-index:1 y del contenido z-index:2). */
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Overlay gradiente oscuro para legibilidad del texto */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.55) 100%
  );
}

.home-hero__content {
  position: relative;
  z-index: 2;
  padding-inline: var(--container-padding);
  max-width: var(--container-wide);
  /* FIX round 4 (Yago 2026-06-09): bloque "centro centro" — fit-content +
     margin-inline:auto lo centra HORIZONTALMENTE; el flex padre
     (justify-content:center) lo centra VERTICALMENTE. El texto interno queda
     left-aligned con la sangría escalonada (se centra el BLOQUE, no cada línea). */
  width: fit-content;
  margin-inline: auto;
}

.home-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: var(--lh-hero);          /* 0.873 medido (era 1.04) */
  text-transform: uppercase;
  letter-spacing: -0.01em;
  /* Sangría escalonada por renglón (efecto escalera).
     Medido en home.png: base x≈293 / l2 +135pt / l3 base / l4 +262pt
     (artboard 1600 → l2 ≈ 1.63em, l4 ≈ 3.17em a 82.7pt). */
  display: flex;
  flex-direction: column;
  text-align: left;
}

.home-hero__line {
  display: block;
}
.home-hero__line--2 { padding-left: 1.63em; }
.home-hero__line--3 { padding-left: 0; }
.home-hero__line--4 { padding-left: 3.17em; }

/* Scroll indicator — bottom center, clickeable (link a #home-intro).
   "Scroll" rojo arriba + línea vertical hacia abajo (match home-hero.png). */
.home-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-red);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.home-hero__scroll:hover { opacity: 0.7; }
.home-hero__scroll:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 6px;
}

.home-hero__scroll-label {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);
  font-weight: var(--fw-medium);
  color: var(--color-red);
  letter-spacing: 0.02em;
}

.home-hero__scroll-icon {
  display: block;
  width: 12px;
  height: 40px;
  color: var(--color-red);
}


/* ================================================================
   2. INTRO / TAGLINE
   Fondo crema. Layout: 2 cols — label * izq / texto derecha.
   ================================================================ */
.home-intro {
  background: var(--color-cream);
  padding-block: 100px 100px;
}

/* Diseño (dz-intro.png / manifest): * en x≈241 (borde izq del contenido),
   texto en x≈612 → gap grande. Como fracción del contenido (1120pt):
   * en 0%, texto arranca ~33%. Columna del * generosa + texto offset. */
.home-intro__inner {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: 0;
  align-items: start;
}

.home-intro__label {
  font-family: var(--font-heading);
  font-size: var(--text-label-xl);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 1;
  padding-top: 8px;
  /* Anclado a la IZQUIERDA de su columna (no pegado al texto). */
  text-align: left;
  padding-right: 0;
}

.home-intro__text {
  max-width: 780px;
}

.home-intro__body {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--fw-semibold);
  color: var(--color-black-soft);
  line-height: var(--lh-display-sb);    /* 0.925 medido (53pt SemiBold) */
}

.home-intro__body .text-red {
  color: var(--color-red);
}

.home-intro__brand {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-display-sb);    /* 0.925 medido */
  /* Línea en blanco completa antes de "Somos NOVE..." (dz-intro.png). */
  margin-top: 1.1em;
}


/* ================================================================
   3. SLIDER DE TRABAJOS
   Fondo crema. Encabezado + 2 cards lado a lado.
   ================================================================ */
.home-slider {
  background: var(--color-cream);
  padding-bottom: 60px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.home-slider__head {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding-block: 48px 36px;
}

.home-slider__title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);       /* 0.917 medido (36pt) */
}

.home-slider__ver-todos {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-medium);
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-base);
}

.home-slider__ver-todos:hover {
  opacity: 0.75;
}

/* ---- Carrusel real de 3 COLUMNAS (track horizontal con scroll-snap) ----
   despiece.md §1.1.4: col1 VACÍA · col2 Mostaza (borde izq a x≈612/1600≈38%,
   alineada con home-intro__body y "+ Ver todos.") · col3 Sullair (asoma parcial).
   Una columna = 1/3 del container útil → 2 cards + spacer siempre desbordan. */
.home-slider__viewport {
  position: relative;
  width: 100%;
}

.home-slider__track {
  display: flex;
  /* FIX round 3: gap aumentado a 120px para que el overlay protruyente de
     cada card (translate(-58%)) quede completamente visible en el espacio
     entre cards — sin clip ni tapado por la card previa (cotejado dz-slider.png). */
  gap: 120px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sin gutter artificial: la col1 vacía (spacer) hace de margen izquierdo
     y alinea Mostaza con el body de la intro (38%). */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  padding-block: 8px;
  scrollbar-width: none;            /* Firefox */
}
.home-slider__track::-webkit-scrollbar { display: none; } /* WebKit */

.home-slider__track:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
}

/* col1 VACÍA — spacer que empuja Mostaza al ~38% del ancho.
   Su ancho = (38% del container) − padding − parte del gap, de modo que
   el borde izq de Mostaza caiga alineado con "+ Ver todos." (x≈612/1600).
   FIX round 3: gap actualizado a 120px, spacer ajustado en consecuencia. */
.home-slider__spacer {
  flex: 0 0 auto;
  width: clamp(220px, calc(38vw - 120px - var(--container-padding)), 560px);
  scroll-snap-align: start;
  pointer-events: none;
}

/* Work cards en el slider — cada una ocupa ~1 columna (≈38% para que
   Mostaza llene la col central y Sullair asome a la derecha). */
.work-card--slider {
  position: relative;
  flex: 0 0 auto;
  width: clamp(380px, 38vw, 640px);
  scroll-snap-align: start;
}

/* z-index FIX (2026-06-16): cada card es su propio contexto de apilado. El TÍTULO
   de cada card PROTRUYE hacia la IZQUIERDA (overlay translate(-58%)) → para que NO
   se esconda detrás de la card vecina de la IZQUIERDA, cada card debe quedar POR
   ENCIMA de la que tiene a su izquierda → z-index CRECIENTE de izq a der
   (nth-of-type(1) el más bajo … (6) el más alto). Antes era decreciente (card1=6 …
   card6=1) y cada título protruyente quedaba tapado por su vecina izquierda
   (ej. "El Encuentro Lodge" tapado por "Casa Blanca"). */
.work-card--slider { isolation: isolate; }
.home-slider__track .work-card--slider:nth-of-type(1) { z-index: 1; }
.home-slider__track .work-card--slider:nth-of-type(2) { z-index: 2; }
.home-slider__track .work-card--slider:nth-of-type(3) { z-index: 3; }
.home-slider__track .work-card--slider:nth-of-type(4) { z-index: 4; }
.home-slider__track .work-card--slider:nth-of-type(5) { z-index: 5; }
.home-slider__track .work-card--slider:nth-of-type(6) { z-index: 6; }

.work-card--slider .work-card__inner {
  display: block;
  position: relative;
}

/* __img-area: contexto de posicionamiento del overlay.
   Tiene el aspect-ratio y las dimensiones de la imagen.
   NO tiene overflow:hidden → el overlay puede sobresalir libremente. */
.work-card--slider .work-card__img-area {
  position: relative;
  aspect-ratio: 1.42 / 1;
  width: 100%;
}

/* __img-wrap: SÓLO el clip (overflow:hidden + border-radius para esquinas
   redondeadas y el zoom de hover). Sin posicionamiento de overlay. */
.work-card--slider .work-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;     /* esquinas redondeadas (diseño) */
}

.work-card--slider .work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.work-card--slider:hover .work-card__img {
  transform: scale(1.03);
}

/* Overlay de TÍTULO en TEXTO: centrado-vertical sobre el borde IZQ,
   sobresaliendo hacia afuera (parte pisa la imagen, parte protruye).
   Posicionado relativo a __img-area (que tiene el mismo tamaño que la imagen)
   → top:50% = centro vertical de la imagen. Sin overflow:hidden padre → libre. */
.work-card--slider .work-card__overlay {
  position: absolute;
  top: 50%;
  /* Desplazamiento FIJO 55px a la izquierda (Yago 2026-06-18): sin max-width ni
     transform horizontal. El overlay arranca 55px a la izq del borde de la imagen
     y el texto fluye hacia la derecha sobre la imagen. Protrusión constante de 55px
     < gutter ~120px → nunca solapa la card anterior, sin importar el largo del texto. */
  left: -55px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  pointer-events: none;        /* el <a> de la card recibe el click */
  text-align: left;
}

.work-card--slider .work-card__cliente {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 1;
}

/* Categoría en 2 líneas (manifest: "Comunicación" / "institucional"). */
.work-card--slider .work-card__categoria {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.work-card__categoria-line {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-medium);
  color: var(--color-red);
  line-height: 1.02;
}

/* ---- Nav del carrusel: "← Scroll →" (flechas line-art rojas funcionales) ---- */
.home-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
  padding-inline: var(--container-padding);
  color: var(--color-red);
}

.home-slider__nav-label {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);
  font-weight: var(--fw-medium);
  color: var(--color-red);
  letter-spacing: 0.02em;
}

.home-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--color-red);
  transition: opacity var(--transition-base);
}
.home-slider__arrow-svg {
  display: block;
  width: 64px;
  height: 16px;
}
.home-slider__arrow:hover { opacity: 0.6; }
.home-slider__arrow:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}


/* ================================================================
   4. SERVICIOS
   Layout: label "Servicios." izq / lista 4 items (acordeón) derecha.
   ================================================================ */
.home-servicios {
  background: var(--color-cream);
  padding-block: 80px 100px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.home-servicios__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  align-items: start;
}

.home-servicios__label {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);       /* 0.917 medido (36pt) */
  padding-top: 20px;
  padding-right: 48px;
}

/* Lista de servicios */
.home-servicios__list {
  width: 100%;
}

.servicio-item {
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.servicio-item:first-child {
  border-top: 1px solid rgba(0,0,0,0.12);
}

.servicio-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
}

.servicio-item__name {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: var(--lh-display-sb);    /* 0.925 medido (53pt SemiBold) */
  text-transform: uppercase;
  letter-spacing: -0.01em;
  flex: 1;
}

/* ---- Flecha del acordeón (compartida Servicios + FAQs): roja, fina, grande.
   ↓ cerrado / ↑ abierto (rotación 180° del chevron). ---- */
.acc-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
}
.acc-arrow__svg {
  display: block;
  transition: transform var(--transition-base);
}
.servicio-item--open .acc-arrow__svg,
.faq-item--open .acc-arrow__svg {
  transform: rotate(180deg);
}

/* ---- Body animado (height 0 ↔ auto via JS). El padding vive en el inner
   para que la medición de scrollHeight sea correcta. ---- */
.acc-body {
  overflow: hidden;
  height: 0;
  transition: height var(--transition-slow);
}
/* Item abierto por defecto (sin atributo hidden) → visible. */
.servicio-item--open > .acc-body,
.faq-item--open > .acc-body {
  height: auto;
}
.acc-body[hidden] {
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .acc-body { transition: none; }
  .acc-body[hidden] { display: none; }
}

.home-servicios .acc-body__inner {
  padding-bottom: 28px;
}

.servicio-item__label-sub {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: 8px;
}

.servicio-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-light);
  color: var(--color-black);
  line-height: 1.6;
  max-width: 700px;
}


/* ================================================================
   5. FAQs ACORDEÓN
   Layout: label izq / acordeón derecha.
   ================================================================ */
.home-faqs {
  background: var(--color-cream);
  padding-block: 80px 100px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.home-faqs__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  align-items: start;
}

.home-faqs__left {
  padding-top: 8px;
}

.home-faqs__label {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);       /* 0.917 medido (36pt) */
  margin-bottom: 16px;
}

.home-faqs__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: var(--lh-heading);       /* 0.917 medido (36pt) */
  max-width: 280px;                     /* +ancho: tipografía creció con el factor */
}

.home-faqs__right {
  width: 100%;
}


/* ================================================================
   6. BANDA CTA + FORMULARIO
   Movido a assets/css/form-cta.css (Paso 3, feedback cliente jul-2026):
   el form ahora se comparte entre Home y Contacto (partial
   includes/form-cta.php), que no cargan el mismo CSS de página.
   ================================================================ */


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ---- 1440px ---- */
@media (max-width: 1440px) {
  .home-hero__title {
    font-size: 66px;
  }
  /* .home-cta-form__titulo 90px → assets/css/form-cta.css */
}

/* ---- Tablet 768px ---- */
@media (max-width: 768px) {

  /* Hero */
  .home-hero__title {
    font-size: 44px;
  }
  .home-hero {
    min-height: 90vh;
  }

  /* Intro — stack a una columna */
  .home-intro {
    padding-block: 64px;
  }
  .home-intro__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-intro__label {
    text-align: left;
    padding-right: 0;
    font-size: 40px;
  }
  .home-intro__body,
  .home-intro__brand {
    font-size: 34px;
  }

  /* Slider — carrusel: cards más anchas en tablet/mobile. La col1 vacía
     se reduce a un margen chico (el modelo 3-col es de desktop). El overlay
     deja de sobresalir (no hay gutter suficiente) → se ancla DENTRO del
     borde izq de la card para no clipear fuera del viewport. */
  .work-card--slider {
    width: min(80vw, 560px);
  }
  .home-slider__spacer {
    width: 24px;
  }
  .home-slider__track {
    padding-inline: 40px;
    gap: 24px;
  }
  .work-card--slider .work-card__overlay {
    transform: translate(16px, -50%);
  }
  .home-slider__head {
    flex-wrap: wrap;
  }

  /* Servicios — stack */
  .home-servicios__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-servicios__label {
    padding-top: 0;
  }
  .servicio-item__name {
    font-size: 34px;
  }

  /* FAQs — stack */
  .home-faqs__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-faqs__eyebrow {
    max-width: 100%;
    font-size: 26px;
  }

  /* CTA + form → assets/css/form-cta.css */
}

/* ---- Mobile 390px ---- */
@media (max-width: 390px) {

  /* Hero */
  .home-hero__title {
    font-size: 36px;
  }
  .home-hero {
    min-height: 85vh;
    padding-bottom: 48px;
  }

  /* Intro */
  .home-intro__body,
  .home-intro__brand {
    font-size: 28px;
  }

  /* Slider */
  .home-slider__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Servicios */
  .servicio-item__name {
    font-size: 28px;
  }

  /* Slider — carrusel a ancho casi completo */
  .work-card--slider {
    width: 84vw;
  }
  .home-slider__spacer {
    width: 12px;
  }
  .home-slider__track {
    padding-inline: 24px;
  }

  /* CTA → assets/css/form-cta.css */
}