/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · about.css — hoja de la página /about
   Maqueta el Figma `/about — Desktop 1440` (91:55).

   Reglas de la casa: todo por token de framework.css, BEM, cotas del diseño en px. Dos
   bloques nacen ocultos (A4 sin fichas y A6) y aquí solo se define su forma futura: quien
   manda sobre la visibilidad es el atributo `hidden` del HTML.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.about {
  --ab-ancho: 1440px;
  --ab-lateral: 72px;
}

.about .a1__inner,
.about .a2__inner,
.about .a3__inner,
.about .a4__inner,
.about .a5__inner,
.about .a6__inner,
.about .a7__inner {
  max-width: var(--ab-ancho);
  margin-inline: auto;
  padding-inline: var(--ab-lateral);
}

.about .a1__etiqueta,
.about .a2__etiqueta {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.about .boton {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
}

/* ── A1 · Hero ───────────────────────────────────────────────────────────────────────── */

.a1 { background: var(--c-crema-calida); }

.a1__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: var(--e-8);
  align-items: center;
  padding-block: 64px;
}

.a1__titular {
  margin: var(--e-3) 0 var(--e-5);
  max-width: 42rem;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.a1__entrada { margin: 0; max-width: 42rem; font-size: var(--t-lead); color: var(--c-navy); }

/* Mosaico: una foto alta a la izquierda y dos apiladas a la derecha. Son fotos de gente
   dando clase, no fichas — las fichas son A4. */
.a1__mosaico {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: repeat(2, 164px);
  gap: 12px;
  /* El paralaje lo alimenta animaciones.js; en reposo vale cero y no mueve nada. */
  --paralaje-x: 0px;
  --paralaje-y: 0px;
}

.a1__pieza {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-navy);
  transition: transform 0.2s ease-out;
  transform: translate3d(var(--paralaje-x), var(--paralaje-y), 0);
}

.a1__pieza--1 { grid-row: 1 / span 2; }
/* Las dos pequeñas se mueven la mitad: es lo que da la sensación de profundidad. */
.a1__pieza--2,
.a1__pieza--3 { transform: translate3d(calc(var(--paralaje-x) / 2), calc(var(--paralaje-y) / 2), 0); }

.a1__pieza img { width: 100%; height: 100%; object-fit: cover; }

.a1__marcador {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  text-align: center;
}

