/* Web pública OnlyPhotos: una sola pantalla, sin scroll. Escenas que se cambian con animación. */
:root{--p0:#ff4d4d;--p1:#f5a524;--p2:#19b394;--p3:#4f7cff;--p4:#b25cff;--p5:#ec4899;--mx:0;--my:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}

/* Cabecera */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,56px) 4px;position:relative;z-index:5}
.logo img{height:46px;width:auto;max-width:56vw;object-fit:contain;object-position:left}
.top-actions{display:flex;align-items:center;gap:14px}
.nav-link{color:var(--ink-2);font-size:15px;font-weight:600;padding:8px 4px;white-space:nowrap}
.nav-link:hover{color:var(--ink)}

/* Escenario */
.stage{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.shapes{position:absolute;inset:0;pointer-events:none;transition:opacity .8s}
.sh{position:absolute;display:block;transition:translate 1.1s var(--ease),opacity .8s;translate:var(--tx,0) var(--ty,0);transform:translate(calc(var(--mx)*-18px),calc(var(--my)*-14px))}
.sh-a{right:-6vmin;top:6%;width:56vmin;height:56vmin;border-radius:50%;background:var(--p0);opacity:.92}
.sh-b{left:44%;bottom:-14vmin;width:30vmin;height:30vmin;border-radius:22%;background:var(--p1);opacity:.9;rotate:14deg;animation:drift 18s ease-in-out infinite alternate}
.sh-c{left:26%;bottom:-5%;width:14vmin;height:14vmin;border-radius:50%;border:max(8px,1.6vmin) solid var(--p2);opacity:.9;animation:drift 14s ease-in-out infinite alternate-reverse}
:root[data-theme=dark] .sh{opacity:.5}
.stage[data-scene=trabajos] .shapes{opacity:0}
.stage[data-scene=sobre] .sh-a{--tx:2vw;--ty:4vh}
.stage[data-scene=sobre] .sh-b{--tx:38vw;--ty:2vh}
.stage[data-scene=evento] .sh-a{--tx:-58vw;--ty:8vh}
.stage[data-scene=evento] .sh-b{--tx:34vw;--ty:6vh}
.stage[data-scene=contacto] .sh-a{--tx:4vw;--ty:-12vh}
.stage[data-scene=contacto] .sh-b{--tx:-44vw;--ty:4vh}
.stage[data-scene=contacto] .sh-c{--tx:78vw}
@keyframes drift{from{translate:0 0}to{translate:2vmin -3vmin}}

.scene{position:absolute;inset:0;padding:6px clamp(16px,4vw,56px) 6px;visibility:hidden;pointer-events:none;z-index:1}
.scene.show{visibility:visible;pointer-events:auto}
.hero,.work,.event,.about,.contact{height:100%;width:min(100%,1360px);margin:0 auto}

/* Animaciones de entrada */
.rise{opacity:0}
.show .rise{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0)*80ms + 320ms)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .03em .14em;margin:-.05em -.03em -.14em}
.split .wi{display:inline-block;transform:translateY(118%)}
.show .split .wi,.show.split .wi{animation:up .95s var(--ease) both;animation-delay:calc(var(--i)*70ms + 260ms)}
/* Salida: la escena que se va se desvanece y sube/baja según la dirección, mientras la nueva empieza a entrar */
.scene.leaving{pointer-events:none;animation:sceneOut .5s ease-in both}
.scene.leaving .rise{animation:out .34s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--i,0)*25ms)}
.scene.leaving .split .wi{animation:down .42s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--i)*30ms)}
@keyframes out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--dir,1)*-28px)) scale(.98)}}
@keyframes down{from{transform:none}to{transform:translateY(calc(var(--dir,1)*-118%))}}
@keyframes sceneOut{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(118%) rotate(4deg)}to{transform:none}}

/* Botones */
.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;padding:15px 24px;font-weight:700;font-size:16px;transition:transform .25s var(--ease),filter .2s}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px) rotate(-.6deg)}
.btn:active{transform:scale(.97)}
.btn-text{background:none;border:0;color:var(--ink);font-weight:700;font-size:16px;padding:12px 4px;border-bottom:2px solid var(--accent)}
.btn-text:hover{color:var(--accent-ink)}
.round{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .2s var(--ease),background .2s}
.round:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.round:active{transform:scale(.92)}
.round svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Inicio */
.hero,.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:center}
.hero-copy h1{font-size:clamp(40px,min(7.2vw,12vh),108px);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 clamp(12px,2.4vh,24px);text-wrap:balance}
.hero-copy p{font-size:clamp(16px,min(1.5vw,2.4vh),20px);line-height:1.55;color:var(--ink-2);max-width:44ch;margin:0}
.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(16px,3.4vh,34px)}

