/* ============================================================
   MENDOZA RODRIGUEZ · about.css — /about/ + /es/nosotros/
   Arquetipos: banner B4 editorial lateral · historia H1 línea de
   vida · valores V1 filas display · banda "Rolex" · stats count-up
   · FAQ 0fr→1fr · CTA ⑤ íntegro (contrato del home).
   Aire k5+m2: 96–140px medidos = clamp(6rem, 8.5vw, 8.75rem).
   NOTA j9a: .polaroid y el bloque .cta se DUPLICAN de home.css
   (frontera de archivos F4) → PENDING-GLOBAL-about.md pide su
   promoción a un inner.css compartido.
   ============================================================ */

/* ---------- A0 · BANNER B4 (scrim izquierdo HORNEADO en la foto) ---------- */
.ab-banner{
  position:relative;background:#14161A;
  min-height:clamp(380px,54vh,640px);
  display:flex;align-items:center;
  overflow:clip;
}
.ab-media{position:absolute;inset:0;overflow:hidden}
.ab-media img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;object-position:42% 30%;
  will-change:transform;
}
/* pre-estado del settle bajo la pre-siembra (0714-c: sin salto al gate) */
html.booting .ab-media img{transform:scale(1.06)}
.ab-banner-inner{
  position:relative;z-index:2;
  padding-top:calc(var(--nav-h) + 1.5rem);
}
.ab-eyebrow{color:#E9B9B4;margin-bottom:1rem}
.ab-h1{
  font-size:clamp(2.6rem,5.5vw,5.6rem);
  color:var(--paper);letter-spacing:-.012em;
  text-shadow:0 1px 2px rgba(15,18,22,.5),0 2px 14px rgba(15,18,22,.35);
}
.ab-crumb{
  margin-top:1.2rem;
  display:flex;align-items:center;gap:.65rem;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,247,248,.82);
}
.ab-crumb a{
  color:rgba(247,247,248,.92);padding-bottom:2px;
  border-bottom:1px solid rgba(247,247,248,.35);
  transition:color .25s,border-color .25s;
}
.ab-crumb a:hover{color:#fff;border-color:#fff}
.ab-crumb .sep{color:var(--accent);font-weight:600}
.ab-crumb [aria-current="page"]{color:rgba(247,247,248,.6)}
/* chip a caballo del borde inferior: puente cromático literal (paper) */
.ab-chip{
  position:absolute;z-index:3;bottom:-19px;
  left:max(4vw,calc((100% - var(--wrap))/2));
  background:var(--paper);box-shadow:0 8px 22px rgba(27,28,30,.14);
}
/* deco familia D: tick-ruler vertical al borde derecho */
.ab-ruler{
  position:absolute;right:2.4%;top:24%;bottom:24%;width:9px;z-index:2;
  border-right:1px solid rgba(247,247,248,.4);
  background:repeating-linear-gradient(to bottom,rgba(247,247,248,.55) 0 1px,transparent 1px 26px);
  background-position:right;background-size:6px 100%;background-repeat:no-repeat;
  opacity:.7;pointer-events:none;
}
/* nav legible sobre el banner (foto mixta clara/oscura) SOLO con barra
   transparente: texto claro + sombra de legibilidad (ley l) */
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-links a{
  color:rgba(247,247,248,.9);
  text-shadow:0 1px 2px rgba(15,18,22,.7),0 2px 10px rgba(15,18,22,.45);
}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-links a:hover,
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-links a[aria-current="page"]{color:#fff}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-links a::before{background:rgba(247,247,248,.6)}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-bubble{border-color:rgba(247,247,248,.55)}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .lang-pill{border-color:rgba(247,247,248,.4)}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .lang-pill a{color:rgba(247,247,248,.75)}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .lang-pill a[aria-current="true"]{background:var(--paper);color:var(--ink)}
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-burger i,
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-burger i::before,
body[data-page="about"]:not(.nav-scrolled):not(.menu-open) .nav-burger i::after{background:var(--paper)}

/* ---------- A1 · HISTORIA — línea de vida ---------- */
.story{
  position:relative;background:var(--paper);
  padding-block:clamp(6rem,8.5vw,8.75rem) clamp(5rem,7vw,7rem);
  overflow:clip;
}
/* fondo nunca plano (ley q): stud-lines a susurro */
.story::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(165,165,168,.08) 0 1px,transparent 1px 168px);
}
/* ghost "20" hueco: la textura tipográfica de la página (CONCEPT §6) */
.story-ghost{
  position:absolute;right:-.06em;top:.4em;z-index:0;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(24vw,420px);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(165,165,168,.28);
  pointer-events:none;user-select:none;will-change:transform;
}
.story-head{position:relative;z-index:1;max-width:760px}
.story-h{
  font-size:clamp(2.4rem,4.8vw,4.6rem);color:var(--ink);
  letter-spacing:-.012em;margin-top:.9rem;
}
.story-lede{max-width:62ch;color:var(--ink-soft);margin-top:1.3rem}
/* la línea de vida */
.tl{
  position:relative;z-index:1;
  margin-top:clamp(3.2rem,5vw,4.6rem);
  padding-left:clamp(1.6rem,3vw,2.6rem);
  display:flex;flex-direction:column;gap:clamp(3rem,4.5vw,4.2rem);
}
.tl-rail{
  position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;
  background:var(--steel);opacity:.55;
  transform:scaleY(0);transform-origin:50% 0;will-change:transform;
}
html.no-motion .tl-rail{transform:none}
.tl-node{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:center;
}
.tl-node.flip .tl-txt{order:2}
.tl-node.flip .polaroid{order:1;justify-self:start;transform:rotate(3deg)}
.tl-node.flip .polaroid.rv{transform:rotate(3deg) translateY(26px)}
.tl-node.flip .polaroid.rv.is-in{transform:rotate(3deg)}
.tl-node .polaroid{justify-self:end}
.tl-tag{
  font-family:var(--font-d);font-weight:900;
  font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--ink);letter-spacing:-.008em;
}
.tl-idx{
  font-family:var(--font-d);font-weight:800;font-stretch:75%;
  color:var(--accent-deep);margin-right:.6rem;
  font-size:.72em;vertical-align:.08em;letter-spacing:.02em;
}
.tl-line{
  margin-top:.7rem;font-weight:600;color:var(--ink);
  font-size:1.08rem;max-width:34ch;
}
.tl-p{margin-top:.55rem;color:var(--ink-soft);max-width:48ch}

