/* ================================================
   LEVEL TECH — QUIÉNES SOMOS — styles.css
   Namespace: .qs-*

   ESTRUCTURA HTML (real):
   .qs-dome  [flex-row en desktop, flex-col en mobile]
     .qs-left          → col izquierda: título + texto + stats
       .qs-header-row  → número + título
       .qs-body-text   → 3 párrafos
       .qs-stats       → stats en fila horizontal
     .qs-img-col       → col derecha: imagen que iguala altura de .qs-left

   BREAKPOINTS:
   Desktop base        ≥1200px + landscape + ≥500px alto
   MacBook Air/medio   781–1080px alto, ≥1200px ancho
   Laptop corto        ≤780px alto, ≥1200px ancho
   Tablet/mobile       negación del desktop (1 col, scroll libre)
   Mobile pequeño      ≤479px portrait
   Landscape mobile    ≤500px alto
================================================ */

/* ══════════════════════════════════════════════
   SECCIÓN
══════════════════════════════════════════════ */
.qs-section {
  position: relative;
  /* padding-top: fallback CSS — JS sobreescribe con el valor real medido del nav
     (applyNavOffset en script.js). 11rem como fallback seguro pre-JS. */
  padding: 11rem clamp(2rem, 5vw, 6rem) clamp(3rem, 5vw, 5rem);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════
   CÚPULA — eliminada. El contenido va al aire
   con el WebGL como fondo directo.
   .qs-dome se mantiene como wrapper de layout
   sin glassmorphism ni bordes.
══════════════════════════════════════════════ */
.qs-dome {
  position: relative;
  width: 100%;
  max-width: 1400px;   /* limitar en pantallas muy anchas */
  /* Sin background, sin border, sin backdrop-filter */
  padding: 0 clamp(1rem, 3vw, 2rem);

  /* Layout: 2 columnas en desktop */
  display: flex;
  flex-direction: row;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}

/* Sin highlight superior — no hay borde que decorar */
.qs-dome::before { display: none; }

/* ── Esquinas decorativas — ocultas (sin cúpula no aplican) ── */
.qs-dome-corner {
  display: none;
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none; z-index: 6;
}
.qs-dome-corner::before,
.qs-dome-corner::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,.32);
  box-shadow: 0 0 6px rgba(57,181,74,.2);
}
.qs-dome-corner--tl { top: 0; left: 0; }
.qs-dome-corner--tl::before { top: 0; left: 0; width: 1px; height: 20px; }
.qs-dome-corner--tl::after  { top: 0; left: 0; width: 20px; height: 1px; }
.qs-dome-corner--tr { top: 0; right: 0; }
.qs-dome-corner--tr::before { top: 0; right: 0; width: 1px; height: 20px; }
.qs-dome-corner--tr::after  { top: 0; right: 0; width: 20px; height: 1px; }
.qs-dome-corner--bl { bottom: 0; left: 0; }
.qs-dome-corner--bl::before { bottom: 0; left: 0; width: 1px; height: 20px; }
.qs-dome-corner--bl::after  { bottom: 0; left: 0; width: 20px; height: 1px; }
.qs-dome-corner--br { bottom: 0; right: 0; }
.qs-dome-corner--br::before { bottom: 0; right: 0; width: 1px; height: 20px; }
.qs-dome-corner--br::after  { bottom: 0; right: 0; width: 20px; height: 1px; }

/* ══════════════════════════════════════════════
   COLUMNA IZQUIERDA
══════════════════════════════════════════════ */
.qs-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 2.5vh, 2.5rem);
}

/* ── Número + título ── */
.qs-header-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(.5rem, .8vw, .8rem);
}

.qs-section-num {
  font-family: var(--font-body);
  font-size: clamp(.75rem, .9vw, .88rem);
  font-weight: 500;
  color: rgba(255,255,255,.28);
  letter-spacing: .05em;
  flex-shrink: 0;
  padding-bottom: .4rem;
}

.qs-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7.5vw, 10rem);
  line-height: .93;
  letter-spacing: .02em;
  color: var(--color-white);
}
.qs-title-dot {
  color: var(--color-green);
  filter: drop-shadow(0 0 14px rgba(57,181,74,.65));
}

