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

/* 1. DECLARACIÓN DE FUENTES Y PALETA DE COLORES                             */

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



/* Cargar tu fuente personalizada en formato web optimizado */

@font-face {

    font-family: 'DrukWide';

    src: url('fonts/DRUKWIDE-MEDIUM.woff2') format('woff2');

    font-weight: 500; 

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'DrukWide';

    src: url('fonts/DRUKWIDE-BOLD.woff2') format('woff2');

    font-weight: 500; 

    font-style: bold;

    font-display: swap;

}

@font-face {

    font-family: "Druk";

    src: url("fonts/DRUK-BOLD.woff2") format("woff2");

    font-weight: 500; 

    font-style: bold;

    font-display: swap;

}

@font-face {

    font-family: "Druk";

    src: url("fonts/DRUK-MEDIUM.woff2") format("woff2");

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: "DrukText";

    src: url("fonts/DrukText-Medium.woff2") format("woff2");

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}



/* --- FUENTES DE RESERVA (FALLBACKS) --- */

/* Modifican el tamaño de fuentes del sistema para imitar a Druk mientras carga */

@font-face {

    font-family: 'DrukWideFallback';

    src: local('Arial Black');

    size-adjust: 110%;

}

@font-face {

    font-family: 'DrukFallback';

    src: local('Impact');

    size-adjust: 105%;

}



/* Añade esto a tu hoja de estilos */

body {

    -webkit-font-smoothing: antialiased; /* Para macOS */

    -moz-osx-font-smoothing: grayscale;  /* Para Firefox en macOS */

    text-rendering: optimizeLegibility;  /* Mejora el renderizado general */

}



/* Opcional: Si el problema persiste en elementos específicos */

.letters {

    -webkit-font-smoothing: subpixel-antialiased;

}



/* --- PALETA MODO CLARO (Valores por defecto) --- */

:root {

    /* BASE */

    --color-bg-main: #e1e1f0; 

    --color-text-main: #2a2a2b;

    --color-line-main: #000000;

    

    /* ENLACES */

    --color-link: #3434f7;

    --color-link-hover: #8d8ff7;



    /* FORMULARIO */

    --color-form-bg: #FFFFFF;

    --color-form-text: #2a2a2b;

    --color-form-border: #ccc;

    --color-button-bg: #222222; 

    --color-button-text: #FFFFFF;

    

    /* MENSAJES */

    --color-success: green;

    --color-error: red;

}



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

/* 2. ESTILOS BASE Y GENERALES (APLICACIÓN DE VARIABLES)                     */

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



main p { font-family: "DrukWide", "DrukWideFallback", sans-serif; }



body {

    background-color: var(--color-bg-main) !important;

    color: var(--color-text-main) !important;

    text-align: center;

    font-family: 'DrukWide', 'DrukWideFallback', sans-serif;

    overflow-y: scroll;  

}



/* Logo */

.logo { 

    font-family: "Druk", "DrukFallback", sans-serif;

    font-size: 7rem;

    font-weight: 500;

    line-height: 0.8;

    margin-bottom: 0.2em;

    margin-top: 0.2em;

}



.logo-link {

    text-decoration: none;

    display: inline-block;

    color: var(--color-text-main) !important; 

}



.logo-link:hover {

    color: var(--color-text-main) !important; 

    text-decoration: none;

}



/* Estilos de Enlaces */

a {

    color: var(--color-link) !important; 

    text-decoration: none;

}

a:hover {

    color: var(--color-link-hover) !important; 

}



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

/* ESTILO DE FOOTER REVISADO (Iconos y Contenido)                            */

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



/* Línea Divisoria de header y footer */

.site-header {

    border-bottom: 1px solid var(--color-line-main) !important; 

    margin-bottom: 0px !important; 

    padding-bottom: 15px !important; 

}

.site-footer {

    border-top: 1px solid var(--color-line-main) !important;

}



.footer-texto {

    text-align: center; 

    font-family: inherit;

    font-size: 0.9em; 

}



/* 1. Estilo Básico: Aplicamos el estilo neutro al enlace */

