Preview de mixed.css
/* MIXED CSS PACK */
/* Template: zngloves.com.ar/index.html */
/* Template mtime: 2025-09-01 15:18:59 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
/* Paleta */
--primary: #21252b;
--secondary: #2C5282;
--accent: #21252b;
--light: #f8f9fa;
--dark: #212529;
--text: #333333;
--muted: #6c757d;
--border: #dee2e6;
--success: #38a169;
/* Ticker size (se sobreescribe por JS) */
--ticker-size: 500px;
/* Sombras y efectos */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
--glow: 0 0 15px rgba(229, 62, 62, 0.4);
/* Bordes */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Espaciado */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;
/* Transiciones */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
* { box-sizing: border-box; }
html, body {
scroll-behavior: smooth;
background: var(--light);
color: var(--text);
font-family: 'Roboto', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--accent); }
.text-accent{ color: var(--accent) !important; }
/* Navbar */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
padding: var(--space-sm) 0;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
.navbar.scrolled { padding: var(--space-xs) 0; box-shadow: var(--shadow-md); }
.navbar-brand { font-weight: 800; letter-spacing: .5px; font-size: 1.5rem; display:flex; align-items:center; }
.navbar-brand span { color: var(--accent); }
.nav-link { color: var(--dark); font-weight: 500; position: relative; padding: var(--space-sm) var(--space-md) !important; transition: var(--transition-fast); }
.nav-link::after {
content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--accent);
transition: var(--transition-normal); transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after { width: 70%; }
.nav-link.active, .nav-link:hover { color: var(--accent); }
.navbar-toggler{ border-color: rgba(0,0,0,.2); }
.navbar-toggler-icon{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Botones */
.btn-zn, .btn-outline-zn {
border-radius: 50px;
padding: 0.75rem 1.5rem;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
font-size: .9rem;
transition: all .3s ease;
position: relative; overflow: hidden; z-index: 1;
}
.btn-zn { background: var(--primary); color:#fff; border:2px solid var(--primary); }
.btn-zn::before{
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: var(--accent);
transition: var(--transition-normal); z-index:-1;
}
.btn-zn:hover::before{ left:0; }
.btn-zn:hover{ border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-outline-zn { border:2px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline-zn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: var(--primary); transition: var(--transition-normal); z-index:-1; }
.btn-outline-zn:hover::before{ left:0; }
.btn-outline-zn:hover{ color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Hero */
.hero{ position:relative; overflow:hidden; padding: 140px 0 100px; background: linear-gradient(135deg,#ffffff 0%, #f0f4f8 100%); border-bottom:1px solid var(--border); }
.hero::before{
content:''; position:absolute; top:-50%; right:-10%; width:600px; height:600px;
background: radial-gradient(circle, rgba(229,62,62,0.1) 0%, rgba(229,62,62,0) 70%);
border-radius:50%; z-index:0;
}
.hero::after{
content:''; position:absolute; bottom:-30%; left:-10%; width:500px; height:500px;
background: radial-gradient(circle, rgba(44,82,130,0.1) 0%, rgba(44,82,130,0) 70%);
border-radius:50%; z-index:0;
}
.hero-content{ position:relative; z-index:2; }
.hero h1{
font-weight:800; line-height:1.1; margin-bottom: var(--space-lg); font-size:3.5rem;
background: linear-gradient(to right, var(--primary), var(--secondary));
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.kicker{
color: var(--accent); text-transform:uppercase; letter-spacing:.2em; font-size:.85rem; font-weight:600;
margin-bottom: var(--space-md); display:inline-block; padding: var(--space-xs) var(--space-sm);
background: rgba(229,62,62,0.1); border-radius: 50px;
}
.hero-image-container{ position:relative; perspective:1000px; }
.hero-image{ border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: rotate3d(.2,1,.1,10deg); transition: var(--transition-normal); border:5px solid #fff; }
.hero-image-container:hover .hero-image{ transform: none; box-shadow: var(--shadow-lg), var(--glow); }
.floating-badge{
position:absolute; bottom:20px; right:20px; background:#fff; padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-weight:600; color: var(--accent);
animation: float 3s ease-in-out infinite; z-index:3;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
/* Secciones */
.section{ padding: 100px 0; position:relative; }
.section-alt{ background: linear-gradient(to bottom, #ffffff, #f8f9fa); }
.section-title{ position:relative; margin-bottom: var(--space-xl); }
.section-title h2{ font-weight:800; margin-bottom: var(--space-sm); position:relative; display:inline-block; }
.section-title h2::after{
content:''; position:absolute; bottom:-10px; left:0; width:60px; height:4px; background: var(--accent); border-radius:2px;
}
.section-title .sub{ color: var(--muted); max-width: 600px; font-size: 1.1rem; }
/* Features */
.feature{
background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--space-xl); height:100%; transition: var(--transition-normal); box-shadow: var(--shadow-md);
position:relative; overflow:hidden;
}
.feature::before{ content:''; position:absolute; top:0; left:0; width:5px; height:0; background: var(--accent); transition: var(--transition-normal); }
.feature:hover{ transform: translateY(-10px); box-shadow: var(--shadow-xl); }
.feature:hover::before{ height:100%; }
.feature-icon{ font-size:2.5rem; color: var(--accent); margin-bottom: var(--space-md); display:inline-block; padding: var(--space-sm); background: rgba(229,62,62,0.1); border-radius: var(--radius-md); }
.feature h5{ font-weight:700; margin-bottom: var(--space-sm); color: var(--dark); }
.feature p{ color: var(--muted); margin-bottom: var(--space-md); }
/* Ticker */
.ticker-section{ position:relative; overflow:hidden; }
.ticker-wrap{ position:relative; }
.ticker{
display:flex; gap: var(--space-lg); overflow-x:auto; scroll-snap-type:x mandatory;
padding: var(--space-md) 0; -ms-overflow-style:none; scrollbar-width:none; scroll-behavior:smooth;
}
.ticker::-webkit-scrollbar{ display:none; }
.tile{
flex:0 0 auto; width: var(--ticker-size); height: var(--ticker-size);
border-radius: var(--radius-lg); background:#fff; border:1px solid var(--border);
scroll-snap-align:center; position:relative; overflow:hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal);
}
.tile:hover{ transform: scale(1.03); box-shadow: var(--shadow-xl); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.tile:hover img{ transform: scale(1.1); }
.tile-overlay{
position:absolute; bottom:0; left:0; right:0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
padding: var(--space-lg); color:#fff; opacity:0; transform: translateY(20px); transition: var(--transition-normal);
}
.tile:hover .tile-overlay{ opacity:1; transform: translateY(0); }
.ticker-controls{
display:flex; gap: var(--space-sm); align-items:center; justify-content:flex-end; margin-bottom: var(--space-lg);
}
.ticker-controls button{
width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:#fff; border:1px solid var(--border); color: var(--dark); transition: var(--transition-fast);
}
.ticker-controls button:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }
/* Animaciones */
.fade-in{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible{ opacity:1; transform:none; }
.staggered-item{ opacity:0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
/* FIX: mostrar cuando entra en viewport */
.staggered-item.visible{ opacity:1; transform: translateY(0); }
.progress-bar{ position:fixed; top:0; left:0; width:0; height:4px; background: var(--accent); z-index:9999; transition: width .2s ease; }
.back-to-top{
position:fixed; bottom:30px; right:30px; width:50px; height:50px; border-radius:50%; background: var(--primary);
color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden;
transition: var(--transition-normal); z-index:99; box-shadow: var(--shadow-lg);
}
.back-to-top.visible{ opacity:1; visibility:visible; }
.back-to-top:hover{ background: var(--accent); transform: translateY(-5px); }
/* Formulario / FAQs / Footer */
.accordion-item{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-md) !important; overflow:hidden; box-shadow: var(--shadow-sm); margin-bottom: var(--space-sm); transition: var(--transition-fast); }
.accordion-item:hover{ box-shadow: var(--shadow-md); }
.accordion-button{ background:#fff; color: var(--dark); font-weight:600; padding: var(--space-lg); box-shadow:none; }
.accordion-button:not(.collapsed){ background: rgba(44,82,130,0.05); color: var(--secondary); }
.card-zn{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-xl); transition: var(--transition-normal); }
.card-zn:hover{ box-shadow: var(--shadow-xl); }
.form-control, .form-select{ background:#fff; border:1px solid var(--border); color: var(--dark); padding: var(--space-md); border-radius: var(--radius-md); transition: var(--transition-fast); }
.form-control:focus, .form-select:focus{ background:#fff; color: var(--dark); border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(44,82,130,0.2); }
.form-label{ font-weight:600; color: var(--dark); margin-bottom: var(--space-sm); }
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
footer{ background: var(--dark); color:#f8f9fa; position:relative; overflow:hidden; }
footer::before{ content:''; position:absolute; top:-100px; right:-100px; width:300px; height:300px; background: rgba(229,62,62,0.1); border-radius:50%; z-index:0; }
footer a{ color:#f8f9fa; transition: var(--transition-fast); }
footer a:hover{ color: var(--accent); text-decoration:none; }
.footer-min{ border-top:1px solid rgba(255,255,255,.1); padding: var(--space-lg) 0; color:#ced4da; background: rgba(0,0,0,.2); }
.social-links{ display:flex; gap: var(--space-md); margin-top: var(--space-lg); }
.social-link{
width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition: var(--transition-fast);
}
.social-link:hover{ background: var(--accent); transform: translateY(-3px); }
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Fallback si no hay JS: mostrar todo */
.no-js .fade-in, .no-js .staggered-item{ opacity:1 !important; transform:none !important; }
/* Responsive */
@media (max-width: 992px){
.hero h1{ font-size: 2.8rem; }
.section{ padding: 80px 0; }
}
@media (max-width: 768px){
.hero h1{ font-size: 2.2rem; }
.hero{ padding: 120px 0 80px; }
.ticker-controls{ justify-content:center; }
}
@media (max-width: 576px){
.hero h1{ font-size: 1.8rem; }
.btn-zn, .btn-outline-zn{ padding:.6rem 1.2rem; font-size:.8rem; }
.feature{ padding: var(--space-lg); }
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Tienda (iframe embebido) */
#tienda .iframe-zn{
background:#fff; border:1px solid var(--border,#dee2e6); border-radius:var(--radius-lg,16px);
box-shadow:var(--shadow-lg,0 10px 15px rgba(0,0,0,.1)); overflow:hidden;
}
#tienda .iframe-zn__bar{
display:flex; align-items:center; justify-content:space-between;
padding:.75rem 1rem; border-bottom:1px solid var(--border,#dee2e6);
background:linear-gradient(to bottom,#fff,#fafafa);
}
#tienda .iframe-zn__title{ font-weight:600; color:var(--dark,#212529); margin:0; }
#tienda .iframe-zn__body{ position:relative; min-height:var(--tienda-altura,80vh); }
#tienda .iframe-zn__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
#tienda .iframe-zn__loader{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f5f5f5 10px,#f5f5f5 20px);
color:var(--muted,#6c757d);
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ===== Footer PRO ===== */
.footer-pro{
position:relative; color:#f8f9fa; background: radial-gradient(1200px 400px at 80% -10%, rgba(229,62,62,.12) 0%, transparent 60%), var(--dark,#111);
border-top:1px solid rgba(255,255,255,.06);
}
.footer-pro a{ color:#f8f9fa; text-decoration:none; transition:.2s ease; }
.footer-pro a:hover{ color:var(--accent,#E53E3E); }
.footer-cta{
background: linear-gradient(90deg, rgba(229,62,62,.95), rgba(229,62,62,.85));
color:#fff; padding:1.25rem 0; border-bottom:1px solid rgba(0,0,0,.15);
}
.footer-cta .btn-ghost{
border:1.5px solid rgba(255,255,255,.8); color:#fff; border-radius:999px; padding:.55rem 1rem; font-weight:600;
background:transparent;
}
.footer-cta .btn-ghost:hover{ background:#fff; color:#111; }
.footer-cta .btn-darkghost{
border:1.5px solid rgba(0,0,0,.2); color:#111; background:#fff; border-radius:999px; padding:.55rem 1rem; font-weight:700;
}
.footer-grid{ padding:3rem 0 2rem; }
.footer-title{
font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:.3px; font-size:1rem; text-transform:uppercase;
margin-bottom:1rem; color:#fff;
}
.footer-brand{ font-size:1.25rem; font-weight:800; letter-spacing:.5px; }
.footer-text{ color:#ced4da; }
.footer-links a{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem 0; color:#e9ecef; }
.footer-links i{ opacity:.75; font-size:.85rem; }
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.chip{
display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15);
color:#e9ecef; padding:.35rem .6rem; border-radius:999px; font-size:.85rem; background:rgba(255,255,255,.04);
}
.chip i{ opacity:.8; }
.social-compact{ display:flex; gap:.6rem; }
.social-compact a{
width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.social-compact a:hover{ background:var(--accent,#E53E3E); border-color:var(--accent,#E53E3E); transform:translateY(-2px); }
.footer-legal{
border-top:1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.25);
padding:1rem 0;
color:#adb5bd;
font-size:.95rem;
}
@media (max-width: 767.98px){
.footer-cta .cta-wrap{ text-align:center; gap:.75rem !important; }
.footer-cta .cta-wrap > *{ margin-top:.5rem; }
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* Contenedor Principal */
.floating-buttons {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Estilo Base para los Botones */
.floating-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
color: white;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
position: relative;
}
/* Efecto Hover */
.floating-btn:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
/* Tooltip Texto */
.floating-btn .tooltip-text {
visibility: hidden;
width: max-content;
background-color: #222;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 8px 12px;
position: absolute;
z-index: 1;
right: 70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
font-family: sans-serif;
font-weight: normal;
text-transform: none;
letter-spacing: 0.5px;
}
.floating-btn:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Estilo WhatsApp */
.whatsapp {
background-color: #25D366;
order: 1; /* Para ponerlo primero en la columna */
}
/* Estilo Instagram */
.instagram {
background: #f09433;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
order: 2;
}
/* Estilo Email */
.email {
background-color: #EA4335;
order: 3;
}
/* Tamaño y color de los SVG dentro del botón */
.floating-btn svg {
width: 28px;
height: 28px;
fill: white;
}