Preview de mixed.css
/* MIXED CSS PACK */
/* Template: estrilogic.com.ar/index.html */
/* Template mtime: 2025-10-23 22:30:53 */
/* 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.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--primary: #0d6efd;
--primary-dark: #0a58ca;
--primary-light: #3d8bfd;
--secondary: #6c757d;
--success: #198754;
--dark: #0f1113;
--soft: #22262a;
--text: #212529;
--light: #f8f9fa;
--accent: #9aa4ae;
--link: #e6e9ec;
--whatsapp: #25D366;
--gradient-primary: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
--gradient-dark: linear-gradient(135deg, #0f1113 0%, #22262a 100%);
--gradient-light: linear-gradient(135deg, #f9fbff 0%, #f0f5ff 100%);
--gradient-hero: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
--gradient-silver: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #a0a0a0 100%);
--gradient-silver-light: linear-gradient(135deg, #e8e8e8 0%, #f8f8f8 50%, #d8d8d8 100%);
--gradient-silver-dark: linear-gradient(135deg, #a0a0a0 0%, #c0c0c0 50%, #808080 100%);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
--shadow-md: 0 8px 30px rgba(0,0,0,0.12);
--shadow-lg: 0 15px 50px rgba(0,0,0,0.15);
--shadow-xl: 0 25px 60px rgba(0,0,0,0.2);
--border-radius: 12px;
--border-radius-lg: 20px;
--border-radius-xl: 30px;
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ====== Base ====== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: #fff;
color: var(--text);
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.7;
overflow-x: hidden;
font-weight: 400;
}
.container-narrow {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
font-weight: 800;
letter-spacing: -0.5px;
position: relative;
display: inline-block;
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 80px;
height: 6px;
background: var(--gradient-silver);
border-radius: 3px;
transition: var(--transition);
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
.section-title:hover::after {
width: 120px;
}
.muted {
color: #6b737b;
}
a {
text-decoration: none;
transition: var(--transition);
}
/* ====== Navbar: Ultra Moderna ====== */
.navbar {
box-shadow: var(--shadow-sm);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 1rem 0;
transition: var(--transition-slow);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar.scrolled {
padding: 0.7rem 0;
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.98);
}
.navbar-brand img {
transition: var(--transition);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.navbar-brand:hover img {
transform: scale(1.05);
}
.navbar .nav-link {
font-weight: 600;
color: #1d232a;
position: relative;
padding: 0.7rem 1.2rem !important;
border-radius: 10px;
transition: var(--transition);
margin: 0 0.2rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
color: var(--primary);
background: rgba(13, 110, 253, 0.08);
transform: translateY(-2px);
}
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--gradient-silver);
transition: var(--transition);
transform: translateX(-50%);
border-radius: 2px;
}
.navbar .nav-link:hover::after {
width: 70%;
}
.navbar .btn-primary {
background: var(--gradient-silver);
border: none;
border-radius: 12px;
font-weight: 700;
padding: 0.7rem 1.5rem;
transition: var(--transition);
box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3);
position: relative;
overflow: hidden;
color: #333;
}
.navbar .btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: var(--transition-slow);
}
.navbar .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(192, 192, 192, 0.4);
}
.navbar .btn-primary:hover::before {
left: 100%;
}
.navbar .navbar-toggler {
border: 1px solid rgba(29, 35, 42, 0.1);
padding: 0.5rem 0.7rem;
border-radius: 10px;
transition: var(--transition);
background: rgba(255, 255, 255, 0.8);
}
.navbar .navbar-toggler:focus {
box-shadow: none;
}
.navbar .navbar-toggler .tog-dot {
width: 24px;
height: 2px;
background: #1d232a;
display: block;
margin: 5px 0;
border-radius: 2px;
transition: var(--transition);
}
.navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(2) {
opacity: 0;
}
.navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* ====== HERO ULTRA MODERNO ====== */
.hero-ultimate {
background: var(--gradient-light);
position: relative;
padding: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
/* Efectos de fondo avanzados */
.hero-ultimate::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(192, 192, 192, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(160, 160, 160, 0.03) 0%, transparent 50%);
z-index: 0;
}
.hero-ultimate::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.8) 0%, transparent 30%),
linear-gradient(225deg, rgba(255,255,255,0.6) 0%, transparent 30%);
z-index: 0;
}
.hero-container-ultimate {
max-width: 1400px;
margin: 0 auto;
padding: 100px 40px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
/* Columna de contenido */
.hero-content-ultimate {
padding-right: 40px;
}
.hero-brand-ultimate {
margin-bottom: 30px;
}
.hero-logo-ultimate {
height: 70px;
width: auto;
filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.15));
transition: var(--transition);
}
.hero-logo-ultimate:hover {
transform: scale(1.05);
filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.2));
}
.hero-title-ultimate {
font-size: clamp(2.4rem, 4.5vw, 3.8rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 30px;
background: linear-gradient(135deg, #0f172a 0%, #808080 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-title-ultimate::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100px;
height: 6px;
background: var(--gradient-silver);
border-radius: 3px;
}
.hero-lead-ultimate {
font-size: 1.3rem;
line-height: 1.7;
color: #475569;
margin-bottom: 40px;
max-width: 90%;
font-weight: 500;
}
/* Chips mejoradas */
.hero-chips-ultimate {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 50px;
}
.hero-chip-ultimate {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(226, 232, 240, 0.8);
color: #0f172a;
padding: 12px 20px;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.hero-chip-ultimate::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.1), transparent);
transition: var(--transition-slow);
}
.hero-chip-ultimate:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
border-color: #a0a0a0;
}
.hero-chip-ultimate:hover::before {
left: 100%;
}
/* Botones mejorados */
.hero-actions-ultimate {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.hero-btn-primary {
background: var(--gradient-silver);
color: #333;
border: none;
border-radius: 15px;
padding: 18px 35px;
font-weight: 800;
font-size: 1.1rem;
box-shadow: 0 8px 25px rgba(192, 192, 192, 0.4);
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.hero-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: var(--transition-slow);
}
.hero-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(192, 192, 192, 0.5);
}
.hero-btn-primary:hover::before {
left: 100%;
}
.hero-btn-outline {
background: white;
color: #808080;
border: 2px solid #e2e8f0;
border-radius: 15px;
padding: 18px 35px;
font-weight: 800;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.1);
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.hero-btn-outline::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--gradient-silver);
transition: var(--transition);
z-index: -1;
}
.hero-btn-outline:hover {
transform: translateY(-5px);
border-color: #a0a0a0;
box-shadow: 0 8px 20px rgba(192, 192, 192, 0.2);
color: #333;
}
.hero-btn-outline:hover::before {
width: 100%;
}
/* Ubicación */
.hero-location-ultimate {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
color: #64748b;
font-size: 1rem;
font-weight: 500;
}
/* Columna visual */
.hero-visual-ultimate {
position: relative;
perspective: 1000px;
}
.hero-visual-container {
background: white;
border-radius: var(--border-radius-xl);
padding: 40px;
box-shadow: var(--shadow-xl);
border: 1px solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
transition: var(--transition);
}
.hero-visual-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: var(--gradient-silver);
border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
.hero-visual-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 70%, rgba(192, 192, 192, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(232, 232, 232, 0.05) 0%, transparent 50%);
z-index: 0;
}
.hero-product-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
position: relative;
z-index: 1;
}
.hero-product-item {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 18px;
padding: 25px 20px;
text-align: center;
border: 1px solid #e2e8f0;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.hero-product-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-silver);
transform: scaleX(0);
transition: var(--transition);
transform-origin: left;
}
.hero-product-item:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: var(--shadow-lg);
}
.hero-product-item:hover::before {
transform: scaleX(1);
}
.hero-product-icon {
width: 70px;
height: 70px;
margin: 0 auto 15px;
background: var(--gradient-silver);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 1.8rem;
box-shadow: 0 6px 15px rgba(192, 192, 192, 0.3);
transition: var(--transition);
}
.hero-product-item:hover .hero-product-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(192, 192, 192, 0.4);
}
.hero-product-title {
font-weight: 800;
color: #0f172a;
margin-bottom: 10px;
font-size: 1.1rem;
}
.hero-product-desc {
font-size: 0.9rem;
color: #64748b;
line-height: 1.5;
}
/* Elementos decorativos avanzados */
.hero-decoration {
position: absolute;
z-index: 0;
border-radius: 50%;
}
.hero-decoration-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(192, 192, 192, 0.08) 0%, transparent 70%);
top: 10%;
right: 5%;
animation: float 8s ease-in-out infinite;
}
.hero-decoration-2 {
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(232, 232, 232, 0.06) 0%, transparent 70%);
bottom: 20%;
left: 3%;
animation: float 10s ease-in-out infinite reverse;
}
.hero-decoration-3 {
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(160, 160, 160, 0.05) 0%, transparent 70%);
top: 60%;
right: 20%;
animation: float 12s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
/* Responsive */
@media (max-width: 1200px) {
.hero-container-ultimate {
gap: 60px;
}
}
@media (max-width: 992px) {
.hero-container-ultimate {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
padding: 80px 30px;
}
.hero-content-ultimate {
padding-right: 0;
}
.hero-lead-ultimate {
max-width: 100%;
}
.hero-chips-ultimate {
justify-content: center;
}
.hero-actions-ultimate {
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-container-ultimate {
padding: 60px 20px;
}
.hero-actions-ultimate {
flex-direction: column;
align-items: center;
}
.hero-btn-primary,
.hero-btn-outline {
width: 100%;
max-width: 300px;
justify-content: center;
}
.hero-product-showcase {
grid-template-columns: 1fr;
}
.hero-decoration-1,
.hero-decoration-2,
.hero-decoration-3 {
display: none;
}
}
/* ====== Secciones mejoradas ====== */
section {
padding: clamp(100px, 12vw, 150px) 0;
position: relative;
}
.bg-light {
background: var(--gradient-light) !important;
}
/* Cards mejoradas */
.soft-card {
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: var(--border-radius-xl);
padding: 2.5rem;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.soft-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: var(--gradient-silver);
transform: scaleX(0);
transition: var(--transition);
transform-origin: left;
}
.soft-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.soft-card:hover::before {
transform: scaleX(1);
}
.soft-card h5 {
font-weight: 800;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
font-size: 1.3rem;
}
.soft-card h5 i {
margin-right: 0.7rem;
font-size: 1.4rem;
background: var(--gradient-silver);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Icon bullets mejorados */
.icon-li {
display: flex;
gap: 1.2rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.icon-li i {
font-size: 1.6rem;
background: var(--gradient-silver);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-top: 0.1rem;
flex-shrink: 0;
transition: var(--transition);
}
.icon-li:hover i {
transform: scale(1.2);
}
/* ====== Ticker / Carousel mejorado ====== */
.square-500 {
width: 100%;
max-width: 550px;
aspect-ratio: 1/1;
margin-inline: auto;
background: #000;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
transition: var(--transition);
position: relative;
}
.square-500::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(192, 192, 192, 0.1), rgba(232, 232, 232, 0.1));
opacity: 0;
transition: var(--transition);
z-index: 1;
}
.square-500:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.square-500:hover::before {
opacity: 1;
}
.square-500 .carousel-item,
.square-500 img {
width: 100%;
height: 100%;
}
.square-500 img {
object-fit: cover;
background: #000;
transition: transform 0.8s ease;
}
.square-500:hover img {
transform: scale(1.1);
}
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
margin: 0 20px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
transition: var(--transition);
opacity: 0.8;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: white;
transform: translateY(-50%) scale(1.1);
opacity: 1;
}
/* ====== Footer mejorado ====== */
footer {
background: var(--gradient-dark);
color: #c7cdd4;
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: var(--gradient-silver);
}
footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(192, 192, 192, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.05) 0%, transparent 50%);
z-index: 0;
}
footer a {
color: #e7ebef;
transition: var(--transition);
position: relative;
}
footer a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-silver);
transition: var(--transition);
}
footer a:hover {
color: #fff;
}
footer a:hover::after {
width: 100%;
}
footer .small {
color: #9aa4ae;
}
.footer-logo {
transition: var(--transition);
}
.footer-logo:hover {
transform: translateY(-5px);
}
/* Mejoras al accordion */
.accordion-button {
font-weight: 700;
padding: 1.5rem 1.5rem;
border: none;
box-shadow: none;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 12px !important;
transition: var(--transition);
}
.accordion-button:not(.collapsed) {
background: rgba(192, 192, 192, 0.08);
color: #808080;
box-shadow: none;
}
.accordion-button::after {
background-size: 1.2rem;
}
.accordion-item {
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 12px !important;
overflow: hidden;
margin-bottom: 1rem;
box-shadow: var(--shadow-sm);
background: transparent;
}
.accordion-item:last-of-type {
margin-bottom: 0;
}
/* Mejoras al formulario */
.form-control, .form-select {
padding: 0.9rem 1.2rem;
border: 1px solid #e1e5e9;
border-radius: 12px;
transition: var(--transition);
background: rgba(255, 255, 255, 0.8);
}
.form-control:focus, .form-select:focus {
border-color: #a0a0a0;
box-shadow: 0 0 0 0.3rem rgba(192, 192, 192, 0.15);
background: white;
}
.btn-primary {
background: var(--gradient-silver);
border: none;
border-radius: 12px;
font-weight: 700;
padding: 0.9rem 1.8rem;
transition: var(--transition);
position: relative;
overflow: hidden;
color: #333;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: var(--transition-slow);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(192, 192, 192, 0.4);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-outline-success {
border-radius: 12px;
font-weight: 700;
padding: 0.9rem 1.8rem;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-outline-success::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--success);
transition: var(--transition);
z-index: -1;
}
.btn-outline-success:hover {
transform: translateY(-3px);
border-color: var(--success);
color: white;
}
.btn-outline-success:hover::before {
width: 100%;
}
/* Mejoras a las alertas */
.alert {
border-radius: 15px;
border: none;
padding: 1.2rem 1.8rem;
box-shadow: var(--shadow-md);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.section-title::after {
width: 60px;
}
.soft-card {
padding: 2rem;
}
}
@media (max-width: 576px) {
.soft-card {
padding: 1.5rem;
}
.square-500 {
border-radius: 15px;
}
section {
padding: 80px 0;
}
}
/* Texto al lado del logo */
.navbar .brand-text{
font-weight: 800;
font-size: 1.05rem; /* ajustá si lo querés más grande */
letter-spacing: .2px;
line-height: 1;
color: #0f172a;
margin-top: 2px; /* microalineación óptica con el logo */
white-space: nowrap;
}
.navbar .brand-text-strong{
background: var(--gradient-silver);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* "Estri" con degradado */
}
/* Hover sutil en brand */
.navbar .navbar-brand:hover .brand-text{
color: #808080;
}
/* Responsive: ocultar texto en pantallas muy chicas si hace falta */
@media (max-width: 380px){
.navbar .brand-text{ display: none; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* SAFE GUARD: prevent accidental horizontal scroll on small screens */
html, body { max-width: 100%; overflow-x: hidden; }
[class*="col-"] { min-width: 0; } /* prevent flex overflow */
.navbar .navbar-toggler { z-index: 1040; } /* ensure hamburger stays clickable */
/* ===== INLINE <style> BLOCK #3 ===== */
/* === Scoped Mobile Overflow Hotfix (structure untouched) === */
@media (max-width: 576px){
html, body { max-width: 100%; overflow-x: hidden; }
/* Bootstrap rows can overflow if a .row is outside .container */
.row { margin-left: 0; margin-right: 0; }
/* Prevent any internal navbar element from pushing width */
.navbar, .navbar > .container, .navbar > .container-fluid { overflow-x: clip; }
/* Avoid long words breaking layout */
h1, h2, h3, .display-1, .display-2, .display-3 { word-wrap: break-word; overflow-wrap: anywhere; }
/* Media should never exceed viewport width */
img, svg, video, canvas { max-width: 100%; height: auto; }
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* ===== Mobile Navbar Fix: smaller logo + tighter spacing (<=576px) ===== */
@media (max-width: 576px){
.navbar { padding: .5rem 0 !important; }
.navbar .container, .navbar .container-fluid { gap: .5rem; }
.navbar-brand { gap: .4rem !important; }
.navbar-brand img.brand-logo { max-height: 34px !important; height: 34px !important; width: auto !important; }
/* ocultar texto al lado del logo en pantallas chicas para que no desborde */
.navbar .brand-text { display: none !important; }
/* botón hamburguesa compacto y siempre clickeable */
.navbar .navbar-toggler { padding: .35rem .5rem !important; border-radius: 8px; z-index: 1050; }
.navbar .tog-dot { width: 22px; height: 2px; margin: 4px 0; }
/* evitar que el collapse empuje el ancho */
.navbar .collapse.navbar-collapse { max-width: 100vw; overflow-x: hidden; }
}
/* Quitar ocultamiento en mobile */
@media (max-width: 576px){
.navbar .brand-text{
display:inline-block !important; /* antes lo ocultabas */
font-size:.95rem; /* bajamos tamaño para que no desborde */
}
.navbar-brand{ gap:.35rem !important; } /* menos espacio entre logo y texto */
}
/* Versión desktop: ya la tenés, pero por si acaso */
.navbar .brand-text{
font-weight:800; letter-spacing:.2px; line-height:1; white-space:nowrap;
}
.navbar .brand-text-strong{
background: var(--gradient-silver);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Badge responsive */
.badge {
font-size: 1rem !important;
}
@media (max-width: 576px) {
.badge {
font-size: 0.85rem !important;
padding: 0.5rem 1rem !important;
}
}
/* ===== INLINE <style> BLOCK #5 ===== */
.hero-ultimate .hero-container-ultimate{padding:64px 28px;gap:56px}
.hero-ultimate .hero-content-ultimate{padding-right:16px}
/* LOGO ENORME Y CENTRADO */
.hero-ultimate .brand-right{
display:flex; justify-content:center; align-items:center;
margin-bottom:16px;
}
.hero-ultimate .brand-right img{
height:420px; /* << MAS GRANDE */
width:auto; max-width:100%;
filter: drop-shadow(0 18px 34px rgba(15,23,42,.22));
}
/* Contenedor de cards más angosto para resaltar el logo */
.hero-ultimate .hero-visual-container{
width:clamp(320px,30vw,460px);
padding:14px; border-radius:20px;
background:rgba(255,255,255,.92);
border:1px solid rgba(226,232,240,.9);
box-shadow:0 20px 44px rgba(2,6,23,.10);
margin-inline:auto;
}
/* Cards mini */
.hero-ultimate .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hero-ultimate .fcard{
border-radius:14px;padding:10px 10px 12px;
background:linear-gradient(180deg,#f8fbff 0%, #f2f6fb 100%);
border:1px solid #e6ebf2; box-shadow:0 6px 14px rgba(2,6,23,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.hero-ultimate .fcard:hover{transform:translateY(-4px);box-shadow:0 12px 22px rgba(2,6,23,.10)}
.hero-ultimate .f-icon{
width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background: var(--gradient-silver);color:#333;font-size:1.05rem;margin-bottom:6px;
box-shadow:0 8px 16px rgba(192, 192, 192,.30);
}
.hero-ultimate .f-title{font-weight:800;font-size:.95rem;color:#0f172a;margin-bottom:4px;letter-spacing:-.1px}
.hero-ultimate .f-desc{font-size:.78rem;color:#5b6878;line-height:1.35;margin:0}
/* Breakpoints */
@media (min-width:1600px){
.hero-ultimate .brand-right img{height:500px;} /* XL aún más grande */
}
@media (max-width:1200px){
.hero-ultimate .brand-right img{height:320px;}
}
@media (max-width:992px){
.hero-ultimate .hero-container-ultimate{grid-template-columns:1fr;gap:34px}
.hero-ultimate .brand-right img{height:220px}
.hero-ultimate .hero-visual-container{width:100%;max-width:480px}
}
@media (max-width:576px){
.hero-ultimate .brand-right img{height:140px}
.hero-ultimate .hero-visual-container{padding:12px}
.hero-ultimate .feature-grid{grid-template-columns:1fr;gap:10px}
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* Scope local */
.quienes-clean{position:relative;overflow:hidden}
.quienes-clean .visual-frame{
width:100%; max-width:560px; aspect-ratio:1/1;
margin-inline:auto;
border-radius:22px;
background: rgba(255,255,255,.75); /* SIN FONDO NEGRO */
border:1px solid #e6ebf2;
box-shadow:0 22px 50px rgba(2,6,23,.10);
position:relative; overflow:hidden; isolation:isolate;
transform: translateZ(0);
transition: transform .35s ease, box-shadow .35s ease;
}
/* Línea superior sutil */
.quienes-clean .visual-frame::before{
content:""; position:absolute; inset:0 0 auto 0; height:8px;
background: var(--gradient-silver);
opacity:.9; z-index:2;
}
/* Brillo diagonal animado */
.quienes-clean .visual-frame::after{
content:""; position:absolute; inset:-40% -40%;
background:linear-gradient(115deg, transparent 45%, rgba(255,255,255,.35) 50%, transparent 55%);
transform: rotate(5deg) translateX(-30%);
animation: shine 4.5s ease-in-out infinite;
z-index:1; pointer-events:none;
}
@keyframes shine{
0%{transform: rotate(5deg) translateX(-30%)}
100%{transform: rotate(5deg) translateX(30%)}
}
/* Imagen */
.quienes-clean .visual-frame img{
position:relative; z-index:0; width:100%; height:100%;
object-fit: contain; background: transparent; /* sin fondo */
transform: scale(1.02);
transition: transform .35s ease, filter .35s ease;
filter: drop-shadow(0 10px 20px rgba(192, 192, 192,.15));
}
.quienes-clean .visual-frame:hover{
transform: translateY(-6px);
box-shadow:0 30px 70px rgba(2,6,23,.16);
}
.quienes-clean .visual-frame:hover img{ transform: scale(1.05) }
/* Blobs decorativos (muy sutiles) */
.quienes-clean .blob{
position:absolute; border-radius:50%; filter: blur(20px);
opacity:.25; pointer-events:none; z-index:0;
animation: float 12s ease-in-out infinite;
}
.quienes-clean .blob.b1{width:320px;height:320px;right:-80px;top:-60px;
background: radial-gradient(circle, rgba(192, 192, 192,.25), transparent 60%);}
.quienes-clean .blob.b2{width:280px;height:280px;left:-80px;bottom:-60px;
background: radial-gradient(circle, rgba(232, 232, 232,.25), transparent 60%);
animation-direction: reverse;}
@keyframes float{
0%,100%{ transform: translateY(0) }
50%{ transform: translateY(-18px) }
}
/* Reveal suave al entrar (se acopla a tu IntersectionObserver) */
.quienes-clean .reveal{
opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease;
}
.quienes-clean .reveal.is-visible{
opacity:1; transform: translateY(0);
}
@media (max-width: 576px){
.quienes-clean .visual-frame{border-radius:18px}
}
/* ===== INLINE <style> BLOCK #7 ===== */
.placasXL2{padding:64px 0}
.placasXL2 .plaquita{
border:1px solid #e6ebf2; border-radius:22px; background:#fff;
box-shadow:0 14px 34px rgba(2,6,23,.10);
transition:transform .2s ease, box-shadow .2s ease;
padding:14px; height:100%; cursor: zoom-in;
}
.placasXL2 .plaquita:hover{transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,.16)}
/* Plaquitas GRANDES, sin recorte en desktop */
.placasXL2 .plaquita-media{
height: clamp(360px, 44vw, 700px);
border-radius:16px; background:#fff;
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
@media (min-width:1600px){
.placasXL2 .plaquita-media{ height: clamp(420px, 40vw, 780px); }
}
/* >>> Mobile: 1 por fila y MUCHO más altas (aprovecha la pantalla) */
@media (max-width: 576px){
.placasXL2{padding:40px 0}
.placasXL2 .plaquita-media{
height: min(68vh, 560px); /* bien grandes en phone, sin recortar */
}
}
@media (max-width: 380px){
.placasXL2 .plaquita-media{ height: min(72vh, 600px); }
}
.placasXL2 img{max-width:100%; max-height:100%; object-fit:contain; display:block}
/* ===== Modal Lightbox ===== */
#pxl2Modal .modal-dialog{max-width:min(1280px,96vw)}
#pxl2Modal .modal-content{background:transparent; border:none}
#pxl2Modal .viewer{
position:relative; display:flex; align-items:center; justify-content:center;
min-height:40vh; text-align:center;
}
#pxl2Modal #pxl2Img{
max-height:85vh; max-width:100%; width:auto; margin:0 auto;
border-radius:18px; box-shadow:0 32px 90px rgba(0,0,0,.5); background:#000;
}
.pxl2-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:58px; height:58px; border-radius:50%;
background:#fff; border:1px solid #e6ebf2; opacity:1;
display:flex; align-items:center; justify-content:center; z-index:5;
filter: drop-shadow(0 14px 30px rgba(2,6,23,.24));
}
.pxl2-prev{left:12px}
.pxl2-next{right:12px}
.pxl2-nav i{font-size:20px}
.pxl2-counter{
position:absolute; bottom:8px; right:12px;
background:rgba(0,0,0,.55); color:#fff; font-weight:700;
border-radius:10px; padding:6px 10px; font-size:.9rem;
}
@media (max-width:576px){
.pxl2-nav{width:46px;height:46px}
}
/* ===== INLINE <style> BLOCK #8 ===== */
.carousel-image {
max-height: 500px;
width: auto;
object-fit: contain;
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.carousel-image {
max-height: 400px;
}
}
@media (max-width: 576px) {
.carousel-image {
max-height: 300px;
}
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* ==== FOOTER STYLES ==== */
.footer {
background: #111;
color: #ccc;
font-size: 14px;
}
.footer-nav a {
color: #ccc;
margin: 0 6px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-nav a:hover {
color: #fff;
}
.footer-brand img {
filter: drop-shadow(0 0 3px rgba(255,255,255,0.1));
}
.footer hr {
opacity: 0.2;
}
/* Ajustes responsive */
@media (max-width: 576px) {
.footer {
padding-top: 20px !important;
padding-bottom: 15px !important;
}
.footer h6 {
font-size: 16px;
}
.footer-nav a {
display: inline-block;
margin: 3px 8px;
font-size: 13px;
}
.footer img {
height: 32px;
}
}
/* ===== INLINE <style> BLOCK #10 ===== */
:root{
--wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54;
/* tonos más industriales para el panel */
--dark-bg:#0f1116; --darker-bg:#0c121b;
--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-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;}
.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;
}
.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,#121a26,var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);}
.wa-avatar{width:40px; height:40px; border-radius:8px; background:#101722;
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:#0e1622; 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:#0b121c; 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);}
/* Scrollbar */
.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;}
}