/* ============================================================
   styles-home.css — extraído de styles.css (ver docs/audit-history)
   Cargado solo por: index.html, en/index.html
   ============================================================ */

/* ============================================================
   HERO — el video arranca ocupando toda la pantalla y, al hacer
   scroll, el hero se divide en dos columnas y el video se acomoda
   en la derecha.

   La conduce script.js interpolando la CAJA del video (top/left/
   width/height) en vez de un scale(): así object-fit:cover vuelve a
   calcular el encuadre en cada paso y el video nunca se deforma
   —un scale() con distinto factor horizontal y vertical sí lo
   estiraría, y obligaría a contrarrestarlo en el botón de sonido—.
   ============================================================ */
#hero-wrapper {
  position: relative;
  height: 320vh; /* recorrido de scroll que dura la transición */
  background: var(--navy);
}
#hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--navy);
}
/* Layout FINAL de dos columnas: está armado desde el principio, solo
   que tapado por el video mientras este ocupa toda la pantalla.

   Es un grid (no flex) a propósito: con "align-content:center" la fila
   mide exactamente lo que ocupa su contenido (título + hueco del video),
   nunca el 100% del alto disponible — así el espacio libre arriba/abajo
   siempre es "alto disponible menos lo que el contenido realmente
   necesita", nunca un número de alto inventado (ni 100%, ni 60%, ni un
   px fijo) que en algún tamaño de pantalla se queda corto y recorta el
   contenido, o se queda largo y dejar un hueco enorme. */
.hero-content {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  align-content: center;
  /* El header es fixed y no empuja el contenido: sin este espacio, en
     laptops de poca altura el título se asomaba debajo del header. */
  padding-top: 130px;
  /* Las columnas son porcentajes del ancho del viewport: sin este tope,
     en monitores muy anchos (4K, 5K, ultrawide) el logo y el video
     quedan diminutos dentro de columnas enormes. Con el tope, el layout
     se congela a un ancho cómodo y se centra sobre el navy de fondo.
     width:100% explícito (no implícito vía stretch) porque, cuando
     #hero-sticky también es grid (pantallas altas, ver media query más
     abajo), este bloque pasa a ser un grid item que a su vez es grid
     container con columnas en % — sin el 100% explícito el navegador no
     lo estira a la celda y lo encoge a un ancho mucho menor (~1000px). */
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}
.hero-left {
  position: relative;
  opacity: 0; /* lo revela script.js al avanzar el scroll */
}
.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
}
.hero-hh {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-hh img { max-width: 300px; }
.hero-message {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 80px);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 40px;
  opacity: 0; /* lo revela script.js */
}
.hero-message .highlight-gold { color: var(--gold); }

/* Hueco invisible: no se ve, solo define dónde y de qué tamaño queda
   el video al terminar la transición. */
.hero-video-slot {
  width: min(650px, 100%);
  height: 380px;
}
/* Desde 1500px la columna derecha (60% del viewport) es mucho más ancha
   que estos 650px fijos, dejando un vacío grande a la derecha del video.
   Crece con el viewport (53vw) en vez de saltar al 100% de la columna:
   así queda un margen proporcional a la derecha en vez de pegarse al
   borde. width y height escalan con el mismo factor (53vw y 31vw, donde
   31/53 = 380/650) para mantener siempre la proporción 650:380 sin
   deformarse; el tope en px evita que crezca sin límite en monitores
   ultra anchos. */
@media (min-width: 1500px) {
  .hero-video-slot {
    width: 53vw;
    height: 31vw;
    max-width: 1000px;
    max-height: 585px;
  }
}

