Preview de mixed.css
/* MIXED CSS PACK */
/* Template: mlconstrucciones.com.ar/index.html */
/* Template mtime: 2026-05-04 14:24:18 */
/* 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=Montserrat:wght@700;800;900&family=DM+Sans:wght@300;400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ─── Variables ─────────────────────────────────────────── */
:root {
--accent: #c6a267;
--accent-dark: #8c6a34;
--accent-soft: rgba(198,162,103,.14);
--accent-glow: rgba(198,162,103,.28);
--black: #111111;
--ink: #191714;
--muted: #6b6560;
--soft: #f8f6f1;
--line: #e9e2d6;
--white: #ffffff;
--shadow: 0 28px 80px rgba(17,17,17,.10);
--shadow-card: 0 8px 32px rgba(17,17,17,.07);
--r: 14px;
--font-display: 'Montserrat', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
/* Fuente display ajustada para acercarse al trazo grueso y geométrico del logo. */}
/* ─── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--black);
background: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* subtle grid texture */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
linear-gradient(90deg, rgba(17,17,17,.028) 1px, transparent 1px) 0 0 / 72px 72px,
linear-gradient(0deg, rgba(17,17,17,.020) 1px, transparent 1px) 0 0 / 72px 72px;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #111; }
.container { position: relative; z-index: 1; }
/* ─── Typography helpers ────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--accent-dark);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 36px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
display: inline-block;
border-radius: 2px;
}
.section-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2rem, 3.8vw, 3.2rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -.045em;
}
.section-subtitle {
margin: 18px auto 0;
max-width: 680px;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.78;
font-weight: 400;
}
/* ─── Section spacing ───────────────────────────────────── */
.section { padding: 112px 0; position: relative; }
.bg-soft {
background:
radial-gradient(ellipse 80% 50% at 100% 0%, rgba(198,162,103,.09), transparent),
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(198,162,103,.07), transparent),
var(--soft);
}
/* ─── NAVBAR ────────────────────────────────────────────── */
.navbar {
background: rgba(255,255,255,.93);
border-bottom: 1px solid rgba(17,17,17,.07);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
padding: 0;
min-height: 72px;
transition: box-shadow .3s ease, background .3s ease;
}
.navbar.scrolled {
box-shadow: 0 4px 30px rgba(17,17,17,.10);
}
.navbar .container {
min-height: 72px;
display: flex;
align-items: center;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 13px;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.18rem;
letter-spacing: -.04em;
line-height: 1.15;
}
.navbar-brand img {
height: 42px;
width: auto;
object-fit: contain;
flex: 0 0 auto;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.10));
}
.navbar-toggler {
border: 1.5px solid rgba(0,0,0,.16);
border-radius: 10px;
padding: 8px 10px;
box-shadow: none !important;
transition: border-color .2s;
}
.navbar-toggler:hover { border-color: var(--accent); }
.navbar-nav .nav-link {
color: #2a2a2a;
font-size: .9rem;
font-weight: 600;
padding: 8px 13px;
position: relative;
letter-spacing: .01em;
transition: color .2s;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: 13px; right: 13px;
bottom: 2px;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s cubic-bezier(.4,0,.2,1);
border-radius: 2px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--accent-dark); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after { transform: scaleX(1); }
/* ─── Buttons ───────────────────────────────────────────── */
.btn-accent {
background: var(--accent);
border: 1.5px solid var(--accent);
color: #111;
font-weight: 700;
font-family: var(--font-body);
font-size: .92rem;
letter-spacing: .02em;
border-radius: var(--r);
padding: 13px 26px;
box-shadow: 0 8px 24px rgba(198,162,103,.30);
transition: all .22s cubic-bezier(.4,0,.2,1);
white-space: nowrap;
}
.btn-accent:hover, .btn-accent:focus {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(140,106,52,.36);
}
.btn-outline-dark {
border: 1.5px solid rgba(17,17,17,.22);
border-radius: var(--r);
padding: 13px 26px;
font-weight: 700;
font-size: .92rem;
background: rgba(255,255,255,.8);
transition: all .22s cubic-bezier(.4,0,.2,1);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
border-color: var(--accent);
color: var(--accent-dark);
background: rgba(255,255,255,1);
transform: translateY(-2px);
}
/* ─── HERO ──────────────────────────────────────────────── */
.hero {
padding: 148px 0 100px;
position: relative;
overflow: hidden;
}
/* decorative blobs */
.hero-blob-1, .hero-blob-2 {
position: absolute;
pointer-events: none;
border-radius: 50%;
filter: blur(80px);
}
.hero-blob-1 {
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(198,162,103,.15), transparent 70%);
top: -180px; right: -120px;
animation: blobFloat 8s ease-in-out infinite alternate;
}
.hero-blob-2 {
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(198,162,103,.10), transparent 70%);
bottom: -80px; left: -80px;
animation: blobFloat 11s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat {
from { transform: translate(0,0) scale(1); }
to { transform: translate(20px,-18px) scale(1.04); }
}
/* watermark */
.hero::before {
content: "ML";
position: absolute;
right: -1vw; top: 60px;
color: rgba(17,17,17,.032);
font-family: var(--font-display);
font-size: clamp(9rem, 20vw, 19rem);
font-weight: 900;
line-height: 1;
pointer-events: none;
z-index: 0;
}
/* bottom rule */
.hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(198,162,103,.6), transparent);
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2.8rem, 5.5vw, 5rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -.055em;
max-width: 680px;
margin: 0;
text-wrap: balance;
}
.hero h1 .accent-word {
color: var(--accent-dark);
position: relative;
display: inline-block;
}
.hero h1 .accent-word::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 4px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
animation: underlineIn .7s .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes underlineIn {
to { transform: scaleX(1); }
}
.hero p {
max-width: 580px;
margin: 24px 0 0;
color: #4a4640;
font-size: clamp(.98rem, 1.4vw, 1.12rem);
line-height: 1.82;
font-weight: 400;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.hero-media-mobile {
display: none;
margin: 26px 0 0;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 28px;
max-width: 600px;
}
.hero-tags span {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 33px;
padding: 6px 13px;
border: 1px solid rgba(198,162,103,.38);
border-radius: 999px;
background: rgba(255,255,255,.85);
color: #302b22;
font-size: .82rem;
font-weight: 600;
letter-spacing: .01em;
box-shadow: 0 2px 12px rgba(17,17,17,.04);
transition: border-color .2s, background .2s;
}
.hero-tags span:hover {
border-color: var(--accent);
background: rgba(255,255,255,1);
}
.hero-tags span::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
flex: 0 0 auto;
}
/* Hero image */
.hero-media {
min-height: 540px;
border-radius: 20px;
overflow: hidden;
background: var(--soft);
border: 1px solid rgba(198,162,103,.28);
box-shadow: 0 40px 100px rgba(17,17,17,.13);
position: relative;
isolation: isolate;
}
/* inner frame glow */
.hero-media::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
z-index: 2;
pointer-events: none;
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(255,255,255,.04) 0%,
transparent 40%,
rgba(17,17,17,.18) 100%
);
z-index: 1;
pointer-events: none;
}
.hero-media img {
width: 100%;
height: 100%;
min-height: 540px;
object-fit: cover;
object-position: center;
display: block;
transition: transform .6s ease;
}
.hero-media:hover img { transform: scale(1.03); }
/* badge on image */
.hero-badge {
position: absolute;
bottom: 24px;
left: 24px;
z-index: 3;
background: rgba(255,255,255,.94);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 28px rgba(17,17,17,.10);
}
.hero-badge .badge-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-dark);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex: 0 0 auto;
}
.hero-badge .badge-text strong {
display: block;
font-size: .88rem;
font-weight: 800;
color: var(--ink);
}
.hero-badge .badge-text span {
font-size: .75rem;
color: var(--muted);
font-weight: 500;
}
/* ─── ABOUT ─────────────────────────────────────────────── */
.about-panel {
border: 1px solid var(--line);
border-radius: var(--r);
padding: 36px 40px;
background: #fff;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
/* left accent bar */
.about-panel::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--accent), var(--accent-dark));
border-radius: 4px 0 0 4px;
}
/* corner ornament */
.about-panel::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 120px; height: 120px;
border-top: 1px solid rgba(198,162,103,.22);
border-left: 1px solid rgba(198,162,103,.22);
border-radius: 0 0 var(--r) 0;
pointer-events: none;
}
.about-panel p {
color: #3f3b37;
font-size: 1.03rem;
line-height: 1.84;
margin: 0;
position: relative;
}
.about-panel p + p { margin-top: 16px; }
/* stat pills */
.about-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.stat-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 12px;
}
.stat-pill strong {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 900;
color: var(--ink);
line-height: 1;
}
.stat-pill span {
font-size: .78rem;
font-weight: 600;
color: var(--muted);
line-height: 1.3;
max-width: 60px;
}
/* ─── SERVICES ──────────────────────────────────────────── */
.service-card {
height: 100%;
border: 1px solid var(--line);
border-radius: var(--r);
padding: 32px;
background: #fff;
box-shadow: var(--shadow-card);
transition: transform .28s cubic-bezier(.4,0,.2,1),
box-shadow .28s cubic-bezier(.4,0,.2,1),
border-color .28s ease;
position: relative;
overflow: hidden;
}
/* numbered watermark */
.service-card .card-num {
position: absolute;
right: 20px; top: 14px;
font-family: var(--font-display);
font-size: 4.5rem;
font-weight: 900;
color: rgba(17,17,17,.05);
line-height: 1;
pointer-events: none;
transition: color .28s;
}
/* top accent line */
.service-card::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* icon */
.service-icon {
width: 52px; height: 52px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-soft);
color: var(--accent-dark);
font-size: 1.45rem;
margin-bottom: 20px;
transition: background .28s, transform .28s;
box-shadow: inset 0 0 0 1px rgba(198,162,103,.18);
}
.service-card:hover {
transform: translateY(-7px);
border-color: rgba(198,162,103,.5);
box-shadow: 0 24px 60px rgba(17,17,17,.10);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover .service-icon {
background: var(--accent);
color: #111;
transform: scale(1.08) rotate(-4deg);
}
.service-card:hover .card-num { color: rgba(198,162,103,.12); }
.service-card h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 800;
letter-spacing: -.035em;
}
.service-card p {
margin: 0;
color: var(--muted);
font-size: .93rem;
line-height: 1.74;
}
/* ─── REASONS ───────────────────────────────────────────── */
.reason-card {
height: 100%;
border: 1px solid var(--line);
border-radius: var(--r);
padding: 28px 30px;
background: #fff;
box-shadow: var(--shadow-card);
display: flex;
align-items: center;
gap: 20px;
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
position: relative;
overflow: hidden;
}
.reason-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(198,162,103,.08), transparent 55%);
opacity: 0;
transition: opacity .24s;
}
.reason-card:hover {
transform: translateY(-5px);
border-color: rgba(198,162,103,.45);
box-shadow: 0 18px 50px rgba(17,17,17,.09);
}
.reason-card:hover::before { opacity: 1; }
.icon-box {
width: 52px; height: 52px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
background: var(--accent-soft);
color: var(--accent-dark);
font-size: 1.4rem;
box-shadow: inset 0 0 0 1px rgba(198,162,103,.22);
transition: background .24s, transform .24s;
position: relative;
}
.reason-card:hover .icon-box {
background: var(--accent);
color: #111;
transform: rotate(-6deg) scale(1.06);
}
.reason-card h3 {
margin: 0;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.035em;
position: relative;
}
/* ─── ACCORDION / FAQs ──────────────────────────────────── */
.accordion {
--bs-accordion-border-color: var(--line);
--bs-accordion-border-radius: var(--r);
--bs-accordion-inner-border-radius: var(--r);
--bs-accordion-btn-focus-box-shadow: 0 0 0 .18rem rgba(198,162,103,.22);
--bs-accordion-active-bg: #fff;
--bs-accordion-active-color: var(--ink);
}
.accordion-item {
margin-bottom: 12px;
border-radius: var(--r) !important;
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--line) !important;
transition: box-shadow .22s;
}
.accordion-item:hover {
box-shadow: 0 12px 40px rgba(17,17,17,.09);
}
.accordion-button {
font-family: var(--font-body);
font-weight: 700;
font-size: .97rem;
padding: 22px 26px;
letter-spacing: .005em;
color: var(--ink);
background: #fff !important;
transition: color .2s;
}
.accordion-button:not(.collapsed) {
color: var(--accent-dark);
}
.accordion-button::after {
filter: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c6a267' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}
.accordion-body {
color: var(--muted);
font-size: .95rem;
line-height: 1.76;
padding: 4px 26px 24px;
background: #fff;
}
/* FAQ number badge */
.faq-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-dark);
font-size: .75rem;
font-weight: 800;
flex: 0 0 auto;
margin-right: 12px;
}
/* ─── CONTACT ───────────────────────────────────────────── */
.contact-box {
border-radius: 20px;
border: 1px solid var(--line);
padding: 42px;
background: #fff;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
/* top golden bar */
.contact-box::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
/* decorative corner */
.contact-box::after {
content: "";
position: absolute;
bottom: -40px; right: -40px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(198,162,103,.10), transparent 70%);
pointer-events: none;
}
.form-label {
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #4a4640;
margin-bottom: 7px;
}
.form-control, .form-select {
border: 1.5px solid #ddd5c9;
border-radius: 10px;
min-height: 52px;
padding: 12px 15px;
font-family: var(--font-body);
font-weight: 500;
font-size: .95rem;
background: #fffdfa;
transition: border-color .2s, box-shadow .2s;
color: var(--ink);
}
textarea.form-control {
min-height: 136px;
resize: vertical;
}
.form-control:focus, .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 .18rem rgba(198,162,103,.20);
background: #fff;
}
.contact-side-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 34px;
box-shadow: var(--shadow-card);
position: sticky;
top: 96px;
}
.contact-list { display: grid; gap: 6px; margin-top: 24px; }
.contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 14px 16px;
border-radius: 12px;
background: var(--soft);
border: 1px solid var(--line);
color: #222;
font-weight: 600;
font-size: .93rem;
overflow-wrap: anywhere;
transition: border-color .2s, background .2s;
}
a.contact-item:hover {
border-color: rgba(198,162,103,.5);
background: rgba(255,255,255,1);
color: var(--accent-dark);
}
a.contact-item:hover .icon-box {
background: var(--accent);
color: #111;
}
.hp-field {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
/* ─── FOOTER ────────────────────────────────────────────── */
.site-footer {
background: var(--accent);
color: #111;
padding: 64px 0 28px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "ML";
position: absolute;
right: -10px; bottom: -30px;
color: rgba(17,17,17,.07);
font-family: var(--font-display);
font-size: clamp(6rem, 14vw, 13rem);
font-weight: 900;
line-height: 1;
pointer-events: none;
}
.site-footer::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(255,255,255,.3);
}
.footer-brand {
display: flex;
align-items: center;
gap: 13px;
font-family: var(--font-display);
font-size: 1.12rem;
font-weight: 800;
letter-spacing: -.04em;
position: relative;
z-index: 1;
}
.footer-brand img {
width: auto; height: 42px;
object-fit: contain; flex: 0 0 auto;
}
.footer-desc {
margin-top: 14px;
font-size: .85rem;
font-weight: 500;
color: rgba(17,17,17,.72);
line-height: 1.7;
max-width: 240px;
position: relative;
z-index: 1;
}
.site-footer h3 {
margin: 0 0 16px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .14em;
position: relative;
z-index: 1;
color: rgba(17,17,17,.55);
}
.site-footer ul {
list-style: none;
padding: 0; margin: 0;
display: grid;
gap: 10px;
position: relative;
z-index: 1;
}
.site-footer a,
.site-footer li,
.site-footer p {
color: #111;
font-size: 14px;
font-weight: 600;
}
.site-footer a {
transition: opacity .18s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-footer a:hover { opacity: .7; text-decoration: none; }
.footer-bottom {
margin-top: 42px;
padding-top: 20px;
border-top: 1px solid rgba(0,0,0,.18);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.footer-bottom p { margin: 0; font-size: 13px; }
/* ─── GALLERY (unchanged) ───────────────────────────────── */
.gal-gallery .carousel {
max-width: 980px;
margin-inline: auto;
position: relative;
}
.gal-frame {
height: clamp(220px,48vh,500px);
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0,0,0,.12);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.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,.55);
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,.5);
border: none;
}
.gal-gallery .carousel-indicators button.active { background: #000; }
.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; }
/* ─── Scroll reveal ─────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .62s cubic-bezier(.4,0,.2,1),
transform .62s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
opacity: 1;
transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 12px;
padding: 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: 0 20px 48px rgba(17,17,17,.11);
}
.navbar-nav { gap: 2px; }
.navbar-nav .nav-link { padding: 11px 10px; }
.navbar-nav .nav-link::after { left: 10px; right: auto; width: 30px; bottom: 5px; }
.navbar .btn-accent { width: 100%; margin-top: 10px; }
.hero { padding: 114px 0 72px; }
.hero-media, .hero-media img { min-height: 400px; }
.about-panel { padding: 28px 30px; }
.contact-side-card { position: static; }
.contact-box { padding: 32px; }
}
@media (max-width: 575.98px) {
.section { padding: 76px 0; }
.navbar-brand { max-width: calc(100vw - 96px); }
.hero { padding: 110px 0 64px; }
.hero-media-mobile { display: block; }
.hero-media-desktop-col { display: none; }
.hero-actions { margin-top: 24px; }
.hero-actions .btn { width: 100%; }
.hero-tags { gap: 8px; margin-top: 22px; }
.hero-media, .hero-media img { min-height: 310px; }
.hero-media-mobile { overflow: visible; }
.hero-media-mobile img {
height: auto;
object-fit: contain;
padding: 16px;
background: var(--soft);
}
.hero-media-mobile .hero-badge {
position: relative;
bottom: auto;
left: auto;
z-index: 3;
width: calc(100% - 24px);
margin: 12px auto;
padding: 11px 14px;
justify-content: center;
}
.about-panel { padding: 22px 24px; }
.service-card { padding: 26px; }
.contact-box { padding: 24px; }
.gal-frame { height: clamp(200px,40vh,360px); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next { width: 42px; height: 42px; margin: 0 6px; }
.site-footer::before { display: none; }
.stat-pill strong { font-size: 1.25rem; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root {
--wa: #25D366;
--wa-dark: #1fb85a;
--wa-light: #ecf8f0;
--wa-card-bg: #ffffff;
--wa-soft: #f6f8f7;
--wa-border: #dde4df;
--wa-text: #1c1f1d;
--wa-muted: #6c756f;
}
.wa-float {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: inherit;
}
.wa-btn {
width: 62px;
height: 62px;
border: 0;
border-radius: 999px;
background: var(--wa);
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,.30);
filter: brightness(.98);
}
.wa-card {
position: absolute;
right: 0;
bottom: 78px;
width: min(365px, 92vw);
background: var(--wa-card-bg);
color: var(--wa-text);
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--wa-border);
box-shadow: 0 22px 70px rgba(0,0,0,.26);
transform: translateY(12px);
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, var(--wa-light));
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 #dce7df;
overflow: hidden;
flex: 0 0 auto;
}
.wa-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wa-title {
font-weight: 800;
font-size: 1rem;
color: var(--wa-text);
line-height: 1.15;
}
.wa-status {
margin-top: 2px;
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);
}
.wa-close {
margin-left: auto;
width: 32px;
height: 32px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--wa-muted);
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, color .2s ease;
}
.wa-close:hover {
background: rgba(0,0,0,.05);
color: var(--wa-text);
}
.wa-body {
padding: 13px 14px;
max-height: 42vh;
overflow: auto;
background: var(--wa-soft);
display: flex;
flex-direction: column;
gap: 8px;
}
.wa-bubble {
max-width: 88%;
padding: 10px 12px;
border-radius: 15px;
line-height: 1.35;
font-size: .9rem;
box-shadow: 0 4px 12px rgba(0,0,0,.06);
animation: waFade .22s ease;
}
.wa-bot {
background: #fff;
border: 1px solid var(--wa-border);
align-self: flex-start;
border-bottom-left-radius: 5px;
}
.wa-user {
background: var(--wa);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 5px;
}
.wa-compose {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 11px 12px;
background: #fff;
border-top: 1px solid var(--wa-border);
}
.wa-compose textarea {
min-height: 46px;
max-height: 120px;
resize: none;
border-radius: 13px;
padding: 10px 12px;
border: 1px solid var(--wa-border);
background: #f9fbfa;
color: var(--wa-text);
outline: none;
font-family: inherit;
font-size: .9rem;
line-height: 1.35;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-compose textarea:focus {
border-color: var(--wa);
background: #fff;
box-shadow: 0 0 0 3px rgba(37,211,102,.14);
}
.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: transform .2s ease, background .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);
border-radius: 3px;
}
.wa-body::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.14);
border-radius: 3px;
}
@keyframes waFade {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 480px) {
.wa-float {
right: 12px;
bottom: 12px;
}
.wa-btn {
width: 58px;
height: 58px;
}
.wa-card {
width: calc(100vw - 24px);
right: 0;
bottom: 72px;
border-radius: 18px;
}
}