/* ═══════════════════════════════════════════════════════
   SOBRE NOSOTROS  (sección #nosotros)
   Manifiesto que se entinta con el scroll → cifras en odómetro →
   bloque negro Misión/Visión/Compromiso (eco de la pantalla del cine,
   con foco de luz que sigue al cursor) → valores en acordeón.
   JS: js/about.js (clases is-armed / is-inview / is-active / is-open)
   Sin JS todo queda visible: los estados ocultos viven bajo .is-armed.
═══════════════════════════════════════════════════════ */
.about {
  --ab-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  position: relative;
  background: transparent; /* deja pasar la sombra del cine; el body ya es --canvas */
  color: var(--ink);
  padding: clamp(32px, 4vh, 56px) 40px clamp(56px, 8vh, 96px);
  overflow-x: clip;
  scroll-margin-top: var(--nav-h);
}
.about-wrap { max-width: 1160px; margin: 0 auto; }

/* ── Encabezado ─────────────────────────────────────── */
.about-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: clamp(36px, 5vh, 56px);
  position: relative;
}
.about-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-out);
}
.about.is-armed .about-head::after { transform: scaleX(0); }
.about.is-armed .about-head.is-inview::after { transform: none; }

.about-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.about-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--border-md);
}

/* ── Manifiesto ─────────────────────────────────────── */
.about-lead {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 48px;
  align-items: end;
}
.about-manifesto {
  font-size: clamp(38px, 5.6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--ink);
  max-width: 7.9em; /* siempre en dos líneas: "El siguiente paso / a tu evolución" */
}
.about-manifesto .ab-w {
  opacity: 0.13;
  transition: opacity 0.55s var(--ease-out);
}
.about-manifesto .ab-w.is-lit { opacity: 1; }

.about-intro,
.about-intro-em {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 400px;
  text-wrap: pretty; /* sin palabras huérfanas en la última línea */
}
.about-intro-em { margin-top: 2px; }
.about-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.about-sign::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink);
}

/* ── Cifras (odómetro) ──────────────────────────────── */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(64px, 9vh, 104px);
  border-top: 1px solid var(--ink);
}
.about-stat {
  padding: 26px 24px 0;
  border-left: 1px solid var(--border-md);
}
.about-stat:first-child { border-left: 0; padding-left: 0; }
.about-num {
  display: flex;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ab-odo-wrap { display: inline-flex; }
.ab-odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.ab-odo-strip {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 1.9s var(--ab-spring);
  transition-delay: var(--d, 0s);
}
.ab-odo-strip span { display: block; height: 1em; line-height: 1; }
.about-stat-label {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 220px;
}
.ab-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Bloque negro: Misión / Visión / Compromiso ─────── */
.about-slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(72px, 10vh, 120px);
  border-radius: 28px;
  color: var(--od-text);
  background: linear-gradient(180deg, #1d1d1f 0%, #0d0d0e 7%, #070708 48%, #030304 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 0 1px rgba(10, 10, 10, 0.92),
    0 22px 44px -16px rgba(0, 0, 0, 0.4),
    0 64px 120px -34px rgba(0, 0, 0, 0.55);
  perspective: 1400px;
  transform-origin: 50% 100%;
}
/* reflejo especular del filo superior, como el bisel del cine */
.about-slab::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  z-index: 2;
}
.about-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 8%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 8%, transparent 70%);
  pointer-events: none;
}
/* foco: gradiente estático movido por transform (no se re-rasteriza) */
.about-spot {
  position: absolute;
  left: 0; top: 0;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035) 40%, transparent 68%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.about-slab.is-lit .about-spot { opacity: 1; }

.about-pillar {
  position: relative;
  padding: 56px 40px 52px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  outline: none;
  cursor: default;
  transition: transform 0.7s var(--ease-out);
}
.about-pillar:first-of-type { border-left: 0; }
.about-pillar:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); border-radius: 20px; }
/* Número + icono en una fila sobre el título */
.about-phead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.about-pnum {
  display: block;
  font-size: clamp(52px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.3);
  transition: -webkit-text-fill-color 0.7s var(--ease-out), -webkit-text-stroke-color 0.7s var(--ease-out), transform 0.9s var(--ab-spring);
}
.about-pillar.is-active .about-pnum {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-color: #fff;
  transform: translate3d(0, -6px, 0);
}