.footer-texto .enlace-neutro {

    color: inherit !important; 

    text-decoration: none !important;

}



/* 2. Estados Especiales: ANULAMOS el cambio de color en todos los estados */

.footer-texto .enlace-neutro:hover,

.footer-texto .enlace-neutro:active,

.footer-texto .enlace-neutro:visited,

.footer-texto .enlace-neutro:link {

    color: inherit !important; 

    text-decoration: none !important; 

}



.footer-contenido {

    text-align: center;

    padding: 30px 0; 

}



/* Contenedor de Iconos */

.iconos-redes {

    display: flex; 

    justify-content: center; 

    align-items: center; 

    margin-bottom: 15px; 

}



/* Estilo de los Enlaces de Iconos */

.icono-enlace {

    font-size: 20px; 

    color: #333; 

    margin: 0 10px; 

    text-decoration: none; 

    transition: color 0.3s ease; 

}

.icono-enlace:hover {

    color: #000; 

}



/* Estilo para el enlace legal (ej. Política de Privacidad) */

.footer-legal {

    margin-top: 10px;

}

.footer-legal a {

    color: #555; 

    text-decoration: none;

    font-size: 0.85em;

}



/* Otros estilos estructurados */

main { margin-top: 15px !important; }

ul, ol { margin-left: 0; max-width: 100%; box-sizing: border-box; }

ul li, ol li { margin-bottom: 0.8rem; }

.gig-list { list-style-type: square; text-align: left; font-family: "DrukText", Arial, sans-serif; font-size: 1.3em;}

.container { max-width: 900px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }

.imagen-responsiva { max-width: 100%; height: auto; }

iframe { width: 100%; min-height: 600px; border: none; }

.contenedor-blog { max-width: 100%; margin: 0 auto; padding: 0px 0; }



@media (max-width: 600px) {

    .logo { font-size: 5rem; line-height: 1; }

}



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

/* 3. ESTILOS DE BIOGRAFÍA                                                   */

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



.parrafo-sans {

    font-family: sans-serif;

    text-align: left;

}

.parrafo-medium {

    font-family: "DrukText", Arial, sans-serif;

    text-align: center;

    font-size: 1.6em;

}



.bloque-foto-texto {

    display: flex; 

    gap: 30px; 

    align-items: flex-start; 

}

.texto-izquierda {

    flex-basis: 85%; 

}

.imagen-derecha {

    flex-basis: 15%; 

    flex-shrink: 0; 

}

.foto-perfil {

    width: 100px !important; 

    height: auto; 

    display: block; 

}



/* Playlist insertada */

.spotify-contenedor {

    width: 60%;

    margin: 0 auto;

}

.spotify-contenedor iframe {

    width: 100%;

    display: block;

    height: 152px !important; 

}



@media screen and (max-width: 600px) {

    .spotify-contenedor { width: 90%; }

}



/* ESTRUCTURA FLEXBOX: FOTO A LA IZQUIERDA */

.bloque-foto-texto-invertido {

    display: flex; 

    gap: 50px; 

    align-items: flex-start; 

    max-width: 1000px; 

    margin: 50px auto;

    margin-bottom: 0px;

}

.imagen-izquierda {

    flex-basis: 50%; 

    flex-shrink: 0; 

}

.texto-derecha {

    flex-basis: 50%;

}

.foto-principal {

    max-width: 100%;

    height: auto;

    display: block; 

}

.texto-derecha h2 {

    font-weight: bold;

    font-size: 2em; 

    margin-top: 0; 

}



/* RESPONSIVE: PILAS EN MÓVILES */

@media screen and (max-width: 600px) {

    .bloque-foto-texto-invertido {

        flex-direction: column; 

        gap: 30px;

        padding: 0 15px; 

    }

    .imagen-izquierda,

    .texto-derecha {

        flex-basis: 100%;

        width: 100%; 

    }

    .imagen-izquierda .foto-principal {

        width: 100%;

        max-width: 100%;

    }

}



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

/* 4. ESTILOS DEL FORMULARIO MAILCHIMP                                       */

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



