/* ============================================================
   styles-about-landing.css — extraído de styles.css (ver docs/audit-history)
   Cargado solo por: about.html + landing-*.html (ES/EN)
   ============================================================ */

/* ============================================================
   ABOUT US — HERO DE VIDEO
   ============================================================ */
.founder-hero-video {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.founder-hero-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Landing pages: formulario de contacto junto al video del hero.
   Desktop: el formulario flota sobre el video (columna derecha).
   Móvil: el formulario es lo PRIMERO que se ve (no puede desaparecer)
   y el video va debajo, en formato vertical — no se superponen. */
.hero-form-overlay { display: block; }
@media (min-width: 901px) {
  .hero-form-overlay {
    position: relative;
    z-index: 1;
    width: 480px;
    max-width: 92%;
    margin: 140px 4% 60px 0;
  }
  .hero-form-title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 20px;
  }
  .hero-form-title .italic-blue {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--blue);
  }
}

/* Monitores grandes (no laptops): el contenedor del form crece más
   allá de los 480px pensados para pantallas de laptop. */
@media (min-width: 1500px) {
  .hero-form-overlay { width: 640px; }
}

/* Pantallas anchas pero bajas (tablets en horizontal, Nest Hub Max,
   laptops con poca altura): el video de fondo tiene una zona de
   blur pensada para caber en una sola pantalla. Con los márgenes y el
   título a tamaño completo, el formulario se salía de esa zona hacia
   la parte del video sin blur. Se reduce el margen superior/inferior y
   el título para que todo el conjunto quepa mucho más cerca del alto
   real de la pantalla (el iframe del CRM no se puede comprimir más,
   así que no es posible eliminar el desborde por completo, pero se
   reduce drásticamente). */
@media (min-width: 901px) and (max-height: 850px) {
  .hero-form-overlay { width: 380px; margin: 100px 60px 16px 0; }
  .hero-form-title {
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.2;
    margin-bottom: 10px;
  }
}

/* Móvil: apilar formulario (primero) + video vertical (después) en
   vez del video de fondo a pantalla completa. Escopado a .landing-hero
   para no afectar el hero de about.html, que no tiene formulario. */
@media (max-width: 900px) {
  .landing-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    height: auto;
  }
  .landing-hero video {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
  }
  .landing-hero .hero-form-overlay {
    order: 1;
    width: 100%;
    padding: 110px 20px 24px;
  }
  .hero-form-title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .hero-form-title .italic-blue {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--blue);
  }
}


/* ============================================================
   ABOUT US — DECLARACIÓN INSTITUCIONAL
   ============================================================ */
.founder-statement {
  background: var(--navy);
  padding: 100px 60px;
}
.founder-message {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: #FFFFFF;
  width: 100%;
  max-width: 100%;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.28);
}

@media (max-width: 1000px) {
  .founder-statement { padding: 70px 24px; }
}


/* ============================================================
   ABOUT US — VIDEO INSTITUCIONAL (debajo de la declaración)
   ============================================================ */
.founder-video-2 {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.founder-video-2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   ABOUT US — KINETIC TYPOGRAPHY (DEFENDEMOS TUS DERECHOS)
   ============================================================ */
#kinetic-wrapper {
  position: relative;
  height: 200vh;
  background: var(--white);
}
#kinetic-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 120px;
  overflow: hidden;
}
.kinetic-institutional {
  align-self: flex-end;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  color: #000000;
  max-width: 650px;
  line-height: 1.25;
  margin-bottom: 80px;
}
/* Landing pages: el párrafo institucional ocupa todo el ancho de la
   sección en vez de quedar angosto y pegado a la derecha. */
