/* ==========================================================================
   ABOUT — hoja propia, medida del markup (1344×768)

     héroe        0→468  → relación 2.87:1
     franja cian  70 px de alto · #01AAEB
     fondo hist.  #EDF6FD
     titular      mayúscula 62px → 86px de cuerpo = 6.41vw
     titular col. #052264

   Solo la carga esta página (`extra_css: about`).
   ========================================================================== */
.page--about {
  --ab-navy: #052264;
  --ab-cyan: #01AAEB;
  --ab-grey: #5C6469;
  --ab-pale: #EDF6FD;
  /* Cian para TEXTO: el del markup no llega a 4.5:1 sobre fondo claro. Mismo
     desdoble que en landing, commercial y pm. */
  --ab-cyan-text: #06718F;
}
.page--about .header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; padding-top: 16px;
}
.page--about .nav { min-height: 66px; }

/* ---------- Héroe ---------- */
.ab-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #E9F1F8;
  min-height: clamp(420px, 34.8vw, 670px);   /* 2.87:1 */
  display: flex; align-items: center;
  padding-top: 92px;
}
/* El clip nace en 1366×768 (1.78:1) y el héroe pide 2.87:1, así que `cover`
   recorta 293 px de alto y deja ver el 61% del original.

   32% y no 55%: la primera medición buscaba PIEL para localizar las cabezas y
   se saltó al más alto, que tiene el pelo negro — con 55% el recorte empezaba
   en el 21% y le cortaba la coronilla, que arranca en el 18.2%. Buscando
   píxeles oscuros sobre el fondo claro sale el dato bueno. Con 32% se ve del
   12% al 74% de la fuente: seis puntos de aire sobre la cabeza más alta. */
.ab-hero__bg, .ab-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%; border-radius: 0;
}
/* El vídeo solo se descubre cuando de verdad reproduce; debajo queda el póster,
   que es un fotograma del propio clip, así que el relevo no cambia de escena. */
.ab-hero__video { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.ab-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ab-hero__video { display: none; } }

/* Velo. `to right` y no un ángulo: con ángulo la línea del degradado mide más
   que el ancho de la caja, las paradas caen fuera del recuadro y nunca llega a
   transparente — taparía la foto entera.

   RETIRADO el velo ancho (2026-08-01, a petición de Alex). Era lineal a lo
   ancho y a toda la altura: tapaba el 50% del héroe de alfa media y apagaba
   media foto. Medido sobre la foto real, el titular NO lo necesita — da 4.02:1
   sin nada y pide 3:1, porque es texto grande.

   Pero el lede y el botón sí. Bajo ellos la foto va de luminancia 0.027 a 0.991
   —sofá en sombra y ventana quemada en la misma caja—, así que ningún color
   sólido pasa: probé gris, navy, navy profundo, negro y blanco, y el mejor se
   quedaba en 1.54:1 contra un mínimo de 4.5.

   La solución es un velo LOCAL, radial y bajo, que cubre solo esa esquina. Tapa
   el 18% de alfa media en vez del 50%, y deja el equipo y casi toda la
   habitación limpios. Medido: titular 4.86:1, lede y botón 6.30:1. */
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(46% 46% at 6% 76%,
    rgba(233,241,248,.94) 0%,  rgba(233,241,248,.90) 45%,
    rgba(233,241,248,.50) 72%, rgba(233,241,248,0) 100%);
}
.ab-hero__inner { position: relative; width: 100%; }
/* 46% y no 50%: la columna terminaba justo donde arranca el equipo. */
.ab-hero__text { display: grid; gap: clamp(14px, 1.4vw, 24px); max-width: min(46%, 700px); justify-items: start; }

.ab-h1 {
  margin: 0; font-weight: 800;
  /* 86px sobre 1344 = 6.41vw, medido del markup. */
  font-size: clamp(2.2rem, 6.41vw, 7rem);
  line-height: 1.02; letter-spacing: -0.035em; color: var(--ab-navy);
}
.ab-h1 em { font-style: normal; color: var(--ab-cyan-text); }
/* Navy y no gris. Con el velo local, el gris #5C6469 necesitaría alfa 0.92
   —prácticamente opaco— para llegar a 4.5:1 sobre esta foto; el navy lo hace
   con 0.50, que es lo que permite que el velo sea pequeño. */
