Preview de mixed.css
/* MIXED CSS PACK */
/* Template: subli-market.com.ar/index.html */
/* Template mtime: 2025-08-22 17:15:47 */
/* 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=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;600;700&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ========= VARIABLES Y RESET ========= */
:root{
--primary:#7B6DCC;
--primary-dark:#5E50B0;
--secondary:#6A88D8;
--accent:#E8B3C9;
--gold:#D6A85A;
--text:#2D2A3F;
--text-light:#6C6A7C;
--bg:#F7F3FA;
--bg-light:#FFFFFF;
--gradient-primary:linear-gradient(135deg,var(--primary),var(--secondary));
--gradient-gold:linear-gradient(135deg,var(--gold),#F4C87B);
/* extras para tienda */
--primary-light:#9C91E6;
--radius-sm:12px;
--radius-md:16px;
--radius-lg:24px;
--shadow-sm:0 4px 12px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.08);
--shadow-lg:0 12px 36px rgba(0,0,0,.12);
--transition:all .3s cubic-bezier(.25,.8,.25,1);
}
#servicios .card-soft ul{margin:0}
#servicios .card-soft li{margin:.15rem 0}
#servicios .icon-pill i{line-height:1}
#servicios .btn-outline-dark:hover{transform:translateY(-1px)}
/* Proceso */
#proceso .process-step{
background: rgba(255,255,255,.6);
border: 1px solid #eef0f6;
border-radius: var(--radius-sm);
transition: var(--transition);
}
#proceso .process-step:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-md);
background: #fff;
}
#proceso .step-num{
width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--gradient-primary);
color: #fff; font-weight: 700; line-height: 1;
box-shadow: var(--shadow-sm);
}
#proceso .step-head .fw-semibold{ color: var(--text); }
/* título dentro de la card para armonizar */
#proceso h3{
background: var(--gradient-primary);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 800;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:'Montserrat',sans-serif;
font-weight:700;line-height:1.2;
}
/* ========= NAVBAR ========= */
.navbar{
background:rgba(255,255,255,.95);
backdrop-filter:blur(10px);
box-shadow:var(--shadow-sm);
padding:.8rem 0;
transition:var(--transition);
}
.navbar-scrolled{padding:.5rem 0;box-shadow:var(--shadow-md)}
.navbar-brand{
font-weight:800;font-size:1.6rem;
background:var(--gradient-primary);
-webkit-background-clip:text;background-clip:text;color:transparent;
display:flex;align-items:center;gap:.5rem;
}
.navbar-brand i{font-size:1.8rem}
.nav-link{
font-weight:500;color:var(--text)!important;
position:relative;padding:.5rem 1rem!important;transition:var(--transition);
}
.nav-link::after{
content:'';position:absolute;bottom:0;left:50%;
width:0;height:2px;background:var(--gradient-primary);
transition:var(--transition);transform:translateX(-50%);
}
.nav-link:hover::after,.nav-link.active::after{width:70%}
/* toggler visible sin navbar-light/dark */
.navbar-toggler{border:none}
.navbar-toggler:focus{box-shadow:none}
.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='%232D2A3F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Hace que el footer “sangre” a todo el ancho del viewport */
.full-bleed{
background: var(--gradient-primary);
color: #fff;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 3rem 0 2rem; /* lo que ya usabas */
}
/* Ajustes visuales del footer (si no los tenías ya) */
.footer-logo{font-size:1.8rem;font-weight:800;display:flex;align-items:center;gap:.5rem;justify-content:center}
.footer-text{opacity:.9;max-width:700px;margin:0 auto}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.btn-brand{
background:var(--gradient-gold);color:#1d1a10;font-weight:600;border:none;
border-radius:50px;padding:.6rem 1.2rem;box-shadow:var(--shadow-md);
transition:var(--transition);display:inline-flex;align-items:center;gap:.5rem;
}
.btn-brand:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#1d1a10}
/* ========= HERO ========= */
.hero{
position:relative;padding:140px 0 100px;
background:
radial-gradient(1200px 600px at 10% -10%,rgba(232,179,201,.25),transparent 60%),
radial-gradient(1000px 600px at 100% 0%,rgba(106,136,216,.2),transparent 60%),
linear-gradient(180deg,#fff 0%,#fbf9ff 100%);
overflow:hidden;
}
.hero::before{
content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;
background:rgba(123,109,204,.08);border-radius:50%;z-index:0;
}
.hero::after{
content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;
background:rgba(232,179,201,.08);border-radius:50%;z-index:0;
}
.hero-content{position:relative;z-index:2}
.chip{
display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #eee;
border-radius:50px;padding:.5rem 1rem;box-shadow:var(--shadow-sm);font-weight:600;color:var(--primary);
margin-bottom:1.5rem;animation:fadeInUp .6s ease-out;
}
.hero h1{
font-weight:800;font-size:3.2rem;letter-spacing:-.5px;margin-bottom:1.5rem;
background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
animation:fadeInUp .8s ease-out;
}
.hero p{font-size:1.1rem;color:var(--text-light);margin-bottom:2rem;animation:fadeInUp 1s ease-out}
.hero-buttons{display:flex;gap:1rem;margin-bottom:1rem;animation:fadeInUp 1.2s ease-out}
.hero-illustration{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);transform:perspective(1000px) rotateY(-5deg) rotateX(5deg);transition:var(--transition);animation:fadeInRight 1s ease-out}
.hero-illustration:hover{transform:perspective(1000px) rotateY(0) rotateX(0)}
.hero-illustration img{width:100%;height:auto;display:block}
/* ========= SECTIONS ========= */
section{padding:5rem 0;position:relative}
.section-title{
font-size:2.5rem;font-weight:800;margin-bottom:1rem;
background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
text-align:center;
}
.section-subtitle{color:var(--text-light);text-align:center;margin-bottom:3rem;max-width:700px;margin-left:auto;margin-right:auto}
/* ========= CARDS ========= */
.card-soft{
background:var(--bg-light);border:none;border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);transition:var(--transition);height:100%;overflow:hidden;
}
.card-soft:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.icon-pill{
width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;
background:rgba(123,109,204,.1);color:var(--primary);font-size:1.4rem;flex-shrink:0;
}
/* ========= TICKER/CAROUSEL ========= */
.ticker-section{position:relative;overflow:hidden}
.ticker-wrap{position:relative;padding:1rem 0 3rem}
.ticker{overflow:hidden;position:relative;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--bg-light);padding:1.5rem}
.ticker-track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.25,.8,.25,1);will-change:transform;touch-action:pan-y}
.slide{flex:0 0 320px;height:320px;border-radius:var(--radius-md);overflow:hidden;position:relative;background:#f1ecff;box-shadow:var(--shadow-sm);transition:var(--transition)}
.slide:hover{transform:scale(1.03)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .caption{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,.7);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;backdrop-filter:blur(4px)}
.ticker-btn{
position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:none;
background:var(--bg-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--primary);z-index:10;transition:var(--transition)
}
.ticker-btn:hover{background:var(--primary);color:#fff}
.ticker-prev{left:-25px}
.ticker-next{right:-25px}
.ticker-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem}
.ticker-dot{width:10px;height:10px;border-radius:50%;background:#ddd;border:none;transition:var(--transition)}
.ticker-dot.active{background:var(--primary);transform:scale(1.2)}
/* ========= TIENDA (iframe) ========= */
.tienda-section{padding:4rem 0;background:var(--bg-light)}
.tienda-container{max-width:1200px;margin:0 auto;padding:0 15px}
.tienda-header{text-align:center;margin-bottom:2rem}
.tienda-header h2{font-size:2.2rem;color:var(--text);margin-bottom:1rem}
.tienda-btn{
display:inline-block;padding:12px 30px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:#fff;border-radius:50px;text-decoration:none;font-weight:600;box-shadow:0 4px 15px rgba(106,90,205,.3);transition:var(--transition)
}
.tienda-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(106,90,205,.4);color:#fff}
.iframe-container{width:100%;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
#iframe-container{height:auto}
#tienda-iframe{width:1px;min-width:100%;border:none;display:block}
/* ========= FORM ========= */
.contact::before{
content:'';position:absolute;top:0;left:0;width:100%;height:100%;
background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%237b6dcc' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity:.5;z-index:-1;
}
.form-control,.form-select,textarea{border-radius:var(--radius-sm);border:1px solid #e2e8f0;padding:.75rem 1rem;transition:var(--transition)}
.form-control:focus,.form-select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(123,109,204,.15)}
/* ========= FOOTER ========= */
footer{background:var(--gradient-primary);color:#fff;padding:3rem 0 2rem}
.footer-content{display:flex;flex-direction:column;gap:1rem;text-align:center}
.footer-logo{font-size:1.8rem;font-weight:800;display:flex;align-items:center;gap:.5rem;justify-content:center}
.footer-text{opacity:.9;max-width:700px;margin:0 auto}
.footer-bottom{margin-top:1rem}
/* ========= ANIMATIONS ========= */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
/* ========= RESPONSIVE ========= */
@media (max-width:992px){
.hero{padding:120px 0 80px}
.hero h1{font-size:2.8rem}
.ticker-btn{width:40px;height:40px}
.ticker-prev{left:-20px}
.ticker-next{right:-20px}
}
@media (max-width:768px){
.hero{padding:100px 0 60px;text-align:center}
.hero h1{font-size:2.3rem}
.hero-buttons{flex-direction:column;align-items:center}
.hero-illustration{transform:none;margin-top:2rem}
.section-title{font-size:2rem}
.slide{flex:0 0 280px;height:280px}
.ticker-prev,.ticker-next{display:none}
}
@media (max-width:576px){
.hero h1{font-size:2rem}
.chip{font-size:.9rem}
.section-title{font-size:1.8rem}
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Contenedor de botones flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
/* Estilos base para todos los botones sociales */
.social-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.social-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
color: white;
text-decoration: none;
}
.social-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
.social-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.social-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.social-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.social-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.social-float:hover .social-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
/* Estilos específicos para cada botón */
.whatsapp-button {
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}
.whatsapp-button:hover {
background: #128C7E;
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-pulse {
background: rgba(37, 211, 102, 0.6);
}
.whatsapp-pulse-delayed {
background: rgba(37, 211, 102, 0.4);
}
.instagram-button {
background: #E1306C;
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
}
.instagram-button:hover {
background: #C13584;
box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
}
.instagram-pulse {
background: rgba(225, 48, 108, 0.6);
}
.instagram-pulse-delayed {
background: rgba(193, 53, 132, 0.4);
}
.facebook-button {
background: #1877F2;
box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
}
.facebook-button:hover {
background: #166FE5;
box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
}
.facebook-pulse {
background: rgba(24, 119, 242, 0.6);
}
.facebook-pulse-delayed {
background: rgba(22, 111, 229, 0.4);
}
/* Animaciones */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial para los botones */
.social-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Mostrar botones con un pequeño retraso entre ellos */
.instagram-float { animation: fadeInUp 0.5s ease 0.2s both; }
.facebook-float { animation: fadeInUp 0.5s ease 0.4s both; }
.whatsapp-float { animation: fadeInUp 0.5s ease 0.6s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.social-float-container {
bottom: 20px;
right: 20px;
}
.social-button {
width: 60px;
height: 60px;
}
.social-icon {
font-size: 25px;
}
.social-tooltip {
display: none;
}
}