.a1__marcador p { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── A2 · Respaldo y trayectoria ─────────────────────────────────────────────────────── */

.a2 { background: var(--c-blanco); }
.a2__inner { padding-block: 72px; }

.a2__titular,
.a3__titular,
.a4__titular,
.a5__titular {
  margin: var(--e-3) 0 var(--e-4);
  max-width: 52rem;
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.a2__texto { margin: 0 0 var(--e-6); max-width: 56rem; font-size: var(--t-lead); color: var(--c-pizarra); }

.a2__cifras {
  list-style: none;
  margin: 0 0 var(--e-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.a2__cifra {
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: 24px;
}

.a2__dato {
  margin: 0 0 var(--e-2);
  font-size: var(--t-precio);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  /* La cuenta cambia el número de dígitos: sin esto el bloque tiembla mientras cuenta. */
  font-variant-numeric: tabular-nums;
}

.a2__pie { margin: 0; font-size: var(--t-muletilla); color: var(--c-pizarra); }

.a2__nuevos { margin: 0; font-size: var(--t-cuerpo); font-weight: var(--peso-semi); color: var(--c-navy); }

/* ── A3 · Cómo enseñamos ─────────────────────────────────────────────────────────────── */

.a3 { background: var(--c-crema); }
.a3__inner { padding-block: 72px; }

.a3__lista { list-style: none; margin: var(--e-6) 0 0; padding: 0; }

.a3__fila {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--e-5);
  align-items: baseline;
  padding-block: 28px;
  border-top: 1px solid var(--c-borde);
}

.a3__fila:last-child { border-bottom: 1px solid var(--c-borde); }

.a3__numero {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  color: var(--c-acento);
  font-variant-numeric: tabular-nums;
}

.a3__nombre { margin: 0 0 var(--e-2); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.a3__descripcion { margin: 0; font-size: var(--t-cuerpo); color: var(--c-pizarra); }

/* ── A4 · Quién da las clases ────────────────────────────────────────────────────────── */

.a4 { background: var(--c-blanco); }
.a4__inner { padding-block: 72px; }

.a4__texto { margin: 0 0 var(--e-6); max-width: 56rem; font-size: var(--t-lead); color: var(--c-pizarra); }

/* Rejilla DINÁMICA: `auto-fill` con mínimo de 260 px. Se pinta con las fichas que haya
   —tres, seis o doce— y se recoloca sola. Ningún hueco maquetado a mano. */
.a4__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.a4__ficha {
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.a4__foto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.a4__ficha-texto { padding: 22px 24px 26px; }
.a4__nombre { margin: 0 0 var(--e-1); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.a4__credencial { margin: 0 0 var(--e-2); font-size: var(--t-muletilla); font-weight: 700; color: var(--c-acento); }
.a4__especialidad { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

.a4__pendiente[hidden] { display: none; }

/* ── A5 · Qué pasa en una clase ──────────────────────────────────────────────────────── */

.a5 { background: var(--c-superficie-hundida); }
.a5__inner { padding-block: 72px; }

.a5__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* La escena se queda fija mientras la lista de la derecha pasa por delante: las dos
   columnas están muy descompensadas —la izquierda es una pieza, la derecha son cuatro
   tarjetas con sus capturas— y sin esto la mitad del bloque se recorre con un hueco vacío
   al lado. El `top` deja hueco para la cabecera, que es sticky. */
.a5__escena {
  position: sticky;
  top: 112px; /* 88 de cabecera sticky, medidos, + 24 de aire */
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy);
  aspect-ratio: 700 / 470;
}

.a5__escena img,
.a5__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El hueco toma la proporción del vídeo (4:3) en vez de la de la foto (700/470). Si no,
   `cover` recorta arriba y abajo y se come la barra de la videollamada y parte de las dos
   caras — exactamente el fallo que ya dio el hero de /spanish-tutor. */
.a5__escena--video {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}

.a5__escena--video .a5__video {
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: var(--r-xl);
}

/* La pieza ya trae su propia barra de videollamada abajo: dejar ahí encima el pie ponía dos
   barras compitiendo. Con vídeo, el pie baja fuera de la escena y se lee como lo que es,
   un pie de figura. Y sin texto encima, el velo sobra. */
.a5__escena--video::after { content: none; }

.a5__escena--video .a5__pie {
  position: static;
  margin: var(--e-3) 0 0;
  color: var(--c-pizarra);
}

/* Velo inferior: el pie es texto claro y la escena puede ser clara justo ahí —lo era con
   la foto anterior, donde el pie no se leía—. El degradado garantiza el contraste salga lo
   que salga en el vídeo, sin oscurecer la imagen entera. */
.a5__escena::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(18, 39, 58, 0.78), rgba(18, 39, 58, 0));
  pointer-events: none;
}

/* El chip y el pie van por encima del velo. */
.a5__chip,
.a5__pie { z-index: 1; }

.a5__marcador {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-6);
  text-align: center;
}

.a5__marcador-titulo { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--peso-extra); color: var(--c-blanco); }
.a5__marcador-nota { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

.a5__chip {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-navy-90);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: 700;
}

.a5__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c-acento-suave); }

.a5__pie {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: var(--t-muletilla);
  color: var(--c-texto-navy);
}

