Preview de mixed.css
/* MIXED CSS PACK */
/* Template: frioexpressservice.com.ar/index.html */
/* Template mtime: 2025-10-13 17:51:56 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
: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; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
#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; }
/* ===== INLINE <style> BLOCK #3 ===== */
#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; } }
/* ===== INLINE <style> BLOCK #4 ===== */
#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; } }
/* ===== INLINE <style> BLOCK #5 ===== */
#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; }
}