/* 1. Paleta Dark Mode */
html {
    scroll-behavior: smooth; /* Para el scroll lento de las anclas */
}
/* NUEVO: Solución para que el Header Fijo no tape las secciones */
#seccion-inicio,
#seccion-relevo,
#seccion-youtube,
#seccion-contacto,
#seccion-camino,
#seccion-faq {
    scroll-margin-top: 82px; /* Alto exacto de tu header */
}
body { 
    font-family: 'Lato', Arial, sans-serif; 
    text-align: center; 
    background-color: #1a1a1a; 
    color: #e0e0e0; 
    margin: 0;
    padding: 0; 
    padding-top: 82px; /* CAMBIO: Dejamos espacio para el nuevo header (60px + 30px padding + 1px borde) */
}

/* 2. Header Fijo con Menú (MODIFICADO) */
.main-header {
	/* CAMBIO: Fondo blanco con 50% transparencia */
	background-color: rgba(255, 255, 255, 1);
	border-bottom: 2px solid #002060; /* CAMBIO: Borde inferior con tu Azul Marino */
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed; /* Fijo arriba */
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: 50px; /* Mantenemos 60px */
}

/* NUEVO: Contenedor para Logo + Título */
.header-brand {
    display: flex;
    align-items: center;
    text-decoration: none; 
}

.header-logo {
    height: 50px; 
    width: auto;
    margin-right: 15px; 
}

/* NUEVO: Título en el Header */
.header-title {
    font-family: 'Merriweather', 'Times New Roman', serif;
    color: #002060; /* CAMBIO: Tu color Azul Marino */
    font-size: 1.6em; 
    font-weight: 700;
    margin: 0;
    display: block; 
}

.hamburger-menu {
    width: 40px;
    height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.hamburger-menu .bar {
	width: 100%;
	height: 4px;
	background-color: #002060; /* CAMBIO: Interior Azul Marino */
	border-radius: 2px;
	transition: all 0.3s ease;
	/* NUEVO: Borde Amarillo Sutil (usando sombra) */
	box-shadow: 0 0 0 1px #002060;
}

/* 3. Menú Desplegable */
.nav-menu {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 82px; /* CAMBIO: Ajustado al nuevo alto del header (60+15+15+1) */
    left: 0;
    right: 0;
    background-color: #2a2a2a;
    padding: 20px 0;
    border-bottom: 1px solid #444;
    z-index: 999;
}
.nav-menu.show {
    display: block; /* Se muestra al hacer clic */
}
.nav-menu a {
    display: block;
    padding: 15px 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.2em;
    font-family: 'Merriweather', serif;
}
.nav-menu a:hover {
    background-color: #002060; /* Tu Azul Marino */
}

/* 4. Contenedores de contenido */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* Banda 1: Cabecera (Títulos) */
.header-section {
	padding-top: 30px;
	padding-bottom: 30px;
}

h1.brand-title { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    color: #FFFFFF; 
    font-size: 2.2em;
    margin: 0;
}
p.slogan {
    font-size: 1.2em;
    color: #aaaaaa; 
    margin-top: 10px;
    margin-bottom: 20px;
}
/* NUEVO: Estilo para destacar keywords en el eslogan */
.slogan-highlight {
    color: #FFC107; /* Tu color Acento Amarillo */
    font-weight: 700; /* Negrita */
}

/* Banda 2: Intro e Imagen */
.intro-section {
     padding-top: 10px; /* AÑADIDO: Reduce el espacio superior */
     padding-bottom: 40px;
}

p.intro-text {
	font-size: 1.1em;
	line-height: 1.7;
	max-width: 700px;
	margin: 0 auto 30px auto;
}

img.studio-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}
/* NUEVO: Estilos para el pie de foto (figcaption) */
figure.studio-figure {
    margin: 0 0 30px 0; /* Margen normal para escritorio */
    /* El resto de estilos de la figura... */
}

figcaption.studio-caption {
	font-family: 'Lato', Arial, sans-serif;
	color: #aaaaaa; /* Un gris claro, como el eslogan */
	font-size: 1em;
	font-style: italic;
	margin-top: 10px; /* Espacio entre la foto y el texto */
}

