/* ============================================================
   PEDRO TORRES — Saxofonista · Sistema de estilos compartido
   Paleta e identidad tomadas del logo oficial:
     navy #0A1F44 · gris azulado #858FA2 · blanco #FFFFFF
   Tipografía: Archivo (sans condensada bold), como el logo.
   ============================================================ */

@import url('fuentes.css');

:root {
  /* ---- Marca ---- */
  --bg:        #071633;   /* fondo profundo */
  --bg-soft:   #0A1F44;   /* navy de marca (superficies y secciones) */
  --surface:   rgba(255,255,255,0.055);
  --line:      rgba(255,255,255,0.13);

  --accent:    #858FA2;   /* gris azulado del logo (sax y "SAXOFONISTA") */
  --accent-lo: #5C6474;
  --accent-hi: #C9CFD9;
  --cream:     #FFFFFF;   /* blanco del logo */
  --muted:     #8A93A3;   /* texto secundario */
  --ink:       #071633;   /* texto sobre el acento */

  /* Alias heredado: el nombre --brass viene de la plantilla original.
     Se conserva para no romper estilos en línea que aún lo usen. */
  --brass:     var(--accent);
  --brass-lo:  var(--accent-lo);
  --brass-hi:  var(--accent-hi);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  --section-pad: clamp(80px, 12vw, 150px);
  --container:   1240px;
  --ease:        cubic-bezier(.19,1,.22,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body {
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  letter-spacing:.2px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection { background:var(--accent); color:var(--ink); }

/* Foco visible para navegación por teclado */
:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:2px; }

/* Grano sutil sobre todo el sitio */
body::after {
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilidades ---------- */
.container { width:min(var(--container), 90vw); margin-inline:auto; }
.section { padding-block:var(--section-pad); position:relative; }
.center { text-align:center; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.section-label {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:26px;
}
.section-label::before { content:''; width:44px; height:1px; background:var(--accent); opacity:.7; }

/* Titulares: siempre Archivo, mayúsculas, sin cursivas (como el logo) */
h1,h2,h3,h4 {
  font-family:var(--font-display); font-weight:800;
  line-height:1.05; letter-spacing:-.5px;
}
.h-display { font-size:clamp(2.6rem, 8vw, 6.2rem); text-transform:uppercase; font-weight:900; letter-spacing:-2px; }
.h-xl { font-size:clamp(2.2rem, 5.5vw, 4rem); text-transform:uppercase; font-weight:900; letter-spacing:-1.2px; }
.h-lg { font-size:clamp(1.8rem, 3.5vw, 2.6rem); text-transform:uppercase; letter-spacing:-.6px; }
.text-accent, .text-brass { color:var(--accent); }
.text-muted { color:var(--muted); }
.lead { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--muted); max-width:56ch; }

/* ---------- Botones ---------- */
.btn {
  --pad: 16px 34px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:var(--pad); font-size:14px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border-radius:100px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), color .4s ease, background .4s ease, border-color .4s ease;
}
.btn-primary { background:var(--accent-hi); color:var(--ink); }
.btn-primary:hover { background:var(--cream); transform:translateY(-3px); }
.btn-ghost { border:1px solid var(--line); color:var(--cream); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-hi); transform:translateY(-3px); }
.btn-wa { background:#25D366; color:#06251A; }
.btn-wa:hover { background:#2AF076; transform:translateY(-3px); }
.btn svg { width:16px; height:16px; flex-shrink:0; }

/* ---------- Preloader ----------
   Solo existe si el JavaScript está activo. Sin JS nunca aparece, así que
   no puede quedarse tapando la página si algo falla. */
.preloader { display:none; }
.js .preloader {
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s ease, visibility .8s;
}
.preloader.done { opacity:0; visibility:hidden; }
.preloader .pl-logo { display:flex; flex-direction:column; align-items:center; }
.preloader .pl-sax { width:56px; height:56px; color:var(--accent); margin-bottom:18px; }
.preloader .pl-name {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.8rem,5.5vw,2.8rem); text-transform:uppercase;
  letter-spacing:-1px; color:var(--cream); line-height:1;
}
.preloader .pl-role {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(.68rem,1.4vw,.82rem); letter-spacing:.42em;
  text-transform:uppercase; color:var(--accent); margin-top:11px; padding-left:.42em;
}
.preloader .pl-bar {
  margin-top:26px; width:min(60vw,300px); height:2px; background:rgba(255,255,255,.1);
  border-radius:2px; overflow:hidden;
}
.preloader .pl-bar span { display:block; height:100%; width:0; background:var(--accent); transition:width .3s linear; }

/* ---------- Cursor personalizado (solo en escritorio) ---------- */
.cursor-dot, .cursor-ring { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; }
.cursor-dot { width:7px; height:7px; background:var(--accent); transform:translate(-50%,-50%); }
.cursor-ring { width:38px; height:38px; border:1px solid rgba(133,143,162,.6); transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s; }
.cursor-ring.grow { width:70px; height:70px; background:rgba(133,143,162,.12); }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- Navbar ---------- */
.nav {
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,5vw,60px);
  transition:padding .4s var(--ease), background .4s ease, backdrop-filter .4s;
}
.nav.scrolled { padding:16px clamp(20px,5vw,60px); background:rgba(10,31,68,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav .brand { display:flex; align-items:center; gap:11px; }
.nav .brand .sax { width:30px; height:30px; color:var(--accent); flex-shrink:0; }
.nav .brand .brand-txt { display:flex; flex-direction:column; line-height:1; }
.nav .brand .brand-txt b {
  font-family:var(--font-display); font-weight:900; font-size:1.02rem;
  letter-spacing:-.2px; text-transform:uppercase; color:var(--cream);
}
.nav .brand .brand-txt i {
  font-family:var(--font-display); font-style:normal; font-weight:500;
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin-top:3px; padding-left:1px;
}
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); position:relative; padding-block:6px; transition:color .3s; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .4s var(--ease); }
.nav-links a:hover, .nav-links a.active { color:var(--cream); }
.nav-links a.active::after, .nav-links a:hover::after { width:100%; }
.nav-links a.btn-primary { color:var(--ink); }
.nav-links a.btn-primary::after { display:none; }
.nav-links a.btn-primary:hover { color:var(--ink); }
.nav-cta { margin-left:6px; }

.nav-toggle { display:none; width:34px; height:22px; position:relative; z-index:950; }
.nav-toggle span { position:absolute; left:0; width:100%; height:2px; background:var(--cream); transition:.4s var(--ease); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:10px; transform:rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle { display:block; }
  .nav-links {
    position:fixed; top:0; left:0; width:100%; height:100svh;
    flex-direction:column; justify-content:center; gap:30px;
    background:rgba(7,22,51,.97); backdrop-filter:blur(10px);
    transform:translateY(-105%); transition:transform .6s var(--ease); z-index:940;
  }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { font-size:1.4rem; font-family:var(--font-display); font-weight:800; }
  .nav-cta { display:none; }
}

/* ---------- Reveal al hacer scroll ----------
   El contenido solo se oculta si hay JavaScript para volver a mostrarlo.
   Sin JS, todo se ve desde el primer momento. */
.js .reveal { opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.d1{ transition-delay:.1s;} .js .reveal.d2{ transition-delay:.2s;}
.js .reveal.d3{ transition-delay:.3s;} .js .reveal.d4{ transition-delay:.4s;}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:850; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#06251A; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .3s var(--ease), background .3s;
}
.wa-float:hover { transform:translateY(-3px) scale(1.06); background:#2AF076; }
.wa-float svg { width:30px; height:30px; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding-block:70px 40px; background:var(--bg-soft); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; margin-bottom:56px; }
.footer h4 { font-size:.85rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:22px; font-family:var(--font-body); font-weight:600; }
.footer .brand-lg {
  font-family:var(--font-display); font-weight:900; font-size:2.2rem;
  text-transform:uppercase; letter-spacing:-1px; margin-bottom:16px; line-height:1;
}
.footer a { color:var(--muted); display:block; padding:5px 0; transition:color .3s, padding-left .3s; }
.footer a:hover { color:var(--accent-hi); padding-left:6px; }
.footer .socials { display:flex; gap:14px; }
.footer .socials a { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; padding:0; }
.footer .socials a:hover { border-color:var(--accent); padding-left:0; transform:translateY(-3px); }
.footer .socials svg { width:18px; height:18px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; flex-wrap:wrap; gap:12px; }

/* ---------- Responsive ---------- */
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  body{ font-size:16px; }
}

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