/* ===== Página "Sobre nosotros" (v3 — 2026-08-21) =====
   Estructura: hero (texto izq + galería del equipo en movimiento der) → manifiesto →
   métricas → historia en 3 pasos (una imagen por paso).
   El fondo claro con grid lo aporta .blueprint-grid (global).
   La v1 (hero galería + banda intro + timeline 01–06) está respaldada en
   docs/_backup-page-sobre-v1.css — ver docs/ESTILOS-SECCIONES.md. */

body { min-height: 100vh; display: flex; flex-direction: column; }
.about { flex: 1; }

/* Placeholder de imagen (para las que falten) */
.about-ph {
  position: relative;
  background: rgba(20, 42, 71, 0.04);
  border: 1px dashed rgba(20, 42, 71, 0.20);
  border-radius: 16px;
  overflow: hidden;
}
.about-ph::after {
  content: "Imagen";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-ph:has(img) { border-color: transparent; background: none; }
.about-ph:has(img)::after { content: none; }

/* ===== SECCIÓN PRINCIPAL v3: texto (izq) + galería del equipo (der) =====
   Estructura inspirada en el pen "Landing page with swiper" de kristen17
   (https://codepen.io/kristen17/pen/GRXgqaB): eyebrow + título + filete +
   intro + CTA a la izquierda, imágenes a la derecha. Sin Swiper: las imágenes
   se mueven con el marquee propio del proyecto (sin dependencias externas).
   La v2 está respaldada en docs/_backup-sobre-hero-v2.html. */
/* Ocupa todo el ancho del viewport: el texto lleva su propio padding a la
   izquierda y la galería corre hasta el filo derecho. */
.about-top {
  position: relative;
  max-width: none;
  margin: 0;
  /* Llena la pantalla para que no se asome la sección siguiente. El contenido
     se centra vertical y el padding superior (mayor) compensa el nav fijo.
     svh evita el salto por la barra del navegador en móvil. */
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0 60px;
  display: grid;
  /* La columna de texto sólo ocupa lo que necesita (sangrado del nav + medida
     de lectura); el resto es para las imágenes, así no queda un hueco enorme
     entre el texto y la galería. */
  grid-template-columns: clamp(560px, 44vw, 700px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
/* El texto arranca exactamente donde el logo del nav (padding de .nav: 180px
   en escritorio y 24px a partir de 1365px, cuando el nav pasa a hamburguesa) */
.about-top__copy { padding-left: 180px; }
/* ---- Columna de texto ---- */
.about-top__eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.about-top__title {
  font-family: var(--serif);
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--navy);
  margin: 14px 0 0;
}
.about-top__title em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
/* Filete naranja (el <hr> del pen) */
.about-top__rule {
  display: block;
  width: 100px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--orange);
  margin: 22px 0 26px;
}
.about-top__intro {
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0;
  max-width: 44ch;
}
/* El CTA usa los botones del sistema (.btn .btn-primary .btn-large de
   tokens.css); solo se separa del texto. */
.about-top__copy .btn { margin-top: 32px; }

/* ---- Galería del equipo: movimiento continuo (marquee) ----
   Solo imágenes. El JS (initAboutCarousel) mide un juego de slides, clona los
   necesarios y anima exactamente ese ancho, así el bucle no se corta. */
.about-carousel {
  overflow: hidden;
  width: 100%;
  /* La tira llega al filo derecho del viewport; a la izquierda se desvanece
     para que no choque con la columna de texto. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 100%);
}
.about-carousel__track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: about-marquee 46s linear infinite;
  will-change: transform;
}
.about-carousel:hover .about-carousel__track { animation-play-state: paused; }
@keyframes about-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--about-shift, 50%) * -1)); }
}
.about-slide {
  flex: 0 0 auto;
  /* Rectangulares (horizontales) y anchas: se ven ~2 a la vez */
  width: clamp(300px, 27vw, 620px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bone-dark, rgba(20, 42, 71, 0.08));
  box-shadow: 0 18px 40px rgba(20, 42, 71, 0.16);
}
.about-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin movimiento: las slides originales quedan en fila */
@media (prefers-reduced-motion: reduce) {
  .about-carousel { overflow-x: auto; }
  .about-carousel__track { animation: none; }
  .about-slide[aria-hidden="true"] { display: none; }
}

/* ========================== MANIFIESTO ========================== */
.about-manifesto {
  max-width: 820px;
  margin: 0 auto;
  padding: 66px 24px 10px;
  text-align: center;
}
.about-manifesto p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--navy);
  margin: 0;
}
.about-manifesto em { font-style: normal; color: var(--orange); font-weight: 600; }