/* Por debajo de 1300px de alto disponible, todo sigue tal cual (arriba):
   #hero-sticky mide 100vh y .hero-content 100% — pantallas normales de
   laptop/desktop (900-1200px de alto útil) no entran aquí, cero cambios.

   Por encima de 1300px (monitores muy altos: 4K, 5K, ultrawide) se
   achican TANTO #hero-content (a 1100px, centrado) COMO el propio
   #hero-sticky y #hero-wrapper — así "Nos destacamos" asoma debajo sin
   dejar un margen enorme de navy vacío alrededor del hero ya achicado.
   Esto había roto antes el video de arranque a pantalla completa (que
   es position:absolute dentro de #hero-sticky, y #hero-sticky tiene
   overflow:hidden: si mide menos que la pantalla real, el video queda
   recortado a esa altura). Se resolvió en script.js: .hero-video ahora
   es position:fixed (relativo al viewport, no a #hero-sticky) mientras
   dura el pin del scroll, así que ya no le importa cuánto mida
   #hero-sticky — solo vuelve a position:absolute una vez que el
   scroll ya pasó el hero por completo, para desplazarse con la página
   con normalidad. Por eso este bloque puede volver a achicar el
   contenedor con seguridad. */
@media (min-height: 1300px) {
  /* 900px de recorrido extra (2200 - 1300 de sticky) alcanza de sobra
     para la animación, y deja que "Nos destacamos" empiece a asomar
     ni bien la pantalla es más alta que esos 2200px. */
  #hero-wrapper { height: 2200px; }
  #hero-sticky {
    height: 1300px;
    display: grid;
    /* grid-template-columns:1fr es necesario: sin esto, una columna
       implícita ("auto") se ajusta al CONTENIDO en vez de estirarse a
       llenar el contenedor (a diferencia de flexbox) — .hero-content
       terminaba angosto (~1000px en vez de sus 1900px de tope) y el
       video se salía por fuera de él. */
    grid-template-columns: 1fr;
    align-items: center; /* solo afecta a .hero-content (position:relative);
                             .hero-video y .scroll-indicator son position:absolute/fixed
                             y quedan fuera del flujo del grid, sin verse afectados */
  }
  .hero-content {
    height: 1100px;
  }
}

.hero-video {
  /* fixed (no absolute): así el video de arranque cubre el viewport
     real sin importar cuánto mida #hero-sticky (ver media
     min-height:1300px, arriba) — con absolute, el overflow:hidden de
     #hero-sticky lo recortaba en cuanto este medía menos que la
     pantalla. script.js lo cambia a absolute recién cuando el scroll ya
     pasó el hero por completo, para que entonces sí se desplace con la
     página como el resto del contenido (ver updateHero en script.js). */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  will-change: top, left, width, height;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 20px;
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
  animation: bounce-down 1.8s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

@media (max-width: 900px) {
  /* En móvil no hay transición por scroll (ver script.js): el hero es
     una sola pantalla con el video completo, en vez de las ~3 pantallas
     de recorrido que necesita la animación de escritorio —si no,
     quedarían 2 pantallas de scroll vacío—. dvh evita que la barra del
     navegador recorte el borde inferior del video. */
  #hero-wrapper { height: 100vh; height: 100dvh; }
  #hero-sticky { position: static; height: 100vh; height: 100dvh; }
  .hero-content { display: none; }
  .hero-video {
    /* En móvil no hay animación por scroll (JS sale de inmediato, ver
       isMobileHero en script.js): vuelve a absolute, para que el video
       viva dentro del flujo normal de #hero-wrapper (position:relative)
       y se desplace con la página como cualquier otro contenido, en vez
       de quedar fijo tapando el resto del sitio al hacer scroll. */
    position: absolute;
    border-radius: 0;
    box-shadow: none;
    will-change: auto;
  }
  .scroll-indicator { display: none; }
}

/* Botón de activar/silenciar sonido — compartido por todos los
   videos locales con autoplay (no aplica a los embeds de YouTube) */
.video-unmute-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(7,26,45,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 5;
  /* Contrarresta el scale() que algunos videos aplican por JS a su
     contenedor padre, para que el botón mantenga siempre 52px reales
     sin importar cuánto crezca el video (por defecto no hace nada). */
  transform: scale(var(--unmute-inv-x, 1), var(--unmute-inv-y, 1));
}
.video-unmute-btn:hover {
  background: rgba(7,26,45,0.8);
  transform: scale(calc(var(--unmute-inv-x, 1) * 1.08), calc(var(--unmute-inv-y, 1) * 1.08));
}
.video-unmute-btn svg { width: 22px; height: 22px; }
.video-thumb {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,26,45,0.15), rgba(7,26,45,0.55)),
    linear-gradient(135deg, #1c3a5e 0%, #0d2237 50%, #050d18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217,164,65,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.play-btn {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, background 0.4s ease;
}

