/* ============================================================
   VENTURA · about.css — A1 línea de vida · A2 filas display ·
   A3 banda Rolex · FAQ · stats count-up · cierre WHO SHOWS UP
   ============================================================ */

/* ============ A1 · HISTORIA — LÍNEA DE VIDA ============ */
.abt-life{background:var(--champagne)}
.life-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.life-copy .kicker{margin-bottom:1.2rem}
.life-copy h2{font-size:clamp(2.3rem,4.6vw,4.6rem);color:var(--t-on-light);max-width:13ch}
.life-copy>p{margin-top:1.5rem;max-width:52ch;color:var(--t-on-light-muted)}
.life-rail{position:relative;margin-top:2.4rem;padding-left:2rem}
.life-rail::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:rgba(128,137,142,.4)}
.rail-fill{position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--gold);transform-origin:top center;transform:scaleY(0)}
html.no-js .rail-fill,html.rm .rail-fill{transform:scaleY(1)}
.life-node{position:relative;padding:.2rem 0 1.7rem}
.life-node:last-child{padding-bottom:.2rem}
.life-node::before{
  content:"";position:absolute;left:-2rem;top:.62rem;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--gold);background:var(--champagne);
}
.life-node h3{font-family:var(--f-display);font-weight:700;font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase;color:var(--t-on-light)}
.life-node h3 b{color:var(--bronze);font-weight:700}
.life-node p{margin-top:.3rem;max-width:44ch;font-size:.95rem;line-height:1.6;color:var(--t-on-light-muted)}
.life-pols{position:relative;padding-top:1.2rem}
.life-pols .pol{position:relative;width:min(78%,380px)}
.life-pols .pol:nth-child(1){transform:rotate(-4deg);z-index:3}
.life-pols .pol:nth-child(2){transform:rotate(3deg);margin:-1.6rem 0 0 auto;z-index:2}
.life-pols .pol:nth-child(3){transform:rotate(-2deg);margin:-1.4rem 0 0 8%;z-index:1}
.life-ghost{right:-1%;top:2%;font-size:clamp(7rem,13vw,13rem)}
.cota-life{width:180px;left:4%;bottom:5%}

/* ============ A2 · VALORES — V1 FILAS DISPLAY ============ */
.abt-values{background:var(--paper)}
.val-rows{position:relative;z-index:2}
.val-row{
  display:grid;grid-template-columns:64px 1fr 1.1fr auto;gap:clamp(1rem,2.5vw,2.5rem);
  align-items:center;padding:1.25rem .2rem;border-top:1px solid rgba(128,137,142,.32);
}
.val-row:last-child{border-bottom:1px solid rgba(128,137,142,.32)}
.val-idx{font:700 .78rem/1 var(--f-ui);letter-spacing:.14em;color:var(--steel)}
.val-word{
  display:inline-flex;align-items:center;gap:0;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1;color:var(--t-on-light);white-space:nowrap;
}
.val-word b{color:var(--bronze);font-weight:800}
/* glifo-imagen que crece DENTRO del titular (exención CSS §12.12) */
.val-glyph{
  width:0;height:clamp(2rem,3.4vw,3rem);border-radius:999px;overflow:hidden;flex:0 0 auto;
  margin-inline:0;transition:width .45s var(--e-out),margin .45s var(--e-out);
}
.val-glyph img{width:clamp(3rem,5vw,4.6rem);height:100%;object-fit:cover}
.val-row:hover .val-glyph,.val-row:focus-within .val-glyph{width:clamp(3rem,5vw,4.6rem);margin-inline:.35em .1em}
.val-copy{font-size:.95rem;line-height:1.55;color:var(--t-on-light-muted);max-width:46ch}
.val-ic{width:44px;height:44px;border-radius:12px;border:1px solid rgba(130,92,44,.35);color:var(--bronze);display:flex;align-items:center;justify-content:center}
.val-ic svg{width:26px;height:26px}
.val-ghost{left:-1%;bottom:-5%;font-size:clamp(6.5rem,12vw,12rem)}

