/* ========================================
Variables CSS - Sistema de Diseño ANFDGAC
========================================
Define todas las variables CSS personalizadas utilizadas
en el sistema de diseño de ANFDGAC. Incluye colores,
tipografía, espaciado, bordes, sombras y transiciones.
Uso: var(--variable-name)
Ejemplo: background-color: var(--color-primary);
======================================== */
:root {
/* ========================================
Paleta de Colores Corporativa ANFDGAC
======================================== */
/* Colores principales de la marca */
--color-primary: #931916; /* Burdeo corporativo principal */
--color-secondary: #1D1D1B; /* Negro secundario para texto */
--color-white: #FFFFFF; /* Blanco puro para fondos */
--color-background: #F5F5F5; /* Gris claro para fondos de sección */
/* Tonalidades azules institucionales */
--color-dark-blue: #153547; /* Azul oscuro para secciones especiales */
--color-dark-blue-alt: #0F2938; /* Azul más oscuro para gradientes */
/* Escala de grises para texto y elementos */
--color-gray-light: #E5E5E5; /* Gris claro para bordes y separadores */
--color-gray-medium: #999999; /* Gris medio para texto secundario */
--color-gray-dark: #333333; /* Gris oscuro para texto principal */
/* ========================================
Tipografía del Sistema
======================================== */
--font-primary: 'Montserrat', sans-serif; /* Fuente principal del sitio */
/* ========================================
Sistema de Espaciado Consistente
======================================== */
--spacing-xs: 0.5rem; /* 8px - Espaciado extra pequeño */
--spacing-sm: 1rem; /* 16px - Espaciado pequeño */
--spacing-md: 2rem; /* 32px - Espaciado medio */
--spacing-lg: 3rem; /* 48px - Espaciado grande */
--spacing-xl: 4rem; /* 64px - Espaciado extra grande */
/* ========================================
Sistema de Bordes Redondeados
======================================== */
--border-radius: 8px; /* Radio estándar para elementos */
--border-radius-lg: 12px; /* Radio grande para tarjetas y secciones */
/* ========================================
Sistema de Sombras para Profundidad
======================================== */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil para elementos pequeños */
--shadow-md: 0 4px 6px rgba(0,0,0,0.1); /* Sombra media para tarjetas */
--shadow-lg: 0 10px 20px rgba(0,0,0,0.15); /* Sombra grande para modales y dropdowns */
/* ========================================
Transiciones Suaves Globales
======================================== */
--transition: all 0.3s ease; /* Transición estándar para todos los elementos */
}
/* ========================================
Reset CSS y Estilos Base Globales
========================================
Resetea los estilos por defecto del navegador y establece
una base consistente para todos los elementos del sitio.
Incluye configuración de tipografía, comportamiento de
scroll y estilos base para elementos comunes.
======================================== */
/* Reset universal para eliminar márgenes y paddings por defecto */
* {
margin: 0; /* Elimina márgenes por defecto */
padding: 0; /* Elimina paddings por defecto */
box-sizing: border-box; /* Incluye padding y border en el ancho total */
}
/* Configuración del elemento raíz HTML */
html {
scroll-behavior: smooth; /* Navegación suave entre anclas del sitio */
}
/* Configuración base del body - Estilos globales del sitio */
body {
font-family: var(--font-primary); /* Fuente principal Montserrat */
font-size: 16px; /* Tamaño base de fuente (1rem) */
line-height: 1.6; /* Altura de línea para legibilidad */
color: var(--color-gray-dark); /* Color de texto por defecto */
background-color: var(--color-white); /* Fondo blanco del sitio */
overflow-x: hidden; /* Previene scroll horizontal */
}
/* Configuración responsive para todas las imágenes */
img {
max-width: 100%; /* Las imágenes no exceden el ancho del contenedor */
height: auto; /* Mantiene la proporción automáticamente */
display: block; /* Elimina el espacio inferior por defecto */
}
/* Configuración base para todos los enlaces */
a {
text-decoration: none; /* Elimina el subrayado por defecto */
color: inherit; /* Hereda el color del elemento padre */
transition: var(--transition); /* Transición suave en hover/focus */
}
/* Eliminación de viñetas en todas las listas */
ul {
list-style: none; /* Remueve los puntos de las listas */
}
/* ========================================
Container - Sistema de Layout Principal
========================================
Clase contenedora principal que centra el contenido
y limita el ancho máximo para mantener la legibilidad
en pantallas grandes. Incluye padding responsivo.
Uso:
contenido
======================================== */
.container {
width: 100%; /* Ocupa todo el ancho disponible */
max-width: 1200px; /* Limita el ancho máximo del contenido */
margin: 0 auto; /* Centra horizontalmente el contenedor */
padding: 0 var(--spacing-sm); /* Padding horizontal responsive */
}
/* ========================================
Header - Cabecera Principal del Sitio
========================================
Cabecera sticky que contiene el logo, navegación principal
y enlaces a redes sociales. Se mantiene fijo en la parte
superior durante el scroll y cambia su sombra dinámicamente.
Componentes:
- Logo institucional con texto
- Navegación principal con dropdowns
- Enlaces a redes sociales
- Menú hamburguesa para móviles
======================================== */
/* Contenedor principal del header */
.header {
background-color: var(--color-white); /* Fondo blanco para contraste */
box-shadow: var(--shadow-sm); /* Sombra sutil por defecto */
position: sticky; /* Se mantiene fijo al hacer scroll */
top: 0; /* Pegado a la parte superior */
z-index: 99999; /* Z-index extremadamente alto */
transition: var(--transition); /* Transición suave para cambios */
}
/* Estado del header cuando se ha hecho scroll */
.header.scrolled {
box-shadow: var(--shadow-md); /* Sombra más pronunciada al hacer scroll */
}
/* Contenedor interno que organiza los elementos del header */
.header-content {
display: flex; /* Layout flexbox para alineación */
align-items: center; /* Centra verticalmente los elementos */
justify-content: space-between; /* Distribuye el espacio entre elementos */
padding: var(--spacing-sm) 0; /* Padding vertical del header */
gap: var(--spacing-md); /* Espacio entre elementos flexbox */
}
/* ========================================
Logo Institucional ANFDGAC
======================================== */
/* Contenedor principal del logo (imagen + texto) */
.logo {
display: flex; /* Layout horizontal para imagen y texto */
align-items: center; /* Alineación vertical centrada */
gap: var(--spacing-sm); /* Espacio entre imagen y texto */
}
/* Imagen del logo institucional */
.logo img {
height: 120px; /* Altura fija del logo para consistencia */
width: auto; /* Ancho automático para mantener proporción */
}
/* Título principal del logo (ANFDGAC) */
.logo-text h1 {
font-size: 1.5rem; /* Tamaño prominente para el título */
font-weight: 700; /* Peso bold para importancia */
color: var(--color-primary); /* Color burdeo corporativo */
line-height: 1.2; /* Línea compacta para el título */
}
/* Subtítulo descriptivo del logo */
.logo-text p {
font-size: 0.75rem; /* Tamaño pequeño para subtítulo */
color: var(--color-gray-medium); /* Color gris para jerarquía visual */
font-weight: 400; /* Peso normal para legibilidad */
}
/* ========================================
Navegación Principal del Sitio
========================================
Sistema de navegación horizontal con soporte para menús
desplegables (dropdowns). Incluye estados hover y active,
y se convierte en menú hamburguesa en dispositivos móviles.
======================================== */
/* Contenedor de navegación principal - visible por defecto en desktop */
.main-nav {
display: block; /* Visible por defecto en desktop */
}
/* Lista de elementos de navegación */
.main-nav ul {
display: flex; /* Layout horizontal para elementos del menú */
gap: var(--spacing-md); /* Espacio consistente entre elementos */
}
/* Enlaces de navegación individuales */
.main-nav a {
font-weight: 500; /* Peso medio para legibilidad */
font-size: 14px; /* Tamaño de fuente ajustado según diseño */
color: var(--color-gray-dark); /* Color oscuro por defecto */
padding: var(--spacing-xs) var(--spacing-sm); /* Padding para área de clic */
border-radius: var(--border-radius); /* Bordes redondeados suaves */
transition: var(--transition); /* Transición suave para hover */
display: flex; /* Flexbox para alinear texto e iconos */
align-items: center; /* Centra verticalmente contenido */
gap: 5px; /* Espacio pequeño entre texto e íconos */
}
/* Estado hover de los enlaces de navegación (solo enlaces directos, no dropdowns) */
.main-nav > ul > li > a:hover:not(.dropdown-toggle) {
color: #2c5f7a; /* Color azul petróleo para hover */
background-color: rgba(44, 95, 122, 0.1); /* Fondo azul translúcido para feedback visual */
}
/* Estado hover específico para dropdowns toggles */
.main-nav .dropdown-toggle:hover {
color: #2c5f7a; /* Color azul petróleo para hover */
background-color: rgba(44, 95, 122, 0.1); /* Fondo azul translúcido para feedback visual */
}
/* Estado activo/pressed de los enlaces directos (no dropdowns) */
.main-nav > ul > li > a:active:not(.dropdown-toggle),
.main-nav > ul > li > a:focus:not(.dropdown-toggle) {
color: #2c5f7a; /* Color azul petróleo para estado activo */
background-color: rgba(44, 95, 122, 0.2); /* Fondo azul más intenso para estado pressed */
}
/* Estado activo/pressed específico para dropdowns toggles */
.main-nav .dropdown-toggle:active,
.main-nav .dropdown-toggle:focus {
color: #2c5f7a; /* Color azul petróleo para estado activo */
background-color: rgba(44, 95, 122, 0.2); /* Fondo azul más intenso para estado pressed */
}
/* ========================================
Icono de Login en Navegación
========================================
Estilos para el icono de acceso de socios ubicado
en la navegación principal. Visible tanto en desktop
como en responsive.
======================================== */
/* Item del login en navegación */
.login-nav-item {
margin-left: 1rem;
}
/* Enlace del login */
.login-nav-link {
display: flex !important;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem !important;
background: linear-gradient(135deg, var(--color-primary) 0%, #b91c19 100%) !important;
color: white !important;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.login-nav-link:hover {
background: linear-gradient(135deg, #b91c19 0%, var(--color-primary) 100%) !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(147, 25, 22, 0.3);
color: white !important;
}
.login-nav-link:active,
.login-nav-link:focus {
background: linear-gradient(135deg, #7a1311 0%, #931916 100%) !important;
transform: translateY(0);
color: white !important;
}
/* Icono del login */
.login-nav-link i {
font-size: 1.1rem;
}
/* Texto del login */
.login-text {
font-size: 0.9rem;
white-space: nowrap;
}
/* ========================================
Icono de Login Móvil
========================================
Icono de acceso a socios que aparece junto al
menú hamburguesa en dispositivos móviles.
======================================== */
/* ========================================
Icono de Acceso a Socios Móvil
========================================
Componente que muestra el botón de acceso a socios
únicamente en dispositivos móviles, posicionado
junto al menú hamburguesa.
======================================== */
/* Contenedor del icono móvil */
.mobile-login-icon {
display: none;
position: absolute;
right: 120px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}
/* Botón circular de acceso a socios */
.mobile-login-link {
display: flex;
align-items: center;
justify-content: center;
width: 49px;
height: 49px;
background: rgba(21, 53, 71, 0.1);
border: 2px solid var(--color-dark-blue);
border-radius: 50%;
color: var(--color-dark-blue);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
padding: 0;
box-sizing: border-box;
min-width: 49px;
min-height: 49px;
}
/* Estados interactivos del botón */
.mobile-login-link:hover {
background: var(--color-dark-blue);
color: var(--color-white);
border-color: var(--color-dark-blue);
transform: scale(1.1);
}
.mobile-login-link:focus {
outline: 2px solid var(--color-dark-blue);
outline-offset: 2px;
}
/* Icono dentro del botón */
.mobile-login-icon .mobile-login-link i {
font-size: 1.5rem;
line-height: 1;
width: auto;
height: auto;
}
/* ========================================
Menús Desplegables (Dropdown)
========================================
Sistema de menús dropdown que aparecen al hacer hover
sobre elementos de navegación específicos. Incluye
animaciones suaves y efectos visuales.
======================================== */
/* Contenedor del dropdown */
.dropdown {
position: relative; /* Necesario para posicionar el menú desplegable */
}
/* Ícono indicador del dropdown (flecha) */
.dropdown-toggle i {
font-size: 0.8rem; /* Tamaño pequeño para el ícono de flecha */
transition: var(--transition); /* Transición suave para rotación */
}
/* Rotación del ícono al hacer hover sobre el dropdown */
.dropdown:hover .dropdown-toggle i,
.dropdown.active .dropdown-toggle i {
transform: rotate(180deg); /* Rota la flecha 180 grados */
}
/* Menú desplegable principal */
.dropdown-menu {
position: absolute; /* Posicionamiento absoluto respecto al contenedor */
top: 100%; /* Se posiciona justo debajo del elemento padre */
left: 0; /* Alineado a la izquierda del elemento padre */
background-color: var(--color-white); /* Fondo blanco para contraste */
border-radius: var(--border-radius); /* Bordes redondeados consistentes */
box-shadow: var(--shadow-lg); /* Sombra pronunciada para profundidad */
min-width: 200px; /* Ancho mínimo para legibilidad */
opacity: 0; /* Invisible por defecto */
visibility: hidden; /* Oculto por defecto */
transform: translateY(-10px); /* Posición inicial para animación */
transition: var(--transition); /* Transición suave para aparición */
z-index: 1000; /* Por encima de otros elementos */
border: 1px solid var(--color-gray-light); /* Borde sutil para definición */
}
/* Estado visible del dropdown al hacer hover o cuando está activo */
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
opacity: 1; /* Totalmente visible */
visibility: visible; /* Visible para interacción */
transform: translateY(0); /* Posición final de la animación */
}
/* Layout interno del menú desplegable */
.dropdown-menu {
display: flex; /* Flexbox para organización vertical */
flex-direction: column; /* Disposición vertical de elementos */
gap: 0; /* Sin espacio entre elementos para compactación */
padding: var(--spacing-xs) 0; /* Padding vertical mínimo */
}
/* Elementos individuales del dropdown */
.dropdown-menu li {
width: 100%; /* Ocupa todo el ancho disponible */
}
/* Enlaces dentro del dropdown */
.dropdown-menu a {
padding: var(--spacing-sm) var(--spacing-md); /* Padding generoso para área de clic */
color: var(--color-gray-dark); /* Color de texto estándar */
font-weight: 400; /* Peso normal para jerarquía */
border-radius: 0; /* Sin bordes redondeados internos */
display: block; /* Ocupa toda la línea disponible */
white-space: nowrap; /* Previene salto de línea en texto */
}
/* Estado hover de enlaces del dropdown */
.dropdown-menu a:hover {
background-color: rgba(44, 95, 122, 0.1); /* Fondo azul translúcido para feedback */
color: #2c5f7a; /* Color azul petróleo para énfasis */
}
/* Estado activo/pressed de enlaces del dropdown */
.dropdown-menu a:active,
.dropdown-menu a:focus {
background-color: rgba(44, 95, 122, 0.2); /* Fondo azul más intenso para estado pressed */
color: #2c5f7a; /* Color azul petróleo para estado activo */
}
/* ========================================
Redes Sociales en Header - Parte Superior
========================================
Enlaces a las redes sociales oficiales de ANFDGAC
ubicados en la parte superior del header.
======================================== */
/* Contenedor de íconos de redes sociales en la parte superior */
.social-header-top {
display: flex; /* Layout horizontal para íconos */
justify-content: flex-end; /* Alinea los iconos a la derecha */
gap: var(--spacing-sm); /* Espacio uniforme entre íconos */
padding: 8px 0; /* Espaciado vertical */
border-bottom: 1px solid #e5e5e5; /* Línea separadora sutil */
}
/* Enlaces individuales de redes sociales */
.social-header-top a {
width: 32px; /* Ancho fijo para consistencia */
height: 32px; /* Altura igual al ancho (círculo perfecto) */
display: flex; /* Flexbox para centrar el ícono */
align-items: center; /* Centra verticalmente el ícono */
justify-content: center; /* Centra horizontalmente el ícono */
border-radius: 50%; /* Forma circular perfecta */
background-color: #153547; /* Fondo azul oscuro corporativo */
color: var(--color-white); /* Íconos blancos para contraste */
transition: var(--transition); /* Transición suave para efectos hover */
font-size: 14px; /* Tamaño del ícono */
}
/* Efectos hover en redes sociales */
.social-header-top a:hover {
background-color: var(--color-primary); /* Cambia a color primario al hover */
transform: translateY(-2px); /* Efecto de elevación sutil */
}
/* Mantener .social-header para compatibilidad (oculto por defecto) */
.social-header {
display: none;
}
/* Enlaces individuales de redes sociales (legacy) */
.social-header a {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #153547;
color: var(--color-white);
transition: var(--transition);
}
/* Efectos hover en redes sociales (legacy) */
.social-header a:hover {
background-color: var(--color-dark-blue);
transform: translateY(-2px);
}
/* ========================================
Menú Hamburguesa (Móviles)
========================================
Botón hamburguesa que aparece en dispositivos móviles
para mostrar/ocultar el menú de navegación. Se transforma
en una X cuando está activo.
======================================== */
/* Botón hamburguesa principal - Moderno y atractivo */
.menu-toggle {
display: none; /* Oculto por defecto (solo móviles) */
flex-direction: column; /* Apila las líneas verticalmente */
justify-content: center; /* Centrar verticalmente */
align-items: center; /* Centrar horizontalmente */
gap: 4px; /* Espacio entre líneas optimizado */
background: none; /* Sin fondo inicial */
border: none; /* Sin borde */
cursor: pointer; /* Cursor interactivo */
padding: 12px; /* Área de toque más amplia */
z-index: 999999; /* Z-index máximo */
position: relative; /* Contexto de posicionamiento */
border-radius: 8px; /* Bordes redondeados */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
transform-origin: center; /* Punto de transformación central */
}
/* Líneas individuales del ícono hamburguesa */
.menu-toggle span {
width: 25px; /* Ancho de cada línea */
height: 3px; /* Grosor de cada línea */
background-color: var(--color-primary); /* Color burdeo corporativo */
transition: var(--transition); /* Transición para animación */
}
/* Estado activo del botón hamburguesa */
.menu-toggle:hover span,
.menu-toggle.active span {
background-color: #2c5f7a; /* Color azul petróleo para hover y activo */
}
/* Estado pressed del botón hamburguesa */
.menu-toggle:active span {
background-color: #1e4755; /* Color más oscuro para estado pressed */
}
/* Animación línea superior cuando está activo (forma parte de la X) */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px); /* Rota y posiciona para formar X */
}
/* Animación línea central cuando está activo (desaparece) */
.menu-toggle.active span:nth-child(2) {
opacity: 0; /* Se vuelve invisible */
}
/* Animación línea inferior cuando está activo (forma parte de la X) */
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px); /* Rota y posiciona para formar X */
}
/* ========================================
Sección de Acceso para Socios
========================================
Sistema de login moderno para socios con tarjetas
de acceso y registro. Incluye formulario de login
con validación y sección de beneficios para nuevos socios.
Elementos incluidos:
- Formulario de login con RUT y contraseña
- Sección de registro/afiliación
- Lista de beneficios para socios
- Diseño responsive con tarjetas modernas
======================================== */
/* Contenedor principal de la sección */
.member-access {
background: linear-gradient(135deg, #1a365d 0%, #2c5f7a 50%, #4a90a4 100%); /* Gradiente azul del screenshot */
padding: var(--spacing-sm) 0; /* Reducido de spacing-md */
position: relative;
}
/* Overlay decorativo */
.member-access::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Grid responsivo para las tarjetas */
.access-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
align-items: start;
position: relative;
z-index: 2;
}
/* ========================================
Tarjeta de Login de Socios
======================================== */
/* Tarjeta principal de login */
.login-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px; /* Reducido de 16px */
padding: var(--spacing-sm); /* Reducido de spacing-md */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Reducido */
border: 1px solid rgba(255, 255, 255, 0.3);
transition: var(--transition);
}
.login-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
/* Encabezado de la tarjeta de login */
.login-card .card-header {
text-align: center;
margin-bottom: var(--spacing-sm); /* Reducido de spacing-md */
}
.login-card .card-header i {
font-size: 1.8rem; /* Reducido de 2.2rem */
color: #2c5f7a;
margin-bottom: 6px; /* Reducido */
}
.login-card .card-header h3 {
font-size: 1.1rem; /* Reducido de 1.3rem */
font-weight: 700;
color: var(--color-gray-dark);
margin-bottom: 3px; /* Reducido */
}
.login-card .card-header p {
color: var(--color-gray-medium);
font-size: 0.9rem;
}
/* Formulario de login */
.login-form .form-group {
margin-bottom: var(--spacing-sm);
}
.login-form label {
display: block;
font-weight: 600;
color: var(--color-gray-dark);
margin-bottom: var(--spacing-xs);
font-size: 0.9rem;
}
/* Contenedor de input con ícono */
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group i {
position: absolute;
left: 15px;
color: #2c5f7a;
font-size: 1rem;
z-index: 2;
}
.input-group input {
width: 100%;
padding: 12px 12px 12px 40px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 0.95rem;
transition: var(--transition);
background: var(--color-white);
}
.input-group input:focus {
outline: none;
border-color: #2c5f7a;
box-shadow: 0 0 0 3px rgba(44, 95, 122, 0.1);
}
/* Botón para mostrar/ocultar contraseña */
.toggle-password {
position: absolute;
right: 15px;
background: none;
border: none;
color: var(--color-gray-medium);
cursor: pointer;
padding: 5px;
transition: var(--transition);
}
.toggle-password:hover {
color: #2c5f7a;
}
/* Opciones del formulario (recordar y olvidé contraseña) */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
font-size: 0.9rem;
}
/* Checkbox personalizado */
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 500;
color: var(--color-gray-dark);
}
.checkbox-container input {
display: none;
}
.checkmark {
width: 18px;
height: 18px;
border: 2px solid #2c5f7a;
border-radius: 4px;
margin-right: 8px;
position: relative;
transition: var(--transition);
}
.checkbox-container input:checked + .checkmark {
background-color: #2c5f7a;
}
.checkbox-container input:checked + .checkmark::after {
content: '✓';
position: absolute;
top: -2px;
left: 2px;
color: white;
font-size: 12px;
font-weight: bold;
}
/* Enlace "Olvidé mi contraseña" */
.forgot-link {
color: #2c5f7a;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.forgot-link:hover {
color: #1a365d;
text-decoration: underline;
}
/* Botón de login */
.btn-login {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #2c5f7a 0%, #4a90a4 100%);
color: var(--color-white);
border: none;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-login:hover {
background: linear-gradient(135deg, #1a365d 0%, #2c5f7a 100%);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(44, 95, 122, 0.3);
}
.btn-login:active {
transform: translateY(0);
}
/* ========================================
Tarjeta de Registro/Afiliación
======================================== */
/* Tarjeta principal de registro */
.register-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px; /* Reducido de 16px */
padding: var(--spacing-sm); /* Reducido de spacing-md */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Reducido */
border: 1px solid rgba(255, 255, 255, 0.3);
transition: var(--transition);
}
.register-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
/* Encabezado de la tarjeta de registro */
.register-card .card-header {
text-align: center;
margin-bottom: var(--spacing-sm); /* Reducido de spacing-lg */
}
.register-card .card-header i {
font-size: 1.8rem; /* Reducido de 2.2rem */
color: #4a90a4;
margin-bottom: 6px; /* Reducido */
}
.register-card .card-header h3 {
font-size: 1.1rem; /* Reducido de 1.3rem */
font-weight: 700;
color: var(--color-gray-dark);
margin-bottom: 3px; /* Reducido */
}
.register-card .card-header p {
color: var(--color-gray-medium);
font-size: 0.9rem;
}
/* Lista de beneficios */
.benefits-list {
margin-bottom: var(--spacing-lg);
}
.benefit-item {
display: flex;
align-items: center;
margin-bottom: var(--spacing-sm);
font-size: 0.95rem;
}
.benefit-item i {
color: #28a745;
margin-right: var(--spacing-sm);
font-size: 1.1rem;
}
.benefit-item span {
color: var(--color-gray-dark);
font-weight: 500;
}
/* Botón de registro */
.btn-register {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #023f50 0%, #0f6e26 100%);
color: var(--color-white);
border: none;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: var(--spacing-xs);
}
.btn-register:hover {
background: linear-gradient(135deg, #2c5f7a 0%, #218838 100%);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(74, 144, 164, 0.3);
}
.btn-register:active {
transform: translateY(0);
}
/* Nota informativa */
.register-note {
text-align: center;
font-size: 0.85rem;
color: var(--color-gray-medium);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.register-note i {
color: #4a90a4;
}
/* ========================================
Responsive Design para Acceso de Socios
======================================== */
/* Tablets */
@media (max-width: 992px) {
.access-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.member-access {
padding: var(--spacing-md) 0; /* Reducido de spacing-lg */
}
.login-card,
.register-card {
padding: var(--spacing-sm); /* Reducido de spacing-md */
}
}
/* Móviles */
@media (max-width: 768px) {
.member-access {
padding: var(--spacing-sm) 0; /* Reducido de spacing-md */
}
.login-card .card-header i,
.register-card .card-header i {
font-size: 2.5rem;
}
.input-group input {
padding: 12px 12px 12px 40px;
font-size: 0.9rem;
}
.btn-login,
.btn-register {
padding: 12px;
font-size: 0.9rem;
}
.form-options {
flex-direction: column;
gap: var(--spacing-xs);
text-align: center;
}
}
/* ========================================
Hero Slider - Carrusel Principal
========================================
Sistema de slider automático con 3 imágenes que se
alternan cada 10 segundos. Incluye controles manuales,
indicadores de posición y navegación con teclado.
Características:
- Auto-avance cada 10 segundos
- Controles manuales (anterior/siguiente)
- Indicadores clickeables
- Soporte para swipe en móviles
- Pausa al hacer hover
- Navegación con flechas del teclado
======================================== */
/* Contenedor principal del slider */
.hero-slider {
position: relative; /* Necesario para posicionar elementos internos */
height: 60vh; /* Altura responsiva (60% del viewport) */
min-height: 500px; /* Altura mínima para pantallas pequeñas */
overflow: hidden; /* Oculta contenido que sobresale */
z-index: 0; /* Z-index muy bajo para estar por debajo del menú */
}
/* Contenedor interno que mantiene la estructura del slider */
.slider-container {
position: relative; /* Contexto de posicionamiento para slides */
width: 100%; /* Ocupa todo el ancho disponible */
height: 100%; /* Ocupa toda la altura del slider */
z-index: 1; /* Z-index bajo para elementos internos */
}
/* Slides individuales del carrusel */
.slide {
position: absolute; /* Posicionamiento absoluto para superposición */
top: 0; /* Alineado al tope */
left: 0; /* Alineado a la izquierda */
width: 100%; /* Ocupa todo el ancho */
height: 100%; /* Ocupa toda la altura */
background-size: cover; /* La imagen cubre todo el área */
background-position: center; /* Centra la imagen */
background-repeat: no-repeat; /* Evita repetición de la imagen */
display: flex; /* Flexbox para centrar contenido */
align-items: center; /* Centra verticalmente el contenido */
justify-content: center; /* Centra horizontalmente el contenido */
opacity: 0; /* Invisible por defecto */
transition: opacity 1s ease-in-out; /* Transición suave entre slides */
}
/* Slide activo (visible) */
.slide.active {
opacity: 1; /* Completamente visible */
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(21,53,71,0.7), rgba(15,41,56,0.9));
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: var(--color-white);
padding: var(--spacing-xl) 0;
max-width: 800px;
margin: 0 auto;
}
.hero-content h2 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.1;
animation: slideInUp 1s ease-out;
}
.hero-subtitle {
font-size: 1.25rem;
opacity: 0.95;
font-weight: 400;
max-width: 800px;
margin: 0 auto;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
line-height: 1.4;
animation: slideInUp 1s ease-out 0.3s both;
}
/* ========================================
Controles de Navegación del Slider
======================================== */
/* Contenedor para los botones de navegación (anterior/siguiente) */
.slider-nav {
position: absolute; /* Posicionamiento absoluto sobre el slider */
top: 50%; /* Centrado verticalmente */
transform: translateY(-50%); /* Ajuste para centrado perfecto */
width: 100%; /* Ocupa todo el ancho para posicionar botones */
z-index: 3; /* Por encima de las imágenes del slider */
pointer-events: none; /* No interfiere con otros elementos */
}
/* Botones de navegación (anterior/siguiente) */
.nav-btn {
position: absolute; /* Posicionamiento absoluto individual */
background: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente */
border: 2px solid rgba(255, 255, 255, 0.3); /* Borde semi-transparente */
color: var(--color-white); /* Íconos blancos */
width: 50px; /* Ancho fijo para consistencia */
height: 50px; /* Altura igual (círculo perfecto) */
border-radius: 50%; /* Forma circular */
cursor: pointer; /* Indica interactividad */
display: flex; /* Flexbox para centrar ícono */
align-items: center; /* Centra verticalmente el ícono */
justify-content: center; /* Centra horizontalmente el ícono */
font-size: 1.2rem; /* Tamaño del ícono de flecha */
transition: all 0.3s ease; /* Transición suave para efectos */
backdrop-filter: blur(10px); /* Efecto de desenfoque del fondo */
pointer-events: all; /* Habilita la interacción */
}
/* Estado hover de los botones de navegación */
.nav-btn:hover {
background: rgba(255, 255, 255, 0.3); /* Fondo más opaco al hover */
border-color: rgba(255, 255, 255, 0.5); /* Borde más visible */
transform: scale(1.1); /* Efecto de crecimiento sutil */
}
/* Estado activo (al hacer clic) */
.nav-btn:active {
transform: scale(0.95); /* Efecto de contracción al hacer clic */
}
/* Posicionamiento del botón anterior */
.prev-btn {
left: var(--spacing-lg); /* Posicionado a la izquierda con margen */
}
/* Posicionamiento del botón siguiente */
.next-btn {
right: var(--spacing-lg); /* Posicionado a la derecha con margen */
}
/* ========================================
Indicadores de Posición del Slider
======================================== */
/* Contenedor de los indicadores (puntos) */
.slider-indicators {
position: absolute; /* Posicionamiento absoluto sobre el slider */
bottom: var(--spacing-lg); /* Posicionado en la parte inferior */
left: 50%; /* Centrado horizontalmente */
transform: translateX(-50%); /* Ajuste para centrado perfecto */
display: flex; /* Layout horizontal para los puntos */
gap: var(--spacing-sm); /* Espacio entre indicadores */
z-index: 3; /* Por encima de las imágenes */
}
/* Indicadores individuales (puntos) */
.indicator {
width: 12px; /* Ancho del punto indicador */
height: 12px; /* Altura igual (círculo perfecto) */
border-radius: 50%; /* Forma circular */
background: rgba(255, 255, 255, 0.4); /* Fondo semi-transparente */
border: 2px solid rgba(255, 255, 255, 0.6); /* Borde semi-transparente */
cursor: pointer; /* Indica que es clickeable */
transition: all 0.3s ease; /* Transición suave para efectos */
backdrop-filter: blur(5px); /* Efecto de desenfoque sutil */
}
/* Estado hover de los indicadores */
.indicator:hover {
background: rgba(255, 255, 255, 0.6); /* Más opaco al hacer hover */
transform: scale(1.2); /* Crecimiento sutil */
}
/* Indicador activo (slide actual) */
.indicator.active {
background: var(--color-white); /* Completamente blanco */
border-color: var(--color-white); /* Borde blanco sólido */
transform: scale(1.3); /* Más grande que los demás */
}
/* ========================================
Sección Call-to-Action: Hazte Socio
========================================
Botón de llamada a la acción estratégicamente ubicado
después del slider principal para maximizar conversiones.
Diseño centrado con gradiente sutil de fondo.
======================================== */
/* Contenedor de la sección CTA */
.hazte-socio-section {
padding: var(--spacing-xl) 0;
background: linear-gradient(135deg,
var(--color-background) 0%,
rgba(21, 53, 71, 0.02) 100%);
text-align: center;
}
/* Contenedor interno para centrado */
.hazte-socio-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: var(--spacing-md) 0;
}
/* Botón principal CTA "Hazte Socio" */
.btn-hazte-socio {
/* Layout y posicionamiento */
display: inline-block;
padding: 1.25rem 3.75rem;
margin: var(--spacing-md) auto;
min-width: 300px;
/* Apariencia visual */
background-color: var(--color-dark-blue);
color: var(--color-white);
border: none;
border-radius: 50px;
/* Tipografía */
font-family: var(--font-primary);
font-size: 1.75rem;
font-weight: 700;
text-align: center;
text-decoration: none;
letter-spacing: 0.5px;
/* Efectos y transiciones */
box-shadow:
0 10px 30px rgba(21, 53, 71, 0.5),
0 5px 15px rgba(21, 53, 71, 0.3);
transition: var(--transition);
cursor: pointer;
/* Accesibilidad */
outline: none;
}
/* Estado focus para accesibilidad */
.btn-hazte-socio:focus {
outline: 2px solid var(--color-dark-blue);
outline-offset: 2px;
}
/* Estados interactivos del botón CTA */
.btn-hazte-socio:hover {
background-color: #0f2a36;
transform: translateY(-3px) scale(1.02);
box-shadow:
0 15px 40px rgba(21, 53, 71, 0.6),
0 8px 25px rgba(21, 53, 71, 0.4);
}
.btn-hazte-socio:active {
transform: translateY(-1px) scale(1.01);
transition: all 0.1s ease;
}
/* Efecto de brillo sutil (opcional) */
.btn-hazte-socio::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent);
transition: left 0.6s ease;
}
.btn-hazte-socio:hover::before {
left: 100%;
}
/* ========================================
Animaciones CSS - Efectos de Entrada
========================================
Definición de animaciones reutilizables para efectos
de entrada suaves y profesionales en elementos del sitio.
======================================== */
/* Animación de entrada desde abajo con desvanecimiento */
@keyframes slideInUp {
from {
opacity: 0; /* Comienza invisible */
transform: translateY(30px); /* Posición inicial 30px hacia abajo */
}
to {
opacity: 1; /* Termina completamente visible */
transform: translateY(0); /* Posición final en su lugar original */
}
}
/* Animación simple de desvanecimiento */
@keyframes fadeIn {
from {
opacity: 0; /* Comienza invisible */
}
to {
opacity: 1; /* Termina completamente visible */
}
}
/* ========================================
Enlaces Rápidos - Accesos Directos
========================================
Sección que muestra tarjetas con enlaces rápidos a
las secciones más importantes del sitio. Incluye
íconos, títulos descriptivos y efectos hover.
Elementos:
- Archivos Multimedia
- Actas Directorio Nacional
- Comunicados ANFDGAC
======================================== */
/* Contenedor principal de la sección de enlaces rápidos */
.quick-links {
background-color: var(--color-white); /* Fondo blanco para contraste */
padding: var(--spacing-xl) 0; /* Padding vertical generoso */
}
/* Grid responsivo para las tarjetas de enlaces */
.links-grid {
display: grid; /* Layout de grilla CSS */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columnas responsivas */
gap: var(--spacing-md); /* Espacio entre tarjetas */
}
/* Tarjetas individuales de enlaces rápidos */
.link-card {
background-color: var(--color-white); /* Fondo blanco para la tarjeta */
border: 2px solid var(--color-gray-light); /* Borde gris claro sutil */
border-radius: var(--border-radius-lg); /* Bordes redondeados suaves */
padding: var(--spacing-md); /* Padding interno generoso */
text-align: center; /* Contenido centrado */
transition: var(--transition); /* Transición suave para efectos */
}
/* Efectos hover en las tarjetas */
.link-card:hover {
border-color: var(--color-primary); /* Borde burdeo al hacer hover */
box-shadow: var(--shadow-md); /* Sombra para profundidad */
transform: translateY(-5px); /* Efecto de elevación */
}
/* Íconos de las tarjetas de enlaces */
.link-icon {
width: 60px; /* Ancho fijo del contenedor del ícono */
height: 60px; /* Altura igual (círculo perfecto) */
margin: 0 auto var(--spacing-sm); /* Centrado y margen inferior */
display: flex; /* Flexbox para centrar ícono */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
background: linear-gradient(135deg, var(--color-primary) 0%, #b31f1c 100%); /* Gradiente burdeo */
border-radius: 50%; /* Forma circular perfecta */
color: var(--color-white); /* Íconos blancos para contraste */
font-size: 1.5rem; /* Tamaño del ícono */
}
/* Títulos de las tarjetas */
.link-card h3 {
font-size: 1rem; /* Tamaño de fuente estándar */
font-weight: 600; /* Peso semibold para énfasis */
color: var(--color-gray-dark); /* Color de texto principal */
margin-bottom: var(--spacing-sm); /* Margen inferior */
min-height: 48px; /* Altura mínima para consistencia */
display: flex; /* Flexbox para centrado */
align-items: center; /* Centra verticalmente el texto */
justify-content: center; /* Centra horizontalmente el texto */
}
/* Botones de enlace en las tarjetas */
.btn-link {
display: inline-block; /* Comportamiento de bloque inline */
color: var(--color-primary); /* Color burdeo corporativo */
font-weight: 600; /* Peso semibold para énfasis */
font-size: 0.9rem; /* Tamaño ligeramente menor */
padding: var(--spacing-xs) var(--spacing-sm); /* Padding para área de clic */
border-radius: var(--border-radius); /* Bordes redondeados suaves */
transition: var(--transition); /* Transición suave para hover */
}
/* Estado hover de los botones de enlace */
.btn-link:hover {
background-color: var(--color-primary); /* Fondo burdeo al hacer hover */
color: var(--color-white); /* Texto blanco para contraste */
}
/* ========================================
Sección de Registro Moderna
========================================
Card moderna con diseño atractivo, efectos visuales avanzados
y paleta de colores corporativa ANFDGAC.
======================================== */
/* Contenedor principal moderno */
.register-section-modern {
padding: 4rem 0;
background: linear-gradient(135deg,
var(--color-background) 0%,
rgba(147, 25, 22, 0.02) 50%,
var(--color-gray-light) 100%);
position: relative;
overflow: hidden;
}
/* Tarjeta de registro moderna */
.register-card-modern {
max-width: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 24px;
backdrop-filter: blur(20px);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transform-style: preserve-3d;
}
.register-card-modern:hover {
transform: translateY(-10px) rotateX(2deg);
box-shadow:
0 40px 80px rgba(147, 25, 22, 0.2),
0 0 40px rgba(21, 53, 71, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Fondo de la card con efectos */
.card-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
var(--color-white) 0%,
rgba(255, 255, 255, 0.95) 50%,
rgba(247, 250, 252, 0.9) 100%);
border-radius: 24px;
}
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(147, 25, 22, 0.05) 0%,
rgba(21, 53, 71, 0.03) 50%,
rgba(147, 25, 22, 0.02) 100%);
border-radius: 24px;
}
.pattern-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(147, 25, 22, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(21, 53, 71, 0.08) 0%, transparent 50%);
border-radius: 24px;
}
/* Contenido principal de la card */
.card-content {
position: relative;
z-index: 2;
padding: 3rem;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 2rem;
align-items: center;
}
/* Icono moderno */
.card-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper {
width: 100px;
height: 100px;
background: linear-gradient(135deg,
var(--color-primary) 0%,
#b91c19 50%,
#7a1311 100%);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow:
0 20px 40px rgba(147, 25, 22, 0.4),
inset 0 2px 0 rgba(255, 255, 255, 0.3),
inset 0 -2px 0 rgba(0, 0, 0, 0.1);
animation: icon-float 3s ease-in-out infinite;
}
.icon-wrapper i {
font-size: 2.5rem;
color: var(--color-white);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.icon-glow {
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(147, 25, 22, 0.2) 0%, transparent 70%);
border-radius: 50%;
animation: glow-pulse 2s ease-in-out infinite alternate;
}
@keyframes icon-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-5px) rotate(1deg); }
66% { transform: translateY(2px) rotate(-1deg); }
}
@keyframes glow-pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.1); }
}
/* Contenido de texto moderno */
.card-text {
flex: 1;
max-width: 500px;
}
.card-badge {
display: inline-block;
background: linear-gradient(135deg,
rgba(147, 25, 22, 0.1) 0%,
rgba(147, 25, 22, 0.15) 100%);
color: var(--color-primary);
padding: 0.6rem 1.2rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
border: 2px solid rgba(147, 25, 22, 0.2);
backdrop-filter: blur(10px);
animation: badge-shimmer 3s ease-in-out infinite;
}
.card-title {
font-size: 2rem;
font-weight: 900;
margin: 0 0 1rem 0;
background: linear-gradient(135deg,
var(--color-dark-blue) 0%,
var(--color-primary) 50%,
var(--color-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-description {
font-size: 1rem;
color: var(--color-gray-dark);
line-height: 1.7;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.benefits-list {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 2rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 12px;
border: 1px solid rgba(147, 25, 22, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(147, 25, 22, 0.05);
transform: translateX(5px);
}
.benefit-item i {
color: var(--color-primary);
font-size: 1.1rem;
min-width: 20px;
}
.benefit-item span {
color: var(--color-gray-dark);
font-weight: 600;
font-size: 0.9rem;
}
@keyframes badge-shimmer {
0%, 100% {
background: linear-gradient(135deg, rgba(147, 25, 22, 0.1) 0%, rgba(147, 25, 22, 0.15) 100%);
border-color: rgba(147, 25, 22, 0.2);
}
50% {
background: linear-gradient(135deg, rgba(147, 25, 22, 0.15) 0%, rgba(147, 25, 22, 0.2) 100%);
border-color: rgba(147, 25, 22, 0.3);
}
}
/* Botones de acción modernos */
.card-actions {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.btn-primary-modern {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: linear-gradient(135deg,
var(--color-primary) 0%,
#b91c19 50%,
#7a1311 100%);
color: var(--color-white);
text-decoration: none;
border-radius: 50px;
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow:
0 10px 30px rgba(147, 25, 22, 0.4),
inset 0 2px 0 rgba(255, 255, 255, 0.2),
0 0 20px rgba(147, 25, 22, 0.2);
min-width: 220px;
}
.btn-primary-modern:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 20px 40px rgba(147, 25, 22, 0.5),
inset 0 2px 0 rgba(255, 255, 255, 0.3),
0 0 30px rgba(147, 25, 22, 0.3);
color: var(--color-white);
}
.btn-text {
display: flex;
align-items: center;
gap: 0.8rem;
position: relative;
z-index: 2;
}
.btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transition: left 0.6s ease;
}
.btn-primary-modern:hover .btn-shine {
left: 100%;
}
.btn-secondary-modern {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1.5rem;
background: rgba(255, 255, 255, 0.8);
color: var(--color-gray-dark);
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
border: 2px solid rgba(147, 25, 22, 0.2);
backdrop-filter: blur(20px);
transition: all 0.3s ease;
}
.btn-secondary-modern:hover {
background: rgba(147, 25, 22, 0.1);
color: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
}
/* Decoraciones flotantes */
.card-decorations {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.floating-element {
position: absolute;
border-radius: 50%;
opacity: 0.6;
}
.element-1 {
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(147, 25, 22, 0.15) 0%, transparent 70%);
top: 20%;
right: 10%;
animation: float-1 6s ease-in-out infinite;
}
.element-2 {
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(21, 53, 71, 0.12) 0%, transparent 70%);
bottom: 20%;
left: 8%;
animation: float-2 8s ease-in-out infinite reverse;
}
.element-3 {
width: 40px;
height: 40px;
background: radial-gradient(circle, rgba(147, 25, 22, 0.1) 0%, transparent 70%);
top: 60%;
right: 25%;
animation: float-3 7s ease-in-out infinite;
}
@keyframes float-1 {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.6;
}
33% {
transform: translate(-10px, -15px) rotate(120deg);
opacity: 0.8;
}
66% {
transform: translate(15px, -5px) rotate(240deg);
opacity: 0.4;
}
}
@keyframes float-2 {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.5;
}
50% {
transform: translate(20px, -20px) scale(1.2);
opacity: 0.8;
}
}
@keyframes float-3 {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 0.4;
}
25% {
transform: translate(-8px, 10px) rotate(90deg) scale(0.8);
opacity: 0.7;
}
75% {
transform: translate(12px, -8px) rotate(270deg) scale(1.1);
opacity: 0.6;
}
}
/* Responsive para el registro moderno */
@media (max-width: 1024px) {
.card-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
padding: 2.5rem;
}
.card-text {
max-width: 600px;
margin: 0 auto;
}
.card-actions {
margin-top: 1rem;
}
}
@media (max-width: 768px) {
.register-section-modern {
padding: 2.5rem 0;
}
.register-card-modern {
margin: 0 1rem;
border-radius: 20px;
}
.card-content {
padding: 2rem 1.5rem;
gap: 1.5rem;
}
.icon-wrapper {
width: 80px;
height: 80px;
border-radius: 20px;
}
.icon-wrapper i {
font-size: 2rem;
}
.icon-glow {
width: 100px;
height: 100px;
}
.card-title {
font-size: 1.6rem;
}
.card-description {
font-size: 0.95rem;
}
.benefits-list {
margin-bottom: 1.5rem;
}
.benefit-item {
padding: 0.7rem;
}
.btn-primary-modern {
padding: 0.9rem 1.8rem;
font-size: 0.95rem;
min-width: 200px;
}
.btn-secondary-modern {
padding: 0.7rem 1.3rem;
font-size: 0.85rem;
}
.floating-element {
display: none;
}
}
@media (max-width: 480px) {
.register-section-modern {
padding: 2rem 0;
}
.card-content {
padding: 1.5rem 1rem;
}
.icon-wrapper {
width: 70px;
height: 70px;
}
.icon-wrapper i {
font-size: 1.8rem;
}
.card-title {
font-size: 1.4rem;
}
.card-description {
font-size: 0.9rem;
}
.benefit-item span {
font-size: 0.85rem;
}
.btn-primary-modern {
width: 100%;
max-width: 280px;
}
.btn-secondary-modern {
width: 100%;
max-width: 220px;
}
}
.register-decoration {
display: none;
}
@media (max-width: 480px) {
.register-card-mini {
margin: 0 1rem;
padding: 1rem;
}
.register-buttons {
flex-direction: column;
gap: 0.5rem;
}
.btn-register-mini {
width: 100%;
max-width: none;
}
}
/* ========================================
Sección de Noticias y Actividades
========================================
Muestra las últimas noticias, comunicados y actividades
de ANFDGAC en un grid responsivo de tarjetas. Incluye
categorización, fechas y efectos hover profesionales.
Categorías:
- NOTICIAS: Información general y novedades
- COMUNICADOS: Anuncios oficiales importantes
- ACTIVIDADES: Eventos y reuniones
- GALERÍA: Contenido fotográfico
======================================== */
/* Contenedor principal de la sección de noticias */
.news-section {
background-color: var(--color-background); /* Fondo gris claro para contraste */
padding: var(--spacing-xl) 0; /* Padding vertical generoso */
}
/* Encabezado de la sección */
.section-header {
text-align: center; /* Centra el título de la sección */
margin-bottom: var(--spacing-lg); /* Margen inferior antes del contenido */
}
/* Título principal de la sección */
.section-header h2 {
font-size: 2.5rem; /* Tamaño grande para jerarquía visual */
font-weight: 700; /* Peso bold para importancia */
color: var(--color-dark-blue); /* Color azul oscuro institucional */
position: relative; /* Necesario para el pseudo-elemento */
display: inline-block; /* Permite centrar el pseudo-elemento */
}
/* Línea decorativa debajo del título */
.section-header h2::after {
content: ''; /* Pseudo-elemento vacío */
position: absolute; /* Posicionamiento absoluto respecto al título */
bottom: -10px; /* 10px debajo del texto */
left: 50%; /* Centrado horizontalmente */
transform: translateX(-50%); /* Ajuste para centrado perfecto */
width: 80px; /* Ancho de la línea decorativa */
height: 4px; /* Grosor de la línea */
background-color: var(--color-primary); /* Color burdeo corporativo */
border-radius: 2px; /* Bordes redondeados suaves */
}
/* Grid responsivo para las tarjetas de noticias */
.news-grid {
display: grid; /* Layout de grilla CSS */
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Columnas responsivas de mínimo 350px */
gap: var(--spacing-md); /* Espacio uniforme entre tarjetas */
margin-bottom: var(--spacing-lg); /* Margen inferior antes del botón */
}
/* ========================================
Tarjetas de Noticias Individuales
======================================== */
/* Contenedor principal de cada tarjeta de noticia */
.news-card {
background-color: var(--color-white); /* Fondo blanco para contraste */
border-radius: var(--border-radius-lg); /* Bordes redondeados suaves */
overflow: hidden; /* Oculta contenido que sobresale */
box-shadow: var(--shadow-sm); /* Sombra sutil por defecto */
transition: var(--transition); /* Transición suave para efectos */
}
/* Efectos hover en las tarjetas de noticias */
.news-card:hover {
box-shadow: var(--shadow-lg); /* Sombra más pronunciada al hover */
transform: translateY(-5px); /* Efecto de elevación */
}
/* ========================================
Sección de Imagen de las Noticias
======================================== */
/* Contenedor de la imagen de la noticia */
.news-image {
position: relative; /* Necesario para posicionar la etiqueta de categoría */
height: 200px; /* Altura fija para consistencia */
overflow: hidden; /* Oculta partes de imagen que sobresalen */
}
/* Imagen de la noticia */
.news-image img {
width: 100%; /* Ocupa todo el ancho del contenedor */
height: 100%; /* Ocupa toda la altura del contenedor */
object-fit: cover; /* Mantiene proporción y cubre el área */
transition: var(--transition); /* Transición para efecto zoom */
}
/* Efecto zoom en la imagen al hacer hover en la tarjeta */
.news-card:hover .news-image img {
transform: scale(1.05); /* Zoom sutil del 5% */
}
/* ========================================
Etiquetas de Categoría de Noticias
======================================== */
/* Etiqueta de categoría sobre la imagen */
.news-category {
position: absolute; /* Posicionado sobre la imagen */
top: var(--spacing-sm); /* Margen desde la parte superior */
left: var(--spacing-sm); /* Margen desde la izquierda */
background-color: var(--color-primary); /* Fondo burdeo corporativo */
color: var(--color-white); /* Texto blanco para contraste */
padding: var(--spacing-xs) var(--spacing-sm); /* Padding interno */
border-radius: var(--border-radius); /* Bordes redondeados */
font-size: 0.75rem; /* Tamaño pequeño para discreción */
font-weight: 600; /* Peso semibold para legibilidad */
text-transform: uppercase; /* Texto en mayúsculas */
letter-spacing: 0.5px; /* Espaciado entre letras */
}
/* ========================================
Contenido Textual de las Noticias
======================================== */
/* Contenedor del texto de la noticia */
.news-content {
padding: var(--spacing-md); /* Padding interno generoso para legibilidad */
}
/* Título de la noticia */
.news-content h3 {
font-size: 1.25rem; /* Tamaño prominente para el título */
font-weight: 600; /* Peso semibold para jerarquía */
color: var(--color-gray-dark); /* Color oscuro para legibilidad */
margin-bottom: var(--spacing-sm); /* Margen inferior antes del texto */
line-height: 1.4; /* Altura de línea para legibilidad */
}
/* Texto descriptivo de la noticia */
.news-content p {
font-size: 0.95rem; /* Tamaño ligeramente menor que el base */
color: var(--color-gray-medium); /* Color gris para jerarquía visual */
margin-bottom: var(--spacing-sm); /* Margen inferior antes de los metadatos */
line-height: 1.5; /* Altura de línea óptima para lectura */
}
/* ========================================
Metadatos de las Noticias
======================================== */
/* Contenedor de metadatos (fecha, autor, etc.) */
.news-meta {
display: flex; /* Layout horizontal para metadatos */
align-items: center; /* Alineación vertical centrada */
gap: var(--spacing-sm); /* Espacio entre elementos de metadata */
font-size: 0.85rem; /* Tamaño pequeño para información secundaria */
color: var(--color-gray-medium); /* Color gris para menor prominencia */
}
/* Fecha de la noticia */
.news-date {
font-style: italic; /* Cursiva para distinguir la fecha */
}
/* Autor de la noticia */
.news-author {
font-weight: 500; /* Peso medio para distinguir el autor */
color: var(--color-gray-dark); /* Color más oscuro para mejor legibilidad */
}
/* ========================================
Pie de Sección y Botones Principales
======================================== */
/* Pie de la sección de noticias */
.section-footer {
text-align: center; /* Centra el botón "Ver más" */
margin-top: var(--spacing-lg); /* Margen superior generoso */
}
/* Botón principal del sitio */
.btn-primary {
display: inline-block; /* Comportamiento de bloque inline */
background-color: var(--color-primary); /* Fondo burdeo corporativo */
color: var(--color-white); /* Texto blanco para contraste */
padding: var(--spacing-sm) var(--spacing-lg); /* Padding generoso para área de clic */
border-radius: var(--border-radius-lg); /* Bordes redondeados suaves */
font-weight: 600; /* Peso semibold para énfasis */
font-size: 1rem; /* Tamaño estándar de fuente */
transition: var(--transition); /* Transición suave para efectos */
box-shadow: var(--shadow-sm); /* Sombra sutil para profundidad */
}
/* Estado hover del botón principal */
.btn-primary:hover {
background-color: var(--color-dark-blue); /* Cambia a azul oscuro al hover */
box-shadow: var(--shadow-md); /* Sombra más pronunciada */
transform: translateY(-2px); /* Efecto de elevación */
}
/* ========================================
Sección Multimedia y Redes Sociales
========================================
Sección con fondo degradado que promociona las redes
sociales oficiales y el archivo histórico de ANFDGAC.
Utiliza efectos de glassmorphism para un diseño moderno.
Elementos incluidos:
- Archivo Histórico ANFDGAC
- Canal de YouTube
- Página de Facebook
- Perfil de Instagram
======================================== */
/* Contenedor principal con fondo degradado */
.media-section {
background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-dark-blue-alt) 100%); /* Gradiente azul institucional */
padding: var(--spacing-xl) 0; /* Padding vertical generoso */
}
/* Grid responsivo para tarjetas de redes sociales */
.media-grid {
display: grid; /* Layout de grilla CSS */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas mínimo 250px */
gap: var(--spacing-md); /* Espacio uniforme entre tarjetas */
}
/* ========================================
Tarjetas de Redes Sociales (Glassmorphism)
======================================== */
/* Tarjetas individuales con efecto de cristal */
.media-card {
background-color: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
backdrop-filter: blur(10px); /* Efecto de desenfoque del fondo */
border: 1px solid rgba(255, 255, 255, 0.2); /* Borde semi-transparente */
border-radius: var(--border-radius-lg); /* Bordes redondeados suaves */
padding: var(--spacing-md); /* Padding interno */
text-align: center; /* Contenido centrado */
color: var(--color-white); /* Texto blanco para contraste */
transition: var(--transition); /* Transición suave para efectos */
}
/* Efectos hover en las tarjetas de redes sociales */
.media-card:hover {
background-color: rgba(147, 25, 22, 0.3); /* Fondo burdeo semi-transparente al hover */
border-color: var(--color-primary); /* Borde burdeo sólido */
transform: translateY(-5px); /* Efecto de elevación */
}
/* Modificador para tarjetas grandes (si es necesario) */
.media-card-large {
grid-column: span 1; /* Ocupa una columna (puede expandirse si es necesario) */
}
/* ========================================
Íconos de las Redes Sociales
======================================== */
/* Contenedor del ícono de cada red social */
.media-icon {
width: 70px; /* Ancho fijo del contenedor */
height: 70px; /* Altura igual (círculo perfecto) */
margin: 0 auto var(--spacing-sm); /* Centrado horizontalmente con margen inferior */
display: flex; /* Flexbox para centrar ícono */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
background-color: var(--color-primary); /* Fondo burdeo corporativo */
border-radius: 50%; /* Forma circular perfecta */
font-size: 2rem; /* Tamaño grande para el ícono */
}
/* Títulos de las tarjetas de redes sociales */
.media-card h3 {
font-size: 1.1rem; /* Tamaño ligeramente mayor al estándar */
font-weight: 600; /* Peso semibold para énfasis */
margin-bottom: var(--spacing-sm); /* Margen inferior antes del botón */
}
/* ========================================
Botones de Redes Sociales
======================================== */
/* Botones específicos para las tarjetas de redes sociales */
.media-card .btn-link {
color: var(--color-white); /* Texto blanco por defecto */
border: 1px solid var(--color-white); /* Borde blanco para definición */
padding: var(--spacing-xs) var(--spacing-md); /* Padding para área de clic */
margin-top: var(--spacing-xs); /* Margen superior pequeño */
}
/* Estado hover de los botones en tarjetas de redes sociales */
.media-card .btn-link:hover {
background-color: var(--color-white); /* Fondo blanco al hacer hover */
color: var(--color-dark-blue); /* Texto azul oscuro para contraste */
}
/* ========================================
Sección Sobre Nosotros
========================================
Sección informativa que describe la misión
y trayectoria de ANFDGAC. Texto centrado
con tipografía optimizada para legibilidad.
======================================== */
/* Contenedor principal de la sección sobre nosotros */
.about-section {
background-color: var(--color-white); /* Fondo blanco para legibilidad */
padding: var(--spacing-xl) 0; /* Padding vertical generoso */
}
/* Contenedor del contenido con ancho limitado */
.about-content {
max-width: 900px; /* Limita el ancho para óptima legibilidad */
margin: 0 auto; /* Centra horizontalmente el contenido */
text-align: center; /* Centra el texto */
}
/* Texto descriptivo de la organización */
.about-content p {
font-size: 1.15rem; /* Tamaño ligeramente mayor para énfasis */
line-height: 1.8; /* Altura de línea generosa para lectura */
color: var(--color-gray-dark); /* Color oscuro para buena legibilidad */
font-weight: 400; /* Peso normal para fácil lectura */
}
/* ========================================
Footer - Pie de Página Principal
========================================
Footer institucional que contiene información de
contacto, enlaces a redes sociales y copyright.
Incluye la dirección completa con enlace a mapa.
Elementos incluidos:
- Datos de contacto (dirección, email, teléfono)
- Enlaces a redes sociales
- Enlace a ubicación en Google Maps
- Copyright y derechos reservados
======================================== */
/* Contenedor principal del footer */
.footer {
background: linear-gradient(135deg, #03445e 0%, #027f66 100%); /* Gradiente azul verdoso a verde */
color: #FFFFFF; /* Texto blanco para contraste */
padding: var(--spacing-xl) 0 var(--spacing-md); /* Padding asimétrico */
}
/* Grid responsivo para las secciones del footer */
.footer-content {
display: grid; /* Layout de grilla CSS */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas */
gap: var(--spacing-lg); /* Espacio entre secciones */
margin-bottom: var(--spacing-lg); /* Margen antes del copyright */
}
/* Títulos de las secciones del footer */
.footer-section h3 {
font-size: 1.5rem; /* Tamaño prominente para títulos */
font-weight: 700; /* Peso bold para jerarquía */
margin-bottom: var(--spacing-md); /* Margen inferior antes del contenido */
color: #FFFFFF; /* Color blanco para contraste con gradiente */
}
/* ========================================
Información de Contacto en Footer
======================================== */
/* Párrafos de información de contacto */
.contact-info p {
margin-bottom: var(--spacing-sm); /* Margen entre líneas de contacto */
display: flex; /* Layout horizontal para ícono y texto */
align-items: center; /* Alineación vertical centrada */
gap: var(--spacing-sm); /* Espacio entre ícono y texto */
}
/* Íconos de la información de contacto */
.contact-info i {
color: #FFFFFF; /* Color blanco para contraste con gradiente */
width: 20px; /* Ancho fijo para alineación consistente */
}
/* ========================================
Enlaces a Redes Sociales en Footer
======================================== */
/* Contenedor de enlaces a redes sociales */
.social-links {
display: flex; /* Layout horizontal para íconos */
gap: var(--spacing-sm); /* Espacio entre íconos */
flex-wrap: wrap; /* Permite salto de línea en pantallas pequeñas */
}
/* Enlaces individuales a redes sociales */
.social-links a {
width: 45px; /* Ancho fijo del ícono */
height: 45px; /* Altura igual (círculo perfecto) */
display: flex; /* Flexbox para centrar ícono */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
border-radius: 50%; /* Forma circular */
background-color: #153547; /* Fondo azul oscuro corporativo */
color: var(--color-white); /* Ícono blanco para contraste */
font-size: 1.2rem; /* Tamaño del ícono */
transition: var(--transition); /* Transición suave para efectos */
}
/* Estado hover de los enlaces a redes sociales */
.social-links a:hover {
background-color: var(--color-dark-blue); /* Cambia a azul oscuro al hover */
transform: translateY(-3px); /* Efecto de elevación */
}
/* ========================================
Copyright y Derechos Reservados
======================================== */
/* Sección inferior del footer con copyright */
.footer-bottom {
text-align: center; /* Centra el texto del copyright */
padding-top: var(--spacing-md); /* Padding superior */
border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea separadora sutil en blanco */
}
/* Texto del copyright */
.footer-bottom p {
font-size: 0.9rem; /* Tamaño menor para información secundaria */
color: rgba(255, 255, 255, 0.8); /* Color blanco translúcido para suavidad en gradiente */
}
/* ========================================
Diseño Responsive - Adaptación Multiplataforma
========================================
Sistema completo de breakpoints para asegurar
una experiencia óptima en todos los dispositivos.
Breakpoints utilizados:
- Desktop: > 992px (estilos por defecto)
- Tablet grande: 769px - 992px
- Tablet pequeña: 481px - 768px
- Móvil: ≤ 480px
Adaptaciones incluidas:
- Menú hamburguesa en tablets y móviles
- Slider responsivo con controles adaptados
- Grids que se colapsan a una columna
- Tipografía escalada por dispositivo
- Espaciado optimizado para pantallas táctiles
======================================== */
/* Tablets */
@media (max-width: 992px) and (min-width: 769px) {
.hero-content h2 {
font-size: 2.5rem;
}
.section-header h2 {
font-size: 2rem;
}
.news-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Dropdown en tablets - comportamiento similar a móviles */
.dropdown:hover .dropdown-menu {
opacity: 0 !important;
visibility: hidden !important;
max-height: 0 !important;
transform: translateY(-10px) !important;
}
.dropdown.active .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
max-height: 200px !important;
transform: translateY(0) !important;
}
}
/* ========================================
MENÚ HAMBURGUESA ESTILO ANEF.CL
Slide lateral moderno con overlay
======================================== */
/* Estilos del menú hamburguesa - Sin overlay para mejor UX */
/* Bloquear scroll del body cuando el menú está abierto */
.menu-open {
overflow: hidden !important;
}
/* Estilos responsive para el menú */
@media (max-width: 992px) {
/* Mostrar botón hamburguesa */
.menu-toggle {
display: flex !important;
position: relative !important;
z-index: 99999 !important;
}
/* Header por encima */
.header {
z-index: 99999 !important;
position: sticky !important;
}
/* Menú lateral - estilo Moderno Sutil */
.main-nav {
position: fixed !important;
top: 80px !important;
right: -100% !important; /* Oculto inicialmente fuera de pantalla */
width: 70% !important;
max-width: 280px !important;
height: auto !important;
min-height: 250px !important;
max-height: 350px !important;
background: #ffffff !important;
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15) !important;
z-index: 99999 !important;
overflow-y: auto !important;
padding: 20px 0 20px 0 !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
border-radius: 20px 0 0 20px !important;
}
/* Menú activo - slide desde la derecha */
.main-nav.active {
right: 0 !important;
transform: translateX(0) !important;
}
/* Botón X para cerrar - ELIMINADO */
.menu-close {
display: none !important;
}
/* Lista del menú lateral */
.main-nav ul {
display: flex !important;
flex-direction: column !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: auto !important;
}
/* Elementos del menú lateral */
.main-nav li {
display: block !important;
width: 100% !important;
margin: 0 !important;
border-bottom: none !important;
margin-bottom: 8px !important;
}
/* Enlaces del menú lateral */
.main-nav a {
display: block !important;
padding: 15px 25px !important;
color: #333 !important;
text-decoration: none !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
transition: all 0.3s ease !important;
position: relative !important;
border-radius: 0 50px 50px 0 !important;
margin-right: 20px !important;
border-left: 4px solid transparent !important;
}
/* Hover estilo Moderno */
.main-nav a:hover,
.main-nav .dropdown-toggle:hover {
background-color: rgba(21, 53, 71, 0.05) !important;
color: var(--color-dark-blue) !important;
border-left-color: var(--color-dark-blue) !important;
padding-left: 30px !important;
}
/* Estado activo */
.main-nav a:active,
.main-nav a:focus {
background-color: rgba(21, 53, 71, 0.1) !important;
color: var(--color-dark-blue) !important;
}
/* Dropdown en responsive */
.main-nav .dropdown-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background-color: transparent !important;
margin: 0 !important;
padding: 0 0 0 20px !important;
display: none !important;
}
/* Dropdown activo en responsive */
.main-nav .dropdown.active .dropdown-menu {
display: block !important;
}
/* Enlaces del dropdown en responsive */
.main-nav .dropdown-menu a {
padding: 12px 20px !important;
font-size: 1rem !important;
color: #666 !important;
border-left: 2px solid #eee !important;
border-radius: 0 !important;
font-weight: 700 !important;
}
.main-nav .dropdown-menu a:hover {
border-left-color: var(--color-dark-blue) !important;
color: var(--color-dark-blue) !important;
background: transparent !important;
padding-left: 25px !important;
}
/* Ocultar redes sociales del header en responsive */
.social-header {
display: none !important;
}
.social-header-top {
display: none !important;
}
/* Estilos responsive para icono de login */
.login-nav-item {
display: none !important; /* Ocultar el icono del menú en móviles */
}
/* Mostrar icono de login móvil */
.mobile-login-icon {
display: block !important;
}
/* Estilos responsive del botón de acceso móvil */
.mobile-login-link {
width: 49px !important;
height: 49px !important;
min-width: 49px !important;
min-height: 49px !important;
background: rgba(21, 53, 71, 0.1) !important;
border: 2px solid var(--color-dark-blue) !important;
color: var(--color-dark-blue) !important;
}
.mobile-login-link:hover {
background: var(--color-dark-blue) !important;
color: var(--color-white) !important;
border-color: var(--color-dark-blue) !important;
}
.mobile-login-icon .mobile-login-link i {
font-size: 1.5rem !important;
}
}
/* Desktop - Ocultar icono móvil */
@media (min-width: 993px) {
.mobile-login-icon {
display: none !important;
}
}
/* Tablets - Configuraciones específicas */
@media (max-width: 992px) and (min-width: 769px) {
/* Botón hamburguesa en posición fija cuando está activo */
.menu-toggle.active {
position: fixed !important;
top: var(--spacing-md) !important;
right: var(--spacing-md) !important;
z-index: 999999 !important;
background-color: rgba(255, 255, 255, 0.95) !important;
border-radius: 50% !important;
padding: var(--spacing-sm) !important;
box-shadow: var(--shadow-lg) !important;
}
}
/* Tablets pequeñas y móviles */
@media (max-width: 768px) {
/* Botón hamburguesa en posición fija cuando está activo */
.menu-toggle.active {
position: fixed !important;
top: var(--spacing-sm) !important;
right: var(--spacing-sm) !important;
z-index: 999999 !important;
background-color: rgba(255, 255, 255, 0.9) !important;
border-radius: 50% !important;
padding: var(--spacing-sm) !important;
box-shadow: var(--shadow-md) !important;
}
/* Ajustes del logo para tablets */
.logo {
gap: 12px;
}
.logo img {
height: 60px;
width: auto;
}
.logo-text h1 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}
.logo-text p {
font-size: 0.7rem;
line-height: 1.3;
}
/* Ajustes específicos para móviles */
.hero-slider {
height: 50vh;
min-height: 400px;
}
.hero-content h2 {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
/* Botón Hazte Socio responsive para tablets */
.hazte-socio-section {
padding: 2rem 0;
}
.btn-hazte-socio {
padding: 1rem 3rem;
font-size: 1.2rem;
border-radius: 28px;
background-color: #153547 !important;
min-width: 180px;
}
.nav-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
.prev-btn {
left: var(--spacing-sm);
}
.next-btn {
right: var(--spacing-sm);
}
.slider-indicators {
bottom: var(--spacing-sm);
}
.indicator {
width: 10px;
height: 10px;
}
.links-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.news-grid {
grid-template-columns: 1fr;
}
.media-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
}
/* Móviles */
@media (max-width: 480px) {
:root {
--spacing-sm: 0.75rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 2.5rem;
}
/* Ajustes del logo para móviles */
.logo {
gap: 10px;
}
.logo img {
height: 55px;
width: auto;
}
.logo-text h1 {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 2px;
}
.logo-text p {
font-size: 0.65rem;
line-height: 1.3;
font-weight: 400;
}
.hero-slider {
height: 40vh;
min-height: 300px;
}
.hero-content {
padding: var(--spacing-md);
}
.hero-content h2 {
font-size: 1.75rem;
}
.hero-subtitle {
font-size: 0.9rem;
}
/* Botón Hazte Socio responsive para móviles */
.hazte-socio-section {
padding: 1.5rem 0;
}
.btn-hazte-socio {
padding: 1rem 2.5rem;
font-size: 1.1rem;
border-radius: 25px;
background-color: #153547 !important;
min-width: 160px;
}
.nav-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.prev-btn {
left: 5px;
}
.next-btn {
right: 5px;
}
.slider-indicators {
bottom: 10px;
}
.indicator {
width: 8px;
height: 8px;
margin: 0 3px;
}
.section-header h2 {
font-size: 1.75rem;
}
.links-grid {
grid-template-columns: 1fr;
}
.link-card h3 {
min-height: auto;
}
.news-grid {
gap: var(--spacing-sm);
}
.btn-primary {
width: 100%;
text-align: center;
}
}
/* ========================================
Animaciones Finales y Aplicaciones
========================================
Animaciones adicionales aplicadas a elementos
específicos para mejorar la experiencia visual
del sitio web.
======================================== */
/* Animación de entrada para tarjetas y elementos */
@keyframes fadeIn {
from {
opacity: 0; /* Comienza invisible */
transform: translateY(20px); /* Posición inicial 20px hacia abajo */
}
to {
opacity: 1; /* Termina completamente visible */
transform: translateY(0); /* Posición final en su lugar */
}
}
/* Aplicación de animación fadeIn a tarjetas principales */
.news-card,
.link-card,
.media-card {
animation: fadeIn 0.5s ease-out; /* Animación de 0.5 segundos con easing suave */
}
/* ========================================
Fin del Sistema de Estilos ANFDGAC
========================================
Este archivo contiene todos los estilos necesarios
para el funcionamiento completo del sitio web
institucional de ANFDGAC.
Desarrollado con:
- Metodología BEM parcial
- Variables CSS personalizadas
- Diseño mobile-first responsive
- Animaciones y transiciones suaves
- Optimización de rendimiento
Mantenimiento:
- Todas las variables están centralizadas en :root
- Comentarios detallados para cada sección
- Código modular y reutilizable
- Fácil escalabilidad y modificación
======================================== */
/* ========================================
ESTILOS PROFESIONALES CORPORATIVOS
======================================== */
/* Sección de Información Institucional */
.info-section {
padding: 80px 0;
background: #f8fafc;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.info-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-dark-blue);
margin-bottom: 20px;
line-height: 1.2;
}
.info-line {
width: 80px;
height: 4px;
background: var(--color-primary);
margin-bottom: 25px;
}
.info-description {
font-size: 1.1rem;
color: #64748b;
line-height: 1.8;
margin-bottom: 40px;
}
.info-features {
display: flex;
flex-direction: column;
gap: 25px;
}
.feature-item {
display: flex;
gap: 20px;
align-items: start;
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-dark-blue), var(--color-primary));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
flex-shrink: 0;
}
.feature-text h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 5px;
}
.feature-text p {
font-size: 0.95rem;
color: #64748b;
}
.info-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.stat-box {
background: white;
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.stat-box:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
transform: translateY(-3px);
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-dark-blue);
margin-bottom: 8px;
}
.stat-label {
font-size: 0.9rem;
color: #64748b;
font-weight: 600;
}
/* Encabezado profesional de secciones */
.section-header-pro {
text-align: center;
margin-bottom: 60px;
}
.header-top {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.section-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 2px;
}
.header-line {
width: 50px;
height: 2px;
background: #e2e8f0;
}
.section-title-pro {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-dark-blue);
margin-bottom: 15px;
}
.section-desc-pro {
font-size: 1.05rem;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
/* Grid de noticias profesional */
.news-grid-pro {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 35px;
margin-bottom: 50px;
}
.news-card-pro {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.news-card-pro:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card-pro:hover .card-image img {
transform: scale(1.05);
}
.card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.card-category {
position: absolute;
top: 15px;
right: 15px;
background: white;
color: var(--color-dark-blue);
padding: 6px 16px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.card-content {
padding: 25px;
}
.card-meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
font-size: 0.85rem;
color: #94a3b8;
}
.card-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
line-height: 1.4;
}
.card-excerpt {
font-size: 0.95rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-dark-blue);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s ease;
}
.card-link:hover {
color: var(--color-primary);
gap: 12px;
}
.news-footer {
text-align: center;
}
.btn-secondary-pro {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 35px;
background: #f8fafc;
color: var(--color-dark-blue);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
.btn-secondary-pro:hover {
background: var(--color-dark-blue);
color: white;
border-color: var(--color-dark-blue);
}
/* Footer profesional corporativo */
.footer-pro {
background: #1e293b;
color: white;
padding: 60px 0 30px;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 50px;
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo-pro {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.footer-logo-pro img {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 8px;
}
.logo-text-pro h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 3px;
}
.logo-text-pro p {
font-size: 0.75rem;
color: #cbd5e1;
}
.footer-desc {
font-size: 0.9rem;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 25px;
}
.footer-social-pro {
display: flex;
gap: 12px;
}
.social-link-pro {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.social-link-pro:hover {
background: var(--color-primary);
transform: translateY(-3px);
}
.footer-heading {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 20px;
}
.footer-list {
list-style: none;
}
.footer-list li {
margin-bottom: 12px;
}
.footer-list a {
color: #cbd5e1;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.footer-list a:hover {
color: white;
padding-left: 5px;
}
.footer-contact-pro {
list-style: none;
}
.footer-contact-pro li {
display: flex;
gap: 12px;
margin-bottom: 15px;
color: #cbd5e1;
font-size: 0.9rem;
line-height: 1.5;
}
.footer-contact-pro i {
color: var(--color-primary);
margin-top: 3px;
}
.footer-contact-pro a {
color: #cbd5e1;
text-decoration: none;
transition: all 0.3s ease;
}
.footer-contact-pro a:hover {
color: white;
}
.footer-bottom-pro {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-copyright p {
color: #cbd5e1;
font-size: 0.9rem;
}
.footer-links-bottom {
display: flex;
gap: 15px;
align-items: center;
}
.footer-links-bottom a {
color: #cbd5e1;
text-decoration: none;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.footer-links-bottom a:hover {
color: white;
}
.separator {
color: #475569;
}
/* Animaciones */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 1024px) {
.info-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.info-title {
font-size: 2rem;
}
.info-stats {
grid-template-columns: 1fr;
}
.section-title-pro {
font-size: 2rem;
}
.news-grid-pro {
grid-template-columns: 1fr;
}
.footer-main {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-bottom-pro {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 480px) {
.info-title {
font-size: 1.75rem;
}
.section-title-pro {
font-size: 1.75rem;
}
.stat-number {
font-size: 2rem;
}
}
/* ========================================
ESTILOS PARA EL ICONO MÓVIL DE LOGIN
======================================== */
@media (max-width: 992px) {
.mobile-login-icon {
display: block !important;
}
}
@media (min-width: 993px) {
.mobile-login-icon {
display: none !important;
}
}
/* Ajustar tamaño del texto del logo para registro */
.logo-text h1 {
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.logo-text span,
.logo-text p {
font-size: 0.75rem !important;
font-weight: 400 !important;
margin: 0 !important;
opacity: 0.9 !important;
}
/* ========================================
ESTILOS ESPECÍFICOS PARA EL FORMULARIO DE REGISTRO
======================================== */
/* Contenedor principal del registro */
.main-content {
padding: 2rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: calc(100vh - 200px);
}
/* Breadcrumb de navegación */
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.breadcrumb a {
color: #153547;
text-decoration: none;
}
.breadcrumb-separator {
color: #666;
}
.breadcrumb-current {
font-weight: 600;
color: #333;
}
/* Encabezado del registro */
.register-header {
text-align: center;
margin-bottom: 3rem;
background: linear-gradient(135deg, #153547 0%, #2c5f7a 100%);
color: white;
padding: 3rem 2rem;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.register-header h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.register-header p {
font-size: 1rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto;
}
/* Formulario de registro */
.register-form {
background: white;
padding: 3rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.form-section {
margin-bottom: 2.5rem;
}
.form-section-title {
font-size: 1.2rem;
font-weight: 600;
color: #153547;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e9ecef;
display: flex;
align-items: center;
gap: 0.75rem;
}
.form-section-title i {
color: #931916;
font-size: 1.2rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
/* Campos más cortos para celular, profesión, unidad y anexo */
.form-group.field-celular,
.form-group.field-especialidad,
.form-group.field-unidad,
.form-group.field-anexo,
.form-group.field-tipo-estatuto,
.form-group.field-estamento,
.form-group.field-tipo-contrato,
.form-group.field-sistema-previsional,
.form-group.field-convenio-juridico {
max-width: 350px;
}
.form-group label {
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-group label i {
color: #153547;
font-size: 0.9rem;
}
.form-group label .required {
color: #e74c3c;
margin-left: 0.25rem;
}
.form-control {
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: 'Montserrat', sans-serif;
background: #fdfdfd;
}
.form-control:focus {
border-color: #153547;
box-shadow: 0 0 0 0.2rem rgba(21, 53, 71, 0.15);
background: white;
outline: none;
}
.form-control:valid {
border-color: #28a745;
}
.form-control:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
user-select: none;
}
.checkbox-item:hover {
background: #e9ecef;
border-color: #153547;
}
.checkbox-item.selected {
background: #e8f4f8;
border-color: #153547;
}
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
width: 1.2rem;
height: 1.2rem;
accent-color: #153547;
pointer-events: none;
}
.checkbox-item label {
margin-bottom: 0;
font-weight: 500;
cursor: pointer;
flex: 1;
pointer-events: none;
}
.form-actions {
text-align: center;
padding-top: 2rem;
border-top: 2px solid #e9ecef;
margin-top: 2rem;
}
.btn-submit {
background: linear-gradient(135deg, #153547 0%, #2c5f7a 100%);
color: white;
border: none;
padding: 1rem 2.5rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(21, 53, 71, 0.3);
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(21, 53, 71, 0.4);
}
.btn-reset {
background: #6c757d;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-left: 1rem;
}
.btn-reset:hover {
background: #5a6268;
transform: translateY(-1px);
}
.benefits-section {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.benefits-title {
text-align: center;
font-size: 1.5rem;
font-weight: 700;
color: #153547;
margin-bottom: 2rem;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.benefit-card {
text-align: center;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.benefit-icon {
font-size: 2.5rem;
color: #931916;
margin-bottom: 1rem;
}
.benefit-title {
font-size: 1rem;
font-weight: 600;
color: #153547;
margin-bottom: 0.5rem;
}
.benefit-description {
color: #6c757d;
font-size: 0.95rem;
}
.error-message {
color: #e74c3c;
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
}
.form-group.has-error .form-control {
border-color: #e74c3c;
}
.form-group.has-error .error-message {
display: block;
}
/* Responsive Design para formulario de registro */
@media (max-width: 768px) {
.register-header {
padding: 2rem 1rem;
}
.register-header h1 {
font-size: 1.5rem;
}
.register-form {
padding: 2rem 1rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.form-section-title {
font-size: 1rem;
}
.form-control,
.form-control select {
font-size: 16px;
}
.btn-submit,
.btn-reset {
width: 100%;
margin-left: 0;
margin-top: 0.5rem;
}
.btn-reset {
margin-top: 1rem;
}
.benefits-section {
padding: 1.5rem;
}
.checkbox-group {
grid-template-columns: 1fr;
}
.breadcrumb {
font-size: 0.875rem;
padding: 0.75rem;
}
/* Campos cortos se vuelven full width en móvil */
.form-group.field-celular,
.form-group.field-especialidad,
.form-group.field-unidad,
.form-group.field-anexo,
.form-group.field-tipo-estatuto,
.form-group.field-estamento,
.form-group.field-tipo-contrato,
.form-group.field-sistema-previsional,
.form-group.field-convenio-juridico {
max-width: 100%;
}
/* Campos desplegables con ancho reducido en móvil */
.form-group select#region,
.form-group select#comuna,
.form-group select#especialidad,
.form-group select#unidad {
max-width: 350px;
}
}
/* Responsive extra small devices */
@media (max-width: 480px) {
.main-content {
padding: 1rem 0;
}
.register-header {
padding: 1.5rem 1rem;
margin-bottom: 2rem;
}
.register-header h1 {
font-size: 1.25rem;
}
.register-header p {
font-size: 0.9rem;
}
.register-form {
padding: 1.5rem 0.75rem;
}
.form-section {
margin-bottom: 2rem;
}
.form-section-title {
font-size: 0.95rem;
gap: 0.5rem;
}
.form-group label {
font-size: 0.9rem;
}
.form-control {
padding: 0.65rem 0.85rem;
font-size: 16px;
}
.btn-submit {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
.btn-reset {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.checkbox-item {
padding: 0.65rem;
}
.benefits-section {
padding: 1rem;
}
.benefit-card {
padding: 1rem;
}
}
/* ========================================
ESTILOS ESPECÍFICOS PARA REGISTRO DE SOCIOS
========================================
Estilos para el formulario de registro de nuevos socios
incluyendo carga de archivos, cámara y validaciones
======================================== */
/* Wrapper para carga de archivos */
.file-upload-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.file-input {
position: absolute;
left: -9999px;
opacity: 0;
}
.file-label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px dashed #153547;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-weight: 500;
color: #153547;
}
.file-label:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-color: #0d2838;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(21, 53, 71, 0.1);
}
.file-label i {
font-size: 1.5rem;
}
.image-preview {
margin-top: 1rem;
padding: 1rem;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
position: relative;
}
.image-preview img {
width: 100%;
max-height: 300px;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-remove-image {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: #dc3545;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
.btn-remove-image:hover {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.file-upload-wrapper.has-file .file-label {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-color: #28a745;
color: #155724;
}
.file-upload-wrapper.has-error .file-label {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border-color: #dc3545;
color: #721c24;
}
/* Estilos para botones de acción de carga */
.upload-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.btn-camera {
flex: 1;
min-width: 150px;
padding: 0.875rem 1.25rem;
background: linear-gradient(135deg, #153547 0%, #1a4359 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 2px 4px rgba(21, 53, 71, 0.2);
}
.btn-camera:hover {
background: linear-gradient(135deg, #1a4359 0%, #153547 100%);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(21, 53, 71, 0.3);
}
.btn-camera i {
font-size: 1.2rem;
}
/* Modal de cámara */
.camera-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 1rem;
}
.camera-modal.active {
display: flex;
}
.camera-container {
background: white;
border-radius: 12px;
padding: 1.5rem;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
}
.camera-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e9ecef;
}
.camera-header h3 {
margin: 0;
color: #153547;
font-size: 1.25rem;
}
.btn-close-camera {
background: #dc3545;
color: white;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.btn-close-camera:hover {
background: #c82333;
transform: rotate(90deg);
}
.camera-video-container {
position: relative;
background: #000;
border-radius: 8px;
overflow: hidden;
margin-bottom: 1rem;
}
#cameraVideo {
width: 100%;
height: auto;
display: block;
}
.camera-canvas {
display: none;
}
.camera-controls {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-capture,
.btn-retake,
.btn-use-photo {
padding: 0.875rem 1.5rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-capture {
background: #28a745;
color: white;
}
.btn-capture:hover {
background: #218838;
transform: scale(1.05);
}
.btn-retake {
background: #ffc107;
color: #000;
}
.btn-retake:hover {
background: #e0a800;
transform: scale(1.05);
}
.btn-use-photo {
background: #007bff;
color: white;
}
.btn-use-photo:hover {
background: #0056b3;
transform: scale(1.05);
}
.camera-instructions {
background: #e7f3ff;
border-left: 4px solid #153547;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.6;
}
/* Estilos para input type="date" nativo */
input[type="date"] {
position: relative;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #333;
background: white;
padding-right: 2.5rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
right: 1rem;
cursor: pointer;
font-size: 1.2rem;
color: #153547;
opacity: 0.7;
transition: opacity 0.3s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
input[type="date"]:focus {
border-color: #153547 !important;
box-shadow: 0 0 0 0.2rem rgba(21, 53, 71, 0.1) !important;
}
/* Personalizar el calendario en navegadores WebKit (Chrome, Safari, Edge) */
input[type="date"]::-webkit-datetime-edit {
padding: 0;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
color: #333;
font-weight: 500;
}
/* Media Queries para Responsive */
@media (max-width: 768px) {
.image-preview img {
max-height: 200px;
}
.btn-remove-image {
position: static;
margin-top: 0.75rem;
width: 100%;
justify-content: center;
}
.upload-actions {
flex-direction: column;
}
.btn-camera {
width: 100%;
min-width: auto;
}
.camera-container {
padding: 1rem;
margin: 0;
}
.camera-controls {
flex-direction: column;
}
.btn-capture,
.btn-retake,
.btn-use-photo {
width: 100%;
}
}