/* ============================================================
   LUCAS CORTESE — HOJA DE ESTILOS
   Referencias visuales: Audi (aire, alineación a la izquierda,
   tipografía grande, hairlines) y COMBI (cards de servicio).
   ============================================================ */

/* --- TOKENS: todo el sistema visual sale de acá ------------- */
:root {
    --negro:        #000000;
    --negro-2:      #0a0a0a;   /* fondo de secciones alternas */
    --negro-3:      #111111;   /* superficies (cards, inputs)  */
    --blanco:       #ffffff;
    --gris:         #9a9a9a;   /* texto secundario             */
    --gris-claro:   #d6d6d6;   /* texto de párrafo             */
    --linea:        rgba(255, 255, 255, 0.12);
    --linea-suave:  rgba(255, 255, 255, 0.06);
    --acento:       #d4af37;

    --fuente-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --fuente-texto:  'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Espacio que reserva la navegación lateral (0 en celular) */
    --nav-espacio: 0px;

    --margen-lateral: clamp(24px, 5vw, 64px);
    --aire-seccion:   clamp(90px, 12vh, 160px);
    --transicion:     0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- RESET -------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Evita que el ancla quede pegada al borde superior */
    scroll-padding-top: 40px;
}

/* El negro vive en html para que el video fijo se vea por detrás
   del contenido en vez de quedar tapado por el fondo del body */
html {
    background-color: var(--negro);
}

body {
    width: 100%;
    overflow-x: hidden;
    background-color: transparent;
    color: var(--blanco);
    font-family: var(--fuente-texto);
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol, dl {
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* Foco visible y consistente en toda la página (accesibilidad) */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

/* --- UTILIDADES --------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: max(var(--margen-lateral), var(--nav-espacio));
    padding-right: var(--margen-lateral);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--blanco);
    color: var(--negro);
    font-size: 0.85rem;
    transition: top var(--transicion);
}

.skip-link:focus {
    top: 16px;
}

/* Aparición al hacer scroll (la clase .visible la agrega el JS) */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Escalona la aparición de los bloques de la intro */
.intro-titulo   { transition-delay: 0.10s; }
.intro-bajada   { transition-delay: 0.20s; }
.intro-acciones { transition-delay: 0.30s; }

/* ============================================================
   NAVEGACIÓN LATERAL
   ============================================================ */
.nav-lateral {
    position: fixed;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    z-index: 200;
}

.nav-lateral ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
    font-family: var(--fuente-titulo);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gris);
    transition: color var(--transicion);
}

/* La rayita que crece: el marcador de sección activa */
.nav-link::before {
    content: "";
    display: block;
    width: 16px;
    height: 1px;
    background: var(--gris);
    transition: width var(--transicion), background var(--transicion);
}

.nav-num {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    opacity: 0.55;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--blanco);
}

.nav-link:hover::before {
    width: 28px;
    background: var(--blanco);
}

.nav-link.is-activo {
    color: var(--blanco);
}

.nav-link.is-activo::before {
    width: 40px;
    background: var(--acento);
}

.nav-link.is-activo .nav-num {
    color: var(--acento);
    opacity: 1;
}

/* ============================================================
   FONDO DE VIDEO
   Fijo detrás de toda la página. En la portada se ve limpio a
   pantalla completa (el hero no es más que un hueco transparente)
   y más abajo asoma por los márgenes de los bloques de contenido.
   ============================================================ */
.fondo-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Un velo parejo para que el texto de los bloques no compita con
   las partículas que pasan por detrás */
.fondo-velo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

/* Todo el contenido flota por encima del video */
main,
.pie {
    position: relative;
    z-index: 1;
}

/* ============================================================
   HERO — solo video
   Nada de texto encima: el clip se ve limpio, a pantalla
   completa, y el contenido arranca recién en la sección INTRO.
   ============================================================ */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* El clip es muy oscuro de origen: lo levantamos para que se lea
   la silueta y las partículas doradas */
