Preview de mixed.css
/* MIXED CSS PACK */
/* Template: simacordoba.com/index.html */
/* Template mtime: 2025-10-17 13:40:09 */
/* 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;500;600;700&display=swap */
/* external link (no embedded): https://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
/* ====== Nueva paleta de colores ====== */
--brand: #2563eb; /* Azul más vibrante */
--brand-dark: #1e40af; /* Azul oscuro */
--brand-light: #3b82f6; /* Azul claro */
--accent: #10b981; /* Verde esmeralda */
--accent-dark: #059669; /* Verde oscuro */
--dark: #1f2937; /* Gris muy oscuro */
--dark-light: #374151; /* Gris oscuro */
--light: #f9fafb; /* Gris muy claro */
--paper: #f3f4f6; /* Gris suave de fondo */
--text: #1f2937; /* Color de texto principal */
--text-light: #6b7280; /* Texto secundario */
/* ====== Efectos y bordes ====== */
--radius-xl: 1.25rem;
--radius-lg: 1rem;
--radius-md: 0.75rem;
--shadow-soft: 0 10px 30px rgba(0,0,0,.08);
--shadow-medium: 0 20px 40px rgba(0,0,0,.12);
--shadow-large: 0 25px 50px rgba(0,0,0,.15);
/* ====== Ticker ====== */
--ticker-h: clamp(220px, 48vh, 560px); /* altura fija; el ancho lo define cada imagen */
}
html{ scroll-behavior:smooth; }
body{
font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
color: var(--text);
background:#fff;
line-height: 1.6;
}
.section{
padding: 100px 0;
position: relative;
}
.section-title{
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title:after {
content: '';
position: absolute;
left: 0;
bottom: -10px;
width: 50px;
height: 4px;
background: var(--brand);
border-radius: 2px;
}
.text-center .section-title:after {
left: 50%;
transform: translateX(-50%);
}
.small-muted{
color: var(--text-light);
font-size: 1.1rem;
}
/* ========== Navbar mejorada ========== */
.navbar{
--bs-navbar-color: var(--dark);
--bs-navbar-hover-color: var(--brand);
--bs-navbar-active-color: var(--brand);
--bs-navbar-brand-color: var(--dark);
box-shadow: var(--shadow-soft);
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
padding: 15px 0;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 800;
font-size: 1.5rem;
}
.navbar-brand span {
color: var(--brand);
}
.nav-link {
font-weight: 500;
position: relative;
padding: 0.5rem 1rem !important;
transition: all 0.3s ease;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background: var(--brand);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover:after,
.nav-link.active:after {
width: 70%;
}
.navbar .btn-wsp{
background: linear-gradient(135deg, #25d366, #128C7E);
border: none;
color: #fff;
font-weight: 600;
border-radius: 50px;
padding: 0.5rem 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}
.navbar .btn-wsp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.navbar-toggler { border: none; padding: 0.25rem 0.5rem; }
.navbar-toggler:focus { box-shadow: none; }
/* ========== Hero mejorado ========== */
.hero{
position: relative;
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%),
url('img/pattern.svg') repeat;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero:before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0) 70%);
z-index: 0;
}
.hero:after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0) 70%);
z-index: 0;
}
.hero .wrap{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 48px;
position: relative;
z-index: 2;
}
.hero h1{
font-size: clamp(32px, 5.5vw, 52px);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.hero p.lead{
color: var(--text-light);
font-size: 1.2rem;
margin-bottom: 2rem;
}
.badge-kpi{
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 50px;
padding: 0.6rem 1.2rem;
font-size: 0.95rem;
font-weight: 500;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
}
.badge-kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.hero-visual{
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-large);
background: var(--dark);
min-height: 380px;
transform-style: preserve-3d;
}
.hero-visual img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
transition: all 0.5s ease;
}
.hero-visual:hover img { transform: scale(1.03); opacity: 1; }
.hero-visual .glass{
position: absolute;
inset: auto 24px 24px auto;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: var(--radius-md);
padding: 12px 18px;
font-weight: 600;
color: var(--dark);
box-shadow: var(--shadow-soft);
z-index: 3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 8px 18px rgba(16, 185, 129, 0.3); }
50% { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5); }
100% { box-shadow: 0 8px 18px rgba(16, 185, 129, 0.3); }
}
.btn-brand{
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
border: none;
color: #fff;
font-weight: 600;
border-radius: 50px;
padding: 0.8rem 2rem;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.btn-brand:hover{
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
color: #fff;
}
.btn-outline-brand {
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 600;
border-radius: 50px;
padding: 0.8rem 2rem;
transition: all 0.3s ease;
background: transparent;
}
.btn-outline-brand:hover {
background: var(--brand);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.2);
}
/* ========== Cards y helpers mejorados ========== */
.card-soft{
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
overflow: hidden;
background: #fff;
height: 100%;
}
.card-soft:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.icon-pill{
width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md); background: rgba(37, 99, 235, 0.1); color: var(--brand);
margin-right: 1rem; transition: all 0.3s ease;
}
.card-soft:hover .icon-pill { background: var(--brand); color: #fff; transform: rotate(5deg); }
.list-check li{ margin: 0.5rem 0; display: flex; align-items: flex-start; }
.list-check i{ color: var(--accent); margin-right: 0.75rem; font-size: 1.2rem; flex-shrink: 0; margin-top: 0.2rem; }
.bg-paper{ background: var(--paper); position: relative; }
.bg-paper:before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 300px;
background: linear-gradient(to bottom, var(--brand-light), transparent);
opacity: 0.03; pointer-events: none;
}
/* ========== Ticker / Trabajos (ajustado al contenido) ========== */
.ticker-wrap{ position: relative; margin: 2rem 0; }
.ticker-track{
display: flex;
align-items: center; /* centra verticalmente distintas proporciones */
gap: 20px;
overflow-x: auto;
padding: 8px 4px 16px;
scroll-snap-type: x mandatory;
scroll-padding: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.ticker-track::-webkit-scrollbar{ display: none; }
.tile{
flex: 0 0 auto;
height: var(--ticker-h); /* ALTURA del carrusel */
width: auto; /* el ancho lo define la imagen */
border-radius: var(--radius-xl);
background: #fff;
display: flex; align-items: center; justify-content: center;
padding: 0;
box-shadow: var(--shadow-soft);
scroll-snap-align: center;
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.tile img{
display: block;
height: 100%;
width: auto; /* mantiene proporción natural */
object-fit: contain;
object-position: center;
border-radius: inherit;
transition: transform .35s ease;
}
.tile:hover img{ transform: none; }
.tile:after{ content: none; } /* sin overlay */
.ticker-ctrl{
position: absolute;
inset: calc(50% - 22px) -12px auto -12px;
display: flex; justify-content: space-between; align-items: center;
pointer-events: none;
}
.ticker-ctrl .btn{
pointer-events: all;
border-radius: 50%;
box-shadow: var(--shadow-medium);
border: none;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--dark);
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.ticker-ctrl .btn:hover { background: var(--brand); color: #fff; transform: scale(1.08); }
/* ========== FAQ mejorada ========== */
.faq .accordion-item { border: 1px solid #e5e7eb; border-radius: var(--radius-md); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-soft); }
.faq .accordion-button { font-weight: 600; padding: 1.25rem; border: none; background: #fff; box-shadow: none; }
.faq .accordion-button:not(.collapsed) { color: var(--brand); background: rgba(37, 99, 235, 0.05); box-shadow: none; }
.faq .accordion-button:after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563eb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-90deg); transition: all 0.3s ease;
}
.faq .accordion-button:not(.collapsed):after { transform: rotate(0deg); }
.faq .accordion-body { padding: 1.25rem; background: #fff; }
/* ========== Contacto mejorado ========== */
.contact-card{ background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: 2.5rem; height: 100%; transition: all 0.3s ease; }
.contact-card:hover { box-shadow: var(--shadow-medium); }
.form-control, .form-select{ border-radius: var(--radius-md); border: 1px solid #e5e7eb; padding: 0.75rem 1rem; transition: all 0.3s ease; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
/* ========== Footer (mejorado + mapa) ========== */
footer{
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
color: #e5e7eb;
position: relative;
overflow: hidden;
}
footer:before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0) 70%);
}
.footer-brand{ color: #fff; font-weight: 800; font-size: 1.5rem; margin-bottom: 1rem; display: block; }
.footer-brand span { color: var(--brand-light); }
.footer-note{ color: #9ca3af; line-height: 1.6; }
.link-light { transition: all 0.3s ease; display: inline-flex; align-items: center; }
.link-light:hover { color: #fff !important; transform: translateX(5px); }
.link-light i { margin-right: 0.5rem; }
.footer-map{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.footer-map .map-embed{ position: relative; height: 0; padding-bottom: 56%; /* 16:9 */ }
.footer-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(8%) contrast(105%); }
@media (min-width: 992px){ .footer-map .map-embed{ padding-bottom: 45%; } }
@media (max-width: 767.98px){ footer .col-6.col-lg-5{ flex: 0 0 100%; max-width: 100%; } }
/* ========== Flotante WhatsApp / IG / FB ========== */
.wsp-float{
position: fixed; right: 24px; bottom: 24px; z-index: 1030;
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, #25d366, #128C7E); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
transition: all 0.3s ease; animation: float 3s ease-in-out infinite;
}
.wsp-float:hover { transform: scale(1.1); box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6); animation: none; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
.ig-float, .fb-float{
position: fixed; right: 24px; z-index: 1030;
width: 56px; height: 56px; border-radius: 50%;
color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 28px rgba(0,0,0,.25);
transition: transform .3s ease, box-shadow .3s ease;
animation: float 3s ease-in-out infinite;
}
.ig-float{ bottom: 96px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fb-float{ bottom: 168px; background: linear-gradient(135deg, #1877F2, #0E5AAB); }
.ig-float:hover, .fb-float:hover{ transform: scale(1.1); box-shadow: 0 15px 35px rgba(0,0,0,.35); animation: none; }
/* ========== Media Queries ========== */
@media (max-width: 992px){
.hero .wrap{ grid-template-columns: 1fr; }
.ticker-ctrl{ display: none; }
.section { padding: 70px 0; }
.hero { min-height: auto; padding: 100px 0; }
.hero-visual { min-height: 300px; order: -1; }
}
@media (max-width: 768px) {
.navbar-brand { font-size: 1.3rem; }
.hero h1 { font-size: 2rem; }
.hero p.lead { font-size: 1.1rem; }
.section-title { font-size: 1.8rem; }
.contact-card { padding: 1.5rem; }
}
.navbar .brand-mark{
width: 28px; height: 28px;
object-fit: contain; display: block;
}
@media (max-width: 576px){
.navbar .brand-mark{ width: 22px; height: 22px; }
}
.brand-accent{ font-weight: 700; }
.footer-brand{
display:flex; align-items:center; gap:.5rem;
font-weight:700;
}
.brand-mark--footer{
width:24px; height:24px; object-fit:contain; display:block;
}
/* Si tu footer es oscuro y el ícono es oscuro, podés aclararlo: */
/* .brand-mark--footer{ filter: brightness(0) invert(1); } */