Preview de mixed.css
/* MIXED CSS PACK */
/* Template: maxmontajes.com.ar/index.html */
/* Template mtime: 2026-05-04 14:16:36 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ============================================================
VARIABLES & RESET
============================================================ */
:root {
--accent: #ff232a;
--accent2: #ff5a5f;
--ink: #090909;
--muted: #5f6368;
--line: rgba(0,0,0,.08);
--soft: #f7f7f7;
--shadow: 0 22px 55px rgba(0,0,0,.10);
--shadow-sm:0 8px 24px rgba(0,0,0,.07);
--r: 14px;
--nav-h: 72px;
--font-display: 'Syne', sans-serif;
--font-body: 'DM Sans', sans-serif;
--ease-out: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }
body {
overflow-x: hidden;
color: var(--ink);
background: #fff;
font-family: var(--font-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
/* ============================================================
NAVBAR
============================================================ */
.navbar {
height: var(--nav-h);
background: rgba(255,255,255,.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
padding: 0;
transition: box-shadow .3s var(--ease-out);
}
.navbar.scrolled {
box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.navbar .container {
display: flex;
align-items: center;
height: 100%;
}
.navbar-brand {
display: flex;
align-items: center;
gap: .65rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
color: var(--ink);
letter-spacing: -.01em;
flex-shrink: 0;
}
.brand-logo {
height: 42px;
width: auto;
object-fit: contain;
}
.brand-text {
font-size: clamp(.85rem, 2.2vw, 1rem);
line-height: 1.15;
}
.navbar-toggler {
border: 1.5px solid var(--line);
border-radius: 10px;
padding: .5rem .65rem;
transition: border-color .2s;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,35,42,.15); outline: none; }
.navbar-toggler:hover { border-color: var(--accent); }
/* Nav links */
.navbar-nav { gap: 0; }
.nav-link {
font-family: var(--font-body);
font-weight: 500;
font-size: .92rem;
color: #202124;
padding: .5rem .95rem !important;
border-radius: 8px;
transition: color .2s, background .2s;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 18px;
height: 2px;
background: var(--accent);
border-radius: 99px;
transition: transform .25s var(--ease-out);
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
/* CTA button */
.btn-accent {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--accent);
color: #fff;
border: none;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: .92rem;
padding: .65rem 1.35rem;
box-shadow: 0 6px 20px rgba(255,35,42,.28);
transition: transform .2s var(--ease-out), box-shadow .2s, background .2s;
white-space: nowrap;
}
.btn-accent:hover, .btn-accent:focus {
color: #fff;
background: #e01018;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255,35,42,.38);
}
.btn-accent:active { transform: translateY(0); }
.btn-outline-ink {
display: inline-flex;
align-items: center;
gap: .5rem;
background: transparent;
color: var(--ink);
border: 1.5px solid rgba(0,0,0,.18);
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: .92rem;
padding: .65rem 1.35rem;
transition: transform .2s var(--ease-out), border-color .2s, background .2s;
}
.btn-outline-ink:hover {
color: var(--ink);
border-color: var(--ink);
background: rgba(0,0,0,.04);
transform: translateY(-2px);
}
/* ============================================================
SECTION UTILITIES
============================================================ */
.section { padding: clamp(80px, 10vw, 130px) 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--accent);
font-family: var(--font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyebrow::before {
content: '';
flex-shrink: 0;
width: 24px;
height: 2px;
border-radius: 99px;
background: var(--accent);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2.1rem, 4.5vw, 3.5rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--ink);
margin: .65rem 0 1rem;
}
.section-sub {
color: var(--muted);
font-size: 1.07rem;
font-weight: 400;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
padding: calc(var(--nav-h) + 64px) 0 80px;
background: #fff;
overflow: hidden;
}
/* Faint grid texture */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}
/* Accent glow */
.hero::after {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,35,42,.07) 0%, transparent 70%);
pointer-events: none;
}
.hero-label {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(255,35,42,.08);
border: 1px solid rgba(255,35,42,.18);
border-radius: 999px;
color: var(--accent);
font-size: .78rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
padding: .35rem .9rem;
margin-bottom: 1.4rem;
}
.hero-label-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:.5; transform:scale(1.4); }
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 5.2rem);
font-weight: 900;
line-height: .97;
letter-spacing: -.04em;
color: var(--ink);
margin-bottom: 1.4rem;
}
.hero h1 em {
font-style: normal;
color: var(--accent);
}
.hero-copy {
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: #44474b;
max-width: 560px;
line-height: 1.75;
margin-bottom: 2.2rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: .85rem;
margin-bottom: 2.8rem;
}
/* Chips de datos rápidos */
.quick-chips {
display: flex;
flex-wrap: wrap;
gap: .65rem;
}
.quick-chip {
display: inline-flex;
align-items: center;
gap: .45rem;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: .45rem 1rem;
font-size: .83rem;
font-weight: 500;
color: #333;
transition: border-color .2s, box-shadow .2s;
}
.quick-chip:hover {
border-color: rgba(255,35,42,.3);
box-shadow: 0 4px 14px rgba(255,35,42,.08);
}
.quick-chip svg {
width: 14px; height: 14px;
stroke: var(--accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
flex-shrink: 0;
}
/* Hero image */
.hero-media {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,.16);
border: 1px solid rgba(0,0,0,.07);
background: var(--soft);
aspect-ratio: 4/5;
max-height: 620px;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Floating badge on image */
.hero-badge {
position: absolute;
bottom: 24px;
left: 24px;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.8);
border-radius: 14px;
padding: .9rem 1.15rem;
box-shadow: 0 12px 32px rgba(0,0,0,.12);
display: flex;
align-items: center;
gap: .8rem;
}
.hero-badge-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hero-badge-icon svg {
width: 20px; height: 20px;
stroke: #fff;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.hero-badge-text strong {
display: block;
font-weight: 700;
font-size: .92rem;
color: var(--ink);
line-height: 1.2;
}
.hero-badge-text span {
font-size: .77rem;
color: var(--muted);
}
/* ============================================================
QUIÉNES SOMOS
============================================================ */
#quienes-somos { background: #fff; }
.about-text p {
color: #44474b;
font-size: 1.03rem;
line-height: 1.8;
margin-bottom: 1.1rem;
}
.about-text p:last-child { margin-bottom: 0; }
/* Panel visual moderno */
.about-panel {
position: relative;
border-radius: 20px;
background: var(--ink);
padding: clamp(2rem, 4vw, 3rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 440px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.2);
}
.about-panel::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(255,35,42,.35) 0%, transparent 55%),
radial-gradient(circle at 10% 90%, rgba(255,35,42,.15) 0%, transparent 50%);
}
.about-panel-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 40px 40px;
}
.about-panel-content { position: relative; z-index: 1; }
.about-panel-tag {
display: inline-block;
background: rgba(255,35,42,.9);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: .3rem .8rem;
border-radius: 999px;
margin-bottom: 1.2rem;
}
.about-panel-title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.5vw, 2.6rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.03em;
color: #fff;
margin-bottom: .8rem;
}
.about-panel-sub {
color: rgba(255,255,255,.65);
font-size: .97rem;
line-height: 1.6;
}
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(255,255,255,.12);
border-radius: 14px;
overflow: hidden;
margin-top: 1.8rem;
}
.about-stat {
background: rgba(255,255,255,.06);
padding: 1.1rem 1.2rem;
backdrop-filter: blur(6px);
}
.about-stat strong {
display: block;
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 900;
color: #fff;
letter-spacing: -.03em;
line-height: 1;
}
.about-stat span {
font-size: .78rem;
color: rgba(255,255,255,.55);
margin-top: .25rem;
display: block;
}
/* ============================================================
SERVICIOS
============================================================ */
.services-section {
background: var(--soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.service-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.75rem;
height: 100%;
box-shadow: var(--shadow-sm);
transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease-out);
border-radius: 3px 3px 0 0;
}
.service-card:hover {
transform: translateY(-6px);
border-color: rgba(255,35,42,.2);
box-shadow: 0 24px 52px rgba(0,0,0,.1);
}
.service-card:hover::before { transform: scaleX(1); }
.icon-box {
width: 50px; height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ink);
border-radius: 12px;
margin-bottom: 1.2rem;
flex-shrink: 0;
transition: background .2s, box-shadow .2s;
}
.service-card:hover .icon-box {
background: var(--accent);
box-shadow: 0 8px 22px rgba(255,35,42,.3);
}
.icon-box svg {
width: 22px; height: 22px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.service-card h3 {
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 800;
letter-spacing: -.015em;
margin-bottom: .55rem;
color: var(--ink);
}
.service-card p {
color: var(--muted);
font-size: .92rem;
line-height: 1.7;
margin: 0;
}
/* ============================================================
POR QUÉ ELEGIRNOS
============================================================ */
.reasons-section { background: #fff; }
.reason-card {
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.75rem;
height: 100%;
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
display: flex;
flex-direction: column;
gap: 1rem;
}
.reason-card:hover {
transform: translateY(-4px);
border-color: rgba(255,35,42,.2);
box-shadow: 0 20px 48px rgba(0,0,0,.09);
}
.reason-icon {
width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: rgba(255,35,42,.08);
flex-shrink: 0;
transition: background .2s;
}
.reason-card:hover .reason-icon { background: rgba(255,35,42,.14); }
.reason-icon svg {
width: 22px; height: 22px;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.reason-card h3 {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.015em;
color: var(--ink);
margin: 0;
}
.reason-card p {
color: var(--muted);
font-size: .92rem;
line-height: 1.7;
margin: 0;
flex: 1;
}
/* ============================================================
GALERÍA — NO TOCAR (tal cual original)
============================================================ */
.gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(260px,48vh,500px);
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0,0,0,.12);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid rgba(0,0,0,.08);
}
.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;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 50px; height: 50px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(0,0,0,.58);
border-radius: 50%;
margin: 0 12px;
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon { width: 2.6rem; height: 2.6rem; background-size: 60% 60%; }
.gal-gallery .carousel-indicators { z-index: 10; bottom: -50px; }
.gal-gallery .carousel-indicators button {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(0,0,0,.45);
border: none;
}
.gal-gallery .carousel-indicators button.active { background: #ff232a; }
.gal-gallery { padding-bottom: 56px; }
#galLightbox .modal-content { background: #000; }
#galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; background: #000; }
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 44px; height: 44px;
border-radius: 999px;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 30px;
line-height: 44px;
text-align: center;
z-index: 5;
cursor: pointer;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 10px; }
.gal-lightbox-nav.gal-next { right: 10px; }
/* ============================================================
FAQs
============================================================ */
.faqs-section { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-wrap { max-width: 860px; margin: 0 auto; }
/* Accordion custom */
.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r) !important;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .25s, border-color .25s;
}
.faq-item:hover { border-color: rgba(255,35,42,.2); }
.faq-btn {
width: 100%;
background: transparent;
border: none;
text-align: left;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.2rem 1.4rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--ink);
transition: color .2s;
}
.faq-btn:hover { color: var(--accent); }
.faq-btn[aria-expanded="true"] { color: var(--accent); }
.faq-btn[aria-expanded="true"] .faq-icon { background: var(--accent); }
.faq-btn[aria-expanded="true"] .faq-icon::before { opacity: 0; }
.faq-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(0,0,0,.07);
display: flex; align-items: center; justify-content: center;
transition: background .25s;
position: relative;
}
.faq-icon::before, .faq-icon::after {
content: '';
position: absolute;
background: currentColor;
border-radius: 99px;
transition: opacity .25s, transform .25s;
}
.faq-icon::before {
width: 10px; height: 1.5px;
top: 50%; left: 50%;
transform: translate(-50%,-50%) rotate(90deg);
}
.faq-icon::after {
width: 10px; height: 1.5px;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.faq-icon { color: var(--muted); }
.faq-btn[aria-expanded="true"] .faq-icon { color: #fff; }
.faq-body {
display: none;
padding: 0 1.4rem 1.2rem calc(1.4rem + 28px + 1rem);
color: var(--muted);
font-size: .97rem;
line-height: 1.75;
}
.faq-body.show { display: block; }
.faq-list { display: grid; gap: .75rem; }
/* ============================================================
CONTACTO
============================================================ */
.contact-section { background: #fff; }
.contact-info-card {
background: var(--ink);
border-radius: 20px;
padding: clamp(1.8rem,3.5vw,2.6rem);
height: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 28px 64px rgba(0,0,0,.18);
}
.contact-info-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 90% 10%, rgba(255,35,42,.3) 0%, transparent 50%),
radial-gradient(circle at 5% 90%, rgba(255,35,42,.12) 0%, transparent 50%);
pointer-events: none;
}
.contact-info-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.contact-info-card .eyebrow { color: rgba(255,255,255,.6); }
.contact-info-card .eyebrow::before { background: rgba(255,255,255,.4); }
.contact-info-card .section-title { color: #fff; font-size: clamp(1.7rem,3vw,2.4rem); }
.contact-info-card .section-sub { color: rgba(255,255,255,.6); font-size: .95rem; max-width: none; margin: 0 0 1.8rem; }
.contact-items { display: grid; gap: 1rem; flex: 1; }
.contact-item {
display: flex;
align-items: center;
gap: .9rem;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 1rem 1.1rem;
transition: background .2s, border-color .2s;
}
.contact-item:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.2);
}
.contact-item-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(255,35,42,.85);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.contact-item-icon svg {
width: 18px; height: 18px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.contact-item b {
display: block;
font-size: .78rem;
font-weight: 600;
color: rgba(255,255,255,.5);
letter-spacing: .05em;
text-transform: uppercase;
margin-bottom: .15rem;
}
.contact-item a, .contact-item span {
color: rgba(255,255,255,.92);
font-size: .95rem;
font-weight: 500;
}
.contact-item a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-info-card .btn-accent {
margin-top: 1.6rem;
width: 100%;
justify-content: center;
padding: .9rem;
font-size: 1rem;
box-shadow: 0 8px 24px rgba(255,35,42,.4);
}
/* Formulario */
.contact-form-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(1.8rem,3.5vw,2.6rem);
height: 100%;
box-shadow: var(--shadow);
}
.contact-form-card h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -.02em;
margin-bottom: 1.5rem;
color: var(--ink);
}
.form-label {
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: #44474b;
margin-bottom: .45rem;
display: block;
}
.form-control, .form-select {
border: 1.5px solid rgba(0,0,0,.1);
border-radius: 10px;
padding: .75rem 1rem;
font-family: var(--font-body);
font-size: .96rem;
color: var(--ink);
background: #fff;
transition: border-color .2s, box-shadow .2s;
min-height: 50px;
}
.form-control:focus, .form-select:focus {
border-color: rgba(255,35,42,.55);
box-shadow: 0 0 0 3px rgba(255,35,42,.1);
outline: none;
}
textarea.form-control { min-height: 140px; resize: vertical; }
.contact-form-card .btn-accent {
width: 100%;
justify-content: center;
padding: .9rem;
font-size: 1rem;
}
/* honeypot */
.hp-field {
position: absolute; left: -9999px;
width: 1px; height: 1px;
overflow: hidden; opacity: 0; pointer-events: none;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--ink);
color: #fff;
padding: 70px 0 0;
}
.footer-brand {
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: 1rem;
}
.footer-logo {
height: 42px;
width: auto;
object-fit: contain;
background: #fff;
border-radius: 9px;
padding: 2px 4px;
}
.footer-brand-name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
}
.footer-tagline {
color: rgba(255,255,255,.5);
font-size: .91rem;
line-height: 1.6;
max-width: 280px;
}
.footer-divider {
width: 32px; height: 2px;
background: var(--accent);
border-radius: 99px;
margin-bottom: 1.2rem;
}
.footer-col-title {
font-family: var(--font-display);
font-size: .82rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .6rem;
}
.footer-links a, .footer-links li {
color: rgba(255,255,255,.72);
font-size: .92rem;
transition: color .2s;
}
.footer-links a:hover { color: #fff; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
margin-top: 3rem;
padding: 1.4rem 0;
display: flex;
flex-wrap: wrap;
gap: .8rem;
align-items: center;
justify-content: space-between;
font-size: .82rem;
color: rgba(255,255,255,.4);
}
.footer-bottom a {
color: rgba(255,255,255,.6);
transition: color .2s;
}
.footer-bottom a:hover { color: #fff; }
/* ============================================================
SCROLL ANIMATIONS — CSS only, sin depender de JS
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
.fade-up {
animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}
.fade-up-d1 { animation-delay: .12s; }
.fade-up-d2 { animation-delay: .22s; }
.fade-up-d3 { animation-delay: .32s; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 991.98px) {
.navbar-collapse { padding: 1rem 0; border-top: 1px solid var(--line); margin-top: .5rem; }
.navbar-nav { gap: .2rem; }
.nav-link { padding: .7rem 0 !important; }
.nav-link::after { bottom: 6px; }
.hero { min-height: auto; padding-top: calc(var(--nav-h) + 48px); }
.hero-media { aspect-ratio: 16/10; max-height: 380px; }
.about-panel { min-height: 340px; }
}
@media (max-width: 767.98px) {
.section { padding: 72px 0; }
.hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.hero-actions { flex-direction: column; }
.hero-actions .btn-accent,
.hero-actions .btn-outline-ink { width: 100%; justify-content: center; }
.hero-media { aspect-ratio: 4/3; max-height: 300px; }
.about-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
:root { --nav-h: 64px; }
.container { --bs-gutter-x: 1.4rem; }
.hero h1 { font-size: clamp(2.2rem, 13vw, 3rem); }
.hero-media { border-radius: 16px; }
.gal-frame { height: clamp(220px,40vh,360px); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next { width: 42px; height: 42px; margin: 0 8px; }
.contact-info-card, .contact-form-card { border-radius: 16px; }
.about-panel { border-radius: 16px; }
}
/* ============================================================
FIX FINAL MOBILE — contenido normal, sin estirar el sitio
============================================================ */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body,
main,
section,
header,
footer,
.navbar {
max-width: 100%;
}
main,
section,
header,
footer {
overflow-x: clip;
}
img,
video,
iframe,
svg {
max-width: 100%;
}
.row,
[class*="col-"] {
min-width: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span {
overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
.navbar {
height: auto;
min-height: var(--nav-h);
background: #fff !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.navbar .container {
height: auto;
min-height: var(--nav-h);
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
padding-top: .42rem;
padding-bottom: .42rem;
}
.navbar-brand {
max-width: calc(100% - 58px);
min-width: 0;
gap: .5rem;
}
.brand-logo {
height: 36px;
flex: 0 0 auto;
}
.brand-text {
display: block;
max-width: min(220px, calc(100vw - 132px));
white-space: normal;
line-height: 1.06;
font-size: .86rem;
}
.navbar-toggler {
width: 44px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-left: auto;
padding: 0;
background: #fff;
}
.navbar-collapse {
flex-basis: 100%;
width: 100%;
max-width: 100%;
margin-top: .42rem;
padding: .65rem 0 .85rem;
background: #fff !important;
border-top: 1px solid rgba(0,0,0,.08);
box-shadow: none;
}
.navbar-collapse.collapsing,
.navbar-collapse.show {
background: #fff !important;
}
.navbar-nav {
width: 100%;
align-items: stretch !important;
gap: .08rem;
}
.navbar-nav .nav-item {
width: 100%;
}
.nav-link {
display: block;
width: 100%;
padding: .62rem .15rem !important;
font-size: .94rem;
border-radius: 9px;
}
.nav-link::after {
display: none;
}
.navbar-nav .btn-accent {
width: 100%;
justify-content: center;
margin-top: .2rem;
padding: .72rem 1rem;
}
.navbar-nav .ms-lg-3,
.navbar-nav .mt-lg-0 {
margin-left: 0 !important;
}
}
@media (max-width: 767.98px) {
.section {
padding: 64px 0;
}
.section-title {
font-size: clamp(1.85rem, 8.5vw, 2.55rem);
line-height: 1.08;
}
.section-sub,
.hero-copy {
font-size: .96rem;
line-height: 1.65;
}
.btn-accent,
.btn-outline-ink {
font-size: .9rem;
padding: .7rem 1.05rem;
}
}
@media (max-width: 575.98px) {
:root {
--nav-h: 64px;
}
.container {
--bs-gutter-x: 1.5rem;
}
.brand-logo {
height: 34px;
}
.brand-text {
max-width: min(205px, calc(100vw - 124px));
font-size: .8rem;
}
}
@media (max-width: 380px) {
.brand-text {
max-width: 168px;
font-size: .76rem;
}
}
@media (max-width: 767.98px) {
.hero {
min-height: auto;
padding: calc(var(--nav-h) + 34px) 0 56px;
}
.hero h1 {
font-size: clamp(2rem, 10.5vw, 2.85rem);
line-height: 1.02;
letter-spacing: -.035em;
}
.hero-actions {
margin-bottom: 1.8rem;
}
.quick-chips {
gap: .45rem;
}
.quick-chip {
font-size: .78rem;
padding: .38rem .72rem;
}
.service-card,
.reason-card {
padding: 1.25rem;
}
}
@media (max-width: 575.98px) {
.hero h1 {
font-size: clamp(1.95rem, 10vw, 2.55rem);
}
.hero-label {
font-size: .68rem;
padding: .32rem .72rem;
}
.hero-media {
max-height: 280px;
}
.hero-badge {
left: 12px;
right: 12px;
bottom: 12px;
max-width: calc(100% - 24px);
padding: .7rem .8rem;
}
.hero-badge-icon {
width: 34px;
height: 34px;
}
.contact-info-card,
.contact-form-card,
.about-panel {
border-radius: 16px;
}
}
/* ============================================================
FIX HERO PHONE — imagen después del párrafo, badge debajo
Solo afecta a mobile; desktop queda igual.
============================================================ */
@media (max-width: 767.98px) {
.hero .row.align-items-center {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 !important;
margin-left: 0;
margin-right: 0;
}
.hero .row.align-items-center > .col-lg-6 {
display: contents;
}
.hero .hero-label {
order: 1;
justify-self: start;
}
.hero h1 {
order: 2;
}
.hero .hero-copy {
order: 3;
margin-bottom: 1.15rem;
}
.hero .hero-media {
order: 4;
width: 100%;
max-height: none;
aspect-ratio: auto;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
margin: 0 0 1.2rem;
}
.hero .hero-media img {
width: 100%;
height: auto;
max-height: 285px;
object-fit: contain !important;
object-position: center;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 18px 42px rgba(0,0,0,.12);
}
.hero .hero-badge {
position: static;
inset: auto;
width: 100%;
max-width: 100%;
margin: .78rem 0 0;
padding: .74rem .85rem;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 10px 28px rgba(0,0,0,.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero .hero-badge-icon {
width: 34px;
height: 34px;
border-radius: 10px;
}
.hero .hero-actions {
order: 5;
width: 100%;
margin: 0 0 1rem;
}
.hero .quick-chips {
order: 6;
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
}
.hero .quick-chip {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
}
@media (max-width: 380px) {
.hero .hero-media img {
max-height: 250px;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
.wa-float{
--wa:#25D366;
--wa-dark:#1fb85a;
--wa-light:#ecf8f0;
--wa-border:#d7eadf;
--wa-text:#1c1f1d;
--wa-muted:#66736b;
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:0;
background:#25D366;
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 14px 34px rgba(0,0,0,.24);
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 18px 42px rgba(0,0,0,.3);
filter:brightness(.98);
}
.wa-card{
position:absolute;
right:0;
bottom:76px;
width:min(360px,92vw);
background:#fff;
color:var(--wa-text);
border-radius:20px;
overflow:hidden;
border:1px solid var(--wa-border);
box-shadow:0 20px 65px rgba(0,0,0,.26);
transform:translateY(10px);
opacity:0;
transition:transform .28s ease, opacity .28s ease;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:linear-gradient(135deg,#ffffff,#ecf8f0);
border-bottom:1px solid var(--wa-border);
}
.wa-avatar{
width:42px;
height:42px;
border-radius:12px;
background:#fff;
display:grid;
place-items:center;
border:1px solid var(--wa-border);
overflow:hidden;
flex:0 0 auto;
}
.wa-avatar img{
width:100%;
height:100%;
object-fit:contain;
padding:4px;
display:block;
}
.wa-meta{
min-width:0;
}
.wa-title{
font-size:1rem;
font-weight:800;
line-height:1.1;
color:var(--wa-text);
}
.wa-status{
margin-top:3px;
font-size:.84rem;
color:var(--wa-muted);
display:flex;
align-items:center;
gap:6px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--wa);
flex:0 0 auto;
}
.wa-close{
margin-left:auto;
width:32px;
height:32px;
border-radius:50%;
border:0;
background:transparent;
color:var(--wa-muted);
font-size:24px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s ease;
}
.wa-close:hover{
background:rgba(0,0,0,.05);
color:var(--wa-text);
}
.wa-body{
padding:13px 14px;
max-height:40vh;
overflow:auto;
background:#f7faf8;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:9px 11px;
border-radius:14px;
line-height:1.35;
font-size:.92rem;
box-shadow:0 3px 10px rgba(0,0,0,.06);
animation:waFadeIn .22s ease;
}
.wa-bot{
align-self:flex-start;
background:#fff;
border:1px solid var(--wa-border);
border-bottom-left-radius:5px;
}
.wa-user{
align-self:flex-end;
background:var(--wa);
color:#fff;
border-bottom-right-radius:5px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px 12px;
background:#fff;
border-top:1px solid var(--wa-border);
}
.wa-compose textarea{
width:100%;
min-height:44px;
max-height:120px;
resize:none;
border-radius:13px;
border:1px solid var(--wa-border);
background:#f9fbfa;
color:var(--wa-text);
outline:none;
padding:10px 12px;
font-family:inherit;
font-size:.9rem;
line-height:1.35;
transition:.2s ease;
}
.wa-compose textarea:focus{
border-color:var(--wa);
background:#fff;
box-shadow:0 0 0 3px rgba(37,211,102,.16);
}
.wa-send{
border:0;
border-radius:13px;
background:var(--wa);
color:#fff;
padding:0 16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s ease;
}
.wa-send:hover{
background:var(--wa-dark);
transform:scale(1.04);
}
.wa-body::-webkit-scrollbar{
width:6px;
}
.wa-body::-webkit-scrollbar-track{
background:rgba(0,0,0,.03);
}
.wa-body::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.14);
border-radius:999px;
}
@keyframes waFadeIn{
from{
opacity:0;
transform:translateY(5px);
}
to{
opacity:1;
transform:none;
}
}
@media (max-width:480px){
.wa-float{
right:12px;
bottom:12px;
}
.wa-btn{
width:56px;
height:56px;
}
.wa-card{
width:calc(100vw - 24px);
right:0;
bottom:70px;
border-radius:18px;
}
}