/* Scoped portrait choreography. Content remains visible without JavaScript. */
#sobre-mi { overflow:hidden; position:relative; isolation:isolate; }
#sobre-mi .about-grid { gap:clamp(32px,5vw,72px); position:relative; z-index:1; }
.about-atmosphere { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 10% 80%,#76443a25,transparent 55%); }
.about-atmosphere video { display:block; width:100%; height:100%; object-fit:cover; opacity:.48; }
.about-atmosphere::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#18151e 0%,transparent 17%,transparent 82%,#18151e 100%),linear-gradient(90deg,#18151e12 0%,#18151e33 40%,#18151e99 67%,#18151e33 100%); }
.about-motion-toggle { position:absolute; left:clamp(20px,4vw,60px); bottom:20px; z-index:2; border:1px solid #dfaa7855; border-radius:20px; background:#18151ee6; color:#e5bf83; padding:9px 14px; font:500 11px 'Montserrat',sans-serif; cursor:pointer; }
.about-motion-toggle:hover { border-color:#dfaa78; }
.about-motion-toggle:focus-visible { outline:2px solid #dfc078; outline-offset:4px; }
.about-play-label,.about-motion-toggle[aria-pressed="true"] .about-pause-label { display:none; }
.about-motion-toggle[aria-pressed="true"] .about-play-label { display:inline; }
#sobre-mi .about-img-wrap { width:100%; max-width:330px; margin-inline:auto; }
.about-portrait-frame {
  position:relative; border-radius:14px; isolation:isolate;
  transform:perspective(1100px) rotateX(var(--portrait-x,0deg)) rotateY(var(--portrait-y,0deg));
  transition:transform .55s ease-out;
  box-shadow:0 24px 65px #0005,0 0 35px #c9a84c0a;
}
#sobre-mi .about-img { display:block; width:100%; height:auto; border-radius:14px; }
.about-led-frame { position:absolute; inset:0; width:100%; height:100%; z-index:4; overflow:visible; pointer-events:none; }
.about-led-frame rect { fill:none; vector-effect:non-scaling-stroke; }
.about-led-base { stroke:#dfaa7870; stroke-width:1; }
.about-led-trace { stroke:#ffe2a2; stroke-width:2; stroke-dasharray:12 88; filter:drop-shadow(0 0 5px #ffbd54); }
.about-led-rose { stroke:#f4bdb7; stroke-width:1.5; stroke-dasharray:7 93; stroke-dashoffset:45; filter:drop-shadow(0 0 4px #ef8da3); }
.about-motion-ready.is-about-visible .about-led-trace { animation:about-led-travel 13s linear infinite; }
.about-motion-ready.is-about-visible .about-led-rose { animation:about-led-travel 17s linear infinite reverse; }
.about-light-sweep { position:absolute; inset:0; z-index:3; border-radius:14px; pointer-events:none; opacity:0; background:linear-gradient(115deg,transparent 25%,#fff3cc30 45%,#ffe6b466 49%,transparent 65%); background-size:300% 100%; }
.about-entered .about-light-sweep { animation:about-reveal-light 1.7s ease-out both; }
#sobre-mi .about-badge { bottom:18px; left:18px; padding:10px 17px; z-index:5; background:linear-gradient(120deg,#241c1cf2,#503627ed); border:1px solid #dfaa7870; box-shadow:0 5px 24px #0003; }
#sobre-mi .about-badge .big { color:#e7c782; font-size:1.65rem; }
.about-signature { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; min-height:70px; }
.about-signature > img { width:40px; height:60px; object-fit:contain; }
.about-signature > div { min-width:0; }
.about-signature-name { display:block; color:#e5bf83; font:italic 400 clamp(25px,2.7vw,37px)/1.3 'Playfair Display',Georgia,serif; letter-spacing:-1px; }
.about-signature svg { display:block; width:100%; height:20px; overflow:visible; }
.about-signature path { fill:none; stroke:#dfaa78; stroke-width:1.3; stroke-linecap:round; }
.about-signature-entered .about-signature-name { animation:about-signature-write 1.8s .15s ease both; }
.about-signature-entered .about-signature path { animation:about-ink 1.1s 1.5s ease both; }
.about-feature-art { flex:0 0 28px; width:28px; height:28px; color:#e5bf83; margin-top:3px; }
.about-feature-art path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.about-feature.about-feature-entered { animation:about-card-enter .75s var(--feature-delay,0s) both; }
.about-feature-entered .about-feature-art path { animation:about-ink 1.4s var(--feature-delay,0s) both; }
@keyframes about-led-travel { to { stroke-dashoffset:-100; } }
@keyframes about-reveal-light { 0% { opacity:0; background-position:100% 0; } 20% { opacity:1; } 100% { opacity:0; background-position:0 0; } }
@keyframes about-signature-write { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes about-ink { from { stroke-dasharray:100; stroke-dashoffset:100; } to { stroke-dasharray:100; stroke-dashoffset:0; } }
@keyframes about-card-enter { from { opacity:.15; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) { #sobre-mi .about-text { padding-left:0; } #sobre-mi .about-img-wrap { max-width:300px; } }
@media(max-width:600px) { .about-atmosphere video { object-fit:contain; object-position:center 65%; opacity:.4; } }
@media(prefers-reduced-motion:reduce) {
  #sobre-mi *,#sobre-mi *::before,#sobre-mi *::after { animation:none!important; transition:none!important; }
  .about-portrait-frame { transform:none; }
  .about-light-sweep { display:none; }
  .about-motion-toggle { display:none; }
}