/* ------------------------------------------------------------------------------
1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Backgrounds
      1.8 Colors

  2.  Navbar

      2.1 Navbar Desctop
      2.2 Navbar Mobile
      2.3 Navbar Fixed

  3.  Main

      3.1 Masthead
      3.2 Sections
      3.9 Music
      4.0 Contact
      5.0 FOOTER SOCIAL ICONS
      6.0 Bio Panel



/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/


/* 1.1 General */

@import url('bootstrap.min.css');
@import url('magnific-popup.css');
html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'fenwick', sans-serif;
    font-size: 1rem;
    line-height: 1.625em;
    color: #767676;
    overflow-y: hidden;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: #ff8560;
}

::selection {
    background-color: #ffffff00;
    color: #000;
}

-webkit-::selection {
    background-color: #ff8560;
    color: #000;
}

::-moz-selection {
    background-color: #ff8560;
    color: #000;
}


/* 1.2 Typography */

h1,
.h1 {
    position: relative;
    font-family: 'fenwick', sans-serif;
    font-size: 5.725rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
}

h2,
.h2 {
    position: relative;
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1.2;
    color: #000;
    margin: 2rem 0;
}

h3,
.h3 {
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-size: 1.925rem;
    line-height: 1.25;
    color: #000;
    margin: 1.5rem 0;
}

h4,
.h4 {
    font-family: 'fenwick', sans-serif;
    font-weight: 600;
    font-size: 1.525rem;
    line-height: 1.2;
    color: #000;
    margin: 1.5rem 0;
}

h5,
.h5 {
    font-family: 'fenwick', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.2;
    color: #000;
    margin: 1.2rem 0;
}

h6,
.h6 {
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    line-height: 1.2;
    color: #000;
    margin: 1rem 0;
    text-transform: uppercase;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
h6 a,
.h6 a {
    color: inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover,
h5 a:hover,
.h5 a:hover,
h6 a:hover,
.h6 a:hover {
    text-decoration: none;
}

p {
    margin-bottom: 1rem;
}

ul {
    list-style: none;
    padding-left: 0;
}

a {
    color: #ff8560;
    -webkit-transition: color .3s ease-out;
    -o-transition: color .3s ease-out;
    transition: color .3s ease-out;
}

a:hover,
a:focus {
    color: #ff8560;
    outline: none;
}

a:focus {
    text-decoration: none;
}

.lead {
    line-height: 1.9;
    font-size: 1.125rem;
}

.size-sm {
    font-size: 0.875rem;
}


/* 1.3 Fields */

.form-group {
    margin-bottom: 2rem;
}

.form-control,
textarea.form-control {
    font-size: 1em;
    height: 3.625em;
    border-radius: 0;
    padding-left: 22px;
    color: #bbbbbb;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -webkit-transition: all .15s;
    -o-transition: all .15s;
    transition: all .15s;
}

textarea.form-control {
    height: 7.9em;
    padding-top: 1.1em;
    resize: none;
}

.form-control:focus {
    border-color: #ff8560;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: none;
}

.form-control::-moz-placeholder {
    color: #bbbbbb;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #bbbbbb;
}

.form-control::-webkit-input-placeholder {
    color: #bbbbbb;
}

label.error {
    border-color: #ff8560;
    padding: 9px 0 0 22px;
    font-size: 0.9rem;
}

.mc-label {
    padding: 9px 0 0 22px;
    font-size: 0.9rem;
    color: #fff;
}


/* 1.4 Buttons */

.btn {
    font-family: 'fenwick', sans-serif;
    position: relative;
    display: inline-block;
    border: 0.2em solid #ff8560;
    border-radius: 0;
    padding: 1em 2.4em 1em;
    font-size: 0.875em;
    color: #000;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #ff8560;
    font-weight: 700;
    border-width: 1px;
    -webkit-transition: all .3s ease-out!important;
    transition: all .3s ease-out!important;
}

.btn:hover,
.btn:focus,
.btn:active {
    color: #000;
    background-color: #ecff73;
    border-color: #ecff73;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none!important;
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #343434;
}

.btn-white:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.btn-b-white {
    background-color: transparent;
    border-color: #fff;
}

.btn-b-white:hover {
    background-color: #fff;
    color: #000;
}

.btn-bg-dark:hover,
.btn-bg-dark:focus {
    color: #fff;
    border-color: #fff;
}


/* === BOTÓN DE CONTACTO - EFECTO EXPANSIVO === */

#contact .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: 1px solid #ffffff;
    border-radius: 50px;
    /* ← Bordes redondeados como el reproductor */
    background: transparent;
    /* ← Transparente */
    color: #ffffff;
    /* ← Letras blancas */
    font-family: 'fenwick', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    /* ← Misma curva que .btn-recursos */
    position: relative;
    overflow: hidden;
}

#contact .btn:hover,
#contact .btn:focus {
    background-color: #ffffff;
    /* ← Fondo blanco sólido */
    border-color: #ffffff;
    color: #000000;
    /* ← Letras negras */
    padding-left: 38px;
    /* ← EXPANSIÓN horizontal */
    padding-right: 38px;
    box-shadow: none;
    outline: none !important;
}

#contact .btn:active {
    transform: scale(0.98);
    /* ← Feedback al click */
}


/* 1.5 Icons */

ion-icon {
    font-size: 3.8rem;
    --ionicon-stroke-width: 17px;
}

.icon-play {
    position: absolute;
    width: 5.15rem;
    height: 5.15rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.icon-play:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -5px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #fff;
}

.icon-play:hover {
    border: 1px solid #ff8560;
    background-color: #ff8560;
    color: #343434;
}

.icon-play:hover:before {
    border-color: transparent transparent transparent #000;
}


/* 1.6 Loader */