/* ============ A3 · BANDA «ROLEX» ============ */
.abt-band{
  position:relative;min-height:62vh;background:var(--ink);color:var(--t-on-dark);
  display:flex;align-items:center;overflow:clip;padding-block:clamp(4rem,6vw,5.5rem);
}
.abt-band .band-bg{position:absolute;inset:-8% 0;z-index:0;overflow:clip}
.abt-band .band-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.abt-band .band-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,23,26,.2) 0%,rgba(20,23,26,.78) 60%,var(--ink) 100%);
}
.ab-lock{position:relative;z-index:3;max-width:1120px}
.ab-phrase{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:1.04;letter-spacing:.01em;
  color:var(--t-on-dark);
}
.ab-phrase .kw-gold{
  background:linear-gradient(178deg,var(--gold-hi) 10%,var(--gold) 55%,var(--gold-lo) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.photo-pill{
  display:inline-block;width:2.2em;height:.78em;border-radius:999px;overflow:hidden;
  vertical-align:-.08em;margin-inline:.08em;
}
.photo-pill img{width:100%;height:100%;object-fit:cover}
.ab-sub{margin-top:1.3rem;max-width:44ch;color:var(--t-on-dark-muted);font-size:.98rem}
.ab-duct{
  position:absolute;right:-16%;bottom:-10%;width:56%;max-width:900px;z-index:2;
  pointer-events:none;user-select:none;
}
.ab-ghost{right:2%;top:-8%;font-size:clamp(9rem,17vw,17rem);z-index:1}

/* ============ A5 · FAQ ============ */
.abt-faq{background:var(--champagne)}
.faq-wrap{position:relative;z-index:2;max-width:760px;margin-inline:auto}
.faq{border-top:1px solid rgba(128,137,142,.32)}
.faq:last-of-type{border-bottom:1px solid rgba(128,137,142,.32)}
.faq summary{
  display:flex;align-items:baseline;gap:1rem;cursor:pointer;list-style:none;
  padding:1.05rem .15rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--f-display);font-weight:900;font-size:.85rem;color:var(--bronze);flex:0 0 2.2rem}
.faq summary h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:.045em;text-transform:uppercase;color:var(--t-on-light);flex:1}
.faq summary .chev{
  flex:0 0 auto;align-self:center;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(130,92,44,.45);color:var(--bronze);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s var(--e-out);
}
.faq summary .chev svg{width:10px;height:10px}
.faq[open] summary .chev{transform:rotate(45deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--e-out)}
.faq[open] .faq-body{grid-template-rows:1fr}
.faq-body>div{overflow:hidden;min-height:0}
.faq-body p{padding:0 .15rem 1.1rem 3.35rem;font-size:.95rem;line-height:1.65;color:var(--t-on-light-muted)}
html.no-js .faq-body{grid-template-rows:1fr}
.faq-ghost{right:0;top:0;font-size:clamp(6rem,11vw,11rem)}

/* ============ A4 · STATS (AIRMAX claro, count-up) ============ */
.abt-stats{background:var(--paper)}
.stats-row{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);text-align:center;
}
.stat{position:relative;padding:1rem 0}
.stat+.stat{border-left:1px solid rgba(128,137,142,.32)}
.stat-n{
  font-family:var(--f-display);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(3.4rem,6.5vw,6rem);line-height:1;color:var(--bronze);
  display:inline-block;min-width:2ch;
}
.stat sup{font-family:var(--f-display);font-weight:700;font-size:.4em;color:var(--gold-lo);top:-1em}
.stat-l{margin-top:.5rem;font:700 .74rem/1.4 var(--f-ui);letter-spacing:.17em;text-transform:uppercase;color:var(--t-on-light-muted)}
.stats-ghost{left:50%;top:-16%;transform:translateX(-50%);font-size:clamp(10rem,19vw,19rem)}

/* ============ CIERRE · WHO SHOWS UP (0705-q1) ============ */
.abt-close{background:var(--champagne)}
.cl-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:stretch}
.cl-panel{position:relative;border-radius:16px;overflow:hidden;min-height:380px;box-shadow:0 18px 44px rgba(29,33,38,.16)}
.cl-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-chip{position:absolute;left:14px;bottom:14px}
.cl-copy{display:flex;flex-direction:column;justify-content:center}
.cl-copy h2{font-size:clamp(2.1rem,4.2vw,4.2rem);color:var(--t-on-light);max-width:15ch}
.cl-copy .kicker{margin-bottom:1.2rem}
.cl-copy>p{margin-top:1.4rem;max-width:52ch;color:var(--t-on-light-muted)}
.cl-checks{margin-top:1.4rem;display:grid;gap:.6rem}
.cl-checks li{display:flex;align-items:flex-start;gap:.7rem;font-size:.97rem;color:var(--t-on-light)}
.cl-checks .tick{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:.1rem;
  background:var(--gold);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
}
.cl-checks .tick svg{width:11px;height:11px}
.cl-ghost{right:0;bottom:-5%;font-size:clamp(6rem,10vw,10rem)}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .life-grid,.cl-grid{grid-template-columns:1fr}
  .life-pols{max-width:460px}
  .val-row{grid-template-columns:44px 1fr;grid-template-rows:auto auto;row-gap:.5rem}
  .val-ic{display:none}
  .val-copy{grid-column:2}
  .stats-row{grid-template-columns:1fr;gap:1rem}
  .stat+.stat{border-left:0;border-top:1px solid rgba(128,137,142,.32);padding-top:1.6rem}
  .ab-duct{right:-30%;width:88%;opacity:.55}
  .cl-panel{min-height:300px}
}
@media (max-width:560px){
  .val-word{white-space:normal}
  .faq summary .n{flex-basis:1.6rem}
  .faq-body p{padding-left:1.9rem}
}