#mc_embed_signup {

    background: transparent !important;

    max-width: 100% !important;

    padding: 0 !important;

    color: var(--color-text-main) !important; 

    font-family: 'DrukText', Arial, sans-serif !important; 

    font-size: 1.3em !important;

}



#mc_embed_signup input[type="text"], 

#mc_embed_signup input[type="email"],

#mc_embed_signup input[type="number"],

#mc_embed_signup input[type="url"],

#mc_embed_signup input[type="tel"],

#mc_embed_signup select {

    width: 100% !important;

    padding: 0.75rem 1rem !important;

    border-radius: 0.5rem !important;

    margin-bottom: 0.3rem !important;

    box-sizing: border-box !important;

    font-family: sans-serif !important; 

    background: var(--color-form-bg) !important; 

    color: var(--color-form-text) !important;

    border: 1px solid var(--color-form-border) !important;

}



#mc_embed_signup input[type="submit"], #mc-embedded-subscribe {

    background: var(--color-button-bg) !important; 

    color: var(--color-button-text) !important;

    border: none !important;

    font-family: 'DrukText', Arial, sans-serif !important; 

    font-size: 1em !important;

    border-radius: 0.5rem !important;

    cursor: pointer;

    text-transform: none !important; 

    line-height: normal !important; 

}



#mce-success-response,

.mce_inline_error,

#mce-error-response {

    order: 10 !important; 

    margin-top: 5px !important; 

    margin-bottom: 5px !important;

}



#mce-success-response {

    display: inline-block !important; 

    width: auto !important; 

    max-width: 100% !important; 

    white-space: normal !important; 

    word-break: normal !important; 

    color: var(--color-success) !important;

    background-color: transparent !important;

    border: none !important; 

    padding: 0 !important; 

    margin: 0 !important; 

    height: auto !important;

    overflow: hidden !important;

}



.mce_inline_error, #mce-error-response {

    background-color: transparent !important;

    color: var(--color-error) !important;

}

#mce-success-response p, #mce-success-response span {

    color: var(--color-success) !important;

}



.aviso-legal-rgpd label {

    font-family: sans-serif; 

    color: inherit;

}

.aviso-legal-rgpd a {

    color: #555555; 

}

.aviso-legal-rgpd ul {

    list-style: none; 

    padding: 0;

    margin: 0;

}

.aviso-legal-rgpd ul li {

    display: flex; 

    align-items: flex-start;

}

.aviso-legal-rgpd input[type="checkbox"] {

    flex-shrink: 0; 

    margin-top: 2px; 

    margin-right: 8px; 

}



/* Formato de contacto estirado */

.contact-container {

    margin: 0;             

    padding: 0;

    text-align: center;    

    width: 100%;

    overflow: hidden;      

}

.contact, a.contact, h2.contact {

    display: block !important;

    width: 100% !important;

    max-width: 100vw !important; 

    white-space: nowrap !important; 

    overflow: hidden !important; 

    text-align: center !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding: 0 5px !important; 

    box-sizing: border-box !important;

    font-size: 4vw !important; 

}



@media screen and (min-width: 768px) {

    .contact, a.contact, h2.contact { font-size: 22px !important; }

}



/* POLÍTICA DE PRIVACIDAD */

.politica-privacidad-contenedor {

    max-width: 70%; 

    margin-left: auto;

    margin-right: auto;

}



@media (max-width: 600px) {

    .politica-privacidad-contenedor { max-width: 90%; }

    .parrafo-sans td, .parrafo-sans th {

        padding: 4px !important; 

        font-size: 0.8em; 

    }

}



.politica-privacidad-contenedor h1,

.politica-privacidad-contenedor h2,

.politica-privacidad-contenedor h3,

.politica-privacidad-contenedor .parrafo-sans {

    text-align: left !important;

}

.politica-privacidad-contenedor h3 {

    margin-top: 10px;

    margin-bottom: 10px;

    font-size: 1.00em;

}

.politica-privacidad-contenedor h2 {

    font-size: 1.20em;

    margin-top: 10px;

    margin-bottom: 10px;

}



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

/* 5. REGLAS ESPECÍFICAS PARA MODO OSCURO                                    */

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



