/*
 * nosotros.css — CSS específico de la página Nosotros de NOVE Producciones.
 * Depende de tokens.css (cargado antes en head.php).
 * Artboard 1600pt. Factor orientativo 0.9. Tokens en px, 0 overrides globales.
 *
 * Medidas trazables al manifiesto despiece/nosotros.json:
 *   Hero: img 0–900pt; título x=613 (~38%) y=229–518; badge x=244 y=788.
 *   Intro: stat "+10" x=239 y=932; body x=612 y=944–1483.
 *   Equipo: label x=241 y=1639; nombres *Pablo/*Pato/*Milton y=1742 (x=238/602/967).
 */


/* ================================================================
   1. HERO
   Imagen oscura full-bleed + título mezcla rojo/crema anclado a la
   derecha (~38%), badge "VIDEO INSTITUCIONAL _" abajo-izquierda.
   ================================================================ */
.nos-hero {
  position: relative;
  width: 100%;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

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

/* Overlay oscuro sutil para legibilidad (la imagen ya viene con tinte rojo). */
.nos-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.20) 40%,
    rgba(0,0,0,0.30) 100%
  );
}

.nos-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Título anclado a ~38% del ancho (x=613/1600). Sangría izquierda con padding. */
.nos-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-hero);          /* 0.873 medido */
  letter-spacing: -0.01em;
  /* Empuja el bloque del título a la derecha (~38% del container útil). */
  padding-left: 38%;
  max-width: 100%;
}

.nos-hero__line {
  display: block;
}

/* Badge abajo-izquierda */
.nos-hero__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 2;
  width: 100%;
}

.nos-hero__badge-text {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);     /* 12pt */
  font-weight: var(--fw-regular);
  color: var(--color-red);
  letter-spacing: 0.08em;
}


/* ================================================================
   2. INTRO / TAGLINE
   Fondo crema. Col izq: stat "+10" + "Años creando / emociones."
   Col der (~38%): body con highlights rojos + cierre rojo bold.
   ================================================================ */
.nos-intro {
  background: var(--color-cream);
  padding-block: 100px 100px;
}

/* Grid: stat (col izq, ~33%) + body (col der ~38% del artboard).
   Manifest: stat x=239, body x=612 → body arranca a ~38% del ancho. */
.nos-intro__inner {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: 0;
  align-items: start;
}

.nos-intro__stat {
  display: flex;
  flex-direction: column;
}

.nos-intro__stat-num {
  font-family: var(--font-heading);
  font-size: var(--text-hero);        /* 82.7pt × 1.2208 ≈ 101px */
  font-weight: var(--fw-semibold);
  color: var(--color-red);
  line-height: var(--lh-tight);       /* 1.0 — número solo */
}

.nos-intro__stat-label {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);  /* 36pt × 1.2208 ≈ 44px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);     /* 0.917 medido */
  margin-top: 6px;
}

.nos-intro__text {
  max-width: 820px;
}

.nos-intro__body {
  font-family: var(--font-heading);
  font-size: var(--text-display);     /* 53pt × 1.2208 ≈ 65px */
  font-weight: var(--fw-semibold);
  color: var(--color-black-soft);
  line-height: var(--lh-display-sb);  /* 0.925 medido (53pt SemiBold) */
  margin-bottom: 1.1em;               /* línea en blanco entre párrafos (diseño) */
}

.nos-intro__body:last-child {
  margin-bottom: 0;
}

/* Cierre rojo bold ("Creemos en el poder...") */
.nos-intro__body--accent {
  font-weight: var(--fw-bold);
  color: var(--color-red);
}


/* ================================================================
   3. EQUIPO — 3 perfiles
   Fondo crema. Label "Nosotros." + grid 3 columnas.
   ================================================================ */
.nos-equipo {
  background: var(--color-cream);
  padding-block: 0 110px;
}

.nos-equipo__label {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);  /* 36pt × 1.2208 ≈ 44px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-heading);     /* 0.917 medido */
  margin-bottom: 56px;
}

