/* =====================================================================
   MC SYSTEMS · about.css — ABOUT (F4) · A0-A7 cap.13 §14
   Banner B1 pill rompe-marco · H2 editorial sticky · V4 karaoke ·
   banda AIRFLOW (Rolex) · stats count-up (firma) · FAQ 0fr->1fr · CTA ⑤
   Duenio exclusivo de esta pagina (LEY FILE FRONTIER). Los estilos del
   CTA ⑤ se duplican de home.css a proposito: consolidacion pendiente
   en PENDING-GLOBAL-about.md (ley j9a la aplica el consolidador).
   ===================================================================== */

/* ---------------- A0 · BANNER B1 (pill rompe-marco) ---------------- */
.banner { position:relative; min-height:clamp(340px,48vh,560px); overflow:hidden;
  background:var(--ink); }
.banner-media { position:absolute; inset:-10% 0; }
.banner-media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* scrim HORNEADO en el asset (ASSETS-fotos.md); refuerzo suave zona texto */
.banner-content { position:relative; z-index:2; min-height:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:clamp(90px,14vh,130px) 6vw clamp(3.4rem,6vh,4.6rem); text-align:center; }
.banner-eyebrow { font-weight:600; font-size:12.5px; letter-spacing:.16em;
  color:var(--steel); text-transform:uppercase; }
.banner-eyebrow .d { color:#FF6B71; }
.banner-h1 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,5.6rem); line-height:1; letter-spacing:.01em;
  color:var(--paper); }
/* pill del breadcrumb: COMPLETA dentro del banner con margen inferior claro
   (ley 0720-a #10: jamas a caballo del corte banner->contenido). Su color = paper
   (superficie de la seccion siguiente = puente cromatico literal, §13.C B1) */
.banner-crumb { position:absolute; left:50%; bottom:clamp(20px,3.6vh,36px);
  transform:translateX(-50%);
  z-index:3; display:flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--paper); border:1px solid var(--hairline); border-radius:999px;
  padding:12px 22px; font-family:var(--fd); font-weight:600; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  box-shadow:0 14px 34px rgba(16,20,31,.25); }
.banner-crumb a { color:var(--cold-deep); text-decoration:none; position:relative; }
.banner-crumb a::after { content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:var(--cold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s var(--ease); }
.banner-crumb a:hover::after, .banner-crumb a:focus-visible::after { transform:scaleX(1); }
.banner-crumb .d { color:var(--heat); }
/* pre-siembra de la media bajo .js (el reveal solo compone, 0714-c) */
.js .banner-media { opacity:.001; }
.js.langswap .banner-media { opacity:1; }

/* ---------------- A1 · HISTORIA (H2 editorial sticky) ---------------- */
/* aire banner->contenido 96-140px MEDIDO (k5+m2/r1): la pill ya vive COMPLETA
   dentro del banner (ley 0720-a #10); el padding solo da respiro a la masa entrante */
.story { position:relative; background:var(--paper); overflow:clip;
  padding:clamp(6.5rem,9vw,8.6rem) 0 clamp(4.5rem,7vw,7rem); }
.story-grid { width:min(92vw,1360px); margin:0 auto; display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2.4rem,5vw,6rem);
  align-items:start; }
.story-side { position:sticky; top:104px; }
.side-panel { position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:22px; padding:clamp(1.1rem,1.8vw,1.6rem);
  box-shadow:0 24px 60px rgba(16,20,31,.08); }
.side-panel > img { border-radius:12px; }
.side-sticker { position:absolute; top:-14px; left:-14px; z-index:3; transform:rotate(-4deg);
  background:var(--cold); color:var(--paper); font-family:var(--fd); font-weight:600;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px;
  border-radius:8px; box-shadow:0 10px 24px rgba(31,35,115,.35); }
.side-chips { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.chip.who { display:flex; align-items:baseline; gap:8px; background:var(--paper-2);
  font-size:13px; }
.chip.who b { font-family:var(--fd); font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; }
.chip.who span { color:#3A4152; font-size:12px; }
.story-copy .kicker { color:var(--cold-deep); }
.story-copy h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,4rem); line-height:1.02; letter-spacing:.005em;
  color:var(--ink); margin:16px 0 22px; }