/* Mazo de fotos con inclinación 3D */
.deck{position:relative;height:100%;max-height:min(100%,720px);perspective:1200px}
.card{position:absolute;left:46%;top:50%;height:86%;aspect-ratio:4/5;max-width:84%;border:0;padding:0;background:none;
  transform:translate(-50%,-50%) translate(calc(var(--o)*4.5%),calc(var(--o)*-2.5%)) rotate(calc(var(--o)*4deg - 2deg)) scale(calc(1 - var(--o)*.05));
  z-index:calc(10 - var(--o));opacity:calc(1 - var(--o)*.12);transition:transform .8s var(--ease),opacity .5s}
.card.out{transform:translate(-50%,-50%) translate(-120%,-8%) rotate(-16deg);opacity:0}
.card.jump{transition:none}
.card-in{position:relative;display:block;width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--surface-2);box-shadow:0 26px 60px rgba(30,20,10,.3);
  transform:rotateY(calc(var(--tx3,0)*10deg)) rotateX(calc(var(--ty3,0)*-8deg));transition:transform .25s ease-out}
.card-in img{width:100%;height:100%;object-fit:cover}
.card-in:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 40%);z-index:1}
.card-cap{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.about-photos .card{left:50%}
.deck.single:not(.about-photos) .card{--o:0!important;left:50%}

/* Visor de cámara (marca): esquinas que "enfocan" */
.vf{position:absolute;inset:14px;z-index:3;pointer-events:none;opacity:0;transform:scale(1.07);transition:opacity .5s,transform .7s var(--ease);
  background:
  linear-gradient(#fff,#fff) 0 0/26px 3px no-repeat,linear-gradient(#fff,#fff) 0 0/3px 26px no-repeat,
  linear-gradient(#fff,#fff) 100% 0/26px 3px no-repeat,linear-gradient(#fff,#fff) 100% 0/3px 26px no-repeat,
  linear-gradient(#fff,#fff) 0 100%/26px 3px no-repeat,linear-gradient(#fff,#fff) 0 100%/3px 26px no-repeat,
  linear-gradient(#fff,#fff) 100% 100%/26px 3px no-repeat,linear-gradient(#fff,#fff) 100% 100%/3px 26px no-repeat}
.card:hover .vf,.slide.center .vf{opacity:.95;transform:none}

/* Trabajos: carrusel 3D */
.work{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,1.6vh,16px);padding-top:clamp(6px,2vh,18px)}
.carousel{position:relative;perspective:1500px;min-height:0}
.glow{position:absolute;left:50%;top:50%;width:min(100vmin,900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--c,var(--p0));opacity:.3;transition:background .7s,opacity .7s}
.track{position:absolute;inset:0;transform-style:preserve-3d}
.slide{position:absolute;text-align:left;left:50%;top:0;height:100%;aspect-ratio:4/5;max-width:82vw;border:0;padding:0;background:var(--surface-2);border-radius:16px;overflow:hidden;
  transform:translateX(-50%) translateX(calc(var(--d)*60%)) translateZ(calc(var(--ad)*-150px)) rotateY(calc(var(--d)*-24deg)) scale(calc(1 - var(--ad)*.07));
  opacity:calc(1 - var(--ad)*.28);transition:transform .8s var(--ease),opacity .5s;box-shadow:0 24px 54px rgba(30,20,10,.3)}
.slide.far{opacity:0;pointer-events:none;transition:none}
.slide img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.slide:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 45%);z-index:1}
.slide .cap{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff;font-weight:700;font-size:clamp(18px,2.4vh,24px);text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .6s .15s var(--ease)}
.slide.center .cap{opacity:1;transform:none}
.slide .cap small{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;opacity:.9;margin-top:3px}
.slide .cap small:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c)}
.slide .more{position:absolute;z-index:2;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(15,16,18,.62);color:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;opacity:0;transition:opacity .5s .2s}
.slide.center .more{opacity:1}
.car-ui{display:flex;align-items:center;justify-content:center;gap:18px;padding-bottom:2px}
.car-ui span{min-width:70px;text-align:center;font-weight:700;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.empty{display:grid;place-items:center;height:100%;color:var(--ink-3);text-align:center}

/* Evento */
.event{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,4vw,64px);align-items:center}
.event .deck{max-height:min(100%,640px)}
.event-copy{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);align-items:flex-start}
.event-copy h2{margin:0;font-size:clamp(34px,min(5vw,9vh),76px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.event-copy .when{margin:0;font-weight:700;font-size:clamp(16px,2.4vh,20px);color:var(--accent-ink)}
.event-copy .text{margin:0;color:var(--ink-2);line-height:1.6;font-size:clamp(15px,2.2vh,18px);max-width:50ch}
.event.no-img{grid-template-columns:1fr;max-width:760px}

/* Sobre mí */
.about-copy h2,.contact-copy h2{font-size:clamp(36px,min(6vw,11vh),88px);line-height:1;letter-spacing:-.035em;margin:0 0 clamp(12px,2.4vh,22px);text-wrap:balance}
.about-copy p,.contact-copy p{color:var(--ink-2);line-height:1.65;font-size:clamp(15px,2.3vh,19px);max-width:46ch;margin:0 0 10px}
.about-copy .where{color:var(--accent-ink);font-weight:700}

/* Contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:center}
.contact-links{display:grid;gap:12px}
.clink{display:flex;align-items:center;gap:16px;background:var(--surface);color:var(--ink);border-radius:14px;padding:clamp(14px,2.4vh,22px) 20px;font-weight:700;font-size:clamp(17px,2.6vh,22px);box-shadow:0 10px 30px rgba(30,20,10,.1);transition:transform .35s var(--ease),box-shadow .3s}
.clink:hover{transform:translateX(8px) rotate(-.4deg);box-shadow:0 16px 40px rgba(30,20,10,.18)}
.clink i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--c);color:#0f1012;flex:none}
.clink svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.clink span{flex:1}
.clink em{font-style:normal;color:var(--ink-3);font-weight:600;font-size:.7em}
.no-contact{color:var(--ink-3)}

/* Dock de navegación */
.dock{position:relative;display:flex;gap:2px;width:fit-content;max-width:calc(100% - 24px);margin:6px auto calc(12px + env(safe-area-inset-bottom));padding:6px;background:var(--surface);border-radius:999px;box-shadow:0 12px 34px rgba(30,20,10,.16);z-index:5}
.dock-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--accent);transition:left .6s var(--ease),width .6s var(--ease);z-index:0}
.dock button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--ink-2);border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;white-space:nowrap;transition:color .3s}
.dock button:hover{color:var(--ink)}
.dock button[aria-current=true]{color:var(--on-accent)}
.dock svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.error{margin:48px auto;max-width:520px;padding:18px 22px;border:1px solid var(--line);border-radius:10px;color:var(--danger);text-align:center}

