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

/* Cargar tu fuente personalizada (sin cambios) */
@font-face {
    font-family: 'DrukWide';
    src: url('fonts/DRUKWIDE-MEDIUM.OTF') format('opentype');
    font-weight: 500; 
    font-style: normal;
}
@font-face {
    font-family: 'DrukWide';
    src: url('fonts/DRUKWIDE-BOLD.OTF') format('opentype');
    font-weight: 500; 
    font-style: bold;
}
@font-face {
    font-family: "Druk";
    src: url("/fonts/DRUK-BOLD.OTF") format("opentype");
    font-weight: 500; 
    font-style: bold;
}
@font-face {
    font-family: "Druk";
    src: url("/fonts/DRUK-MEDIUM.OTF") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "DrukText";
    src: url("/fonts/DrukText-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

/* --- PALETA MODO CLARO (Valores por defecto) --- */
:root {
    /* BASE */
    --color-bg-main: #f7f7ff; 
    --color-text-main: black;
    --color-line-main: #000000;
    
    /* ENLACES */
    --color-link: blue;
    --color-link-hover: #8d8ff7;

    /* FORMULARIO */
    --color-form-bg: #FFFFFF;
    --color-form-text: black;
    --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"; }

body {
    background-color: var(--color-bg-main) !important;
    color: var(--color-text-main) !important;
    text-align: center;
    font-family: 'DrukWide', sans-serif;
    overflow-y: scroll;  
}

/* Logo */
.logo { 
    font-family: "Druk";
    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;
    /* Añade algo de espacio (padding) entre la línea y el contenido del footer */
   /* padding-top: 7px !important;
    /* Asegura que haya espacio debajo del contenido del footer */
    /*padding-bottom: 7px !important; */
}


.footer-texto {
    text-align: center; 
    font-family: inherit;
    font-size: 0.9em; 
    /* Opcional: Si los párrafos son grises, definimos el color aquí */
    /* color: #555555; */ 
}

/* 1. Estilo Básico: Aplicamos el estilo neutro al enlace */
.footer-texto .enlace-neutro {
    /* Forzamos que herede el color del texto del footer (.footer-texto) */
    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; /* Mantiene el color del texto normal */
    text-decoration: none !important; /* Asegura que no aparezca el subrayado */
}

.footer-contenido {
    /* Aseguramos que el contenido esté centrado si la pantalla es grande */
    text-align: center;
    padding: 30px 0; 
}

/* Contenedor de Iconos */
.iconos-redes {
    /* 1. Activa Flexbox para manejar los elementos internos */
    display: flex; 
    
    /* 2. Centra horizontalmente todos los elementos (los iconos) */
    justify-content: center; 
    
    /* 3. Asegura que los elementos se centren verticalmente (si tuvieran alturas diferentes) */
    align-items: center; 
    
    /* 4. Mantiene el margen inferior para separarlos del texto "Bellasombra" */
    margin-bottom: 15px; 
}

/* Estilo de los Enlaces de Iconos */
.icono-enlace {
    font-size: 20px; /* Tamaño del icono */
    color: #333; /* Color oscuro (o tu color de marca) */
    margin: 0 10px; /* Espacio entre iconos */
    text-decoration: none; /* Elimina el subrayado si lo hay */
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

/* Efecto al pasar el ratón (Hover) */
.icono-enlace:hover {
    color: #000; /* Se oscurece al pasar el ratón (ajusta a tu gusto) */
}

/* Estilo para el enlace legal (ej. Política de Privacidad) */
.footer-legal {
    margin-top: 10px;
}
.footer-legal a {
    color: #555; /* Un gris discreto */
    text-decoration: none;
    font-size: 0.85em;
}

/* Otros estilos */

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; 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 */
/* ========================================================================= */

/* Estructuras para párrafos y fotos */
.parrafo-sans {
    font-family: sans-serif;
    text-align: left;
}

.parrafo-medium {
    font-family: DrukText;
    text-align: center;
    font-size: 1.6em;
}

.bloque-foto-texto {
    display: flex; 
    gap: 30px; 
    align-items: flex-start; 
}

.texto-izquierda {
    flex-basis: 85%; /* El texto ocupa la mayoría del espacio */
}

.imagen-derecha {
    flex-basis: 15%; /* El contenedor de la foto es muy pequeño */
    flex-shrink: 0; /* IMPEDIR que se haga más pequeña que 15% */
}

.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%; 
    }
    
    /* Nota: El iframe ya ocupa el 100% de su contenedor (90%), por lo que no necesita cambios */
}

/* ========================================================================= */
/* ESTRUCTURA FLEXBOX: FOTO A LA IZQUIERDA */
/* ========================================================================= */

.bloque-foto-texto-invertido {
    display: flex; 
    gap: 50px; 
    align-items: flex-start; 
    
    /* 1. Definir el ancho máximo del bloque (para que no se estire demasiado) */
    max-width: 1000px; /* Puedes ajustar este valor si quieres que sea más ancho o estrecho */
    

    margin: 50px auto;
    margin-bottom: 0px;
}

/* Columna de Imagen: Ocupa alrededor del 60% */
.imagen-izquierda {
    flex-basis: 50%; 
    flex-shrink: 0; /* Evita que la imagen se reduzca más allá de este punto */
}

/* Columna de Texto: Ocupa alrededor del 40% */
.texto-derecha {
    flex-basis: 50%;
    /* El estilo font-family: sans-serif ya debería estar en .parrafo-sans */
}

/* Aseguramos que la foto llene su contenedor (el 60%) */
.foto-principal {
    max-width: 100%;
    height: auto;
    display: block; 
}

/* Estilo para los títulos (opcional, basado en la imagen) */
.texto-derecha h2 {
    font-weight: bold;
    font-size: 2em; /* Ajustar el tamaño si es necesario */
    margin-top: 0; /* Quitar margen superior para pegarlo al inicio */
}


/* ========================================================================= */
/* 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%; /* Aseguramos que el contenedor ocupe el 100% */
    }

    /* ¡REGLA CLAVE! Asegura que la imagen dentro del contenedor ocupe el 100% */
    .imagen-izquierda .foto-principal {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================================================= */
/* 4. ESTILOS DEL FORMULARIO MAILCHIMP */
/* ========================================================================= */

#mc_embed_signup {
    /* Base de formulario */
    background: transparent !important;
    max-width: 100% !important;
    padding: 0 !important;
    color: var(--color-text-main) !important; 
    
    /* Aplica la fuente principal a las etiquetas del formulario */
    font-family: 'DrukText', sans-serif !important; 
    font-size: 1.3em !important;


}

/* Campos de entrada (inputs) y select */
#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;

    /* CORRECCIÓN TIPOGRAFÍA: Utiliza una fuente estándar para el texto de entrada */
    font-family: sans-serif !important; 
    
    /* APLICACIÓN DE VARIABLES */
    background: var(--color-form-bg) !important; 
    color: var(--color-form-text) !important;
    border: 1px solid var(--color-form-border) !important;
}