.story-copy h2 em { font-style:normal; color:var(--heat); }
.story-copy > p:not(.kicker) { font-size:15.5px; line-height:1.75; max-width:58ch;
  color:#2A3040; margin-bottom:1.15rem; }
.pull { position:relative; margin:1.8rem 0 2rem; padding:6px 0 6px 22px;
  border-left:3px solid var(--heat); max-width:46ch; }
.pull p { font-family:var(--fd); font-weight:500; font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.35; color:var(--ink); }
.pull cite { display:block; margin-top:10px; font-style:normal; font-size:12px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cold-deep); }
.inset { margin:1.9rem 0 2.1rem; max-width:520px; }
.inset img { border-radius:14px; box-shadow:0 18px 44px rgba(16,20,31,.12); }
.inset figcaption { margin-top:9px; font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cold-deep); }
.inset.alt { margin-left:auto; }
.story-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:1.6rem; }

/* ---------------- A2 · VALORES (V4 manifiesto karaoke + 4 chips) ---------------- */
.values { position:relative; background:var(--paper-2); overflow:clip;
  padding:clamp(5rem,8vw,8rem) 0; }
/* patron filtro-plisado 5% (mismo tile que el home, re-declarado: frontera de archivo) */
.values::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M-2 20 20 -2M-2 38 38 -2' stroke='%232C3199' stroke-width='1'/%3E%3C/svg%3E") repeat; }
.values-inner { position:relative; width:min(92vw,1160px); margin:0 auto; }
.values-inner .kicker { color:var(--cold-deep); }
.kar { margin-top:22px; font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3.5rem); line-height:1.16; letter-spacing:.005em;
  max-width:24ch; }
.kar-w { color:var(--ink); }
/* karaoke: bajo .js las palabras nacen apagadas; JS las enciende al scrub.
   color via transition CSS (no transform: exencion sancionada, un nodo un duenio) */
.js .kar .kar-w { color:rgba(16,20,31,.16); transition:color .35s var(--ease); }
.js .kar .kar-w.lit { color:var(--ink); }
.js .kar .kar-w.hot.lit { color:var(--heat); }
.js .kar .kar-w.cool.lit { color:var(--cold); }
.kar-w.hot { color:var(--heat); }
.kar-w.cool { color:var(--cold); }
.js.langswap .kar .kar-w { color:var(--ink); }
.js.langswap .kar .kar-w.hot { color:var(--heat); }
.js.langswap .kar .kar-w.cool { color:var(--cold); }
.val-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.4rem); margin-top:clamp(2.4rem,4vw,3.6rem); }
.vchip { background:var(--paper); border:1px solid var(--hairline); border-radius:16px;
  padding:18px 20px; box-shadow:0 10px 26px rgba(16,20,31,.06); }