/* ── Texto ── */
.qs-body-text {
  display: flex;
  flex-direction: column;
  gap: clamp(.8rem, 1.2vh, 1.2rem);
  flex: 1 1 0; /* empuja las stats hacia abajo */
  justify-content: center;
  text-align: justify;
}
.qs-body-text p {
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.85;
  color: rgba(255,255,255,.70);
  font-weight: 400;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
  word-spacing: -0.01em; /* compensa el ensanchamiento de inter-character */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.qs-body-text p strong {
  color: rgba(255,255,255,.92);
  font-weight: 600;
}
.qs-para-divider {
  width: 28px; height: 1px;
  background: rgba(57,181,74,.38);
}

/* ── Stats — fila horizontal pegada al pie ── */
.qs-stats {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  flex-shrink: 0;
  padding-top: clamp(.8rem, 1.5vh, 1.2rem);
  border-top: 1px solid rgba(255,255,255,.06);
}
.qs-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.qs-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: .04em;
}
/* Colores por clase semántica — robusto ante reordenamientos del HTML */
.qs-stat--green .qs-stat-num {
  color: var(--color-green);
  filter: drop-shadow(0 0 10px rgba(57,181,74,.45));
}
.qs-stat--white .qs-stat-num { color: rgba(255,255,255,.9); }
.qs-stat--blue  .qs-stat-num {
  color: var(--color-blue-light);
  filter: drop-shadow(0 0 10px rgba(2,87,210,.45));
}
.qs-stat-label {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.qs-stat-sep {
  width: 1px; height: 2.4rem;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   COLUMNA DERECHA — imagen
   align-items:stretch en el dome hace que
   qs-img-col tenga la misma altura que qs-left
══════════════════════════════════════════════ */
.qs-img-col {
  flex: 0 0 42%;
  max-width: 42%;
  min-width: 0;
  display: flex;
}

.qs-img-frame {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  /* Safety net: en desktop con align-items:stretch, si .qs-left
     tiene poco contenido el frame no colapsa a 0 */
  min-height: 200px;
}

/* Esquinas decorativas del frame */
.qs-img-corner {
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none; z-index: 10;
}
.qs-img-corner::before,
.qs-img-corner::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,.38);
  box-shadow: 0 0 4px rgba(57,181,74,.25);
}
.qs-img-corner--tl { top: 0; left: 0; }
.qs-img-corner--tl::before { top: 0; left: 0; width: 1px; height: 16px; }
.qs-img-corner--tl::after  { top: 0; left: 0; width: 16px; height: 1px; }
.qs-img-corner--tr { top: 0; right: 0; }
.qs-img-corner--tr::before { top: 0; right: 0; width: 1px; height: 16px; }
.qs-img-corner--tr::after  { top: 0; right: 0; width: 16px; height: 1px; }
.qs-img-corner--bl { bottom: 0; left: 0; }
.qs-img-corner--bl::before { bottom: 0; left: 0; width: 1px; height: 16px; }
.qs-img-corner--bl::after  { bottom: 0; left: 0; width: 16px; height: 1px; }
.qs-img-corner--br { bottom: 0; right: 0; }
.qs-img-corner--br::before { bottom: 0; right: 0; width: 1px; height: 16px; }
.qs-img-corner--br::after  { bottom: 0; right: 0; width: 16px; height: 1px; }


/* ── Foto real — reemplaza el placeholder ──
   object-fit cover mantiene proporciones.
   object-position top centra en la parte superior (cara).
   Ajustar si la composición de la foto lo requiere. */
.qs-img-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
  display: block;
}

/* Tablet portrait + mobile — border-radius de la foto */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
  .qs-img-photo { border-radius: 16px; }
}