/* ── Iconos: mismo trazo que el número; al activarse se dibujan y su núcleo se rellena ── */
.about-picon {
  display: block;
  flex: none;
  width: clamp(56px, 5vw, 76px);
  height: auto;
  overflow: visible;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.7s var(--ease-out), transform 0.9s var(--ab-spring);
}
.about-picon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.7s var(--ease-out), stroke 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
.about-picon .ab-ico-soft { opacity: 0.55; }
.about-picon .ab-ico-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.about-picon .ab-ico-spark,
.about-picon .ab-ico-shackle { transform-box: fill-box; transform-origin: 50% 100%; }
.about-picon .ab-ico-spark { transform-origin: center; }
.about-pillar.is-active .about-picon {
  color: #fff;
  transform: translate3d(0, -6px, 0);
}
.about-pillar.is-active .ab-ico-core { fill: #fff; }
/* el ojo de la cerradura se recorta sobre el cuerpo relleno */
.about-pillar.is-active .ab-ico-key { stroke: #070708; stroke-width: 2.4; }
.about-pillar.is-active .ab-ico-draw {
  stroke-dasharray: 1;
  animation: ab-ico-draw 1.2s var(--ease-out) both;
}
.about-pillar.is-active .ab-ico-check { animation-delay: 0.45s; }
.about-pillar.is-active .ab-ico-spark { animation: ab-ico-spark 1.1s var(--ab-spring) 0.7s both; }
.about-pillar.is-active .ab-ico-pulse { animation: ab-ico-pulse 2.4s var(--ease-out) 0.5s infinite; }
.about-pillar.is-active .ab-ico-pupil { animation: ab-ico-look 3.2s var(--ease-out) 0.4s infinite; }
.about-pillar.is-active .ab-ico-shackle { animation: ab-ico-lock 0.9s var(--ab-spring) 0.35s both; }
.about-slab.has-active .about-pillar:not(.is-active) .about-picon { color: rgba(255, 255, 255, 0.14); }

@keyframes ab-ico-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes ab-ico-spark {
  from { transform: scale(0.2) rotate(-90deg); }
  to { transform: none; }
}
@keyframes ab-ico-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes ab-ico-look {
  0%, 18%, 100% { transform: none; }
  30%, 48% { transform: translate3d(-3px, 0, 0); }
  60%, 78% { transform: translate3d(3px, 0, 0); }
}
@keyframes ab-ico-lock {
  0% { transform: translate3d(0, -6px, 0); }
  100% { transform: none; }
}
.about-pk {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--od-soft);
}
.about-ptext {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--od-text);
  transition: color 0.5s var(--ease-out);
}
.about-slab.has-active .about-pillar:not(.is-active) .about-ptext { color: var(--od-faint); }
.about-slab.has-active .about-pillar:not(.is-active) .about-pnum { -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); }
.about-pline {
  display: block;
  height: 1px;
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.7);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-out);
}
.about-pillar.is-active .about-pline { transform: none; }

/* ── Valores: acordeón ──────────────────────────────── */
.about-values { margin-top: clamp(72px, 10vh, 120px); }
.about-values-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.about-hint { font-size: 13px; color: var(--ink-faint); }
.about-vlist {
  display: flex;
  gap: 10px;
  height: 380px;
}
.about-val {
  --i: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 26px 28px;
  border-radius: 22px;
  text-align: left;
  color: var(--ink);
  background: var(--canvas-off);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition:
    flex-grow 0.85s var(--ease-out),
    background-color 0.5s var(--ease-out),
    color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.about-val:hover:not(.is-open) { background: var(--canvas-dim); }
.about-val:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.about-val.is-open {
  flex-grow: 3.4;
  color: #fff;
  background: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(10, 10, 10, 0.92),
    0 22px 44px -18px rgba(0, 0, 0, 0.35);
}
/* retícula en la esquina del panel abierto (estática, solo cambia opacidad) */
.about-val::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 70%; height: 70%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: top right;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at top right, #000 10%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.about-val.is-open::before { opacity: 1; }
.about-vtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.about-vnum {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  transition: color 0.5s var(--ease-out);
}
.about-val.is-open .about-vnum { color: var(--od-faint); }
.about-vplus {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-md);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.7s var(--ab-spring), box-shadow 0.5s;
}
.about-val.is-open .about-vplus { transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.about-vbody { position: relative; }
.about-vname {
  display: block;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
  transform-origin: 0 100%;
  transition: transform 0.8s var(--ab-spring);
}
.about-val.is-open .about-vname { transform: scale(1.3); }
.about-vdesc {
  display: block;
  width: min(360px, 60vw);
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--od-soft);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.4s var(--ease-out), transform 0.7s var(--ab-spring);
}
.about-val.is-open .about-vdesc {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

/* ── Cierre / puente a Contacto ─────────────────────── */
.about-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(56px, 8vh, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--border-md);
}
.about-close-q { font-size: 15px; color: var(--ink-muted); }
.about-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.6s var(--ease-out);
}
.about-cta:hover::after,
.about-cta:focus-visible::after { transform: none; transform-origin: 0 50%; }
.about-cta span { display: inline-block; transition: transform 0.7s var(--ab-spring); }
.about-cta:hover span,
.about-cta:focus-visible span { transform: translate3d(6px, 0, 0); }
.about-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }

/* ── Entradas en cascada (solo con JS) ──────────────── */
.about.is-armed .ab-in {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.about.is-armed .ab-in.is-inview { opacity: 1; transform: none; }
/* el bloque negro "se endereza" como la pantalla del cine */
.about.is-armed .about-slab.ab-in {
  transform: perspective(1600px) translate3d(0, 56px, 0) rotateX(9deg) scale(0.97);
  transition: opacity 0.9s var(--ease-out), transform 1.3s var(--ease-out);
}
.about.is-armed .about-slab.ab-in.is-inview { transform: none; }
.about.is-armed .about-slab .about-pillar > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ab-spring);
}
.about.is-armed .about-slab.is-inview .about-pillar > * { opacity: 1; transform: none; }
.about.is-armed .about-slab.is-inview .about-pillar:nth-of-type(1) > * { transition-delay: 0.3s; }
.about.is-armed .about-slab.is-inview .about-pillar:nth-of-type(2) > * { transition-delay: 0.42s; }
.about.is-armed .about-slab.is-inview .about-pillar:nth-of-type(3) > * { transition-delay: 0.54s; }
/* los hijos que ya animan su propio transform al activarse no heredan la demora */
.about.is-armed .about-slab.is-inview .about-pillar > .about-pline { opacity: 1; transform: scaleX(0); transition-delay: 0s; }
.about.is-armed .about-slab.is-inview .about-pillar.is-active > .about-pline { transform: none; }

.about.is-armed .about-vlist .about-val {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
}
.about.is-armed .about-vlist.is-inview .about-val {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--ease-out) calc(var(--i) * 90ms),
    transform 1.05s var(--ab-spring) calc(var(--i) * 90ms),
    flex-grow 0.85s var(--ease-out),
    background-color 0.5s var(--ease-out),
    color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-pillar { padding: 48px 28px 44px; }
}
@media (max-width: 900px) {
  .about-lead { grid-template-columns: 1fr; gap: 28px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .about-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .about-slab { grid-template-columns: 1fr; }
  .about-pillar { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .about-pillar:first-of-type { border-top: 0; }
  .about-pnum { font-size: clamp(48px, 13vw, 64px); }
  .about-phead { margin-bottom: 24px; }
  .about-picon { width: clamp(52px, 14vw, 64px); }
}
@media (max-width: 768px) {
  .about { padding: 40px 20px 56px; }
  .about-slab { border-radius: 20px; }
  .about-pillar { padding: 40px 22px 38px; }
  .about-values-head { flex-direction: column; gap: 6px; }
  .about-vlist { flex-direction: column; height: auto; }
  .about-val { flex: none; min-height: 0; gap: 26px; padding: 22px; }
  .about-val.is-open { flex-grow: 0; }
  .about-vname { white-space: normal; }
  .about-val.is-open .about-vname { transform: none; }
  .about-vdesc {
    width: auto;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    color: var(--ink-muted);
  }
  .about-val.is-open .about-vdesc { color: var(--od-soft); }
}
@media (max-width: 480px) {
  .about-manifesto { letter-spacing: -0.035em; }
  .about-stat { padding: 20px 14px 0; }
  .about-num { font-size: clamp(34px, 11vw, 44px); }
  .about-close { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .about *,
  .about *::before,
  .about *::after,
  .about.is-armed .ab-in {
    transition: none !important;
  }
  .about.is-armed .ab-in,
  .about.is-armed .about-slab .about-pillar > *,
  .about.is-armed .about-vlist .about-val {
    opacity: 1;
    transform: none;
  }
  .about.is-armed .about-head::after { transform: none; }
  .about-manifesto .ab-w { opacity: 1; }
  .about-picon * { animation: none !important; }
}