.fondo-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El musico ocupa del 6% al 97% de la altura del cuadro, asi que en
       pantallas mas anchas que 16:9 el recorte centrado le corta la
       cabeza. Corriendo el encuadre al 22% se sacrifica el borde de
       abajo del derbake, que es zona oscura, y la cara queda entera */
    object-position: 50% 22%;
    filter: brightness(1.35) contrast(1.1) saturate(1.05);
}

/* ============================================================
   BLOQUES DE CONTENIDO
   Rectángulos casi negros que flotan sobre el video. El alfa deja
   pasar apenas el clip por detrás del texto (los costados del
   cuadro son negro puro, así que sin esto el efecto se perdería)
   y los márgenes dejan ver el video alrededor.
   ============================================================ */
.intro,
.seccion,
.pie {
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(2px);
    margin-left: max(var(--margen-lateral), var(--nav-espacio));
    margin-right: var(--margen-lateral);
    margin-bottom: clamp(12px, 1.4vw, 22px);
    padding-left: clamp(20px, 2.6vw, 52px);
    padding-right: clamp(20px, 2.6vw, 52px);
}

/* Dentro del bloque el contenedor ya no necesita su propio margen
   lateral: el aire lo da el padding del rectángulo */
.intro .contenedor,
.seccion .contenedor,
.pie .contenedor,
.pie .pie-inner {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   INTRO — el nombre y los CTA, ya fuera del video
   ============================================================ */
.intro {
    position: relative;
    z-index: 1;
    padding-top: clamp(64px, 9vh, 110px);
    padding-bottom: var(--aire-seccion);
}

.intro-eyebrow {
    font-family: var(--fuente-titulo);
    font-size: clamp(0.68rem, 1.4vw, 0.8rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: 26px;
}

/* El nombre ocupa todo el ancho disponible: es el ancla visual de la
   sección y marca el borde contra el que se alinea todo lo demás */
.intro-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.6rem, 9.5vw, 9rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

/* Bajada y CTA colgados del nombre: la hairline los ata al bloque de
   arriba en vez de dejarlos flotando al costado */
.intro-pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 5vw, 70px);
    align-items: end;
    margin-top: clamp(34px, 5vh, 58px);
    padding-top: clamp(26px, 4vh, 40px);
    border-top: 1px solid var(--linea);
}

.intro-bajada {
    max-width: 46ch;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--gris-claro);
}

.intro-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Botones ------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 38px;
    border: 1px solid transparent;
    font-family: var(--fuente-titulo);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion);
}

.btn-primario {
    background: var(--blanco);
    color: var(--negro);
    border-color: var(--blanco);
}

.btn-primario:hover,
.btn-primario:focus-visible {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--negro);
}

.btn-secundario {
    color: var(--blanco);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-secundario:hover,
.btn-secundario:focus-visible {
    border-color: var(--blanco);
    background: rgba(255, 255, 255, 0.08);
}

.btn-full {
    width: 100%;
}

/* --- Control de sonido del video ---------------------------- */
.video-toggle {
    position: absolute;
    z-index: 3;
    right: var(--margen-lateral);
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    transition: border-color var(--transicion), background var(--transicion);
}

.video-toggle:hover {
    border-color: var(--blanco);
    background: rgba(0, 0, 0, 0.6);
}

/* Icono de parlante dibujado en CSS: cuerpo rectangular más el cono */
.video-sonido-icono {
    position: relative;
    width: 5px;
    height: 8px;
    background: var(--blanco);
    margin-left: -3px;
}

.video-sonido-icono::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 7px solid var(--blanco);
}

/* Barra cruzada mientras el video sigue en silencio */
.video-sonido-icono::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--blanco);
    transform: translateY(-50%) rotate(-45deg);
}

/* Con el sonido activo la barra desaparece */
.video-sonido[aria-pressed="true"] .video-sonido-icono::after {
    display: none;
}

/* --- Indicador de scroll ------------------------------------ */
.scroll-cue {
    position: absolute;
    z-index: 2;
    bottom: 38px;
    left: max(var(--margen-lateral), var(--nav-espacio));
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--fuente-titulo);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gris);
    transition: color var(--transicion);
}

.scroll-cue:hover {
    color: var(--blanco);
}

.scroll-cue-linea {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--linea);
    position: relative;
    overflow: hidden;
}