.loader {
    position: absolute;
    z-index: 10;
    z-index: 100;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: #fff;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ff8560;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}


/* 1.7 Backgrounds */

.bg-light {
    background: #f5f5f5!important;
}

.bg-dark {
    background: #1d1d1d!important;
    color: #86878a;
}

.bg-dark .row-experience:nth-child(even) {
    background-color: #272727;
}

.bg-dark .btn:hover,
.bg-dark .btn:focus {
    color: #fff
}

.bg-primary {
    background: #ff8560!important;
    color: #fff;
}

.bg-dark .progress {
    background: #383838;
}


/* 1.8 Colors */

.text-dark {
    color: #000!important;
}

.text-white {
    color: #fff!important;
}

.text-gray {
    color: #767676!important;
}

.text-muted {
    color: #bbbbbb!important;
}

.text-primary {
    color: #ff8560!important;
}


/*-------------------------------------------------------------------------------
  2. Navbar
-------------------------------------------------------------------------------*/

.navbar {
    position: absolute;
    z-index: 10;
    width: 100%;
    padding: 0 1.5rem;
    height: 4.7rem;
}

@media(min-width: 992px) {
    .navbar {
        padding: 0 3rem;
    }
}

.navbar,
.navbar a,
.navbar a:hover,
.navbar a:focus {
    color: #343434;
}

.toggler {
    position: absolute;
    right: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 0;
}

.toggler:focus {
    outline: none;
}

.toggler-icon {
    display: block;
    border-top: 2px solid #fff;
    /* BLANCO por defecto */
    margin-top: 0.5rem;
    transition: border-color 0.3s ease;
}

.navbar-white .toggler-icon {
    border-top: 2px solid #000;
    /* NEGRO en music */
}

.toggler-icon:first-child {
    margin-top: 0;
}


/* Language selector en navbar principal */

.navbar-language {
    position: absolute;
    right: 10rem;
    /* ← A la izquierda del toggler */
    top: 0.6rem;
    /* ← MISMO valor que .email */
    transform: translateY(-50%);
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'fenwick ligth', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.navbar-language li {
    margin: 0;
    padding: 0;
}

.navbar-language li a {
    color: #fff !important;
    /* Blanco por defecto */
    text-decoration: none;
    opacity: 0.5;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.navbar-language li.active a,
.navbar-language li a:hover {
    opacity: 1;
}


/* Cuando navbar es blanco (music) */

.navbar-white .navbar-language li a {
    color: #000 !important;
    /* Negro en music */
}

.navbar-brand {
    position: absolute;
    color: #fff;
    margin-right: 4rem;
    padding: 0;
    line-height: 1;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #fff;
}

@media (max-width: 1500px) {
    .navbar-brand {
        position: static;
        float: left;
    }
    .navbar .container {
        width: auto;
    }
}

.navbar ul {
    margin-bottom: 0;
}

.navbar-desctop .email {
    font-family: 'fenwick ligth', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.90rem;
    text-transform: uppercase;
    /* CENTRADO ABSOLUTO - IGNORA EL CONTAINER */
    position: fixed !important;
    /* ← FIXED para ignorar el container */
    left: 50% !important;
    top: 2.35rem !important;
    /* ← Mitad de 4.7rem (altura navbar) */
    transform: translateX(-50%) !important;
    margin: 0 !important;
    color: #fff !important;
    transition: color 0.3s ease;
    white-space: nowrap;
    z-index: 5;
    /* ← Por encima del container */
}

.navbar-white .email {
    color: #000 !important;
    /* NEGRO en music */
}

.navbar-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 0 1.5rem 3rem 1.5rem;
}

@media (min-width: 992px) {
    .navbar-bottom {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.navbar-bottom {
    font-family: 'fenwick', sans-serif;
    color: #fff !important;
    /* BLANCO por defecto - fuerza sobre body */
    transition: color 0.3s ease;
}

.navbar-bottom a {
    color: #fff !important;
    transition: color 0.3s ease;
}

.navbar-bottom .social {
    position: relative;
    z-index: 10;
    float: left;
}

.navbar-bottom .copy {
    float: right;
    position: relative;
    z-index: 10;
}

.navbar-bottom .social {
    position: relative;
    z-index: 10;
    float: left;
}

.navbar-bottom .copy {
    float: right;
    position: relative;
    z-index: 10;
}

.social-icons li {
    float: left;
    margin-right: 1.5rem;
}

.social-icons ion-icon {
    display: block;
    font-size: 1.2rem;
    color: #fff;
    /* BLANCO por defecto */
    transition: all 0.3s ease;
}

.social-icons ion-icon:hover {
    color: #ff8560;
}

.navbar-bottom-white,
.navbar-bottom-white a {
    color: #000 !important;
    /* NEGRO en music */
}

.navbar-bottom-white .social-icons ion-icon {
    color: #000 !important;
    /* NEGRO en music */
}


/* 2.1 Navbar Desctop */

.navbar-desctop:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: all 0.3s ease;
}

.navbar-nav-desctop {
    font-family: 'fenwick', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}

.nav-link {
    padding: 0;
}

.navbar-nav-desctop li a {
    color: #343434;
    transition: all 0.3s;
}

.navbar-nav-desctop li a:hover {
    text-decoration: none;
}

.navbar-nav-desctop>li {
    position: relative;
    float: left;
    margin-right: 2.1rem;
}

.navbar-nav-desctop>li>a {
    display: flex;
    align-items: center;
}

.navbar-nav-desctop>li>.active,
.navbar-nav-desctop>li:hover>a {
    color: #767676;
}

.navbar-nav-desctop li ul {
    opacity: 0;
    visibility: hidden;
    padding: 0.7rem 1.8rem;
    position: absolute;
    top: 85%;
    background: #1a1c26;
    color: #000;
    min-width: 12rem;
    margin-left: -1.5rem;
    transition: all 0.3s linear;
}

.navbar-nav-desctop li:hover ul {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.navbar-nav-desctop li ul li {
    margin: 1rem 0;
}

.navbar-nav-desctop li ul li a {
    opacity: 0.5;
    display: block;
}

.navbar-nav-desctop li ul .active a,
.navbar-nav-desctop li ul li:hover a {
    opacity: 1;
}


/* 2.2 Navbar Mobile */

.click-capture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.5s;
}

.navbar-mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* ← Ya existe */
    padding: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.navbar-mobile .close {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    font-size: 3rem;
    color: #000;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 1;
    z-index: 999;
    /* ← MÁS ALTO */
    flex: none;
    /* ← NO PARTICIPA EN FLEXBOX */
}

.navbar-mobile .close:hover {
    opacity: 1;
    color: #000000;
    /* ← Color primario */
}

@media (min-width: 576px) {
    .navbar-mobile {
        width: 22%;
        /* ← AÚN MÁS ANGOSTO */
        max-width: 16rem;
        /* ← AÚN MÁS ANGOSTO */
    }
}

.navbar-mobile-footer {
    margin-top: auto;
    color: #000;
    /* ← NEGRO */
}

.navbar-nav-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ← CENTRADO SIMPLE */
    align-items: center;
    font-size: 2.2rem;
    font-weight: 700;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav-mobile li {
    padding: 0;
    transform: rotate(90deg);
    line-height: 1;
    flex-shrink: 0;
}


/* HOME (primer elemento) */

.navbar-nav-mobile li:nth-child(1) {
    margin-top: 0;
    margin-bottom: 6rem;
    /* ← AJUSTA ESTE VALOR para espacio HOME-MUSIC */
}


/* MUSIC (segundo elemento) */

.navbar-nav-mobile li:nth-child(2) {
    margin-top: 5rem;
    /* ← AJUSTA para espacio HOME-MUSIC */
    margin-bottom: 5rem;
    /* ← AJUSTA para espacio MUSIC-CONTACT */
}


/* CONTACT (tercer elemento) */

.navbar-nav-mobile li:nth-child(3) {
    margin-top: 8rem;
    /* ← AJUSTA para espacio MUSIC-CONTACT */
    margin-bottom: 0;
}

.navbar-nav-mobile li a {
    color: #000;
    /* ← NEGRO */
    font-family: 'fenwick', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.navbar-nav-mobile li .active,
.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li a:focus {
    color: #000000;
    /* ← Color primario al hover */
    text-decoration: none;
}

.menu-is-open {
    overflow: hidden;
}

.menu-is-open .navbar-mobile {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.menu-is-open .click-capture {
    visibility: visible;
    opacity: 1;
}


/* Navbar Mobile - Versión oscura para sección music */

.navbar-white~.navbar-mobile,
body.menu-is-open.section-music .navbar-mobile {
    background-color: #1b1b1b;
    /* ← Fondo NEGRO */
}

.navbar-white~.navbar-mobile .navbar-nav-mobile li a,
body.menu-is-open.section-music .navbar-mobile .navbar-nav-mobile li a {
    color: #fff;
    /* ← Letras BLANCAS */
}

.navbar-white~.navbar-mobile .close,
body.menu-is-open.section-music .navbar-mobile .close {
    color: #fff;
    /* ← X de cerrar BLANCA */
}

.navbar-white~.navbar-mobile .navbar-mobile-footer,
body.menu-is-open.section-music .navbar-mobile .navbar-mobile-footer {
    color: #fff;
    /* ← Footer BLANCO */
}

.navbar-white~.navbar-mobile .navbar-nav-mobile li a:hover,
.navbar-white~.navbar-mobile .navbar-nav-mobile li .active,
body.menu-is-open.section-music .navbar-mobile .navbar-nav-mobile li a:hover,
body.menu-is-open.section-music .navbar-mobile .navbar-nav-mobile li .active {
    color: #ffffff;
    /* ← Hover color primario */
}

.navbar-white~.navbar-mobile .close:hover,
body.menu-is-open.section-music .navbar-mobile .close:hover {
    color: #000000;
    /* ← X hover color primario */
}


/* 2.4 Navbar White */


/* Cuando navbar es BLANCO (sección music) - Todo debe ser NEGRO */

.navbar-white .navbar-nav-desctop li a {
    color: #000;
}

.navbar-white .navbar-nav-desctop>.active>a,
.navbar-white .navbar-nav-desctop>li>.active,
.navbar-white .navbar-nav-desctop>li:hover>a {
    color: #ff8560;
}

.navbar-white .toggler-icon {
    border-color: #000;
}


/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/


/* 3.1 Masthead */

.masthead {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 9rem 0 5rem 0;
    background-position: left top;
    background-size: cover;
}

.opener {
    position: relative;
    z-index: 1;
    width: 100%;
}

.opener .modal-content {
    background-color: rgba(255, 255, 255, 0.9);
}


/* Line decoration */

h1+.line {
    margin-top: 3vh;
    /* ← Línea más cerca del título */
    width: 25%;
    border-top: 3px solid #fda286;
    transition: all .3s ease;
}

.line {
    width: 60px;
    height: 3px;
    background: #fda286;
    margin: 20px 0;
}


/* ==============================================================================
   HOME SECTION - ESTILOS PERSONALIZADOS
   ============================================================================== */

.home-subtitle {
    font-family: 'fenwick ligth', sans-serif;
    font-weight: 300;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    opacity: 0.9;
}

.home-title {
    font-family: 'fenwick', sans-serif;
    font-size: 5.725rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -3px;
    color: #fff;
    margin: 0;
    padding: 0;
}

.home-title-line {
    display: block;
}

.home-description {
    font-family: 'fenwick ligth', sans-serif;
    font-weight: 300;
    margin-top: 2rem;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.7;
    opacity: 0.95;
}


/* 3.2 Sections */

.section {
    position: relative;
    padding: 9rem 0;
}

.section-sm {
    padding: 6rem 0;
}

.section h2 {
    margin-top: 0;
}

.pp-section {
    background: #fff;
    background-position: 50%;
    background-size: cover;
    padding: 8rem 0 6rem;
}

.section:not(#home) .intro {
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.7s;
}

.section:not(#home) .intro.animate {
    opacity: 1;
    transform: translateY(0);
}


/* Fijar Contact - sin movimiento al scroll */

#contact .intro {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
}

#contact .scroll-wrap {
    position: static;
    /* ← Elimina position: relative */
}

.pp-scrollable {
    padding: 0;
    overflow-x: hidden;
}

.pp-scrollable .intro {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

.pp-scrollable .intro:before {
    content: '';
    display: inline-block;
    height: 100vh;
    vertical-align: middle;
}

.pp-scrollable .scroll-wrap {
    width: 100%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 8rem 0 6rem;
    white-space: normal;
}

.progress-nav {
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 1.5rem;
    transform: translate(0, -50%);
}

@media(min-width: 992px) {
    .progress-nav {
        right: 3rem;
    }
}

.progress-nav li {
    position: relative;
    width: 3px;
    height: 30px;
    -webkit-transition: background-color .3s cubic-bezier(.46, .03, .52, .96);
    transition: background-color .3s cubic-bezier(.46, .03, .52, .96);
    background-color: #000;
}

.progress-nav li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 3px;
    height: 0;
    content: '';
    transition: all .3s ease;
    background-color: #ff8560;
}

.progress-nav li:before {
    height: 30px;
}

.progress-nav li.active~li:before {
    background-color: #101010;
}

.progress-nav-white li.active~li:before {
    background-color: #fff;
}


/* 3.9 music */

.music-row .image-link {
    display: block;
    overflow: hidden;
}

.music-row .image-link img {
    transition: all .3s ease;
}

.music-row .image-link:hover img {
    transform: scale(1.1);
}

.read-more {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: all .3s ease;
}

.read-more ion-icon {
    font-size: 1.8rem;
    display: inline-block;
    vertical-align: middle;
}

.music-row figure:hover .read-more {
    opacity: 1;
    transform: translateY(0);
}


/* 4.0 Contact */

.message {
    margin-bottom: 2rem;
    display: none;
}


/* ========================================
   5.0 FOOTER SOCIAL ICONS
======================================== */

.footer-social-links {
    margin-top: 2rem;
}

.footer-social-links .social-icons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-social-links .social-icons-list li {
    margin: 0;
    padding: 0;
}

.social-svg {
    width: 40px;
    /* ← CAMBIA ESTE NÚMERO MAS GRANDE ICONOS*/
    height: auto;
    display: block;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
    /* SVGs blancos */
}

.footer-social-links .social-icons-list li a:hover .social-svg {
    transform: translateY(-3px);
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}


/* Copyright */

.copy {
    font-family: 'fenwick', sans-serif;
    opacity: 0.6;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}


/* 6.0 Bio Panel*/


/*==========================================================================

   SOLUCIÓN PARA BIO-PANEL (HISTORIA)

========================================================================== */

#bio-panel {
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    /* --- CONFIGURACIÓN DE IMAGEN --- */
    /* Prueba quitar el ../ si no carga, o usa la ruta completa */
    background-image: url('../img/bgproject1.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    background-color: #000;
    /* Fondo de seguridad por si la imagen falla */
    z-index: 999999 !important;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    visibility: hidden;
    overflow-y: auto;
}

#bio-panel.active {
    right: 0 !important;
    visibility: visible !important;
}


/* ELIMINAMOS EL OVERLAY NEGRO */

.bio-backdrop-overlay {
    display: none !important;
    /* Esto quita el velo negro por completo */
}

.bio-text-content {
    position: relative;
    z-index: 2;
    padding: 100px 0;
    background: transparent !important;
    /* Aseguramos que nada tape el fondo */
}


/* Botón de cerrar dentro del panel */

.close-recursos {
    position: fixed !important;
    /* Fixed para que no se mueva al hacer scroll */
    top: 30px;
    right: 30px;
    color: #ffffff !important;
    /* BLANCO PURO */
    font-family: 'fenwick', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1000001 !important;
    /* Por encima de todo */
    opacity: 1 !important;
    transition: transform 0.3s ease;
    /* --- AQUÍ ESTÁ LA SOLUCIÓN --- */
    background: transparent !important;
    /* Quita cualquier fondo gris/blanco */
    border: none !important;
    /* Quita cualquier borde cuadrado */
    outline: none !important;
    /* Quita la línea de enfoque (focus outline) */
    box-shadow: none !important;
    /* Quita cualquier sombra sutil */
    -webkit-appearance: none;
}


/* Efecto hover limpio */

.close-recursos:hover {
    transform: rotate(90deg);
    color: #ff8560 !important;
    /* Tu color naranja */
    background: transparent !important;
    /* Aseguramos que no salga fondo al hover */
}

.bio-text-content {
    position: relative;
    z-index: 2;
    padding: 100px 0;
}


/* Estilo para los logos de streaming dentro del panel */

.logo-container-row {
    margin-top: 80px;
}

.img-logo-line {
    height: 60px;
    /* Tamaño ideal para que se vean uniformes */
    width: auto;
    filter: brightness(0) invert(1);
    /* Los vuelve blancos */
    transition: all 0.3s ease;
    margin: 20px;
}

.img-logo-line:hover {
    transform: scale(1.1);
    opacity: 0.8;
}


/* Títulos internos del panel */

.streaming-title {
    font-family: 'fenwick', sans-serif;
    letter-spacing: 3px;
    margin-top: 2rem;
    color: #fff;
}

.cta-text {
    font-size: 0.8rem;
    color: #ff8560;
    /* Tu color naranja/peach */
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 767px) {
    .bio-text-content h1 {
        font-size: 2.5rem !important;
        /* Título más manejable en móvil */
    }
    .img-logo-line {
        height: 35px;
        /* Logos un poco más pequeños en móvil para que quepan en fila */
        margin: 10px;
        /* Reducimos el margen en móvil para ganar espacio */
    }
    .bio-text-content {
        padding: 100px 20px 40px;
        /* Más espacio arriba para no chocar con la X */
    }
}


/* Contenedor del logo de cierre */

.bio-footer-logo {
    margin-top: 30px;
    /* Espacio considerable respecto a los logos de streaming */
    padding-top: 80px;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    /* Línea divisoria muy tenue */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Estilo único para la imagen del logo */

.footer-brand-img {
    height: 70px;
    /* Ajusta según el diseño de tu logo */
    width: auto;
    opacity: 0.8;
    /* Un poco menos intenso para que sea un cierre elegante */
    transition: all 0.5s ease;
    filter: brightness(1);
}

.footer-brand-img:hover {
    opacity: 1;
    transform: scale(1.05);
    /* Pulso suave al pasar el mouse */
}


/* Ajuste responsivo para móviles */

@media (max-width: 767px) {
    .bio-footer-logo {
        margin-top: 40px;
    }
    .footer-brand-img {
        height: 60px;
        /* Un poco más pequeño en celular */
    }
}


/* ========================================
   RESPONSIVE: TYPOGRAPHY
======================================== */


/* Tablet */

@media (max-width: 991px) {
    h1,
    .h1 {
        font-size: 3.5rem;
        /* Reducido de 5.725rem */
    }
    h2,
    .h2 {
        font-size: 2rem;
        /* Reducido de 2.7rem */
    }
    h3,
    .h3 {
        font-size: 1.5rem;
        /* Reducido de 1.925rem */
    }
}


/* Mobile */

@media (max-width: 767px) {
    h1,
    .h1 {
        font-size: 2.5rem;
        /* ~40px */
        line-height: 1.2;
    }
    h2,
    .h2 {
        font-size: 1.75rem;
        /* ~28px */
    }
    h3,
    .h3 {
        font-size: 1.25rem;
        /* ~20px */
    }
    h4,
    .h4 {
        font-size: 1.125rem;
    }
    body {
        font-size: 0.9375rem;
        /* ~15px */
    }
    .lead {
        font-size: 1rem;
    }
    /* Footer responsive */
    .footer-social-links .social-icons-list {
        gap: 15px;
    }
    .social-svg {
        width: 28px;
    }
    .copy {
        font-size: 0.65rem;
        padding: 0 1rem;
        line-height: 1.5;
    }
    .navbar-nav-mobile {
        font-size: 1.8rem;
        /* Más pequeño en móvil */
        height: calc(100% - 6rem);
        /* Ajuste para móvil */
        padding: 3rem 0;
    }
}


/* ← CIERRA AQUÍ el media query de 767px */


/* Mobile pequeño */

@media (max-width: 480px) {
    h1,
    .h1 {
        font-size: 2rem;
        /* ~32px */
    }
    h2,
    .h2 {
        font-size: 1.5rem;
        /* ~24px */
    }
    /* Footer mobile pequeño */
    .footer-social-links .social-icons-list {
        gap: 12px;
    }
    .social-svg {
        width: 26px;
    }
    .copy {
        font-size: 0.6rem;
    }
}


/* ← CIERRA AQUÍ el media query de 480px */


/* ========================================
   RESPONSIVE: SPACING & SECTIONS
======================================== */


/* Tablet */

@media (max-width: 991px) {
    .section,
    .pp-section {
        padding: 6rem 0 4rem;
        /* Reducido de 8rem/9rem */
    }
    .pp-scrollable .scroll-wrap {
        padding: 6rem 0 4rem;
        /* Reducido de 8rem */
    }
    .masthead {
        padding: 7rem 0 4rem 0;
        /* Reducido de 9rem */
    }
    .section-sm {
        padding: 4rem 0;
        /* Reducido de 6rem */
    }
}


/* Mobile */

@media (max-width: 767px) {
    .section,
    .pp-section {
        padding: 4rem 0 3rem;
        /* Más pequeño para móvil */
    }
    .pp-scrollable .scroll-wrap {
        padding: 4rem 0 3rem;
    }
    .masthead {
        padding: 5rem 0 3rem 0;
    }
    .section-sm {
        padding: 3rem 0;
    }
    /* Navbar ajustes */
    .navbar {
        height: 4rem;
        /* Reducido de 4.7rem */
        padding: 0 1rem;
        /* Reducido de 1.5rem */
    }
    .navbar-brand {
        font-size: 1.5rem;
        /* Reducido de 1.875rem */
    }
    .navbar-bottom {
        padding: 0 1rem 2rem 1rem;
        /* Reducido de 3rem */
    }
    /* Progress nav más cerca del borde */
    .progress-nav {
        right: 1rem;
        /* Reducido de 1.5rem */
    }
    /* Line después de h1 */
    h1+.line {
        margin-top: 8vh;
        /* Reducido de 15vh */
        width: 35%;
        /* Aumentado de 25% */
    }
}


/* Mobile pequeño */

@media (max-width: 480px) {
    .section,
    .pp-section {
        padding: 3rem 0 2rem;
    }
    .pp-scrollable .scroll-wrap {
        padding: 3rem 0 2rem;
    }
    .masthead {
        padding: 4rem 0 2rem 0;
    }
    .navbar {
        padding: 0 0.75rem;
    }
    .navbar-brand {
        font-size: 1.25rem;
    }
    h1+.line {
        margin-top: 5vh;
        width: 50%;
    }
    .progress-nav {
        right: 0.5rem;
    }
}


/* ========================================
   RESPONSIVE: BUTTONS, FORMS & INTERACTIVE
======================================== */


/* Tablet */

@media (max-width: 991px) {
    .btn {
        padding: 0.9em 2em;
        font-size: 0.8125rem;
        /* Ligeramente más pequeño */
    }
    ion-icon {
        font-size: 3rem;
        /* Reducido de 3.8rem */
    }
    .icon-play {
        width: 4.5rem;
        /* Reducido de 5.15rem */
        height: 4.5rem;
    }
}


/* Mobile */

@media (max-width: 767px) {
    .btn {
        padding: 0.85em 1.8em;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        /* Reducido de 0.15em */
    }
    /* Formularios más táctiles */
    .form-control,
    textarea.form-control {
        font-size: 1rem;
        /* 16px mínimo para evitar zoom en iOS */
        height: 3.5em;
        padding-left: 18px;
    }
    textarea.form-control {
        height: 7em;
    }
    .form-group {
        margin-bottom: 1.5rem;
        /* Reducido de 2rem */
    }
    /* Iconos ajustados */
    ion-icon {
        font-size: 2.5rem;
    }
    .icon-play {
        width: 4rem;
        height: 4rem;
    }
    /* Social icons más pequeños */
    .social-icons ion-icon {
        font-size: 1rem;
        /* Reducido de 1.2rem */
    }
    .social-icons li {
        margin-right: 1rem;
        /* Reducido de 1.5rem */
    }
    /* Toggler más visible */
    .toggler {
        width: 2.5rem;
        height: 2.5rem;
    }
    .toggler-icon {
        margin-top: 0.4rem;
    }
}


/* Mobile pequeño */

@media (max-width: 480px) {
    .btn {
        padding: 0.8em 1.5em;
        font-size: 0.7rem;
        width: 100%;
        /* Botones full-width en móvil pequeño */
        display: block;
    }
    .form-control,
    textarea.form-control {
        padding-left: 15px;
    }
    .icon-play {
        width: 3.5rem;
        height: 3.5rem;
    }
    ion-icon {
        font-size: 2rem;
    }
}


/* Fix para touch devices - áreas táctiles mínimas */

@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .social-icons a,
    .toggler {
        min-height: 44px;
        /* Estándar iOS/Android */
        min-width: 44px;
    }
}


/* ========================================
   RESPONSIVE: GRID, music & FINAL ADJUSTMENTS
======================================== */


/* Tablet */

@media (max-width: 991px) {
    /* Grid de music/Projects */
    .music-row .col-lg-4 {
        margin-top: 3rem;
    }
    .music-row .col-lg-4:first-child {
        margin-top: 0;
    }
    /* Read more visible en mobile (no requiere hover) */
    .read-more {
        opacity: 1;
        transform: translateY(0);
    }
    /* Navbar email oculto en tablet */
    .navbar-desctop .email {
        margin-right: 2rem;
    }
}


/* Mobile */

@media (max-width: 767px) {
    /* music/Projects en columna única */
    .music-row .col-lg-4 {
        margin-top: 2.5rem !important;
    }
    .music-row .col-lg-4:first-child {
        margin-top: 0 !important;
    }
    /* Ajustes de figcaption */
    .music-row figcaption h4 {
        margin-top: 1.5rem;
        font-size: 1.25rem;
    }
    .music-row figcaption p {
        font-size: 0.8rem;
    }
    /* Imágenes responsivas */
    img {
        max-width: 100%;
        height: auto;
    }
    /* Contact section ajustes */
    .contact-description {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    #contact .col-md-5 {
        margin-top: 3rem;
    }
    #contact .row.mt-5 {
        margin-top: 3rem !important;
    }
    /* Navbar bottom ajustes */
    .navbar-bottom .social {
        float: none;
        text-align: center;
    }
    .navbar-bottom .copy {
        float: none;
        text-align: center;
        margin-top: 1rem;
    }
}


/* Mobile pequeño */

@media (max-width: 480px) {
    .music-row .col-lg-4 {
        margin-top: 2rem !important;
    }
    .music-row figcaption h4 {
        font-size: 1.125rem;
    }
    #contact h3 {
        font-size: 1.25rem;
    }
    .social-svg {
        width: 28px;
        height: 28px;
    }
    .copy {
        font-size: 0.7rem;
        line-height: 1.4;
    }
}