/* ══════════════════════════════════════════════
   BLOCK REVEALER (animación JS)
══════════════════════════════════════════════ */
.block-line-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 0.2em;
  margin-top: -0.2em;
}
.block-revealer {
  position: absolute;
  top: 0; left: 0;
  width: 101%; height: 101%;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ══════════════════════════════════════════════
   DESKTOP BREAKPOINTS
   Solo ajustan tamaños — el layout 2 col se mantiene
══════════════════════════════════════════════ */

/* MacBook Air M2, 1600x900, Surface Pro 912px */
@media (max-height: 1080px) and (min-height: 781px) and (min-width: 1200px) {
  /* padding-top: fallback — JS sobreescribe con valor real del nav */
  .qs-section  { padding: 10rem clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.5rem); }
  .qs-dome     { padding: clamp(1.8rem, 3vh, 3rem) clamp(2rem, 3.5vw, 4rem); gap: clamp(2rem, 4vw, 4rem); }
  .qs-title    { font-size: clamp(4rem, 7vw, 8.5rem); }
  .qs-body-text p { font-size: clamp(.95rem, 1.1vw, 1.15rem); line-height: 1.75; text-align: justify; text-align-last: left; }
  .qs-stat-num { font-size: clamp(1.6rem, 2vw, 2.4rem); }
}

/* 1280x720, 1366x768, 1536x864 laptop corto */
@media (max-height: 780px) and (min-width: 1200px) {
  /* padding-top: fallback — JS sobreescribe con valor real del nav */
  .qs-section  {
    min-height: 100svh;
    padding: 8rem clamp(1rem, 1.8vw, 1.8rem) clamp(2rem, 3vh, 3rem);
  }
  .qs-dome     { padding: 0 clamp(1.6rem, 2.5vw, 2.8rem); gap: clamp(1.5rem, 3vw, 3rem); }
  .qs-left     { gap: clamp(.6rem, 1.2vh, 1.2rem); }
  .qs-title    { font-size: clamp(2.8rem, 4.8vw, 5.5rem); }
  .qs-body-text p { font-size: clamp(.82rem, .95vw, .98rem); line-height: 1.62; text-align: justify; text-align-last: left; }
  .qs-body-text { gap: .5rem; }
  .qs-stat-num { font-size: clamp(1.3rem, 1.7vw, 1.9rem); }
  .qs-stats    { padding-top: .5rem; gap: clamp(1rem, 2vw, 2rem); }
  .qs-stat-label { font-size: .75rem; }
  .qs-stats    { padding-top: .6rem; }
}

/* ══════════════════════════════════════════════
   TABLET PORTRAIT + MOBILE PORTRAIT
   Nuevo sistema 3 criterios — excluye landscape tablets
   (iPad Mini/Air/Pro landscape → desktop ✅)

   1 columna — imagen sangrada.
   ┌─────────────────────────────────┐
   │  01. QUIENES SOMOS.             │
   │  texto texto texto texto        │
   │  +10        B2B        100%     │
   │  imag imagen imagen imagen      │
   └─────────────────────────────────┘
══════════════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
  .qs-section {
    /* padding-top: fallback — JS sobreescribe con valor real del nav */
    padding: clamp(9rem, 13vw, 12rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
    align-items: flex-start;
  }

  /* 1 columna */
  .qs-dome {
    flex-direction: column;
    padding: 0;
    gap: clamp(1.2rem, 2.5vh, 2rem);
  }

  /* Imagen: ancho completo */
  .qs-img-col {
    flex: none;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .qs-img-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    min-height: unset;
  }
  .qs-img-corner { display: none; }

  .qs-left { gap: clamp(1rem, 2vh, 1.6rem); }
  .qs-title { font-size: clamp(3.5rem, 9vw, 6.5rem); }
  .qs-body-text p { font-size: clamp(.95rem, 1.9vw, 1.1rem); line-height: 1.8; text-align: justify; text-align-last: left; }

  /* Stats en fila */
  .qs-stats {
    gap: clamp(1.5rem, 3vw, 2.5rem);
    flex-wrap: nowrap;
    align-items: flex-start; /* números a la misma altura aunque los labels tengan distinto wrap */
  }
  .qs-stat     { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; }
  .qs-stat-sep { display: block; align-self: center; }
  .qs-stat-num { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
}

