/* ==========================================================================
   Forzar el esquema de color claro para todo el sitio
   ========================================================================== */
:root {
  color-scheme: light dark;
}

/* ------------------------------------------------------------------------------
	Typography
-------------------------------------------------------------------------------*/

p {
	font-size: 14px;
	line-height: 22.4px;
	color: #333;
}
h1 {
	font-size: 65px;
	color: #2d3033;
	
}
h2 {
    font-size: 40px;
    color: #2d3033;
    font-weight: 300;
    /* Por defecto, en pantallas grandes, es flex (icono y texto al lado) */
    display: flex;
    flex-direction: row; /* Icono y texto en fila */
    align-items: center; /* Centra verticalmente el icono y el texto */
    justify-content: center; /* Centra horizontalmente todo el contenido */
    gap: 15px; /* Espacio entre el icono y el texto */
}
h3 {
	font-size: 30px;
	color: #2d3033;
	font-weight: 700;
	padding-left: 10px;
	justify-content: center;
	
}
h4 {
	font-size: 40px;
	color: #2d3033;
	font-weight: 300;
}
h5 {
	font-size: 14px;
	color: #2d3033;
	text-transform: uppercase;
	font-weight: 300;
}

h6 {
	font-size: 12px;
	color: #333;
	text-transform: uppercase;
	font-weight: 300;
}


h7 {
	font-size: 12px;
	color: #2d3033;
	text-transform: uppercase;
	font-weight: 300;
}

h8 {
	font-size: 12px;
	color: #fff;
	font-weight: 300;
}
h1, h2, h3, h4, h5, h6, h7, h8{
	font-family: "Ubuntu", "Open Sans", "Arial", sans-serif;
}

/* ------------------------------------------------------------------------------
	Global Styles
-------------------------------------------------------------------------------*/
a {
	color: #ffd500;
}
a:hover, a:focus {
	text-decoration: none;
	-moz-transition: background-color, color, 0.3s;
	-o-transition: background-color, color, 0.3s;
	-webkit-transition: background-color, color, 0.3s;
	transition: background-color, color, 0.3s;
}
a.morebtn {
    border: 1px solid #ffd500;
    padding: 6px 18px;
    margin-top: 15px;
    display: inline-block;
}
a.morebtn:hover {
    color: #fff;
    background: #ffd500;
}


ul, ol {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}
.section {
	padding: 0px 0;
	margin-bottom: 00px;
}
.no-padding {
	padding: 0;
}
.no-gutter [class*=col-] {
	padding-right: 0;
	padding-left: 0;
}
.space {
	margin-top: 60px;
}


.icogrande {
	margin-top: 10px;
	algn-content: center;
}


.icogrande img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: -6px;
}

.icochico {
}
.icochico img {
	width: 40px;
	height: 40px;
	border-radius:20px;
	margin: auto;
}

