Preview de mixed.css
/* MIXED CSS PACK */
/* Template: jardineriaintegralalfonso.com.ar/index.html */
/* Template mtime: 2026-02-09 16:52:46 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css */
/* external link (no embedded): https://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--brand-primary: #1f7a3a;
--brand-primary-dark: #145329;
--brand-primary-light: #2ecc71;
--brand-secondary: #ff9900;
--brand-gradient: linear-gradient(135deg, #1f7a3a 0%, #2ecc71 100%);
--brand-gradient-subtle: linear-gradient(135deg, rgba(31,122,58,0.12) 0%, rgba(46,204,113,0.08) 100%);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--text-light: #94a3b8;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--border-light: rgba(15, 23, 42, 0.06);
--border-medium: rgba(15, 23, 42, 0.12);
--border-bold: rgba(15, 23, 42, 0.18);
--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
--shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.16);
--shadow-brand: 0 12px 32px rgba(31, 122, 58, 0.2);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--section-py: clamp(80px, 8vw, 120px);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
overflow-x: hidden;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
color: var(--text-primary);
background-color: var(--bg-primary);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(31, 122, 58, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: 'Poppins', sans-serif;
font-weight: 900;
letter-spacing: -0.03em;
}
/* ===== HELPERS ===== */
.section {
padding-top: var(--section-py);
padding-bottom: var(--section-py);
position: relative;
}
.section-bg {
background-color: var(--bg-secondary);
}
.section-title {
font-weight: 800;
letter-spacing: -0.025em;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: var(--brand-gradient);
border-radius: var(--radius-full);
}
.section-title-center {
text-align: center;
}
.section-title-center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
color: var(--text-secondary);
font-size: 1.125rem;
max-width: 680px;
margin-inline: auto;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-primary-dark);
background: rgba(31, 122, 58, 0.1);
border: 1px solid rgba(31, 122, 58, 0.2);
position: relative;
overflow: hidden;
}
.eyebrow::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--brand-gradient);
opacity: 0.08;
z-index: -1;
}
.brand-gradient {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.brand-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--brand-gradient-subtle);
border: 1px solid rgba(31, 122, 58, 0.2);
color: var(--brand-primary);
font-size: 1.25rem;
flex-shrink: 0;
transition: all var(--transition-base);
}
.brand-badge-lg {
width: 64px;
height: 64px;
font-size: 1.75rem;
border-radius: var(--radius-lg);
}
.card-hover {
transition: all var(--transition-base);
border: 1px solid var(--border-light);
background: var(--bg-primary);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-hover:hover {
transform: translateY(-8px);
border-color: var(--border-medium);
box-shadow: var(--shadow-xl);
}
.card-hover .card-icon {
transform: scale(1);
transition: transform var(--transition-base);
}
.card-hover:hover .card-icon {
transform: scale(1.1);
}
.btn {
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
border: none;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
font-size: 0.9375rem;
letter-spacing: 0.01em;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity var(--transition-base);
}
.btn:hover::after {
opacity: 1;
}
.btn-brand {
background: var(--brand-gradient);
color: white;
box-shadow: var(--shadow-brand);
}
.btn-brand:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(31, 122, 58, 0.25);
color: white;
}
.btn-outline-brand {
background: transparent;
color: var(--brand-primary);
border: 2px solid var(--brand-primary);
}
.btn-outline-brand:hover {
background: rgba(31, 122, 58, 0.08);
color: var(--brand-primary-dark);
transform: translateY(-2px);
}
/* ===== NAVBAR ===== */
.navbar {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
transition: all var(--transition-base);
z-index: 1030;
}
.navbar-scrolled {
box-shadow: var(--shadow-md);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.navbar-brand {
font-weight: 800;
font-size: 1.25rem;
color: var(--brand-primary);
display: flex;
align-items: center;
gap: 0.75rem;
}
.navbar-brand-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--brand-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.125rem;
}
.nav-link {
font-weight: 600;
color: var(--text-secondary);
padding: 0.5rem 0.75rem;
margin: 0 0.125rem;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
position: relative;
}
.nav-link:hover {
color: var(--brand-primary);
background: rgba(31, 122, 58, 0.05);
}
.nav-link.active {
color: var(--brand-primary);
background: rgba(31, 122, 58, 0.08);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--brand-gradient);
border-radius: var(--radius-full);
transform: translateX(-50%);
transition: width var(--transition-base);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 70%;
}
.navbar-toggler {
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
transition: all var(--transition-fast);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.2);
}
/* ===== HERO ===== */
.hero-section {
padding-top: calc(var(--section-py) + 60px);
padding-bottom: var(--section-py);
position: relative;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background:
radial-gradient(circle at 70% 30%, rgba(31, 122, 58, 0.08) 0%, transparent 50%),
radial-gradient(circle at 30% 70%, rgba(46, 204, 113, 0.06) 0%, transparent 50%);
}
.hero-bg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, transparent 30%);
}
.hero-content {
max-width: 680px;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
margin-bottom: 2rem;
max-width: 580px;
}
.hero-features {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.hero-feature {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
}
.hero-feature-icon {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: var(--brand-gradient);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
flex-shrink: 0;
}
.hero-image-container {
position: relative;
}
.hero-image {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
border: 1px solid var(--border-light);
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: transform var(--transition-base);
position: relative;
z-index: 1;
}
.hero-image:hover {
transform: perspective(1000px) rotateY(0) rotateX(0);
}
.hero-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--brand-gradient);
opacity: 0;
mix-blend-mode: multiply;
transition: opacity var(--transition-base);
}
.hero-image:hover::after {
opacity: 0.1;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-image-decoration {
position: absolute;
top: -20px;
right: -20px;
width: 100%;
height: 100%;
border-radius: var(--radius-xl);
background: var(--brand-gradient);
opacity: 0.15;
z-index: 0;
filter: blur(20px);
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* ===== FEATURES ===== */
.feature-card {
padding: 2.5rem;
height: 100%;
background: var(--bg-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--brand-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
margin-bottom: 1.5rem;
}
.feature-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
font-weight: 700;
}
.feature-description {
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* ===== SERVICES ===== */
.service-card {
padding: 2rem;
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
background: var(--bg-primary);
height: 100%;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--brand-gradient);
opacity: 0;
transition: opacity var(--transition-base);
z-index: -1;
}
.service-card:hover::before {
opacity: 0.02;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(31, 122, 58, 0.2);
}
.service-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: var(--brand-gradient-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-primary);
font-size: 1.5rem;
margin-bottom: 1.5rem;
transition: all var(--transition-base);
}
.service-card:hover .service-icon {
background: var(--brand-gradient);
color: white;
transform: scale(1.1) rotate(5deg);
}
.service-title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.service-description {
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* ===== WHY CHOOSE US ===== */
.why-card {
padding: 2rem;
border-radius: var(--radius-lg);
background: var(--bg-primary);
border: 1px solid var(--border-light);
position: relative;
overflow: hidden;
transition: all var(--transition-base);
}
.why-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.why-number {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 3rem;
font-weight: 900;
color: var(--brand-primary);
opacity: 0.1;
line-height: 1;
transition: all var(--transition-base);
}
.why-card:hover .why-number {
opacity: 0.2;
transform: scale(1.1);
}
.why-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--brand-gradient-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-primary);
font-size: 1.25rem;
margin-bottom: 1.5rem;
transition: all var(--transition-base);
}
.why-card:hover .why-icon {
background: var(--brand-gradient);
color: white;
transform: rotate(10deg);
}
.why-title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.why-description {
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* ===== GALLERY (CORREGIDA – SIN ESTIRAR IMÁGENES) ===== */
.gallery-section {
background: var(--bg-secondary);
position: relative;
overflow: hidden;
}
.gallery-container {
position: relative;
}
.gallery-carousel {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
/* CONTENEDOR FIJO */
.gallery-item {
position: relative;
height: 420px; /* ajustá si querés */
background: #000; /* prolijo para logos / fotos verticales */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* IMAGEN SIN DEFORMAR */
.gallery-item img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* CLAVE */
transition: transform 6s cubic-bezier(0.2, 0, 0.2, 1);
}
/* ZOOM SUAVE (NO ROMPE PROPORCIÓN) */
.gallery-item:hover img {
transform: scale(1.05);
}
/* OVERLAY */
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 2rem;
background: linear-gradient(
to top,
rgba(15, 23, 42, 0.85),
transparent
);
color: white;
transform: translateY(20px);
opacity: 0;
transition: all var(--transition-base);
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
opacity: 1;
}
/* NAV */
.gallery-nav {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
font-size: 1.25rem;
transition: all var(--transition-base);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.gallery-nav:hover {
background: var(--brand-primary);
color: white;
transform: translateY(-50%) scale(1.1);
}
.gallery-nav-prev {
left: 1rem;
}
.gallery-nav-next {
right: 1rem;
}
/* INDICADORES */
.gallery-indicators {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 1.5rem;
}
.gallery-indicator {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--border-medium);
border: none;
transition: all var(--transition-fast);
}
.gallery-indicator.active {
background: var(--brand-primary);
width: 30px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.gallery-item {
height: 300px;
}
}
/* ===== FAQ ===== */
.faq-section {
background: var(--bg-secondary);
}
.faq-item {
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
background: var(--bg-primary);
margin-bottom: 1rem;
overflow: hidden;
transition: all var(--transition-base);
}
.faq-item:hover {
border-color: var(--border-medium);
box-shadow: var(--shadow-sm);
}
.faq-question {
padding: 1.5rem;
font-weight: 600;
font-size: 1.0625rem;
color: var(--text-primary);
background: transparent;
border: none;
text-align: left;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all var(--transition-fast);
}
.faq-question:hover {
color: var(--brand-primary);
}
.faq-question::after {
content: '+';
font-size: 1.5rem;
color: var(--brand-primary);
transition: all var(--transition-base);
line-height: 1;
}
.faq-question[aria-expanded="true"]::after {
content: '−';
transform: rotate(180deg);
}
.faq-answer {
padding: 0 1.5rem 1.5rem;
color: var(--text-secondary);
font-size: 0.9375rem;
}
/* ===== CONTACT ===== */
.contact-card {
padding: 2.5rem;
border-radius: var(--radius-xl);
background: var(--bg-primary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
height: 100%;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--brand-gradient-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-primary);
font-size: 1.25rem;
flex-shrink: 0;
}
.contact-details h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.contact-details p,
.contact-details a {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-details a:hover {
color: var(--brand-primary);
}
.contact-form {
padding: 2.5rem;
border-radius: var(--radius-xl);
background: var(--bg-primary);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
display: block;
}
.form-control,
.form-select {
padding: 0.875rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-medium);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 0.9375rem;
transition: all var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px rgba(31, 122, 58, 0.15);
}
.form-control::placeholder {
color: var(--text-light);
}
/* ===== FOOTER ===== */
.footer {
background: #0b1220;
color: rgba(255, 255, 255, 0.9);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--brand-gradient);
}
.footer-container {
padding-top: 4rem;
padding-bottom: 4rem;
}
.footer-logo {
font-size: 1.5rem;
font-weight: 800;
color: white;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.footer-logo-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--brand-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.125rem;
}
.footer-description {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
max-width: 300px;
margin-bottom: 2rem;
}
.footer-title {
font-size: 1.125rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
}
.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: var(--brand-gradient);
border-radius: var(--radius-full);
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-links a:hover {
color: white;
transform: translateX(4px);
}
.footer-links a i {
font-size: 0.875rem;
color: var(--brand-primary-light);
}
.footer-bottom {
padding-top: 2rem;
padding-bottom: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all var(--transition-fast);
}
.social-link:hover {
background: var(--brand-primary);
transform: translateY(-3px);
}
/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, #25D366, #128C7E);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
text-decoration: none;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
z-index: 1000;
transition: all var(--transition-base);
overflow: hidden;
}
.whatsapp-float:hover {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
}
.whatsapp-float::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity var(--transition-base);
}
.whatsapp-float:hover::after {
opacity: 1;
}
.whatsapp-pulse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-full);
background: rgba(37, 211, 102, 0.4);
animation: pulse 2s infinite;
z-index: -1;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.hero-title {
font-size: 2.25rem;
}
.hero-section {
padding-top: calc(var(--section-py) + 40px);
}
.section {
padding-top: 4rem;
padding-bottom: 4rem;
}
.contact-card,
.contact-form {
padding: 1.5rem;
}
.feature-card,
.service-card {
padding: 1.5rem;
}
.gallery-item {
height: 350px;
}
.gallery-nav {
width: 40px;
height: 40px;
}
.gallery-nav-prev {
left: 0.5rem;
}
.gallery-nav-next {
right: 0.5rem;
}
.footer-container {
padding-top: 3rem;
padding-bottom: 3rem;
}
.whatsapp-float {
width: 56px;
height: 56px;
bottom: 1.5rem;
right: 1.5rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 1.875rem;
}
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .btn {
width: 100%;
justify-content: center;
}
.gallery-item {
height: 280px;
}
.navbar-brand {
font-size: 1.125rem;
}
.navbar-brand-icon {
width: 32px;
height: 32px;
}
}
/* =========================
EYEBROW ARRIBA (BULLETPROOF)
========================= */
/* 1) El eyebrow siempre va en su propia línea */
.eyebrow{
display: inline-flex !important; /* mantiene pill + icono bien */
width: auto !important;
max-width: 100% !important;
vertical-align: top !important;
margin: 0 0 .75rem 0 !important; /* separación con el título */
}
/* 2) Si algún contenedor lo pone “al costado”, lo normalizamos */
:is(
.section .container,
.section .row,
.section [class*="col-"],
.hero-content,
.text-center,
.section-header,
header,
.content,
.intro
) > .eyebrow{
display: inline-flex !important;
}
/* 3) Cuando eyebrow + h1/h2/h3 estén dentro del mismo wrapper,
forzamos layout vertical (evita que quede a la izquierda) */
:is(
.hero-content,
.text-center,
.section-header,
header,
.intro,
.content,
.col-lg-6,
.col-lg-7,
.col-lg-5
){
/* no rompemos bootstrap grid: solo afecta el contenido interno */
}
:is(
.hero-content,
.text-center,
.section-header,
header,
.intro,
.content
){
/* si estos estaban como flex-row por algún motivo, los acomodamos */
display: block;
}
:is(
.hero-content,
.text-center,
.section-header,
header,
.intro,
.content
) > .eyebrow{
margin-inline: auto; /* en .text-center queda prolijo */
}
/* 4) Títulos y subtítulos: aseguramos que arranquen abajo del eyebrow */
:is(h1, h2, h3).hero-title,
.section-title,
.feature-title,
.service-title,
.why-title{
clear: both !important; /* por si había floats */
}
/* 5) Si algún dev metió “float” en eyebrow, lo matamos */
.eyebrow{
float: none !important;
}
/* 6) Caso extremo: si el contenedor del encabezado está usando flex en fila,
esto lo convierte a columna SOLO en wrappers típicos de encabezado */
:is(
.text-center,
.hero-content,
.section-header
){
display: flex !important;
flex-direction: column !important;
align-items: center; /* en hero/text-center queda centrado */
}
/* 7) En secciones NO centradas (ej: "Quiénes Somos" a la izquierda),
dejamos alineación izquierda automáticamente */
#quienes .col-lg-6{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
#quienes .col-lg-6 > .eyebrow{
margin-inline: 0 !important;
}
/* 8) Si tenés más secciones “a la izquierda”, agregalas acá:
#otraSeccion .col-lg-6{ align-items:flex-start!important; }
*/
.footer-logo-icon img.footer-logo-img {
width: 32px; /* ajustá a gusto */
height: 32px;
object-fit: contain;
display: block;
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54;
--dark-bg:#0b0f18; --darker-bg:#0a1324;
--light-text:#ffffff; --muted-text:rgba(255,255,255,.7);
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-stack{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}
/* Botón Facebook */
.fb-btn{
background:linear-gradient(135deg,#1877F2,#0f5dc7);
color:#fff;
width:52px;
height:52px;
border-radius:50%;
display:grid;
place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.25);
text-decoration:none;
border:0;
cursor:pointer;
transition:transform .3s, box-shadow .3s, background .3s;
}
.fb-btn:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
/* Botón WhatsApp */
.wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff; border:0; width:60px; height:60px; border-radius:50%;
display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
}
.wa-btn::after{
content:""; position:absolute; inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.wa-btn:hover::after{ opacity:1; }
/* Card WhatsApp */
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--dark-bg);
color:var(--light-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.08);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
z-index:1;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex; align-items:center; gap:12px; padding:14px;
background:linear-gradient(180deg,#0d162c,var(--darker-bg));
border-bottom:1px solid rgba(255,255,255,.06);
}
.wa-avatar{
width:40px; height:40px; border-radius:8px; background:#0e1a33;
display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden;
}
.wa-title{ font-weight:700; font-size:1.05rem; }
.wa-status{
font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px;
}
.wa-status::before{
content:""; width:8px; height:8px; border-radius:50%; background:var(--wa);
}
.wa-close{
margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.wa-close:hover{ opacity:1; background:rgba(255,255,255,.1); }
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:var(--dark-bg);
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
line-height:1.35;
box-shadow:0 4px 14px rgba(0,0,0,.25);
animation:fadeIn .25s ease;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px)}
to{opacity:1; transform:none}
}
.wa-bot{
background:#0c1428;
border:1px solid rgba(255,255,255,.06);
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:var(--wa-darker);
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
background:var(--dark-bg);
border-top:1px solid rgba(255,255,255,.08);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.12);
background:#0a1324;
color:var(--light-text);
outline:none;
min-height:44px;
font-family:inherit;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
}
.wa-send{
background:var(--wa);
color:#0b1220;
border:0;
border-radius:12px;
padding:0 16px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.wa-send:hover{
background:var(--wa-dark);
transform:scale(1.05);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); }
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}