/* Landscape mobile fix */

@media (max-width: 767px) and (orientation: landscape) {
    .pp-scrollable .scroll-wrap {
        padding: 2rem 0;
    }
    h1+.line {
        margin-top: 3vh;
    }
    .masthead {
        padding: 3rem 0 2rem 0;
    }
}


/* Mejoras generales touch */

@media (hover: none) {
    /* Remover efectos hover en dispositivos táctiles */
    .music-row .image-link:hover img {
        transform: none;
    }
    .icon-play:hover {
        border: 1px solid #fff;
        background-color: transparent;
    }
    .icon-play:hover:before {
        border-color: transparent transparent transparent #fff;
    }
}


/* ========================================
   LOGOS DINÁMICOS
======================================== */

.navbar-brand {
    display: inline-block;
    line-height: 1;
}

.logo-white,
.logo-black {
    height: 60px;
    /* ← REDUCIDO para que quepa (era 60px) */
    width: auto;
    transition: opacity 0.3s ease;
    display: block;
    max-height: 100%;
    /* ← No se sale del navbar */
}


/* Por defecto: Logo BLANCO (Home y Contact) */

.logo-white {
    display: block;
}

.logo-black {
    display: none;
}


/* Cuando navbar es blanco (music) - Logo NEGRO */

.navbar-white .logo-white {
    display: none;
}

