Preview de mixed.css
/* MIXED CSS PACK */
/* Template: brillanzaecolimpieza.com.ar/index.html */
/* Template mtime: 2025-10-29 22:05:29 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--primary: #109045;
--primary-dark: #0b6e35;
--secondary: #0a62c2;
--accent: #ff6b35;
--ink: #0f172a;
--muted: #64748b;
--soft: #f8fafc;
--card: #ffffff;
--radius: 20px;
--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
--shadow-lg: 0 20px 40px rgba(2, 6, 23, 0.12);
--gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
--gradient-dark: linear-gradient(135deg, var(--primary-dark), #0a4a8f);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary-dark);
--bs-btn-hover-border-color: var(--primary-dark);
--bs-btn-active-bg: var(--primary-dark);
--bs-btn-active-border-color: var(--primary-dark);
font-weight: 600;
padding: 12px 24px;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(16, 144, 69, 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(16, 144, 69, 0.35);
}
.btn-outline-primary {
--bs-btn-color: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
font-weight: 600;
padding: 12px 24px;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(16, 144, 69, 0.2);
}
.text-primary {
color: var(--primary) !important;
}
.bg-soft {
background: var(--soft);
}
.card-soft {
background: var(--card);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.card-soft:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.section {
padding: 100px 0;
}
.section-title {
font-size: clamp(32px, 4vw, 56px);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-subtitle {
color: var(--muted);
font-size: 18px;
max-width: 700px;
margin: 0 auto;
}
/* Navbar */
.navbar {
--bs-navbar-brand-color: var(--ink);
--bs-navbar-brand-hover-color: var(--ink);
--bs-navbar-color: var(--ink);
padding: 20px 0;
transition: all 0.3s ease;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 12px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.navbar-brand {
font-weight: 800;
font-size: 24px;
}
.navbar .nav-link {
font-weight: 500;
margin: 0 8px;
position: relative;
transition: color 0.3s ease;
}
.navbar .nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background: var(--gradient-primary);
transition: width 0.3s ease;
}
.navbar .nav-link:hover:after,
.navbar .nav-link.active:after {
width: 100%;
}
.navbar .badge-cta {
background: var(--gradient-primary);
border: none;
border-radius: 50px;
padding: 10px 20px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(10, 98, 194, 0.25);
}
.navbar .badge-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(10, 98, 194, 0.35);
}
/* Hero */
#inicio {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
#inicio .hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(rgba(10, 30, 60, 0.7), rgba(10, 30, 60, 0.8)), url('img/herod.png') center/cover no-repeat;
filter: brightness(0.8);
}
#inicio .hero-content {
position: relative;
z-index: 2;
color: #fff;
text-align: center;
padding: 48px 16px;
}
#inicio .hero-content h1 {
font-size: clamp(36px, 6vw, 72px);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 24px;
line-height: 1.1;
}
#inicio .hero-content p {
max-width: 820px;
margin: 0 auto 32px;
color: #e8eef5;
font-size: 20px;
}
#inicio .badges {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 32px;
}
#inicio .chip {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50px;
padding: 8px 16px;
font-size: 15px;
font-weight: 500;
backdrop-filter: blur(10px);
}
#inicio .btn-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* Quiénes somos */
.feature {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 16px;
}
.feature .dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gradient-primary);
margin-top: 6px;
flex: 0 0 16px;
box-shadow: 0 4px 8px rgba(16, 144, 69, 0.3);
}
/* Servicios */
.service-card {
height: 100%;
padding: 32px 24px;
text-align: center;
transition: all 0.3s ease;
border-radius: var(--radius);
position: relative;
overflow: hidden;
}
.service-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
}
.service-card .icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
box-shadow: 0 8px 20px rgba(16, 144, 69, 0.25);
}
.service-card h5 {
font-weight: 700;
margin-bottom: 12px;
}
/* Ticker/Galería */
#trabajos {
position: relative;
overflow: hidden;
}
#trabajos .frame {
position: relative;
margin: 0 auto;
max-width: 1200px;
}
#trabajos .viewport {
overflow: hidden;
padding: 20px 0;
}
#trabajos .track {
display: flex;
gap: 20px;
will-change: transform;
}
#trabajos .item {
flex: 0 0 auto;
width: 350px;
border-radius: 16px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: var(--shadow);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
#trabajos .item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
#trabajos .item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
#trabajos .item:hover img {
transform: scale(1.05);
}
#trabajos .ctrl {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: none;
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
width: 50px;
height: 50px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
#trabajos .ctrl:hover {
background: white;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-50%) scale(1.05);
}
#trabajos .prev {
left: 20px;
}
#trabajos .next {
right: 20px;
}
/* Modal galería */
.modal-gallery .modal-dialog {
max-width: min(95vw, 1000px);
}
.modal-gallery .modal-content {
border: none;
border-radius: 20px;
overflow: hidden;
background: #000;
}
.modal-gallery .modal-body {
padding: 0;
background: #000;
}
.modal-gallery .viewer {
position: relative;
}
.modal-gallery img {
width: 100%;
height: auto;
display: block;
max-height: 80vh;
object-fit: contain;
background: #000;
}
.modal-gallery .gctrl {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.6);
border: none;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
transition: all 0.3s ease;
}
.modal-gallery .gctrl:hover {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.modal-gallery .gprev {
left: 20px;
}
.modal-gallery .gnext {
right: 20px;
}
.modal-gallery .btn-close {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: all 0.3s ease;
}
.modal-gallery .btn-close:hover {
opacity: 1;
transform: scale(1.1);
}
/* FAQs */
#faqs .faq {
padding: 24px;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
transition: all 0.3s ease;
cursor: pointer;
}
#faqs .faq:hover {
box-shadow: var(--shadow);
transform: translateY(-3px);
}
#faqs .faq h6 {
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
#faqs .faq h6:before {
content: '•';
color: var(--primary);
font-size: 24px;
}
/* Contacto */
#contacto .card {
border-radius: 20px;
overflow: hidden;
border: none;
box-shadow: var(--shadow);
}
#contacto .card-body {
padding: 40px;
}
#contacto .form-control {
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
transition: all 0.3s ease;
}
#contacto .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(16, 144, 69, 0.15);
}
/* Footer */
footer {
background: linear-gradient(135deg, #0b1120, #1e293b);
color: #e9edf3;
padding: 60px 0 30px;
}
footer a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
footer a:hover {
color: var(--primary);
}
footer h5, footer h6 {
font-weight: 700;
margin-bottom: 20px;
}
footer ul li {
margin-bottom: 10px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
margin-top: 40px;
text-align: center;
}
/* WA flotante */
.wa-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
}
.wa-btn {
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
font-size: 24px;
transition: all 0.3s ease;
animation: pulse 2s infinite;
}
.wa-btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5);
}
@keyframes pulse {
0% {
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.7);
}
100% {
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}
}
/* Utilidades */
.eyebrow {
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 14px;
margin-bottom: 12px;
display: inline-block;
}
.badge-soft {
background: rgba(16, 144, 69, 0.12);
color: var(--primary);
border: 1px solid rgba(16, 144, 69, 0.28);
border-radius: 50px;
padding: 8px 14px;
font-weight: 500;
display: inline-block;
margin: 4px;
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
/* Animaciones */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 768px) {
.section {
padding: 70px 0;
}
.navbar .nav-link {
margin: 5px 0;
}
#inicio .btn-group {
flex-direction: column;
align-items: center;
}
#inicio .btn-group .btn {
width: 100%;
max-width: 280px;
}
#trabajos .ctrl {
display: none;
}
#contacto .card-body {
padding: 24px;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* ===== Phone-only navbar/overflow fix (no desktop impact) ===== */
@media (max-width: 576px){
/* Keep brand from pushing the hamburger off-screen */
.navbar-brand{
max-width: 68%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Make sure navbar container doesn't clip controls and adds a tiny gutter */
.navbar .container{
overflow: visible !important;
padding-left: 12px;
padding-right: 12px;
}
/* Gentle horizontal padding site-wide to avoid accidental 1-2px overflow */
.container{ padding-left: 16px; padding-right: 16px; }
}
/* Ensure the hamburger icon is always visible even if Bootstrap vars aren't loaded */
.navbar-light .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='rgba(0,0,0,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }
/* Safety rails: never allow horizontal scroll */
html, body{ max-width:100%; overflow-x:hidden; }
/* ===== INLINE <style> BLOCK #3 ===== */
/* ====== Ticker más grande (sin estirar imágenes) ====== */
#trabajos .frame{
/* Tamaño base de cada ítem (auto-responsive) */
--item-w: clamp(260px, 36vw, 560px);
--item-h: clamp(260px, 36vw, 560px);
}
#trabajos .viewport{
height: var(--item-h);
}
#trabajos .track{
display: flex;
gap: 16px; /* separa un poco las imágenes */
align-items: center;
}
#trabajos .item{
flex: 0 0 var(--item-w); /* ancho fijo por ítem */
height: var(--item-h); /* alto fijo por ítem */
display: flex;
align-items: center;
justify-content: center;
background: #fff; /* fondo blanco para evitar “marco” oscuro */
border-radius: 12px; /* opcional: esquinas suaves */
overflow: hidden;
}
#trabajos .item img{
width: 100%;
height: 100%;
object-fit: contain; /* NO recorta ni deforma */
}
/* En móviles: que ocupen casi todo el ancho */
@media (max-width: 576px){
#trabajos .frame{
--item-w: 92vw;
--item-h: 92vw; /* mantiene formato cuadrado 1:1 */
}
}
/* Botones un toque más grandes (opcional) */
#trabajos .ctrl{
font-size: 1.25rem;
width: 46px; height: 46px;
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* ===== Estilos de la sección FAQs ===== */
#faqs .faq-grid{display:grid; gap:18px}
@media (min-width:768px){ #faqs .faq-grid{grid-template-columns:1fr 1fr} }
#faqs details.faq{
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
background:#fff;
overflow:hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
#faqs details.faq[open]{border-color:rgba(0,0,0,.14); box-shadow:0 8px 24px rgba(0,0,0,.06)}
#faqs summary{
list-style:none; cursor:pointer;
padding:16px 18px;
display:flex; align-items:center; gap:12px;
color:#0b0b0b; /* PREGUNTA: negro */
font-weight:700; /* negrita */
user-select:none;
}
#faqs summary::-webkit-details-marker{display:none}
/* Flecha */
#faqs .chev{
flex:0 0 22px; height:22px; display:grid; place-items:center;
border:1px solid rgba(0,0,0,.14); border-radius:50%;
font-size:16px; line-height:1; transform:rotate(0deg);
transition:transform .25s ease, background .25s ease;
}
#faqs details[open] .chev{transform:rotate(90deg); background:rgba(16,185,129,.10)}
/* RESPUESTA: gris plomo + circulito verde */
#faqs .answer{
position:relative;
padding:0 18px 16px 52px;
color:#6b6f76; /* gris plomo */
line-height:1.6;
}
#faqs .answer::before{
content:"";
position:absolute; left:22px; top:6px;
width:12px; height:12px; border-radius:50%;
background:#22c55e; /* verde */
box-shadow:0 0 0 4px rgba(34,197,94,.15); /* halo suave */
}
/* Enlaces dentro de la respuesta */
#faqs .answer a{
color:#0d6efd; font-weight:600; text-decoration:none;
}
#faqs .answer a:hover{text-decoration:underline}
/* ===== INLINE <style> BLOCK #5 ===== */
#contacto .contact-card { border-radius: 14px; }
#contacto .card-title { font-weight: 800; margin-bottom: .25rem; }
#contacto .muted { color: #6b7280; }
#contacto .icon {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(13,110,253,.08); /* usa tu primario si querés */
color: #0d6efd;
margin-right: .75rem;
flex: 0 0 38px;
}
#contacto .info-item { display: flex; align-items: flex-start; gap:.5rem; }
#contacto .badge-soft {
display:inline-block; padding:.35rem .6rem; border-radius:999px;
background: rgba(13,110,253,.08); color:#0d6efd; font-weight:600; font-size:.85rem;
margin-right:.4rem; margin-bottom:.4rem;
}
/* Asegura simetría en alto */
#contacto .h-100 { display:flex; }
#contacto .h-100 .card-body { display:flex; flex-direction:column; }
#contacto .actions { margin-top:auto; }
/* ===== INLINE <style> BLOCK #6 ===== */
:root{
--wa: #25D366; --wa-dark: #128C7E; --wa-darker: #075E54;
/* leve guiño a tu paleta verde/azul en el header del chat */
--dark-bg: #0b1120; --darker-bg: #0a162c;
--light-text: #ffffff; --muted-text: rgba(255,255,255,.7);
}
.wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit; }
.wa-btn{
background: linear-gradient(135deg, var(--wa), var(--wa-dark));
color:#fff; border:0; width:60px; height:60px; border-radius:50%;
display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
}
.wa-btn::after{ content:""; position:absolute; inset:0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .3s;
}
.wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
background: var(--dark-bg); color: var(--light-text); border-radius:18px; overflow:hidden;
box-shadow: 0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
transform: translateY(10px); opacity:0; transition: transform .3s, opacity .3s;
}
.wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
.wa-head{ display:flex; align-items:center; gap:12px; padding:14px;
background: linear-gradient(180deg, #0d162c, var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
}
.wa-avatar{
width:40px; height:40px; border-radius:8px; background:#0e1a33;
display:grid; place-items:center; border:1px solid rgba(255,255,255,.08);
overflow:hidden;
}
.wa-title{ font-weight:700; font-size:1.05rem; }
.wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
.wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
.wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.wa-close:hover{ opacity:1; background: rgba(255,255,255,.1); }
.wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background: var(--dark-bg);
display:flex; flex-direction:column; gap:8px; }
.wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
.wa-user{ background: var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }
.wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background: var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
.wa-compose textarea{
resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
background:#0a1324; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
}
.wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
.wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }
/* Scrollbar */
.wa-body::-webkit-scrollbar{ width:6px; } .wa-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:3px; } .wa-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }
/* Responsive */
@media (max-width: 480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width: calc(100vw - 24px); right:0; }
}