/* =========================== MÉTRICAS =========================== */
.about-stats {
  max-width: 980px;
  margin: 0 auto;
  padding: 44px 40px 20px;
}
.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.about-stat { text-align: center; }
.about-stat__num {
  display: block;
  font-family: var(--serif);
  /* Cifras de ancho fijo: el contador no "baila" mientras sube */
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}
/* Guion naranja bajo el número */
.about-stat__num::after {
  content: "";
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--orange);
  margin: 12px auto 0;
}
.about-stat__label {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-soft);
}

/* ===================== HISTORIA (3 pasos) ===================== */
.about-story {
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 40px 110px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.about-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Texto a la izquierda, imagen a la derecha */
.about-step--reverse .about-step__body { order: 1; }
.about-step--reverse .about-step__media { order: 2; }

/* --- Imagen del paso (antes era un collage con una imagen insertada; se
   retiraron las pequeñas, ver docs/ESTILOS-SECCIONES.md) --- */
.about-collage { position: relative; }
.about-collage__main {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 46px rgba(20, 42, 71, 0.14);
}
.about-collage__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Texto del paso --- */
.about-step__num {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 14px;
}
.about-step__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 16px;
}
.about-step__text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 24px;
  max-width: 520px;
}

/* --- Lista de checks --- */

/* ===================== DESCUBRE MÁS (antes del footer) ===================== */
.discover {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  /* Mismo fondo que "¿Por qué Teckio?" del index (azul de marca con blobs) */
  background:
    radial-gradient(42% 46% at 12% 18%, rgba(150, 190, 240, 0.28), transparent 70%),
    radial-gradient(40% 44% at 90% 82%, rgba(0, 28, 90, 0.45), transparent 70%),
    radial-gradient(28% 34% at 62% 8%, rgba(217, 119, 6, 0.16), transparent 70%),
    linear-gradient(150deg, var(--azul-teckio) 0%, #003795 55%, #0045AE 100%);
}
/* Grid tenue, como en las demás bandas navy del sitio */
.discover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}
.discover__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 68px 40px 72px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px 64px;
  align-items: center;
}
/* Isotipo de Teckio en lugar del eyebrow "RECURSOS" */
.discover__logo {
  display: block;
  width: clamp(38px, 4vw, 48px);
  height: auto;
  margin-bottom: 18px;
}
.discover__title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--paper);
  margin: 0;
}
.discover__links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 18px 48px;
}
.discover__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--paper);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.discover__arrow { font-size: 18px; transition: transform 0.25s var(--ease); }
.discover__link:hover { color: var(--orange-light); gap: 18px; }
.discover__link:hover .discover__arrow { transform: translateX(3px); }
.discover__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

/* ============================ RESPONSIVE ============================ */
/* A partir de aquí el nav pasa a hamburguesa y su padding baja a 24px:
   el texto lo sigue para quedar alineado con el logo. */
@media (max-width: 1365px) {
  .about-top {
    padding: 110px 0 56px;
    gap: 36px;
    grid-template-columns: clamp(400px, 42vw, 560px) minmax(0, 1fr);
  }
  .about-top__copy { padding-left: 24px; }
}
/* Tablet y móvil: una columna. El texto se centra (con su propio padding) y la
   galería sigue a todo el ancho, como una tira continua. */
@media (max-width: 980px) {
  .about-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 100px 0 56px;
    text-align: center;
    /* Apilado el contenido ya es alto: la altura la define el contenido */
    min-height: 0;
    align-content: center;
  }
  .about-top__copy { padding: 0 24px; }
  .about-top__title em { display: inline; }
  .about-top__rule { margin-left: auto; margin-right: auto; }
  .about-top__intro { margin: 0 auto; max-width: 56ch; }
  .about-carousel {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@media (max-width: 900px) {
  .about-manifesto { padding: 52px 24px 6px; }
  .about-stats { padding: 34px 24px 12px; }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .about-story { padding: 56px 24px 84px; gap: 66px; }
  .about-step { grid-template-columns: 1fr; gap: 28px; }
  /* La imagen siempre arriba del texto en móvil/tablet */
  .about-step--reverse .about-step__media { order: 1; }
  .about-step--reverse .about-step__body { order: 2; }
  .about-step__text { max-width: none; }
  .discover__inner { grid-template-columns: 1fr; gap: 28px; padding: 54px 24px 58px; }
}
@media (max-width: 560px) {
  .discover__links { grid-template-columns: 1fr; gap: 15px; }
}
@media (max-width: 560px) {
  .about-slide { width: 84vw; max-width: 420px; }
  .about-stats__grid { gap: 24px 14px; }
}