frioexpressservice.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap:root {
--azul-900: #0D47A1; --azul-800: #1565C0; --azul-700: #1976D2; --azul-050: #E3F2FD;
--gris-900: #0b2239; --gris-700: #334155; --gris-500: #64748B; --borde: #e6edf5; --r: 16px;
--gradient-primary: linear-gradient(135deg, var(--azul-800) 0%, var(--azul-900) 100%);
--gradient-hero: linear-gradient(135deg, #f4f8ff 0%, #e8f2ff 100%);
--shadow-sm: 0 4px 12px rgba(16, 24, 40, 0.08);
--shadow-md: 0 10px 26px rgba(16, 24, 40, 0.12);
--shadow-lg: 0 20px 40px rgba(16, 24, 40, 0.15);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
color: var(--gris-900); line-height: 1.6;
}
.container { max-width: 1140px; }
.container-xxl { max-width: 1400px; }
.section { padding: 100px 0; }
.section-title { font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; position: relative; }
.section-title::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 4px; background: var(--gradient-primary); border-radius: 2px; }
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }
.section-sub { color: var(--gris-500); max-width: 860px; font-size: 1.125rem; }
.bg-azul-soft { background: var(--gradient-hero); position: relative; overflow: hidden; }
.bg-azul-soft::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\"><path d=\"M0,0 L100,0 L100,100 Z\" fill=\"rgba(21, 101, 192, 0.03)\"/></svg>') no-repeat center/cover; z-index: 0; }
.soft-card { background: #fff; border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: all 0.3s ease; overflow: hidden; }
.soft-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.icon-badge { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--gradient-primary); color: white; font-size: 1.5rem; box-shadow: var(--shadow-sm); }
.btn-primary {
--bs-btn-bg: var(--azul-800); --bs-btn-border-color: var(--azul-800);
--bs-btn-hover-bg: #0f5aae; --bs-btn-hover-border-color: #0f5aae;
--bs-btn-active-bg: #0d4a8c; --bs-btn-active-border-color: #0d4a8c;
font-weight: 600; border-radius: 12px; padding: 12px 24px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21, 101, 192, 0.4); }
.btn-lg { padding: 14px 28px; font-size: 1.1rem; }
.whatsapp-pill { background: #25D366; color: #fff; border-radius: 50px; padding: 12px 24px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
.whatsapp-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4); color: #fff; opacity: 1; }
.spacer { height: 80px; }
/* ===== NAVBAR NUEVA (compacta y centrada) ===== */
.navbar { background:#fff; transition: box-shadow .2s ease, padding .2s ease; }
.navbar.scrolled { box-shadow: 0 8px 24px rgba(16,24,40,.06); }
.navbar-compact { padding: 10px 0; }
.navbar-brand { font-weight: 800; font-size: 1.25rem; color: var(--azul-800) !important; display:flex; align-items:center; gap:.5rem; }
.navbar-brand i { color: var(--azul-700); }
.navbar-nav { gap: .5rem; }
.navbar-nav .nav-link { padding: .35rem .65rem !important; border-radius: 8px; font-weight: 500; color: var(--gris-700); }
.navbar-nav .nav-link:hover { background: var(--azul-050); color: var(--azul-800); }
.navbar-cta .btn, .navbar-cta .whatsapp-pill { border-radius: 999px; padding: .5rem .9rem; box-shadow: none; }
.navbar-cta .whatsapp-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; box-shadow: 0 3px 10px rgba(37,211,102,.25); }
.navbar-cta .btn-primary { box-shadow: 0 3px 10px rgba(21,101,192,.25); }
/* HERO */
.hero { padding: 100px 0; position: relative; }
.hero h1 { font-weight: 800; font-size: 3.5rem; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1px; }
.hero .lead { color: var(--gris-700); font-size: 1.25rem; margin-bottom: 32px; }
.bullet i { color: var(--azul-700); margin-right: 12px; }
.hero-image { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); transform: perspective(1000px) rotateY(-5deg) rotateX(5deg); transition: transform 0.5s ease; }
.hero-image:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.hero-logo { transform: none; }
.hero-logo-img { display:block; width:100%; height: clamp(320px, 42vw, 560px); object-fit: contain; background:#fff; padding: clamp(12px, 2vw, 28px); border-radius: 20px; }
/* TICKER */
.ticker-viewport { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--borde); background: #fff; box-shadow: var(--shadow-md); }
.ticker-track { display: flex; gap: 16px; align-items: center; padding: 16px; will-change: transform; }
.ticker-item { flex: 0 0 auto; width: min(500px, 92vw); height: min(500px, 92vw); border-radius: 16px; overflow: hidden; border: 1px solid var(--borde); background: #f8fafc; box-shadow: var(--shadow-sm); transition: transform 0.3s ease; }
.ticker-item:hover { transform: scale(1.03); }
.ticker-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticker-controls { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; padding: 20px; }
.ticker-controls button { pointer-events: auto; border: 0; background: rgba(13, 71, 161, 0.8); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; transition: all 0.3s ease; box-shadow: var(--shadow-md); }
.ticker-controls button:hover { background: rgba(13, 71, 161, 1); transform: scale(1.1); }
.ticker-toolbar { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.is-hidden { display: none !important; }
/* Responsive */
@media (max-width: 1200px) {
.navbar-nav { gap: .25rem; }
}
@media (max-width: 992px) {
.section { padding: 80px 0; }
.hero h1 { font-size: 2.8rem; }
.hero-image { transform: none; margin-top: 32px; }
.navbar-cta { gap:.5rem; }
.navbar-cta .whatsapp-pill, .navbar-cta .btn { width: 100%; justify-content:center; }
}
@media (max-width: 768px) {
.section { padding: 60px 0; }
.hero h1 { font-size: 2.2rem; }
.hero .lead { font-size: 1.1rem; }
.section-title { font-size: 1.8rem; }
}
#porque.porque-clean{
background:#fff;
border-top:1px solid var(--borde);
border-bottom:1px solid var(--borde);
}
#porque .section-title{ margin-bottom:10px; }
#porque .section-sub{ color:var(--gris-500); max-width:720px; }
#porque .stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top:22px; }
@media (max-width: 992px){ #porque .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
#porque .stat{ border:1px solid var(--borde); border-radius:14px; padding:14px; background:#fff; }
#porque .stat .value{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; letter-spacing:-.2px; color:var(--gris-900); line-height:1; }
#porque .stat .value i{ font-size:1rem; color:var(--azul-700); }
#porque .stat small{ display:block; margin-top:6px; color:var(--gris-500); }
#porque .features{ margin-top:26px; border:1px solid var(--borde); border-radius:16px; overflow:hidden; }
#porque .feature{ display:grid; grid-template-columns: 36px 1fr; gap:12px; padding:16px 18px; align-items:flex-start; background:#fff; }
#porque .feature + .feature{ border-top:1px solid var(--borde); }
#porque .feature .ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#f3f8ff; color:var(--azul-700); border:1px solid #e5efff; font-size:1rem; flex-shrink:0; }
#porque .feature h6{ margin:0 0 4px; font-weight:700; letter-spacing:-.15px; }
#porque .feature p{ margin:0; color:var(--gris-700); }
#porque .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#porque .chip{ border:1px solid #e7eef7; background:#f8fbff; color:#225ea8; padding:4px 8px; border-radius:999px; font-size:.8rem; font-weight:600; }
#faqs.faqs-clean{ background:#fff; border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); }
#faqs .section-title{ margin-bottom:10px; }
#faqs .section-sub{ color:var(--gris-500); max-width:720px; }
#faqs .faqlist{ margin-top:22px; display:grid; gap:10px; }
#faqs details{ border:1px solid var(--borde); border-radius:12px; background:#fff; padding:0; overflow:hidden; }
#faqs summary{ cursor:pointer; list-style:none; padding:14px 18px; font-weight:700; letter-spacing:-.15px; display:flex; align-items:center; gap:10px; }
#faqs summary::-webkit-details-marker{ display:none; }
#faqs summary:after{ content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-left:auto; transition: transform .18s ease; font-size:.9rem; color:var(--gris-500); }
#faqs details[open] summary:after{ transform: rotate(180deg); }
#faqs .answer{ padding:0 18px 16px 18px; color:var(--gris-700); border-top:1px solid var(--borde); line-height:1.6; }
#faqs details:hover{ border-color:#dfe8f3; }
#faqs summary:focus-visible{ outline:3px solid rgba(21,101,192,.25); outline-offset:2px; border-radius:10px; }
@media (min-width: 992px){ #faqs .faqlist{ grid-template-columns: 1fr 1fr; } }
#site-footer.footer-clean{
background: linear-gradient(180deg, var(--azul-900), #0b3a85);
color:#E7EFFA;
padding:56px 0 22px;
position: relative;
overflow: hidden;
}
#site-footer .container { position: relative; z-index: 1; }
#site-footer h5, #site-footer h6 { color:#fff; margin-bottom: .75rem; font-weight:800; letter-spacing:-.2px; }
#site-footer p, #site-footer small, #site-footer li, #site-footer a { color:#E7EFFA; }
#site-footer a { text-decoration: none; }
#site-footer a:hover { text-decoration: underline; color:#fff; }
#site-footer .link-list{ list-style:none; padding:0; margin:0; }
#site-footer .link-list li + li{ margin-top:.4rem; }
#site-footer .whatsapp-pill{ display:inline-flex; align-items:center; gap:.5rem; background:#25D366; color:#fff; border-radius:999px; padding:10px 16px; font-weight:700; box-shadow:0 4px 12px rgba(37,211,102,.25); }
#site-footer .whatsapp-pill:hover{ text-decoration:none; filter:brightness(1.05); }
#site-footer .divider{ border-color:rgba(231,239,250,.25); margin:28px 0; }
#site-footer .bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
#site-footer .top-link{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(231,239,250,.35); color:#E7EFFA; border-radius:999px; padding:6px 12px; text-decoration:none; }
#site-footer .top-link:hover{ background:rgba(231,239,250,.08); }
#site-footer::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:70%; background: radial-gradient(800px 280px at 50% 0, rgba(255,255,255,.08), transparent 70%); z-index:0; pointer-events:none; }
@media (max-width: 992px){ #site-footer { padding-top:44px; } #site-footer .col-gap { row-gap: 1.75rem; } }
#wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit; }
#wa-float .wa-btn{
display: grid; place-items: center;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366; color:#fff; border:0; cursor:pointer;
box-shadow: 0 10px 26px rgba(37,211,102,.35);
transition: transform .15s ease, filter .15s ease;
font-size: 24px;
}
#wa-float .wa-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
#wa-float .wa-btn:active{ transform: translateY(0); }
#wa-float .wa-panel{
position: absolute; right: 0; bottom: 66px;
width: min(320px, 92vw);
border: 1px solid #e6edf5; border-radius: 14px;
background: #fff;
box-shadow: 0 18px 42px rgba(16,24,40,.22);
transform-origin: 90% 100%;
animation: wa-pop .18s ease-out;
}
#wa-float .wa-panel-inner{ padding: 14px; }
#wa-float .wa-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; color:#0b2239; }
#wa-float .wa-head i{ color:#1565C0; }
#wa-float .wa-close{ margin-left:auto; border:0; background:transparent; color:#64748B; cursor:pointer; font-size:18px; }
#wa-float .wa-text{ margin: 6px 0 12px; color:#475569; }
#wa-float .wa-actions{ display:flex; gap:8px; flex-wrap:wrap; }
#wa-float .wa-action{
display:inline-flex; align-items:center; gap:8px;
background:#25D366; color:#fff; text-decoration:none;
padding:10px 14px; border-radius:10px; font-weight:700;
box-shadow: 0 6px 16px rgba(37,211,102,.28);
}
#wa-float .wa-action:hover{ filter:brightness(1.05); }
#wa-float .wa-phone{
display:inline-flex; align-items:center; gap:8px;
background:#f1f5f9; color:#0b2239; text-decoration:none;
padding:10px 12px; border-radius:10px; font-weight:700; border:1px solid #e6edf5;
}
@keyframes wa-pop { from{ opacity:0; transform: scale(.96) translateY(6px);} to{ opacity:1; transform: scale(1) translateY(0);} }
@media (max-width: 480px){
#wa-float { right: 14px; bottom: 16px; }
#wa-float .wa-btn{ width: 54px; height: 54px; font-size: 22px; }
}
construccionesegmax.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap:root{
/* Paleta de colores mejorada */
--primary:#b7ac8e; /* rojo ladrillo principal */
--primary-600:#b12723;
--primary-100:#fde9e8;
--dark:#0a0f16;
--text:#1b2430;
--muted:#6b7280;
--bg:#f8fafc;
--card:#ffffff;
--accent:#0ea5e9; /* celeste para detalles y foco */
--radius:16px;
--shadow:0 6px 24px rgba(2,8,23,.08);
--shadow-lg:0 20px 60px rgba(2,8,23,.12);
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, #e74c3c 100%);
--gradient-dark: linear-gradient(135deg, var(--dark) 0%, #1a202c 100%);
--gradient-light: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
line-height: 1.2;
}
/* Navbar mejorada */
.navbar {
box-shadow: 0 4px 20px rgba(2,8,23,.08);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 0;
transition: all 0.3s ease;
}
.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: 0 4px 20px rgba(2,8,23,.12);
}
.navbar-brand{
font-weight:900;
letter-spacing:.2px;
color: var(--dark);
font-size: 1.5rem;
}
.navbar-brand span{
color: var(--primary);
position: relative;
}
.navbar-brand span::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--gradient-primary);
border-radius: 2px;
}
.nav-link {
font-weight:600;
color:#334155 !important;
position: relative;
transition: all 0.3s ease;
padding: 0.5rem 1rem !important;
border-radius: 8px;
}
.nav-link:hover {
color: var(--primary) !important;
background: var(--primary-100);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 80%;
}
/* Hero mejorado */
.hero {
padding: 150px 0 100px;
background:
radial-gradient(ellipse at 10% 10%, rgba(215, 50, 45, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 90% 90%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
var(--gradient-light);
position: relative;
overflow: hidden;
}
.hero::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='%23d7322d' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.5;
}
.hero h1 {
font-weight:900;
letter-spacing:.2px;
color: var(--dark);
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero p.lead {
color:#465266;
font-size: 1.25rem;
margin-bottom: 2rem;
}
.badge-chip{
background:#fff;
border:1px solid rgba(2,8,23,.06);
border-radius:999px;
padding:10px 18px;
display:inline-flex;
align-items:center;
gap:.5rem;
box-shadow: var(--shadow);
font-weight: 500;
transition: all 0.3s ease;
}
.badge-chip:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(2,8,23,.12);
}
.badge-chip i{
color:var(--primary);
font-size: 1rem;
}
.btn-primary{
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary-600);
--bs-btn-hover-border-color: var(--primary-600);
--bs-btn-focus-shadow-rgb: 215,50,45;
border-radius: 12px;
padding: 1rem 1.5rem;
font-weight:700;
box-shadow: 0 8px 20px rgba(215,50,45,.15);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(215,50,45,.25);
}
.btn-primary::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: all 0.6s ease;
}
.btn-primary:hover::after {
left: 100%;
}
.btn-outline-dark{
border-radius:12px;
padding:1rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-dark:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(2,8,23,.1);
}
/* Secciones mejoradas */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-weight:900;
color:var(--dark);
letter-spacing:.2px;
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}
.section-sub {
color:#475569;
max-width: 800px;
font-size: 1.125rem;
}
/* Cards/tiles mejorados */
.card-soft{
background: var(--card);
border:1px solid rgba(2,8,23,.06);
border-radius: var(--radius);
box-shadow: var(--shadow);
height:100%;
transition: all 0.3s ease;
overflow: hidden;
position: relative;
}
.card-soft:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-soft::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.card-soft:hover::before {
/* ...cortado... */
/* removed old ticker css */
#trabajos{ background:#fbfbfd; }
.ticker-shell{ position:relative; overflow:hidden; }
.ticker-track{
display:flex; gap:16px; align-items:center;
will-change: transform; animation: tickerScroll 45s linear infinite;
}
.ticker-track:hover{ animation-play-state: paused; }
@keyframes tickerScroll{
0%{ transform: translateX(0); }
100%{ transform: translateX(-50%); }
}
.ticker-item{
flex: 0 0 auto;
width: 480px; height: 480px;
border-radius: 14px;
overflow: hidden;
background:#fff;
border:1px solid rgba(2,8,23,.06);
display:grid; place-items:center;
position:relative;
}
.ticker-item img{
width:100%; height:100%; object-fit: contain; object-position:center;
background:#fff; display:block; transition: transform .35s ease;
}
.ticker-item:hover img{ transform: scale(1.02); }
/* Botones */
.ticker-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:999px; border:1px solid rgba(2,8,23,.08);
background:#fff; box-shadow:0 6px 16px rgba(2,8,23,.08);
display:grid; place-items:center; cursor:pointer; z-index:5;
}
.ticker-btn:active{ transform: translateY(-50%) scale(.97); }
.ticker-prev{ left:8px; }
.ticker-next{ right:8px; }
@media (max-width: 992px){
.ticker-item{ width: 360px; height: 360px; }
}
@media (max-width: 576px){
.ticker-item{ width: 86vw; height: 86vw; }
}
/* --- Quiénes Somos: video responsive sin recortes --- */
.quienes-video{ height:480px; object-fit:cover; display:block; }
@media (max-width: 768px){
.quienes-video{ height:58vw; }
}
/* === Ticker robusto (scroll contínuo real, sin romper nada) === */
.ticker-shell{ position:relative; overflow:hidden; }
.ticker-scroll{
display:flex; gap:16px; align-items:center;
overflow:hidden; scroll-behavior:smooth;
}
.ticker-item{
flex:0 0 auto; width:480px; height:480px;
border-radius:14px; overflow:hidden; background:#fff;
border:1px solid rgba(2,8,23,.06);
display:grid; place-items:center; position:relative;
}
.ticker-item img{
width:100%; height:100%; object-fit:contain; object-position:center;
display:block; background:#fff; transition:transform .35s ease;
}
.ticker-item:hover img{ transform:scale(1.02); }
.ticker-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:999px; border:1px solid rgba(2,8,23,.08);
background:#fff; box-shadow:0 6px 16px rgba(2,8,23,.08);
display:grid; place-items:center; cursor:pointer; z-index:5;
}
.ticker-prev{ left:8px; } .ticker-next{ right:8px; }
@media (max-width: 992px){ .ticker-item{ width:360px; height:360px; } }
@media (max-width: 576px){ .ticker-item{ width:86vw; height:86vw; } }
gestoriamc.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.csshttps://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap/* ================== TOKENS ================== */
:root{
--primary: #D92323;
--primary-600: #c11f1f;
--primary-700: #a61a1a;
--primary-50: #fff5f5;
--dark: #0B1220;
--dark-2: #111319;
--light: #ffffff;
--muted: #6b7280;
--soft: #f7f7f9;
--glass: rgba(255,255,255,.08);
--radius: 18px;
--radius-sm: 12px;
--shadow-sm: 0 6px 18px rgba(17,19,25,.08);
--shadow-md: 0 20px 45px rgba(17,19,25,.12);
--shadow-lg: 0 25px 60px rgba(17,19,25,.15);
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ================== BASE ================== */
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
body{
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--dark);
background:
radial-gradient(1400px 1400px at -10% -10%, #ffe5e5 0%, transparent 40%),
radial-gradient(1200px 1200px at 110% -20%, #fff0f0 0%, transparent 38%),
#ffffff;
overflow-x: hidden;
}
.container{max-width: 1120px}
/* ================== NAVBAR ================== */
.navbar{
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,19,25, .9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
padding: .65rem 0;
transition: var(--transition);
background: rgba(255,255,255,.85);
backdrop-filter: saturate(140%) blur(6px);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.navbar.scrolled{
background: rgba(255,255,255,.95);
box-shadow: 0 10px 35px rgba(17,19,25,.08);
padding: .45rem 0;
}
.navbar-brand{
font-weight: 800;
letter-spacing: .2px;
color: var(--primary);
display: flex;
align-items: center;
gap: .6rem;
transition: var(--transition);
}
.navbar-brand:hover {
transform: translateY(-2px);
}
.navbar-brand .logo-dot{
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(145deg, var(--primary), #ff5858);
box-shadow: 0 6px 14px rgba(217,35,35,.35);
animation: pulse 2s infinite;
}
.nav-link{
font-weight: 600;
color: var(--dark);
opacity: .9;
position: relative;
transition: var(--transition);
margin: 0 5px;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background: var(--primary);
transition: var(--transition);
}
.nav-link:hover, .nav-link:focus{
color: var(--primary);
}
.nav-link:hover:after {
width: 100%;
}
/* ================== HERO ================== */
.hero{
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
background:
radial-gradient(1100px 600px at 80% 10%, rgba(217,35,35,.35), transparent 60%),
radial-gradient(900px 500px at 10% 20%, rgba(255,255,255,.15), transparent 60%),
#111;
}
.hero::before{
content: "";
position: absolute;
inset: 0;
background: url('img/logo.png') center/cover no-repeat;
filter: brightness(.75) saturate(1.1);
transform: scale(1.02);
animation: zoomInOut 20s infinite alternate;
}
.hero::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}
.hero-card{
position: relative;
z-index: 1;
width: min(940px, 95vw);
padding: 2.8rem clamp(1rem, 3vw, 2.6rem);
border-radius: calc(var(--radius) + 6px);
background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
backdrop-filter: blur(10px) saturate(130%);
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,.18);
text-align: center;
animation: fadeUp 1s ease-out;
}
.badge-hero{
display: inline-flex;
gap: .5rem;
align-items: center;
background: rgba(255,255,255,.14);
color: #fff;
border: 1px solid rgba(255,255,255,.25);
padding: .45rem .75rem;
border-radius: 999px;
font-weight: 600;
font-size: .85rem;
animation: pulse 2s infinite;
}
.hero h1{
font-weight: 800;
letter-spacing: .2px;
margin: .9rem 0;
font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 1.2;
}
.hero p.lead{
opacity: .95;
font-size: 1.15rem;
margin-bottom: 1.5rem;
}
.cta-wrap{
gap: .8rem;
margin-bottom: 1.5rem;
}
.btn-primary{
background: linear-gradient(180deg, var(--primary), var(--primary-600));
border: none;
border-radius: 14px;
box-shadow: 0 12px 26px rgba(217,35,35,.28);
font-weight: 700;
padding: .85rem 1.2rem;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-primary:hover{
background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(217,35,35,.35);
}
.btn-primary:active{
transform: translateY(-1px);
}
.btn-success{
border-radius: 14px;
font-weight: 700;
box-shadow: 0 12px 26px rgba(37,211,102,.26);
transition: var(--transition);
}
.btn-success:hover{
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(37,211,102,.35);
}
/* ================== SECTIONS ================== */
.section{
padding: 84px 0;
position: relative;
}
.section-title{
font-weight: 800;
color: var(--dark);
text-align: center;
margin-bottom: 1.2rem;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.section-title:after {
content: '';
position: absolute;
width: 60%;
height: 4px;
bottom: -8px;
left: 20%;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
border-radius: 2px;
}
.section-sub{
text-align: center;
color: var(--muted);
max-width: 720px;
margin: 0 auto 2.2rem;
font-size: 1.1rem;
}
/* ================== QUIÉNES ================== */
.img-frame{
border-radius: var(--radius);
box-shadow: var(--shadow-md);
transform: translateZ(0);
transition: var(--transition);
filter: brightness(0.95);
}
.img-frame:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
filter: brightness(1);
}
/* ================== SERVICIOS ================== */
.service-card{
background: #fff;
border-radius: 16px;
padding: 26px 22px;
border: 1px solid #eef0f3;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.service-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-600));
transform: scaleX(0);
transform-origin: left;
transition: tran
/* ...cortado... */
:root { --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html, body { font-family: var(--font-sans); }
h1, h2, h3, .display-1, .display-2, .display-3 { letter-spacing: -0.02em; }
.lead { font-weight: 400; }
/* Full-bleed real: 100vw sin overlays */
#inicio.hero-full{
position:relative; left:50%; right:50%;
margin-left:-50vw; margin-right:-50vw; width:100vw;
color:#0b2239;
background:
radial-gradient(1200px 700px at 110% -10%, rgba(229,9,20,.06), transparent 60%),
linear-gradient(180deg,#fff 0%,#fff 55%,#fafbff 100%);
}
/* Apaga cualquier ::before/::after global del tema */
#inicio.hero-full::before,#inicio.hero-full::after{ content:none !important; }
/* Grid ancho: texto fijo / logo flexible */
#inicio .hero-inner{
display:grid; align-items:center;
grid-template-columns: minmax(360px, 760px) 1fr;
gap: clamp(18px, 3.2vw, 56px);
padding: clamp(60px, 6vw, 110px) clamp(18px, 4.5vw, 72px);
max-width: 1640px; margin-inline:auto;
}
/* Acentos del texto */
#inicio .cta-wrap{ gap:.75rem; }
#inicio .hl{
background:linear-gradient(90deg,#E50914,#ff3b3b);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
#inicio .badge-hero{
display:inline-flex; align-items:center; gap:.55rem;
background:#fff0f1; border:1px solid #ffd7da; color:#c40812;
font-weight:700; font-size:.9rem; padding:.5rem .8rem; border-radius:999px;
margin-bottom:.4rem;
}
#inicio .divider-x{
height:1px; background:linear-gradient(90deg,transparent,rgba(11,19,32,.15),transparent);
margin: 1.1rem 0 1.25rem;
}
#inicio .mark-pill{
display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
font-weight:600; font-size:.92rem; color:#0b2239;
background:#f3f4f6; border:1px solid rgba(11,19,32,.08); padding:.5rem .8rem; border-radius:999px;
}
/* Columna derecha: LOGO visible y enorme, pero sin recorte */
#inicio .hero-media{
display:flex; align-items:center; justify-content:center;
min-height: clamp(520px, 64vh, 820px);
border-radius: 22px;
padding: clamp(10px, 1.5vw, 18px); /* margen interno para que no toque bordes */
background:#fff;
border:1px solid rgba(11,19,32,.08);
box-shadow: 0 18px 40px rgba(11,19,32,.10);
overflow:hidden;
}
#inicio .hero-logo-img{
display:block;
max-width: 100%;
max-height: 100%;
width:auto; height:auto;
object-fit: contain; /* IMPORTANT: no recorta logos */
image-rendering: -webkit-optimize-contrast;
}
/* Botón primario consistente */
#inicio .btn-primary{
background:#E50914; border-color:#E50914; box-shadow:0 10px 24px rgba(229,9,20,.25);
}
#inicio .btn-primary:hover{ background:#c40812; border-color:#c40812; }
/* Responsive */
@media (max-width: 991.98px){
#inicio .hero-inner{ grid-template-columns: 1fr; gap: 24px; }
#inicio .hero-media{ order:2; min-height: clamp(360px, 48vh, 560px); }
}
#quienes .car-scene{
position: relative;
width: min(520px, 90%);
aspect-ratio: 16/10;
border-radius: 20px;
background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f7f8fb 60%, #f1f3f8 100%);
border: 1px solid #eef0f3;
box-shadow: 0 20px 50px rgba(17,19,25,.12);
overflow: hidden;
isolation: isolate;
animation: driveIn .9s cubic-bezier(.22,.9,.3,1) both;
}
/* Imagen del “auto” */
#quienes .car-img{
position: absolute; inset: 12% 6% auto auto;
width: 88%; height: auto; object-fit: contain;
filter: drop-shadow(0 12px 22px rgba(17,19,25,.18));
transform-origin: 60% 80%;
animation: idleBob 3.2s ease-in-out infinite;
}
/* Sombra de la ruta */
#quienes .road-shadow{
position: absolute; left: 10%; right: 10%; bottom: 9%;
height: 18%;
background: radial-gradient(60% 140% at 50% 0%, rgba(0,0,0,.18), transparent 70%);
opacity: .35;
filter: blur(10px);
z-index: 0;
}
/* Líneas de velocidad */
#quienes .speed-line{
position: absolute; height: 4px; border-radius: 999px;
background: linear-gradient(90deg, rgba(229,9,20,.0), rgba(229,9,20,.35), rgba(229,9,20,.0));
top: 36%; left: -30%; width: 30%;
opacity: 0; transform: translateX(0);
z-index: 1;
animation: speedLine 1.4s linear infinite;
}
#quienes .sl2{ top: 48%; animation-delay: .25s; }
#quienes .sl3{ top: 60%; animation-delay: .5s; }
/* Humo sutil */
#quienes .exhaust{
position: absolute; right: 10%; bottom: 18%;
width: 18px; height: 18px; border-radius: 50%;
background: radial-gradient(circle at 40% 40%, rgba(160,170,185,.45), rgba(160,170,185,0) 70%);
filter: blur(1px);
opacity: 0;
animation: exhaust 1.8s ease-out infinite .3s;
z-index: 0;
}
/* Hover “acelerar” */
#quienes .car-scene:hover .car-img{
animation: accelerate .6s cubic-bezier(.2,.9,.2,1) forwards, idleBob 3.2s ease-in-out 1s infinite;
filter: drop-shadow(0 16px 32px rgba(229,9,20,.28)) saturate(1.08);
}
#quienes .car-scene:hover .speed-line{ animation-duration: 1s; }
#quienes .car-scene:hover .exhaust{ animation-duration: 1.2s; }
/* Animaciones */
@keyframes driveIn{
from{ transform: translateX(40px) translateY(12px) scale(.96); opacity: 0; }
to{ transform: translateX(0) translateY(0) scale(1); opacity: 1; }
}
@keyframes idleBob{
0%,100%{ transform: translateY(0) rotate(-.15deg); }
50%{ transform: translateY(-4px) rotate(.15deg); }
}
@keyframes speedLine{
0%{ transform: translateX(0); opacity: 0; }
10%{ opacity: .85; }
100%{ transform: translateX(160%); opacity: 0; }
}
@keyframes exhaust{
0%{ transform: translateX(0) scale(.8); opacity: 0; filter: blur(0px); }
10%{ opacity: .6; }
100%{ transform: translateX(120px) scale(1.6); opacity: 0; filter: blur(2px); }
}
@keyframes accelerate{
0%{ transform: translateX(0) rotate(0deg) }
50%{ transform: translateX(6px) rotate(-.6deg) }
100%{ transform: translateX(0) rotate(0deg) }
}
/* Respeta usuarios con “reducir animaciones” */
@media (prefers-reduced-motion: reduce){
#quienes .car-scene, #quienes .car-img, #quienes .speed-line, #quienes .exhaust{
animation: none !important;
}
}
/* grilla responsiva: 3 -> 2 -> 1 */
#trabajos .grid-trabajos{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 22px);
}
/* tarjeta mínima sin epígrafes */
#trabajos .post{
margin:0;
background:#fff;
border:1px solid #eef0f3;
border-radius:16px;
overflow:hidden;
box-shadow: 0 10px 24px rgba(17,19,25,.08);
transition: transform .25s ease, box-shadow .25s ease;
}
#trabajos .post:hover{
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(17,19,25,.12);
}
/* imagen según contenido: SIN recorte */
#trabajos .post img{
display:block;
width:100%;
height:auto; /* ← respeta proporción original */
object-fit: contain;/* ← evita recortes si viene muy panorámica/vertical */
background:#fff; /* por si la imagen tiene transparencias */
}
@media (max-width: 991.98px){
#trabajos .grid-trabajos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px){
#trabajos .grid-trabajos{ grid-template-columns: 1fr; }
}
#site-footer.footer-modern{
background: linear-gradient(180deg, #0c111a, #0a0f17);
color:#cfd5e3;
padding: 56px 0 40px;
border-top: 1px solid rgba(255,255,255,.06);
}
#site-footer .brand-logo{ width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
#site-footer .brand-name{ font-weight:800; color:#fff; letter-spacing:.2px; }
#site-footer .brand-sub{ margin:0; color:#aeb7c7; }
#site-footer .badges .pill{
display:inline-flex; align-items:center; gap:.45rem;
background: rgba(255,255,255,.06);
color:#e6eaf2; border:1px solid rgba(255,255,255,.12);
padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.9rem; margin-right:.4rem; margin-bottom:.4rem;
}
#site-footer .foot-title{ color:#fff; font-weight:800; letter-spacing:.3px; margin-bottom:.6rem; }
#site-footer .foot-links{ list-style:none; padding:0; margin:0; }
#site-footer .foot-links li{ margin:.35rem 0; }
#site-footer .foot-links a{
color:#cfd5e3; text-decoration:none; font-weight:600; position:relative; padding-bottom:2px;
}
#site-footer .foot-links a:after{
content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
background: linear-gradient(90deg, #E50914, #ff6161);
transition: width .25s ease;
}
#site-footer .foot-links a:hover{ color:#fff; }
#site-footer .foot-links a:hover:after{ width:100%; }
#site-footer .contact{ list-style:none; padding:0; margin:0; }
#site-footer .contact li{ margin:.35rem 0; display:flex; align-items:center; gap:.5rem; }
#site-footer .contact i{ width:18px; text-align:center; color:#ff9a9a; }
#site-footer .contact a{ color:#e6eaf2; text-decoration:none; }
#site-footer .contact a:hover{ color:#fff; text-decoration:underline; }
#site-footer .btn-whatsapp{
background:#25D366; color:#0b1220; font-weight:800; border:none; border-radius:12px;
box-shadow: 0 10px 26px rgba(37,211,102,.28);
}
#site-footer .btn-whatsapp:hover{ filter: brightness(1.05); transform: translateY(-2px); }
#site-footer .sep{ border:0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); margin: 22px 0; }
#site-footer .bar small{ color:#aeb7c7; }
#site-footer .to-top{
color:#e6eaf2; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; gap:.45rem;
padding:.35rem .65rem; border-radius:10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
#site-footer .to-top:hover{ color:#fff; background: rgba(255,255,255,.1); }
@media (max-width: 575.98px){
#site-footer .btn-whatsapp{ font-size:.95rem; }
}
tucasasegura.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swapassets/css/styles.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css:root {
--primary: #1a365d;
--secondary: #eac44c;
--accent: #2d7d9a;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--dark);
overflow-x: hidden;
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.display-5 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.section {
padding: 5rem 0;
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.3rem);
font-weight: 800;
margin-bottom: 1rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 60px;
height: 4px;
background: var(--secondary);
border-radius: 2px;
}
.section-sub {
font-size: 1.1rem;
color: var(--gray);
margin-bottom: 2rem;
max-width: 600px;
}
/* Navbar */
.navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.8rem 0;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-size: 1.7rem;
font-weight: 900;
letter-spacing: 0.5px;
}
.navbar-brand span {
color: var(--secondary);
}
.nav-link {
font-weight: 500;
margin: 0 0.4rem;
position: relative;
transition: var(--transition);
font-size: 0.95rem;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--secondary);
transition: var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.btn-accent {
background: linear-gradient(135deg, var(--secondary) 0%, #f5b631 100%);
border: none;
color: var(--primary);
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 10px;
transition: var(--transition);
box-shadow: var(--shadow);
font-size: 0.95rem;
}
.btn-accent:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
color: var(--primary);
}
.btn-outline-dark {
border: 2px solid var(--dark);
color: var(--dark);
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 10px;
transition: var(--transition);
font-size: 0.95rem;
}
.btn-outline-dark:hover {
background: var(--dark);
color: white;
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
}
.hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(26,54,93,0.03)"/></svg>');
background-size: cover;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-bullets {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.bullet {
display: flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 0.6rem 1.2rem;
border-radius: 8px;
box-shadow: var(--shadow);
font-size: 0.9rem;
font-weight: 500;
}
.bullet i {
color: var(--secondary);
font-size: 0.9rem;
}
/* Card UI */
.card-ui {
background: white;
border-radius: 14px;
box-shadow: var(--shadow);
transition: var(--transition);
overflow: hidden;
border: none;
}
.card-ui:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Badges */
.badge-soft {
display: inline-block;
background: rgba(234, 196, 76, 0.15);
color: var(--primary);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
}
/* Models Grid - MANTENIENDO LA FUNCIONALIDAD ORIGINAL */
.models-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem}
/* FAQ */
.faq .item {
margin-bottom: 1rem;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.faq .q {
padding: 1.25rem 1.5rem;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
font-size: 1rem;
}
.faq .q:hover {
background: #f8f9fa;
}
.faq .q::after {
content: '+';
font-size: 1.3rem;
transition: var(--transition);
}
.faq .item.active .q::after {
content: '-';
}
.faq .a {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: var(--transition);
background: #f8f9fa;
font-size: 0.95rem;
}
.faq .item.active .a {
padding: 1.25rem 1.5rem;
max-height: 300px;
}
/* Contact Form */
.form-control {
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #e0e0e0;
transition: var(--transition);
font-size: 0.95rem;
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 0.2rem rgba(45, 125, 154, 0.2);
}
/* WhatsApp Float */
.wa-float {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: #25D366;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
z-index: 1000;
transition: var(--transition);
animation: pulse 2s infinite;
text-decoration: none;
}
.wa-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Footer */
footer {
background: var(--primary);
color: white;
padding: 2.5rem 0;
font-size: 0.95rem;
}
.brand {
font-weight: 700;
color: var(--secondary);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
/* ...cortado... */
.navbar .navbar-brand .brand-logo{
height: 56px; /* ajustá a tu gusto (40–56px) */
width: auto;
display: block;
}
/* Evita saltos de layout si la imagen tarda */
.navbar .navbar-brand{
line-height: 1;
}
/* Si tu navbar se achica en mobile */
@media (max-width: 576px){
.navbar .navbar-brand .brand-logo{ height: 38px; }
}
/* Seteá acá tu imagen de fondo */
.hero-full{
--hero-img: url('img/hero1.png'); /* cambiá la ruta si querés */
position: relative;
min-height: clamp(520px, 88vh, 900px);
background-image: var(--hero-img);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
padding: 0; /* ocupa toda la altura; no necesita padding de .section */
isolation: isolate;
}
/* Oscurece un toque para mejorar contraste del texto */
.hero-full .hero-overlay{
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
z-index: 0;
}
.hero-full .container{ position: relative; z-index: 1; }
.hero-center{
max-width: 900px;
margin-inline: auto;
padding: clamp(16px, 3vw, 32px);
}
/* Tipos y colores sobre imagen */
.hero-full h1{ color: #fff; -webkit-text-fill-color: initial; background: none; }
.hero-full p{ color: rgba(255,255,255,.9); }
/* Bullets del hero (reusa tu estilo, pero con fondo translúcido) */
.hero-full .hero-bullets{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-full .bullet{
background: rgba(255,255,255,.12);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
}
.hero-full .bullet i{ color: #eac44c; }
/* Responsive fino */
@media (max-width: 768px){
.hero-full{ min-height: 78vh; }
.hero-full h1{ font-size: clamp(2rem, 7vw, 2.6rem); }
}
@media (max-width: 576px){
.hero-full{ min-height: 70vh; }
.hero-full .bullet{ font-size: .9rem; }
}
/* Si tu navbar es sticky, agregamos un “respiro” arriba en mobile/desktop */
.navbar.sticky-top + .hero-full{ margin-top: -1px; } /* evita gap fino del sticky */
#quienes .fx-video{
display:block;
pointer-events:none; /* que no se pueda clickear / UI */
user-select:none;
}
/* Por si algún navegador intenta mostrar controles nativos ocultos */
#quienes .fx-video::-webkit-media-controls { display:none !important; }
/* ====== Ajustes visuales ======
Mostrar "según contenido" (sin recortar) y con altura controlada.
Podés ajustar variables globales acá.
*/
:root {
--galeria-fit: contain; /* contain = sin recorte */
--galeria-h: clamp(260px, 48vh, 520px); /* altura responsiva, evita gigantismo */
--galeria-bg: #fff; /* color de fondo detrás de la imagen */
}
#galeria .carousel { border-radius: .5rem; overflow: hidden; }
#galeria .carousel-item { background: var(--galeria-bg); }
#galeria .carousel-item img {
width: 100%;
height: var(--galeria-h);
max-height: var(--galeria-h);
object-fit: var(--galeria-fit);
object-position: center;
display: block;
margin: 0 auto;
user-select: none;
-webkit-user-drag: none;
}
/* Mobile: un poco menos alto */
@media (max-width: 576px) {
:root { --galeria-h: clamp(220px, 40vh, 420px); }
}
/* ====== Controles del carrusel (más grandes y visibles) ====== */
#galeria .carousel-control-prev,
#galeria .carousel-control-next {
width: 68px; /* área de click amplia */
opacity: 1; /* siempre visibles */
}
#galeria .carousel-control-prev-icon,
#galeria .carousel-control-next-icon {
width: 2.25rem;
height: 2.25rem;
transform: scale(1.15); /* flecha más grande */
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
padding: .9rem; /* genera el "píldora" circular */
background-color: rgba(0,0,0,.55); /* contraste sobre fotos claras */
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#galeria .carousel-control-prev:hover .carousel-control-prev-icon,
#galeria .carousel-control-next:hover .carousel-control-next-icon {
background-color: rgba(0,0,0,.75);
}
#galeria .carousel-control-prev:focus,
#galeria .carousel-control-next:focus {
outline: none;
}
@media (max-width: 576px) {
#galeria .carousel-control-prev,
#galeria .carousel-control-next { width: 56px; }
#galeria .carousel-control-prev-icon,
#galeria .carousel-control-next-icon {
width: 2rem; height: 2rem; padding: .7rem;
}
}
<style>
/* ====== Controles del carrusel (más grandes y visibles) ====== */
#galeria .carousel-control-prev,
#galeria .carousel-control-next {
width: 68px;
opacity: 1;
}
#galeria .carousel-control-prev-icon,
#galeria .carousel-control-next-icon {
width: 2.25rem;
height: 2.25rem;
transform: scale(1.15);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
padding: .9rem;
background-color: rgba(0,0,0,.55);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#galeria .carousel-control-prev:hover .carousel-control-prev-icon,
#galeria .carousel-control-next:hover .carousel-control-next-icon {
background-color: rgba(0,0,0,.75);
}
@media (max-width: 576px) {
#galeria .carousel-control-prev,
#galeria .carousel-control-next { width: 56px; }
#galeria .carousel-control-prev-icon,
#galeria .carousel-control-next-icon {
width: 2rem; height: 2rem; padding: .7rem;
}
}
#faqs .fx-acc { max-width: 900px; margin-inline: auto; }
#faqs .fx-acc-item {
border-bottom: 1px solid var(--fx-divider, rgba(0,0,0,.1));
background: transparent;
margin: 0;
padding: 0;
}
/* separador extra de aire entre items */
#faqs .fx-acc-item + .fx-acc-item { margin-top: .25rem; }
/* summary */
#faqs .fx-acc-q {
list-style: none;
cursor: pointer;
display: flex; align-items: center; gap: .75rem;
padding: .9rem 0;
font-weight: 700;
color: inherit; background: transparent;
}
#faqs .fx-acc-q::-webkit-details-marker { display: none; }
/* chevron minimal */
#faqs .fx-chev {
margin-left: auto;
width: 18px; height: 18px; position: relative; flex: 0 0 18px;
transform: rotate(0deg); transition: transform .2s ease;
}
#faqs .fx-chev::before, #faqs .fx-chev::after {
content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px;
border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* línea/acento al hover y foco */
#faqs .fx-acc-q:hover { color: inherit; }
#faqs .fx-acc-q:focus-visible { outline: 2px solid var(--fx-accent, currentColor); outline-offset: 2px; border-radius: 6px; }
/* respuesta: SIN fondo, solo tipografía */
#faqs .fx-acc-a {
padding: 0 0 1rem 0;
color: inherit;
background: transparent;
font-size: 1rem; line-height: 1.65;
animation: fx-reveal .18s ease;
}
/* estado abierto: rotación del chevron */
#faqs .fx-acc-item[open] .fx-chev { transform: rotate(180deg); }
/* modo oscuro: seguimos transparentes, solo aclaramos el divider */
@media (prefers-color-scheme: dark){
#faqs .fx-acc-item { border-bottom-color: rgba(255,255,255,.15); }
}
@keyframes fx-reveal { from { opacity: 0; translate: 0 -2px; } to { opacity: 1; translate: 0 0; } }
#contacto .card-ui { border-radius: 16px; }
.contact-video-wrap{
position: relative;
width: 100%;
/* Relación 16:10 como tenías; podés cambiar a 16/9 si preferís */
aspect-ratio: 16 / 10;
background: #000;
}
.contact-video{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; /* llena sin franjas */
}
@media (max-width: 991.98px){
.contact-video-wrap{ aspect-ratio: 16 / 9; } /* un toque más panorámico en mobile */
}
.site-footer{
background: radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,.06), transparent),
linear-gradient(180deg, #0e1726 0%, #0b1220 100%);
color:#e8eef5;
border-top:1px solid rgba(255,255,255,.08);
}
.site-footer .card{background:rgba(255,255,255,.03); border-radius: 20px;}
.footer-logo{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;font-weight:800;
background:linear-gradient(135deg,#58a6ff, #6ee7f9);
color:#0b1220;
}
.footer-body a{color:#e8eef5;}
.footer-list li{margin:.35rem 0;}
.footer-list a{opacity:.9; text-decoration:none;}
.footer-list a:hover{opacity:1; text-decoration:underline;}
.footer-social{
width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,255,255,.08);
}
.footer-social:hover{background:rgba(255,255,255,.16);}
.footer-legal{
border-top:1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.15);
}
/* Mejoras responsivas */
@media (max-width: 575.98px){
.footer-cta h3{font-size:1.25rem}
.footer-cta .btn{font-size:1rem}
}
subli-market.com
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;600;700&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css/* ========= 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:f
/* ...cortado... */
/* 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;
}
}
clusterhr360.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.csshttps://unpkg.com/[email protected]/dist/aos.css:root {
--primary: #3f37c9;
--primary-dark: #2a27a8;
--primary-light: #6c63ff;
--secondary: #f8f9fa;
--accent: #4cc9f0;
--accent-dark: #2bb4d9;
--dark: #1a1a1a;
--dark-light: #2d2d2d;
--light: #ffffff;
--gray: #6c757d;
--gray-light: #f5f7fb;
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
--gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 15px 40px rgba(63, 55, 201, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--light);
color: var(--dark);
overflow-x: hidden;
line-height: 1.6;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--gray-light);
}
::-webkit-scrollbar-thumb {
background: var(--gradient-primary);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 18px 0;
transition: all 0.4s ease;
}
.navbar.scrolled {
padding: 12px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.navbar-brand {
font-weight: 800;
color: var(--primary) !important;
font-size: 1.8rem;
display: flex;
align-items: center;
}
.navbar-brand span {
color: var(--accent);
font-weight: 900;
}
.nav-link {
color: var(--dark) !important;
font-weight: 500;
margin: 0 8px;
position: relative;
transition: all 0.3s ease;
padding: 8px 12px !important;
border-radius: 6px;
}
.nav-link:hover {
color: var(--primary) !important;
background: rgba(63, 55, 201, 0.05);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
background: var(--gradient-accent);
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: width 0.3s ease;
border-radius: 3px;
}
.nav-link:hover::after {
width: 70%;
}
.nav-link.active {
color: var(--primary) !important;
font-weight: 600;
}
.nav-link.active::after {
width: 70%;
}
.navbar-toggler {
border: none;
padding: 0.5rem;
box-shadow: none !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(63, 55, 201, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Hero Section (sin overlay celeste) */
#hero {
height: 100vh;
min-height: 700px;
background: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=2070&auto=format&fit=crop')
center center/cover no-repeat; /* ← solo la foto */
color: var(--light);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* (opcional) eliminar la ola inferior */
#hero::before {
content: none; /* quita el overlay ondulado */
}
.hero-content {
max-width: 700px;
z-index: 1;
}
.hero-title {
font-size: 3.8rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 2.5rem;
opacity: 0.95;
}
.hero-btns .btn {
margin-right: 15px;
margin-bottom: 15px;
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hero-img {
position: relative;
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}
.hero-img img {
border-radius: 20px;
border: 3px solid rgba(255,255,255,0.15);
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.particles-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
/* Secciones */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-size: 2.8rem;
font-weight: 800;
color: var(--primary);
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
width: 50%;
height: 5px;
background: var(--gradient-accent);
bottom: -12px;
left: 0;
border-radius: 3px;
}
.section-title.center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
font-size: 1.25rem;
color: var(--gray);
margin-bottom: 3rem;
max-width: 700px;
}
.section-subtitle.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Servicios */
#servicios {
background-color: var(--light);
}
.service-card {
background: var(--light);
border-radius: 18px;
padding: 35px 30px;
box-shadow: var(--shadow);
transition: all 0.4s ease;
height: 100%;
border: 1px solid rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
z-index: 1;
}
.service-card::before {
content: '';
position: absolute;
width: 100%;
height: 5px;
background: var(--gradient-primary);
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: -1;
}
.service-card:hover {
transform: translateY(-12px);
box-shadow: var(--shadow-hover);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
color: var(--light);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 25px;
box-shadow: 0 10px 20px rgba(63,55,201,0.2);
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-title {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 15px;
color: var(--primary);
}
.service-text {
color: var(--gray);
margin-bottom: 0;
}
/* Método */
#metodo {
background-color: var(--gray-light);
position: relative;
overflow: hidden;
}
#metodo::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: var(--gradient-accent);
opacity: 0.05;
border-radius: 50%;
top: -150px;
right
/* ...cortado... */
.logo-brand{
height: 28px; /* ajustá si lo querés más grande/chico */
width: auto;
display: block;
object-fit: contain;
}
@media (max-width: 576px){
.logo-brand{ height: 34px; }
}
/* (Opcional) si necesitás que el texto no se deforme ni salte */
.navbar-brand{ white-space: nowrap; }
/* Tamaño base del brand (Bootstrap lo sube, lo normalizamos) */
.navbar-brand { font-size: 1rem; }
/* Texto del brand más chico y prolijo */
.brand-text{
font-size: 0.95rem; /* bajalo/subilo a gusto */
line-height: 1;
letter-spacing: .1px;
display: inline-block;
}
.brand-text strong{ font-weight: 700; } /* o 600 si lo querés menos pesado */
@media (max-width: 576px){
.brand-text{ font-size: 0.9rem; }
.logo-brand{ height: 22px; }
}
/* ---------- Título con subrayado ---------- */
#proposito .title-underline{position:relative}
#proposito .title-underline::after{
content:"";position:absolute;left:0;bottom:-10px;width:84px;height:4px;border-radius:4px;
background:var(--primary,#5b57ff)
}
/* ---------- Imagen SIN recorte ---------- */
#proposito .media-wrap{
border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.06);
aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
}
#proposito .media-wrap img{width:100%;height:100%;object-fit:contain;background:#fff}
/* ---------- Grilla de beneficios ---------- */
#proposito .beneficios-grid{
display:grid; gap:18px; margin-top:26px;
grid-template-columns:repeat(3,1fr);
}
@media (max-width:1199.98px){ #proposito .beneficios-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:575.98px){ #proposito .beneficios-grid{grid-template-columns:1fr} }
/* ---------- CARD de beneficio ---------- */
#proposito .feature-card{
position:relative; border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:14px;
padding:16px 18px; box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
display:flex; gap:12px; align-items:flex-start; min-height:118px;
}
#proposito .feature-card:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(0,0,0,.08);
border-color:rgba(0,0,0,.12);
}
/* Punto/ícono sin depender de librerías */
#proposito .feature-card::before{
content:""; flex:0 0 12px; height:12px; margin-top:6px; border-radius:50%;
background:linear-gradient(135deg,var(--primary,#5b57ff), #7a7aff);
box-shadow:0 0 0 4px rgba(91,87,255,.12);
}
#proposito .feature-card h6{margin:0 0 6px; font-weight:700}
#proposito .feature-card p{margin:0; color:#6c757d}
/* ---------- Callout lanzamiento ---------- */
#proposito .callout{
border:0; background:#eef3ff; color:#1b2b6b;
box-shadow:0 1px 3px rgba(0,0,0,.06); border-radius:12px;
}
#proposito .lead{font-size:1.08rem; line-height:1.65}
@media (max-width:991.98px){ #proposito .lead{font-size:1.02rem} }
/* === Media arriba de cada card (con fallback elegante) === */
#servicios .service-card{ overflow: visible; }
#servicios .service-media{
width: 100%;
aspect-ratio: 16/9;
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
position: relative;
}
#servicios .service-media img{
width: 100%; height: 100%;
object-fit: cover; display: block; background:#fff;
transition: transform .5s ease;
}
#servicios .service-card:hover .service-media img{ transform: scale(1.03); }
/* ocultamos el ícono redondo anterior */
#servicios .service-icon{ display: none !important; }
/* Contenedor del preview */
.preview-shell{
background:#fff; overflow:hidden;
}
.preview-chrome{
height:44px; display:flex; align-items:center; gap:10px;
padding:0 12px; background:linear-gradient(#f6f7f9,#eceff3);
border-bottom:1px solid #e3e6ea;
}
.preview-chrome .dot{
width:10px; height:10px; border-radius:50%; display:inline-block;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.preview-chrome .dot.red{background:#ff5f57;}
.preview-chrome .dot.yellow{background:#ffbd2e;}
.preview-chrome .dot.green{background:#28c840;}
.preview-chrome .address{
flex:1; height:28px; line-height:28px; padding:0 10px;
border-radius:8px; background:#f1f3f5; font-size:12px; color:#667085;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.preview-chrome .open-btn{
font-size:12px; padding:.35rem .7rem; border-radius:8px;
background:#eef2ff; color:#4f46e5; text-decoration:none; border:1px solid #e0e7ff;
}
.preview-viewport{
position:relative; overflow:hidden; background:#fff;
/* Alto base del visor */
height:min(65vh, 560px);
}
/* El truco: escalamos todo el wrapper, no el iframe suelto */
.scaled-wrapper{
transform-origin: top left;
/* El scale se setea por JS para que quepa sin scroll */
}
.scaled-iframe{
display:block; pointer-events:auto;
}
/* Bordes redondeados limpios */
.preview-shell, .preview-viewport{ border-radius: 12px; }
.preview-shell{ border:1px solid #e9ecef; }
/* Ajustes finos en pantallas muy chicas */
@media (max-width: 575.98px){
.preview-viewport{ height: 420px; }
}