/* ═══════════════════════════════════════════════════════════
   Camiloh — base.css
   Tokens, reset, tipografía, nav, hero, botones, footer, lightbox
   ───────────────────────────────────────────────────────────
   Cambia aquí: colores, radios, espaciado, nav, hero, footer
═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Soria';
  src: url(../assets/fonts/soria.ttf) format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Colores */
  --sky-top: #0C2C9E;
  --sky-mid: #3D6FE0;
  --sky-bot: #CFE7F7;
  --paper: #F7F1E1;           /* crema: reemplaza al blanco puro */
  --paper-deep: #EFE5CC;
  --navy: #0B1C52;            /* azul del panel Servicios */
  --navy-2: #132b7c;
  --paper-glass: rgba(247,241,225,.62);
  --ink: #1a1f2e;
  --ink-soft: #2c3347;
  --red: #E23B22;
  --brand: #1036C1;

  /* Tipografía */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: 'Courier New', Courier, monospace;
  --inter: 'Inter', system-ui, sans-serif;
  --instrument: 'Instrument Serif', Georgia, serif;

  /* Radios */
  --radius: 18px;
  --radius-lg: 32px;
  --radius-xl: 36px;

  /* Espaciado (progresión áurea ≈ φ) */
  --sp-1: .5rem;
  --sp-2: .8125rem;
  --sp-3: 1.3125rem;
  --sp-4: 2.125rem;
  --sp-5: 3.4375rem;
  --sp-6: 5.5625rem;

  /* Vidrio compartido */
  --glass-fill: linear-gradient(158deg, rgba(255,255,255,.30) 0%, rgba(180,205,255,.14) 45%, rgba(120,160,240,.10) 100%);
  --glass-border: rgba(255,255,255,.45);
  --glass-shadow: 0 24px 60px rgba(8,24,90,.28), inset 0 1px 0 rgba(255,255,255,.4);
  --glow-white: 0 0 1px rgba(255,255,255,.6), 0 2px 22px rgba(140,180,255,.35);

}

/* ─── Reset & globals ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #0b1a2e; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--inter);
  overflow-x: hidden;
  cursor: none;
  background: #0b1a2e;
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; cursor: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--red); color: var(--paper); }

/* ─── Cursor personalizado ─── */
#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 44px; height: 44px;
  background: url(../assets/img/cursor.png) center / contain no-repeat;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
#cursor.hover {
  background-image: url(../assets/img/cursor-hover.png);
  transform: translate(-50%, -50%) scale(1.1);
}
@media (hover: none), (pointer: coarse) {
  #cursor { display: none; }
  body, a, button { cursor: auto; }
}

/* ─── Capas de fondo fijas ─── */
#birds {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}
#halation {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .28;
  background:
    radial-gradient(700px 420px at 82% 12%, rgba(255,255,255,.22), transparent 62%),
    radial-gradient(520px 360px at 8% 70%, rgba(80,178,255,.12), transparent 60%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-1.5%, 1.5%) scale(1.04); }
}

/* ─── Nav ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
nav .logo {
  font-family: 'Soria', var(--serif);
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: none;
  color: #fff;
  text-shadow: 0 1px 12px rgba(16,54,193,.4);
}
nav ul {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
}
nav ul a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  overflow: visible;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F7F1E1;
  will-change: transform;
  isolation: isolate;
  border: 1.5px solid rgba(247,241,225,.22);
  background: rgba(14,20,36,.42);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: border-color .4s ease, box-shadow .4s ease;
}
nav ul a::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: -1;
  width: 45%; height: 55%;
  border-radius: 50%;
  background: var(--nc1);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: width .5s ease, height .5s ease, opacity .5s ease, filter .5s ease;
}
nav ul a:hover::before,
nav ul a.active::before {
  width: 95%; height: 95%;
  opacity: .75;
  filter: blur(14px);
}
nav ul a:hover,
nav ul a.active {
  border-color: rgba(247,241,225,.45);
  box-shadow:
    0 0 26px 4px var(--nc-glow),
    0 0 50px 12px var(--nc-glow),
    inset 0 0 12px rgba(255,255,255,.12);
}
nav ul li:nth-child(1) a { --nc1: #7c5cff; --nc-glow: rgba(124,92,255,.55); }
nav ul li:nth-child(2) a { --nc1: #0fb8ae; --nc-glow: rgba(15,184,174,.55); }
nav ul li:nth-child(3) a { --nc1: #9b6bff; --nc-glow: rgba(155,107,255,.5); }
nav ul li:nth-child(4) a { --nc1: #22d3ee; --nc-glow: rgba(34,211,238,.5); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  color: #F7F1E1;
  background: rgba(14,20,36,.42);
  border: 1.5px solid rgba(247,241,225,.22);
  backdrop-filter: blur(16px);
  z-index: 502;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Hero ─── */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 clamp(48px, 8vh, 100px);
  overflow: hidden;
  background: transparent;
}
.hero-cover-full {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-cover-full img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 44, 158, 0.45) 0%,
    rgba(12, 44, 158, 0.18) 22%,
    transparent 48%,
    transparent 100%
  );
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 92%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: clamp(12px, 3vh, 36px);
  margin-top: auto;
}
.hero-name {
  font-family: var(--inter);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(3.6rem, 13vw, 7.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: #ffffff;
  text-shadow: 0 2px 28px rgba(0,0,0,.25);
  margin: 0;
}
.hero-role {
  font-family: var(--instrument);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.9vw, 1.75rem);
  color: #ffffff;
  letter-spacing: .02em;
  margin: 0 0 0.4rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.2);
}