/* Punto de luz que recorre la línea en loop */
.scroll-cue-linea::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--acento);
    transform-origin: left;
    animation: correr 2.2s ease-in-out infinite;
}

@keyframes correr {
    0%   { transform: scaleX(0); transform-origin: left; }
    45%  { transform: scaleX(1); transform-origin: left; }
    55%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion {
    position: relative;
    padding: var(--aire-seccion) 0;
    border-top: 1px solid var(--linea-suave);
}

.seccion-alterna {
    background: rgba(10, 10, 10, 0.88);
}

.sec-head {
    margin-bottom: clamp(40px, 6vw, 72px);
}

.sec-num {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    color: var(--acento);
    margin-bottom: 16px;
}

.sec-titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.sec-bajada {
    max-width: 52ch;
    margin-top: 20px;
    color: var(--gris);
    font-size: 1.02rem;
}

/* ============================================================
   02 · EL ARTISTA
   ============================================================ */
.artista-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.artista-texto p {
    color: var(--gris-claro);
    margin-bottom: 22px;
    max-width: 62ch;
}

.parrafo-destacado {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--blanco) !important;
    margin-bottom: 30px !important;
}

.destacado {
    color: var(--acento);
    font-weight: 500;
}

/* Ficha técnica al costado, estilo hoja de datos */
.artista-datos .dato {
    padding: 18px 0;
    border-top: 1px solid var(--linea);
}

.artista-datos .dato:last-child {
    border-bottom: 1px solid var(--linea);
}

.artista-datos dt {
    font-family: var(--fuente-titulo);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 7px;
}

.artista-datos dd {
    font-size: 0.98rem;
    color: var(--blanco);
}

/* ============================================================
   03 · CLASES (cards)
   El gap de 1px sobre un fondo claro dibuja las hairlines
   entre cards sin necesidad de bordes individuales.
   ============================================================ */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 40px);
    background: var(--negro);
    transition: background var(--transicion);
}

.seccion-alterna .card {
    background: var(--negro-2);
}

.card:hover {
    background: var(--negro-3);
}

.card-num {
    font-family: var(--fuente-titulo);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    color: var(--gris);
    margin-bottom: 26px;
}

.card-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.24rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.card-texto {
    font-size: 0.94rem;
    color: var(--gris-claro);
    margin-bottom: 24px;
}

.card-lista {
    margin-bottom: 30px;
}

.card-lista li {
    position: relative;
    padding-left: 18px;
    font-size: 0.84rem;
    color: var(--gris);
    line-height: 2;
}

.card-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 8px;
    height: 1px;
    background: var(--acento);
}

/* El link queda pegado abajo aunque las cards tengan alturas distintas */
.card-link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--fuente-titulo);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--linea);
    transition: color var(--transicion), border-color var(--transicion);
}

.card-link::after {
    content: " →";
    display: inline-block;
    transition: transform var(--transicion);
}

.card-link:hover {
    color: var(--acento);
    border-color: var(--acento);
}

.card-link:hover::after {
    transform: translateX(4px);
}

/* Card del seminario: línea de acento arriba */
.card-destacada::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--acento);
}

/* ============================================================
   04 · AGENDA
   ============================================================ */

/* Aviso de que las fechas listadas son una muestra del formato */
.agenda-ejemplo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    padding: 14px 18px;
    border-left: 2px solid var(--acento);
    background: rgba(212, 175, 55, 0.06);
    font-size: 0.92rem;
    color: var(--gris-claro);
}

.agenda-ejemplo::before {
    content: "Ejemplo";
    flex: none;
    padding: 4px 10px;
    border: 1px solid var(--acento);
    font-family: var(--fuente-titulo);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acento);
}

.agenda {
    border-top: 1px solid var(--linea);
}

/* Las filas de muestra van atenuadas para que no se confundan con
   fechas reales aunque el visitante se saltee el aviso */
.agenda.es-ejemplo .agenda-item {
    opacity: 0.55;
}

.agenda-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--linea);
    transition: background var(--transicion);
}

.agenda-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.agenda-fecha {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.agenda-dia {
    font-family: var(--fuente-titulo);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.agenda-mes {
    font-family: var(--fuente-titulo);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--acento);
    margin-top: 7px;
}

.agenda-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.agenda-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.06rem;
    font-weight: 600;
}