.navbar-white .logo-black {
    display: block;
}


/* Responsive */

@media (max-width: 767px) {
    .logo-white,
    .logo-black {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .logo-white,
    .logo-black {
        height: 28px;
    }
    /* ========================================
   FIX: Contact estático (sin movimiento)
======================================== */
    #contact.pp-scrollable .intro {
        white-space: normal;
        /* ← Permite texto normal */
    }
    #contact.pp-scrollable .intro:before {
        display: none !important;
        /* ← ELIMINA el pseudo-elemento problemático */
    }
    #contact.pp-scrollable .scroll-wrap {
        display: block !important;
        /* ← CAMBIA de inline-block a block */
        vertical-align: baseline !important;
        /* ← Resetea vertical-align */
        position: static !important;
        /* ← Elimina position relative */
    }
    #contact .intro {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Forzar contenedor estable */
    #contact {
        position: relative;
        overflow: hidden;
    }
    #contact .container {
        position: relative;
        z-index: 1;
    }
}


/* ========================================
   RESPONSIVE: MENÚ MÓVIL ESPACIADO
======================================== */


/* Tablets y pantallas medianas */

@media (max-width: 991px) and (min-width: 768px) {
    .navbar-nav-mobile li:nth-child(1) {
        margin-bottom: 5rem;
        /* Era 6rem */
    }
    .navbar-nav-mobile li:nth-child(2) {
        margin-top: 4rem;
        /* Era 5rem */
        margin-bottom: 4rem;
        /* Era 5rem */
    }
    .navbar-nav-mobile li:nth-child(3) {
        margin-top: 6.5rem;
        /* Era 8rem */
    }
}