/* Botón de Suscripción (Input Submit) */
#mc_embed_signup input[type="submit"], #mc-embedded-subscribe {
    /* APLICACIÓN DE VARIABLES */
    background: var(--color-button-bg) !important; 
    color: var(--color-button-text) !important;
    border: none !important;

    /* CORRECCIÓN DE FORMATO */
    font-family: 'DrukText', sans-serif !important; /* Mantiene Druk en el botón */
    font-size: 1em !important;
  /*  padding: 0.5rem 1rem !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;
}

/* Mensaje de Éxito (#mce-success-response) */
#mce-success-response {
    display: inline-block !important; 
    width: auto !important; 
    max-width: 100% !important; 
    white-space: normal !important; 
    word-break: normal !important; 

    /* COLOR/HUECO VACÍO */
    color: var(--color-success) !important;
    background-color: transparent !important;
    border: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    height: auto !important;
    overflow: hidden !important;
}

/* Mensaje de Error (Clases y IDs) */
.mce_inline_error, #mce-error-response {
    background-color: transparent !important;
    color: var(--color-error) !important;
}

/* Asegurar el color en elementos hijo del mensaje de éxito */
#mce-success-response p, #mce-success-response span {
    color: var(--color-success) !important;
}

.aviso-legal-rgpd {
    /* Eliminamos font-family: sans-serif; de aquí */
 /*   font-size: 0.80em; 
  /*  color: #777777; 
    padding: 10px 0;*/
}


/* Texto de Consentimiento (label): Aplicamos el sans-serif aquí */
.aviso-legal-rgpd label {
    font-family: sans-serif; /* APLICAMOS EL SANS-SERIF SOLO AL TEXTO */
    color: inherit;
}

