efecto fluid
This commit is contained in:
+230
-33
@@ -108,11 +108,13 @@
|
||||
html {
|
||||
font-size: var(--font-size-base);
|
||||
scroll-behavior: smooth;
|
||||
background-color: var(--bg-base);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
background-color: var(--bg-base);
|
||||
/*background-color: var(--bg-base);*/
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
@@ -514,7 +516,8 @@ body.menu-open .site-header {
|
||||
============================================ */
|
||||
main section {
|
||||
padding: var(--spacing-md) var(--spacing-sm);
|
||||
border-bottom: 1px dashed var(--border);
|
||||
background-color: transparent;
|
||||
/*border-bottom: 1px dashed var(--border);*/
|
||||
}
|
||||
main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; }
|
||||
|
||||
@@ -1681,56 +1684,250 @@ RESPONSIVE DIAGNÓSTICO
|
||||
/* ============================================
|
||||
SECCIÓN CTA FINAL
|
||||
============================================ */
|
||||
.cta-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); }
|
||||
.cta-section {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
background-color: var(--bg-base);
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
max-width: 900px; margin: 0 auto; background-color: var(--brand-teal);
|
||||
border-radius: 24px; padding: var(--spacing-lg) var(--spacing-md);
|
||||
text-align: center; position: relative; overflow: hidden;
|
||||
box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4);
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
/* Fondo teal sólido y oscuro para máximo contraste */
|
||||
background-color: var(--brand-teal);
|
||||
border-radius: 24px;
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Sombra más pronunciada */
|
||||
box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.5);
|
||||
/* Borde sutil para definir mejor */
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cta-card::before, .cta-card::after {
|
||||
content: ""; position: absolute; width: 300px; height: 300px;
|
||||
border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none;
|
||||
/* Glows decorativos con degradé crimson-teal */
|
||||
.cta-card::before,
|
||||
.cta-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Glow superior izquierdo - Crimson/Rosa */
|
||||
.cta-card::before {
|
||||
top: -150px;
|
||||
left: -150px;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(186, 18, 77, 0.6) 0%,
|
||||
rgba(186, 18, 77, 0.3) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
animation: glowPulse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Glow inferior derecho - Teal/Rose */
|
||||
.cta-card::after {
|
||||
bottom: -150px;
|
||||
right: -150px;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 168, 140, 0.5) 0%,
|
||||
rgba(223, 189, 185, 0.3) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
animation: glowPulse 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
/* Animación sutil de los glows */
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1) translate(0, 0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) translate(20px, -20px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.cta-card::before { top: -100px; left: -100px; background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); }
|
||||
.cta-card::after { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); }
|
||||
|
||||
.cta-title {
|
||||
font-family: var(--font-title); font-style: italic;
|
||||
font-size: clamp(2rem, 4vw, 3rem); color: #ffffff;
|
||||
margin-bottom: var(--spacing-sm); line-height: 1.15; position: relative; z-index: 1;
|
||||
font-family: var(--font-title);
|
||||
font-style: italic;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
color: #ffffff;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
line-height: 1.15;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* Sombra de texto para mejorar legibilidad */
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-subtitle {
|
||||
font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem);
|
||||
color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--spacing-md);
|
||||
line-height: 1.6; position: relative; z-index: 1;
|
||||
font-family: var(--font-body);
|
||||
font-size: clamp(1rem, 2vw, 1.15rem);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex; justify-content: center; gap: var(--spacing-sm);
|
||||
flex-wrap: wrap; position: relative; z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Botón primario - Blanco con hover crimson */
|
||||
.btn-cta-primary {
|
||||
background-color: #ffffff; color: var(--brand-teal); border: 1.5px solid #ffffff;
|
||||
padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
|
||||
font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.btn-cta-primary:hover {
|
||||
background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson);
|
||||
transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
|
||||
background-color: #ffffff;
|
||||
color: var(--brand-teal);
|
||||
border: 2px solid #ffffff;
|
||||
padding: 0.85rem 2.2rem;
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-small);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.25);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-cta-secondary {
|
||||
background-color: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6);
|
||||
padding: 0.85rem 2rem; border-radius: 999px; font-family: var(--font-small);
|
||||
font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
|
||||
.btn-cta-primary:hover {
|
||||
background-color: var(--brand-crimson);
|
||||
color: #ffffff;
|
||||
border-color: var(--brand-crimson);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px -4px rgba(186, 18, 77, 0.5);
|
||||
}
|
||||
|
||||
/* Botón secundario - Transparente con borde blanco */
|
||||
.btn-cta-secondary {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
padding: 0.85rem 2.2rem;
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-small);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-cta-secondary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-color: #ffffff;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px -4px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ===== CANVAS FLUIDO Y APILAMIENTO ===== */
|
||||
main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#footer-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#fluid-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#fluidCanvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.servicios-section,
|
||||
.diagnostico-section,
|
||||
.metodologia-section,
|
||||
.planes-section,
|
||||
.portfolio-section,
|
||||
.cta-section {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.cta-section {
|
||||
padding: var(--spacing-md) var(--spacing-sm);
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.cta-card::before,
|
||||
.cta-card::after {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-cta-primary,
|
||||
.btn-cta-secondary {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cta-card {
|
||||
padding: var(--spacing-md) var(--spacing-sm);
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.cta-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cta-card::before,
|
||||
.cta-card::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn-cta-primary,
|
||||
.btn-cta-secondary {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
Reference in New Issue
Block a user