/* =========================================================================
   Aníbal — Portafolio
   Estilos. Paleta editorial cálida + sección oscura para el showcase.
   ========================================================================= */

:root{
  --paper:#1A1A20;--paper-2:#26262E;--ink:#F3F3F1;--dark:#141419;
  --taupe:#9A9AA2;--line:rgba(255,255,255,.10);--accent:#C9A27C;
  --serif:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);--maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#1A1A20}
body{background:transparent;color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ---------- Fondo espacial ---------- */
#nebula{display:none}
#space{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
/* film grain */
#grain{position:fixed;inset:-20%;z-index:95;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;animation:grain .32s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,-5%)}40%{transform:translate(6%,-7%)}60%{transform:translate(-5%,6%)}80%{transform:translate(7%,4%)}100%{transform:translate(-4%,-6%)}}
#cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:9999;opacity:0;will-change:transform;transition:width .25s ease,height .25s ease,background .25s ease,opacity .3s ease}
#cursor.on{opacity:.9}
#cursor.hover{width:60px;height:60px;background:rgba(201,162,124,.10)}
@media (prefers-reduced-motion:reduce){#grain{animation:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.eyebrow{font-size:.72rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Reveal (fallback seguro sin-JS / reduced-motion) ---------- */
.reveal{opacity:1;transform:none}
body.motion .reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
body.motion .reveal.in{opacity:1;transform:none}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:1.4rem var(--pad);transition:background .4s,border-color .4s,padding .4s,color .4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(14,14,17,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:1rem;padding-bottom:1rem}
header.on-dark{color:var(--ink)}
header.on-dark.scrolled{background:rgba(14,12,10,.7);border-bottom-color:rgba(243,239,232,.14)}
header.on-dark .brand small,header.on-dark nav a{color:rgba(243,239,232,.7)}
.brand{font-family:var(--serif);font-size:1.55rem;font-weight:500;line-height:1;display:flex;align-items:center}
.brand-logo{height:clamp(36px,5vw,52px);width:auto;display:block;filter:brightness(0) invert(1)}
.brand small{font-family:var(--sans);font-size:.62rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);display:block;margin-top:.25rem}
nav{display:flex;gap:2.2rem;align-items:center}
nav a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);position:relative;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .35s}
nav a:hover{color:inherit}nav a:hover::after{width:100%}
.menu-btn{display:none;background:none;border:none;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:inherit;cursor:pointer}
.lang-toggle{background:none;border:1px solid var(--line);border-radius:30px;padding:.34rem .7rem;display:inline-flex;gap:.4rem;align-items:center;font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;color:var(--taupe);cursor:pointer;transition:border-color .3s}
.lang-toggle:hover{border-color:var(--ink)}
.lang-toggle span{transition:color .3s}
.lang-toggle span[data-l].on{color:var(--ink);font-weight:500}
.lang-toggle .sep{opacity:.4}
/* ---------- Menú móvil (hijo de body, a prueba de bugs de posición) ---------- */
#mobile-menu{display:none;position:fixed;inset:0;z-index:70;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;
  background:rgba(10,10,14,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-4%);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility .4s}