/* Móviles normales (768px - 481px) */

@media (max-width: 767px) and (min-width: 481px) {
    .navbar-nav-mobile {
        font-size: 1.9rem;
        /* Reducir texto */
    }
    .navbar-nav-mobile li:nth-child(1) {
        margin-bottom: 4rem;
        /* Era 6rem */
    }
    .navbar-nav-mobile li:nth-child(2) {
        margin-top: 3rem;
        /* Era 5rem */
        margin-bottom: 3rem;
        /* Era 5rem */
    }
    .navbar-nav-mobile li:nth-child(3) {
        margin-top: 5rem;
        /* Era 8rem */
    }
}


/* Móviles pequeños (480px o menos) */

@media (max-width: 480px) {
    .navbar-nav-mobile {
        font-size: 1.6rem;
        /* Más pequeño */
    }
    .navbar-nav-mobile li:nth-child(1) {
        margin-bottom: 3rem;
        /* Era 6rem */
    }
    .navbar-nav-mobile li:nth-child(2) {
        margin-top: 2.5rem;
        /* Era 5rem */
        margin-bottom: 2.5rem;
        /* Era 5rem */
    }
    .navbar-nav-mobile li:nth-child(3) {
        margin-top: 4rem;
        /* Era 8rem */
    }
}


/* Landscape móvil (orientación horizontal) */