/* ============================================================
   INTRO — ¿Necesitas asistencia legal?
   ============================================================ */
.intro-section {
  background: var(--white);
  padding: 120px 80px;
}
.intro-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.intro-eyebrow {
  display: inline-block;
  background: #FDF3E1;
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.intro-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 46px);
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 24px;
}
.intro-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 520px;
  margin-bottom: 36px;
}
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); }
.btn-gold .arrow { transition: transform 0.3s ease; }
.btn-gold:hover .arrow { transform: translateX(4px); }

.intro-video-frame {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/11;
}
.intro-video-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2c4a6e 0%, #0f2338 60%, #071A2D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .intro-section { padding: 80px 24px; }
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
}

.reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }


/* ============================================================
   ABOUT US — Nos destacamos
   ============================================================ */
.about-section {
  background: var(--navy);
  padding: 140px 24px 160px;
}
.about-header {
  max-width: 900px;
  margin: 0 auto 100px;
  text-align: center;
}
.section-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-eyebrow.gold { color: var(--gold); }
.deco-line {
  width: 40px; height: 2px;
  background: var(--gold);
  margin: 0 auto 32px;
}
.about-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 96px);
  color: var(--white);
  margin-bottom: 28px;
  line-height: 1.05;
}
.about-desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 2vw, 24px);
  color: rgba(255,255,255,0.85);
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-cards {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.about-card {
  width: 85%;
  min-height: 300px;
  background: var(--white);
  border-radius: 12px;
  padding: 48px 56px;
  position: relative;
  opacity: 0;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1.1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.about-card.card-left { align-self: flex-start; transform: translateX(-120px); }
.about-card.card-right { align-self: flex-end; transform: translateX(120px); }
.about-card.in-view { opacity: 1; transform: translateX(0); }

.card-number {
  display: inline-block;
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: solid 4px var(--gold);
}
.card-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 60px);
  color: var(--ink);
  margin-bottom: 20px;
}
.card-desc {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.6vw, 24px);
  color: var(--gray-text);
  max-width: 640px;
  line-height: 1.55;
}

@media (max-width: 800px) {
  .about-card { width: 100%; padding: 32px; min-height: auto; }
  .about-card.card-left, .about-card.card-right { transform: translateY(60px); }
  .about-section { padding: 100px 16px; }
}


/* ============================================================
   SERVICES INTRODUCTION
   ============================================================ */
