/* ══════════════════════════════════════
   ABOUT — Panel A (about me 2.png)
   Composición exacta: foto full-bleed oscura,
   nombre enorme centrado, textos inferiores,
   botón PLAY derecha centro
══════════════════════════════════════ */
#pg-about { overflow:hidden }
#about-wrapper {
  position:absolute; inset:0; display:flex; width:200%;
  transition:transform .95s var(--ease);
}
#pg-about.story-open #about-wrapper { transform:translateX(-50%) }
#about-a { width:50%; position:relative; overflow:hidden; background:var(--black) }

/* Foto de fondo — img tag (más fiable que CSS bg en file://) */
.ab-bg-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  filter:grayscale(1) brightness(.42) contrast(1.1);
  z-index:0;
}
.ab-a-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(14,14,12,.92) 0%,
    rgba(14,14,12,.35) 50%,
    rgba(14,14,12,.12) 100%
  );
  z-index:1;
}

/* ✏️ NOMBRE GRANDE — cambia RICARDO y GARCÍA aquí */
.ab-name-wrap {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  padding:0 3.5rem; z-index:3; pointer-events:none;
}
.ab-name-line1, .ab-name-line2 {
  display:block;
  font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900;
  font-size:clamp(4rem,18vw,24rem);
  text-transform:uppercase; letter-spacing:-.055em;
  line-height:.82; color:var(--white);
}
.ab-name-line2 { padding-left:5% }

/* Etiqueta rol (arriba izquierda) */
.ab-role-tag {
  position:absolute; top:3rem; left:3rem; z-index:3;
  font-family:var(--mono); font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(240,237,230,.32);
}

/* ✏️ TEXTO INFERIOR IZQUIERDA */
.ab-bottom-l {
  position:absolute; bottom:3.5rem; left:3rem; z-index:3; max-width:38%;
}
/* ✏️ TEXTO INFERIOR DERECHA */
.ab-bottom-r {
  position:absolute; bottom:3.5rem; right:5.5rem; z-index:3;
  text-align:right; max-width:30%;
}
.ab-bottom-txt {
  font-family:var(--mono); font-size:.5rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(240,237,230,.38); line-height:1.9;
}

/* Botón PLAY — derecha centro */
.ab-play-btn {
  position:absolute; right:3rem; top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center;
  gap:.75rem; color:rgba(240,237,230,.5); transition:color .3s;
}
.ab-play-btn:hover { color:var(--white) }
.ab-play-icon {
  width:54px; height:54px; border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.ab-play-btn:hover .ab-play-icon {
  background:rgba(240,237,230,.1); transform:scale(1.08);
}
.ab-play-icon svg { width:18px; height:18px; fill:currentColor; margin-left:3px }
.ab-play-lbl { font-family:var(--mono); font-size:.44rem; letter-spacing:.26em; text-transform:uppercase }

/* ABOUT — Panel B (the story / about me.png) */
#about-b {
  width:50%; position:relative; overflow-y:auto;
  background:var(--black); padding:6rem 4rem 5rem; scrollbar-width:none;
}
#about-b::-webkit-scrollbar { display:none }
.ab-story-header { display:flex; align-items:baseline; gap:1rem; margin-bottom:3rem }
.ab-story-title { font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900; font-size:clamp(2.5rem,5vw,6rem); text-transform:uppercase; letter-spacing:-.04em; line-height:1; color:var(--white) }
.ab-story-sub { font-family:var(--mono); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,237,230,.25) }

/* Botón PAUSE (fijo derecha, aparece con story-open) */
.ab-pause-btn {
  position:fixed; top:50%; right:2rem; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center;
  gap:.6rem; color:rgba(240,237,230,.4);
  opacity:0; pointer-events:none;
  transition:opacity .5s, color .3s;
}
#pg-about.story-open .ab-pause-btn { opacity:1; pointer-events:all }
#pg-about.story-open .ab-pause-btn:hover { color:var(--white) }

/* Story — foto + circular */
.ab-story-photo-wrap { position:relative; width:100%; max-width:430px; aspect-ratio:3/4; overflow:hidden; margin:0 0 3rem }
.ab-story-photo-wrap img { width:100%; height:100%; object-fit:cover; filter:grayscale(.6) brightness(.75) }
.ab-circ { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:160px; height:160px }
.ab-circ-svg { width:100%; height:100%; animation:cr 14s linear infinite }
@keyframes cr { from { transform:rotate(0) } to { transform:rotate(360deg) } }
.ab-circ-svg text { font-family:var(--mono); font-size:9px; letter-spacing:2.6px; fill:rgba(240,237,230,.55) }
.ab-circ-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.ab-circ-play { width:42px; height:42px; border:1px solid rgba(240,237,230,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(14,14,12,.5) }
.ab-circ-play svg { width:14px; height:14px; fill:var(--white); margin-left:2px }

/* Story — textos */
.ab-story-body { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem }
.ab-story-bio { font-family:var(--sans); font-size:.86rem; line-height:2; color:rgba(240,237,230,.48); margin-bottom:1rem }
.ab-story-quote { font-family:var(--sans); font-style:normal; font-weight:600; font-size:1.05rem; line-height:1.55; color:var(--white); border-left:2px solid var(--klein); padding-left:1.2rem; margin:1.5rem 0 }
.ab-skills-hd { font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,237,230,.22); padding-bottom:.6rem; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:1rem }
.ab-sk-r { display:flex; align-items:center; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.03) }
.ab-sk-n { font-family:var(--sans); font-size:.8rem; color:rgba(240,237,230,.6) }
.ab-sk-t { width:80px; height:1.5px; background:rgba(255,255,255,.07); position:relative; flex-shrink:0 }
.ab-sk-f { position:absolute; inset:0 auto 0 0; background:var(--klein); width:0; transition:width 1.5s var(--ease) }
.ab-tools { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:2rem }
.ab-tc { font-family:var(--mono); font-size:.46rem; letter-spacing:.06em; padding:.2rem .45rem; border:1px solid rgba(255,255,255,.07); color:rgba(240,237,230,.3); text-transform:uppercase; transition:all .3s }
.ab-tc.hi { background:var(--klein); border-color:var(--klein); color:var(--white) }
.ab-story-links { display:flex; gap:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.06); margin-top:1rem }
.ab-lnk { font-family:var(--mono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid rgba(240,237,230,.15); padding-bottom:2px; transition:color .25s, border-color .25s }
.ab-lnk:hover { color:rgba(240,237,230,.45); border-color:rgba(240,237,230,.07) }