/* ============================================================
   ADDETTO — Sistema visual global
   Estética: nebulosa dorada + flow italiano, serio, editorial.
   Mobile-first · fluido (clamp) · accesible · carga ligera.
   ============================================================ */

:root{
  /* Paleta */
  --ink:        #0A0A0F;   /* fondo casi-negro */
  --ink-soft:   #12121A;   /* paneles */
  --ivory:      #F4F1E8;   /* texto */
  --ivory-dim:  #B7B2A6;   /* texto secundario */
  --gold:       #C9A24B;   /* oro */
  --amber:      #E8B84B;   /* ámbar (destellos) */
  --nebula:     #6B5BA6;   /* violeta tenue, solo destellos */
  --hair:       rgba(244,241,232,.12); /* líneas finas */

  /* Tipografía */
  --display: "Cormorant Garamond", "Marcellus", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --step--1: clamp(.82rem, .78rem + .2vw, .92rem);
  --step-0:  clamp(1rem, .95rem + .3vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --step-2:  clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  --step-3:  clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
  --step-4:  clamp(3.4rem, 1.8rem + 7vw, 8rem);

  /* Ritmo */
  --gutter: clamp(1.2rem, 5vw, 6rem);
  --measure: 62ch;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Reset ligero */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body{ margin:0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* Base */
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:300;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}

/* Nebulosa de fondo + grano sutil (sin imágenes, ligero) */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -10%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(50vw 50vw at 12% 110%, rgba(107,91,166,.10), transparent 60%),
    var(--ink);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layout */
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4rem,12vh,9rem); }

/* Tipografía display */
h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.04; letter-spacing:.005em; margin:0; }
.eyebrow{ font-family:var(--body); font-weight:500; font-size:var(--step--1);
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold); }
.lead{ font-size:var(--step-1); color:var(--ivory); max-width:var(--measure); font-weight:300; }
.muted{ color:var(--ivory-dim); }
.measure{ max-width:var(--measure); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter);
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(var(--ink), rgba(10,10,15,.4));
  border-bottom:1px solid var(--hair);
}
.brand{ font-family:var(--display); font-size:1.25rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ivory); }
.nav{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,2.2rem); }
.nav a{ font-size:var(--step--1); letter-spacing:.06em; color:var(--ivory-dim);
  transition:color .3s var(--ease); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ivory); }
.lang{ font-size:var(--step--1); letter-spacing:.12em; color:var(--ivory-dim);
  border:1px solid var(--hair); border-radius:999px; padding:.28rem .7rem; }
.lang a{ color:var(--ivory-dim); }
.lang a[aria-current="true"]{ color:var(--gold); }

/* Hero */
.hero{ position:relative; min-height:88vh; display:grid; align-content:center; }
.hero .eyebrow{ margin-bottom:1.4rem; }
.hero h1{ font-size:var(--step-4); margin-bottom:1.2rem; }
.hero .subhead{ font-size:var(--step-1); color:var(--ivory-dim); max-width:46ch; }
.hero .scrollcue{ margin-top:clamp(2.5rem,8vh,5rem); font-size:var(--step--1);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:inline-flex;
  align-items:center; gap:.6rem; }
.hero .scrollcue::after{ content:""; width:1px; height:2.4rem;
  background:linear-gradient(var(--gold), transparent); }
.hero-art{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40vw 40vw at 70% 40%, rgba(232,184,75,.12), transparent 70%);
  /* HERO-ART: reemplazar por el arte abstracto final */ }

/* Manifiesto */
.manifesto p{ font-size:var(--step-1); line-height:1.5; max-width:54ch; margin:0 0 1.6rem;
  font-weight:300; }
.manifesto p:last-child{ color:var(--gold); font-family:var(--display); font-style:italic;
  font-size:var(--step-2); }

/* Constelación */
.stars{ display:grid; gap:1.4rem; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); }
.star{ border:1px solid var(--hair); border-radius:14px; padding:2rem 1.8rem;
  background:linear-gradient(160deg, rgba(255,255,255,.02), transparent);
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.star:hover{ border-color:rgba(201,162,75,.5); transform:translateY(-4px); }
.star h3{ font-size:var(--step-2); margin-bottom:.7rem; }
.star p{ color:var(--ivory-dim); margin:0; max-width:34ch; }
.star .more{ display:inline-block; margin-top:1.2rem; color:var(--gold);
  font-size:var(--step--1); letter-spacing:.08em; }

/* Contacto */
.contact-block p{ font-size:var(--step-1); max-width:48ch; }
.contact-block a.mail{ font-family:var(--display); font-size:var(--step-2); color:var(--gold);
  border-bottom:1px solid rgba(201,162,75,.35); }

/* Footer */
.site-footer{ border-top:1px solid var(--hair); padding:2.4rem var(--gutter);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  color:var(--ivory-dim); font-size:var(--step--1); }

/* Utilidades de entrada (respetan reduced-motion) */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .9s var(--ease) forwards; }
.reveal.d1{ animation-delay:.08s } .reveal.d2{ animation-delay:.18s }
.reveal.d3{ animation-delay:.30s } .reveal.d4{ animation-delay:.44s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Foco accesible */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:99; background:var(--gold); color:var(--ink);
  padding:.6rem 1rem; border-radius:6px; }

/* Encabezado de página interior */
.page-head{ padding-block:clamp(3.5rem,12vh,7rem) clamp(1rem,4vh,2.5rem); }
.page-head .eyebrow{ margin-bottom:1rem; }
.page-head h1{ font-size:var(--step-3); }
.page-head .intro{ margin-top:1.2rem; color:var(--ivory-dim); font-size:var(--step-1);
  max-width:42ch; }

/* Media / artista */
.artist{ display:grid; gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
  grid-template-columns:1fr; }
@media (min-width:820px){ .artist{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
.artist-cover{ border-radius:16px; overflow:hidden; border:1px solid var(--hair);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.artist-cover img{ width:100%; aspect-ratio:802/512; object-fit:cover; }
.artist-name{ font-size:var(--step-3); margin-bottom:.4rem; }
.artist-role{ color:var(--gold); font-family:var(--body); font-size:var(--step--1);
  letter-spacing:.22em; text-transform:uppercase; }
.artist p{ color:var(--ivory-dim); max-width:46ch; }

.music-card{ margin-top:1.8rem; border:1px solid rgba(201,162,75,.4); border-radius:14px;
  padding:1.6rem 1.8rem; background:linear-gradient(160deg, rgba(201,162,75,.08), transparent); }
.music-card .tag{ font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); }
.music-card h3{ font-size:var(--step-2); margin:.4rem 0 1rem; }
.btn-ghost{ display:inline-block; border:1px solid var(--gold); color:var(--gold);
  border-radius:999px; padding:.6rem 1.4rem; font-size:var(--step--1); letter-spacing:.06em;
  transition:background .3s var(--ease), color .3s var(--ease); }
.btn-ghost:hover{ background:var(--gold); color:var(--ink); }

.ref-list{ list-style:none; padding:0; margin:2.6rem 0 0; border-top:1px solid var(--hair); }
.ref-list li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--hair); }
.ref-list a{ color:var(--ivory); transition:color .3s var(--ease); }
.ref-list a:hover{ color:var(--gold); }
.ref-list .views{ color:var(--ivory-dim); font-size:var(--step--1); white-space:nowrap; }

.back-link{ display:inline-block; margin-top:2.5rem; color:var(--ivory-dim);
  font-size:var(--step--1); letter-spacing:.06em; }
.back-link:hover{ color:var(--gold); }