.landing-kinetic .kinetic-institutional {
  align-self: stretch;
  max-width: 100%;
  text-align: left;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
}
.kinetic-headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 28px;
  text-align: center;
}
.kinetic-word {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 4.7vw, 68px);
  color: #000000;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.kinetic-divider {
  width: 90%;
  max-width: 1400px;
  height: 1px;
  background: #D9D9D9;
  margin: 40px auto 36px;
}
.practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto 40px;
}
.practice-item {
  padding-right: 20px;
  border-right: 1px solid #EEE;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.practice-item.in-view { opacity: 1; transform: translateY(0); }
.practice-item:last-child { border-right: none; }
.practice-number {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 60px);
  color: var(--gold-light-2, #F2B24A);
  margin-bottom: 10px;
}
.practice-text {
  font-family: var(--font-sans);
  font-size: 16px;
  color: #333;
  line-height: 1.4;
}
.btn-contact-dark {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 20px;
  padding: 0 32px;
  height: 70px;
  min-width: 300px;
  justify-content: center;
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn-contact-dark:hover { background: #F2B24A; color: var(--navy); transform: scale(1.05); }

@media (max-width: 900px) {
  /* Con las tarjetas en una sola columna el contenido pasa a ser mucho
     más alto que una pantalla, así que la sección deja de fijarse
     (sticky de 100vh con overflow:hidden recortaría el final) y fluye
     normal, creciendo con su contenido. El JS detecta este ancho y no
     aplica la animación por scroll (ver about.js). */
  #kinetic-wrapper { height: auto; }
  #kinetic-sticky {
    position: static;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    padding: 0 24px 40px;
  }
  /* padding-top para que el párrafo no quede pegado al video de arriba. */
  .kinetic-institutional {
    text-align: left;
    align-self: flex-start;
    font-size: 24px;
    padding-top: 56px;
  }
  .kinetic-word { font-size: 30px; }
  /* Una tarjeta por fila: a 2 columnas el texto quedaba muy comprimido. */
  .practice-grid { grid-template-columns: 1fr; }
  .practice-item {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-right: 0;
    padding-bottom: 16px;
  }
  .practice-number { font-size: 46px; }
  .practice-text { font-size: 19px; }
  /* Separa el botón del grid de arriba y del video de abajo. */
  .btn-contact-dark { margin-top: 32px; margin-bottom: 48px; }
}


/* ============================================================
   ABOUT US — VIDEO ABOGADO BANCARROTA
   ============================================================ */
.full-video-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.full-video-section video,
.full-video-section iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}


/* ============================================================
   ABOUT US — TESTIMONIOS DE CLIENTES
   ============================================================ */
.testimonials-section { background: var(--white); padding: 120px 60px; }
.testimonials-heading {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 4.7vw, 68px);
  color: #000000;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 160px;
}
.testimonials-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
  row-gap: 200px;
}
.testimonial-card {
  --y-offset: 0%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: 0 0 40px rgba(37,56,165,0.28), 0 20px 45px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(var(--y-offset)) translateY(40px);
  transition: opacity 1.3s ease, transform 1.2s ease, box-shadow 0.4s ease;
}
.testimonial-card.in-view { opacity: 1; transform: translateY(var(--y-offset)); }
.testimonial-card.in-view:hover {
  transform: translateY(var(--y-offset)) scale(1.06);
  box-shadow: 0 0 55px rgba(37,56,165,0.5), 0 30px 60px rgba(0,0,0,0.25);
  z-index: 2;
}
.testimonial-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transition: transform 0.4s ease;
}
.testimonial-card:hover iframe { transform: scale(1.12); }
/* Cards laterales más arriba; la del centro queda casi a la mitad de
   la altura de las laterales, para un efecto de tablero escalonado */
.testimonials-grid > .testimonial-card:nth-child(3n+1),
.testimonials-grid > .testimonial-card:nth-child(3n) {
  --y-offset: -8%;
}
.testimonials-grid > .testimonial-card:nth-child(3n+2) {
  --y-offset: 42%;
}

@media (max-width: 900px) {
  .testimonials-section { padding: 80px 24px; }
  .testimonials-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .testimonials-grid > .testimonial-card:nth-child(3n+1),
  .testimonials-grid > .testimonial-card:nth-child(3n),
  .testimonials-grid > .testimonial-card:nth-child(3n+2) {
    --y-offset: 0%;
  }
}