.a5__lista { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.a5__item {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.a5__item-titulo { font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.a5__item-texto { margin: var(--e-1) 0 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.a5__item-imagen { display: block; width: 100%; margin-top: var(--e-3); border-radius: var(--r-md); }

/* Marcador de imagen pendiente: se ve que falta material, no se disimula. */
.a5__item-marcador {
  margin: var(--e-3) 0 0;
  padding: var(--e-3);
  border: 1px dashed var(--c-borde-calido);
  border-radius: var(--r-sm);
  font-size: var(--t-muletilla);
  color: var(--c-pizarra);
}

/* ── A6 · Carta de fundadores (maquetado, oculto) ────────────────────────────────────── */

.a6 { background: var(--c-blanco); }
.a6[hidden] { display: none; }
.a6__inner { padding-block: 72px; }

.a6__aviso { margin: 0 0 var(--e-4); font-size: var(--t-muletilla); color: var(--c-pizarra); }

.a6__carta {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.a6__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-navy); aspect-ratio: 280 / 300; }
.a6__foto img { width: 100%; height: 100%; object-fit: cover; }
.a6__marcador { height: 100%; display: grid; place-items: center; padding: var(--e-4); }
.a6__marcador p { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

.a6__titular { margin: 0 0 var(--e-4); font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-navy); }
.a6__cuerpo { margin: 0 0 var(--e-5); font-size: var(--t-cuerpo); color: var(--c-pizarra); }
.a6__firma { margin: 0; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-navy); }

/* ── A7 · Cierre ─────────────────────────────────────────────────────────────────────── */

.a7 { background: var(--c-navy); color: var(--c-blanco); }

.a7__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--e-8);
  align-items: center;
  padding-block: 72px;
}

.a7__titular { margin: 0 0 var(--e-4); font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-blanco); }
.a7__texto { margin: 0 0 var(--e-5); max-width: 44rem; font-size: var(--t-lead); color: var(--c-texto-navy); }

.a7__reaseguro {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.a7__reaseguro .chip { background: transparent; border-color: var(--c-navy-borde); color: var(--c-blanco); }

.a7__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy-suave);
  min-height: 320px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32%);
  mask-image: linear-gradient(to right, transparent, #000 32%);
}

.a7__media img { width: 100%; height: 100%; object-fit: cover; }

.a7__marcador {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-6);
  text-align: center;
}

.a7__marcador-titulo { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--peso-extra); color: var(--c-blanco); }
.a7__marcador-nota { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .about { --ab-lateral: var(--e-6); }

  .a1__inner,
  .a7__inner { grid-template-columns: 1fr; gap: var(--e-6); }

  .a2__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a5__cols { grid-template-columns: 1fr; }
  /* En una sola columna no hay nada al lado que se quede quieto: fijar la escena solo la
     dejaría pegada arriba tapando el texto que viene detrás. */
  .a5__escena { position: relative; top: auto; }
  .a6__carta { grid-template-columns: 1fr; }
}

/* ── Móvil ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .about { --ab-lateral: 20px; }

  .a1__inner { padding-block: 32px 40px; }
  .a1__titular { font-size: var(--t-h3); }

  /* El mosaico se queda en una banda: tres fotos apiladas ocupan media pantalla de scroll. */
  .a1__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 140px 140px; }
  .a1__pieza--1 { grid-row: 1 / span 2; }

  .a2__inner,
  .a3__inner,
  .a4__inner,
  .a5__inner,
  .a6__inner,
  .a7__inner { padding-block: 48px; }

  .a2__cifras { grid-template-columns: 1fr; }

  .a3__fila { grid-template-columns: 1fr; gap: var(--e-2); padding-block: 22px; }

  .a4__grid { grid-template-columns: 1fr; }

  .a7__cta { width: 100%; }
  .a7__media { min-height: 220px; }
}

/* ── Animaciones ─────────────────────────────────────────────────────────────────────── */

.con-animaciones .about [data-anim] {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.con-animaciones .about [data-anim='abajo'] { transform: translateY(16px); }
.con-animaciones .about [data-anim='zoom'] { transform: scale(0.97); }

.con-animaciones .about [data-anim].es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .about [data-anim],
  .about [data-anim].es-visible { opacity: 1; transform: none; transition: none; }
  .a1__pieza { transition: none; transform: none; }
}