/* ══════════════════════════════════════════════
   LUISPH · Fotografía deportiva
   Hoja de estilos única. Orden:
   1 Variables · 2 Base · 3 Componentes
   4 Secciones · 5 Animaciones · 6 Responsive
   ══════════════════════════════════════════════ */

/* ───────── 1 · VARIABLES ───────── */
:root{
  --bg:      oklch(0.14 0.03 265);
  --bg-2:    oklch(0.185 0.035 265);
  --line:    oklch(0.32 0.04 265);
  --fg:      oklch(0.97 0.01 90);
  --soft:    oklch(0.93 0.01 90);
  --muted:   oklch(0.74 0.02 265);

  --accent:  oklch(0.76 0.19 50);    /* naranja · deportes y marca */
  --cyan:    oklch(0.78 0.14 205);   /* prensa */
  --pink:    oklch(0.74 0.19 350);   /* eventos */

  --max:     1320px;
  --pad:     7vw;
  --ease:    cubic-bezier(.2,.7,.2,1);
}

/* ───────── 2 · BASE ───────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; text-wrap:pretty;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0 0 16px}

.display{font-family:'Bebas Neue','Arial Narrow',sans-serif; letter-spacing:.015em; line-height:.92; font-weight:400}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#16172a; padding:10px 16px; z-index:100}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ───────── 3 · COMPONENTES ───────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px}
.eyebrow--accent{color:var(--accent)} .eyebrow--cyan{color:var(--cyan)} .eyebrow--pink{color:var(--pink)}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-size:15px; font-weight:800; white-space:nowrap; cursor:pointer;
  transition:transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.btn--primary{background:var(--accent); color:oklch(0.16 0.03 265); box-shadow:0 10px 30px -12px var(--accent)}
.btn--primary:hover{transform:translateY(-3px) scale(1.02)}
.btn--ghost{background:oklch(1 0 0 /.04); border-color:oklch(1 0 0 /.22); color:var(--fg); backdrop-filter:blur(6px)}
.btn--ghost:hover{transform:translateY(-3px); background:oklch(1 0 0 /.1); border-color:oklch(1 0 0 /.45)}
.btn--wa{background:#25D366; color:#06210f; box-shadow:0 10px 30px -14px #25D366}
.btn--wa:hover{transform:translateY(-3px)}

.link{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px;
  transition:gap .3s var(--ease)}
.link--accent{color:var(--accent)} .link--cyan{color:var(--cyan)}
.link:hover{gap:12px}

.icon-btn{
  width:42px; height:42px; border-radius:999px; border:1px solid oklch(1 0 0 /.22);
  display:grid; place-items:center; transition:border-color .3s, transform .3s var(--ease);
}
.icon-btn:hover{border-color:var(--accent); transform:translateY(-2px)}

.rule{border:0; height:1px; margin:0 var(--pad);
  background:linear-gradient(90deg,transparent,oklch(0.4 0.02 85 /.35),transparent)}

/* fotos */
.shot{
  position:relative; margin:0; overflow:hidden; border-radius:10px; cursor:zoom-in;
  background:var(--bg-2); border:1px solid var(--line);
  transition:transform .55s var(--ease), box-shadow .55s, border-color .55s;
}
.shot img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05);
  transition:transform .9s var(--ease), filter .55s}
.shot:hover{transform:translateY(-8px)}
.shot:hover img{transform:scale(1.08); filter:saturate(1.2) contrast(1.04)}
.shot--sport:hover{border-color:var(--accent); box-shadow:0 26px 55px -25px var(--accent)}
.shot--press:hover{border-color:var(--cyan);   box-shadow:0 26px 55px -25px var(--cyan)}
.shot--event:hover{border-color:var(--pink);   box-shadow:0 26px 55px -25px var(--pink)}
.grid .shot{aspect-ratio:3/4}

.grid{display:grid; gap:16px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}