/* -----------------------------------------------------------------------------
Common Styles
------------------------------------------------------------------------------- */
.section-header{	
	text-align: center;	
	padding-bottom: 30px;
	margin-top: 60px
}
.section-header h2{
	font-size: 48px;
}
/* --- CORRECCIÓN 1: HACER VISIBLE EL SUBTÍTULO --- */
.section-header p {
    color: #777;
    max-width: 650px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------------------------------------------- */
/* REGLAS BÁSICAS DEL SITIO */
/* ---------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;	
    font-family: sans-serif;
    background-color: #f4f4f4;
    color: #333;
    overflow-x: hidden;
}

body {
    padding-top: 62px;	
}

/* ---------------------------------------------------- */
/* ESTILOS PARA LA BARRA DE NAVEGACIÓN (CORREGIDO) */
/* ---------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1002;
    box-sizing: border-box;
}

.navbar.scrolled {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-logo img {
    height: 32px;
}

/* --- ESTILOS MENÚ DE ESCRITORIO --- */
.nav-links-desktop {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.nav-links-desktop li a {
    text-decoration: none;
    color: #333;
    font-weight: 300;
	text-transform: uppercase;
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    transition: color 0.3s ease;
}

.nav-links-desktop a:hover {
    color: #ffd500;
}

/* Ocultamos los elementos de móvil en escritorio por defecto */
.menu-toggle,
.nav-mobile {
    display: none;
}




/* --- LÓGICA PARA CAMBIAR EL LOGO EN MODO OSCURO (VERSIÓN CORREGIDA Y MÁS ESPECÍFICA) --- */

/* Por defecto (modo claro), mostramos el logo claro y ocultamos el oscuro */
/*.navbar-logo .logo-light {
    display: block !important;;
}
.navbar-logo .logo-dark {
    display: none !important;;
}*/



/* SI el usuario tiene el modo oscuro activado... */
@media (prefers-color-scheme: dark) {
    
    /* Invertimos la visibilidad */
   /* .navbar-logo .logo-light {
        display: none !important;;
    }
    .navbar-logo .logo-dark {
        display: block !important;;
    }*/
	
	
	/*.navbar {
    background-color: white;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}*/

	.navbar.scrolled {
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	
	
	
	/* PRUEBA: Si el modo oscuro se activa, la barra se pondrá rosa */
   /* .navbar {
        background-color: hotpink !important;
    }*/
    /* --- EJEMPLO EXTRA: CAMBIAR OTROS COLORES --- */
    /* Aquí podrías añadir otros estilos solo para el modo oscuro.
       Por ejemplo, para cambiar el fondo de tu sitio a un gris oscuro: */
    
    body {
        background-color: #fff;
    }
	/*
    .section-header h2, .section-header h5 {
        color: #f2f2f7;
    }
    .section-header p {
        color: #8d8d93;
    }
    */
}

/* ---------------------------------------------------- */
/* ESTILOS PARA EL SLIDER PRINCIPAL */
/* ---------------------------------------------------- */
.slider-principal {
    display: block;	
    position: relative;	
    width: 100%;
    z-index: 1;	
}

.slider-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- ESTILOS GLOBALES PARA LOS PUNTOS DE SLICK (MÉTODO ROBUSTO) --- */
/* Este bloque define la apariencia y comportamiento base para TODOS los circulitos */
.slick-dots {
    position: absolute;	
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    z-index: 100;
}

.slick-dots li {
    background-color: #bdbdbd; /* Color gris por defecto para los puntos */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Ocultamos completamente los elementos internos que vienen con slick-theme.css para evitar conflictos */
.slick-dots li button,
.slick-dots li button:before {
    display: none;
}

/* El punto activo SIEMPRE se verá amarillo, a menos que una regla más específica lo cambie */
.slick-dots li.slick-active {
    background-color: #ffd500;
}

/* --- REGLA ESPECÍFICA PARA EL SLIDER PRINCIPAL --- */
/* Esta regla asegura que los puntos del slider principal estén abajo */
.slider-wrapper .slick-dots {
    bottom: 25px;
}


/* ---------------------------------------------------- */
/* REGLAS PARA EL DISEÑO DEL GRID Y FANCYBOX */
/* ---------------------------------------------------- */
.galeria-container {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(1, 1fr);
}

.galeria-container .button-container {
    grid-column: 1 / -1; 
}

.proyecto-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.proyecto-galeria a:nth-of-type(n+2) {
    display: none;
}

.imagen-con-zoom {
    position: relative;
    width: 100%;
}

.imagen-con-zoom img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.imagen-con-zoom:hover img {
    transform: scale(1.1);
}

.marca-de-agua {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 5vw;
    max-width: 20px;
    height: auto;
    opacity: 0.7;
    z-index: 10;
}


.descripcion-imagen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.descripcion-imagen-overlay p {
    margin: 0;
    font-size: 1.2rem;
    padding: 5px;
}

.imagen-con-zoom:hover .descripcion-imagen-overlay {
    opacity: 1;
}

.fancybox-container {
    overflow: hidden !important;
}

.fancybox-content {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

.fancybox-image {
    position: relative !important;
    border: 5px solid #ffffff !important;
    border-radius: 10px !important;
    transform: none !important;
    box-sizing: content-box !important;
}

.fancybox-image-wrap {
    overflow: hidden !important;
    border-radius: 10px !important;
}

.fancybox-image::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-image: url('../images/favicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    z-index: 10;
}


/* ---------------------------------------------------- */
/* REGLAS PARA EL DISEÑO RESPONSIVO DEL GRID */
/* ---------------------------------------------------- */
@media (min-width: 768px) {
    .galeria-container {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.marca-de-agua {
        width: 20px;
    }
}

@media (min-width: 1024px) {
    .galeria-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .galeria-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------------------------------------------------- */
/* ESTILOS COMUNES DE LA BARRA DE NAVEGACIÓN (RESPONSIVE) */
/* ---------------------------------------------------- */
@media (min-width: 1024px) {
	.nav-links-desktop li a {
		font-weight: bold;
	}
}

/* ---------------------------------------------------- */
/* ESTILOS PARA MÓVIL (<= 768px) */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    .nav-links-desktop{
        display: none;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 20px;
        width: 30px;
        cursor: pointer;
        z-index: 1008;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #ffd500;
    }

    .nav-mobile {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .nav-mobile.active {
        transform: translateX(0);
    }

    .nav-mobile ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }

    .nav-mobile li {
        margin: 25px 0;
    }

    .nav-mobile a {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
        font-family: 'Ubuntu', sans-serif;
    }
    
    .nav-mobile a:hover {
        color: #ffd500;
    }

    .close-menu-mobile {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 2.5rem;
        color: white;
        text-decoration: none;
    }
	
    .fancybox-slide {
        padding: 15px !important;
    }

    .fancybox-image {
        box-sizing: border-box !important;
    }
}

/* --- SECCIÓN DE DOS COLUMNAS (VERSIÓN LIMPIA Y FINAL) --- */
.two-column-section {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

/* 1. ESTILOS PARA LA COLUMNA IZQUIERDA (CONTENEDOR DE LA FRASE) */
section.two-column-section > div.column-left {
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
    position: relative; 
}









.column-left-inner {
    width: 100%;
    height: 100%;
    min-height: 450px;
    padding: 40px;
    box-sizing: border-box;
    background-image: url('../images/frases/frase1.png');
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

.autor-frase {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    color: #888888;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    z-index: 10;
}

/* 2. ESTILOS PARA EL SLIDER Y SU CONTENIDO */
.column-left-inner .slider-container {
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-slider {
    width: 100%;
    max-width: 550px;
}

/* ESTA ES LA REGLA CLAVE PARA CENTRAR EL ICONO */
section.two-column-section div.column-left .text-slider .slide-text p {
    font-family: 'Ubuntu', sans-serif;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    color: #2d3033 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 3. ESTILOS PARA LA COLUMNA DERECHA (BOTONES DE DESCARGA) */
.column-right {
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.column-right h4 { /* Apuntamos al h4 que añadiste en el HTML */
    font-size: 2.5em;
    font-weight: 700;
    color: #2d3033;
    margin-bottom: 10px;
}

.column-right .subtitle {
    font-weight: 400;
    color: #666 !important; /* Forzamos el color correcto */
    margin-bottom: 30px;
    max-width: 300px;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.download-btn {
    display: inline-block;
    padding: 12px 28px;
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.download-btn:hover {
    background-color: #ffd500;
    border-color: #ffd500;
    color: #000;
}

/* 4. ESTILOS PARA LOS PUNTOS DE NAVEGACIÓN (FRASE) - POSICIÓN CORREGIDA */
section.two-column-section > div.column-left .slick-dots {
    position: absolute;
    bottom: -160px;      /* Misma altura que el autor */
    /*left: 20px; */       /* A la izquierda con el mismo padding */
    right: auto;       /* Anulamos el posicionamiento a la derecha */
    width: auto;
    padding: 10;
    margin: 10;
    text-align: left; /* Alineamos los puntos a la izquierda de su contenedor */
    z-index: 10;
}

/* El resto de las reglas para los circulitos no necesitan cambios */
.column-left .slick-dots li {
    background-color: #ccc;
}

.column-left .slick-dots li.slick-active {
    background-color: #ffd500;
}

/* 5. AJUSTES RESPONSIVE (DOS COLUMNAS) */
@media (max-width: 768px) {
    .column-left-inner {
        min-height: 350px;
        padding: 40px 20px;
    }
    section.two-column-section div.column-left .text-slider .slide-text p {
        font-size: 1.5em;
    }
    .column-right h4 {
        font-size: 2em;
    }
	
	section.two-column-section > div.column-left .slick-dots {
    position: absolute;
    bottom: -105px;      /* Misma altura que el autor */
    /*left: 20px; */       /* A la izquierda con el mismo padding */
    right: auto;       /* Anulamos el posicionamiento a la derecha */
    width: auto;
    padding: 10;
    margin: 10;
    text-align: left; /* Alineamos los puntos a la izquierda de su contenedor */
    z-index: 10;
}
	
	
	
	
	
	
}

/* --- Estilos para la sección de Contacto y Footer --- */

/* ---- REGLA MODIFICADA PARA DEGRADADO INVERSO ---- */
.footer-background {
    background: linear-gradient(to right, #ff5d00 0%, #ffd500 70%);
    padding: 30px 0 60px 0;
}

.map-container {
    position: relative;
    width: 100%;
    height: 450px;
}

.map-container iframe {
    vertical-align: top;
}

.contact-overlay {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 300px;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    color: #fff;
}

.contact-overlay h4 {
    margin-top: 0;
    font-family: 'Ubuntu', sans-serif;
    color: #ffd500;
    font-size: 2rem;
    font-weight: 400;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.contact-overlay address {
    font-style: normal;
}

.contact-email {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    margin-bottom: 5px;
    transition: color 0.3s;
}

.contact-email:hover {
    color: #ccc;
}

.contact-email img {
    width: 20px;
    margin-right: 35px;
}

.contact-email span {
    font-size: 1.2rem;
    font-weight: bold;
}

.contact-overlay small {
    display: block;
    margin-left: 55px;
    color: #bbb;
    margin-bottom: 25px;
}

.social-icons {
    margin-bottom: 25px;
    padding-top: 15px;
    border-top: 1px solid #555;
}

.social-icons a {
    margin-right: 15px;
}

.social-icons img {
    width: 35px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.social-icons img:hover {
    opacity: 1;
}

.copyright {
    margin: 0;
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1.4;
}

.location-subtitle {
    text-align: center;
    padding-bottom: 30px;
}

.location-subtitle h3 {
    margin: 0;
    font-size: 0.8rem;
    color: #FFFFFF;
    font-weight: 400;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .contact-overlay {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        transform: none;
        border-radius: 0;
        box-sizing: border-box;
    }

    .map-container {
        height: auto;	
    }

    .location-subtitle h3 {
        font-size: 1.4rem;
        padding: 0 15px;
    }
}

/* --- ESTILOS PARA BOTONES DE GALERÍA ('VER MÁS' Y 'VER MENOS') --- */
.ver-mas-container {
    text-align: center;
    padding: 20px 0 40px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.ver-mas-btn, .ver-menos-btn {
    display: inline-block;
    padding: 12px 28px;
    background-color: transparent;
    color: #2d3033;
    border: 1px solid #2d3033;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ver-mas-btn:hover, .ver-menos-btn:hover {
    background-color: #ffd500;
    border-color: #ffd500;
    transform: translateY(-2px);
}

/* ==========================================================================
   CONTROLES PERSONALIZADOS DE FANCYBOX
   ========================================================================== */
.fancybox-custom-controls {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
    opacity: 0;
    animation: fadeInControls 0.3s forwards 0.2s;
}

@keyframes fadeInControls {
    from { opacity: 0; top: -20px; }
    to { opacity: 1; top: 0; }
}

.fancybox-custom-controls .fancybox-toolbar {
    position: static !important;	
    width: auto !important;
    display: flex;
    padding: 0;	
    background: transparent;
}

.fancybox-custom-controls .fancybox-infobar {
    position: static !important;
    width: auto !important;
    font-size: 13px;
    color: #fff;
    background: transparent;
    padding: 0;
    line-height: 1;
    margin: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    white-space: nowrap;
    text-align: center;
}

.fancybox-button {
    width: 40px;
    height: 40px;
    margin: 0 2px;
    background: transparent;
    color: #ccc;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fancybox-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
}

.fancybox-slide--image .fancybox-content {
    padding: 0 !important;	
}

.fancybox-slide {
    padding-top: 60px;
}

/* ==========================================================================
   ESTILOS PARA ANIMACIONES CON GSAP
   ========================================================================== */
.anim-title-item,
.anim-subtitle {	
    opacity: 0;
    /*transform: translateY(-20px);*/
    visibility: hidden;	
}

.icogrande.anim-title-item {
    margin: 0;	
    padding: 0;	
    line-height: 0;	
}
.icogrande.anim-title-item img {
    display: block;	
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVE DESIGN)
   ========================================================================== */
@media (max-width: 768px) {
    h2 {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .icogrande.anim-title-item {
        margin-bottom: 10px;
    }
}

/* --- ESTILOS PARA SLIDER RESPONSIVE --- */
.slider-movil {
    display: none;
}

.slider-movil img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .slider-principal {
        display: none;
    }
    .slider-movil {
        display: block;
    }
}

/* --- AJUSTES FINALES PARA MÓVIL barra menú--- */
@media (max-width: 768px) {
  .navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .menu-toggle .bar {
    background-color: #ffd500;
  }
}

/* --- ELIMINAR ESPACIO BAJO EL SLIDER --- */
.slider-wrapper {
  font-size: 0;
  line-height: 0;
}

/* ==========================================================================
   NUEVOS ESTILOS PARA LA SECCIÓN DE REFERENTES
   ========================================================================== */
.referente-carousel-section {
    padding: 60px 0 80px 0;
    background-color: #f4f4f4; /* Color de fondo si la imagen no carga */
    position: relative;
    
    /* --- IMAGEN DE ESCRITORIO --- */
    background-image: url('../images/referentes/fondo_escritorio.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	
	
	
}

.referente-carousel {
    max-width: 1000px;
    margin: 0 auto;
}

.referente-carousel .slick-slide {
    padding: 0 15px;
    height: auto;
}

.referente-carousel .slick-list {
    padding-top: 10px;
}

/* REEMPLAZA TU REGLA .referente-item CON ESTAS DOS */

.referente-item {
	padding: 10px;
	cursor: pointer;
	/* Dejamos este contenedor limpio para que el carrusel lo controle */
}

.referente-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.3s ease;
	position: relative;
	z-index: 2;
}

.referente-foto {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 5px solid transparent;	
    transition: border-color 0.3s ease;
    overflow: hidden;
}

.referente-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


.referente-info .referente-nombre {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2d3033;
    margin: 0 0 5px 0;
    transition: color 0.3s ease;
}

.referente-info .referente-puesto {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    min-height: 40px;	
}

.referente-item:hover .referente-foto {
    border-color: #ffd500;
}
.referente-item:hover .referente-nombre {
    color: #ffd500;
}

.referente-carousel-section .slick-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent;
    box-shadow: none;
    width: 40px;
    height: 40px;
    border: none;
}

.referente-carousel-section .slick-arrow:before {
    color: #555555;
    font-size: 30px;
    text-shadow: none;
    transition: color 0.3s ease;
}

.referente-carousel-section .slick-arrow:hover:before {
    color: #ffd500;
}

.referente-carousel-section .slick-prev { left: -15px; }
.referente-carousel-section .slick-next { right: -15px; }

.referente-carousel-section .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 40px;
}

.referente-carousel-section .slick-dots li button:before {
    font-size: 12px;
    color: #c4c4c4;
}
.referente-carousel-section .slick-dots li.slick-active button:before {
    color: #ffd500;
}

/* ESTILOS PARA EL MODAL DE REFERENTES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    display: none;
}

.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 1051;
    width: 90%;
    max-width: 450px;
    padding: 25px;
    display: none;
}

.modal-cerrar {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}
.modal-cerrar:hover { color: #2d3033; }

.modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.modal-foto {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.modal-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-nombre {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3033;
}

.modal-detalles-body p {
    color: #333;
    margin: 0 0 10px 0;
}
.modal-detalles-body .modal-cargo-completo {
    font-weight: 500;
}
.modal-detalles-body .modal-relacion {
    font-style: italic;
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.modal-contacto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.modal-contacto .modal-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.modal-contacto .modal-link:hover {
    color: #ffd500;
}

.modal-contacto .modal-link img {
    height: 20px;
    width: 20px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.modal-contacto .modal-link:hover img {
    opacity: 1;
}

.modal-contacto .modal-link span {
    font-size: 0.9rem;
    line-height: 1;
}

@media (max-width: 1100px) {
    .referente-carousel-section .slick-prev { left: 10px; }
    .referente-carousel-section .slick-next { right: 10px; }
}





/* ==========================================================================
   ESTILOS PARA LA SECCIÓN ABOUT (CON CORRECCIÓN FINAL DE IMAGEN)
   ========================================================================== */

/* AJUSTE: Eliminar separación vertical entre secciones */
#about.two-column-section {
    padding-top: 0;
    padding-bottom: 30px; /* Dejamos un pequeño respiro inferior */
}
.servicios-section .section-header {
    margin-top: 30px; /* Reducimos el margen superior de la sección SKILLS */
}


.column-right .section-header {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 0;
    margin-top: 0;
}

.about-content {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* El contenedor principal de la imagen */
.about-image {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    border-radius: 50%; /* Contenedor circular */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* 1. Se aplica el fondo degradado al contenedor */
    background: linear-gradient(to bottom right, #FF7F50 25%, #ffd500 75%);
    
    /* 2. Este padding crea el espacio para que el borde sea visible */
    padding: 5px; 
}

/* La imagen en sí, que va dentro del contenedor */
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* 3. La imagen también es circular para encajar perfectamente */
    border-radius: 50%;
}

/* Frame interior: crea el borde degradado */
.about-image-frame {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #FF7F50 25%, #ffd500 75%);
    padding: 5px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 4px));
}



.about-text-wrapper {
    flex: 1;
    text-align: left;
}

.about-subtitle {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin: 0 0 10px 0;
    font-weight: 400;
}

.about-text {
    font-family: "Ubuntu", "Open Sans", "Arial", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    font-weight: 400;
    margin: 0;
}

.language-switcher {
    margin-top: 25px;
    display: flex;
    gap: 8px;
}

.lang-flag {
    width: 24px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.lang-flag:hover {
    opacity: 1;
    transform: scale(1.05);
}

.lang-flag.active {
    border-color: #ffd500;
    opacity: 1;
}


.language-texts {
     /* min-height: 160px; */ /* <-- Simplemente elimina o comenta esta línea */
}




/* --- Ajustes Responsivos para About --- */
@media (max-width: 768px) {
    .about-subtitle {
        text-align: center;
        font-size: 15px;
        margin-bottom: 20px;
    }
    .about-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .about-text-wrapper {
        text-align: center;
    }
    .language-switcher {
        justify-content: center;
        margin-top: 20px;
    }
    .about-image {
        flex: 0 0 160px;
        width: 160px;
        height: 160px;
        padding: 4px; /* Borde un poco más fino en móvil */
    }
    .about-image-frame {
        padding: 4px;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px));
    }
    .language-texts {
       /* min-height: 220px;*/ /* Ajusta también este valor para móvil */
    }
}

@media (max-width: 480px) {
     .about-image {
        flex: 0 0 140px;
        width: 140px;
        height: 140px;
        padding: 3px; /* Borde aún más fino en móvil pequeño */
    }
    about-image-frame {
        padding: 3px;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
    }
}



/* ==========================================================================
   ESTILOS ADICIONALES PARA LAS NUEVAS SECCIONES (Añadir al final del CSS)
   ========================================================================== */

/* 1. ESTILOS PARA LA SECCIÓN DE GALERÍA MODIFICADA */
.gallery-wrapper {
    padding: 0 20px; /* Mismo padding que el .galeria-container original */
}

.gallery-description {
    text-align: center;
    color: #666; 
    max-width: 800px;
    margin: 30px auto 20px auto; /* Espaciado superior e inferior */
    font-size: 16px;
    line-height: 1.6;
}

.button-container-center {
    text-align: center;
    margin-bottom: 30px;
}

/* Reutilizamos la clase .download-btn para el nuevo botón */
.button-container-center .download-btn {
    text-transform: uppercase;
    font-weight: 700;
}
/* Elimina el botón original que estaba dentro del grid */
.galeria-container .button-container {
	display: none;
}


/* 2. ESTILOS PARA LA NUEVA SECCIÓN SUMMARY */
.summary-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Fondo blanco para separarla visualmente */
	/*position: relative;*/ /* Necesario para el fondo */

    /* --- IMAGEN DE ESCRITORIO AÑADIDA --- */
    background-image: url('../images/creative/fondo_creative.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.summary-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.summary-text {
    font-family: "Ubuntu", "Open Sans", "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    font-weight: 400;
    margin: 0;
    min-height: 150px; /* Altura mínima para evitar saltos de layout al cambiar de idioma */
}

.summary-content .language-switcher {
    margin-top: 25px;
    display: flex;
    gap: 8px;
    justify-content: center; /* Centramos las banderas */
}


/* 3. ESTILOS PARA EL REPRODUCTOR DE VIDEO A PANTALLA COMPLETA */
.video-player-container {
    width: 100%; 
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #000; /* Fondo negro por si el video tarda en cargar */
    line-height: 0; /* Elimina posible espacio extra debajo del video */
}

#fullscreen-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el contenedor sin deformar la imagen */
}




/* ==========================================================================
   BLOQUE DE CORRECCIÓN FINAL Y DEFINITIVO (OCT 2025)
   ========================================================================== */

/* 1. AISLAMIENTO DE ESTILOS PARA SUMMARY */
.summary-language-switcher { margin-top: 25px; display: flex; gap: 8px; justify-content: center; }
.summary-lang-flag { width: 24px; height: auto; cursor: pointer; border: 2px solid transparent; border-radius: 4px; transition: all 0.2s ease; opacity: 0.7; }
.summary-lang-flag:hover { opacity: 1; transform: scale(1.05); }
.summary-lang-flag.active { border-color: #ffd500; opacity: 1; }

/* 2. CORRECCIÓN DEFINITIVA PARA ABOUT */
/* Establecemos la sección como flexbox para alinear las columnas */
#about.two-column-section {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se apilen en móvil */
}
/* La columna derecha será un flex container vertical */
#about .column-right {
    display: flex;
    flex-direction: column;
    padding: 40px;
}
/* El contenido principal ocupará todo el espacio vertical disponible */
#about .about-content {
    flex-grow: 1;
}
/* Eliminamos el margen superior del título "ABOUT" que causaba el desfase */
#about .column-right .section-header {
    margin-top: 0;
    padding-bottom: 20px;
    width: 100%;
}

/* 3. CORRECCIÓN PARA IMÁGENES DE REFERENTES (FORMA DE OJO) */
.referente-foto {
    aspect-ratio: 1 / 1; /* Obliga al contenedor a ser un cuadrado perfecto */
    width: 90px;
    height: 90px;
}
.referente-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
}

/* 4. CORRECCIÓN PARA OVERLAY DEL MAPA */
.map-container {
    position: relative; /* Asegura el contexto de posicionamiento */
}
.contact-overlay {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 300px;
    padding: 25px;
}
/* Media query para asegurar que en móvil el overlay ocupe todo el ancho */
@media (max-width: 768px) {
    .contact-overlay {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        transform: none;
        box-sizing: border-box;
    }
	.referente-carousel-section {
        background-image: url('../images/referentes/fondo_movil.jpg');
    }
	.summary-section {
        background-image: url('../images/creative/fondo_creative_movil.jpg');
    }
}

/* AÑADIR DENTRO DEL BLOQUE DE CORRECCIONES EN style.css */

/* 5. CORRECCIÓN PARA TEXTO PÁLIDO EN SUMMARY */
.summary-lang-text {
    color: #333; /* Mismo color oscuro que el resto de los textos */
}



/* ==========================================================================
   ESTILOS PARA LA NUEVA LÍNEA CREATIVA (SECCIÓN SUMMARY) - VERSIÓN 2
   ========================================================================== */

/* Regla para hacer el título H2 de esta sección específico en negrita */
#summary .section-header h2 {
    font-weight: 700; /* Bold */
}

/* Estilo para el texto principal de la sección */
.summary-lang-text {
    font-size: 20px;
    line-height: 1.7;
    font-weight: 400;
    color: #333;
}

/* Las palabras en negrita simple usarán el peso de fuente por defecto de <strong> */
.summary-lang-text strong {
    font-weight: 700; /* Aseguramos que sea bold */
}

/* Clase para las palabras con el fondo degradado */

.highlight-yellow {
    /* Quitamos el fondo para eliminar el contenedor */
    background: none; 
    
    /* El texto vuelve a su color oscuro original */
    color: #2d3033; 
    
    /* Creamos el subrayado usando una imagen de fondo degradada */
    background-image: linear-gradient(to right, #ff8c00, #ffd500 70%);
    background-repeat: no-repeat;
    
    /* Definimos el tamaño de la "imagen" (nuestro subrayado) */
    background-size: 100% 4px; /* 100% de ancho y 4px de grosor */
    
    /* Posicionamos la línea en la parte inferior */
    background-position: 0% 100%;
    
    /* Añadimos un pequeño espacio entre el texto y la nueva línea */
    padding-bottom: 4px; 
}






/* Pequeño ajuste para el modo oscuro, si lo usas */
@media (prefers-color-scheme: dark) {
    .summary-lang-text {
        color: #333; /* Texto claro en fondo oscuro */
    }
}





/* ==========================================================================
   CORRECCIÓN DE COLOR DE TEXTO Y BOLD (OCT 2025)
   ========================================================================== */
.about-text-wrapper .about-text {
    color: #333 !important; /* Asegura que el texto principal sea oscuro */
    font-weight: 400;
}

.about-text-wrapper .about-text strong {
    color: #000 !important; /* Asegura que el texto en negrita sea negro */
    font-weight: 700;
}




/* ==========================================================================
   AJUSTE FORZADO PARA COLOR DE TEXTO EN TABLETS (CREATIVE LINE)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    section#summary .summary-lang-text {
        color: #333 !important; /* Se usa !important para garantizar la máxima prioridad */
    }
	sumamary-content {
        color: #333 !important; /* Se usa !important para garantizar la máxima prioridad */
    }
}

@media (min-width: 540px) and (max-width: 1024px) {
    section#summary .summary-lang-text {
        color: #333 !important; /* Se usa !important para garantizar la máxima prioridad */
    }
	sumamary-content {
        color: #333 !important; /* Se usa !important para garantizar la máxima prioridad */
    }
	
}



/* ==========================================================================
   ESTILOS PARA EL SELECTOR DE IDIOMA GLOBAL
   ========================================================================== */

/* Contenedor en el menú de escritorio */
.language-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 15px; /* Espacio para separarlo del último item del menú */
}

.language-selector a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Estilo para el idioma activo */
.language-selector a.active {
  color: #000;
  background-color: #ffd500;
  border-color: #ffd500;
}

.language-selector a:not(.active):hover {
  color: #ffd500;
}

/* Estilos para el menú móvil */
.language-selector-mobile {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.language-selector-mobile a {
    display: block;
    margin: 10px 0;
    font-size: 1.2rem;
    color: #ccc;
}

.language-selector-mobile a.active {
    color: #ffd500;
    font-weight: bold;
}

/* ==========================================================================
   ESTILOS PARA EL MENÚ DROPDOWN DE ESCRITORIO
   ========================================================================== */

/* Contenedor del elemento de menú que tendrá un desplegable */
.nav-links-desktop .dropdown {
    position: relative; /* Contexto para el posicionamiento del submenú */
}

/* El submenú en sí (oculto por defecto) */
.dropdown .submenu {
    display: none;
    position: absolute;
    top: 100%; /* Se posiciona justo debajo del elemento padre */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    list-style: none;
    min-width: 220px; /* Ancho mínimo para que los textos no se rompan */
    z-index: 1003;
}

/* Al pasar el ratón por encima del padre, se muestra el submenú */
.nav-links-desktop .dropdown:hover .submenu {
    display: block;
}

/* Estilos de cada elemento del submenú */
.submenu li {
    margin: 0;
}

.submenu li a {
    display: block; /* Ocupa todo el ancho para facilitar el clic */
    padding: 10px 20px;
    color: #333;
    font-weight: normal; /* El texto del submenú en peso normal */
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efecto hover para los elementos del submenú */
.submenu li a:hover {
    background-color: #f4f4f4;
    color: #000;
}

/* Estilo para el enlace activo (la página actual) */
.submenu li a.active {
    color: #ffd500; /* Usa el color de acento de tu marca */
    font-weight: bold;
}

/* Indicador visual (flecha) para el elemento con dropdown */
.nav-links-desktop .dropdown > a::after {
    content: ' ▼';
    font-size: 0.6em;
    vertical-align: middle;
    margin-left: 5px;
}


/* ==========================================================================
   ESTILOS PARA SECCIÓN CREATIVE LINE CON IMAGEN (SUMMARY)
   ========================================================================== */

/* Hacemos que el contenedor principal sea un flex container */
.summary-content {
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    gap: 40px; /* Espacio entre la imagen y el texto */
    max-width: 1100px; /* Aumentamos el ancho máximo para dar espacio */
}

/* Columna de la imagen */
.summary-image-column {
    flex: 1; /* Ocupa el 50% del espacio disponible */
}

.summary-image-column img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Bordes redondeados para la imagen */
}

/* Columna del texto */
.summary-text-column {
    flex: 1; /* Ocupa el otro 50% del espacio */
    text-align: left; /* Alineamos el texto a la izquierda en escritorio */
}

/* Ajuste responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .summary-content {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 30px;
    }

    .summary-text-column {
        text-align: center; /* Centramos el texto en móvil */
    }
}







/* ==========================================================================
   ESTILOS PARA SELECTOR DE IDIOMA EN MÓVIL (VERSIÓN CON FLECHA)
   ========================================================================== */

/* 1. Contenedor principal para los elementos de la derecha en móvil */
.navbar-right-mobile {
    display: none; /* Oculto por defecto en escritorio */
    align-items: center;
    gap: 20px; /* Espacio entre el selector de idioma y el icono de hamburguesa */
}

/* 2. Estilos del selector de idioma */
.mobile-lang-selector {
    position: relative;
    cursor: pointer;
}

/* Contenedor de la bandera y la flecha */
.current-lang {
    display: flex;
    align-items: center;
    gap: 6px; /* Espacio entre la bandera y la flecha */
}

.current-lang img {
    height: 24px;
    width: auto;
    display: block;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* 3. Estilos de la flecha desplegable */
.current-lang-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333; /* Color de la flecha */
    transition: transform 0.3s ease; /* Animación suave para la rotación */
}

/* 4. Rotación de la flecha cuando el menú está activo */
.mobile-lang-selector.active .current-lang-arrow {
    transform: rotate(180deg);
}


/* 5. Estilos del menú desplegable de banderas (sin cambios) */
.lang-dropdown-mobile {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 1010;
    border: 1px solid #eee;
}

.mobile-lang-selector.active .lang-dropdown-mobile {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lang-dropdown-mobile a {
    display: block;
    line-height: 0;
}

.lang-dropdown-mobile a img {
    height: 24px;
    width: auto;
    border-radius: 3px;
    transition: transform 0.2s ease;
}

.lang-dropdown-mobile a:hover img {
    transform: scale(1.1);
}


/* ==========================================================================
   AJUSTES RESPONSIVE PARA MOSTRAR/OCULTAR ELEMENTOS
   ========================================================================== */

@media (max-width: 768px) {
    /* Mostramos el nuevo contenedor en móvil */
    .navbar-right-mobile {
        display: flex; 
    }
}






/* ==========================================================================
   ESTILOS PARA BANNER DE COOKIES FLOTANTE INFERIOR (OCT 2025)
   ========================================================================== */

#cookie-consent-banner {
    /* --- Posicionamiento y Visibilidad --- */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Por encima de todo */
    display: none; /* Oculto por defecto, JS lo mostrará */

    /* --- Estilos Visuales --- */
    background-color: #2d3033; /* Un fondo oscuro para que destaque */
    color: #f0f0f0;
    padding: 15px 25px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

    /* --- Flexbox para alinear contenido --- */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    
    /* --- Animación de entrada --- */
    transform: translateY(100%); /* Empieza fuera de la pantalla, abajo */
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

#cookie-consent-banner.visible {
    transform: translateY(0); /* Vuelve a su posición original */
    opacity: 1;
}

#cookie-consent-banner p {
    margin: 0;
    font-size: 14px;
    color: #f0f0f0;
    flex-grow: 1; /* El texto ocupa el espacio disponible */
    text-align: center;
}

#cookie-consent-banner a {
    color: #ffd500; /* Color de acento */
    text-decoration: underline;
    font-weight: bold;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Evita que los botones se encojan */
}