.nos-equipo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}

/* Foto portrait ~4:5 (asset 1293×1607 → ratio 0.805).
   overflow:visible para que el label sobresalga a la izquierda sin ser cortado.
   El clip de la imagen lo hace perfil__img-clip. */
.perfil__img-wrap {
  position: relative;
  width: 100%;
  overflow: visible;            /* label sobresale a la izquierda */
  background: transparent;
}

/* Clip interno que contiene la imagen (aspect-ratio original del wrap). */
.perfil__img-clip {
  width: 100%;
  aspect-ratio: 1293 / 1607;
  overflow: hidden;
  background: #ddd;
}

/* Label *Nombre rojo solapado al borde superior-izquierdo de la foto.
   Diseño (artboard): foto x=285/648/1010 y=1736 w=310; label x=239/603/968 y=1743.
   Δx = −46pt × 1.2208 ≈ −56px (sobresale a la izquierda).
   Δy = +7pt × 1.2208 ≈ +9px desde el top de la foto (prácticamente en el borde superior).
   position:absolute relativo a perfil__img-wrap; z-index encima de la foto. */
.perfil__label {
  position: absolute;
  top: 9px;                     /* Δy +7pt×1.2208 desde top de la foto */
  left: -56px;                  /* Δx −46pt×1.2208 — sobresale a la izquierda */
  z-index: 2;
  font-family: var(--font-heading);
  font-size: var(--text-display);     /* 53pt × 1.2208 ≈ 65px */
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.perfil__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.perfil__nombre {
  font-family: var(--font-body);
  font-size: var(--text-body-md);     /* Sora 16 */
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-top: 28px;
  margin-bottom: 12px;
}

.perfil__cargo {
  font-family: var(--font-body);
  font-size: var(--text-body);        /* Sora 14 */
  font-weight: var(--fw-light);
  color: var(--color-black);
  line-height: 1.5;
  margin-bottom: 20px;
}

.perfil__bio-par {
  font-family: var(--font-body);
  font-size: var(--text-body);        /* Sora 14 */
  font-weight: var(--fw-light);
  color: var(--color-black);
  line-height: var(--lh-body-airy);   /* 1.786 medido (bio nosotros aireada) */
  margin-bottom: 16px;
}

.perfil__bio-par:last-child {
  margin-bottom: 0;
}


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

/* ---- 1440px ---- */
@media (max-width: 1440px) {
  .nos-hero__title { font-size: 64px; }
}

/* ---- 1366px ---- */
@media (max-width: 1366px) {
  .nos-hero__title {
    font-size: 58px;
    padding-left: 34%;
  }
}

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

  /* Hero — título a ancho casi completo, menos sangría */
  .nos-hero {
    min-height: 74vh;
  }
  .nos-hero__title {
    font-size: 46px;
    padding-left: 0;
  }

  /* Intro — stack a una columna */
  .nos-intro {
    padding-block: 64px;
  }
  .nos-intro__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .nos-intro__body {
    font-size: 32px;
  }

  /* Equipo — 1 columna (perfiles apilados) */
  .nos-equipo {
    padding-bottom: 72px;
  }
  .nos-equipo__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .perfil__img-wrap {
    max-width: 420px;
  }
  /* Reducir offset negativo en mobile para no desbordar el viewport.
     Desktop fiel (−41px); mobile reducido (−20px) para evitar overflow. */
  .perfil__label {
    left: -20px;
    font-size: 38px;
  }
}

/* ---- Mobile 390px ---- */
@media (max-width: 390px) {
  .nos-hero__title { font-size: 36px; }
  .nos-intro__body { font-size: 26px; }
  .nos-intro__stat-num { font-size: 58px; }
  .nos-intro__stat-label { font-size: 26px; }
  .nos-equipo__label { font-size: 28px; }
  .perfil__label {
    font-size: 32px;
    left: -16px;
  }
}