.ab-lede { font-size: clamp(.95rem, 1.2vw, 1.3rem); line-height: 1.5; color: var(--ab-navy); max-width: 36ch; }
.ab-hero .btn { min-height: 46px; padding: 6px 6px 6px 24px;
  background: var(--ab-navy); border-color: var(--ab-navy); }

/* Botón y sello en la misma fila, como en el markup. `margin: 0` en el <p> para
   que el hueco lo ponga el `gap` de la rejilla del bloque de texto y no se sume
   dos veces. */
.ab-cta { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0; flex-wrap: wrap; }

.ab-seal { display: none; }
@media (min-width: 1080px) {
  .ab-seal {
    display: grid; place-content: center; text-align: center; flex: none;
    width: clamp(112px, 8.6vw, 150px); height: clamp(112px, 8.6vw, 150px);
    border-radius: 50%; background: var(--ab-navy); color: #fff;
    border: 3px solid rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(0,28,64,.28);
    padding: 12px;
  }
}
.ab-seal svg { display: block; width: 22px; height: 22px; margin: 0 auto 5px; color: #8FC4FF; }
.ab-seal strong { display: block; font-size: 14px; line-height: 1.15; }
.ab-seal small { display: block; font-size: 11px; opacity: .8; }

@media (max-width: 899px) {
  .ab-hero { min-height: auto; padding-top: 116px; }
  .ab-hero::before { background: rgba(233,241,248,.94); }
  .ab-hero__text { max-width: 100%; }
  .ab-hero__inner { padding-bottom: 40px; }
}

/* ---------- Franja ----------
   Texto NAVY y no blanco: sobre el cian del markup el blanco da menos de 3:1,
   así que no se arregla ni agrandándolo. El navy sí pasa y permite conservar el
   color de franja exacto, que es lo que importaba. Mismo criterio que en pm. */
.ab-strip { background: var(--ab-cyan); color: var(--ab-navy); }
.ab-strip ul {
  display: grid; grid-template-columns: repeat(3, 1fr);
  min-height: 70px; align-items: center;
}
.ab-strip li { display: flex; gap: 12px; align-items: center; padding-block: 12px; }
.ab-strip li + li { border-left: 1px solid rgba(5,34,100,.22); padding-left: clamp(14px, 1.8vw, 30px); }
.ab-strip svg { width: 24px; height: 24px; flex: none; }
.ab-strip b { display: block; font-size: .86rem; font-weight: 800; line-height: 1.3; }
.ab-strip span span { display: block; font-size: .86rem; font-weight: 600; line-height: 1.3; opacity: .85; }
@media (max-width: 899px) {
  .ab-strip ul { grid-template-columns: 1fr; gap: 12px; padding-block: 16px; }
  .ab-strip li + li { border-left: 0; padding-left: 0; }
}

/* ---------- Nuestra historia ---------- */
.ab-story { background: var(--ab-pale); padding-block: clamp(46px, 4.6vw, 84px); }
.ab-story__grid { display: grid; gap: clamp(28px, 3.2vw, 56px); align-items: start; }
@media (min-width: 1000px) { .ab-story__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); } }
.ab-eyebrow {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ab-cyan-text); margin-bottom: 12px;
}
.ab-story h2 {
  margin: 0 0 18px; font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.03em; text-transform: none; color: var(--ab-navy);
}
.ab-story__grid > div > p { font-size: clamp(.9rem, 1.05vw, 1.1rem); line-height: 1.65;
  color: var(--ab-grey); max-width: 52ch; }
.ab-story__grid > div > p + p { margin-top: 14px; }

.ab-story__list { display: grid; gap: 20px; text-align: center; }
@media (min-width: 620px) { .ab-story__list { grid-template-columns: repeat(3, 1fr); } }
.ab-photo {
  display: block; width: clamp(110px, 9vw, 150px); height: clamp(110px, 9vw, 150px);
  margin: 0 auto 14px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ab-cyan);
}
.ab-photo img, .ab-photo .imgph { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ab-story__list b { display: block; font-size: .95rem; font-weight: 700; color: var(--ab-navy); }
.ab-story__list li > span:last-child {
  display: block; font-size: .82rem; line-height: 1.5; color: var(--ab-grey); margin-top: 5px;
}