/* ───────── 4 · SECCIONES ───────── */
.section{padding:104px var(--pad); max-width:var(--max); margin:0 auto; position:relative}
.section--tight{padding-bottom:30px}
.section__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:36px}
.section__head--stack{display:block; max-width:58ch}
.section__title{font-size:clamp(38px,5.4vw,68px); margin:0 0 12px}
.section__lead{font-size:16.5px; color:var(--muted); margin:0}

/* cabecera */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:oklch(0.14 0.03 265 /.72); border-bottom:1px solid oklch(1 0 0 /.08)}
.nav__inner{max-width:var(--max); margin:0 auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:15px}
.brand__mark{height:42px; width:auto}
.brand__rule{width:1px; height:30px; background:oklch(1 0 0 /.22)}
.brand__text{display:flex; flex-direction:column; gap:5px}
.brand__name{font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.12em; line-height:1}
.brand__sub{font-size:8px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); line-height:1}
.nav__links{display:flex; align-items:center; gap:30px; font-size:14px; font-weight:700}
.nav__links a{position:relative; opacity:.82; transition:opacity .3s}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:currentColor; border-radius:2px; transition:right .35s var(--ease)}
.nav__links a:hover{opacity:1} .nav__links a:hover::after{right:0}
.nav__portal{padding:10px 20px; font-size:13px}
.burger{display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:10px}
.burger span{display:block; height:2px; background:var(--fg); border-radius:2px; margin:4px 0;
  transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* portada */
.hero{position:relative; height:clamp(560px,92vh,900px); overflow:hidden}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter:saturate(1.12) contrast(1.05) brightness(.82); animation:kenburns 26s ease-in-out infinite alternate}
.hero__scrim{position:absolute; inset:0;
  background:linear-gradient(0deg,var(--bg) 2%,oklch(0.14 0.03 265 /.72) 26%,oklch(0.14 0.03 265 /.15) 62%,oklch(0.14 0.03 265 /.35) 100%)}
.hero__scrim--side{background:linear-gradient(100deg,oklch(0.14 0.03 265 /.82) 0%,oklch(0.14 0.03 265 /.25) 42%,transparent 72%)}
.hero__glow{position:absolute; width:46vw; height:46vw; left:-12vw; bottom:-16vw; border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 66%); opacity:.2; filter:blur(30px);
  animation:float 16s ease-in-out infinite; pointer-events:none}
.hero__copy{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 var(--pad) 74px; max-width:var(--max); margin:0 auto}
.hero__title{font-size:clamp(34px,4.2vw,66px); margin:0 0 20px; max-width:30ch;
  background:linear-gradient(100deg,oklch(0.99 0.01 90) 22%,var(--accent) 48%,oklch(0.99 0.01 90) 74%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:up .95s var(--ease) forwards, sheen 8s linear infinite}
.hero__lead{font-size:16.5px; color:var(--soft); max-width:52ch; margin:0 0 26px;
  text-shadow:0 2px 18px oklch(0.14 0.03 265 /.9)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px}
.hero__sign{position:absolute; right:var(--pad); bottom:150px; height:128px; width:auto; z-index:2;
  opacity:.9; filter:drop-shadow(0 4px 22px oklch(0.14 0.03 265 /.85)); pointer-events:none}
.hero__scroll{position:absolute; right:var(--pad); bottom:70px; z-index:2;
  display:flex; align-items:center; gap:12px; color:var(--soft)}
.hero__scroll span{font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; opacity:.65}
.hero__scroll svg{animation:bob 2.4s ease-in-out infinite}

/* cinta */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:oklch(1 0 0 /.02); padding:16px 0}
.marquee__track{display:flex; width:max-content; animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span,.marquee i{font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:.06em;
  padding:0 26px; white-space:nowrap; font-style:normal; text-transform:uppercase}
.dot--1{color:var(--accent)} .dot--2{color:var(--cyan)} .dot--3{color:var(--pink)}

/* espacios */
.spaces{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.space{position:relative; overflow:hidden; border-radius:14px; padding:30px 28px 32px;
  background:linear-gradient(165deg,oklch(1 0 0 /.055),oklch(1 0 0 /.015)); border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s}
.space::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--c);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.space::after{content:""; position:absolute; width:240px; height:240px; right:-90px; bottom:-110px;
  border-radius:50%; background:radial-gradient(circle,var(--c),transparent 68%); opacity:.16;
  transition:opacity .5s, transform .6s}
.space:hover{transform:translateY(-7px); border-color:var(--c); box-shadow:0 28px 60px -32px var(--c)}
.space:hover::before{transform:scaleX(1)}
.space:hover::after{opacity:.34; transform:scale(1.15)}
.space--sport{--c:var(--accent)} .space--press{--c:var(--cyan)} .space--event{--c:var(--pink)}
.space__icon{width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in oklab,var(--c) 18%,transparent); color:var(--c); margin-bottom:18px}
.space__title{font-size:30px; margin-bottom:8px}
.space p{font-size:14.5px; color:var(--muted); margin:0}