.services-intro-section {
  background: var(--navy);
  padding: 180px 60px;
  text-align: center;
}
.services-intro-grid {
  max-width: 1300px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  text-align: left;
}
.services-intro-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1.02;
  color: var(--white);
  width: 100%;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.28);
}
/* Cursor parpadeante del efecto máquina de escribir */
.tw-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 6px;
  background: var(--gold);
  vertical-align: -0.12em;
  animation: tw-blink 0.8s steps(1) infinite;
}
@keyframes tw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.services-intro-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 28px);
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  width: 100%;
  padding-right: 35%;
}
.reveal-fade-up {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal-fade-up.in-view { opacity: 1; transform: translateY(0); }
.reveal-fade-in {
  opacity: 0;
  transition: opacity 1s ease 0.3s;
}
.reveal-fade-in.in-view { opacity: 1; }

@media (max-width: 900px) {
  .services-intro-section { padding: 100px 24px; }
  .services-intro-grid { gap: 24px; }
  .services-intro-text { padding-right: 0; }
}


/* ============================================================
   SERVICE CUBES — cubo giratorio automático (CSS puro)
   ============================================================ */
.services-cube-section {
  background: var(--navy);
  padding: 100px 40px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cube-dots {
  display: flex;
  gap: 10px;
  margin-top: 36px;
}
.cube-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.cube-dot.active { background: var(--gold); transform: scale(1.2); }
.services-cube-stage {
  width: 70vw;                 /* 70% del ancho del viewport */
  aspect-ratio: 830 / 445;     /* mantiene la proporción de la cara del cubo */
  perspective: 5200px;
  overflow: hidden;
}
.services-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: services-cube-spin 13s linear infinite;
}
.services-cube:hover { animation-play-state: paused; }

@keyframes services-cube-spin {
  0%, 23%  { transform: rotateX(0deg); }
  25%, 48% { transform: rotateX(90deg); }
  50%, 73% { transform: rotateX(180deg); }
  75%, 98% { transform: rotateX(270deg); }
  100%     { transform: rotateX(360deg); }
}

.services-cube-face {
  position: absolute;
  inset: 0;
  display: flex;
  text-decoration: none;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  backface-visibility: hidden;
}
/* translateZ = mitad de la altura de la cara (70vw * 445/830 / 2 = 18.77vw) */
.services-cube-face:nth-child(1) { transform: translateZ(18.77vw); }
.services-cube-face:nth-child(2) { transform: rotateX(-90deg) translateZ(18.77vw); }
.services-cube-face:nth-child(3) { transform: rotateX(180deg) translateZ(18.77vw); }
.services-cube-face:nth-child(4) { transform: rotateX(90deg) translateZ(18.77vw); }

.cube-face-text {
  position: relative;
  flex: 1 1 415px;
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  overflow: hidden;
  transition: background 0.4s ease;
}
.services-cube-face:hover .cube-face-text {
  background: linear-gradient(120deg, var(--gold-dark), var(--gold), var(--gold-light));
}
.cube-num {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 96px;
  color: var(--ink);
  line-height: 1;
}
.cube-service {
  display: block;
  width: 80%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.15;
  color: var(--ink);
}
.cube-more {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.services-cube-face:hover .cube-more {
  opacity: 1;
  transform: translateY(0);
}
.cube-face-photo {
  flex: 1 1 415px;
  background-size: cover;
  background-position: center;
}
.img-immigration { background: url("img/servicios/inmigracion.webp") center/cover no-repeat; }
.img-bankruptcy { background: url("img/servicios/bancarrota.webp") center/cover no-repeat; }
.img-injury { background: url("img/servicios/lesiones-personales.webp") center/cover no-repeat; }
.img-realestate { background: url("img/servicios/bienes-raices.webp") center/cover no-repeat; }

@media (max-width: 700px) {
  /* En móvil no hay espacio para foto+texto lado a lado (queda todo
     comprimido y el texto se corta), así que la cara del cubo pasa a
     apilarse: foto arriba, texto abajo.
     El alto del cubo se define en vh (no con aspect-ratio a partir del
     ancho), para que realmente llene la altura de la pantalla sin
     importar qué tan angosto sea el celular. */
  .services-cube-section {
    min-height: 100vh;
    padding: 20px 0;
  }
  .services-cube-stage {
    width: 100%;
    height: 74vh;
  }
  .services-cube-face:nth-child(1) { transform: translateZ(37vh); }
  .services-cube-face:nth-child(2) { transform: rotateX(-90deg) translateZ(37vh); }
  .services-cube-face:nth-child(3) { transform: rotateX(180deg) translateZ(37vh); }
  .services-cube-face:nth-child(4) { transform: rotateX(90deg) translateZ(37vh); }
  .services-cube-face { flex-direction: column; }
  /* El panel de texto se ajusta a su contenido -sin dejar espacio
     vacío de más-, pero con número y título más grandes para que
     ese contenido llene bien el panel en vez de verse como una tira
     angosta. La foto ocupa TODO el resto de la cara al 100%. */
  .cube-face-text { flex: 0 0 auto; padding: 70px 18px 44px 18px; gap: 16px; }
  .cube-face-photo { flex: 1 1 auto; }
  .cube-num { font-size: 68px; }
  .cube-service { font-size: 24px; width: 95%; }
  .cube-more { font-size: 18px; }

  /* Al tocar la card no hay espacio para mostrar número + título +
     "ver más" a la vez, así que al activarse solo se ve "ver más". */
  .services-cube-face:hover .cube-num,
  .services-cube-face:hover .cube-service {
    display: none;
  }

  /* Recorte centrado un poco hacia arriba, para no cortar la cara de
     las personas en las fotos verticales. */
  .img-immigration, .img-bankruptcy, .img-injury, .img-realestate {
    background-position: center 25%;
  }
}


/* ============================================================
   TEAM INTRODUCTION (Zoom-into-text)
   ============================================================ */
#team-intro-wrapper {
  position: relative;
  height: 200vh;
  background: var(--navy);
}
#team-intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  text-align: center;
}
/* Encabezado del intro de Team: espacio compacto (≤40px) entre "TEAM" y el título */
#team-intro-sticky .section-eyebrow { margin-bottom: 6px; }
#team-intro-sticky .deco-line { margin: 0 auto 14px; }
.team-intro-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 72px);
  color: var(--white);
  margin-top: 14px;
}
.team-giant {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(140px, 24vw, 320px);
  line-height: 0.82;
  color: var(--white);
  white-space: nowrap;
  will-change: transform;
  transform-origin: center bottom;
}