/* polaroid (duplicado de home.css — ver nota de cabecera) */
.polaroid{
  background:#fff;padding:12px 12px 14px;border:1px solid var(--hairline);
  box-shadow:0 18px 40px rgba(27,28,30,.12);
  transform:rotate(-2deg);max-width:320px;
}
.polaroid.rv{transform:rotate(-2deg) translateY(26px)}
.polaroid.rv.is-in{transform:rotate(-2deg)}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{
  font-size:.78rem;color:var(--steel);padding-top:.6rem;text-align:center;
  letter-spacing:.04em;
}

/* ---------- A2 · VALORES — V1 filas display (cero cajitas) ---------- */
.values{
  position:relative;background:var(--surface);
  padding-block:clamp(6rem,8.5vw,8.75rem);
  overflow:clip;
}
.values::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(27,28,30,.045) 0 1px,transparent 1px 120px);
}
.val-h{
  position:relative;z-index:1;
  font-size:clamp(2.1rem,4.2vw,4rem);color:var(--ink);margin-top:.9rem;
}
.val-rows{position:relative;z-index:1;margin-top:clamp(2.6rem,4vw,3.8rem)}
.val-row{
  display:grid;grid-template-columns:3.4rem minmax(0,.55fr) minmax(0,1fr);
  align-items:baseline;gap:clamp(1rem,2.4vw,2.4rem);
  padding-block:clamp(1.2rem,2vw,1.8rem);
  border-top:1px solid rgba(27,28,30,.16);
}
.val-row:last-child{border-bottom:1px solid rgba(27,28,30,.16)}
.val-idx{
  font-family:var(--font-d);font-weight:800;font-stretch:75%;
  font-size:.95rem;color:var(--steel);letter-spacing:.04em;
}
.val-word{
  font-family:var(--font-d);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,3.8vw,3.5rem);line-height:1;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;
}
.val-row--kw .val-word{color:var(--accent)}
.val-copy{color:var(--ink-soft);font-size:1rem;max-width:52ch}