hr { border: 0; border-top: 1px solid #444; margin: 40px 0; } 

/* 5. Banda 3: Segmentador */
.segment-section-wrapper {
    background-color: #2a2a2a; 
    padding: 50px 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.segment-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.segment-box {
    flex-basis: 48%;
    padding: 30px;
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #1a1a1a; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.segment-box h2 {
    font-family: 'Merriweather', 'Times New Roman', serif;
    color: #FFC107; /* Acento Amarillo */
    margin-top: 0;
}
.segment-box p {
    font-size: 1.0em;
    line-height: 1.6;
    color: #e0e0e0;
} 

/* Efecto "lift" al pasar el ratón (CORREGIDO) */
.segment-box:hover {
    transform: translateY(-8px); /* "Levanta" la caja 8 píxeles */
    box-shadow: 0 8px 20px rgba(0,0,0,0.6); /* Sombra más grande */
}

/* 6. Botones con nueva paleta */
.button { 
    display: inline-block; 
    padding: 12px 25px; 
    margin-top: 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    font-weight: bold;
    font-family: 'Lato', Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 1.1em;
    border: none;
}
.button-vendedor { 
    background-color: #FFC107; 
    color: #1a1a1a; 
}
.button-vendedor:hover { 
    background-color: #FFFFFF; 
    color: #1a1a1a;
}
/* Botón Opositor: MODIFICADO a Azul (tu acento) */
.button-opositor { 
    background-color: #002060; /* Tu Azul Marino */
    color: #FFFFFF;
}
.button-opositor:hover { 
    background-color: #003399; /* Un azul un poco más claro al pasar */
    color: #FFFFFF; 
}
/* MODIFICADO: Estilo para el botón de YouTube (Icono + Texto) */
.button-secondary {
	background-color: #FF0000; /* Rojo YouTube */
	color: #FFFFFF;
	font-size: 1.1em;
	padding: 12px 25px;
	margin-top: 15px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-family: 'Lato', Arial, sans-serif;
	transition: background-color 0.3s ease;
	border: none;
	/* NUEVO: Flex para alinear Icono + Texto */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px; /* Espacio entre icono y texto */
}

.texto-negro {
	color: #000000;
}

.button-secondary:hover { 
    background-color: #cc0000; /* Rojo más oscuro */
}

/* NUEVO: Estilo para el icono dentro del botón */
.button-secondary .button-icon {
    height: 1.2em; /* Se ajusta al tamaño del texto */
    width: auto;
}

/* 7. NUEVO: Banda 4: Sección YouTube */
.youtube-section-wrapper {
    padding: 50px 0;
    /* Sin fondo, para que sea de color #1a1a1a */
}

/* NUEVO: Estilos para el Carrusel/Cinta de Vídeos */

/* 1. El enlace grande (quitamos el subrayado) */
.marquee-link-wrapper {
    text-decoration: none;
    display: block; /* Hacemos que ocupe el ancho */
    margin-top: 40px; /* Espacio después del botón rojo */
}

/* 2. El contenedor (la "ventana") */
.marquee-wrapper {
    width: 100%;
    overflow: hidden; /* Oculta lo que no se ve */
}

/* 3. La "cinta" que se mueve */
.marquee-track {
    display: flex;
    /* La animación (scroll) durará 30s y será lineal e infinita */
    animation: scroll 30s linear infinite;
}

/* 4. La animación (de 0% a -100% de su ancho) */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* 5. ¡LA CLAVE! Se para al pasar el ratón */
.marquee-track:hover {
    animation-play-state: paused;
}

/* 6. Cada miniatura */
.video-thumbnail {
    flex-shrink: 0; /* Evita que se encojan */
    width: 250px; /* Ancho fijo para cada vídeo */
    margin: 0 10px; /* Espacio entre vídeos */
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden; /* Para que la imagen respete el borde */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.video-thumbnail img {
    width: 100%;
    display: block;
    border-bottom: 3px solid #FFC107; /* Acento amarillo */
}
.video-thumbnail .video-title {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    padding: 15px;
    display: block;
    text-align: left; /* Títulos alineados a la izquierda */
    color: #e0e0e0;
}

/* 8. NUEVO: Banda 5: Sección Contacto */
.contact-section-wrapper {
    background-color: #2a2a2a; /* Fondo de banda */
    padding: 0 0 50px 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}
.contact-section-wrapper h2 {
    color: #FFC107;
    font-family: 'Merriweather', serif;
    margin-top: 0;
}


.contact-form {
    max-width: 600px;
    margin: 10px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form input,
.contact-form textarea {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.1em;
    padding: 12px;
    border: 1px solid #444;
    background-color: #333;
    color: #e0e0e0;
    border-radius: 5px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999;
}

/* MODIFICADO: Regla Híper-Específica con !important */
.intro-text .contact-form-text-link {
	color: #FFC107 !important; /* Tu Acento Amarillo (FORZADO) */
	text-decoration: none;
	font-weight: bold;
	transition: color 0.3s ease;
}
.intro-text .contact-form-text-link:hover {
    color: #FFFFFF !important; /* Blanco al pasar el ratón (FORZADO) */
}

/* 9. Banda 6: Pie de Página */
footer.footer-wrapper {
    background-color: #1a1a1a; 
    padding: 30px 0;
    margin-top: 0;
    font-size: 0.9em;
    color: #aaaaaa; 
}

.page-content-section {
	text-align: center;
	background-color: #2a2a2a;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 40px 20px;
}
.page-content-section h2 {
    font-family: 'Merriweather', serif; 
    color: #FFC107; 
    margin-top: 40px;
    text-align: center;
    font-size: 1.8em;
}
.page-content-section p, .page-content-section li {
	line-height: 1.7;
	margin-bottom: 15px;
	color: #e0e0e0;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
        
/* NUEVO: Estilo para los Pasos del Proceso (Tu "Camino") */
.process-step {
    background-color: #1a1a1a;
    border-left: 4px solid #FFC107; /* Línea amarilla a la izquierda */
    padding: 20px;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 8px 8px 0;
}
.process-step h3 {
	font-family: 'Lato', Arial, sans-serif;
	color: #FFFFFF;
	margin-top: 0;
	font-size: 1.2em;
	text-align: left;
}
.process-step p {
	margin-bottom: 0;
	font-size: 1em;
	text-align: left;
}


/* Responsive para móviles */
@media (max-width: 768px) {
    .segment-wrapper { flex-direction: column; }
    .segment-box { flex-basis: 100%; }
    
    /* === INICIO DE CAMBIOS === */

    /* Ajuste de responsive para header */
    .main-header { 
        padding: 10px 20px; 
        height: 40px; /* Aumentamos el alto: 40px logo + 10+10 padding = 60px */
    }
    .header-logo { 
        height: 40px; /* 1. Aumentamos el tamaño del logo */
    }
    body { 
        padding-top: 61px; /* 2. Ajustamos el padding al nuevo alto: 60px header + 1px borde */
    }
    .nav-menu { 
    top: 61px; /* 3. Ajustamos el menú al nuevo alto */

    /* NUEVO: Hacemos el menú scrollable en móviles */
    max-height: 70vh; /* Máximo 70% del alto de la pantalla */
    overflow-y: auto; /* Añade barra de scroll SI es necesario */
}
    
    /* 4. MODIFICADO: No ocultamos el título, lo hacemos más pequeño */
    .header-title {
        font-size: 1.1em; /* Reducimos el tamaño para que quepa */
        display: block; /* Nos aseguramos que sea visible */
    }
	
	figure.studio-figure {
        margin-bottom: 15px; 
    }
	
    /* 5. ELIMINADO: Ya no necesitamos la regla .header-brand { margin-right: auto; } */
    
    /* === FIN DE CAMBIOS === */
}

/* 10. NUEVO: Estilos del Banner de Cookies (CORREGIDO: Fuera del @media) */
.cookie-banner {
    display: none; /* CORREGIDO: Oculto por defecto */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2a2a2a; /* Fondo oscuro */
    border-top: 1px solid #444;
    padding: 20px;
    z-index: 1001; /* Encima de todo */
    
    /* Para alinear el texto y el botón */
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.cookie-banner p {
    margin: 0;
    font-size: 0.9em;
    color: #aaaaaa;
    max-width: 600px;
    text-align: left;
}
.cookie-banner .button {
    margin-top: 0; /* Anula el margen del botón */
    flex-shrink: 0; /* Evita que el botón se encoja */
	font-size: 0.9em;
	padding: 4px 10px;
}

/* Responsive para el banner de cookies en móvil (CORREGIDO: Fuera del @media principal) */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column; /* Botón debajo del texto */
        gap: 15px;
    }
    .cookie-banner p {
        text-align: center;
    }
	/* Ocultar botón "Subir" en móvil */
	.scroll-top-btn {
    	display: none !important;
	}
}


/* 9b. Estilos para los enlaces legales del footer */
.footer-legal-links {
    padding-bottom: 10px;
}
.footer-legal-links a {
    color: #aaaaaa; /* Gris claro (como el copyright) */
    text-decoration: none;
    font-size: 0.9em;
    margin: 0 10px;
    transition: color 0.3s ease;
}
.footer-legal-links a:hover {
    color: #FFFFFF; /* Blanco al pasar el ratón */
}
.footer-legal-links span {
    color: #555; /* Color del separador | */
}




/* 11. NUEVO: Estilos del Botón "Subir" */
.scroll-top-btn {
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1002; /* Debajo del menú (999) y cookies (1001) */

    background-color: #FFC107; /* Tu Acento Amarillo */
    color: #1a1a1a; /* Texto oscuro */
    border: none;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 1.5em; /* Flecha grande */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s, visibility 0.3s;
}
.scroll-top-btn.show {
    opacity: 1; /* JS lo mostrará */
    visibility: visible;
}
/* --- Estilos para Vídeos Incrustados (YouTube) --- */
.video-responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 30px;
    border: 1px solid #444;
}

.video-responsive-container iframe,
.video-responsive-container object,
.video-responsive-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Estilo para las preguntas */
.faq-title {
    font-family: 'Merriweather', serif;
    color: #FFFFFF; /* Pregunta en blanco para destacar */
    font-size: 1.2em;
    margin-top: 30px;
    border-bottom: 1px solid #FFC107; /* Subrayado amarillo fino */
    padding-bottom: 10px;
    display: inline-block;
}

/* Utilidad para quitar espacio inferior solo donde lo necesitemos */
.sin-padding-abajo {
    padding-bottom: 0 !important;
}

/* Reducir el margen superior de la caja de contenido solo en móvil */
@media (max-width: 768px) {
    .page-content-section {
        margin-top: 15px; /* Reducimos el espacio de la caja gris */
    }
}