@media (max-width: 700px) {
  /* En escritorio esta sección se fija en pantalla completa (200vh de
     scroll) para que la palabra haga zoom mientras el usuario se desplaza.
     En móvil ese pin de altura completa deja un hueco navío enorme, sin
     contenido, sea donde sea que se ubique la palabra dentro del cuadro:
     mover la palabra no reduce el hueco, solo lo reubica. Por eso en
     móvil se quita el "pin" (position:sticky) y el bloque pasa a ser una
     sección normal y compacta: título y palabra fluyen juntos, sin
     espacio vacío de por medio ni after. El JS detecta este ancho y no
     aplica el zoom (ver script.js / computeMaxScale). */
  #team-intro-wrapper { height: auto; }
  #team-intro-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 90px 24px 70px;
  }
  .team-giant {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 24px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: clamp(48px, 16vw, 120px);
    /* Algunos navegadores móviles inflan automáticamente el tamaño de
       fuente en bloques grandes de texto en negrita para "legibilidad",
       ignorando el clamp() del CSS; esto puede ensanchar la palabra más
       allá de la pantalla y, junto con overflow-x:hidden en <body>,
       recortar el lado que cae en x negativo. Se desactiva ese ajuste
       automático para que el tamaño real sea siempre el que definimos. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}


/* ============================================================
   TEAM DIRECTORY — 2 columnas (destacado 35% + grid 65%)
   ============================================================ */
.team-directory-section {
  background: var(--white);
  padding: 120px 60px;
}
.team-layout {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 56px;
  align-items: start;
}

/* Columna izquierda: persona destacada */
.team-feature {
  position: sticky;
  top: 110px;
}
.team-feature-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: #e9edf2 center top / cover no-repeat;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  transition: opacity 0.3s ease;
}
.team-feature-name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 22px;
  line-height: 1.1;
}
.team-feature-role {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 18px);
  color: var(--blue);
  margin-top: 6px;
}

/* Columna derecha: título + grid de fotos pequeñas */
.team-directory-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 6px;
  margin-bottom: 34px;
}
/* Grid de tarjetas en filas de 5 (12 miembros = 5 + 5 + 2), centrado
   con flexbox para que la última fila incompleta también quede centrada */
.team-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.team-member {
  cursor: pointer;
  flex: 0 0 calc((100% - 4 * 24px) / 5);
}
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.team-member:hover .team-photo,
.team-member.active .team-photo { transform: scale(1.04); filter: grayscale(0); }

@media (max-width: 900px) {
  .team-directory-section { padding: 80px 24px; }
  .team-layout { grid-template-columns: 1fr; gap: 40px; }
  .team-feature { position: static; max-width: 360px; margin: 0 auto; text-align: center; }
  .team-gallery { gap: 18px; }
  .team-member { flex-basis: calc((100% - 3 * 18px) / 4); }
}
@media (max-width: 480px) {
  .team-gallery { gap: 12px; }
  .team-member { flex-basis: calc((100% - 2 * 12px) / 3); }
}