/* ==========================================================================
   ÍNDICE DE SECCIONES - STYLE.CSS 
==========================================================================
   1. BASE, RESETEO Y TIPOGRAFÍA
   2. CABECERA Y NAVEGACIÓN (PC)
   3. LÓGICA DE BANNERS (SOLUCIÓN DEFINITIVA)
   4. SECCIONES GENERALES (Cloud Dancer y Pantones)
   5. COMPONENTES: PERFIL, ACORDEÓN Y HABILIDADES
   6. PORTAFOLIO Y GALERÍA (LIGHTBOX)
   7. FORMULARIO Y FOOTER
   8. CONTROLES INTERACTIVOS (FLOTANTES)
   9. MODO CONTRASTE (NOCHE)
   10. RESPONSIVE (MÓVIL < 768px)
   11. EASTER EGG Y DEBUG
========================================================================== */

/* ==========================================================================
   1. BASE, RESETEO Y TIPOGRAFÍA
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff; 
    color: #333333; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 15px; 
    line-height: 1.6;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
    opacity: 0.15;
    pointer-events: none;
    z-index: 9999; 
}

a { text-decoration: none !important; }

/* Barra de progreso superior */
#progress-bar {
    position: fixed; top: 0; left: 0;
    width: 0%; height: 4px;
    background-color: #BB2649; 
    z-index: 100002; 
    transition: width 0.1s ease-out;
}

/* ==========================================================================
   2. CABECERA Y NAVEGACIÓN (PC)
   ========================================================================== */
#header {
    background-color: #ffffff;
    padding: 20px 0;
    border-bottom: none !important;
    text-align: center;
}

.nav-centrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Estilo Base de las imágenes del logo */
.logo img {
    width: 100% !important;
    max-width: 550px !important;
    height: auto !important;
    display: block; margin: 0 auto;
    object-fit: contain;

}

/* ==========================================================================
   3. LÓGICA DE BANNERS (SOLUCIÓN DEFINITIVA)
   ========================================================================== */

.banner-movil { 
    display: none !important; 
}

/* 2. MODO DÍA (ESCRITORIO) */
/* Por defecto mostramos el PC Color y aseguramos que el PC Negro esté oculto */
.banner-pc.banner-color { 
    display: block !important; 
}
.banner-pc.banner-bn { 
    display: none !important; 
}

/* 3. MODO NOCHE (ESCRITORIO - ACTIVADO POR JS) */
/* Cuando el body tiene la clase .modo-contraste, invertimos la lógica */
body.modo-contraste .banner-pc.banner-color { 
    display: none !important; 
}
body.modo-contraste .banner-pc.banner-bn { 
    display: block !important; 
}

/* Menú Principal */
.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-links li a {
    color: #333333;
    font-weight: 700;
    transition: 0.3s;
}

.nav-links li a:hover { 
    opacity: 1;
    transform: scale(1.05);
}

/* ==========================================================================
   4. SECCIONES GENERALES
   ========================================================================== */
.seccion-cloud-dancer, 
.seccion-cloud-dancer-footer {
    background-color: #f6f5f4; 
    max-width: 950px;
    margin: 0 auto 40px;
    padding: 30px; 
    border-radius: 0 0 12px 12px; 
    position: relative;
    overflow: hidden;
    box-shadow: none !important;
}

.seccion-cloud-dancer p, 
.seccion-cloud-dancer li {
    font-size: 0.95rem !important;
    line-height: 1.5;
}