/* prensa */
.split{display:grid; grid-template-columns:7fr 5fr; gap:44px; align-items:center}
.split__media{aspect-ratio:3/2}

/* sobre mí */
.about{display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:start}
.about__photo{position:sticky; top:100px}
.about__photo .shot{aspect-ratio:3/4}
.about__text p{font-size:16.5px; line-height:1.75; color:var(--soft); max-width:62ch}
.about__text strong{color:var(--fg)}
.quote{font-size:clamp(24px,2.6vw,34px); line-height:1.15; max-width:24ch;
  color:var(--accent); margin:0 0 28px}

/* portal */
.portal-wrap{max-width:var(--max); margin:40px auto 0; padding:0 var(--pad)}
.portal{position:relative; overflow:hidden; border-radius:20px; padding:60px 52px;
  border:1px solid oklch(1 0 0 /.14);
  background:linear-gradient(125deg,oklch(0.24 0.07 45),oklch(0.2 0.06 320) 55%,oklch(0.19 0.05 240))}
.portal__glow{position:absolute; width:420px; height:420px; right:-120px; top:-180px; border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 65%); opacity:.3; filter:blur(20px);
  animation:float 18s ease-in-out infinite}
.portal__mark{position:absolute; right:-30px; bottom:-70px; height:300px; width:auto; opacity:.09; pointer-events:none}
.portal__row{position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:30px}
.portal__row>div{max-width:54ch}
.portal__title{font-size:clamp(30px,4vw,48px); margin:0 0 14px}
.portal p{color:var(--soft); margin:0}

/* contacto */
.contact{display:grid; grid-template-columns:5fr 7fr; gap:48px}
.socials{display:flex; gap:12px; margin-top:22px}
.form{display:flex; flex-direction:column; gap:16px; padding:34px; border-radius:16px;
  border:1px solid var(--line); background:linear-gradient(165deg,oklch(1 0 0 /.05),oklch(1 0 0 /.015))}
