/* css/styles.css - Versión FINAL Unificada y Optimizada */
/* NOTA: Fuentes Poppins y Open Sans se cargan vía en el del HTML.
No usar @import aquí para evitar solicitudes duplicadas que bloquean el render. */
:root {
/* === Colores principales (Verde Predominante) === */
--primary-deep-green: #1B5E20; /* Verde oscuro */
--primary-vibrant-green: #2E7D32; /* Verde vibrante */
--primary-light-green: #E8F5E9; /* Verde muy claro */
--primary-pale-green: #F1F8E9; /* Fondo sutil */
/* === Variables RGB (CRÍTICAS para transparencias) === */
--primary-deep-green-rgb: 27, 94, 32; /* Base para sombras */
--primary-vibrant-green-rgb: 46, 125, 50; /* Base para efectos */
/* === Acento === */
--accent-gold: #FFB300;
--accent-gold-darker: #FFA000;
/* === Neutros === */
--light-bg: #F1F8E9;
--white-pure: #FFFFFF;
--text-dark: #1A1F1A;
--text-medium: #3E4F3E;
--text-light: #F5FBF5;
--text-muted-custom: #6B8E6B;
/* === Bordes & Sombras === */
--border-light: #C8E6C9;
--border-dark: #4A704A;
--shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.06);
--shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.10);
--shadow-strong: 0 12px 35px rgba(0, 0, 0, 0.14);
/* CORREGIDO: Uso de variable RGB para consistencia */
--shadow-xl: 0 20px 40px rgba(var(--primary-deep-green-rgb), 0.15);
--border-radius-sm: 0.35rem;
--border-radius-md: 0.6rem;
--border-radius-lg: 1rem;
--border-radius-pill: 50rem;
/* === Fuentes y Social === */
--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Open Sans', sans-serif;
}
/*--------------------------------------------------------------
# 2. Reset y Base
--------------------------------------------------------------*/
/* CRÍTICO: Reset de Box Model para evitar roturas de layout */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-secondary);
color: var(--text-medium);
line-height: 1.75;
background-color: var(--white-pure);
overflow-x: hidden;
-webkit-font-smoothing: antialiased; /* Texto más nítido en Mac/iOS */
-moz-osx-font-smoothing: grayscale;
}
/* Imágenes responsivas por defecto */
img {
max-width: 100%;
height: auto;
display: block;
}
/*--------------------------------------------------------------
# 3. Tipografía — Escala fluida con clamp()
Elimina los saltos bruscos entre breakpoints.
clamp(mínimo, preferido, máximo)
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 700;
color: var(--primary-deep-green);
margin-bottom: 0.75em;
line-height: 1.25;
}
h1 { font-size: clamp(1.9rem, 5vw + 0.5rem, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw + 0.3rem, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw + 0.2rem, 1.9rem); }
.section-title {
font-size: clamp(1.6rem, 4vw + 0.4rem, 2.6rem);
}
a {
color: var(--primary-vibrant-green);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--accent-gold);
}
/* Accesibilidad: Foco visible para navegación con teclado */
:focus-visible {
outline: 3px solid var(--accent-gold);
outline-offset: 2px;
}
/* Fix contraste: text-muted sobre bg-green-soft no cumple WCAG AA.
Sobreescribimos el gris Bootstrap (#6c757d, ~3.8:1) por verde oscuro (~6.1:1) */
.bg-green-soft .text-muted,
.bg-green-soft small.text-muted,
.section-bg-light .text-muted {
color: var(--text-medium) !important; /* #3E4F3E, contraste 6.1:1 */
}
/*--------------------------------------------------------------
# 4. Botones Unificados
--------------------------------------------------------------*/
.btn {
font-family: var(--font-primary);
font-weight: 600;
padding: 0.8rem 1.8rem;
border-radius: var(--border-radius-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.5px;
box-shadow: var(--shadow-soft);
border: 2px solid transparent; /* Reserva espacio para evitar saltos */
font-size: 1.05rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-align: center;
}
/* Botón Sólido (Principal) */
.btn-primary {
background-color: var(--primary-vibrant-green);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-deep-green);
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
color: white;
}
/* Iconos dentro de botones */
.btn i {
transition: transform 0.3s ease;
margin-left: 0.5rem;
}
.btn:hover i {
transform: translateX(4px);
}
/* Botón Outline (Borde verde - Para fondos claros) */
.btn-outline-primary {
background: transparent;
border: 2px solid var(--primary-vibrant-green);
color: var(--primary-vibrant-green);
box-shadow: none;
}
.btn-outline-primary:hover {
background: var(--primary-vibrant-green);
color: white;
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
/* NUEVO: Botón Outline Blanco (Para usar sobre fondos oscuros/verdes) */
.btn-outline-white {
background: transparent;
border: 2px solid var(--white-pure);
color: var(--white-pure);
box-shadow: none;
}
.btn-outline-white:hover {
background: var(--white-pure);
color: var(--primary-deep-green);
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
/*--------------------------------------------------------------
# 5. Estructura y Secciones
--------------------------------------------------------------*/
section {
padding: 80px 0; /* Espaciado más generoso */
position: relative;
}
.section-title {
text-align: center;
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 3rem;
position: relative;
color: var(--primary-deep-green);
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--accent-gold);
border-radius: 4px;
}
/* Variantes de Fondo */
.section-bg-light { background-color: var(--light-bg); }
.section-bg-white { background-color: #ffffff; }
.section-bg-gray { background-color: #f8f9fa; }
/* Fondo oscuro (Texto claro automático) */
.section-bg-dark {
background-color: var(--primary-deep-green);
color: var(--text-light);
}
/* En css/styles.css */
.bg-white-pure {
background-color: #ffffff;
}
.bg-green-soft {
background-color: #eaf4eb;
border-top: 1px solid rgba(46, 125, 50, 0.08);
border-bottom: 1px solid rgba(46, 125, 50, 0.08);
}
/* Sección oscura — rompe el ritmo visual */
.bg-dark-section {
background: linear-gradient(135deg, var(--primary-deep-green) 0%, #0d3b11 100%);
position: relative;
overflow: hidden;
}
.bg-dark-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 80% 20%, rgba(255,179,0,0.06) 0%, transparent 60%),
radial-gradient(circle at 10% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
pointer-events: none;
}
.section-bg-dark h1,
.section-bg-dark h2,
.section-bg-dark h3,
.section-bg-dark h4,
.section-bg-dark h5,
.section-bg-dark h6 {
color: var(--white-pure);
}
.section-bg-dark .section-title::after {
background: var(--accent-gold); /* El acento resalta sobre verde */
}
/*--------------------------------------------------------------
# 6. Animaciones y Utilidades
--------------------------------------------------------------*/
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
/* ==========================================================================
# 8. ATENEA UI SYSTEM (Componentes Unificados)
Pegar esto al final de css/styles.css
========================================================================== */
/* --- A. Títulos de Página Unificados --- */
/* Úsalo en el de Calendario, Noticias y Documentos */
.page-header-unified {
padding: 3.5rem 0 3rem;
text-align: center;
background: transparent;
}
.page-title-unified {
color: var(--primary-deep-green);
font-family: var(--font-primary);
font-weight: 800;
font-size: 2.5rem;
margin-bottom: 1rem;
letter-spacing: -0.5px;
}
.page-subtitle-unified {
color: var(--text-medium);
font-family: var(--font-secondary);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* --- B. Buscador Universal (Estilo Cápsula) --- */
/* Úsalo envolviendo los inputs de búsqueda */
.search-unified-style {
position: relative;
display: flex;
align-items: center;
background: var(--white-pure);
border: 1px solid var(--border-light);
border-radius: var(--border-radius-pill);
padding: 8px 15px 8px 25px;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
width: 100%;
max-width: 600px; /* Ancho máximo para que no se estire demasiado */
margin: 0 auto; /* Centrado */
}
.search-unified-style:focus-within {
border-color: var(--primary-vibrant-green);
box-shadow: var(--shadow-medium);
transform: translateY(-2px);
}
.search-unified-style input {
border: none;
outline: none;
width: 100%;
background: transparent;
color: var(--text-dark);
font-family: var(--font-secondary);
font-size: 1rem;
padding: 5px;
}
.search-unified-style i {
color: var(--primary-deep-green);
font-size: 1.2rem;
margin-right: 10px;
}
.search-unified-style button {
border-radius: var(--border-radius-pill);
padding: 8px 24px;
font-weight: 600;
margin-left: 5px;
}
/* --- C. Botones Filtro / Meses (Pills) --- */
/* Reemplaza las clases .month-pill o .btn-filter por .ui-pill-filter */
.ui-pill-filter {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
border-radius: var(--border-radius-pill);
background: var(--white-pure);
color: var(--primary-deep-green);
font-family: var(--font-primary);
font-weight: 600;
text-decoration: none;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
margin: 0 5px 10px 0;
white-space: nowrap;
cursor: pointer;
}
.ui-pill-filter:hover {
border-color: var(--primary-vibrant-green);
color: var(--primary-vibrant-green);
transform: translateY(-2px);
background: var(--white-pure);
box-shadow: var(--shadow-soft);
}
.ui-pill-filter.active {
background: var(--primary-deep-green);
color: var(--white-pure);
border-color: var(--primary-deep-green);
box-shadow: var(--shadow-medium);
}
/* --- D. Paginación Unificada --- */
.pagination {
margin-top: 3rem;
gap: 5px;
justify-content: center; /* Centrar paginación */
}
.page-item .page-link {
color: var(--primary-deep-green);
border: 1px solid var(--border-light);
border-radius: 8px; /* Cuadrado redondeado moderno */
padding: 10px 18px;
font-weight: 600;
background: var(--white-pure);
transition: all 0.2s ease;
}
.page-item .page-link:hover {
background-color: var(--primary-pale-green);
border-color: var(--primary-vibrant-green);
color: var(--primary-deep-green);
transform: translateY(-2px);
text-decoration: none;
}
.page-item.active .page-link {
background-color: var(--primary-deep-green);
border-color: var(--primary-deep-green);
color: var(--white-pure);
box-shadow: var(--shadow-soft);
}
.page-item.disabled .page-link {
color: #bbb;
background: #fcfcfc;
border-color: #f0f0f0;
cursor: not-allowed;
}
/* --- Botón Volver Arriba (Floating Action Button) --- */
.scroll-top-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 55px; /* Un poco más grande para mejor impacto */
height: 55px;
background-color: var(--white-pure); /* Fondo blanco limpio */
color: var(--primary-deep-green); /* Flecha verde para contraste */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem; /* Tamaño del icono aumentado */
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación tipo 'pop' */
z-index: 9999;
box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* Sombra más profunda para que 'flote' */
border: 2px solid transparent;
text-decoration: none;
}
/* Estado cuando es visible */
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
bottom: 40px;
}
/* Efecto al pasar el mouse */
.scroll-top-btn:hover {
background-color: var(--accent-gold); /* Cambia a dorado Atenea */
color: var(--primary-deep-green);
transform: translateY(-8px) scale(1.1); /* Sube y crece un poco */
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
/* Quitamos cualquier círculo SVG que pueda estar estorbando */
.scroll-top-btn svg {
display: none;
}
/* --- Modal Estilo Atenea --- */
.custom-atenea-modal {
border-radius: var(--border-radius-lg);
overflow: hidden;
border: none;
position: relative;
}
.modal-header-accent {
height: 6px;
background: linear-gradient(90deg, var(--primary-deep-green), var(--accent-gold));
}
.modal-icon-wrapper {
width: 80px;
height: 80px;
background: var(--primary-light-green);
color: var(--primary-vibrant-green);
font-size: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 auto 1.5rem;
}
.modal-title-atenea {
color: var(--primary-deep-green);
font-weight: 700;
margin-bottom: 1rem;
}
.modal-text-atenea {
font-size: 1.1rem;
color: var(--text-medium);
line-height: 1.6;
}
.modal-quote {
background: #f8fcf9;
padding: 1rem;
border-left: 4px solid var(--accent-gold);
font-style: italic;
margin: 1.5rem 0;
color: var(--primary-deep-green);
}
.btn-close-custom {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 1.2rem;
color: var(--text-muted-custom);
transition: color 0.3s;
}
.btn-atenea-primary {
background: var(--primary-deep-green);
color: white;
border-radius: var(--border-radius-pill);
padding: 0.6rem 1.5rem;
font-weight: 600;
}
.btn-atenea-outline {
border: 2px solid var(--border-light);
border-radius: var(--border-radius-pill);
padding: 0.6rem 1.5rem;
font-weight: 600;
color: var(--text-medium);
}
/*--------------------------------------------------------------
# 7. Responsividad — Breakpoints completos
xs: < 480px (teléfonos pequeños)
sm: < 576px (teléfonos)
md: < 768px (tablets portrait)
lg: < 992px (tablets landscape)
xl: ≥ 1400px (pantallas anchas)
--------------------------------------------------------------*/
/* --- Pantallas ultrawide (≥ 1400px) --- */
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
/* --- Tablets landscape (< 992px) --- */
@media (max-width: 991.98px) {
.section-title { margin-bottom: 2.5rem; }
}
/* --- Tablets portrait (< 768px) --- */
@media (max-width: 767.98px) {
section { padding: 50px 0; }
.section-title {
margin-bottom: 2rem;
}
.btn {
padding: 0.7rem 1.4rem;
font-size: 1rem;
}
/* Hero: botones full-width en tablet */
#hero .btn {
width: 100%;
}
}
/* --- Teléfonos pequeños (< 480px) --- */
@media (max-width: 479.98px) {
section { padding: 40px 0; }
.section-title::after {
width: 60px;
height: 3px;
}
/* Floating badge: esconder en teléfonos muy pequeños para evitar overflow */
.floating-badge {
display: none !important;
}
/* Modal más compacto */
.modal-dialog { margin: 0.5rem; }
}
/*--------------------------------------------------------------
# 8. Accesibilidad — Skip to content
--------------------------------------------------------------*/
.skip-to-content {
position: absolute;
top: -100px;
left: 1rem;
z-index: 99999;
background: var(--accent-gold);
color: var(--primary-deep-green);
font-family: var(--font-primary);
font-weight: 700;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-md);
text-decoration: none;
transition: top 0.2s ease;
box-shadow: var(--shadow-medium);
}
.skip-to-content:focus {
top: 1rem;
outline: 3px solid var(--primary-deep-green);
outline-offset: 2px;
}
/*--------------------------------------------------------------
# 9. Respeto por preferencias de movimiento reducido
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Las animaciones reveal muestran el contenido directamente */
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}