Preview de mixed.css
/* MIXED CSS PACK */
/* Template: servicesindustriales.com.ar/index.html */
/* Template mtime: 2025-12-16 17:02:02 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap */
/* 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 */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
/* Palette Core */
--color-primario: #f57a04;
/* Naranja Vibrante */
--color-primario-dark: #d66a00;
/* Naranja Oscuro Hover */
--color-secundario: #0d2241;
/* Azul Profundo (Trust/Industrial) */
--color-secundario-light: #1a3b66;
/* Neutrals */
--bg-body: #ffffff;
--bg-light: #f8faff;
/* Azul muy pálido para secciones light */
--text-main: #2b3545;
--text-muted: #64748b;
--border-color: #e2e8f0;
/* Effects */
--shadow-sm: 0 4px 6px -1px rgba(13, 34, 65, 0.05), 0 2px 4px -1px rgba(13, 34, 65, 0.03);
--shadow-md: 0 10px 15px -3px rgba(13, 34, 65, 0.08), 0 4px 6px -2px rgba(13, 34, 65, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(13, 34, 65, 0.1), 0 10px 10px -5px rgba(13, 34, 65, 0.04);
--shadow-hover: 0 25px 50px -12px rgba(245, 122, 4, 0.15);
/* Orange glow subtle */
--radius-md: 12px;
--radius-lg: 20px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: 'Outfit', system-ui, -apple-system, sans-serif;
color: var(--text-main);
background-color: var(--bg-body);
line-height: 1.6;
padding-top: 80px;
/* Space for fixed navbar */
overflow-x: hidden;
/* Prevent horizontal scroll */
}
/* ===== TYPOGRAPHY & UTILS ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
color: var(--color-secundario);
letter-spacing: -0.02em;
}
.text-primary {
color: var(--color-primario) !important;
}
.text-secondary {
color: var(--color-secundario) !important;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
display: block; /* 👈 cambia SOLO esto */
}
.eyebrow {
display: block; /* 👈 cambia SOLO esto */
width: fit-content; /* 👈 para que siga pill y no se estire */
color: var(--color-primario);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0.75rem;
background: rgba(245, 122, 4, 0.1);
padding: 0.35rem 1rem;
border-radius: 50px;
}
/* si está centrado, lo centramos */
.text-center .eyebrow {
margin-left: auto;
margin-right: auto;
}
section {
padding: 6rem 0;
position: relative;
}
/* ===== BUTTONS ===== */
.btn {
padding: 0.75rem 2rem;
font-weight: 600;
border-radius: 50px;
/* Pill shape */
transition: var(--transition);
letter-spacing: 0.01em;
}
.btn-primary {
background: linear-gradient(135deg, var(--color-primario) 0%, #ff9100 100%);
border: none;
box-shadow: 0 4px 15px rgba(245, 122, 4, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 122, 4, 0.5);
background: linear-gradient(135deg, #ff9100 0%, var(--color-primario) 100%);
}
/* ===== NAVBAR ===== */
.navbar {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 1rem 0;
transition: var(--transition);
}
.navbar-brand {
font-weight: 800;
font-size: 1.5rem;
color: var(--color-secundario);
}
.navbar-brand span {
color: var(--color-primario);
font-weight: 800;
}
.nav-link {
font-weight: 500;
color: var(--color-secundario) !important;
font-size: 0.95rem;
margin: 0 0.5rem;
position: relative;
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primario) !important;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--color-primario);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 100%;
}
/* ===== HERO ===== */
#inicio {
background: radial-gradient(circle at top right, #fff8f0 0%, #fff 40%, #f4f7fa 100%);
padding: 8rem 0 6rem;
overflow: hidden;
}
.hero-img-container {
position: relative;
}
.hero-img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
object-fit: cover;
transform: perspective(1000px) rotateY(-5deg);
transition: var(--transition);
border: 4px solid #fff;
}
.hero-img:hover {
transform: perspective(1000px) rotateY(0deg);
}
/* Floating Pattern (Decorativo) */
.hero-pattern {
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(245, 122, 4, 0.1), rgba(245, 122, 4, 0));
border-radius: 50%;
z-index: -1;
}
.p-1 {
top: -20px;
right: -20px;
}
.p-2 {
bottom: -20px;
left: -20px;
}
/* ===== CARDS (General) ===== */
.feature-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.03);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
height: 100%;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--color-primario);
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
font-size: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: rgba(245, 122, 4, 0.08);
/* Transparent orange */
color: var(--color-primario);
border-radius: 50%;
/* Circle */
margin-bottom: 1.5rem;
transition: var(--transition);
}
.feature-card:hover .feature-icon {
background: var(--color-primario);
color: #fff;
transform: scale(1.1) rotate(5deg);
}
.card-title {
font-size: 1.35rem;
margin-bottom: 1rem;
}
.card-text {
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.list-unstyled li {
margin-bottom: 0.75rem;
display: flex;
align-items: flex-start;
}
.list-unstyled li i {
margin-top: 3px;
}
/* ===== QUIENES SOMOS ===== */
#quienes-somos {
background-color: #fff;
}
#quienes-somos p {
font-size: 1.1rem;
color: #4a5568;
}
#quienes-somos strong {
color: var(--color-secundario);
}
/* ===== TRANSPARENT/SOLID SECTIONS ===== */
.bg-light-pro {
background-color: var(--bg-light);
}
/* ===== FAQ ===== */
.faq-item {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
margin-bottom: 1rem;
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
box-shadow: var(--shadow-md);
border-color: rgba(245, 122, 4, 0.3);
}
.faq-question {
background: none;
border: none;
text-align: left;
width: 100%;
padding: 1.5rem;
font-weight: 600;
color: var(--color-secundario);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question:hover {
color: var(--color-primario);
}
.faq-question .icon {
color: var(--color-primario);
transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"] .icon {
transform: rotate(180deg);
}
.faq-question[aria-expanded="true"] {
background-color: rgba(245, 122, 4, 0.02);
}
.faq-answer {
padding: 0 1.5rem 1.5rem 1.5rem;
color: var(--text-muted);
line-height: 1.7;
}
/* ===== CONTACTO ===== */
#contacto {
background: linear-gradient(180deg, var(--bg-light) 0%, #fff 100%);
}
.contact-form-wrapper {
background: #fff;
padding: 3rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.form-label {
font-weight: 600;
color: var(--color-secundario);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.form-control,
.form-select {
border-radius: 8px;
border: 2px solid #edf2f7;
background-color: #f8fafc;
padding: 0.8rem 1rem;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus,
.form-select:focus {
background-color: #fff;
border-color: var(--color-primario);
box-shadow: 0 0 0 4px rgba(245, 122, 4, 0.1);
}
/* ===== FOOTER ===== */
.footer {
background-color: var(--color-secundario);
color: #cbd5e1;
/* Gray-300 */
padding: 5rem 0 2rem;
font-size: 0.95rem;
}
.footer-brand {
color: #fff;
font-size: 1.8rem;
margin-bottom: 1.5rem;
display: block;
}
.footer-brand span {
color: var(--color-primario);
}
.footer h5 {
color: #fff;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: 0.5px;
}
.footer a {
color: #cbd5e1;
text-decoration: none;
transition: var(--transition);
}
.footer a:hover {
color: var(--color-primario);
padding-left: 5px;
/* Slight movement */
}
.footer-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin-right: 0.5rem;
color: #fff !important;
transition: var(--transition);
}
.footer-social-link:hover {
background: var(--color-primario);
transform: translateY(-3px);
padding-left: 0 !important;
}
.copyright {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 4rem;
padding-top: 2rem;
font-size: 0.85rem;
opacity: 0.8;
}
/* ===== ANIMATION UTILS ===== */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== GALLERY STYLES (PRESERVED & ENHANCED) ===== */
.gal-gallery .carousel {
max-width: 1100px;
margin-inline: auto;
position: relative;
}
/* Marco más premium */
.gal-frame {
height: clamp(250px, 50vh, 500px);
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.gal-frame:hover {
box-shadow: var(--shadow-hover);
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
border-radius: 8px;
}
/* Controls Redesign */
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 56px;
height: 56px;
top: 50%;
transform: translateY(-50%);
opacity: 0.9;
background: #fff;
color: var(--color-secundario);
border-radius: 50%;
margin: 0 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: var(--transition);
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover {
background: var(--color-primario);
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.gal-gallery .carousel-control-prev-icon,
.gal-gallery .carousel-control-next-icon {
filter: none;
/* Reset boostrap filter */
background-image: none;
/* Remove SVG */
}
/* Inject Custom Arrows via Pseudo-elements for cleaner color control */
.gal-gallery .carousel-control-prev::after {
content: '\f284';
font-family: 'bootstrap-icons';
font-size: 1.5rem;
}
.gal-gallery .carousel-control-next::after {
content: '\f285';
font-family: 'bootstrap-icons';
font-size: 1.5rem;
}
.gal-gallery .carousel-indicators {
bottom: -60px;
}
.gal-gallery .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #cbd5e1;
border: none;
margin: 0 6px;
transition: var(--transition);
}
.gal-gallery .carousel-indicators button.active {
background-color: var(--color-primario);
transform: scale(1.3);
}
/* Lightbox */
#galLightbox .modal-content {
background: rgba(0, 0, 0, 0.95);
border: none;
}
#galLightboxImg {
max-height: 90vh;
border-radius: 4px;
border: 2px solid #333;
}
.gal-lightbox-nav {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
transition: var(--transition);
}
.gal-lightbox-nav:hover {
background: var(--color-primario);
}
.logo-navbar {
height: 36px;
width: auto;
}
.brand-main {
font-size: 1rem;
font-weight: 700;
}
.brand-sub {
font-size: 0.8rem;
font-weight: 500;
opacity: 0.8;
}
.footer-logo {
height: 64px;
width: auto;
}
.footer-main {
font-size: 0.95rem;
font-weight: 700;
}
.footer-sub {
font-size: 0.8rem;
opacity: 0.75;
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* ===== WhatsApp Widget (adaptado a paleta A&V) ===== */
:root{
--av-primary: var(--color-primario, #f57a04);
--av-primary-dark: var(--color-primario-dark, #d66a00);
--av-secondary: var(--color-secundario, #0d2241);
--av-bg: #ffffff;
--av-border: #e2e8f0;
--av-muted: #64748b;
}
#wa-float-av.wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: inherit; /* usa Outfit */
}
/* Botón verde oficial WhatsApp */
#wa-float-av .wa-btn{
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg,#25D366,#128C7E);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(37,211,102,.45);
transition: transform .25s ease, box-shadow .25s ease;
}
#wa-float-av .wa-btn:hover{
transform: translateY(-3px) scale(1.05);
box-shadow: 0 14px 36px rgba(37,211,102,.55);
}
/* Ventana */
#wa-float-av .wa-card{
position: absolute;
right: 0;
bottom: 74px;
width: min(380px, 92vw);
background: var(--av-bg);
border-radius: 18px;
border: 1px solid var(--av-border);
box-shadow: 0 18px 60px rgba(0,0,0,.25);
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: .22s ease;
}
#wa-float-av .wa-card[aria-modal="true"]{
transform: translateY(0);
opacity: 1;
}
/* Header con estética del sitio (Azul + Naranja) */
#wa-float-av .wa-head{
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: linear-gradient(135deg, var(--av-secondary) 0%, var(--av-primary) 140%);
color: #fff;
}
#wa-float-av .wa-avatar{
width: 42px;
height: 42px;
background: rgba(255,255,255,.95);
border-radius: 12px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255,255,255,.35);
font-weight: 800;
color: var(--av-secondary);
font-size: .85rem;
}
#wa-float-av .wa-avatar img{
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
#wa-float-av .wa-title{ font-weight: 800; letter-spacing: -.01em; }
#wa-float-av .wa-status{ font-size: .85rem; opacity: .92; }
#wa-float-av .wa-close{
margin-left: auto;
border: none;
background: transparent;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
/* Body */
#wa-float-av .wa-body{
padding: 14px;
max-height: 42vh;
overflow: auto;
background: #f8faff;
display: flex;
flex-direction: column;
gap: 8px;
}
#wa-float-av .wa-bubble{
max-width: 90%;
padding: 10px 12px;
border-radius: 14px;
font-size: .95rem;
box-shadow: 0 4px 10px rgba(13,34,65,.08);
}
#wa-float-av .wa-bot{
background: #fff;
border: 1px solid var(--av-border);
align-self: flex-start;
color: #2b3545;
}
#wa-float-av .wa-user{
background: rgba(245,122,4,.10);
border: 1px solid rgba(245,122,4,.25);
align-self: flex-end;
color: #2b3545;
}
/* Compose */
#wa-float-av .wa-compose{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--av-border);
background: #fff;
}
#wa-float-av .wa-compose textarea{
resize: none;
border-radius: 14px;
padding: 10px 12px;
border: 2px solid #edf2f7;
background: #f8fafc;
font-family: inherit;
outline: none;
}
#wa-float-av .wa-compose textarea:focus{
background: #fff;
border-color: var(--av-primary);
box-shadow: 0 0 0 4px rgba(245,122,4,.12);
}
#wa-float-av .wa-send{
border: none;
border-radius: 14px;
padding: 0 16px;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--av-primary) 0%, #ff9100 100%);
box-shadow: 0 8px 18px rgba(245,122,4,.25);
transition: transform .2s ease, box-shadow .2s ease;
}
#wa-float-av .wa-send:hover{
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(245,122,4,.35);
}
/* Mobile */
@media (max-width: 480px){
#wa-float-av .wa-card{ width: calc(100vw - 24px); }
}