/* Bloques Pantone (Títulos) */
.bloque-pantone {
    width: 100%; padding: 15px; margin-top: 40px;
    color: #ffffff !important; text-align: center; font-size: 2.2em; font-weight: 800;
}
.bloque-pantone-formacion { background-color: #009473; }
.bloque-pantone-experiencia { background-color: #FF7F50; color: #000 !important; }
.bloque-pantone-habilidades { background-color: #6667AB; }
.bloque-pantone-contacto { background-color: #0F4C81; }
#proyectos h2 { background-color: #BB2649; color: #ffffff !important; }

/* Resplandores (Sombras de color) */
#perfil.seccion-cloud-dancer { box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6) !important; }
#formacion .seccion-cloud-dancer { box-shadow: 0 10px 20px rgba(0, 148, 115, 0.6) !important; }
#experiencia .seccion-cloud-dancer { box-shadow: 0 10px 20px rgba(255, 127, 80, 0.6) !important; }
#proyectos .seccion-cloud-dancer { box-shadow: 0 10px 20px rgba(187, 38, 73, 0.6) !important; }
#habilidades .seccion-cloud-dancer { box-shadow: 0 10px 20px rgba(102, 103, 171, 0.6) !important; }
#contacto .seccion-cloud-dancer { box-shadow: 0 10px 20px rgba(15, 76, 129, 0.6) !important; }
.seccion-cloud-dancer-footer { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; }

/* ==========================================================================
   5. COMPONENTES: PERFIL, ACORDEÓN Y HABILIDADES
   ========================================================================== */
/* Perfil */
.perfil-layout { 
    display: flex; gap: 0; margin: -30px; align-items: stretch; 
}
.perfil-imagen { flex: 0 0 40%; overflow: hidden; border-radius: 12px 0 0 12px; }
.perfil-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.perfil-texto { 
    flex: 1; padding: 20px 35px; text-align: left; 
    display: flex; flex-direction: column; justify-content: center;
}
.perfil-texto h1 { line-height: 1.1; margin-bottom: 25px; }
.perfil-texto p { text-align: justify; text-justify: inter-word; margin-bottom: 12px; }

/* Botón Perfil */
.boton-perfil {
    width: fit-content !important; padding: 10px 20px !important;
    align-self: flex-start; margin-top: 10px;
}

/* Prompt AI Container */
.prompt-container {
    margin-top: 25px; padding: 20px; background-color: #ffffff;
    border-left: 5px solid #BB2649; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.prompt-label {
    font-weight: 900; font-size: 11px; text-transform: uppercase;
    color: #BB2649; display: block; margin-bottom: 10px;
}

/* --- ACORDEÓN FORMACIÓN --- */
.acordeon-header {
    width: 100%; background: transparent !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    text-align: left; padding: 15px 0; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Montserrat', sans-serif;
}
.acordeon-item { border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; }
.acordeon-item:last-child { border-bottom: none; }

.acordeon-header h3 {
    font-size: 1rem; margin: 0; color: #333; position: relative;
    padding-left: 20px; line-height: 1.4; font-weight: 700;
}
.acordeon-header h3::before {
    content: "•"; color: #009473; font-size: 1.5em;
    position: absolute; left: 0; top: -2px;
}

.icono-acordeon { font-size: 0.8rem; color: #009473; transition: transform 0.3s ease; margin-left: 15px; }
.acordeon-header.activo .icono-acordeon { transform: rotate(180deg); }
.acordeon-header.activo h3 { color: #009473; }

.acordeon-contenido {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 20px; 
}
.acordeon-contenido p { margin-bottom: 15px; font-size: 0.95rem; color: #555; line-height: 1.6; }
.acordeon-contenido .institucion { font-weight: bold; color: #000; margin-bottom: 5px; display: block; }

/* Habilidades */
.habilidades-lista { display: flex; gap: 20px; }
.columna-habilidad { flex: 1; }
.columna-habilidad h3 { 
    color: #6667AB; 
    border-bottom: 2px solid #6667AB; 
    padding-bottom: 5px; margin-bottom: 10px; 
}
.columna-habilidad li { list-style: none; position: relative; padding-left: 20px; }
.columna-habilidad li::before { content: "•"; color: #6667AB; font-weight: bold; position: absolute; left: 0; }

/* Experiencia */
#experiencia ul { list-style: none; padding-left: 25px; margin-top: 15px; }
#experiencia li { position: relative; margin-bottom: 10px; padding-left: 15px; line-height: 1.5; }
#experiencia li::before {
    content: "•"; color: #FF7F50; font-weight: bold; font-size: 1.5em;
    position: absolute; left: -15px; top: -5px;
}

/* ==========================================================================
   6. PORTAFOLIO Y GALERÍA (LIGHTBOX)
   ========================================================================== */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas iguales */
    gap: 20px;
    margin-top: 30px;
}
.tarjeta-proyecto {
    /* Quitamos el flex:1 antiguo */
    width: 100%;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    border-top: 5px solid #BB2649;
    transition: transform 0.3s;
    display: flex;             /* Para alinear contenido interno */
    flex-direction: column;    /* Texto arriba, botón abajo */
    justify-content: space-between;
}
.tarjeta-proyecto:hover { transform: translateY(-8px); }

/* Separador */
.separador-proyectos {
    margin-top: 10px !important; margin-bottom: 20px !important;
    border: 0; border-top: 2px solid #e0e0e0; opacity: 0.5;
}
#proyectos h3 { margin-bottom: 10px !important; }

/* Galería Miniaturas */
.portafolio-grafico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.miniatura-contenedor { overflow: hidden; aspect-ratio: 1 / 1; }
.miniatura-contenedor img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* Lightbox */
.lightbox {
    display: none !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4); z-index: 100000; align-items: center; justify-content: center;
    backdrop-filter: blur(15px);
}
.lightbox:target { display: flex !important; }
.lightbox-contenido {
    position: relative; width: 85%; max-width: 1100px; background: #f6f5f4;
    padding: 30px; border-radius: 15px; text-align: center;
}
.lightbox-contenido img { max-width: 100%; max-height: 70vh; object-fit: contain; margin-bottom: 15px; }
.lightbox-cerrar-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; cursor: default; }
.btn-cerrar-x { position: absolute; top: -40px; right: 0; font-size: 35px; color: #fff; text-decoration: none !important; font-weight: bold; }

/* ==========================================================================
   7. FORMULARIO Y FOOTER
   ========================================================================== */
.cta-boton {
    background-color: #000000 !important; color: #ffffff !important;
    padding: 12px 24px; border-radius: 5px; font-weight: 700;
    display: inline-block; border: none; transition: 0.3s;
}

.formulario-contacto { display: flex; flex-direction: column; gap: 15px; max-width: 600px; margin: 20px auto 0; }
.formulario-contacto label { display: none !important; }
.formulario-contacto label.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.formulario-contacto input, .formulario-contacto textarea {
    width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px;
    font-family: inherit; font-size: 14px; background-color: #ffffff;
}
.boton-contacto {
    width: 100%; background-color: #000000 !important; color: #ffffff !important;
    padding: 15px !important; border: none; border-radius: 8px; font-weight: 700; cursor: pointer;
    text-align: center; transition: background 0.3s ease;
}
.boton-contacto:hover { opacity: 0.8; }
.redes-sociales { display: flex; justify-content: center; gap: 20px; margin-top: 25px; font-weight: 700; }

.referencias-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; justify-items: center; align-items: start; margin-top: 30px; }
.referencia-item { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; }
.muestra-color { width: 100px; height: 100px; border-radius: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
.referencia-item b, .referencia-item p { color: #000; font-size: 12px; line-height: 1.2; }
.footer-bottom { text-align: center; padding: 20px 0 40px; color: #666; font-size: 0.85em; }

/* ==========================================================================
   8. CONTROLES INTERACTIVOS
   ========================================================================== */
.controles-interactivos {
    position: fixed; bottom: 25px; right: 25px; z-index: 100010;
    display: flex; flex-direction: column-reverse; gap: 12px; align-items: center;
}

#toggle-bn, #btn-cv, #btn-subir, .menu-hamburguesa {
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #000; background: #fff;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.icono-btn, .icono-flecha { font-size: 36px !important; line-height: 1; display: flex; align-items: center; justify-content: center; }

#btn-subir {
    opacity: 0; visibility: hidden; height: 0; margin: 0; padding: 0; border: none; overflow: hidden; transform: translateY(15px);
}
#btn-subir.mostrar {
    opacity: 1; visibility: visible; height: 45px; border: 2px solid #000; transform: translateY(0);
}
#btn-cv { background: #000; color: #fff !important; font-size: 11px; font-weight: 800; text-decoration: none; }
.menu-hamburguesa { display: none !important; }

/* ==========================================================================
   9. MODO CONTRASTE (NOCHE)
   ========================================================================== */
body.modo-contraste { background-color: #000 !important; color: #ffffff !important; }

body.modo-contraste header, body.modo-contraste .nav-links,
body.modo-contraste .seccion-cloud-dancer, body.modo-contraste .seccion-cloud-dancer-footer,
body.modo-contraste .tarjeta-proyecto, body.modo-contraste .lightbox-contenido {
    background-color: #000 !important; border: none !important; color: #ffffff !important;
}

/* Barra, Prompt y Redes */
body.modo-contraste #progress-bar { background-color: #ffffff !important; }
body.modo-contraste .prompt-container { background-color: #1a1a1a !important; border-left: 5px solid #ffffff !important; color: #fff !important; }
body.modo-contraste .prompt-label { background-color: #ffffff !important; color: #000000 !important; }
body.modo-contraste .prompt-quote { color: #ddd !important; }
body.modo-contraste .redes-sociales a { color: #ffffff !important; }

/* Subrayados y Separadores */
body.modo-contraste .columna-habilidad h3 { border-bottom-color: #ffffff !important; color: #ffffff !important; }
body.modo-contraste .separador-proyectos { border-color: rgba(255,255,255,0.4) !important; }

/* Puntos y Flechas */
body.modo-contraste .acordeon-header h3::before,
body.modo-contraste #experiencia li::before,
body.modo-contraste .columna-habilidad li::before,
body.modo-contraste .icono-acordeon { color: #ffffff !important; }

/* Títulos Secciones */
body.modo-contraste .bloque-pantone, 
body.modo-contraste .bloque-pantone-experiencia, 
body.modo-contraste .bloque-pantone-formacion, 
body.modo-contraste .bloque-pantone-habilidades, 
body.modo-contraste .bloque-pantone-contacto {
    color: #ffffff !important; background-color: #2a2929 !important;
}
body.modo-contraste .seccion-cloud-dancer h3, body.modo-contraste .seccion-cloud-dancer p,
body.modo-contraste .seccion-cloud-dancer li, body.modo-contraste .footer-bottom { color: #ffffff !important; }

/* Acordeón */
body.modo-contraste .acordeon-header { background: transparent !important; }
body.modo-contraste .acordeon-header h3 { color: #fff; }
body.modo-contraste .acordeon-header.activo h3 { color: #009473; }
body.modo-contraste .acordeon-contenido p { color: #ccc; }
body.modo-contraste .acordeon-contenido .institucion { color: #fff; }
body.modo-contraste .acordeon-item { border-bottom: 1px solid #333; }

/* Botones y Form */
body.modo-contraste .cta-boton, body.modo-contraste .boton-contacto, body.modo-contraste .boton-perfil {
    background-color: #ffffff !important; color: #000000 !important; border: none !important;
}
body.modo-contraste .formulario-contacto input, body.modo-contraste .formulario-contacto textarea {
    background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #333333 !important;
}
body.modo-contraste .formulario-contacto ::placeholder { color: #888888 !important; }

/* Controles */
body.modo-contraste #toggle-bn, body.modo-contraste #btn-subir, body.modo-contraste #menu-movil-btn {
    background-color: #000 !important; border-color: #fff !important; color: #fff !important;
}
body.modo-contraste #btn-cv { background-color: #fff !important; color: #000 !important; }

/* Imágenes Global */
body.modo-contraste img { filter: grayscale(100%) brightness(0.7) !important; }
/* Excepciones que mantienen color/brillo */
body.modo-contraste .logo-404, 
body.modo-contraste .btn-cerrar-x,
body.modo-contraste .banner-bn,
body.modo-contraste .banner-movil.banner-bn { 
    filter: none !important; 
    color: #fff !important; 
}

/* Resplandores */
body.modo-contraste #perfil.seccion-cloud-dancer, body.modo-contraste #formacion .seccion-cloud-dancer,
body.modo-contraste #experiencia .seccion-cloud-dancer, body.modo-contraste #proyectos .seccion-cloud-dancer,
body.modo-contraste #habilidades .seccion-cloud-dancer, body.modo-contraste #contacto .seccion-cloud-dancer {
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.modo-contraste .tarjeta-proyecto {
    border: 1px solid #ffffff !important; background-color: #000000 !important; border-top: 5px solid #ffffff !important;
}

body.modo-contraste .paleta-explicacion, body.modo-contraste .seccion-cloud-dancer-footer { display: none !important; }

/* Enlaces Menú Noche */
body.modo-contraste .nav-links li a[href], 
body.modo-contraste .nav-links li a[href]:hover,
body.modo-contraste .nav-links li a.active-link {
    background-color: transparent !important; color: #ffffff !important;
}
body.modo-contraste .nav-links li a[href]:hover,
body.modo-contraste .nav-links li a.active-link {
    background-color: #333333 !important; border: 1px solid #555 !important;
}
body.modo-contraste .nav-links li a[href="#contacto"] { background-color: transparent !important; }

body.modo-contraste .label-promo {
    color: #cccccc !important; 
}
/* ==========================================================================
   10. RESPONSIVE (MÓVIL < 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* BLOQUEO TOTAL DE LOGOS DE PC EN MÓVIL */
    .banner-pc,
    .banner-pc.banner-color,
    .banner-pc.banner-bn { 
        display: none !important; 
    }
    body.modo-contraste .banner-pc.banner-bn, 
    body.modo-contraste .banner-pc.banner-color { 
        display: none !important; 
    }
    
    /* MÓVIL MODO DÍA */
    body:not(.modo-contraste) .banner-movil.banner-color { display: block !important; }
    body:not(.modo-contraste) .banner-movil.banner-bn { display: none !important; }

    /* MÓVIL MODO NOCHE */
    body.modo-contraste .banner-movil.banner-bn { display: block !important; }
    body.modo-contraste .banner-movil.banner-color { display: none !important; }

    
    /* Tipografía y Header */
    body { font-size: 13px !important; }
    #header { padding: 0 !important; margin: 0 !important; min-height: auto !important; }
    .nav-centrado { display: block !important; gap: 0 !important; }
    
    /* Logo Móvil - AIRE ARRIBA/ABAJO */
    .logo { 
        line-height: 0 !important; 
        margin: 25px 0 !important; 
        padding: 0 !important; 
        position: relative; 
    }
    .logo img { 
        width: 100% !important; 
        max-width: 400px !important; 
        margin: 0 auto !important; 
        display: block !important; 
        object-fit: contain; 
        image-rendering: pixelated; 
    }

    .redes-sociales {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 15px !important; 
        line-height: 2 !important; 
        padding: 0 20px !important; 
        width: 100%;
    }
    
    .redes-sociales a {
        font-size: 14px !important;
        white-space: nowrap; 
    }

    /* Layouts */
    .perfil-layout { flex-direction: column; margin: 0; }
    .perfil-imagen { height: 350px !important; width: 100% !important; border-radius: 12px !important; }
    .perfil-texto h1 { font-size: 1.3rem !important; }
    .bloque-pantone { font-size: 1.6em !important; }

    .habilidades-lista { flex-direction: column; }
    .referencias-grid, .portafolio-grafico { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
    
    .proyectos-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; padding: 0 10px; }
    .tarjeta-proyecto { width: 100% !important; grid-column: auto !important; }

    /* Márgenes */
    #perfil.seccion-cloud-dancer { padding: 30px !important; margin-top: 0 !important; }
    .perfil-texto { padding: 15px 0 !important; }
    .bloque-pantone { padding-left: 15px !important; padding-right: 15px !important; }

    /* Menú y Popup */
    .menu-hamburguesa { display: flex !important; width: 50px !important; height: 50px !important; margin: 0 !important; }
    #btn-cv { display: none !important; }

    .nav-links {
        display: none; flex-direction: column !important; position: fixed; bottom: 145px; right: 20px;
        width: 180px; background: #fff; padding: 15px; border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 100015; gap: 15px !important; height: auto !important; margin: 0 !important;
    }
    .nav-links.active { display: flex !important; animation: fadeInMenu 0.3s ease; }
    @keyframes fadeInMenu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* Colores Menú Móvil */
    .nav-links li a { display: block; padding: 8px 12px; border-radius: 8px; transition: all 0.3s ease; font-size: 1.1rem; }
    .nav-links li a[href="#perfil"]:hover, .nav-links li a[href="#perfil"].active-link { background: #333 !important; color: #fff !important; }
    .nav-links li a[href="#formacion"]:hover, .nav-links li a[href="#formacion"].active-link { background: #009473 !important; color: #fff !important; }
    .nav-links li a[href="#experiencia"]:hover, .nav-links li a[href="#experiencia"].active-link { background: #FF7F50 !important; color: #fff !important; }
    .nav-links li a[href="#habilidades"]:hover, .nav-links li a[href="#habilidades"].active-link { background: #6667AB !important; color: #fff !important; }
    .nav-links li a[href="#proyectos"]:hover, .nav-links li a[href="#proyectos"].active-link { background: #BB2649 !important; color: #fff !important; }
    .nav-links li a[href="#contacto"]:hover, .nav-links li a[href="#contacto"].active-link { background: #0F4C81 !important; color: #fff !important; }
    
    body.modo-contraste .nav-links { background-color: #1a1a1a !important; border: 1px solid #333; }

    /* Controles Flotantes Móvil */
    .controles-interactivos {
        display: flex !important; flex-direction: column-reverse !important;
        bottom: 20px !important; right: 20px !important; gap: 0 !important;
    }
    #toggle-bn { margin-top: 15px !important; width: 50px !important; height: 50px !important; }
    
    #btn-subir {
        display: flex !important; max-height: 0 !important; margin: 0 !important;
        opacity: 0 !important; visibility: hidden !important; overflow: hidden; border: none !important;
        width: 50px !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #btn-subir.mostrar {
        max-height: 50px !important; opacity: 1 !important; visibility: visible !important;
        margin-top: 15px !important; border: 2px solid #000 !important;
    }


    /* --- BANNERS PUBLICIDAD MÓVIL (LIBRO Y TIENDA) --- */
.promo-libro-container, 
.promo-tienda-container {
    display: flex !important;
    flex-direction: column !important; /* FUERZA: Foto arriba, texto abajo */
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px 0 0 0 !important; /* Separación entre bloques */
    padding: 0 !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Quitamos los fondos grises que sobran en móvil */
.promo-libro-container::before, 
.promo-tienda-container::before {
    display: none !important;
}

/* Contenedores de Imagen (Arriba) */
.libro-img-wrapper, 
.tienda-img-wrapper {
    width: 100% !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
}

.libro-foto-principal, 
.tienda-foto-principal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Contenedores de Texto (Abajo) */
.libro-texto-wrapper, 
.tienda-texto-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 40px 25px !important; 
    background-color: #f6f5f4 !important; 
    text-align: center !important; 
    box-sizing: border-box !important;
}

/* Ajuste de los títulos en móvil */
.libro-texto-wrapper h3, 
.titulo-tienda {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    color: #000 !important;
}

/* Ajuste de párrafos */
.libro-texto-wrapper p, 
.tienda-texto-wrapper p {
    font-size: 1rem !important;
    margin-bottom: 15px !important;
}

/* Botones centrados y grandes para el dedo */
.btn-compra-libro, 
.btn-compra-tienda {
    width: 100% !important;
    max-width: 280px;
    margin: 10px auto 0 !important;
}

/* --- MODO NOCHE MÓVIL --- */
body.modo-contraste .libro-texto-wrapper,
body.modo-contraste .tienda-texto-wrapper {
    background-color: #1a1a1a !important;
}
body.modo-contraste .libro-texto-wrapper h3,
body.modo-contraste .titulo-tienda,
body.modo-contraste .libro-texto-wrapper p,
body.modo-contraste .tienda-texto-wrapper p {
    color: #ffffff !important;
}
}

/* Landscape */
@media (max-width: 932px) and (orientation: landscape) {
    .proyectos-grid { display: flex !important; flex-direction: column !important; }
    #btn-cv { display: none !important; }
    .logo img { width: 300px !important; max-width: 80% !important; }
    .perfil-imagen { height: 250px !important; }
}

/* Base: al pasar el ratón o estar activo */
.nav-links li a {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 8px 12px;
}

/* Quién Soy - Gris oscuro/Negro */
.nav-links li a[href="#perfil"]:hover,
.nav-links li a[href="#perfil"].active-link {
    background-color: #333 !important;
    color: #fff !important;
}

/* Formación - Verde */
.nav-links li a[href="#formacion"]:hover,
.nav-links li a[href="#formacion"].active-link {
    background-color: #009473 !important;
    color: #fff !important;
}

/* Experiencia - Naranja */
.nav-links li a[href="#experiencia"]:hover,
.nav-links li a[href="#experiencia"].active-link {
    background-color: #FF7F50 !important;
    color: #fff !important;
}

/* Habilidades - Morado */
.nav-links li a[href="#habilidades"]:hover,
.nav-links li a[href="#habilidades"].active-link {
    background-color: #6667AB !important;
    color: #fff !important;
}

/* Proyectos - Rojo/Magenta */
.nav-links li a[href="#proyectos"]:hover,
.nav-links li a[href="#proyectos"].active-link {
    background-color: #BB2649 !important;
    color: #fff !important;
}

/* Contacto - Azul */
.nav-links li a[href="#contacto"]:hover,
.nav-links li a[href="#contacto"].active-link {
    background-color: #0F4C81 !important;
    color: #fff !important;
}

/* ==========================================================================
   PARCHE FINAL: MODO NOCHE - ENLACES GRISES
   ========================================================================== */
body.modo-contraste .nav-links li a[href], 
body.modo-contraste .nav-links li a[href]:hover,
body.modo-contraste .nav-links li a.active-link {
    background-color: transparent !important; /* Fondo transparente por defecto */
    color: #ffffff !important;
}

/* Al pasar el ratón o estar activo en modo noche -> GRIS */
body.modo-contraste .nav-links li a[href]:hover,
body.modo-contraste .nav-links li a.active-link {
    background-color: #333333 !important; /* Gris oscuro elegante */
    border: 1px solid #555 !important;
}

.boton-perfil {
    width: fit-content !important;
    padding: 10px 20px !important;
    align-self: flex-start;
    margin-top: 10px;
}

/* --- CORRECCIÓN FLASH FOTO RANDOM --- */
#foto-perfil-azar {
    opacity: 0; 
    transition: opacity 0.2s ease-in; 
}

#foto-perfil-azar.visible {
    opacity: 1; 
}


/* ==========================================================================
   BANNER LIBRO - VERSIÓN PC
   ========================================================================== */

.promo-libro-container {
    display: flex !important;
    position: relative;
    width: 100%;
    max-width: 950px;
    margin-top: -100px !important; 
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99; 
}

.promo-libro-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; 
    background-color: #f6f5f4; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: -1; 
}

/* --- COLUMNA FOTO --- */
.libro-img-wrapper {
    flex: 0 0 45%; 
    padding: 0 !important;
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    position: relative;
    z-index: 1;
    background-color: transparent !important; 
}

.libro-foto-principal {
    width: auto;
    max-width: 450px; 
    height: auto;
    display: block;
    margin-bottom: 0;
}

/* --- COLUMNA TEXTO --- */
.libro-texto-wrapper {
    flex: 1;
    padding: 100px 40px 40px 20px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Estilos Texto */
.label-promo {
    font-size: 10px; 
    font-weight: 900; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    background-color: #000;
    color: #fff;
    padding: 5px 10px; 
    border-radius: 4px; 
    width: fit-content; 
    margin-bottom: 15px; 
    display: block;
}

.libro-texto-wrapper h3 {
    font-size: 2.2rem; line-height: 1.1; margin-bottom: 15px; color: #000; font-weight: 800;
}
.libro-texto-wrapper p {
    font-size: 1rem; color: #333; line-height: 1.5; margin-bottom: 8px; 
}
.libro-texto-wrapper p:last-of-type {
    margin-bottom: 30px; 
}
.btn-compra-libro {
    display: inline-block; background-color: #000; color: #fff !important; padding: 15px 30px; font-weight: 700; border-radius: 8px; width: fit-content; transition: 0.3s; margin-top: 0;
}
.btn-compra-libro:hover { transform: translateY(-3px); background-color: #333; }

/* --- MODO NOCHE PC --- */
body.modo-contraste .promo-libro-container { background-color: transparent !important; }
body.modo-contraste .promo-libro-container::before { background-color: #1a1a1a; border: 1px solid #333; }
body.modo-contraste .libro-img-wrapper { background-color: transparent !important; } 
body.modo-contraste .libro-texto-wrapper { background: transparent !important; } 

body.modo-contraste .libro-foto-principal { filter: brightness(0.9); }
body.modo-contraste .libro-texto-wrapper h3, body.modo-contraste .libro-texto-wrapper p { color: #fff; }
body.modo-contraste .label-promo { color: #ccc; opacity: 0.8; }
body.modo-contraste .btn-compra-libro { background-color: #fff; color: #000 !important; }

/* ==========================================================================
   MODO NOCHE (PREPARADO PARA CAMBIO DE FOTO)
   ========================================================================== */
body.modo-contraste .promo-libro-container::before {
    background-color: #1a1a1a; 
    border: 1px solid #333;
}

body.modo-contraste .libro-texto-wrapper h3,
body.modo-contraste .libro-texto-wrapper p {
    color: #fff;
}

body.modo-contraste .btn-compra-libro {
    background-color: #fff;
    color: #000 !important;
}

body.modo-contraste .libro-foto-principal {
    mix-blend-mode: normal; 
    filter: brightness(0.8); 
}

body.modo-contraste .label-promo {
    background-color: #fff !important; 
    color: #000 !important;            
    opacity: 1;                        
}

/* ==========================================================================
   BANNER TIENDA - VERSIÓN TODO DENTRO
   ========================================================================== */

.promo-tienda-container {
    display: flex !important;
    flex-direction: row-reverse !important; 
    width: 100%;
    max-width: 950px;
    margin: 40px auto; 
    background-color: #f6f5f4 !important; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
}

/* --- COLUMNA FOTO --- */
.tienda-img-wrapper {
    flex: 0 0 45%;
    display: flex;
    align-items: center; 
    justify-content: center;
    background-color: #f6f5f4;
    padding: 20px !important;
}

.tienda-foto-principal {
    width: auto;
    max-width: 550px; 
    height: auto;
    display: block;
}

/* --- COLUMNA TEXTO --- */
.tienda-texto-wrapper {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; 
}

/* --- TÍTULO MÁS PEQUEÑO --- */
.titulo-tienda {
    font-size: 1.6rem !important; 
    line-height: 1.2;
    margin-bottom: 15px;
    color: #000;
    font-weight: 800;
}

.tienda-texto-wrapper p {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 25px;
}

.btn-compra-tienda {
    display: inline-block;
    background-color: #000;
    color: #fff !important;
    padding: 12px 25px;
    font-weight: 700;
    border-radius: 8px;
    width: fit-content;
    transition: 0.3s;
}

.btn-compra-tienda:hover { background-color: #BB2649; transform: translateY(-2px); }

/* --- MODO NOCHE TIENDA (Todo dentro) --- */
body.modo-contraste .promo-tienda-container {
    background-color: #1a1a1a !important;
    border: 1px solid #333;
}
body.modo-contraste .tienda-img-wrapper { background-color: #1a1a1a !important; }
body.modo-contraste .titulo-tienda, 
body.modo-contraste .tienda-texto-wrapper p { color: #fff; }
body.modo-contraste .btn-compra-tienda { background-color: #fff; color: #000 !important; }

/* ==========================================================================
   VERSIÓN MÓVIL (IMAGEN 100% ANCHO BORDE A BORDE)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Ajuste de Enlaces Desbordados (Footer) */
    .redes-sociales {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 15px !important;
        padding: 0 20px !important;
    }

    /* 2. Tarjeta del Libro */
    .promo-libro-container {
        margin: 30px auto 40px !important;
        width: 100% !important;
        max-width: 100% !important;
        background-color: #fff;
        border-radius: 12px !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .promo-libro-container::before { display: none; }

    .libro-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 3. IMAGEN A PANTALLA COMPLETA */
    .libro-img-wrapper {
        width: 100%;
        background-color: #fff;
        padding-top: 30px; 
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .libro-foto-principal {
        width: 100% !important;  
        max-width: 100% !important; 
        height: auto;
        display: block;
        mix-blend-mode: normal; 
        margin-bottom: -1px; 
        object-fit: cover; 
    }

    /* 4. Texto */
    .libro-texto-wrapper {
        width: 100%;
        background-color: #f6f5f4;
        padding: 30px 20px;
        text-align: center;
        border-top: none; 
    }

    .libro-texto-wrapper h3 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    /* Modo Noche Móvil */
    body.modo-contraste .promo-libro-container {
        background-color: #000 !important;
        border: 1px solid #555 !important;
    }
    body.modo-contraste .libro-img-wrapper {
        background-color: #000 !important;
    }
    body.modo-contraste .libro-texto-wrapper {
        background-color: #1a1a1a !important;
    }
}

/* ==========================================================================
   PARCHE FINAL: ARREGLO TEXTO TIENDA MÓVIL
   ========================================================================== */
@media (max-width: 768px) {

    .promo-tienda-container {
        display: flex !important;
        flex-direction: column !important; 
        height: auto !important;
        min-height: 500px !important; 
        overflow: visible !important;
        background-color: #fff !important;
        margin-top: 40px !important;
    }

    .tienda-texto-wrapper {
        display: block !important; 
        width: 100% !important;
        background-color: #f6f5f4 !important; 
        padding: 40px 20px !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .tienda-texto-wrapper h3 {
        display: block !important;
        font-size: 1.6rem !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    .tienda-texto-wrapper p {
        display: block !important;
        font-size: 1rem !important;
        color: #333 !important;
        margin-bottom: 20px !important;
    }
    
    .tienda-img-wrapper {
        order: -1 !important; 
        width: 100% !important;
        padding-bottom: 0 !important;
    }

    body.modo-contraste .tienda-texto-wrapper {
        background-color: #1a1a1a !important;
    }
    body.modo-contraste .tienda-texto-wrapper h3,
    body.modo-contraste .tienda-texto-wrapper p {
        color: #ffffff !important;
    }
}

/* ==========================================================================
   11. EASTER EGG Y DEBUG
   ========================================================================== */
.modal-secreto {
    display: none; 
    position: fixed; z-index: 200000; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); 
    backdrop-filter: blur(5px);
    align-items: center; justify-content: center;
}

/* Cuando se activa con JS */
.modal-secreto.activo { display: flex !important; animation: fadeIn 0.3s ease; }

.modal-secreto-content {
    background-color: #1e1e1e; 
    color: #d4d4d4;
    width: 90%; max-width: 800px; max-height: 85vh;
    padding: 40px; border-radius: 8px;
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow-y: auto; 
    font-family: 'Consolas', 'Courier New', monospace;
    position: relative;
}

/* Botón cerrar */
.cerrar-secreto {
    position: absolute; top: 15px; right: 20px;
    color: #ff5f56; font-size: 40px; font-weight: bold;
    cursor: pointer; transition: 0.2s;
}
.cerrar-secreto:hover { color: #fff; }

/* Títulos */
.modal-secreto h2 { color: #4ec9b0; margin-bottom: 20px; font-size: 1.8rem; border-bottom: 1px solid #333; padding-bottom: 10px; }
.secreto-item h3 { color: #ce9178; margin-top: 30px; font-size: 1.2rem; }
.intro-secreto { color: #9cdcfe; margin-bottom: 20px; font-style: italic; }

/* Bloques de código */
.secreto-item pre {
    background: #000; padding: 15px; border-radius: 6px;
    border-left: 4px solid #BB2649;
    overflow-x: auto; margin-top: 10px;
}
.secreto-item code {
    font-family: 'Consolas', monospace; color: #b5cea8; font-size: 0.9rem;
}

/* El gatillo (Trigger) */
.trigger-easter-egg { cursor: help; transition: 0.3s; }
.trigger-easter-egg:hover { text-shadow: 0 0 5px #BB2649; transform: scale(1.05); }

/* --- DEBUG MODE (RAYOS X) --- */
body.debug-activo * {
    outline: 1px solid rgba(255, 0, 0, 0.5) !important;
    background-color: rgba(255, 0, 0, 0.05) !important;
}

/* ==========================================================================
   BADGES Y CERTIFICACIONES
   ========================================================================== */
.area-certificaciones {

    text-align: center;
}

.titulo-certificaciones {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 20px;
}

.grid-badges {
    display: flex;
    justify-content: center;
    gap: 25px; /* Espacio entre medallas */
    flex-wrap: wrap;
}

.badge-item {
    display: block;
    width: 80px; /* Tamaño de la medalla */
    height: 80px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1)); /* Sombrita suave */
}

/* Efecto al pasar el ratón */
.badge-item:hover {
    transform: scale(1.2); /* Crece un poco */
}

/* Ajuste para modo noche */
body.modo-contraste .titulo-certificaciones {
    color: #ccc;
}
body.modo-contraste .area-certificaciones {
    border-top-color: #555;
}

/* --- ESTILOS ENLACE GITHUB PROYECTOS --- */
.enlace-github {
    color: #BB2649; 
    font-weight: 800; 
    text-decoration: none !important; /* Sin subrayado estándar */
    border: none !important;          /* Sin borde inferior */
    align-self: flex-start;
    transition: all 0.3s ease;
}

.enlace-github:hover {
    color: #000;       /* Al pasar el ratón se pone negro */
    background: none;  /* Quitamos fondo si lo hubiera */
}

/* MODO NOCHE */
body.modo-contraste .enlace-github {
    color: #ffffff !important;
}

body.modo-contraste .enlace-github:hover {
    color: #BB2649 !important; /* Pequeño toque de color al pasar el ratón en noche */
}

/* --- ENLACES DE TEXTO EXPERIENCIA (LIMPIO) --- */
.enlace-texto-destacado {
    text-decoration: none !important; /* ¡ADIÓS LÍNEA! */
    border: none !important;
    color: #FF7F50; 
    font-weight: 800; /* Un poco más gordito para que se note que es link */
    transition: color 0.3s ease;
}

.enlace-digitalizatodo {
       text-decoration: none !important; /* ¡ADIÓS LÍNEA! */
    border: none !important;
    color: #03b395; 
    font-weight: 800; /* Un poco más gordito para que se note que es link */
    transition: color 0.3s ease; 
}

.enlace-texto-destacado:hover {
    color: #333; 
}

/* MODO NOCHE */
body.modo-contraste .enlace-texto-destacado {
    color: #ffffff !important;
}

body.modo-contraste .enlace-texto-destacado:hover {
    color: #FF7F50 !important; /* Toque naranja al pasar el ratón */
}