.form label{display:flex; flex-direction:column; gap:7px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.form input,.form textarea{
  font:inherit; font-size:15px; color:var(--fg); padding:12px 14px;
  border-radius:8px; border:1px solid var(--line); background:oklch(0.12 0.025 265);
  transition:border-color .3s}
.form input:focus,.form textarea:focus{border-color:var(--accent); outline:none}
.form textarea{resize:vertical}
.form .btn{align-self:flex-start; margin-top:8px}
.form__msg{font-size:14px; margin:0; min-height:1.2em}
.form__msg--ok{color:var(--accent)} .form__msg--err{color:oklch(0.7 0.18 25)}

/* pie */
.footer{border-top:1px solid oklch(1 0 0 /.08); padding:40px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.footer img{height:74px; width:auto; opacity:.92}
.footer p{font-size:13px; color:var(--muted); margin:0}

/* visor */
.lightbox{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:oklch(0.1 0.02 265 /.94); backdrop-filter:blur(6px); padding:4vw}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw; max-height:88vh; width:auto; border-radius:6px;
  box-shadow:0 30px 80px -20px #000}
.lightbox__close,.lightbox__nav{position:absolute; background:oklch(1 0 0 /.08); color:var(--fg);
  border:1px solid oklch(1 0 0 /.18); border-radius:999px; cursor:pointer; line-height:1;
  transition:background .3s, transform .3s var(--ease)}
.lightbox__close{top:22px; right:22px; width:46px; height:46px; font-size:28px}
.lightbox__nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:32px}
.lightbox__nav--prev{left:22px} .lightbox__nav--next{right:22px}
.lightbox__close:hover,.lightbox__nav:hover{background:oklch(1 0 0 /.18)}

/* ───────── 5 · ANIMACIONES ───────── */
@keyframes kenburns{from{transform:scale(1.04) translateY(0)} to{transform:scale(1.15) translateY(-1.5%)}}
@keyframes up{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5%,-7%) scale(1.12)}}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.95} 50%{transform:translateY(10px); opacity:.35}}
@keyframes sheen{to{background-position:220% center}}

.anim{opacity:0; animation:up .95s var(--ease) forwards}
.a1{animation-delay:.15s} .a2{animation-delay:.3s} .a3{animation-delay:.45s} .a4{animation-delay:.6s}

.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important}
  .anim,.reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ───────── 6 · RESPONSIVE ───────── */
@media (max-width:1000px){
  .split{grid-template-columns:1fr; gap:30px}
  .about{grid-template-columns:1fr; gap:30px}
  .about__photo{position:static; max-width:420px}
  .contact{grid-template-columns:1fr; gap:34px}
  .spaces{grid-template-columns:1fr}
}

@media (max-width:820px){
  :root{--pad:6vw}
  .section{padding:72px var(--pad)}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:1fr}
  .marquee span,.marquee i{font-size:22px; padding:0 16px}
  .portal{padding:42px 28px}
  .portal__mark{height:190px; opacity:.07}

  .burger{display:block}
  .nav__portal{display:none}
  .brand__rule,.brand__text{display:none}
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:oklch(0.14 0.03 265 /.98); border-bottom:1px solid oklch(1 0 0 /.08);
    padding:8px var(--pad) 18px; display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 0; width:100%; font-size:16px; opacity:1;
    border-bottom:1px solid oklch(1 0 0 /.07)}
  .nav__links a::after{display:none}

  .hero{height:clamp(540px,88vh,820px)}
  .hero__copy{padding:0 var(--pad) 58px}
  .hero__sign{height:74px; bottom:auto; top:96px; right:var(--pad)}
  .hero__scroll{display:none}
  .lightbox__nav{width:42px; height:42px; font-size:26px}
  .footer img{height:58px}
}

/* ───────── páginas legales (aviso legal, privacidad) ───────── */
.legal{max-width:76ch; margin:0 auto; padding:120px var(--pad) 80px}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal .volver{display:inline-block; margin-bottom:32px; font-weight:700; font-size:14px; text-decoration:none}
.legal .volver::before{content:"‹ "}
.legal h1{font-family:'Bebas Neue','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(38px,6vw,60px); line-height:.95; letter-spacing:.015em; margin:0 0 8px}
.legal .fecha{color:var(--muted); font-size:13px; margin:0 0 40px}
.legal h2{font-size:19px; font-weight:800; margin:38px 0 12px}
.legal p, .legal li{color:var(--soft); font-size:15.5px; line-height:1.7}
.legal ul{padding-left:20px; margin:0 0 16px}
.legal li{margin:0 0 6px}
.legal .dato-pendiente{background:oklch(0.76 0.19 50 /.15); color:var(--accent);
  padding:1px 7px; border-radius:4px; font-weight:700; font-size:.92em}
.footer__legal{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
.footer__legal a{font-size:13px; color:var(--muted); text-decoration:none}
.footer__legal a:hover{color:var(--soft)}