/* ---------- A3 · BANDA "ROLEX" — la firma visual de About ---------- */
.rolex{
  position:relative;background:#141519;color:var(--paper);
  padding-block:clamp(6rem,8.5vw,8.75rem);
  min-height:clamp(540px,64vh,760px); /* A3: 60–85vh con techo px */
  display:grid;align-items:center;
  overflow:clip;
}
.rolex::before{ /* fondo nunca plano: stud-lines claras a susurro */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(247,247,248,.05) 0 1px,transparent 1px 150px);
}
.rolex-ghost{
  position:absolute;left:2%;bottom:-.1em;z-index:0;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(15vw,250px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(247,247,248,.10);
  pointer-events:none;user-select:none;will-change:transform;
}
.rolex-inner{position:relative;z-index:2}
/* OJO: jamás max-width en ch aquí — el ch se re-encoge con fitHeads y el
   shrink-to-fit nunca converge (bug cazado en v1); la máscara es el wrap */
.rolex-phrase{
  font-size:clamp(2rem,4.5vw,4.5rem);
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.06;
  color:var(--paper);
}
.rolex-phrase .hl{padding-bottom:.12em;margin-bottom:-.06em}
.rolex-phrase .kw{color:var(--accent)}
/* photo-pill DENTRO del flujo del h2 (em-units, ley 05 §9) */
.ppill{
  display:inline-block;width:2.2em;height:.78em;
  border-radius:999px;overflow:hidden;vertical-align:-.08em;
  border:1px solid rgba(247,247,248,.25);
  will-change:transform;
}
.ppill img{width:100%;height:100%;object-fit:cover;display:block}
/* la llana sangra el borde derecho y ocluye el final de la 2ª línea */
.rolex-knife{
  position:absolute;right:-4%;top:14%;z-index:3;
  width:min(30.5vw,440px);will-change:transform;pointer-events:none;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.38));
}
.rolex-knife img{width:100%;height:auto;transform:rotate(-14deg)}
.rolex-pol{
  position:absolute;right:8%;bottom:7%;z-index:2;will-change:transform;
}
.rolex-pol .polaroid{max-width:190px;transform:rotate(3deg);padding:9px 9px 10px}
.rolex-pol .polaroid figcaption{font-size:.7rem;padding-top:.45rem}

/* ---------- A4 · STATS — count-up (la firma de interacción) ---------- */
.stats{
  position:relative;background:var(--paper);
  padding-block:clamp(6rem,8.5vw,8.75rem);
  overflow:clip;
}
.stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.stat{
  padding:clamp(1.8rem,3vw,2.8rem) clamp(1.2rem,2.4vw,2.6rem);
  display:flex;flex-direction:column;gap:.5rem;
}
.stat + .stat{border-left:1px solid var(--hairline)}
.stat-n{
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:clamp(3rem,5.5vw,5rem);color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  min-width:2ch; /* ancho reservado: el count-up jamás empuja el layout */
}
.stat-l{
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.stat-chip{margin-top:1.6rem;background:var(--paper)}
.stat-chip svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2}
.stats-ruler{
  position:absolute;right:3%;top:26%;bottom:26%;width:9px;
  border-right:1px solid var(--hairline);
  background:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 26px);
  background-position:right;background-size:6px 100%;background-repeat:no-repeat;
  opacity:.6;pointer-events:none;
}

/* ---------- A5 · FAQ — details/summary, apertura 0fr→1fr ---------- */
.faq{
  position:relative;background:var(--paper);
  padding-block:clamp(2rem,3.5vw,3.5rem) clamp(6rem,8.5vw,8.75rem);
}
.faq-wrap{max-width:820px}
.faq-h{font-size:clamp(2.1rem,4.2vw,4rem);color:var(--ink);margin-top:.9rem}
.faq-list{margin-top:clamp(2.2rem,3.4vw,3.2rem)}
.faq-item{border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) 2rem;
  align-items:center;gap:1rem;
  padding-block:1.15rem;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover .faq-q{color:var(--accent-deep)}
.faq-n{
  font-family:var(--font-d);font-weight:800;font-stretch:75%;
  font-size:.95rem;color:var(--steel);letter-spacing:.04em;
}
.faq-q{font-weight:600;font-size:1.04rem;color:var(--ink);transition:color .25s}
/* chevron: exención CSS sancionada (§12.12 — GSAP no posee estos nodos) */
.faq-chev{
  justify-self:end;width:10px;height:10px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .3s var(--ease-house);
}
.faq-item.is-open .faq-chev{transform:rotate(225deg)}
/* apertura por grid-template-rows (cap. 12 §5, sin medir alturas);
   sin JS (html sin .js) los <details open> quedan abiertos y legibles */
.faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease-house)}
html.js .faq-item:not(.is-open) .faq-a{grid-template-rows:0fr}
.faq-a-in{overflow:hidden;min-height:0}
.faq-a p{color:var(--ink-soft);max-width:64ch;padding:0 0 1.3rem 4.2rem}
@media (prefers-reduced-motion:reduce){
  .faq-a,.faq-chev{transition:none}
}

/* ---------- A6 · CTA ⑤ (duplicado del contrato de home.css) ---------- */
.cta{
  position:relative;background:var(--paper);
  padding-block:clamp(5rem,9vw,8.5rem);
  content-visibility:auto;
  contain-intrinsic-width:auto 1px;contain-intrinsic-height:auto 620px;
  overflow:clip;
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 24% 30%,rgba(255,255,255,.85),transparent 60%);
}
.cta-ghost{
  position:absolute;left:0;right:0;bottom:-.12em;z-index:0;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(11vw,200px);text-align:center;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(165,165,168,.22);
  pointer-events:none;user-select:none;will-change:transform;
}
.cta-inner{position:relative;z-index:2;max-width:860px;text-align:center;margin-inline:auto}
.cta-h{font-size:clamp(2rem,3.6vw,3.4rem);color:var(--ink);margin-top:1rem}
.cta-sub{max-width:56ch;margin:1.1rem auto 0;color:var(--ink-soft)}
.cta-btns{
  display:flex;justify-content:center;align-items:center;gap:.9rem;
  margin-top:2rem;white-space:nowrap;flex-wrap:nowrap;
}
.cta-eco{
  position:absolute;right:6%;bottom:7%;z-index:1;width:min(11vw,150px);
  will-change:transform;pointer-events:none;
}
.cta-ruler{
  position:absolute;right:3%;top:22%;bottom:22%;width:9px;z-index:1;
  border-right:1px solid var(--hairline);
  background:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 26px);
  background-position:right;background-size:6px 100%;background-repeat:no-repeat;
  opacity:.6;pointer-events:none;
}

/* ============================================================
   RESPONSIVE (disciplina 390/768/1440/1920/2560; vw con techo)
   ============================================================ */
@media (max-width:1080px){
  .rolex-knife{right:-6%;top:24%;width:min(34vw,380px)}
}
@media (max-width:900px){
  .tl-node{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:1.6rem}
  .polaroid{max-width:260px}
  .rolex-pol{position:static;margin:2.4rem 0 0 max(4vw,calc((100% - var(--wrap))/2))}
  .rolex-pol .polaroid{max-width:170px}
  .val-row{grid-template-columns:2.6rem minmax(0,1fr);grid-template-rows:auto auto}
  .val-copy{grid-column:2;max-width:none}
}
@media (max-width:760px){
  .ab-banner{min-height:clamp(340px,52vh,560px)}
  .ab-media img{object-position:46% 30%}
  .ab-ruler{display:none}
  .ab-chip{bottom:-17px;font-size:.7rem;padding:.45rem .8rem}
  .story-ghost{font-size:min(34vw,220px);top:.2em;-webkit-text-stroke-width:1.5px}
  .tl{padding-left:1.2rem;gap:2.6rem}
  .tl-node,.tl-node.flip{grid-template-columns:minmax(0,1fr)}
  .tl-node.flip .tl-txt{order:1}
  .tl-node.flip .polaroid{order:2}
  .tl-node .polaroid,.tl-node.flip .polaroid{justify-self:start;max-width:240px}
  .rolex{min-height:clamp(430px,56vh,600px)}
  .rolex-knife{
    right:-10%;top:auto;bottom:12%;width:min(52vw,300px);
  }
  .rolex-pol{margin-top:2rem}
  .stats-ruler,.cta-ruler{display:none}
  .cta-eco{right:4%;bottom:3.5%;width:110px}
  .faq-a p{padding-left:0}
  .faq-item summary{grid-template-columns:2.4rem minmax(0,1fr) 1.6rem;gap:.7rem}
}
@media (max-width:560px){
  .stat-row{grid-template-columns:1fr}
  .stat + .stat{border-left:0;border-top:1px solid var(--hairline)}
  .cta-btns{flex-direction:column;white-space:normal;align-items:stretch;max-width:330px;margin-inline:auto}
}