.vchip b { display:block; font-family:var(--fd); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cold-deep); }
.vchip.hot b { color:var(--heat-deep); }
.vchip span { display:block; margin-top:7px; font-size:12.5px; line-height:1.55;
  color:#3A4152; }

/* ---------------- A3 · BANDA «AIRFLOW» (Rolex, C2) ---------------- */
.airflow { position:relative; background:var(--ink); overflow:clip;
  padding:clamp(5rem,9vw,9rem) 0; min-height:62vh; display:flex; align-items:center; }
.air-inner { position:relative; width:min(92vw,1360px); margin:0 auto; }
.air-h { position:relative; z-index:3; font-family:var(--fd); font-weight:700;
  text-transform:uppercase; font-size:clamp(2.4rem,5.2vw,4.8rem); line-height:1.06;
  letter-spacing:.01em; color:var(--paper); max-width:16ch;
  width:-webkit-fit-content; width:fit-content; margin-left:auto;
  margin-right:clamp(100px,12vw,230px); }
.air-h .hl-in { display:inline-block; }
.air-h em { font-style:normal; color:var(--ice); }
/* photo-pill DENTRO del flujo del h2 (em-units, 05 §9) */
.photo-pill { display:inline-block; width:2.2em; height:.78em; border-radius:999px;
  overflow:hidden; vertical-align:-.08em; box-shadow:0 6px 18px rgba(0,0,0,.4);
  border:1px solid rgba(245,247,251,.25); }
.photo-pill img { width:100%; height:100%; object-fit:cover; }
.air-ghost { position:absolute; left:2%; top:-16%; z-index:1; font-family:var(--fd);
  font-weight:700; font-size:min(15vw,240px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(199,205,214,.14); pointer-events:none; }
.air-polaroid { position:absolute; left:7vw; bottom:-10%; z-index:2; width:min(13vw,180px);
  transform:rotate(-3deg); background:var(--paper); padding:7px 7px 11px;
  border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.air-polaroid img { border-radius:5px; }
.air-polaroid figcaption { margin-top:6px; font-size:9.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cold-deep);
  text-align:center; }
/* la RTU sangra el borde derecho y ocluye el final de la linea 2 ("ON"/"CON")
   <=30% de linea; la keyword AIRFLOW/AIRE queda siempre legible (§14.A / CONCEPT A3).
   top:59% = arranca BAJO la linea 1; left relativo al centro = mordida estable 1024-1920 */
.air-rtu { position:absolute; left:calc(50% + min(19.1vw,275px)); top:46%; z-index:4;
  width:min(38vw,560px); pointer-events:none; }
.air-rtu img { width:100%; height:auto; }

/* ---------------- A4 · STATS (fila de 2 + chip; firma = count-up) ---------------- */
.stats { position:relative; background:var(--paper); overflow:clip;
  padding:clamp(4.6rem,7.5vw,7.5rem) 0; }
.stats-ghost { position:absolute; right:-2%; top:-8%; font-family:var(--fd);
  font-weight:700; font-size:min(20vw,320px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(44,49,153,.10); pointer-events:none; }
.stats-inner { position:relative; width:min(92vw,1160px); margin:0 auto; }
.stats-inner .kicker { color:var(--cold-deep); margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.stats-row { display:flex; align-items:center; gap:clamp(1.6rem,4vw,4rem); }
.stat { flex:0 0 auto; padding-right:clamp(1.6rem,4vw,4rem);
  border-right:1px solid var(--hairline); }
.stat-n-wrap { font-family:var(--fd); font-weight:700; color:var(--heat);
  font-size:clamp(3.2rem,5.8vw,4.9rem); line-height:1;
  font-variant-numeric:tabular-nums; }
.stat:nth-child(2) .stat-n-wrap { color:var(--cold); }
.stat-n { display:inline-block; min-width:2ch; text-align:right; }
.stat:nth-child(2) .stat-n { min-width:1ch; }
.stat-n-wrap sup { font-size:.45em; vertical-align:.7em; }
.stat p { margin-top:8px; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#3A4152; max-width:22ch; }
.stat-chip { align-self:center; }

/* ---------------- A5 · FAQ (details + 0fr->1fr) ---------------- */
.faq { position:relative; background:var(--paper-2); overflow:clip;
  padding:clamp(4.6rem,7.5vw,7.5rem) 0; }
.faq-inner { position:relative; width:min(92vw,760px); margin:0 auto; }
.faq-head { margin-bottom:clamp(1.8rem,3vw,2.8rem); }
.faq-head .kicker { color:var(--cold-deep); }
.faq-head h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.05; margin-top:12px; }
.faq-head h2 em { font-style:normal; color:var(--heat); }
.fq { border-bottom:1px solid var(--hairline); }
.fq summary { list-style:none; cursor:pointer; display:flex; align-items:baseline;
  gap:16px; padding:20px 4px; transition:background-color .25s; }
.fq summary::-webkit-details-marker { display:none; }
.fq summary:hover { background:rgba(245,247,251,.65); }
.fq summary:focus-visible { outline:2px solid var(--cold); outline-offset:3px;
  border-radius:6px; }
.fq-n { font-family:var(--fd); font-weight:600; font-size:13px; color:var(--heat-deep);
  flex:0 0 26px; }
.fq-q { font-family:var(--fd); font-weight:600; font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--ink); flex:1; }
.fq-c { position:relative; flex:0 0 14px; height:14px; align-self:center; }
.fq-c::before, .fq-c::after { content:""; position:absolute; background:var(--cold-deep);
  transition:transform .3s var(--ease); }
.fq-c::before { left:0; right:0; top:6px; height:2px; }
.fq-c::after { top:0; bottom:0; left:6px; width:2px; }
.fq.is-open .fq-c::after { transform:scaleY(0); }
.fq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease); }
.fq.is-open .fq-body { grid-template-rows:1fr; }
.fq-in { overflow:hidden; min-height:0; }
.fq-in p { padding:0 4px 20px 42px; font-size:14.5px; line-height:1.7; color:#2A3040;
  max-width:60ch; }

/* -------- A6 · COMPROMISO / COBERTURA (etapa penultima, ley 0720-a #6) --------
   Cierre de valor antes del CTA: la promesa fundacional + cobertura Austin.
   Superficie paper (bridge paper-2 FAQ -> ink CTA, que asi INVIERTE tono §7.4).
   Solo hechos del brief. Motion = reveals .rv (duenio generico en about.js). */
.commit { position:relative; background:var(--paper); overflow:clip;
  padding:clamp(4.6rem,7.5vw,7.5rem) 0; }
.commit-ghost { position:absolute; left:-1%; bottom:-9%; z-index:0; font-family:var(--fd);
  font-weight:700; font-size:min(16vw,240px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(44,49,153,.07); pointer-events:none; user-select:none; }
.commit-inner { position:relative; z-index:1; width:min(92vw,1200px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2.2rem,5vw,5rem); align-items:center; }
.commit-copy .kicker { color:var(--cold-deep); }
.commit-copy h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.04; letter-spacing:.005em;
  color:var(--ink); margin:14px 0 20px; }
.commit-copy h2 em { font-style:normal; color:var(--heat); }
.commit-copy > p { font-size:15.5px; line-height:1.75; max-width:52ch; color:#2A3040; }
.commit-facts { list-style:none; margin-top:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid var(--hairline); }
.commit-facts li { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:16px 2px; border-bottom:1px solid var(--hairline); }
.commit-facts b { font-family:var(--fd); font-weight:700; font-size:14px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--cold-deep);
  flex:0 0 clamp(118px,13vw,168px); }
.commit-facts li:first-child b { color:var(--heat-deep); }
.commit-facts span { font-size:13px; line-height:1.5; color:#3A4152; flex:1; min-width:180px; }
.commit-media { position:relative; }
.commit-media img { width:100%; height:auto; border-radius:16px;
  box-shadow:0 24px 60px rgba(16,20,31,.14); }
.commit-media figcaption { margin-top:10px; font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cold-deep); }
.commit-media figcaption .d { color:var(--heat); }

/* ---------------- A7 · CTA ⑤ (contrato del home, estilos re-declarados) -------- */
.cta-band { position:relative; height:64vh; min-height:460px; overflow:hidden; background:var(--ink-2); }
.cta-photo { position:absolute; inset:-10% 0; }
.cta-photo img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.cta-scrim { position:absolute; inset:0; background:rgba(14,18,32,.8); }
.cta-inner { position:relative; z-index:3; width:min(92vw,1200px); margin:0 auto; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; }
.cta-inner .kicker { color:var(--steel); }
.cta-inner .kicker .d { color:#FF6B71; }
.cta-inner h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.03; color:var(--paper); }
.cta-inner h2 em { font-style:normal; color:var(--ice); }
.cta-inner p { font-size:15px; color:var(--steel); max-width:52ch; }
.cta-btns { display:flex; gap:14px; flex-wrap:nowrap; }
.cta-eco { position:absolute; right:3vw; bottom:-4%; z-index:2; width:min(22vw,300px);
  opacity:.9; pointer-events:none; }

/* ---------------- MQ (ley l) ---------------- */
@media (max-width:1080px) {
  .val-chips { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .story-grid { grid-template-columns:1fr; }
  .story-side { position:static; max-width:520px; }
  .air-h { margin-left:0; margin-right:0; }
  .air-rtu { left:auto; right:-16vw; top:auto; bottom:-4%; width:min(46vw,380px); }
  .air-polaroid { left:6vw; width:min(20vw,150px); }
  .stats-row { flex-wrap:wrap; row-gap:1.8rem; }
  .commit-inner { grid-template-columns:1fr; gap:clamp(2rem,5vw,2.8rem); }
  .commit-media { max-width:560px; }
}
@media (max-width:760px) {
  .banner { min-height:clamp(300px,44vh,420px); }
  .banner-content { padding-top:clamp(84px,16vh,110px); }
  .banner-crumb { padding:10px 16px; font-size:11px; }
  .story { padding-top:clamp(6.2rem,26vw,7.5rem); }
  .kar { max-width:none; }
  .val-chips { grid-template-columns:1fr; }
  .airflow { min-height:0; padding:clamp(4rem,14vw,6rem) 0 clamp(6.5rem,22vw,8rem); }
  .air-h { max-width:none; }
  .air-rtu { left:auto; right:-30vw; top:auto; bottom:-3%; width:60vw; }
  .air-polaroid { display:none; }
  .air-ghost { font-size:32vw; top:-6%; }
  .stats-row { gap:1.4rem; }
  .stat { padding-right:1.4rem; }
  .stats-ghost { font-size:42vw; top:auto; bottom:-6%; }
  .commit-facts b { flex:0 0 100%; }
  .commit-facts span { min-width:0; }
  .commit-ghost { font-size:34vw; bottom:-4%; }
  .fq-in p { padding-left:4px; }
  .cta-band { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .cta-inner { padding:0; }
  .cta-btns { flex-direction:column; width:min(78vw,320px); }
  .cta-eco { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .banner-media { opacity:1; }
  .js .kar .kar-w { color:var(--ink); transition:none; }
  .js .kar .kar-w.hot { color:var(--heat); }
  .js .kar .kar-w.cool { color:var(--cold); }
  .fq-body, .fq-c::before, .fq-c::after, .banner-crumb a::after { transition:none; }
}