/* ============================================================
   Irvin Barba — portafolio
   Implementación estática del diseño (Claude Design → HTML/CSS/JS)
   ============================================================ */

:root{
  --bg:#000000;
  --ink:#F3F3F1;
  --muted:#9B9BA2;
  --dim:#63636B;
  --panel:#0A0A0C;
  --panel-2:#0E0E13;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --violet:#6E5FB8;
  --violet-soft:#B9AEF2;
  --deep:#2A2A46;
  --teal:#3E6B6B;
  --wrap:1200px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

@font-face{font-family:"HelveticaLocal";src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica");font-weight:100 900;font-display:swap}
@font-face{font-family:"GaramondLocal";src:local("Apple Garamond Italic"),local("AppleGaramond-Italic"),local("Apple Garamond"),local("Garamond Italic");font-style:italic;font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"HelveticaLocal","Helvetica Neue",Helvetica,"Arimo",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--violet-soft)}
img,video{display:block;max-width:100%}
::selection{background:var(--violet);color:#fff}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--violet-soft);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--ink);color:#000;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- fondo ---------- */
.stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.auras{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46vw 42vw at 8% 4%,   rgba(110,95,184,.30), transparent 68%),
    radial-gradient(50vw 46vw at 96% 92%, rgba(62,107,107,.24), transparent 70%),
    radial-gradient(60vw 50vw at 50% 48%, rgba(42,42,70,.42),   transparent 72%);
}
.grain-def{position:absolute}
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.045;mix-blend-mode:overlay;filter:url(#ibgrain)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;gap:4px;padding:6px;border-radius:999px;
  border:1px solid var(--line);background:rgba(10,10,12,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.nav-a{
  padding:9px 17px;border-radius:999px;font-size:13px;letter-spacing:-.01em;
  color:var(--muted);background:transparent;
  transition:background .3s ease,color .3s ease;
}
.nav-a:hover{color:var(--ink)}
.nav-a.is-on{background:var(--ink);color:#000}
.nav-a.is-on:hover{color:#000}

main{position:relative;z-index:3}

/* ---------- tipografía compartida ---------- */
.ser{
  font-family:"GaramondLocal","Apple Garamond","EB Garamond",Garamond,serif;
  font-style:italic;letter-spacing:-.048em;word-spacing:-.035em;color:var(--ink);
}
.h2{margin:0;font-size:clamp(30px,5.4vw,68px);line-height:1.02;font-weight:400;letter-spacing:-.032em}
.h2--sm{font-size:clamp(28px,4.6vw,58px);line-height:1.04}
.h2--xl{font-size:clamp(32px,6.6vw,86px)}
.slash{color:var(--dim)}
.lede{margin:22px 0 0;max-width:520px;font-size:clamp(15px,1.5vw,18px);line-height:1.5;letter-spacing:-.012em;color:var(--muted)}
.sub{margin:14px 0 0;max-width:460px;font-size:15px;line-height:1.55;color:var(--muted)}
.dim{color:var(--dim)}
.sm{font-size:12px}

/* ---------- botones ---------- */
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.btn{
  display:inline-block;padding:14px 26px;border-radius:999px;
  font-size:14px;letter-spacing:-.01em;transition:transform .25s ease,background .3s ease,color .3s ease;
}
.btn--solid{background:var(--ink);color:#000;font-weight:500}
.btn--solid:hover{background:#fff;color:#000}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.btn--lg{padding:16px 32px;font-size:15px;font-weight:500}
.btn--lg.btn--ghost{border-color:rgba(255,255,255,.28)}

/* ---------- placeholders ---------- */
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ph span{font-family:var(--mono);color:var(--dim);text-align:center}
.ph--hero{background:repeating-linear-gradient(115deg,#0A0A0C 0 14px,#111116 14px 28px)}
.ph--hero span{font-size:11px;letter-spacing:.08em}
.ph--portrait{background:repeating-linear-gradient(120deg,#0A0A0C 0 10px,#131319 10px 20px)}
.ph--portrait span{font-size:9px;letter-spacing:.06em;line-height:1.3}

/* ---------- arcos de horizonte ---------- */
.arco{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none}
.arco--hero{
  top:calc(100% - 150px);width:190vw;aspect-ratio:1;max-width:2400px;
  background:linear-gradient(to top,#000 0 42%,rgba(0,0,0,0) 100%);
  box-shadow:
    0 -1px 0 0 rgba(255,255,255,.55),
    0 -14px 46px -14px rgba(255,255,255,.30),
    0 -120px 200px -60px rgba(110,95,184,.34),
    0 -240px 320px -80px rgba(42,42,70,.40);
}
.arco--cierre{
  top:38%;width:210vw;height:210vw;max-width:2600px;max-height:2600px;background:#000;
  box-shadow:
    0 -1px 0 0 rgba(255,255,255,.85),
    0 -18px 60px -10px rgba(255,255,255,.45),
    0 -160px 260px -60px rgba(110,95,184,.50),
    0 -320px 420px -90px rgba(42,42,70,.55);
}

/* ============================ HERO ============================ */
.hero{position:relative;padding:132px 20px 0;max-width:var(--wrap);margin:0 auto;overflow:hidden}
.hero-head{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-head h1{
  margin:18px 0 0;font-size:clamp(38px,8.4vw,104px);line-height:.98;
  font-weight:400;letter-spacing:-.032em;white-space:nowrap;
}
.hero-stage{position:relative;margin:56px auto 0;max-width:1080px}
.hero-stage .tl{
  position:relative;border-radius:30px;border:1px solid var(--line-2);overflow:hidden;
  background:var(--panel);transform-style:preserve-3d;
  box-shadow:0 60px 140px -50px rgba(110,95,184,.55);
}
.hero-frame{position:relative;aspect-ratio:16/9;width:100%}
.hero-frame>video,.hero-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait{
  position:absolute;left:50%;bottom:-140px;transform:translateX(-50%);
  margin:0;width:190px;height:250px;border-radius:22px;border:6px solid #000;
  overflow:hidden;background:var(--panel);z-index:5;box-shadow:0 26px 60px rgba(0,0,0,.72);
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 88%}
.statement{position:relative;max-width:820px;margin:200px auto 0;padding-bottom:170px;text-align:center}
.statement-a{margin:0;font-size:clamp(20px,2.9vw,34px);line-height:1.28;font-weight:400;letter-spacing:-.032em}
.statement-b{margin:16px 0 0;font-size:clamp(19px,2.7vw,32px);line-height:1.3}

/* ============================ VIDEO ============================ */
.sec-video{position:relative;padding:40px 20px 0;max-width:var(--wrap);margin:0 auto}
.grid-proy{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2.4vw,30px);margin-top:44px;
}
.card{
  position:relative;border-radius:26px;border:1px solid var(--line);background:var(--panel);
  overflow:hidden;transform-style:preserve-3d;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.card-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;top:16px;left:16px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11px;letter-spacing:.04em;color:var(--ink);
}
.play{
  position:absolute;top:14px;right:14px;width:54px;height:54px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(243,243,241,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  transform:translateZ(50px);transition:background .3s ease,color .3s ease;
}
.play span{font-size:13px;line-height:1;margin-left:2px}
.play:hover{background:var(--ink);color:#000}
.card-meta{position:absolute;left:0;right:0;bottom:0;padding:22px;transform:translateZ(38px)}
.card-meta h3{margin:0;font-size:clamp(19px,2vw,25px);font-weight:400;letter-spacing:-.032em;line-height:1.12}
.card-meta p{margin:9px 0 0;font-size:12px;letter-spacing:.02em;color:var(--muted)}

/* ---------- marquesina de marcas ---------- */
.marquee{
  position:relative;margin-top:clamp(48px,6vw,90px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:clamp(44px,6vw,96px);width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:clamp(44px,6vw,96px);flex:0 0 auto}
.logo{display:flex;align-items:center;justify-content:center;height:64px;flex:0 0 auto}
.logo img{width:auto;object-fit:contain;opacity:.62;transition:opacity .35s ease}
.logo img:hover{opacity:1}

/* ============================ FOTO ============================ */
.sec-foto{position:relative;padding:clamp(80px,11vw,160px) 20px 0;max-width:var(--wrap);margin:0 auto;overflow:hidden}
.giant{
  margin:0;font-size:clamp(58px,16vw,220px);line-height:.86;font-weight:700;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);text-align:center;will-change:transform;
}
.grid-foto{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.6vw,38px);
  align-items:start;margin-top:clamp(28px,4vw,54px);perspective:1200px;
}
.shot{
  display:block;width:100%;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);will-change:transform;
}
.shot-box{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden}
.shot-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.shot:hover .shot-box img{transform:scale(1.06)}
.shot:nth-child(1){grid-column:1 / span 7}
.shot:nth-child(2){grid-column:9 / span 4;margin-top:clamp(40px,7vw,120px)}
.shot:nth-child(3){grid-column:2 / span 4;margin-top:clamp(20px,4vw,70px)}
.shot:nth-child(4){grid-column:7 / span 6}
.shot:nth-child(5){grid-column:3 / span 8;margin-top:clamp(10px,2vw,40px)}

/* ============================ CAPACIDADES ============================ */
.sec-yo{position:relative;padding:clamp(80px,11vw,150px) 20px 0;max-width:var(--wrap);margin:0 auto}
.grid-cap{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,5vw,62px)}
.cap{
  grid-column:span var(--span);position:relative;display:flex;flex-direction:column;
  justify-content:space-between;gap:clamp(30px,5vw,64px);padding:clamp(20px,2.4vw,30px);
  border-radius:22px;border:1px solid var(--line);background:var(--panel);overflow:hidden;
  transition:border-color .5s ease,background .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.cap:hover{border-color:rgba(255,255,255,.30);background:var(--panel-2);transform:translateY(-6px)}
.cap-glow{
  position:absolute;inset:auto -30px -70px auto;width:180px;height:180px;border-radius:999px;
  background:radial-gradient(circle,rgba(110,95,184,.30),transparent 70%);
  opacity:0;transition:opacity .6s ease;
}
.cap:hover .cap-glow{opacity:1}
.cap-num{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.cap-name{position:relative;font-size:clamp(24px,3.4vw,44px);line-height:1.02;letter-spacing:-.038em;color:var(--ink)}

/* ============================ CIERRE ============================ */
.sec-cierre{
  position:relative;margin-top:clamp(100px,13vw,190px);
  padding:clamp(90px,12vw,170px) 20px clamp(150px,20vw,300px);overflow:hidden;
}
.cierre-in{position:relative;max-width:900px;margin:0 auto;text-align:center}
.cierre-in .lede{margin-left:auto;margin-right:auto}
.cierre-in .cta-row{gap:14px;margin-top:32px}

/* ============================ FOOTER ============================ */
.foot{
  position:relative;z-index:3;border-top:1px solid var(--line);
  background:rgba(10,10,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.foot-cols{
  max-width:var(--wrap);margin:0 auto;padding:64px 20px 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:36px;
}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col a,.foot-col span{font-size:14px;color:var(--muted)}
.foot-col a:hover{color:var(--violet-soft)}
.foot-h{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.brk{font-size:13px!important;overflow-wrap:anywhere;word-break:break-word}
.foot-bar{border-top:1px solid var(--line)}
.foot-bar-in{
  max-width:var(--wrap);margin:0 auto;padding:22px 20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.mark{font-size:15px;letter-spacing:-.02em}
.foot-social{display:flex;gap:18px}
.foot-social a{font-size:13px;color:var(--muted)}

/* ============================ LIGHTBOX ============================ */
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px}
.lb.is-foto{background:rgba(0,0,0,.94);padding:clamp(20px,6vw,80px)}
.lb-video{width:100%;display:flex;justify-content:center}
.lb-video-frame{position:relative;width:100%;max-width:1180px;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);background:#000}
.lb-video-frame iframe{width:100%;height:100%;border:0;display:block}
.lb-foto{position:relative;max-width:1100px;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-foto img{max-width:100%;max-height:82vh;border-radius:20px;border:1px solid var(--line-2)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.lb-prev{left:clamp(-70px,-4vw,-20px)}
.lb-next{right:clamp(-70px,-4vw,-20px)}
.lb-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.14)}

/* ============================ MOVIMIENTO ============================ */
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wm>i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.on .wm>i,.wm.on>i{transform:translateY(0)}

@keyframes cardIn{from{opacity:.2;transform:translateY(78px) scale(.82);filter:blur(9px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes imgIn{from{transform:scale(1.34)}to{transform:scale(1)}}
@keyframes floaty{0%{transform:translateY(-11px)}50%{transform:translateY(11px)}100%{transform:translateY(-11px)}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - clamp(22px,3vw,48px)),0,0)}}

.sr{animation:cardIn linear both;animation-timeline:view();animation-range:entry 0% cover 48%}
.iz{animation:imgIn linear both;animation-timeline:view();animation-range:entry 0% cover 92%}
.flo{animation:floaty 7.5s ease-in-out infinite}
.tl{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.st{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.st.in{opacity:1;transform:translateY(0)}
.glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px 260px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 62%)}
@media (hover:hover) and (pointer:fine){.tl:hover .glare{opacity:1}}

@supports not (animation-timeline: view()){
  .sr{animation:none;opacity:.2;transform:translateY(78px) scale(.82);filter:blur(9px);
      transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease}
  .sr.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  .iz{animation:none;transform:scale(1.34);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
  .sr.in .iz{transform:scale(1)}
}

/* ajuste de intensidad de movimiento (body[data-mov]) */
[data-mov="sutil"] .flo{animation:none}
[data-mov="sutil"] .sr{animation-range:entry 0% cover 26%}
[data-mov="apagado"] .sr,
[data-mov="apagado"] .iz,
[data-mov="apagado"] .flo{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
[data-mov="apagado"] .st{opacity:1!important;transform:none!important}
[data-mov="apagado"] .wm>i{transform:none!important;transition:none!important}
[data-mov="apagado"] .glare{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sr,.iz,.flo,.marquee-track{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .st{opacity:1!important;transform:none!important}
  .wm>i{transform:none!important;transition:none!important}
}

/* ============================ RESPONSIVE ============================
   El diseño original no resolvía estos cortes; se añaden aquí.
   ==================================================================== */
@media (max-width:900px){
  .hero{padding-top:116px}
  .statement{margin-top:170px;padding-bottom:140px}
}
@media (max-width:760px){
  .hero-head h1{white-space:normal;font-size:clamp(34px,10vw,54px)}
  .portrait{width:132px;height:176px;bottom:-96px;border-width:5px;border-radius:18px}
  .statement{margin-top:150px;padding-bottom:110px}
  .grid-foto{grid-template-columns:1fr}
  .shot:nth-child(n){grid-column:1 / -1;margin-top:0}
  .grid-cap{grid-template-columns:repeat(2,1fr)}
  .cap{grid-column:span 1;gap:38px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb-foto{max-width:100%}
}
@media (max-width:520px){
  .nav{top:10px;gap:2px;padding:5px}
  .nav-a{padding:8px 12px;font-size:12px}
  .grid-cap{grid-template-columns:1fr}
  .foot-bar-in{justify-content:flex-start}
}