/* ══════════════════════════════════════════════
   TABLET PORTRAIT GRANDE — ≥768px portrait
   iPad Mini / Air / Pro en portrait tienen suficiente
   ancho para 2 columnas side-by-side. El bloque not-all
   colapsa a 1 col; éste las restaura para estos tamaños.
   La imagen deja de tener aspect-ratio fijo y iguala la
   altura de la columna de texto (align-items: stretch).
══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .qs-section { align-items: center; }
  .qs-dome {
    flex-direction: row;
    gap: clamp(2rem, 3vw, 3.5rem);
  }
  .qs-img-col   { flex: 0 0 40%; max-width: 40%; width: auto; }
  .qs-img-frame { aspect-ratio: unset; min-height: 280px; }
  .qs-title     { font-size: clamp(3rem, 7vw, 5rem); }
  .qs-body-text p { font-size: clamp(.9rem, 1.7vw, 1.05rem); line-height: 1.78; }
  .qs-stats     { gap: clamp(1rem, 2vw, 2rem); }
}

/* ── Mobile portrait pequeño (≤479px portrait) ── */
@media (max-width: 479px) and (orientation: portrait) {
  .qs-section {
    padding-top: clamp(9rem, 32vw, 11rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .qs-dome { gap: 1.4rem; }
  .qs-img-frame { aspect-ratio: 4 / 3; }
  .qs-title { font-size: clamp(3rem, 13vw, 4.5rem); }
  .qs-body-text p { font-size: clamp(.9rem, 4vw, 1rem); line-height: 1.75; }
  .qs-body-text { gap: .8rem; }
  .qs-stats { gap: .6rem; flex-wrap: nowrap; align-items: flex-start; }
  .qs-stat-sep { display: none; }
  .qs-stat     { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; }
  .qs-stat-num { font-size: clamp(1.4rem, 6vw, 2rem); text-align: center; }
  .qs-stat-label { font-size: .75rem; letter-spacing: .1em; overflow-wrap: break-word; word-break: break-word; text-align: center; }
}



/* ══════════════════════════════════════════════
   ANIMACIONES DE ENTRADA — mobile/tablet
   Nuevo sistema 3 criterios — sin SplitText ni blockReveal.
   Fade + translateY activado por IntersectionObserver en script.js.
══════════════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

  /* Estado inicial — oculto */
  .qs-animate {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
  }

  /* Estado visible — IO lo activa */
  .qs-animate--visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Delays escalonados por elemento */
  .qs-animate--delay-1 { transition-delay: .08s; }
  .qs-animate--delay-2 { transition-delay: .18s; }
  .qs-animate--delay-3 { transition-delay: .28s; }
  .qs-animate--delay-4 { transition-delay: .38s; }
  .qs-animate--delay-5 { transition-delay: .48s; }
}

/* ══════════════════════════════════════════════
   LANDSCAPE MOBILE — orientation:landscape + max-height:500px
   Dispositivos pequeños en landscape: iPhone, Android.
   Tablets landscape (iPad Mini/Air/Pro) → desktop por los 3 criterios.
   Scroll libre — min-height: unset.
══════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  .qs-section {
    min-height: unset;
    padding: clamp(5rem, 16vh, 8rem) clamp(1rem, 3vw, 2rem) .8rem;
    align-items: flex-start;
  }

  /* 1 columna en landscape móvil pequeño */
  .qs-dome {
    flex-direction: column;
    padding: 0;
    gap: .8rem;
  }

  .qs-left { gap: .7rem; justify-content: flex-start; }

  .qs-img-col { width: 100%; max-width: none; }
  .qs-img-frame { aspect-ratio: 16 / 8; border-radius: 16px; min-height: unset; }
  .qs-img-photo { object-position: center 40%; }
  .qs-img-corner { display: none; }

  .qs-title { font-size: clamp(2.2rem, 7vw, 3.5rem); }
  .qs-body-text p { font-size: clamp(.8rem, 1.8vw, .92rem); line-height: 1.6; text-align: justify; text-align-last: left; }
  .qs-body-text { gap: .5rem; }

  .qs-stats { gap: clamp(1rem, 3vw, 2rem); flex-wrap: nowrap; padding-top: .5rem; align-items: flex-start; }
  .qs-stat-sep { display: none; }
  .qs-stat     { align-items: center; text-align: center; }
  .qs-stat-num { font-size: clamp(1.1rem, 3.5vw, 1.6rem); }
  .qs-stat-label { font-size: .75rem; }
}