#mobile-menu a{font-family:var(--sans);font-size:1.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .3s}
#mobile-menu a:hover{color:var(--accent)}
#mobile-menu .lang-toggle{font-size:.95rem;margin-top:1.4rem;padding:.5rem 1.1rem}
body.nav-open #mobile-menu{opacity:1;visibility:visible;transform:none}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:8rem var(--pad) 3rem;position:relative;overflow:hidden}
.hero .layer{will-change:transform}
.hero .meta-top{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,8vw,7rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:2.2rem;max-width:46ch;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--taupe);font-weight:300}
.hero .foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-top:clamp(3rem,8vh,6rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.avail{display:flex;align-items:center;gap:.6rem;font-size:.82rem;letter-spacing:.06em;color:var(--taupe)}
.dot{width:7px;height:7px;border-radius:50%;background:#5f7d52;box-shadow:0 0 0 3px rgba(95,125,82,.18)}
.scroll-cue{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.ghost{position:absolute;right:-6vw;top:8%;font-family:var(--serif);font-style:normal;font-size:min(40vw,34rem);line-height:1;color:rgba(201,162,124,.05);pointer-events:none;user-select:none;z-index:-1}

/* ---------- Section shell ---------- */
section{padding-top:clamp(4.5rem,11vh,9rem);padding-bottom:clamp(4.5rem,11vh,9rem)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.5rem,6vh,4.5rem);flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.01em}
.sec-index{font-size:.75rem;letter-spacing:.2em;color:var(--taupe)}

/* =========================================================================
   SHOWCASE — Piezas gráficas (pinned scroll-scrub). ★ pieza central.
   Sin .motion (reduced-motion / sin-JS): grilla estática legible.
   ========================================================================= */
.showcase{background:rgba(24,24,30,.6);color:var(--ink);position:relative}
.showcase .intro{max-width:var(--maxw);margin:0 auto;padding:6rem var(--pad) 2rem}
.showcase .intro .eyebrow{color:rgba(243,239,232,.5)}
.showcase .intro h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,9vw,7rem);line-height:1;letter-spacing:-.02em;margin-top:1rem}
.showcase .intro h2 em{font-style:normal;color:var(--accent)}
.showcase .intro p{margin-top:1.5rem;max-width:42ch;color:rgba(243,239,232,.6)}
.stage{max-width:var(--maxw);margin:0 auto;padding:2rem var(--pad) 6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.piece{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);background:#20202A}
.piece img{display:block;width:100%;height:auto}
.piece .cap{position:absolute;left:1rem;bottom:1rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);z-index:3}

body.motion .showcase{height:560vh}
body.motion .showcase .sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
body.motion .showcase .intro{position:absolute;top:0;left:0;right:0;z-index:5;will-change:transform,opacity;padding-top:22vh}
body.motion .stage{position:absolute;inset:0;display:block;padding:0;max-width:none;perspective:1600px}
body.motion .piece{position:absolute;top:50%;left:50%;display:flex;width:auto;height:auto;margin:0;transform:translate(-50%,-50%);will-change:transform,opacity;backface-visibility:hidden}
body.motion .piece img{width:auto;height:auto;max-height:74vh;max-width:min(82vw,1040px)}
body.motion .piece .cap{display:none}

.hud{display:none}
body.motion .hud{display:flex;position:absolute;left:var(--pad);bottom:2.2rem;z-index:6;align-items:flex-end;gap:1.4rem;pointer-events:none}
.hud .count{font-family:var(--serif);font-size:2.4rem;line-height:.9}
.hud .count small{font-family:var(--sans);font-size:.8rem;color:rgba(243,239,232,.5)}
.hud .active-cap{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,232,.7);max-width:20ch;transition:opacity .35s}
.rail{display:none}
body.motion .rail{display:block;position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:2px;height:min(40vh,320px);background:rgba(243,239,232,.14);z-index:6}
.rail .fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent)}
.glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(closest-side at var(--gx,50%) var(--gy,45%),rgba(201,162,124,.16),transparent 70%);transition:background .6s}

