Preview de mixed.css
/* MIXED CSS PACK */
/* Template: gestoriamc.com.ar/index.html */
/* Template mtime: 2025-10-09 18:51:31 */
/* 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.0/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ================== 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: transform 0.5s ease;
}
.service-card:hover{
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(17,19,25,.12);
}
.service-card:hover:before {
transform: scaleX(1);
}
.service-card h5{
font-weight: 700;
margin-bottom: .35rem;
}
.service-icon{
width: 54px;
height: 54px;
border-radius: 14px;
display: grid;
place-items: center;
margin-bottom: .8rem;
background: linear-gradient(180deg, var(--primary-50), #fff0);
border: 1px solid #f0f0f3;
color: var(--primary);
box-shadow: inset 0 0 0 6px #fff;
font-size: 1.2rem;
transition: var(--transition);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(180deg, #fff, var(--primary-50));
}
/* ================== WHY ================== */
.why-item{
background: linear-gradient(180deg, #fff, #fafafa);
border: 1px solid #eef0f3;
border-radius: 16px;
padding: 32px 26px;
text-align: center;
height: 100%;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.why-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(217,35,35,.03), transparent);
opacity: 0;
transition: var(--transition);
}
.why-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(17,19,25,.1);
}
.why-item:hover:before {
opacity: 1;
}
.why-item i{
color: var(--primary);
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.why-item h5{
font-weight: 800;
position: relative;
z-index: 1;
}
.why-item p{
position: relative;
z-index: 1;
}
/* ================== TICKER ================== */
.ticker{
overflow: hidden;
position: relative;
border-radius: 16px;
}
.ticker:before, .ticker:after {
content: '';
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
}
.ticker:before {
left: 0;
background: linear-gradient(90deg, rgba(251,251,253,1) 0%, rgba(251,251,253,0) 100%);
}
.ticker:after {
right: 0;
background: linear-gradient(90deg, rgba(251,251,253,0) 0%, rgba(251,251,253,1) 100%);
}
.ticker .track{
display: flex;
gap: 16px;
align-items: center;
animation: scroll 26s linear infinite;
will-change: transform;
}
.ticker:hover .track{
animation-play-state: paused;
}
.ticker .item{
flex: 0 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid #eef0f3;
transition: var(--transition);
position: relative;
}
.ticker .item:hover {
transform: scale(1.03);
}
.ticker img{
width: 500px;
max-width: 65vw;
height: 420px;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.ticker .item:hover img{
transform: scale(1.08);
}
@keyframes scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
/* ================== FAQ ================== */
.accordion-item{
border: 1px solid #eef0f3 !important;
border-radius: 14px !important;
overflow: hidden;
box-shadow: var(--shadow-sm);
margin-bottom: 12px;
transition: var(--transition);
}
.accordion-item:hover {
box-shadow: 0 8px 25px rgba(17,19,25,.1);
}
.accordion-button{
font-weight: 700;
padding: 1.2rem 1.1rem;
transition: var(--transition);
}
.accordion-button:focus{
box-shadow: none;
}
.accordion-button:not(.collapsed){
background: #fff5f5;
color: var(--dark);
}
.accordion-body{
color: #2b3340;
line-height: 1.65;
}
/* ================== CONTACTO ================== */
.contact-card{
border-radius: 18px;
border: 1px solid #eef0f3;
background: #fff;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.contact-card:hover {
box-shadow: 0 20px 50px rgba(17,19,25,.15);
}
.form-control{
border-radius: 12px;
border: 1px solid #e7e9ee;
padding: .8rem .95rem;
transition: var(--transition);
}
.form-control:focus{
border-color: #ff9a9a;
box-shadow: 0 0 0 .25rem rgba(217,35,35,.08);
}
/* ================== FOOTER ================== */
footer{
background: linear-gradient(180deg, #0b0f17, #0a0d14);
color: #cfd5e3;
padding: 52px 0 42px;
margin-top: 30px;
border-top: 1px solid rgba(255,255,255,.06);
position: relative;
}
footer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.footer-brand{
font-weight: 800;
color: #fff;
display: flex;
align-items: center;
gap: .6rem;
}
.footer-links a{
color: #cfd5e3;
text-decoration: none;
margin-right: 16px;
font-weight: 600;
transition: var(--transition);
position: relative;
}
.footer-links a:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: var(--primary);
transition: var(--transition);
}
.footer-links a:hover{
color: #fff;
}
.footer-links a:hover:after {
width: 100%;
}
/* ================== WHATSAPP FLOAT ================== */
.whatsapp-float{
position: fixed;
bottom: 22px;
right: 22px;
width: 62px;
height: 62px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: grid;
place-items: center;
box-shadow: 0 18px 40px rgba(37,211,102,.35), inset 0 0 0 8px rgba(255,255,255,.18);
z-index: 1000;
text-decoration: none;
transition: var(--transition);
animation: pulse-green 2s infinite;
}
.whatsapp-float:hover{
transform: translateY(-5px) scale(1.05);
box-shadow: 0 22px 50px rgba(37,211,102,.4), inset 0 0 0 8px rgba(255,255,255,.2);
}
/* ================== UTIL ================== */
.mark-pill{
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .35rem .7rem;
border-radius: 999px;
font-weight: 700;
background: #fff5f5;
color: #a61a1a;
border: 1px dashed #ffc4c4;
transition: var(--transition);
}
.mark-pill:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(217,35,35,.1);
}
.divider-x{
height: 1px;
background: linear-gradient(90deg, transparent, #eee, transparent);
margin: 16px 0 26px;
}
.alert-danger {
border-radius: 14px;
border-left: 4px solid var(--primary);
animation: shake 0.5s ease-in-out;
}
/* ================== ANIMATIONS ================== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
box-shadow: 0 6px 14px rgba(217,35,35,.35);
}
50% {
box-shadow: 0 6px 20px rgba(217,35,35,.5);
}
100% {
box-shadow: 0 6px 14px rgba(217,35,35,.35);
}
}
@keyframes pulse-green {
0% {
box-shadow: 0 18px 40px rgba(37,211,102,.35), inset 0 0 0 8px rgba(255,255,255,.18);
}
50% {
box-shadow: 0 18px 45px rgba(37,211,102,.45), inset 0 0 0 8px rgba(255,255,255,.2);
}
100% {
box-shadow: 0 18px 40px rgba(37,211,102,.35), inset 0 0 0 8px rgba(255,255,255,.18);
}
}
@keyframes zoomInOut {
0% {
transform: scale(1.02);
}
100% {
transform: scale(1.05);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
.section {
padding: 60px 0;
}
.hero {
min-height: 80vh;
}
.hero-card {
padding: 1.8rem 1.2rem;
}
.ticker:before, .ticker:after {
width: 50px;
}
.service-card, .why-item {
padding: 20px 16px;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
: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; }
/* ===== INLINE <style> BLOCK #3 ===== */
/* 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); }
}
/* ===== INLINE <style> BLOCK #4 ===== */
#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;
}
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* 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; }
}
/* ===== INLINE <style> BLOCK #6 ===== */
#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; }
}