@media (max-height: 500px) and (orientation: landscape) {
    .navbar-nav-mobile {
        font-size: 1.4rem;
        /* Muy compacto */
    }
    .navbar-nav-mobile li:nth-child(1) {
        margin-bottom: 2.5rem;
        /* Era 6rem */
    }
    .navbar-nav-mobile li:nth-child(2) {
        margin-top: 2rem;
        /* Era 5rem */
        margin-bottom: 2rem;
        /* Era 5rem */
    }
    .navbar-nav-mobile li:nth-child(3) {
        margin-top: 3rem;
        /* Era 8rem */
    }
}


/* ==========================================================================
   REFLEJO ETERNO - SECCIÓN music (ESTILO UNIFICADO FINAL)
   ========================================================================== */


/* 1. ESTRUCTURA DE COLUMNAS (LÓGICA PROJECTS EN music) */

#music .row.align-items-start {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
}

#music .row.align-items-stretch {
    display: flex !important;
    align-items: center !important;
    /* Centra el cover verticalmente con la lista */
    flex-wrap: nowrap !important;
    width: 100%;
}


/* Contenedor de las listas de canciones */

.song-grid-container {
    padding: 0 5px;
}


/* 2. TARJETAS DE CANCIONES (ESTILO CON MOVIMIENTO) */