/* --- Placeholders de creatividades (reemplazar por <img>) --- */
.art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem}
.art .kick{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.art .big{font-family:var(--serif);line-height:.98;margin-top:.4rem}
.art1{background:linear-gradient(150deg,#EAD7D0,#C9A79C 55%,#A87F73)}
.art1 .big{font-size:2.4rem;font-style:italic;color:#3a2420}
.art1 .kick{color:#5b3c35}
.art1::after{content:"";position:absolute;top:20%;left:50%;transform:translateX(-50%);width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#e7c9c0 60%,#c69a8e);box-shadow:0 20px 50px -15px rgba(90,40,30,.5)}
.art2{background:#161311;color:#F3EFE8}
.art2 .big{font-size:3.6rem;font-weight:600;font-family:var(--sans);letter-spacing:-.02em}
.art2 .kick{color:#D9A79B}
.art2::before{content:"NUEVO";position:absolute;top:1.4rem;right:1.4rem;padding:.4rem .7rem;border:1px solid rgba(243,239,232,.4);border-radius:40px;font:400 .6rem/1 var(--sans);letter-spacing:.14em}
.art3{background:radial-gradient(120% 90% at 50% 15%,#2a2622,#0d0b09)}
.art3 .big{font-size:2rem;color:#F3EFE8}
.art3 .kick{color:rgba(243,239,232,.6)}
.art3::after{content:"";position:absolute;top:16%;left:50%;transform:translateX(-50%);width:26%;height:52%;border-radius:40px/60px;background:linear-gradient(180deg,rgba(255,240,235,.9),rgba(217,167,155,.5) 50%,rgba(120,70,60,.3));box-shadow:0 0 60px 8px rgba(217,167,155,.35)}
.art4{background:#F3EFE8;color:#1A1815;padding:0}
.art4 .grid4{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.art4 .grid4>span{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.6rem;border:.5px solid #D6CFC2}
.art4 .grid4>span:nth-child(1){background:#EAD7D0}
.art4 .grid4>span:nth-child(4){background:#1A1815;color:#F3EFE8}
.art5{background:linear-gradient(200deg,#8A3A2E,#3a1a15)}
.art5 .big{font-size:2.6rem;font-style:italic;color:#F3EFE8}
.art5 .kick{color:rgba(243,239,232,.7)}

/* =========================================================================
   WORK — índice con cards 3D (tilt)
   ========================================================================= */
.work-list{border-top:1px solid var(--line)}
.work-item{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:baseline;padding:clamp(1.6rem,4vh,2.6rem) 0;border-bottom:1px solid var(--line);position:relative;transform-style:preserve-3d;will-change:transform;transition:padding-left .5s cubic-bezier(.2,.7,.2,1)}
.work-item .num{font-size:.78rem;letter-spacing:.14em;color:var(--taupe);padding-top:.6rem}
.work-item .title{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:-.01em;transition:color .4s}
.work-item .role{margin-top:.5rem;font-size:.82rem;color:var(--taupe);max-width:52ch}
.work-item .tags{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;max-width:16rem}
.work-item .tags span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
@media (hover:hover){.work-item:hover{padding-left:1.4rem}.work-item:hover .title{color:var(--accent)}}

/* =========================================================================
   HGALLERY — scroll horizontal (pinned en desktop, swipe nativo en móvil)
   ========================================================================= */
.hgallery{position:relative}
.hgallery .hhead{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 2.5rem}
.htrack-wrap{overflow-x:auto;scrollbar-width:none;padding:0 var(--pad)}
.htrack-wrap::-webkit-scrollbar{display:none}
.htrack{display:flex;gap:1.2rem;width:max-content;will-change:transform}
.hcard{width:min(70vw,320px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;position:relative;flex:0 0 auto;box-shadow:0 24px 60px -30px rgba(0,0,0,.4)}
.hcard .cap{position:absolute;left:1rem;bottom:1rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);z-index:3}
body.motion .hgallery.pinned{height:320vh}
body.motion .hgallery.pinned .hsticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
body.motion .hgallery.pinned .htrack-wrap{overflow:visible}

/* =========================================================================
   SERVICES / ABOUT / CONTACT
   ========================================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.svc{background:#24242C;border:1px solid var(--line);border-radius:12px;padding:clamp(1.8rem,3.5vw,2.6rem);transition:background .4s,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.svc:hover{background:#2E2E38;transform:translateY(-5px);box-shadow:0 22px 45px -26px rgba(0,0,0,.4)}
.svc .n{font-size:.72rem;letter-spacing:.2em;color:var(--taupe)}
.svc h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin:.9rem 0 .7rem}
.svc p{font-size:.92rem;color:var(--taupe);max-width:40ch}
.svc .stack{margin-top:1.1rem;font-size:.72rem;letter-spacing:.08em;color:var(--ink);opacity:.55}

.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.about-grid .label{font-family:var(--serif);font-style:normal;font-size:1.4rem;color:var(--accent)}
.about-grid p{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:300;line-height:1.6;max-width:52ch}
.about-grid p + p{margin-top:1.5rem}
.facts{margin-top:2.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.facts dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:.4rem}
.facts dd{font-family:var(--serif);font-size:1.2rem}

.contact{background:rgba(20,20,26,.72);color:var(--ink)}
.contact .wrap{padding-top:clamp(3.5rem,7vh,5.5rem);padding-bottom:clamp(2rem,4vh,3rem)}
.contact .eyebrow{color:rgba(243,239,232,.55)}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.015em;margin:1rem 0 1.8rem}
.contact h2 a{border-bottom:1px solid rgba(243,239,232,.3);transition:border-color .3s}
.contact h2 a:hover{border-color:var(--paper)}
.contact .links{display:flex;gap:2rem;flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid rgba(243,239,232,.18)}
.contact .links a{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,232,.7);transition:color .3s}
.contact .links a:hover{color:var(--paper)}
.contact .colophon{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,5vh,3.5rem);font-size:.72rem;letter-spacing:.08em;color:rgba(243,239,232,.4)}

/* =========================================================================
   PAID MEDIA — stats con count-up + tarjetas de plataforma (abren modal)
   ========================================================================= */
.paid .lead{max-width:54ch;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;color:var(--taupe);margin:-1rem 0 2.8rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:2.6rem}
.stat{background:#1F1F26;padding:clamp(1.5rem,3vw,2.4rem)}
.stat .v{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat .k{margin-top:.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pf{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;border:1px solid var(--line);border-radius:14px;padding:1.9rem;background:#24242C;cursor:pointer;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.pf:hover{transform:translateY(-6px);box-shadow:0 26px 55px -26px rgba(0,0,0,.28);border-color:transparent}
.pf:focus-visible{outline:2px solid var(--pf-c);outline-offset:3px}
.pf .bar{position:absolute;top:0;left:0;height:4px;width:100%;background:var(--pf-c,#888)}
.pf .name{display:block;font-family:var(--serif);font-size:1.75rem;margin-top:.3rem}
.pf .tag{display:block;font-size:.82rem;color:var(--taupe);margin-top:.5rem;max-width:26ch}
.pf .head-metric{display:block;margin-top:1.5rem;font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--pf-c)}
.pf .head-metric small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-top:.4rem}
.pf .more{display:flex;align-items:center;gap:.4rem;margin-top:1.5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);transition:color .3s}
.pf:hover .more{color:var(--ink)}
.pf-meta{--pf-c:#0866FF}
.pf-google{--pf-c:#4285F4}
.pf-tiktok{--pf-c:#FE2C55}

/* --- Modales --- */
.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(14,12,10,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:#26262E;color:var(--ink);width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:18px;padding:clamp(1.8rem,4vw,2.8rem);position:relative;transform:translateY(22px) scale(.97);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.modal-overlay.open .modal{transform:none}
.modal .close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:.9rem;cursor:pointer;color:var(--ink);transition:background .3s}
.modal .close:hover{background:var(--paper-2)}
.modal .m-bar{height:4px;width:56px;border-radius:4px;background:var(--pf-c,#888);margin-bottom:1.2rem}
.modal h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1}
.modal .m-tag{color:var(--taupe);margin:.5rem 0 1.6rem;font-size:.95rem}
.modal .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1.6rem}
.modal .m-grid .cell{background:var(--paper);padding:1.1rem 1.2rem}
.modal .m-grid .v{font-family:var(--serif);font-size:1.9rem;color:var(--pf-c)}
.modal .m-grid .k{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-top:.3rem}
.modal h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:.7rem}
.modal ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.modal ul li{font-size:.8rem;padding:.4rem .85rem;border:1px solid var(--line);border-radius:30px}

/* =========================================================================
   MARCAS & SITIOS — marquee con mini-mockups de navegador
   ========================================================================= */
.brands{overflow:hidden}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:1.5rem;width:max-content;padding:0 var(--pad);animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.site-card{flex:0 0 auto;width:min(80vw,380px);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#24242C;box-shadow:0 22px 55px -32px rgba(0,0,0,.55);transition:transform .4s}
.site-card:hover{transform:translateY(-6px)}
.site-card .chrome{display:flex;align-items:center;gap:6px;padding:.6rem .9rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.site-card .chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.site-card .chrome .url{margin-left:.6rem;font-size:.68rem;color:var(--taupe);letter-spacing:.03em}
.site-preview{aspect-ratio:16/10;position:relative;overflow:hidden}
.site-preview .p-nav{height:14%}
.site-preview .p-hero{height:56%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);letter-spacing:.28em;font-size:.9rem}
.site-preview .p-row{height:30%;display:flex;gap:6px;padding:6px}
.site-preview .p-row i{flex:1;border-radius:3px}
.site-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.9rem 1rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--taupe)}
.site-card figcaption b{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.05rem}
/* temas de cada mini-home (placeholder hasta poner screenshots reales) */
.sp-fashion{background:#F3EFE8}
.sp-fashion .p-nav{border-bottom:1px solid #e2dccf}
.sp-fashion .p-hero{background:linear-gradient(120deg,#EAD7D0,#C9A79C);color:#5b3c35}
.sp-fashion .p-row i{background:#e7ddcf}
.sp-surf{background:#eaf3f6}
.sp-surf .p-nav{border-bottom:1px solid #d3e5ea}
.sp-surf .p-hero{background:linear-gradient(120deg,#7fb7c9,#2f6d86);color:#eaf7fb}
.sp-surf .p-row i{background:#cfe3ea}
.sp-dark{background:#0e0c0a}
.sp-dark .p-nav{border-bottom:1px solid rgba(243,239,232,.12)}
.sp-dark .p-hero{background:radial-gradient(120% 100% at 50% 0,#2a2622,#0d0b09);color:#D9A79B;position:relative}
.sp-dark .p-hero::after{content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#D9A79B,rgba(217,167,155,.15) 60%,transparent);filter:blur(2px)}
.sp-dark .p-row i{background:#211d1a}
.sp-saas{background:#fff}
.sp-saas .p-nav{border-bottom:1px solid #e8eefb}
.sp-saas .p-hero{background:linear-gradient(120deg,#eaf0ff,#dbe6ff);color:#2b4a8a}
.sp-saas .p-row i{background:#e5ecfb}

/* ---------- Spinner de carga de imágenes ---------- */
.piece,.site-preview{position:relative}
.piece img,.site-preview img{opacity:0;transition:opacity .7s ease}
.piece.is-loaded img,.site-preview.is-loaded img{opacity:1}
body.motion .piece:not(.is-loaded){min-width:280px;min-height:360px}
.piece{color:var(--accent)}
.site-preview{color:var(--accent)}
.img-spinner{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 6%,currentColor);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));
  animation:img-spin .9s linear infinite;pointer-events:none;opacity:.9;transition:opacity .45s ease;z-index:2}
.is-loaded .img-spinner{opacity:0}
@keyframes img-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.img-spinner{animation-duration:1.6s}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc-grid{grid-template-columns:1fr}}
@media (max-width:820px){
  header{justify-content:center}
  .brand{position:relative;z-index:81}
  .menu-btn{display:block;position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:81}
  nav{display:none}
  #mobile-menu{display:flex}
  body.nav-open #site-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
  body.nav-open{overflow:hidden}
  .about-grid{grid-template-columns:1fr}
  .work-item{grid-template-columns:auto 1fr;gap:1.2rem}
  .work-item .tags{grid-column:2;justify-content:flex-start;margin-top:.8rem;max-width:none}
  .facts{grid-template-columns:1fr}
  body.motion .piece img{max-width:90vw;max-height:66vh}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .platforms{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}