/* Headline con gradiente scroll (JS controla --gy) */
.headline {
  --gy: 50vh;
  background-image: radial-gradient(
    in oklch circle at 50% var(--gy),
    oklch(0.95 0.08 230) 0vh,
    oklch(0.82 0.14 220) 40vh,
    oklch(0.55 0.16 250) 90vh,
    oklch(0.35 0.10 260 / 0) 150vh
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px oklch(0.6 0.12 230 / 0.25));
}

/* ─── Botones ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0C2C9E;
  background: var(--paper);
  border: 1.5px solid transparent;
  box-shadow: 0 8px 28px rgba(6,16,60,.28);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: #FBF6E8;
  box-shadow: 0 14px 34px rgba(6,16,60,.32), 0 0 26px rgba(247,241,225,.55);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.7);
}

/* ─── Footer ─── */
.pf-footer {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 80px) 8% clamp(32px, 4vw, 56px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(203, 122, 118, 0.25) 40%,
    rgba(203, 122, 118, 0.45) 100%
  );
}
.pf-panel {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: 24px;
  background:
    radial-gradient(700px 380px at 90% -20%, rgba(80,120,255,.32), transparent 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
  border: 1.5px solid rgba(247,241,225,.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--paper);
}
.pf-col-brand { max-width: 340px; }
.pf-brand {
  font-family: 'Soria', var(--serif);
  font-weight: 800;
  font-size: 1.55rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--paper);
}
.pf-brand-spark {
  width: 16px; height: 16px;
  fill: currentColor;
  animation: sparkTwinkle 2.8s ease-in-out infinite;
}
@keyframes sparkTwinkle {
  0%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.1) rotate(8deg); }
}
.pf-madewith {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--paper);
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pf-heart { color: var(--red); font-size: .85em; }
.pf-social { display: flex; gap: 10px; margin-bottom: 20px; }
.pf-social-link {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247,241,225,.75);
  background: rgba(247,241,225,.06);
  border: 1.5px solid rgba(247,241,225,.16);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pf-social-link svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.pf-social-link:hover {
  color: var(--paper);
  border-color: var(--red);
  background: rgba(226,59,34,.16);
  transform: translateY(-2px);
  box-shadow: 0 0 18px 2px rgba(226,59,34,.3);
}
.pf-copy {
  font-size: .68rem;
  letter-spacing: .08em;
  opacity: .55;
  color: var(--paper);
  margin-bottom: 4px;
}
.pf-shot-on {
  font-size: .68rem;
  letter-spacing: .08em;
  opacity: .45;
  color: var(--paper);
}
.pf-col-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  min-width: 180px;
  padding-left: clamp(22px, 3vw, 36px);
  border-left: 1px solid rgba(247,241,225,.12);
}
.pf-link {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247,241,225,.72);
  transition: color .25s ease, transform .25s ease;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pf-link:hover { color: var(--paper); transform: translateX(4px); }
.pf-link-discord { color: rgba(247,241,225,.88); }

/* ─── Lightbox ─── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9993;
  background: rgba(15,20,40,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox img {
  max-width: 88vw;
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
#lightbox .lb-caption {
  position: absolute;
  bottom: 34px; left: 0; right: 0;
  text-align: center;
  font-family: 'Soria', var(--serif);
  color: var(--paper);
  font-size: 1.2rem;
}
#lightbox .lb-close {
  position: absolute;
  top: 28px; right: 36px;
  font-family: var(--mono);
  color: var(--paper);
  font-size: .9rem;
  letter-spacing: .1em;
  cursor: none;
  opacity: .8;
}

/* ─── Nav mobile ─── */
@media (max-width: 860px) {
  nav { padding: 14px 18px; }
  .nav-toggle { display: flex; }
  nav ul {
    display: none;
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(12,30,80,.94);
    border: 1.5px solid rgba(255,255,255,.16);
    backdrop-filter: blur(22px);
    z-index: 501;
  }
  nav.is-open ul { display: flex; }
  nav ul a { width: 100%; min-height: 44px; justify-content: center; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  .hero { min-height: 92vh; }
  .pf-footer { padding: 36px 5% 28px; }
  .pf-panel {
    flex-direction: column;
    gap: 22px;
    padding: 22px 20px 24px;
    border-radius: 20px;
  }
  .pf-col-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid rgba(247,241,225,.12);
    min-width: 0;
  }
}

/* ─── Foco visible (teclado) ─── */
:where(a, button):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
nav :where(a, button):focus-visible { outline-color: var(--paper); }