.song-card-v2 {
    display: flex;
    justify-content: space-between;
    /* Distribuye info a la izq y botones a la der */
    align-items: center;
    padding: 2px 10px !important;
    /* Reducido de 12px a 8px */
    border-bottom: 0px solid rgba(0, 0, 0, 0.08) !important;
    transition: background 0.3s ease;
    /* Solo transiciona el color de fondo */
    cursor: default;
    width: 100%;
}

.song-card-v2:hover {
    background: rgba(255, 171, 145, 0.04);
    padding-left: 0px !important;
    /* Mantiene el mismo padding, ELIMINA el movimiento */
}

.song-num {
    font-family: "fenwick", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: #000 !important;
    margin-right: 15px;
    margin-bottom: 0;
    text-transform: uppercase;
    /* --- AGREGA ESTO --- */
    line-height: 1;
    /* Esto quita el espacio fantasma arriba del número */
    display: inline-flex;
    align-items: center;
}

.song-name {
    font-family: "fenwick", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.9rem;
    letter-spacing: 2px;
    line-height: 1;
    color: #000 !important;
    /* Ligeramente más pequeña para compactar */
    text-transform: uppercase;
}

.song-meta {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.6;
    display: block;
}


/* 3. BOTÓN AÑADIR (TU ESTILO + EXPANSIÓN) */

.btn-add-list {
    font-family: 'fenwick', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.5;
    background-color: #ffffff00 !important;
    /* Tu Naranja */
    border: 1px solid #000000 !important;
    border-radius: 30px;
    color: #000 !important;
    padding: 6px 30px !important;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    text-decoration: none !important;
    margin-left: 10px;
}

.btn-add-list span {
    transition: transform 0.4s ease;
}

.btn-add-list ion-icon {
    font-family: 'fenwick', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    position: absolute;
    right: -25px;
    opacity: 0;
    transition: 0.3s;
}

.btn-add-list:hover {
    font-family: 'fenwick', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    background-color: #000000 !important;
    /* Tu Negro de hover */
    border-color: #000000 !important;
    padding-right: 60px !important;
    /* Expansión */
}

.btn-add-list:hover span {
    transform: translateX(-4px);
}

.btn-add-list:hover ion-icon {
    right: 10px;
    opacity: 1;
    color: #ffffff;
}


/* 4. REPRODUCTOR FLOTANTE GLASSMORPHISM (ACTIVA TU JS) */

#arena-player {
    position: fixed !important;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    color: #000000 !important;
    cursor: grab;
    /* Indica que se puede mover */
}


/* 4. Forzar que los SVGs del reproductor sean negros */

#arena-player .btn-ctrl svg {
    fill: #000000 !important;
    width: 18px;
    height: 18px;
}

#arena-player.hidden {
    display: none !important;
    opacity: 0;
    transform: translate(-50%, 40px);
}

#mini-player-title {
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    fill: #000000 !important;
    color: #000000 !important;
    /* Texto oscuro para que lea bien sobre el glass */
    margin-bottom: 15px;
}

.arena-progress-line {
    height: 100%;
    background: #000000 !important;
    /* Negro puro */
    width: 0%;
    /* El JS que ya tienes cambiará esto de 0 a 100% */
    border-radius: 2px;
    transition: width 0.1s linear;
    /* Movimiento fluido */
}


/* Botón de cerrar (X) en negro */

.close-arena {
    color: #000000 !important;
    background: transparent;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}


/* 6. ELIMINAR ELEMENTOS VIEJOS */

.play-overlay,
.btn-recursos,
.btn-descargar {
    display: none !important;
}


/* --- BOTONES DE CONTROL (PLAY, PAUSE, STOP) --- */

.btn-ctrl {
    background: transparent !important;
    /* Quita el fondo */
    border: none !important;
    /* Quita el delineado cuadrado */
    padding: 5px !important;
    /* Espacio mínimo */
    margin: 0 5px;
    box-shadow: none !important;
    /* Quita cualquier sombra */
    outline: none !important;
}

.btn-ctrl svg {
    fill: #000000 !important;
    /* Cambia el color del icono a Negro */
    width: 20px;
    /* Ajuste de tamaño opcional */
    height: 20px;
    display: block;
    /* Les da cuerpo para que sean visibles */
    margin: 0 auto;
    transition: transform 0.2s ease;
}

.btn-ctrl:hover svg {
    transform: scale(1.1);
    /* Efecto visual sutil al pasar el mouse */
    fill: #ff8560 !important;
    /* Opcional: El icono se vuelve dorado al hover */
}


/* Forzamos que si el botón está visible, sea flex para que el icono se vea y se centre */

.btn-ctrl[style*="display: block"],
.btn-ctrl[style*="display: inline-block"],
.btn-ctrl:not([style*="display: none"]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}


/* Esto asegura que cuando JS haga .show(), el botón se comporte como un contenedor flexible */

.btn-pause-song,
.btn-stop-song {
    display: none;
    /* El JS cambiará esto a "inline-flex" automáticamente si lo definimos bien */
}


/* Columna de Canciones */

#music .col-md-7 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
    padding-right: 20px;
}


/* Columna del Cover */

#music .col-md-5 {
    flex: 0 0 35% !important;
    max-width: 35% !important;
}


/* FORZAR COVER CUADRADO REAL */

.cover-main {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    /* Mágicamente lo hace cuadrado */
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background-color: #000;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.cover-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Llena el cuadrado sin estirarse */
    display: block;
}