#cookie-consent-banner button {
    padding: 8px 16px;
    border: 1px solid #777;
    background-color: transparent;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#cookie-consent-banner button:hover {
    background-color: #444;
    border-color: #999;
}

#cookie-consent-banner #cookie-accept-btn {
    background-color: #ffd500;
    border-color: #ffd500;
    color: #2d3033;
}

#cookie-consent-banner #cookie-accept-btn:hover {
    background-color: #ffc400;
    border-color: #ffc400;
}

/* --- Ajustes para Móvil --- */
@media (max-width: 768px) {
    #cookie-consent-banner {
        flex-direction: column; /* Apila los elementos verticalmente */
        padding: 20px;
        gap: 15px;
    }

    #cookie-consent-banner p {
        text-align: center; /* Centra el texto en móvil */
    }
}


/* ==========================================================================
   AJUSTE PARA GIF DE FLECHAS EN LA LÍNEA DE TIEMPO (CON HOVER)
   ========================================================================== */
.service-arrow {
    /* Estilos comunes para ambos GIFs */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    /* Añadimos una transición suave para el cambio de opacidad */
    transition: opacity 0.2s ease-in-out;
}

/* Por defecto, la flecha negra (hover) está totalmente transparente */
.service-arrow-hover {
    opacity: 0;
}

/* Cuando el cursor pasa por encima del enlace del servicio... */
.timeline-point-link:hover .service-arrow-hover {
    /* ...hacemos visible la flecha negra */
    opacity: 1;
}

.timeline-point-link:hover .service-arrow-default {
    /* ...y al mismo tiempo, ocultamos la flecha blanca */
    opacity: 0;
}