Preview de mixed.css
/* MIXED CSS PACK */
/* Template: fletesymudanzascarlitos.com.ar/index.html */
/* Template mtime: 2026-02-20 19:58:14 */
/* 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.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],400;14..32,600;14..32,700;14..32,800;14..32,900&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
/* tus styles siguen acá abajo SIN CAMBIOS */
<style>
/* ===== RESET Y VARIABLES ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--accent: #e21728;
--accent-dark: #b0101c;
--accent-light: rgba(226, 23, 40, 0.08);
--text: #1a1e24;
--text-muted: #5b6877;
--bg: #ffffff;
--bg-soft: #f9fafc;
--border: #e9edf2;
--border-light: #f0f3f7;
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.12);
--radius-md: 20px;
--radius-lg: 32px;
--radius-full: 999px;
--transition: all 0.2s ease;
}
html { scroll-behavior: smooth; }
body {
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
overflow-x: hidden;
}
html, body { overflow-x: hidden; }
/* ===== TIPOGRAFÍA ===== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.display-5 { font-size: clamp(2.2rem, 5vw, 3rem); }
/* ===== HELPERS ===== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
background: var(--accent-light);
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
}
.eyebrow i { font-size: 1rem; }
.section {
padding: clamp(64px, 8vw, 100px) 0;
}
.section-title {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
margin-top: 1rem;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.anchor-offset { scroll-margin-top: 90px; }
/* ===== NAVBAR (MÁS ELEGANTE) ===== */
.navbar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
padding: 0.75rem 0;
box-shadow: var(--shadow-sm);
}
.navbar-brand {
font-weight: 900;
letter-spacing: -0.02em;
color: var(--text);
}
.navbar-brand .footer-badge {
background: var(--accent);
color: white;
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.navbar .nav-link {
font-weight: 600;
color: var(--text);
opacity: 0.8;
padding: 0.5rem 1rem !important;
border-radius: var(--radius-full);
transition: var(--transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
opacity: 1;
color: var(--accent);
background: var(--accent-light);
}
.navbar-toggler {
border: 1px solid var(--border);
padding: 0.5rem;
border-radius: 12px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-light); }
/* ===== BOTONES ===== */
.btn {
font-weight: 700;
padding: 0.7rem 1.4rem;
border-radius: var(--radius-full);
transition: var(--transition);
}
.btn-accent {
background: var(--accent);
border-color: var(--accent);
color: white;
box-shadow: 0 8px 18px -6px rgba(226, 23, 40, 0.4);
}
.btn-accent:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: white;
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(226, 23, 40, 0.5);
}
.btn-outline-accent {
border: 2px solid var(--accent);
color: var(--accent);
background: transparent;
}
.btn-outline-accent:hover {
background: var(--accent);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 18px -6px rgba(226, 23, 40, 0.3);
}
/* ===== CARDS (MODERNAS, CON MÁS PERSONALIDAD) ===== */
.card-soft {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
}
.card-soft:hover {
box-shadow: var(--shadow-md);
border-color: rgba(226, 23, 40, 0.2);
}
.icon-badge {
width: 52px;
height: 52px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-light);
color: var(--accent);
font-size: 1.5rem;
transition: var(--transition);
}
.card-soft:hover .icon-badge {
background: var(--accent);
color: white;
}
/* ===== HERO (MÁS IMPACTO) ===== */
.hero {
padding-top: 120px;
padding-bottom: 60px;
background: linear-gradient(to bottom, white, var(--bg-soft));
}
.hero-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
background: white;
}
.hero-left { padding: clamp(30px, 4vw, 50px); }
.hero h1 { line-height: 1.1; }
.hero p { color: var(--text-muted); }
.hero-list {
list-style: none;
padding: 0;
display: grid;
gap: 0.75rem;
}
.hero-list li {
display: flex;
gap: 0.75rem;
align-items: center;
font-weight: 600;
}
.hero-list i {
color: var(--accent);
font-size: 1.25rem;
}
.hero-media {
background: linear-gradient(145deg, var(--accent-light), transparent 70%);
border-left: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.hero-media .media-frame {
width: 100%;
max-width: 500px;
aspect-ratio: 1/1;
background: white;
border-radius: 28px;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.hero-media img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* ===== GALERÍA (TU CÓDIGO, PERFECTAMENTE INTEGRADO) ===== */
.gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(240px, 50vh, 460px);
background: #fff; border-radius: 24px; overflow: hidden;
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center; padding: 12px;
}
.gal-img {
width: auto !important; max-width: 100%;
height: auto !important; max-height: 100%;
object-fit: contain !important; cursor: zoom-in;
transition: transform 0.3s ease;
}
.gal-img:hover { transform: scale(1.02); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20; width: 48px; height: 48px; top: 50%; transform: translateY(-50%);
opacity: 1; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
border-radius: 50%; margin: 0 16px; border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover { background: white; box-shadow: var(--shadow-md); }
.gal-gallery .carousel-control-prev-icon,
.gal-gallery .carousel-control-next-icon {
filter: brightness(0); /* iconos negros para mejor contraste sobre fondo blanco */
width: 1.5rem; height: 1.5rem;
}
.gal-gallery .carousel-indicators {
position: static;
margin-top: 2rem;
}
.gal-gallery .carousel-indicators button {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-muted); border: none; opacity: 0.4;
margin: 0 4px;
}
.gal-gallery .carousel-indicators button.active { background: var(--accent); opacity: 1; }
.gal-gallery { padding-bottom: 1rem; }
/* Modal Lightbox */
#galLightbox .modal-content { background: #000; border-radius: 24px; overflow: hidden; }
#galLightboxImg { max-height: 86vh; width: 100%; object-fit: contain; }
.gal-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; width: 50px; height: 50px; border-radius: 50%;
background: rgba(255,255,255,0.2); color: #fff; font-size: 2rem;
line-height: 50px; text-align: center; z-index: 5; cursor: pointer;
backdrop-filter: blur(4px); transition: var(--transition);
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.gal-lightbox-nav.gal-prev { left: 16px; }
.gal-lightbox-nav.gal-next { right: 16px; }
.btn-close-white { filter: brightness(0) invert(1); opacity: 0.8; }
.btn-close-white:hover { opacity: 1; }
/* ===== FORMULARIO Y ACCORDION ===== */
.form-control, .form-select {
border-radius: 16px;
border: 1px solid var(--border);
padding: 0.8rem 1rem;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus, .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-light);
outline: none;
}
.accordion-item {
border: none;
background: transparent;
margin-bottom: 1rem;
}
.accordion-button {
border-radius: var(--radius-md) !important;
background: white;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
font-weight: 700;
padding: 1.25rem 1.5rem;
}
.accordion-button:not(.collapsed) {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.accordion-button:focus { box-shadow: none; border-color: var(--accent); }
.accordion-button::after { transition: var(--transition); }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-body {
padding: 1.5rem;
background: white;
border: 1px solid var(--border);
border-top: none;
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
color: var(--text-muted);
}
/* ===== FOOTER ===== */
footer {
border-top: none;
background: #c45a5a; /* color sólido solicitado */
padding: 4rem 0 2rem;
}
footer .muted { color: rgba(0,0,0,0.72) !important; }
footer .fw-bold, footer .fw-black, footer .fw-semibold { color: rgba(0,0,0,0.92); }
footer .footer-link { color: rgba(0,0,0,0.78); }
footer .footer-link:hover { color: rgba(0,0,0,0.92); }
footer hr { border-color: rgba(0,0,0,0.18) !important; }
.footer-badge {
background: var(--accent);
color: white;
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-link {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.footer-link:hover {
color: var(--accent);
padding-left: 4px;
}
/* Imagen quienes somos (desktop sin recorte) */
.qs-img{
width: 100%;
height: 480px; /* mantiene el alto del bloque */
max-height: 520px;
object-fit: contain; /* ✅ muestra la imagen completa (sin recorte) */
background: #fff; /* “letterbox” prolijo cuando sobra espacio */
padding: 10px; /* separa la imagen del borde */
border-radius: 1.5rem;
display: block;
}
@media (max-width: 575.98px){
.qs-img{
height: auto; /* en phone que fluya */
max-height: none;
padding: 8px;
}
}
/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
.hero-media { border-left: none; border-top: 1px solid var(--border); }
.navbar-collapse {
background: white;
padding: 1rem;
border-radius: var(--radius-md);
margin-top: 1rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
}
@media (max-width: 575.98px) {
/* Navbar brand visible en phone, sin desbordes */
.navbar-brand{ min-width:0; max-width: calc(100% - 64px); }
.navbar-brand img{ height:36px; flex:0 0 auto; }
.navbar-brand span{
display:inline-block;
min-width:0;
max-width: 60vw;
font-size: 0.95rem;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navbar-toggler{ flex:0 0 auto; }
.hero { padding-top: 100px; }
.gal-frame { height: clamp(180px, 35vh, 300px); }
.btn { width: 100%; }
.d-flex .btn { width: auto; } /* para no romper botones en línea */
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Contenedor del texto */
.video-head{ max-width: 860px; }
/* Card video: fija proporción para que NO se estire en desktop */
.video-card{
position: relative;
border-radius: 22px;
overflow: hidden;
background: #000;
box-shadow: 0 14px 35px rgba(0,0,0,.10);
border: 1px solid rgba(0,0,0,.06);
aspect-ratio: 16 / 9; /* ✅ desktop prolijo */
}
/* Video ocupa todo el card sin deformarse */
.promo-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* llena lindo sin deformar (puede recortar) */
background: #000;
}
/* Overlay suave */
.video-overlay{
position:absolute;
inset:0;
pointer-events:none;
background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.25) 100%);
opacity: .35;
z-index: 1;
}
/* Botón flotante dentro del video */
.sound-fab{
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.45);
color: #fff;
width: 46px;
height: 46px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
transition: transform .15s ease, background .15s ease;
}
.sound-fab:hover{ transform: translateY(-1px); background: rgba(0,0,0,.55); }
.sound-fab:active{ transform: translateY(0px) scale(.98); }
/* Phone */
@media (max-width: 576px){
.video-card{ aspect-ratio: 16 / 10; } /* un toque más alto en móvil */
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* Scope seguro: wa-* */
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family: inherit;
}
/* BOTÓN */
.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 12px 34px rgba(18,140,126,.35);
transition: transform .25s ease, box-shadow .25s ease;
}
.wa-btn:hover{
transform: translateY(-3px) scale(1.05);
box-shadow:0 16px 44px rgba(18,140,126,.45);
}
/* CARD */
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid rgba(0,0,0,.12);
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform: translateY(10px);
opacity:0;
transition: .25s ease;
}
.wa-card[aria-modal="true"]{
transform:none;
opacity:1;
}
/* HEADER (adaptado al accent #e21728) */
.wa-head{
display:flex;align-items:center;gap:12px;
padding:14px;
background: linear-gradient(135deg, #e21728, #b8101f);
color:#fff;
}
.wa-avatar{
width:40px;height:40px;
background:#fff;
border-radius:10px;
display:grid;place-items:center;
overflow:hidden;
}
.wa-avatar img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.wa-avatar.wa-avatar-fallback{
font-weight: 900;
color:#e21728;
font-size: 18px;
}
.wa-title{ font-weight:800; line-height:1.1; }
.wa-status{ font-size:.85rem; opacity:.92; }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
line-height: 1;
cursor:pointer;
padding: 4px 8px;
border-radius: 10px;
}
.wa-close:hover{ background: rgba(255,255,255,.14); }
/* BODY */
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#fff;
border:1px solid rgba(0,0,0,.10);
align-self:flex-start;
}
.wa-user{
background: rgba(226,23,40,.08);
border: 1px solid rgba(226,23,40,.22);
align-self:flex-end;
}
/* COMPOSE */
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid rgba(0,0,0,.12);
background:#fff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid rgba(0,0,0,.12);
font-family:inherit;
outline:none;
}
.wa-compose textarea:focus{
border-color: rgba(226,23,40,.55);
box-shadow: 0 0 0 .18rem rgba(226,23,40,.12);
}
.wa-send{
background:#e21728;
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
transition:.2s ease;
}
.wa-send:hover{ background:#b8101f; }
/* Mobile */
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}