--- */
/*
============================================================================
ESTILOS PRINCIPALES DE LA SECCIÓN HERO
============================================================================
Contenedor principal que ocupa toda la altura de la ventana (menos el header)
con márgenes y transiciones suaves para cambios de tema.
============================================================================ */
.main {
margin-top: var(--header-height); /* Espacio para el header fijo */
min-height: calc(100vh - var(--header-height)); /* Altura completa menos header */
padding: 0; /* Sin padding para que ocupe todo el ancho */
transition: background-color 0.5s ease; /* Transición suave para cambios de tema */
}
/*
============================================================================
SECCIÓN HERO PRINCIPAL
============================================================================
Sección de bienvenida con gradiente animado y efectos visuales sutiles.
Utiliza un diseño flexible centrado vertical y horizontalmente.
============================================================================ */
.main-section-Pri {
position: relative; /* Contexto para elementos posicionados */
min-height: calc(100vh - var(--header-height)); /* Misma altura que .main */
display: flex; /* Flexbox para centrado fácil */
flex-direction: column; /* Apila los elementos verticalmente */
justify-content: center; /* Centrado vertical */
align-items: center; /* Centrado horizontal */
text-align: center; /* Alineación de texto al centro */
padding: 3rem 1.5rem; /* Espaciado interno responsivo */
/* Gradiente animado de fondo */
background: linear-gradient(
135deg,
var(--color-section-bg) 0%,
var(--color-section-bg-alt) 50%,
var(--color-bg) 100%
);
background-size: 200% 200%; /* Permite la animación del gradiente */
animation: gradientFlow 15s ease infinite; /* Animación suave del gradiente */
/* Efectos de superposición con gradientes radiales */
background-image:
radial-gradient(circle at 20% 50%, rgba(230, 57, 70, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(242, 139, 130, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(230, 57, 70, 0.05) 0%, transparent 50%);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.05); /* Sombra interior sutil */
overflow: hidden; /* Oculta cualquier desbordamiento */
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
}
/*
============================================================================
MODO OSCURO - SECCIÓN HERO
============================================================================
Ajustes específicos para el modo oscuro, cambiando colores y opacidades
============================================================================ */
body.dark .main-section-Pri {
background: linear-gradient(
135deg,
var(--color-section-bg-dark) 0%,
var(--color-section-bg-alt-dark) 50%,
var(--color-bg-dark) 100%
);
background-size: 200% 200%;
background-image:
radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 85, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 50%);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); /* Sombra más oscura */
}
/*
============================================================================
ANIMACIÓN DE GRADIENTE
============================================================================
Crea un efecto de movimiento suave en el fondo gradiente
============================================================================ */
@keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%; /* Posición inicial y final */
}
50% {
background-position: 100% 50%; /* Posición intermedia para la animación */
}
}
/*
============================================================================
ELEMENTOS DECORATIVOS FLOTANTES
============================================================================
Pseudoelementos que añaden profundidad y movimiento al diseño.
Utilizan gradientes radiales y animaciones suaves para crear un efecto de partículas flotantes.
============================================================================ */
.main-section-Pri::before,
.main-section-Pri::after {
content: ''; /* Necesario para que se muestren los pseudoelementos */
position: absolute; /* Posicionamiento absoluto respecto al contenedor padre */
border-radius: 50%; /* Forma circular perfecta */
opacity: 0.15; /* Transparencia para un efecto sutil */
pointer-events: none; /* Permite hacer clic a través de los elementos */
filter: blur(60px); /* Difumina los bordes para un efecto de neblina */
}
/*
============================================================================
PARTÍCULA SUPERIOR IZQUIERDA
============================================================================
Elemento decorativo posicionado en la esquina superior izquierda.
Se mueve suavemente en un patrón flotante.
============================================================================ */
.main-section-Pri::before {
width: 300px; /* Ancho del círculo */
height: 300px; /* Altura del círculo (igual al ancho para forma circular) */
background: radial-gradient(
circle,
var(--color-primary-light) 0%, /* Color primario claro en el centro */
transparent 70% /* Transparencia hacia los bordes */
);
top: -100px; /* Posicionamiento vertical */
left: -100px; /* Posicionamiento horizontal */
animation: floatParticle1 20s ease-in-out infinite; /* Animación suave y continua */
}
/*
============================================================================
PARTÍCULA INFERIOR DERECHA
============================================================================
Elemento decorativo más grande en la esquina inferior derecha.
Tiene un movimiento diferente para crear contraste visual.
============================================================================ */
.main-section-Pri::after {
width: 400px; /* Tamaño mayor que el primer elemento */
height: 400px;
background: radial-gradient(
circle,
var(--color-primary) 0%, /* Color primario más intenso */
transparent 70%
);
bottom: -150px; /* Posicionamiento desde abajo */
right: -150px; /* Posicionamiento desde la derecha */
animation: floatParticle2 25s ease-in-out infinite; /* Animación más lenta */
}
/*
============================================================================
MODO OSCURO - AJUSTES DE PARTÍCULAS
============================================================================
Modifica los colores y la opacidad de las partículas en modo oscuro
para mantener un buen contraste y legibilidad.
============================================================================ */
body.dark .main-section-Pri::before {
background: radial-gradient(
circle,
var(--color-primary-dark) 0%, /* Tono más oscuro para modo oscuro */
transparent 70%
);
opacity: 0.2; /* Mayor opacidad para mejor visibilidad */
}
body.dark .main-section-Pri::after {
background: radial-gradient(
circle,
var(--color-primary-hover-dark) 0%, /* Color de hover para contraste */
transparent 70%
);
opacity: 0.18; /* Opacidad ligeramente menor */
}
/*
============================================================================
ANIMACIÓN DE FLOTACIÓN - PARTÍCULA 1
============================================================================
Define el movimiento de la primera partícula con keyframes.
Se mueve en un patrón suave de 3 puntos.
============================================================================ */
@keyframes floatParticle1 {
0%, 100% { /* Puntos de inicio y fin idénticos */
transform: translate(0, 0) scale(1); /* Posición y tamaño original */
}
33% { /* Primer punto intermedio */
transform: translate(50px, -30px) scale(1.1); /* Movimiento diagonal y escalado */
}
66% { /* Segundo punto intermedio */
transform: translate(-30px, 40px) scale(0.9); /* Movimiento opuesto y reducción */
}
}
/*
============================================================================
ANIMACIÓN DE FLOTACIÓN - PARTÍCULA 2
============================================================================
Define el movimiento de la segunda partícula con keyframes.
Tiene un patrón de movimiento diferente para crear variedad visual.
============================================================================ */
@keyframes floatParticle2 {
0%, 100% { /* Puntos de inicio y fin idénticos */
transform: translate(0, 0) scale(1) rotate(0deg); /* Rotación añadida */
}
25% { /* Primer punto de control */
transform: translate(-40px, 20px) scale(1.05) rotate(5deg);
}
50% { /* Punto medio */
transform: translate(30px, -40px) scale(0.95) rotate(-5deg);
}
75% { /* Tercer punto de control */
transform: translate(20px, 30px) scale(1.1) rotate(3deg);
}
}
/*
============================================================================
ANIMACIÓN DE FLOTACIÓN - PARTÍCULA 2 (MEJORADA)
============================================================================
Animación más dinámica para la segunda partícula con rotación y escalado.
Crea un efecto orbital más pronunciado que la primera partícula.
============================================================================ */
@keyframes floatParticle2 {
0%, 100% { /* Puntos de inicio y fin */
transform: translate(0, 0) rotate(0deg) scale(1); /* Estado original */
}
33% { /* Primer tercio de la animación */
transform: translate(-60px, 40px) rotate(120deg) scale(1.15); /* Movimiento superior izquierdo */
}
66% { /* Dos tercios de la animación */
transform: translate(40px, -50px) rotate(240deg) scale(0.85); /* Movimiento inferior derecho */
}
}
/*
============================================================================
ESTILOS DEL TÍTULO PRINCIPAL
============================================================================
Estilo visual impactante para el encabezado principal con:
- Gradiente animado
- Efectos de sombra
- Transiciones suaves
============================================================================ */
.main-section-Pri h1 {
font-size: 2.5rem; /* Tamaño de fuente grande */
font-weight: 800; /* Grosor de fuente extra negrita */
line-height: 1.2; /* Interlineado óptimo */
letter-spacing: -0.02em; /* Espaciado entre letras ligeramente negativo */
margin: 0 0 1.5rem 0; /* Margen inferior para separación */
/* Efecto de gradiente de texto */
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-light) 50%,
var(--color-primary-hover) 100%
);
background-size: 200% 200%; /* Permite la animación del gradiente */
background-clip: text; /* Aplica el gradiente solo al texto */
-webkit-background-clip: text; /* Prefijo para compatibilidad */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el gradiente */
/* Efectos visuales */
filter: drop-shadow(0 4px 12px rgba(230, 57, 70, 0.2)); /* Sombra suave */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra de texto sutil */
/* Animaciones */
animation:
gradientShift 5s ease infinite, /* Animación del gradiente */
fadeInUp 1s ease-out backwards; /* Animación de entrada */
/* Posicionamiento */
position: relative; /* Contexto para z-index */
z-index: 2; /* Asegura que esté por encima de los elementos decorativos */
/* Transición para efectos hover */
transition: all 0.3s ease;
}
/*
============================================================================
EFECTO HOVER DEL TÍTULO
============================================================================
Aumenta ligeramente el tamaño y la intensidad de la sombra al pasar el ratón
============================================================================ */
.main-section-Pri h1:hover {
transform: scale(1.02); /* Escalado sutil al hacer hover */
filter: drop-shadow(0 6px 20px rgba(230, 57, 70, 0.4)); /* Sombra más pronunciada */
}
/*
============================================================================
MODO OSCURO - TÍTULO PRINCIPAL
============================================================================
Ajustes específicos para el modo oscuro que mejoran la legibilidad
============================================================================ */
body.dark .main-section-Pri h1 {
background: linear-gradient(
135deg,
var(--color-primary-dark) 0%,
var(--color-primary-hover-dark) 50%,
#ff6b6b 100% /* Color de acento para el modo oscuro */
);
background-size: 200% 200%; /* Mantiene la animación del gradiente */
background-clip: text; /* Aplica el gradiente solo al texto */
-webkit-background-clip: text; /* Prefijo para compatibilidad */
-webkit-text-fill-color: transparent; /* Texto transparente para mostrar el gradiente */
filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.3)); /* Sombra más intensa en modo oscuro */
}
/*
============================================================================
ANIMACIÓN DE GRADIENTE
============================================================================
Mueve el fondo del gradiente para crear un efecto de desplazamiento sutil
============================================================================ */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%; /* Posición inicial y final */
}
50% {
background-position: 100% 50%; /* Posición intermedia */
}
}
/*
============================================================================
ANIMACIÓN DE ENTRADA
============================================================================
Efecto de aparición suave del título al cargar la página
============================================================================ */
@keyframes fadeInUp {
from {
opacity: 0; /* Comienza transparente */
transform: translateY(30px); /* Desplazado hacia abajo */
}
to {
opacity: 1; /* Termina completamente visible */
transform: translateY(0); /* En su posición final */
}
}
/*
============================================================================
ESTILOS DE PÁRRAFOS DESTACADOS
============================================================================
Estilos para los párrafos informativos que aparecen en la sección principal.
Incluyen efectos de vidrio esmerilado, sombras y animaciones sutiles.
============================================================================ */
.main-section-Pri p {
/* Tipografía */
font-size: 1.125rem; /* Tamaño de fuente ligeramente aumentado */
font-weight: 500; /* Peso medio para mejor legibilidad */
line-height: 1.8; /* Interlineado generoso */
margin: 0.75rem 0; /* Espaciado vertical entre párrafos */
color: var(--color-text); /* Color de texto según el tema */
/* Diseño de caja */
display: inline-block; /* Permite que el ancho se ajuste al contenido */
padding: 0.875rem 1.75rem; /* Espaciado interno generoso */
border-radius: 50px; /* Bordes completamente redondeados */
/* Efecto vidrio esmerilado */
background: rgba(255, 255, 255, 0.6); /* Fondo blanco semitransparente */
backdrop-filter:
blur(10px) /* Desenfoque del fondo */
saturate(150%); /* Aumento de saturación */
-webkit-backdrop-filter:
blur(10px)
saturate(150%); /* Prefijo para compatibilidad */
/* Bordes y sombras */
border: 1px solid rgba(255, 255, 255, 0.4); /* Borde sutil */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1), /* Sombra exterior suave */
inset 0 1px 0 rgba(255, 255, 255, 0.6), /* Resalte superior interno */
0 2px 8px rgba(230, 57, 70, 0.1); /* Sombra de acento sutil */
/* Animación */
animation:
fadeInUp 1s ease-out backwards; /* Animación de entrada */
animation-delay: 0.3s; /* Retraso para efecto escalonado */
/* Posicionamiento */
position: relative; /* Contexto para z-index */
z-index: 2; /* Asegura visibilidad sobre fondos */
/* Transición para efectos hover */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
}
/*
============================================================================
RETRASO DE ANIMACIÓN PARA EL SEGUNDO PÁRRAFO
============================================================================
Crea un efecto de animación escalonada entre párrafos
============================================================================ */
.main-section-Pri p:nth-of-type(2) {
animation-delay: 0.5s; /* Mayor retraso para el segundo párrafo */
}
/*
============================================================================
EFECTO HOVER PARA PÁRRAFOS
============================================================================
Efecto de elevación y realce al pasar el ratón
============================================================================ */
.main-section-Pri p:hover {
transform: translateY(-4px) scale(1.02); /* Elevación y leve escalado */
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15), /* Sombra más pronunciada */
inset 0 1px 0 rgba(255, 255, 255, 0.8), /* Resalte más intenso */
0 4px 16px rgba(230, 57, 70, 0.2); /* Sombra de acento más visible */
border-color: rgba(230, 57, 70, 0.3); /* Borde con tono primario */
}
/*
============================================================================
MODO OSCURO - PÁRRAFOS
============================================================================
Ajustes específicos para el modo oscuro
============================================================================ */
body.dark .main-section-Pri p {
color: var(--color-text-dark); /* Color de texto para modo oscuro */
background: rgba(30, 30, 30, 0.7); /* Fondo oscuro semitransparente */
border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4), /* Sombra más oscura */
inset 0 1px 0 rgba(255, 255, 255, 0.1), /* Resalte sutil */
0 2px 8px rgba(239, 68, 68, 0.15); /* Sombra de acento */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajustes de hover para el modo oscuro
============================================================================ */
body.dark .main-section-Pri p:hover {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.6), /* Sombra más intensa */
inset 0 1px 0 rgba(255, 255, 255, 0.15), /* Resalte sutil */
0 4px 16px rgba(239, 68, 68, 0.25); /* Sombra de acento más visible */
border-color: rgba(239, 68, 68, 0.3); /* Borde con tono primario oscuro */
}
/*
============================================================================
ICONO DE VIÑETA
============================================================================
Añade un icono decorativo al principio de cada párrafo
============================================================================ */
.main-section-Pri p::before {
content: '✦'; /* Carácter de viñeta decorativa */
display: inline-block; /* Muestra en línea con el texto */
margin-right: 0.75rem; /* Espaciado a la derecha */
font-size: 1.2em; /* Tamaño ligeramente mayor */
color: var(--color-primary); /* Color del tema */
animation: pulse 2s ease-in-out infinite; /* Animación de pulso continuo */
}
/*
============================================================================
MODO OSCURO - ICONO DE VIÑETA
============================================================================
Ajuste de color para el modo oscuro
============================================================================ */
body.dark .main-section-Pri p::before {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
ANIMACIÓN DE PULSO
============================================================================
Efecto de latido sutil para los iconos de viñeta
============================================================================ */
@keyframes pulse {
0%, 100% { /* Estado inicial y final */
opacity: 1; /* Opacidad completa */
transform: scale(1); /* Tamaño normal */
}
50% { /* Punto medio de la animación */
opacity: 0.7; /* Ligera atenuación */
transform: scale(1.1); /* Ligero aumento de tamaño */
}
}
/*
============================================================================
MEDIA QUERIES - DISEÑO RESPONSIVE
============================================================================
Ajustes específicos para diferentes tamaños de pantalla.
Mejoran la legibilidad y el espaciado en dispositivos más grandes.
============================================================================ */
/*
============================================================================
PANTALLAS MEDIANAS (≥768px)
============================================================================
Ajustes para tablets y pantallas pequeñas
============================================================================ */
@media (min-width: 48rem) { /* 768px */
.main-section-Pri {
padding: 4rem 3rem; /* Mayor padding para más espacio */
}
.main-section-Pri h1 {
font-size: 3.5rem; /* Título más grande */
margin-bottom: 2rem; /* Mayor espacio inferior */
}
.main-section-Pri p {
font-size: 1.25rem; /* Texto más legible */
padding: 1rem 2.25rem; /* Mayor padding interno */
margin: 1rem 0; /* Mayor margen vertical */
}
/* Aumento del tamaño de las partículas decorativas */
.main-section-Pri::before {
width: 400px; /* Tamaño aumentado */
height: 400px; /* Mantener relación de aspecto 1:1 */
}
.main-section-Pri::after {
width: 500px; /* Tamaño mayor que ::before */
height: 500px; /* Mantener relación de aspecto 1:1 */
}
}
/*
============================================================================
PANTALLAS GRANDES (≥1024px)
============================================================================
Ajustes para pantallas de portátiles y monitores estándar
============================================================================ */
@media (min-width: 64rem) { /* 1024px */
.main-section-Pri {
padding: 5rem 4rem; /* Aún más espacio en los bordes */
}
.main-section-Pri h1 {
font-size: 4.5rem; /* Título significativamente más grande */
margin-bottom: 2.5rem; /* Mayor espacio debajo del título */
letter-spacing: -0.03em; /* Espaciado entre letras más ajustado */
}
.main-section-Pri p {
font-size: 1.375rem; /* Texto más grande para mejor legibilidad */
padding: 1.125rem 2.5rem; /* Ajuste fino del padding */
margin: 1.25rem 0; /* Mayor separación entre párrafos */
}
/* Aumento adicional del tamaño de las partículas */
.main-section-Pri::before {
width: 500px;
height: 500px;
}
.main-section-Pri::after {
width: 600px;
height: 600px;
}
}
/*
============================================================================
PANTALLAS MUY GRANDES (≥1440px)
============================================================================
Ajustes para monitores de alta resolución
============================================================================ */
@media (min-width: 90rem) { /* 1440px */
.main-section-Pri {
padding: 6rem 6rem; /* Máximo espacio en pantallas grandes */
}
.main-section-Pri h1 {
font-size: 5.5rem; /* Título muy grande */
margin-bottom: 3rem; /* Espaciado generoso */
}
.main-section-Pri p {
font-size: 1.5rem; /* Texto grande para pantallas grandes */
padding: 1.25rem 3rem; /* Padding lateral aumentado */
margin: 1.5rem 0; /* Mayor separación vertical */
}
}
/*
============================================================================
PREFERENCIAS DE REDUCCIÓN DE MOVIMIENTO
============================================================================
Mejora la accesibilidad para usuarios con preferencia de movimiento reducido
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.main-section-Pri,
.main-section-Pri h1,
.main-section-Pri p,
.main-section-Pri::before,
.main-section-Pri::after {
animation-duration: 0.01ms !important; /* Prácticamente elimina las animaciones */
animation-iteration-count: 1 !important; /* Evita repeticiones */
}
}
/*
============================================================================
ALTO CONTRASTE
============================================================================
Mejoras para usuarios que prefieren alto contraste
============================================================================ */
@media (prefers-contrast: high) {
.main-section-Pri p {
border-width: 2px; /* Borde más grueso */
font-weight: 600; /* Texto más grueso */
}
.main-section-Pri h1 {
-webkit-text-fill-color: var(--color-primary); /* Fuerza color sólido */
filter: none; /* Elimina efectos que podrían reducir el contraste */
}
body.dark .main-section-Pri h1 {
-webkit-text-fill-color: var(--color-primary-dark); /* Versión oscura */
}
}
/*
============================================================================
OPTIMIZACIONES DE RENDIMIENTO
============================================================================
Mejoras de rendimiento para animaciones y renderizado
============================================================================ */
.main-section-Pri,
.main-section-Pri h1,
.main-section-Pri p {
will-change: transform; /* Indica que la propiedad cambiará */
transform: translateZ(0); /* Acelera el renderizado por hardware */
-webkit-font-smoothing: antialiased; /* Mejora el suavizado de fuentes en WebKit */
-moz-osx-font-smoothing: grayscale; /* Mejora el suavizado en Firefox para Mac */
}
/*
============================================================================
CONTENEDOR DE RENDERIZADO
============================================================================
Optimización avanzada de rendimiento
============================================================================ */
.main-section-Pri {
contain: layout style paint; /* Aislamiento de renderizado */
}