@media (prefers-color-scheme: dark) {

    :root {

        --color-bg-main: #121212; 

        --color-text-main: white; 

        --color-line-main: #FFFFFF; 

        --color-link: #8cafff; 

        --color-link-hover: #5682e0; 

        --color-form-bg: #333333; 

        --color-form-text: white; 

        --color-form-border: #444444; 

        --color-button-bg: #dddddd; 

        --color-button-text: #1a1a1a; 

        --color-success: #66ff66; 

        --color-error: #ff5555;

    }

    .logo-link { color: var(--color-text-main) !important; }

}



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

/* 6. LANDING PAGE DE LANZAMIENTO (ESTILO SMARTLINK)                         */

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



.contenedor-lanzamiento {

    max-width: 500px; 

    margin: 40px auto;

    padding: 0 10px;

    box-sizing: border-box;

}



/* 1. Limita el ancho máximo (la cajita pequeña) */

.video-limite-ancho {

    width: 100%;

    max-width: 300px; /* Aquí controlas el tamaño general de la caja */

    margin: 20px auto; /* Lo centra en la pantalla */

}



/* 2. Fuerza la proporción 16:9 basándose exclusivamente en el ancho anterior */

.video-proporcion-perfecta {

    position: relative;

    width: 100%;

    padding-bottom: 56.25%; /* Fórmula matemática inamovible para el 16:9 */

    height: 0;

    overflow: hidden;

    border: 1px solid var(--color-line-main) !important;

}



/* 3. El iframe rellena el contenedor sin poder estirarse hacia abajo */

.video-proporcion-perfecta iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100% !important;

    height: 100% !important;

    max-height: 100% !important;

    min-height: 0 !important; /* Aniquila definitivamente tu regla global de 600px */

    border: none;

    margin: 0;

    padding: 0;

}



/* Bloque central de información (Título y Estado) */

.info-lanzamiento {

    background-color: var(--color-button-bg); 

    color: var(--color-button-text);

    padding: 20px;

    border-top: 1px solid var(--color-line-main) !important;

    border-left: 1px solid var(--color-line-main) !important;

    border-right: 1px solid var(--color-line-main) !important;

    border-bottom: 1px solid var(--color-line-main) !important;

}

.titulo-cancion {

    font-family: 'DrukWide', 'DrukWideFallback', sans-serif;

    font-size: 1.8rem;

    margin: 0 0 10px 0;

    text-transform: uppercase;

    line-height: 1.1;

}

.estado-lanzamiento {

    font-family: 'DrukText', Arial, sans-serif;

    font-size: 1rem;

    margin: 0;

    letter-spacing: 0.05em;

}



/* Bloque inferior: Tabla de plataformas */

.lista-plataformas {

    background-color: var(--color-form-bg); 

    border-left: 1px solid var(--color-line-main) !important;

    border-right: 1px solid var(--color-line-main) !important;

}

.fila-plataforma {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

    border-bottom: 1px solid var(--color-line-main) !important; 

}

.nombre-plataforma {

    font-family: 'DrukWide', 'DrukWideFallback', sans-serif;

    font-size: 1.1rem;

    color: var(--color-form-text);

    text-transform: uppercase;

}



/* Botones de acción a la derecha */

.boton-plataforma {

    display: inline-block;

    font-family: 'DrukText', Arial, sans-serif;

    font-size: 0.9rem;

    padding: 8px 16px !important;

    border-radius: 0.3rem !important;

    border: 1px solid var(--color-line-main) !important;

    background-color: var(--color-bg-main) !important; 

    color: var(--color-text-main) !important;

    text-decoration: none !important;

    text-transform: uppercase;

    transition: background-color 0.2s ease, color 0.2s ease;

}

.boton-plataforma:hover {

    background-color: var(--color-button-bg) !important;

    color: var(--color-button-text) !important;

}



@media (max-width: 400px) {

    .titulo-cancion { font-size: 1.4rem; }

    .nombre-plataforma { font-size: 0.9rem; }

    .boton-plataforma { font-size: 0.8rem; padding: 6px 12px !important; }

}