/* --- AJUSTES RESPONSIVOS --- */

@media (max-width: 767px) {
    #music .row.align-items-stretch {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        /* Esto mantiene el cover arriba y la lista abajo */
        /* Cover arriba, lista abajo */
    }
    /* Columna del Cover (A la izquierda, más estrecha) */
    #music .col-md-5 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Columna de Canciones (A la derecha, más ancha) */
    #music .col-md-7 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        padding-left: 30px;
        /* Espacio entre el cover y la lista */
    }
    #music .col-md-7,
    #music .col-md-5,
    #music .col-lg-8,
    #music .col-lg-4 {
        flex: 0 0 100% !important;
        /* Ocupan todo el ancho en móvil */
        max-width: 100% !important;
        padding-right: 0;
    }
    .cover-main {
        width: 80% !important;
        /* No tan gigante en móvil */
        margin: 0 auto 30px auto;
    }
    .song-name {
        font-size: 0.8rem;
        /* Texto un poco más pequeño en móvil */
    }
    .btn-add-list {
        padding: 6px 15px !important;
        /* Botón más compacto en móvil */
    }
}

@media (min-width: 768px) {
    #music .row.align-items-stretch {
        flex-wrap: nowrap !important;
        /* En escritorio se quedan pegados */
    }
}


/* --- BLOQUE ESTRATÉGICO SECCIÓN music --- */

#music-cta-block {
    display: block;
    width: 100%;
    text-align: center;
    /* Espacio para que el Nav Bar no lo tape */
    margin-top: 100px !important;
    margin-bottom: 50px !important;
    padding: 0 15px;
    z-index: 10;
}

#music-cta-block h2 {
    margin-top: 0;
    margin-bottom: 15px;
    /* Hereda tu 'fenwick' y 2.7rem del CSS global */
}

#music-cta-block p.lead {
    max-width: 750px;
    margin: 0 auto;
    color: #000;
    opacity: 0.7;
    line-height: 1.6;
    /* Hereda tu 1.125rem del CSS global */
}


/* Color dorado específico para resaltar las acciones en el texto */

#music-cta-block p.lead strong {
    color: #000000;
    font-weight: 700;
}


/* --- AJUSTE RESPONSIVO --- */

@media (max-width: 768px) {
    #music-cta-block {
        margin-top: 80px !important;
        margin-bottom: 30px !important;
    }
    #music-cta-block h2 {
        font-size: 2rem;
        /* Un poco más pequeño en móviles */
    }
}


/* EL CONTENEDOR DE LA BARRA (La pista gris clarito) */

.arena-progress-bar {
    width: 100%;
    flex-grow: 1;
    /* Esto hace que la barra se estire y ocupe todo el ancho restante */
    height: 4px;
    /* Grosor de la línea */
    background: rgba(0, 0, 0, 0.1) !important;
    /* Fondo suave para ver el camino */
    border-radius: 2px;
    margin: 15px 0;
    /* Espacio arriba y abajo de la línea */
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


/* ICONOS DE CONTROL (Play, Pause, Stop) en Negro */


/* 1. Contenedor de los botones y la barra */

.player-controls-row {
    display: flex;
    align-items: center;
    /* Alinea botones y barra en la misma línea */
    gap: 15px;
    /* Espacio entre botones y el inicio de la barra */
    margin-top: 15px;
    width: 100%;
}

.player-controls-row i {
    color: #000000 !important;
    font-size: 1.2rem;
    margin: 0 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.player-controls-row i:hover {
    transform: scale(1.2);
    color: #ff8560 !important;
    /* Dorado sutil al pasar el mouse */
}


/* ========================================
   FIX ESPECÍFICO PARA CONTACTO
   ======================================== */


/* Forzar títulos blancos en Contacto */

#contact h2,
#contact .h2,
#contact h3,
#contact .h3 {
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important;
}


/* Forzar párrafos y descripción en blanco */

#contact p,
#contact .contact-description {
    font-family: 'fenwick light', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #ffffff !important;
    opacity: 0.9;
    /* Para que sea legible pero suave */
}


/* El copyright del footer también en blanco */

#contact .copy {
    font-family: 'fenwick light', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    color: #ffffff !important;
    opacity: 100;
}


/* --- ESTILO DE LA LÍNEA DECORATIVA --- */

#contact .line.mb-4 {
    width: 50px;
    /* Ancho de la línea */
    height: 2px;
    /* Grosor fino */
    background-color: #ff8560 !important;
    /* Blanco puro */
    margin-top: 15px;
    /* Espacio con el título */
    margin-bottom: 30px !important;
    /* Espacio con el párrafo */
    border: none;
    display: block;
}


/* --- ESTILO PARA EL EMAIL --- */

#contact .text-primary.mt-3 {
    display: inline-block;
    font-family: 'fenwick', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    color: #ffffff !important;
    /* Cambiado de naranja a Blanco para legibilidad */
    text-decoration: none;
    /* Subrayado sutil */
    padding-bottom: 5px;
    transition: all 0.3s ease;
    margin-top: 25px !important;
}

#contact .text-primary.mt-3:hover {
    color: #ff8560 !important;
    /* Al pasar el mouse se vuelve tu color naranja/peach */
    transform: translateY(-2px);
    /* Pequeño levante visual */
}


/* ========================================
   BLOQUEO GLOBAL DE COPIA Y ARRASTRE
======================================== */


/* Bloquea la selección de texto en TODA la página */

html,
body,
section,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {
    -webkit-user-select: none !important;
    /* Safari */
    -moz-user-select: none !important;
    /* Firefox */
    -ms-user-select: none !important;
    /* IE10+/Edge */
    user-select: none !important;
    /* Estándar */
    -webkit-touch-callout: none !important;
    /* Desactiva el menú "Guardar imagen" en iOS/Android */
}


/* Bloquea el arrastre de imágenes (Evita que las lleven al escritorio) */

img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    pointer-events: none !important;
    /* Hace que la imagen sea "invisible" al click derecho */
}


/* EXCEPCIONES DE BLOQUEO: Elementos que SÍ deben funcionar */

#contact input,
#contact textarea,
.form-control,
.navbar-language,

/* <--- EXCEPCIÓN PARA IDIOMAS */

.navbar-language a {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
    /* Permite clics */
    cursor: pointer !important;
    /* Asegura que salga la mano del ratón */
}