/* Estilo de los enlaces (Mantener) */
.aviso-legal-rgpd a {
    color: #555555; 
  /*  text-decoration: underline;*/
}


/* El estilo de los checkboxes y radios en listas UL */
.aviso-legal-rgpd ul {
    list-style: none; /* Quita el punto de la lista */
    padding: 0;
    margin: 0;
}

.aviso-legal-rgpd ul li {
    display: flex; /* Alinea el checkbox y el texto */
    align-items: flex-start;
}



/* Asegura que el checkbox sea cuadrado y legible */
.aviso-legal-rgpd input[type="checkbox"] {
    flex-shrink: 0; /* Evita que el checkbox se encoja */
    margin-top: 2px; /* Alineación vertical con el texto */
    margin-right: 8px; /* Espacio entre el box y el texto */
    /* El navegador ya lo debería mostrar como cuadrado (checkbox) */
}

/* Contenedor del título */
.contact-container {
    margin: 0;             /* Quitamos márgenes que puedan empujar la pantalla */
    padding: 0;
    text-align: center;    /* Centramos el texto si lo necesitas */
    width: 100%;
    overflow: hidden;      /* Evita que cualquier cosa asome por los lados */
}

/* Forzamos el comportamiento en el enlace y en el h2 por si acaso */
.contact, a.contact, h2.contact {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important; /* No puede ser más ancho que la pantalla */
    white-space: nowrap !important; /* Prohibido saltar de línea */
    overflow: hidden !important; /* Si algo sobra, se oculta (evita el scroll) */
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 5px !important; /* Un mínimo de margen interno para no tocar el borde */
    box-sizing: border-box !important;

    /* TAMAÑO ULTRA-FLEXIBLE */
    /* Bajamos a 4vw para que sea más pequeño en móviles */
    font-size: 4vw !important; 
}

/* En tablets y ordenadores lo dejamos fijo para que no crezca infinito */
@media screen and (min-width: 768px) {
    .contact, a.contact, h2.contact {
        font-size: 22px !important; 
    }
}



/* ========================================================================= */
/* ESTILOS PARA LA POLÍTICA DE PRIVACIDAD */
/* ========================================================================= */

.politica-privacidad-contenedor {
    /* 1. Definir ancho máximo (Lectura cómoda) */
    max-width: 70%; /* Reducido a 800px para evitar que se estire demasiado */
    
    /* 2. Centrar el bloque en la pantalla */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. Margen Vertical (Espacio arriba y abajo) */
    /*padding: 40px 20px; /* Añadimos 20px de margen a los lados en pantallas grandes */
}

@media (max-width: 600px) {
    .politica-privacidad-contenedor { max-width: 90%; }
    .parrafo-sans td, .parrafo-sans th {
        /* Reducimos el padding de 8px (valor actual) a 4px */
        padding: 4px !important; 
        font-size: 0.8em; /* Hacemos la fuente un poco más pequeña */
    }
}

/* Forzar la alineación de todos los títulos y textos a la izquierda */
.politica-privacidad-contenedor h1,
.politica-privacidad-contenedor h2,
.politica-privacidad-contenedor h3,
.politica-privacidad-contenedor .parrafo-sans {
    text-align: left !important;
}

/* Ajuste para los h1/h2 si tienen margen superior muy grande */
.politica-privacidad-contenedor h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Ajuste para los h1/h2 si tienen margen superior muy grande */
.politica-privacidad-contenedor h2 {
    font-size: 1.20em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.politica-privacidad-contenedor h3 {
    font-size: 1.00em;
    margin-top: 0px;
    margin-bottom: 0px;
}



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

@media (prefers-color-scheme: dark) {
    /* 1. Definición de Paleta Oscura (SOBRESCRIBE LOS VALORES DE :root) */
    :root {
        /* BASE */
        --color-bg-main: #121212; 
        --color-text-main: white; 
        --color-line-main: #FFFFFF; 
        
        /* ENLACES */
        --color-link: #8cafff; 
        --color-link-hover: #5682e0; 

        /* FORMULARIO */
        --color-form-bg: #333333; 
        --color-form-text: white; 
        --color-form-border: #444444; 
        --color-button-bg: #dddddd; 
        --color-button-text: #1a1a1a; 
        
        /* MENSAJES */
        --color-success: #66ff66; 
        --color-error: #ff5555;
    }

    /* Asegura que el color del logo siga el color del texto base */
    .logo-link {
        color: var(--color-text-main) !important; 
    }
}