@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Oswald:wght@400;700&display=swap'); :root { --primary-dark: #0f0f0f; --secondary-dark: #1a1a1a; --accent-gold: #d4af37; --light-text: #e0e0e0; --medium-text: #a0a0a0; --border-color: #333; --header-height: 70px; --padding-section: 3rem 1rem; --content-max-width: 1200px; } /* ================== RESET BÁSICO Y ESTILOS GENERALES ================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body.no-scroll { /* 1. Bloqueo de scroll estándar para la mayoría de navegadores */ overflow: hidden; /* 2. LA CLAVE: Le dice al navegador que el scroll del no debe "sangrar" o afectar a otros elementos. Esto detiene el 'scroll bleed' en iOS y Android. */ overscroll-behavior: contain; } body { font-family: 'Montserrat', sans-serif; background-color: var(--primary-dark); animation: gradientFlow 15s ease infinite; color: var(--light-text); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; /* Evita espacios fantasma debajo de las imagenes */ } h2, h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center; color: var(--light-text); } h2 { font-size: 2rem; margin-bottom: 1.5rem; } h3 { font-size: 1.5rem; margin-bottom: 1rem; } p { margin-bottom: 1rem; color: var(--medium-text); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: var(--light-text); transition: color 0.3s ease; } a:hover { color: var(--accent-gold); } .gold-text { color: var(--accent-gold); } .content-wrapper { max-width: var(--content-max-width); margin: 0 auto; padding: 0 1rem; } section.section-padded { padding: var(--padding-section); border-bottom: 1px solid var(--border-color); background-color: var(--primary-dark); } /* Párrafo de subtítulo para secciones */ .section-subtitle { text-align: center; max-width: 800px; margin: -1rem auto 2rem; color: var(--medium-text); font-size: 0.95rem; } /* Título para sub-secciones internas (ej. Excelencia, Categorías) */ .subsection-title { font-size: 1.8rem; color: var(--accent-gold); margin-top: 3rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; text-align: left; } /* ================== HEADER ================== */ #main-header { background-color: var(--primary-dark); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); border-bottom: 1px solid var(--border-color); /* === CAMBIOS === */ display: flex; justify-content: space-between; /* Logo (izq) vs Botón (der) */ align-items: center; height: var(--header-height); padding: 0 1rem; } /* === NUEVOS ESTILOS PARA EL LOGO === */ .header-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--light-text); } .header-logo img { width: auto; height: 60px; } .header-logo-text { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--light-text); display: none; /* Oculto en móvil por defecto */ } .social-icons { display: flex; gap: 0.75rem; } .social-icons a { color: var(--medium-text); font-size: 1rem; } #menu-btn { display: block; /* Visible en móvil */ background: transparent; border: none; cursor: pointer; z-index: 110; } #menu-btn span { display: block; width: 25px; height: 3px; background-color: var(--accent-gold); margin: 5px 0; transition: all 0.3s ease; } #main-nav { position: fixed; top: var(--header-height); left: -100%; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--primary-dark); transition: left 0.3s ease-in-out; display: flex; align-items: center; justify-content: center; /* === CAMBIO IMPORTANTE === */ /* En móvil, la nav está oculta por defecto */ display: none; overscroll-behavior: contain; } #main-nav.nav-active { left: 0; display: flex; /* <-- AÑADE ESTO */ } #main-nav ul { list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } #main-nav li { width: 100%; text-align: center; } #main-nav a { display: block; padding: 1rem; text-decoration: none; color: var(--light-text); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; transition: background-color 0.3s ease; } #main-nav a:hover { background-color: rgba(212, 175, 55, 0.1); /* Dorado transparente */ } #patrocinadores-banner { background-color: var(--secondary-dark); text-align: center; border-bottom: 1px solid var(--border-color); padding: 3rem 0; /* Padding vertical, sin padding lateral */ overflow: hidden; /* IMPORTANTE: Oculta lo que se sale de la pantalla */ } #patrocinadores-banner h2 { color: var(--accent-gold); margin-bottom: 0.5rem; } #patrocinadores-banner .section-subtitle { margin-bottom: 2rem; padding: 0 1rem; } /* El contenedor que se mueve */ .patrocinadores-track { display: flex; width: max-content; /* El ancho se ajusta al contenido total */ /* La animación mueve la cinta hacia la izquierda */ animation: scroll 60s linear infinite; } /* Pausar animación al pasar el mouse (opcional, muy útil) */ .patrocinadores-track:hover { animation-play-state: paused; } /* Estilo de cada logo individual */ .patrocinador-item { width: 150px; /* Ancho fijo para mantener uniformidad */ height: 100px; margin: 0 1rem; /* Espacio entre logos */ background-color: var(--primary-dark); border-radius: 8px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; padding: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Para evitar que se encojan */ flex-shrink: 0; } .patrocinador-item img { max-width: 90%; max-height: 90%; object-fit: contain; /* === CAMBIO: COLORES REALES === */ /* Quitamos el filtro grayscale. Dejamos solo una transición suave. */ filter: none; transition: transform 0.3s ease; } .patrocinador-item:hover img { transform: scale(1.1); /* Efecto pop al pasar el mouse */ } /* === LA ANIMACIÓN MÁGICA === */ @keyframes scroll { 0% { transform: translateX(0); } 100% { /* Movemos la cinta -50% porque duplicaremos los logos. Al llegar a la mitad (que es igual al inicio), se reinicia invisiblemente. */ transform: translateX(-50%); } } /* ================== SECCIÓN HOME ================== */ #home { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 70vh; /* Ajustado para el nuevo diseño */ padding: 4rem 1rem; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('assets/banner.webp'); /* Fondo con partículas/confetti */ background-size: cover; background-position: center; border-bottom: 1px solid var(--border-color); overflow: hidden; /* Para las partículas */ } .hero-content { position: relative; z-index: 2; /* Para que esté por encima del fondo */ max-width: 800px; } .hero-logo { display: block; /* Centrado horizontalmente */ /* Tamaño para Móvil */ width: 280px; max-width: 80%; /* Asegura que no se salga en pantallas muy angostas */ height: auto; /* Mantiene la proporción */ } .hero-nav-mobile, .hero-nav-desktop { margin-top: 1rem; display: none; /* Oculto por defecto, se muestra según media query */ font-size: 0.85rem; color: var(--medium-text); text-transform: uppercase; } .hero-nav-mobile a, .hero-nav-desktop a { padding: 0 0.5rem; color: var(--medium-text); } .hero-nav-mobile span, .hero-nav-desktop span { color: var(--border-color); } .hero-nav-mobile { display: block; } /* Visible en móvil */ .hero-features { display: flex; flex-direction: column; /* Apilado en móvil */ gap: 1.5rem; margin-top: 1rem; padding: 0 1rem; max-width: 400px; } .feature-item { background-color: var(--secondary-dark); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem 1rem; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background-color 0.3s ease; text-decoration: none; } .feature-item:hover { transform: translateY(-5px); background-color: #2a2a2a; } .feature-item i { font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 0.75rem; } .feature-item p { font-size: 0.9rem; font-weight: 600; color: var(--light-text); margin: 0; } /* ================== OTRAS SECCIONES ================== */ #celebrating-talent { background-color: var(--secondary-dark); padding: 3rem 1rem; text-align: center; border-bottom: 1px solid var(--border-color); } #celebrating-talent h3 { font-size: 1.8rem; line-height: 1.2; color: var(--accent-gold); margin-bottom: 0.75rem; } #celebrating-talent p { font-style: italic; font-size: 0.95rem; color: var(--medium-text); } #galeria-preview { background-color: var(--primary-dark); padding: var(--padding-section); border-bottom: 1px solid var(--border-color); } #galeria-preview h3 { text-align: left; margin-bottom: 1.5rem; color: var(--light-text); } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .preview-card { background-color: var(--secondary-dark); border: 1px solid var(--border-color); border-radius: 5px; overflow: hidden; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .preview-card:hover { transform: translateY(-3px); } .preview-card img { width: 100%; height: 120px; object-fit: cover; border-bottom: 1px solid var(--border-color); } .preview-card p { margin: 0.75rem 0; font-size: 0.85rem; font-weight: 600; color: var(--light-text); } /* --- Quiénes Somos --- */ .about-container { display: flex; flex-direction: column; gap: 2rem; align-items: center; } .about-image img { width: 100%; max-width: 400px; border-radius: 8px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); } .about-text { max-width: 600px; text-align: left; /* Mejor para párrafos largos */ } .about-text p { color: var(--light-text); font-size: 0.95rem; margin-bottom: 1.5rem; } /* ================== ESTILOS SECCIÓN EDICIONES (CORREGIDO) ================== */ /* --- Cuadrícula de Premios a la Excelencia (CON FOTOS) --- */ .excelencia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2rem; justify-items: center; } .excelencia-item { border: none; padding: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } .excelencia-item img { width: 320px; height: auto; border-radius: 2%; object-fit: contain; border: 3px solid var(--accent-gold); margin-bottom: 1rem; transition: transform 0.3s ease; } .excelencia-item:hover img { transform: scale(1.10); } .excelencia-item p { font-size: 0.9rem; color: var(--light-text); font-weight: 600; line-height: 1.3; margin: 0; } .excelencia-item p span { display: block; font-size: 0.8rem; color: var(--medium-text); font-weight: 400; margin-top: 0.2rem; } /* --- Estilos del Acordeón (Desplegables) --- */ .category-title { text-align: center; color: var(--accent-gold); /* Dorado */ font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin-top: 3rem; /* Espacio arriba para separar del grupo anterior */ margin-bottom: 2rem; /* Espacio abajo antes de las fotos */ text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); /* Línea sutil separadora */ padding-bottom: 0.5rem; max-width: 300px; margin-left: auto; margin-right: auto; } .category-title i { margin-right: 0.5rem; } .winner-list { list-style-type: none; padding-left: 0; color: var(--medium-text); } .winner-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; } .winner-list li:last-child { border-bottom: none; } .winner-list li strong { color: var(--light-text); font-weight: 600; } /* ================== GALERÍA, FORMULARIOS, FOOTER ================== */ .gallery-carousel-container { position: relative; /* Para posicionar los botones */ display: flex; align-items: center; gap: 1rem; } .galeria-track { display: flex; gap: 1rem; overflow-x: auto; /* Permite scroll horizontal */ scroll-behavior: smooth; /* Suavidad nativa */ scroll-snap-type: x mandatory; /* Las fotos se "enganchan" al centro */ padding-bottom: 1rem; /* Espacio para barra de scroll si aparece */ /* Ocultar barra de scroll (estético) */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } /* Ocultar barra en Chrome/Safari */ .galeria-track::-webkit-scrollbar { display: none; } .galeria-track img { /* Tamaño fijo para que funcionen como tarjetas */ min-width: 280px; width: 280px; /* Proporción Vertical (Retrato) */ aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: top center; /* No cortar cabezas */ border-radius: 8px; scroll-snap-align: center; /* Se centra al soltar */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); border: 1px solid transparent; transition: transform 0.3s ease; } .galeria-track img:hover { transform: scale(1.02); border-color: var(--accent-gold); } /* --- Botones de Navegación --- */ .gallery-btn { background-color: var(--secondary-dark); color: var(--accent-gold); border: 1px solid var(--accent-gold); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease; z-index: 10; /* Evita que se encojan */ flex-shrink: 0; } .gallery-btn:hover { background-color: var(--accent-gold); color: var(--primary-dark); transform: scale(1.1); } /* --- Formularios --- */ form { max-width: 700px; margin: 0 auto; background-color: var(--secondary-dark); padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent-gold); } form input, form select, form textarea { width: 100%; padding: 0.8rem; font-size: 1rem; font-family: 'Montserrat', sans-serif; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--primary-dark); color: var(--light-text); resize: none; } form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3); } .cta-button { display: block; /* Ocupar todo el ancho en móvil */ background-color: var(--accent-gold); color: var(--primary-dark); padding: 0.8rem 1.8rem; text-decoration: none; font-weight: 700; border-radius: 5px; transition: background-color 0.3s ease, transform 0.3s ease; border: none; font-family: 'Montserrat', sans-serif; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; } .cta-button:hover { background-color: #c9a430; transform: translateY(-2px); } /* --- Footer --- */ footer { background-color: var(--primary-dark); color: var(--medium-text); text-align: center; padding: 1.5rem 1rem; border-top: 1px solid var(--border-color); } .footer-links-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; /* Para que se ajusten en móvil */ margin-bottom: 1rem; gap: 0.5rem 1rem; /* Espaciado entre elementos */ } .footer-link { color: var(--medium-text); font-size: 0.9rem; text-transform: uppercase; } .footer-separator { color: var(--border-color); font-size: 0.9rem; } .social-icons-footer { display: flex; gap: 0.75rem; } .social-icons-footer a { color: var(--medium-text); font-size: 1.1rem; } .placeholder-message { background-color: var(--secondary-dark); border: 1px dashed var(--border-color); border-radius: 8px; padding: 3rem 1.5rem; text-align: center; max-width: 700px; margin: 0 auto; } .placeholder-message i { font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 1rem; } .placeholder-message p { font-size: 1.1rem; color: var(--light-text); font-weight: 600; margin: 0; } #postulaciones-form { display: block; } #postulaciones-cerradas-msg { display: none; } body.postulaciones-cerradas #postulaciones-form { display: none; } body.postulaciones-cerradas #postulaciones-cerradas-msg { display: block; } /* ================== ACORDEÓN POSTULACIONES ================== */ .accordion-btn { background-color: var(--secondary-dark); color: var(--accent-gold); cursor: pointer; padding: 1.2rem; width: 100%; max-width: 700px; margin: 0 auto; text-align: left; border: 1px solid var(--border-color); border-radius: 8px; outline: none; transition: background-color 0.3s ease; display: flex; justify-content: space-between; align-items: center; font-family: 'Oswald', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; } .accordion-btn:hover { background-color: #2a2a2a; } .accordion-btn.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .accordion-btn i { transition: transform 0.3s ease; } .accordion-btn.active i { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; max-width: 700px; margin: 0 auto; } /* Ajuste para el formulario cuando está dentro del acordeón */ .accordion-content form { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } /* ================== BOTÓN SCROLL TO TOP ================== */ #scrollTopBtn { position: fixed; bottom: 30px; right: 30px; z-index: 99; /* Asegura que esté por encima de todo */ /* === Estilos de la paleta === */ background-color: var(--secondary-dark); color: var(--accent-gold); border: 2px solid var(--accent-gold); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s ease; } #scrollTopBtn.visible { opacity: 1; visibility: visible; transform: translateY(0); } #scrollTopBtn:hover { background-color: var(--accent-gold); color: var(--primary-dark); transform: translateY(-3px); } /* ================== MEDIA QUERIES (DESKTOP) ================== */ @media (min-width: 768px) { :root { --padding-section: 4rem 1.5rem; } h2 { font-size: 2.5rem; } h3 { font-size: 2rem; } .subsection-title { font-size: 2rem; } body.no-scroll { position: fixed; width: 100%; overflow: hidden; } .patrocinador-item { width: 180px; height: 110px; margin: 0 1.5rem; } /* --- Header Desktop --- */ #main-header { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 2rem; } .header-logo { grid-column: 1; justify-self: start; } .header-logo-text { display: block; } #main-nav { grid-column: 2; position: static; display: flex; width: auto; height: auto; background: none; } #main-nav ul { flex-direction: row; height: auto; gap: 2rem; } #main-nav a { padding: 0.5rem 0; font-size: 0.9rem; } #main-nav a:hover { background: none; color: var(--accent-gold); } .header-right { grid-column: 3; justify-self: end; } #menu-btn { display: none; } /* --- Hero Desktop --- */ #home { min-height: 80vh; padding: 6rem 2rem; justify-content: space-between; } .hero-logo { width: 600px; max-width: 100%; height: auto; } .hero-title { font-size: 4rem; } .hero-nav-mobile { display: none; } .hero-nav-desktop { display: block; } .hero-features { flex-direction: row; max-width: 800px; margin-top: 4rem; justify-content: center; } .feature-item { flex: 1; max-width: 250px; } /* --- Quiénes Somos Desktop --- */ .about-container { flex-direction: row; text-align: left; gap: 3rem; } .about-image { flex: 0 0 400px; } .about-text { flex: 1; } /* --- Ediciones Desktop --- */ /* --- Galería y Formularios --- */ .preview-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .preview-card img { height: 150px; } .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .galeria-grid img { height: auto; aspect-ratio: 3 / 4; } form button { width: auto; } .galeria-track img { min-width: 320px; /* Fotos más grandes en PC */ width: 320px; } } @media (min-width: 1024px) { :root { --padding-section: 5rem 2rem; } h2 { font-size: 3rem; } h3 { font-size: 2.2rem; } .hero-title { font-size: 5rem; } .galeria-grid { grid-template-columns: repeat(3, 1fr); } .galeria-grid img { height: auto; aspect-ratio: 3 / 4; } .footer-links-container { gap: 0.5rem 2rem; } } @media (max-width: 767px) { /* En móviles, los botones pueden estorbar, mejor ocultarlos y dejar que el usuario deslice con el dedo */ .gallery-btn { display: none; } .galeria-track img { min-width: 80%; /* Las fotos ocupan casi toda la pantalla */ width: 80%; } .excelencia-grid { grid-template-columns: repeat(2, 1fr); } }