/* Visor de fotos */
html:has(dialog[open]){overflow:hidden}
dialog{border:0;padding:0;color:var(--ink)}
dialog::backdrop{background:rgba(6,7,8,.72)}
.viewer{width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(8,9,11,.97);color:#f5f5f3;overflow:hidden}
.viewer[open]{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;animation:fade .3s var(--ease)}
.v-stage{margin:0;height:100dvh;padding:56px 0 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;touch-action:pan-y}
.v-stage img{max-width:100%;max-height:calc(100dvh - 210px);object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none}
.v-stage figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:0 12px}
.v-stage figcaption strong{font-size:18px}
.v-stage figcaption span{font-size:13px;color:#aeb2ba}
.v-nav,.v-close{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;justify-self:center;transition:background .2s}
.v-nav:hover,.v-close:hover{background:rgba(255,255,255,.2)}
.v-nav svg,.v-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-close{position:absolute;top:12px;right:14px;z-index:5}
.v-thumbs{display:flex;gap:8px;max-width:min(100%,760px);overflow-x:auto;padding:4px 12px 2px;scrollbar-width:none}
.v-thumbs::-webkit-scrollbar{display:none}
.v-thumbs button{flex:none;width:58px;height:58px;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;background:#222;opacity:.55;transition:opacity .25s,border-color .25s,transform .25s var(--ease)}
.v-thumbs button:hover{opacity:.9}
.v-thumbs button[aria-current=true]{opacity:1;border-color:var(--accent);transform:translateY(-3px)}
.v-thumbs img{width:100%;height:100%;object-fit:cover}
@keyframes fade{from{opacity:0}}

/* Tablet y móvil */
@media(max-width:860px){
  .hero,.about,.event,.contact{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;align-content:start}
  .hero-copy h1{font-size:clamp(34px,min(10.5vw,6.4vh),64px)}
  .hero-copy p{font-size:15px;line-height:1.45}
  .actions{margin-top:14px;gap:16px}
  .deck{max-height:none}
  .card{height:90%}
  .event{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .event .deck{order:1;flex:0 0 38%;min-height:0;width:100%}
  .event .card{height:auto;width:88%;max-width:none;aspect-ratio:16/10;max-height:96%}
  .event-copy{order:2;flex:1 1 auto;min-height:0;overflow:hidden;gap:8px}
  .event-copy h2{font-size:clamp(28px,8.6vw,44px)}
  .event-copy .text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.5}
  .about-photos{min-height:0}
  .about-copy p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.55}
  .contact-links{align-content:start;align-self:start}
  .sh-a{width:70vmin;height:70vmin;top:32%;right:-20vmin}
}
@media(max-width:640px){
  .nav-link{display:none}
  .logo img{height:40px}
  .dock button{padding:11px 13px;gap:0}
  .dock button span{display:none}
  .dock button[aria-current=true]{gap:7px;padding-inline:16px}
  .dock button[aria-current=true] span{display:inline}
  .slide{max-width:74vw}
  .viewer[open]{display:block}
  .v-stage{padding:60px 0 84px}
  .v-stage img{max-height:calc(100dvh - 190px);width:100%}
  .v-nav{position:absolute;bottom:20px;z-index:5}
  .v-prev{left:calc(50% - 64px)}.v-next{left:calc(50% + 16px)}
}
@media(max-height:560px){
  .hero-copy p{display:none}
  .logo img{height:36px}
  .actions{margin-top:10px}
  .event-copy .text{-webkit-line-clamp:2}
  .about-copy p{-webkit-line-clamp:3}
}
@media(max-width:860px) and (max-height:700px){.contact-copy p{display:none}.event .deck{flex-basis:32%}}

/* Ajustes: etiqueta de álbum y halo */
.slide .more{white-space:nowrap}
.slide .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.glow{width:auto;height:104%;max-height:760px}

/* Móvil: las formas de fondo van a los bordes, lejos del texto */
@media(max-width:860px){
  .stage[data-scene] .sh{--tx:0;--ty:0;scale:1}
  .sh-a{top:58%;right:-34vmin;width:66vmin;height:66vmin}
  .sh-b{left:-10vmin;bottom:-12vmin;width:34vmin;height:34vmin}
  .sh-c{left:auto;right:7%;bottom:15%;width:12vmin;height:12vmin}
}

/* Sobre mí: fotos abiertas en abanico, centradas como grupo */
.about-photos .card{left:50%;transform:translate(-50%,-50%) translate(calc(var(--o)*42% - (var(--n,2) - 1)*21%),calc(var(--o)*3%)) rotate(calc(var(--o)*7deg - 3.5deg)) scale(calc(1 - var(--o)*.03))}

/* Íconos de marca rellenos */
svg.filled{fill:currentColor!important;stroke:none!important}
.clink svg.filled{width:22px;height:22px}

/* Titular: se achica según su largo para no desbordar */
.hero-copy h1[data-len=l]{font-size:clamp(34px,min(5.8vw,10vh),90px)}
.hero-copy h1[data-len=xl]{font-size:clamp(30px,min(4.8vw,8.2vh),74px)}
@media(max-width:860px){
  .hero-copy h1[data-len=l]{font-size:clamp(30px,min(9vw,5.6vh),56px)}
  .hero-copy h1[data-len=xl]{font-size:clamp(28px,min(7.6vw,4.8vh),46px)}
}

/* Botones flotantes de mensaje directo */
.fab{position:fixed;right:clamp(14px,2.4vw,32px);bottom:calc(96px + env(safe-area-inset-bottom));display:grid;gap:10px;z-index:6;transition:opacity .4s,transform .5s var(--ease)}
:root[data-scene=contacto] .fab{opacity:0;pointer-events:none;transform:translateY(12px)}
.fab-btn{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--bg);color:#0f1012;box-shadow:0 10px 26px rgba(30,20,10,.28);transition:transform .35s var(--ease)}
.fab-btn:hover{transform:scale(1.08)}
.fab-btn svg{width:26px;height:26px}
.fab-btn span{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;white-space:nowrap;padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.fab-btn:hover span,.fab-btn:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media(max-width:640px){.fab-btn{width:48px;height:48px}.fab-btn svg{width:23px;height:23px}.fab-btn span{display:none}.fab{bottom:calc(92px + env(safe-area-inset-bottom))}}

/* Contacto con varios enlaces: dos columnas compactas */
.contact-links.many{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contact-links.many .clink{padding:12px 14px;gap:12px;font-size:clamp(15px,2.2vh,18px)}
.contact-links.many .clink em{display:none}
.contact-links.many .clink i{width:38px;height:38px}
@media(max-width:860px){
  .contact-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .clink{padding:12px;gap:10px;font-size:15px}
  .clink em{display:none}
  .clink i{width:36px;height:36px;border-radius:10px}
  .clink span{line-height:1.15}
}

/* ===== Portada: tarjetas de portadas de álbumes con anterior/siguiente ===== */
.hero-deck{position:relative;height:100%;max-height:min(100%,720px)}
.hero-deck .deck{height:100%;max-height:none}
.hero .card{height:80%;top:45%}
.card.hid{opacity:0;pointer-events:none}
div.card{cursor:default}
.deck-ui{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;align-items:center;gap:16px;z-index:30}
.deck-ui span{min-width:56px;text-align:center;font-weight:700;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Móvil: portada a toda pantalla, texto sobre las fotos, sin botones de "Hablemos" / "Ver trabajos" */
@media(max-width:860px){
  .hero{display:block;position:relative}
  .hero-deck{position:absolute;inset:0;max-height:none}
  .hero .card{height:97%;top:50%;left:50%;width:92%;max-width:none;aspect-ratio:auto;
    transform:translate(-50%,-50%) translate(calc(var(--o)*2.6%),calc(var(--o)*-1.2%)) rotate(calc(var(--o)*2.6deg - 1.3deg)) scale(calc(1 - var(--o)*.035))}
  .hero .card.out{transform:translate(-50%,-50%) translate(-125%,-4%) rotate(-12deg)}
  .hero .card-cap{top:14px;bottom:auto;left:14px;background:rgba(15,16,18,.58);padding:6px 13px;border-radius:999px;font-size:13px;text-shadow:none}
  .hero .card-in:before{background:linear-gradient(0deg,rgba(0,0,0,.2),transparent 40%)}
  .hero-copy{position:absolute;left:4%;right:4%;bottom:3%;z-index:25;padding:0 18px 20px;pointer-events:none;color:#fff}
  .hero-copy:before{content:'';position:absolute;left:0;right:0;bottom:-3%;top:-150px;background:linear-gradient(0deg,rgba(8,8,10,.82),rgba(8,8,10,.5) 58%,transparent);border-radius:0 0 16px 16px;z-index:-1}
  .hero-copy h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);margin:0 0 8px}
  .hero-copy p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  :root[data-fab] .hero-copy p{padding-right:64px}
  .deck-ui{left:auto;right:calc(4% + 14px);top:14px;bottom:auto;translate:none;gap:8px}
  .deck-ui .round{width:40px;height:40px;background:rgba(15,16,18,.58);color:#fff;border-color:rgba(255,255,255,.28)}
  .deck-ui .round:hover{background:var(--accent);color:var(--on-accent)}
  .deck-ui span{min-width:0;color:#fff;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .deck-ui svg{width:20px;height:20px}
}

/* ===== Sobre mí: fotos siempre visibles, como cartas sobre la mesa ===== */
.about-photos{display:flex;align-items:center;justify-content:center;height:100%;max-height:min(100%,640px);min-width:0;padding-right:clamp(0px,5vw,72px)}
.rcard{position:relative;flex:0 1 auto;height:76%;aspect-ratio:4/5;max-width:calc(100% / var(--n,2) * 1.1);border:0;padding:0;background:none;z-index:1;
  transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .55s var(--ease)}
.rcard + .rcard{margin-left:-5%}
.rcard:nth-child(odd){--r:-2.4deg;--y:12px}
.rcard:nth-child(even){--r:2deg;--y:-12px}
.rcard:nth-child(3){--r:-1deg;--y:16px}
.rcard .card-in{width:100%;height:100%;transition:box-shadow .55s var(--ease)}
.rcard:hover,.rcard:focus-visible{transform:translateY(-30px) rotate(0deg) scale(1.05);z-index:6}
.rcard:hover .card-in,.rcard:focus-visible .card-in{box-shadow:0 40px 72px rgba(30,20,10,.4)}
.rcard:hover .vf,.rcard:focus-visible .vf{opacity:.95;transform:none}
@media(max-width:860px){.rcard{height:90%}.rcard:hover{transform:none}}