Preview de mixed.css
/* MIXED CSS PACK */
/* Template: cuider.com.ar/index.html */
/* Template mtime: 2026-04-09 11:58:11 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&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 {
--bg: #f4f8f2;
--surface: #ffffff;
--text: #0e1a12;
--muted: #526159;
--line: #d8e8ce;
--accent: #16636f;
--accent2: #4d9e60;
--accent-dark: #0f4a55;
--accent-soft: #e2f0e8;
--accent-glow: rgba(22, 99, 111, 0.18);
--footer: #16636f;
--shadow-sm: 0 2px 12px rgba(14,26,18,.06);
--shadow: 0 8px 32px rgba(14,26,18,.10);
--shadow-lg: 0 20px 60px rgba(14,26,18,.14);
--radius: 24px;
--radius-sm: 16px;
--container: 1200px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--text);
background: #f4f8f2;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
/* ========== ANIMATED BACKGROUND ========== */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 85% -10%, rgba(77,158,96,.13) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at -10% 80%, rgba(22,99,111,.10) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(226,240,232,.5) 0%, transparent 70%),
linear-gradient(160deg, #f8fcf6 0%, #eef5ec 50%, #e8f2f4 100%);
z-index: -2;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(circle, rgba(22,99,111,.06) 1px, transparent 1px);
background-size: 36px 36px;
z-index: -1;
pointer-events: none;
opacity: 0.6;
}
/* ========== LAYOUT ========== */
.container-custom { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-soft {
background: linear-gradient(180deg, rgba(77,158,96,.06) 0%, rgba(255,255,255,.7) 100%);
position: relative;
}
.section-soft::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line), transparent);
}
/* ========== TYPOGRAPHY ========== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.8));
color: var(--accent-dark);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border: 1px solid rgba(22,99,111,.14);
box-shadow: 0 2px 8px rgba(22,99,111,.08);
transition: transform .2s ease, box-shadow .2s ease;
}
.eyebrow:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22,99,111,.14); }
.eyebrow::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(22,99,111,.2);
}
.section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 16px 0 14px;
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 1.06;
font-weight: 800;
letter-spacing: -.04em;
background: linear-gradient(135deg, var(--text) 0%, var(--accent-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
max-width: 680px;
margin: 0 auto;
color: var(--muted);
font-size: 1.05rem;
line-height: 1.8;
font-weight: 400;
}
/* ========== NAVBAR ========== */
.navbar-wrap {
position: sticky;
top: 0;
z-index: 1030;
padding: 0;
transition: padding .3s ease, box-shadow .3s ease;
}
.navbar-wrap.scrolled {
background: rgba(248,252,246,.94);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(22,99,111,.10);
box-shadow: 0 4px 24px rgba(14,26,18,.08);
padding: 0;
}
.navbar-inner {
background: rgba(248,252,246,.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(22,99,111,.10);
transition: all .3s ease;
}
.navbar { padding: 0; }
.navbar .container-custom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 68px;
}
.navbar-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text);
}
.navbar-brand img {
height: 38px;
width: auto;
object-fit: contain;
transition: transform .3s ease;
}
.navbar-brand:hover img { transform: scale(1.06) rotate(-3deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.02em;
color: var(--text);
}
.brand-copy span {
font-size: .76rem;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
}
.navbar-toggler {
border: 0;
box-shadow: none !important;
padding: 9px 11px;
border-radius: 12px;
background: var(--accent-soft);
border: 1px solid rgba(22,99,111,.12);
transition: background .2s ease;
}
.navbar-toggler:hover { background: rgba(22,99,111,.14); }
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2814,26,18,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav { gap: 4px; }
.nav-link {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text);
font-weight: 600;
font-size: .9rem;
padding: 9px 14px !important;
border-radius: 12px;
transition: all .2s ease;
position: relative;
letter-spacing: -.01em;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 4px; left: 50%; right: 50%;
height: 2px;
background: var(--accent);
border-radius: 2px;
transition: left .25s ease, right .25s ease;
}
.nav-link:hover, .nav-link:focus {
color: var(--accent-dark);
background: var(--accent-soft);
}
.nav-link:hover::after { left: 14px; right: 14px; }
/* ========== BUTTONS ========== */
.btn-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 14px;
padding: 14px 24px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: .95rem;
letter-spacing: -.01em;
border: 0;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease;
}
.btn-main::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
pointer-events: none;
}
.btn-main-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(22,99,111,.32), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-main-primary:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(22,99,111,.42), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-main-secondary {
background: rgba(255,255,255,.9);
color: var(--text);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.btn-main-secondary:hover {
color: var(--text);
transform: translateY(-2px);
box-shadow: var(--shadow);
background: #fff;
}
.navbar-cta { padding: 11px 20px; border-radius: 12px; }
/* ========== HERO ========== */
.hero {
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
.hero-deco {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(60px);
}
.hero-deco-1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(77,158,96,.18), transparent 70%);
top: -200px; right: -100px;
animation: floatDeco 8s ease-in-out infinite;
}
.hero-deco-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(22,99,111,.14), transparent 70%);
bottom: -100px; left: -80px;
animation: floatDeco 10s ease-in-out infinite reverse;
}
@keyframes floatDeco {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.04); }
66% { transform: translate(-15px, 20px) scale(.97); }
}
.hero-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 52px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-copy { position: relative; z-index: 2; }
.hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 18px 0 18px;
font-size: clamp(2.6rem, 5.2vw, 4.8rem);
line-height: .96;
font-weight: 800;
letter-spacing: -.05em;
max-width: 680px;
color: var(--text);
}
.hero-title span {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text {
max-width: 600px;
color: var(--muted);
font-size: 1.08rem;
line-height: 1.85;
font-weight: 400;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.hero-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 36px;
}
.hero-point {
background: rgba(255,255,255,.8);
border: 1px solid rgba(22,99,111,.12);
border-radius: 18px;
padding: 18px 16px;
box-shadow: var(--shadow-sm);
backdrop-filter: blur(8px);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
position: relative;
overflow: hidden;
}
.hero-point::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.hero-point:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: rgba(22,99,111,.22);
}
.hero-point:hover::before { transform: scaleX(1); }
.hero-point strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .95rem;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: -.01em;
}
.hero-point span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.hero-visual { position: relative; z-index: 1; }
.hero-card {
position: relative;
border-radius: 32px;
overflow: hidden;
background: rgba(255,255,255,.85);
backdrop-filter: blur(12px);
box-shadow:
0 0 0 1px rgba(22,99,111,.12),
0 32px 80px rgba(14,26,18,.16),
inset 0 1px 0 rgba(255,255,255,.7);
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.hero-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(77,158,96,.10) 0%, rgba(255,255,255,0) 50%);
pointer-events: none;
}
.hero-card::after {
content: '';
position: absolute;
top: -50%; right: -50%;
width: 100%; height: 100%;
background: radial-gradient(circle, rgba(22,99,111,.08), transparent 60%);
pointer-events: none;
}
.hero-image-frame {
width: 100%;
height: 100%;
min-height: 480px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(145deg, #eef7ec, #e2f0f3);
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-frame img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* ========== ABOUT ========== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.card-base {
background: rgba(255,255,255,.9);
border: 1px solid rgba(22,99,111,.10);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(8px);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-base:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(22,99,111,.2);
}
.about-card, .about-highlight, .service-card, .why-card,
.contact-card, .contact-form-card, .faq-item {
background: rgba(255,255,255,.9);
border: 1px solid rgba(22,99,111,.10);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(8px);
}
.about-card, .about-highlight { padding: 36px; }
.about-card p {
margin: 0 0 16px;
color: var(--muted);
line-height: 1.9;
font-size: 1rem;
}
.about-card p:last-child { margin-bottom: 0; }
.about-highlight {
background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(242,249,240,.9));
}
.about-list { display: grid; gap: 6px; margin-top: 20px; }
.about-list-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px;
border-radius: 14px;
transition: background .2s ease;
}
.about-list-item:hover { background: rgba(22,99,111,.04); }
.dot {
width: 10px; height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
margin-top: 7px;
flex: 0 0 auto;
box-shadow: 0 0 0 4px rgba(22,99,111,.12), 0 0 0 8px rgba(22,99,111,.04);
}
.about-list-item strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .97rem;
margin-bottom: 4px;
font-weight: 700;
letter-spacing: -.01em;
}
.about-list-item span { color: var(--muted); line-height: 1.65; font-size: .94rem; }
/* ========== SERVICE / WHY CARDS ========== */
.services-grid, .why-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 52px;
}
.service-card, .why-card {
padding: 30px;
min-height: 100%;
position: relative;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card::after, .why-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.service-card:hover, .why-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(22,99,111,.2);
}
.service-card:hover::after, .why-card:hover::after { transform: scaleX(1); }
.service-icon, .why-icon {
width: 56px; height: 56px;
border-radius: 16px;
background: linear-gradient(145deg, var(--accent-soft), rgba(255,255,255,.9));
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border: 1px solid rgba(22,99,111,.10);
box-shadow: 0 4px 12px rgba(22,99,111,.10);
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.service-card:hover .service-icon,
.why-card:hover .why-icon {
transform: scale(1.1) rotate(-5deg);
background: linear-gradient(145deg, rgba(22,99,111,.14), var(--accent-soft));
box-shadow: 0 8px 20px rgba(22,99,111,.18);
}
.service-card h3, .why-card h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 0 0 10px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -.02em;
}
.service-card p, .why-card p { margin: 0; color: var(--muted); line-height: 1.8; font-size: .95rem; }
/* ========== GALLERY ========== */
.gal-gallery .carousel { max-width: 960px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(280px, 54vh, 500px);
background: rgba(255,255,255,.9);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid rgba(22,99,111,.10);
}
.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;
transition: transform .3s ease;
}
.gal-img:hover { transform: scale(1.02); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 52px; height: 52px;
top: 50%; transform: translateY(-50%);
opacity: 1;
background: rgba(14,26,18,.55);
backdrop-filter: blur(8px);
border-radius: 50%;
margin: 0 14px;
border: 1px solid rgba(255,255,255,.15);
transition: background .2s ease, transform .2s ease;
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover {
background: rgba(14,26,18,.78);
transform: translateY(-50%) scale(1.06);
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon { width: 2.4rem; height: 2.4rem; background-size: 55% 55%; }
.gal-gallery .carousel-indicators { z-index: 10; bottom: -52px; }
.gal-gallery .carousel-indicators button {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(14,26,18,.25);
border: none;
margin: 0 5px;
transition: background .2s ease, transform .2s ease;
}
.gal-gallery .carousel-indicators button.active {
background: var(--accent);
transform: scale(1.35);
}
.gal-gallery { padding-bottom: 64px; }
#galLightbox .modal-content { background: rgba(10,18,12,.96); backdrop-filter: blur(20px); }
#galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; }
.gal-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; width: 46px; height: 46px;
border-radius: 50%;
background: rgba(255,255,255,.16);
backdrop-filter: blur(8px);
color: #fff; font-size: 28px; line-height: 46px; text-align: center;
z-index: 5; cursor: pointer;
transition: background .2s ease, transform .22s ease;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.gal-lightbox-nav.gal-prev { left: 12px; }
.gal-lightbox-nav.gal-next { right: 12px; }
/* ========== FAQ ========== */
.faq-wrap { max-width: 920px; margin: 52px auto 0; display: grid; gap: 14px; }
.faq-item {
overflow: hidden;
transition: box-shadow .3s ease, border-color .3s ease;
}
.faq-item:hover { border-color: rgba(22,99,111,.2); }
.faq-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 26px;
background: transparent;
border: 0;
text-align: left;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
transition: color .2s ease;
}
.faq-button:hover { color: var(--accent-dark); }
.faq-button .faq-sign {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent-soft);
border: 1px solid rgba(22,99,111,.12);
display: grid;
place-items: center;
color: var(--accent-dark);
font-size: 1.2rem;
flex: 0 0 auto;
transition: transform .3s ease, background .2s ease;
}
.faq-button[aria-expanded="true"] .faq-sign {
transform: rotate(45deg);
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.faq-body { padding: 0 26px 24px; color: var(--muted); line-height: 1.8; font-size: .97rem; }
/* ========== CONTACT ========== */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; margin-top: 48px; }
.contact-card, .contact-form-card { padding: 34px; }
.contact-card { background: linear-gradient(145deg, rgba(22,99,111,.04), rgba(77,158,96,.06)); }
.contact-stack { display: grid; gap: 14px; margin-top: 22px; }
.contact-item {
padding: 16px 18px;
border-radius: 16px;
background: rgba(255,255,255,.7);
border: 1px solid var(--line);
backdrop-filter: blur(8px);
transition: transform .2s ease, box-shadow .2s ease;
}
.contact-item:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.contact-item strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .9rem;
font-weight: 700;
margin-bottom: 4px;
color: var(--accent-dark);
letter-spacing: .01em;
text-transform: uppercase;
font-size: .76rem;
}
.contact-item span, .contact-item a { color: var(--muted); word-break: break-word; font-size: .97rem; }
.contact-item a:hover { color: var(--accent-dark); }
.form-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: .88rem;
margin-bottom: 7px;
color: var(--text);
letter-spacing: .01em;
}
.form-control, .form-select {
border-radius: 14px;
min-height: 52px;
border: 1.5px solid #d4e4ca;
padding: 13px 16px;
box-shadow: none !important;
background: rgba(255,255,255,.8);
font-family: 'DM Sans', sans-serif;
font-size: .97rem;
color: var(--text);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea.form-control { min-height: 140px; resize: vertical; }
.form-control:focus, .form-select:focus {
border-color: var(--accent);
background: #fff;
box-shadow: 0 0 0 4px rgba(22,99,111,.10) !important;
}
/* ========== FOOTER ========== */
.footer {
background: linear-gradient(160deg, var(--accent-dark) 0%, var(--accent) 60%, #1d8a6e 100%);
color: #fff;
padding: 72px 0 24px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
}
.footer::after {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(77,158,96,.3), transparent 65%);
pointer-events: none;
}
.footer .container-custom { position: relative; z-index: 1; }
.footer a { color: rgba(255,255,255,.85); transition: color .2s ease; }
.footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 32px; align-items: start; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.footer-brand img { height: 38px; width: auto; object-fit: contain; }
.footer-brand span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -.02em;
}
.footer-title {
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 0 0 18px;
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
}
.footer-copy { margin: 16px 0 0; max-width: 380px; line-height: 1.8; color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-nav, .footer-contact { display: grid; gap: 10px; }
.footer-nav a, .footer-contact span, .footer-contact a {
font-size: .95rem;
color: rgba(255,255,255,.78);
padding: 2px 0;
}
.footer-nav a:hover { color: #fff; padding-left: 4px; transition: all .2s ease; }
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
border-top: 1px solid rgba(255,255,255,.15);
margin-top: 36px;
padding-top: 22px;
color: rgba(255,255,255,.65);
font-size: .88rem;
}
/* ========== SCROLL ANIMATIONS ========== */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .hero-card, .hero-deco-1, .hero-deco-2 {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ========== BACK TO TOP ========== */
.back-to-top {
position: fixed;
bottom: 100px;
right: 22px;
width: 46px; height: 46px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all .3s ease;
z-index: 1040;
box-shadow: 0 6px 20px rgba(22,99,111,.38);
font-size: 20px;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(22,99,111,.46); }
/* ========== RESPONSIVE ========== */
@media (max-width: 1199.98px) {
.hero-points { grid-template-columns: 1fr 1fr; }
.services-grid, .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(255,255,255,.96);
border: 1px solid rgba(22,99,111,.14);
box-shadow: var(--shadow-lg);
border-radius: 20px;
margin-top: 12px;
padding: 14px;
backdrop-filter: blur(16px);
}
.navbar-actions { margin-top: 8px; }
.hero { padding-top: 50px; }
.hero-grid, .about-grid, .contact-grid, .footer-top { grid-template-columns: 1fr; }
.hero-visual { order: 2; }
.hero-copy { order: 1; }
.hero-card, .hero-image-frame { min-height: auto; }
.hero-image-frame { height: 420px; }
.hero-card { animation: none; }
.section { padding: 80px 0; }
}
@media (max-width: 767.98px) {
.hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
.hero-text { font-size: 1rem; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-points { grid-template-columns: 1fr; }
.services-grid, .why-grid { grid-template-columns: 1fr; }
.about-card, .about-highlight, .service-card, .why-card,
.contact-card, .contact-form-card { padding: 24px; }
.gal-frame { height: clamp(240px, 40vh, 360px); }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
.container-custom { padding: 0 16px; }
.hero { padding: 40px 0 70px; }
.hero-image-frame { height: 300px; }
.faq-button { padding: 18px; }
.faq-body { padding: 0 18px 20px; }
.contact-card, .contact-form-card { padding: 20px; }
}
/* ========== NAV FIX MOBILE ========== */
html, body {
max-width: 100%;
overflow-x: clip;
}
.navbar,
.navbar-inner,
.navbar .container-custom,
.navbar-collapse {
width: 100%;
max-width: 100%;
min-width: 0;
}
.navbar .container-custom {
flex-wrap: nowrap;
}
.navbar-brand {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.brand-copy {
min-width: 0;
}
.brand-copy strong,
.brand-copy span {
overflow: hidden;
text-overflow: ellipsis;
}
.navbar-toggler {
flex: 0 0 auto;
margin-left: auto;
}
.navbar-actions {
min-width: 0;
}
@media (max-width: 991.98px) {
.navbar-inner {
background: #f8fcf6 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.navbar {
overflow: visible;
}
.navbar .container-custom {
min-height: 68px;
gap: 10px;
}
#mainNav,
#mainNav.show,
#mainNav.collapsing,
.navbar-collapse {
position: absolute;
top: calc(100% + 8px);
left: 16px;
right: 16px;
width: auto;
z-index: 1040;
margin-top: 0;
padding: 14px;
background: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
border: 1px solid rgba(22,99,111,.16);
box-shadow: 0 18px 40px rgba(14,26,18,.18);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.navbar-nav {
width: 100%;
gap: 6px;
}
.navbar-nav .nav-item,
.navbar-nav .nav-link,
.navbar-actions,
.navbar-actions .navbar-cta {
width: 100%;
}
.nav-link {
display: block;
padding: 12px 14px !important;
background: #ffffff !important;
color: var(--text) !important;
opacity: 1 !important;
}
.nav-link:hover,
.nav-link:focus {
background: var(--accent-soft);
color: var(--accent-dark);
}
.nav-link::after {
display: none;
}
.navbar-actions {
margin-top: 10px;
}
.navbar-cta {
justify-content: center;
}
}
@media (max-width: 575.98px) {
.navbar .container-custom {
gap: 8px;
min-height: 64px;
}
.navbar-brand img {
height: 34px;
}
.brand-copy strong {
font-size: .96rem;
}
.brand-copy span {
font-size: .7rem;
}
.navbar-toggler {
padding: 8px 10px;
}
#mainNav,
#mainNav.show,
#mainNav.collapsing,
.navbar-collapse {
left: 12px;
right: 12px;
padding: 12px;
border-radius: 18px;
background: #ffffff !important;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
.wa-float { position:fixed;right:18px;bottom:18px;z-index:2147483647;display:flex;flex-direction:column;align-items:flex-end;font-family:inherit; }
.wa-btn { width:60px;height:60px;border:none;border-radius:50%;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-btn:hover { transform:translateY(-3px) scale(1.05);box-shadow:0 14px 36px rgba(37,211,102,.55); }
.wa-card { position:absolute;right:0;bottom:74px;width:min(360px,92vw);background:#fff;border:1px solid #e3e6ea;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.22);overflow:hidden;transform:translateY(12px) scale(.97);opacity:0;transition:.28s cubic-bezier(.34,1.56,.64,1);pointer-events:none; }
.wa-card[aria-modal="true"] { transform:none;opacity:1;pointer-events:auto; }
.wa-head { display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff; }
.wa-avatar { width:40px;height:40px;background:#fff;border-radius:10px;display:grid;place-items:center;overflow:hidden; }
.wa-avatar img { width:26px;height:26px;object-fit:contain; }
.wa-title { font-weight:800;line-height:1.1; }
.wa-status { font-size:.82rem;opacity:.88; }
.wa-close { margin-left:auto;width:30px;height:30px;border:none;border-radius:50%;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .2s,background .2s; }
.wa-close:hover { opacity:1;background:rgba(255,255,255,.14); }
.wa-body { padding:14px;max-height:40vh;overflow:auto;background:#f3f8f4;display:flex;flex-direction:column;gap:8px; }
.wa-bubble { max-width:88%;padding:10px 13px;border-radius:14px;font-size:.93rem;line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.07); }
.wa-bot { background:#fff;border:1px solid #e3e6ea;align-self:flex-start; }
.wa-user { background:#e4f7ec;border:1px solid #c5ecd6;align-self:flex-end; }
.wa-compose { display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-top:1px solid #e3e6ea;background:#fff; }
.wa-compose textarea { resize:none;border-radius:12px;padding:10px 12px;border:1px solid #e3e6ea;font-family:inherit;font-size:.93rem;outline:none;transition:border-color .2s,box-shadow .2s; }
.wa-compose textarea:focus { border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.12); }
.wa-send { border:none;border-radius:12px;padding:0 16px;background:#25D366;color:#fff;cursor:pointer;transition:background .2s,transform .2s; }
.wa-send:hover { background:#1fb85a;transform:translateY(-1px); }
@media(max-width:480px) { .wa-float{right:12px;bottom:12px;} .wa-card{width:calc(100vw - 24px);} }