.agenda-lugar {
    font-size: 0.88rem;
    color: var(--gris);
}

.agenda-estado {
    font-family: var(--fuente-titulo);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gris);
    padding: 6px 13px;
    border: 1px solid var(--linea);
    white-space: nowrap;
}

.agenda-cta {
    font-family: var(--fuente-titulo);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transicion);
}

.agenda-cta:hover {
    color: var(--acento);
}

.agenda-nota {
    margin-top: 34px;
    color: var(--gris);
    font-size: 0.96rem;
}

.agenda-nota a {
    color: var(--acento);
    border-bottom: 1px solid currentColor;
}

/* ============================================================
   05 · GALERÍA
   Masonry con columnas CSS: cada foto conserva su proporción
   original en lugar de quedar recortada a un cuadrado.
   ============================================================ */
.galeria {
    column-count: 3;
    column-gap: 18px;
}

.galeria-item {
    break-inside: avoid;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--negro-3);
}

.galeria-item img {
    width: 100%;
    height: auto;
    filter: grayscale(65%) contrast(1.05);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
                filter 0.6s ease;
}

.galeria-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(1);
}

/* ============================================================
   06 · CONTACTO
   ============================================================ */
.contacto-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 10px;
}

/* Inputs con subrayado, sin caja: más limpio sobre fondo negro */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 2px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--linea);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    font-size: 1rem;
    outline: none;
    border-radius: 0;
    transition: border-color var(--transicion);
}

.form-group textarea {
    resize: vertical;
    min-height: 110px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: var(--acento);
}

/* El desplegable nativo pinta el menú con el fondo del sistema:
   forzamos las opciones a oscuro para que no queden ilegibles */
.form-group select option {
    background: var(--negro-3);
    color: var(--blanco);
}

.form-acciones {
    margin-top: 40px;
}

/* Aclara qué pasa al enviar, antes de que el usuario toque el botón */
.form-ayuda {
    margin-top: 16px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--gris);
}

.form-nota {
    margin-top: 10px;
    min-height: 1.5em;
    font-size: 0.86rem;
    color: var(--acento);
}

.contacto-directo h3 {
    font-family: var(--fuente-titulo);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gris);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 22px;
}

.contacto-directo p {
    color: var(--gris-claro);
    font-size: 0.94rem;
    margin-bottom: 26px;
}

.contacto-links li {
    border-bottom: 1px solid var(--linea);
}

.contacto-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-family: var(--fuente-titulo);
    font-size: 0.88rem;
    font-weight: 600;
    transition: color var(--transicion), padding-left var(--transicion);
}

.contacto-links a::after {
    content: "↗";
    color: var(--gris);
    transition: color var(--transicion);
}

.contacto-links a:hover {
    color: var(--acento);
    padding-left: 8px;
}

.contacto-links a:hover::after {
    color: var(--acento);
}

/* ============================================================
   PIE
   ============================================================ */
.pie {
    padding: 46px 0;
    border-top: 1px solid var(--linea);
}

.pie-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    /* Deja libre la esquina donde flotan los botones de redes */
    padding-right: 90px;
}

.pie-nombre {
    font-family: var(--fuente-titulo);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pie-legal {
    font-size: 0.78rem;
    color: var(--gris);
}

/* ============================================================
   FLOTANTES · SPOTIFY
   ============================================================ */
.spotify {
    position: fixed;
    top: 26px;
    right: 26px;
    z-index: 150;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.spotify-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 14px;
    border: 1px solid var(--linea);
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    font-family: var(--fuente-titulo);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: border-color var(--transicion), background var(--transicion);
}

.spotify-toggle:hover {
    border-color: var(--blanco);
    background: rgba(0, 0, 0, 0.8);
}

.spotify-icono svg {
    width: 17px;
    height: 17px;
    fill: #1db954;
}

.spotify-panel {
    width: 100%;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    animation: desplegar 0.35s ease;
}

.spotify-panel[hidden] {
    display: none;
}

@keyframes desplegar {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   FLOTANTES · REDES
   ============================================================ */
.social {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.icon-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    transition: transform var(--transicion);
}

.icon-btn:hover {
    transform: scale(1.1);
}

.icon-btn svg {
    width: 26px;
    height: 26px;
    fill: var(--blanco);
}

.icon-wp {
    background-color: #25d366;
}

.icon-ig {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* A partir de acá la nav lateral cabe sin pisar el contenido.
   220px = los 32px del borde más el ítem activo más largo ("EL ARTISTA",
   que se ensancha porque su rayita crece a 40px) y un respiro */
@media (min-width: 1100px) {
    :root { --nav-espacio: 220px; }

    /* Los flotantes de redes ocupan los últimos 82px del viewport:
       los CTA dejan ese pasillo libre para no quedar tapados */
    .intro-acciones { padding-right: 62px; }
}

/* Tablet */
@media (max-width: 1099px) {
    .galeria { column-count: 2; }

    .intro-pie,
    .artista-grid,
    .contacto-grid {
        grid-template-columns: 1fr;
    }

    /* Apilado, los CTA respiran separados de la bajada */
    .intro-pie { gap: 30px; }

    .video-toggle {
        top: auto;
        bottom: 38px;
        transform: none;
    }
}

/* Celular */
@media (max-width: 767px) {
    :root { --aire-seccion: 72px; }

    /* En vertical el recorte del video es por los costados, no por arriba:
       a 100svh solo entra el 26% del ancho del cuadro y se pierden las
       particulas. Bajando el hero a 72svh entra el 36%, y de paso el
       nombre asoma abajo del pliegue en vez de una pantalla de video sola */
    .hero {
        height: 72vh;
        height: 72svh;
    }

    /* En un celular no hay ancho para el rectangulo con margen: entre el
       margen del bloque y su padding el texto perdia 40px y el borde
       quedaba a 20px de las palabras, que se lee como si el bloque
       estuviera cortando el texto. Aca los bloques van de lado a lado
       con el aire de siempre, y el video asoma en el corte entre uno y
       otro en vez de rodearlos */
    .intro,
    .seccion,
    .pie {
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--margen-lateral);
        padding-right: var(--margen-lateral);
    }

    .galeria { column-count: 1; }

    /* La navegación pasa de columna lateral a barra inferior */
    .nav-lateral {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        background: rgba(0, 0, 0, 0.88);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--linea);
    }

    .nav-lateral ul {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        padding: 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-lateral ul::-webkit-scrollbar { display: none; }

    .nav-link {
        flex-direction: column;
        gap: 6px;
        padding: 11px 9px;
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    /* En la barra inferior la rayita se acuesta arriba del texto */
    .nav-link::before {
        width: 0;
        transition: width 0.3s ease, background 0.3s ease;
    }

    .nav-link.is-activo::before {
        width: 18px;
        background: var(--acento);
    }

    .nav-num { display: none; }

    /* Todo lo flotante sube para no quedar debajo de la barra */
    .social {
        bottom: 74px;
        right: 16px;
        flex-direction: row;
    }

    .icon-btn {
        width: 46px;
        height: 46px;
    }

    .icon-btn svg {
        width: 22px;
        height: 22px;
    }

    .spotify {
        top: 14px;
        right: 14px;
        left: 14px;
        width: auto;
    }

    /* Va al lado opuesto para no quedar debajo de los botones de redes */
    .video-toggle {
        bottom: 78px;
        left: 16px;
        right: auto;
        width: 42px;
        height: 42px;
    }

    /* Los dos CTA al mismo ancho: se ven parejos apilados */
    .intro-acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .scroll-cue { display: none; }

    /* La agenda se apila en dos filas legibles */
    .agenda-item {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 14px 18px;
    }

    .agenda-dia { font-size: 1.7rem; }

    .agenda-estado,
    .agenda-cta {
        grid-column: 2;
        justify-self: start;
    }

    /* Espacio libre debajo del texto para la barra de navegación
       y los botones de redes, que flotan sobre esa zona */
    .pie { padding-bottom: 150px; }

    .pie-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 0;
    }
}

/* Respeta a quien pidió menos animación en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-cue-linea::after { animation: none; }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}