Preview de mixed.css
/* MIXED CSS PACK */
/* Template: bujes3m.com.ar/index.html */
/* Template mtime: 2026-05-20 12:55:25 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=DM+Sans:wght@300;400;500;600;700&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* =============================================
TOKENS & RESET
============================================= */
:root {
--accent: #b67a2d;
--accent-dark: #8f5e21;
--accent-soft: #f7efe5;
--accent-glow: rgba(182,122,45,.18);
--text: #111111;
--muted: #6b6b6b;
--line: #ebebeb;
--surface: #ffffff;
--surface-2: #faf8f5;
--shadow-sm: 0 4px 16px rgba(17,17,17,.06);
--shadow: 0 20px 64px rgba(17,17,17,.10);
--shadow-lg: 0 32px 80px rgba(17,17,17,.13);
--radius: 20px;
--radius-lg: 28px;
--radius-pill: 999px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
color: var(--text);
background: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* =============================================
UTILITIES
============================================= */
.section { padding: 104px 0; }
.section-sm { padding: 80px 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.eyebrow::before {
content: '';
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--accent);
flex-shrink: 0;
}
.section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 16px;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--muted);
max-width: 680px;
margin: 0 auto;
line-height: 1.7;
}
/* =============================================
NAVBAR
============================================= */
.navbar {
background: rgba(255,255,255,.9);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(17,17,17,.07);
padding: 1rem 0;
transition: background .3s, box-shadow .3s;
}
.navbar.scrolled {
background: rgba(255,255,255,.97);
box-shadow: 0 4px 24px rgba(17,17,17,.07);
}
.navbar-brand {
display: flex;
align-items: center;
gap: .75rem;
}
.brand-logo, .footer-logo {
width: auto;
height: 38px;
object-fit: contain;
flex-shrink: 0;
}
.brand-text {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: #111;
letter-spacing: -.01em;
white-space: nowrap;
}
.navbar-nav .nav-link {
font-size: .9rem;
font-weight: 600;
color: #3a3a3a;
padding: .6rem 1rem;
letter-spacing: .01em;
position: relative;
transition: color .2s;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--accent);
transition: transform .25s ease;
}
.navbar-nav .nav-link:hover { color: var(--accent-dark); }
.navbar-nav .nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
.navbar-toggler {
border: 1.5px solid rgba(17,17,17,.12);
padding: .45rem .65rem;
box-shadow: none !important;
border-radius: 10px;
}
/* =============================================
BUTTONS
============================================= */
.btn-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 0 1.6rem;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
font-size: .92rem;
font-weight: 700;
letter-spacing: .01em;
cursor: pointer;
transition: transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .22s ease,
background .22s ease,
color .22s ease,
border-color .22s ease;
}
.btn-main:hover { transform: translateY(-3px); }
.btn-main:active { transform: translateY(-1px); }
.btn-accent {
color: #fff;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
box-shadow: 0 8px 28px rgba(182,122,45,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-accent:hover {
color: #fff;
box-shadow: 0 14px 36px rgba(182,122,45,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-outline-main {
color: #111;
background: #fff;
border-color: rgba(17,17,17,.14);
box-shadow: var(--shadow-sm);
}
.btn-outline-main:hover {
color: #111;
background: var(--surface-2);
border-color: rgba(17,17,17,.22);
}
/* =============================================
HERO
============================================= */
.hero {
position: relative;
padding: 168px 0 96px;
overflow: hidden;
}
/* Ambient background */
.hero::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(182,122,45,.13) 0%, transparent 68%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(182,122,45,.07) 0%, transparent 70%);
pointer-events: none;
}
/* Subtle grain texture */
.hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
/* Animate-in on load */
.hero-copy > * {
opacity: 0;
transform: translateY(22px);
animation: fadeUp .65s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .15s; }
.hero-copy > *:nth-child(3) { animation-delay: .22s; }
.hero-copy > *:nth-child(4) { animation-delay: .30s; }
.hero-copy > *:nth-child(5) { animation-delay: .38s; }
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
.hero-visual-wrap {
opacity: 0;
animation: fadeIn .8s .2s ease forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
.hero-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.8rem, 5.5vw, 4.6rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -.03em;
margin: 0 0 20px;
}
.hero-title .accent {
color: var(--accent-dark);
position: relative;
}
/* Underline accent decoration */
.hero-title .accent::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
opacity: .35;
}
.hero-text {
font-size: 1.1rem;
color: var(--muted);
line-height: 1.72;
max-width: 560px;
margin-bottom: 32px;
}
/* Points chips */
.hero-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0 0 36px;
}
.hero-points li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .875rem;
font-weight: 600;
color: #111;
background: #fff;
border: 1.5px solid rgba(17,17,17,.08);
border-radius: var(--radius-pill);
padding: 9px 16px;
box-shadow: var(--shadow-sm);
transition: border-color .2s, box-shadow .2s;
}
.hero-points li:hover {
border-color: rgba(182,122,45,.3);
box-shadow: 0 6px 20px rgba(182,122,45,.10);
}
.point-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
flex-shrink: 0;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Hero image */
.hero-visual-wrap {
display: flex;
justify-content: center;
align-items: flex-start;
}
.hero-visual-mobile {
display: none;
}
.hero-visual {
position: relative;
width: min(100%, 520px);
min-height: clamp(320px, 42vw, 540px);
display: flex;
align-items: center;
justify-content: center;
padding: 26px 26px 108px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid rgba(17,17,17,.06);
}
/* Gold frame line */
.hero-visual::before {
content: '';
position: absolute;
inset: 8px;
border-radius: calc(var(--radius-lg) - 6px);
border: 1px solid rgba(182,122,45,.22);
z-index: 2;
pointer-events: none;
}
.hero-visual img {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
/* Gradient overlay */
.hero-visual::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 46%;
background: linear-gradient(180deg, transparent 0%, rgba(17,17,17,.62) 100%);
pointer-events: none;
z-index: 1;
}
.hero-badge {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
border-radius: 16px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
}
.hero-badge strong { display: block; font-size: .95rem; font-weight: 700; }
.hero-badge span { display: block; font-size: .82rem; color: rgba(255,255,255,.82); margin-top: 2px; }
.hero-badge-mark {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--accent);
line-height: 1;
flex-shrink: 0;
text-shadow: 0 0 24px rgba(182,122,45,.5);
}
/* Floating decoration behind image */
.hero-deco {
position: absolute;
top: -20px;
right: -20px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(182,122,45,.16) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
/* =============================================
ABOUT / QUIENES SOMOS
============================================= */
.about-section {
background: var(--surface-2);
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.about-section::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.about-card {
background: #fff;
border: 1px solid rgba(17,17,17,.06);
border-radius: var(--radius-lg);
padding: 44px;
height: 100%;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.about-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-text {
color: var(--muted);
line-height: 1.72;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 28px;
}
.stat-box {
background: var(--surface-2);
border: 1px solid rgba(17,17,17,.06);
border-radius: 16px;
padding: 22px 20px;
position: relative;
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease;
}
.stat-box:hover {
transform: translateY(-3px);
box-shadow: 0 12px 36px rgba(182,122,45,.10);
}
.stat-box::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
opacity: 0;
transition: opacity .22s;
}
.stat-box:hover::after { opacity: 1; }
.stat-box strong {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.2rem;
line-height: 1;
font-weight: 800;
color: var(--accent-dark);
margin-bottom: 6px;
}
.stat-box span { color: var(--muted); font-size: .875rem; font-weight: 600; }
/* Contact sub-card inside about */
.about-contact-card {
background: #fff;
border: 1px solid rgba(17,17,17,.06);
border-radius: var(--radius-lg);
padding: 44px;
height: 100%;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.about-contact-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-soft), var(--accent));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Contact list items */
.contact-list { display: grid; gap: 14px; margin-top: 24px; }
.contact-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
background: var(--surface-2);
border: 1px solid rgba(17,17,17,.05);
transition: border-color .2s, box-shadow .2s;
}
.contact-item:hover {
border-color: rgba(182,122,45,.2);
box-shadow: 0 4px 16px rgba(182,122,45,.08);
}
.contact-item strong { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 3px; }
.contact-item span, .contact-item a { color: var(--muted); font-size: .9rem; }
.contact-item a:hover { color: var(--accent-dark); }
/* Dissolve gallery inside about */
.about-gallery-card {
background: #fff;
border: 1px solid rgba(17,17,17,.06);
border-radius: var(--radius-lg);
padding: 16px;
height: 100%;
min-height: 520px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.about-gallery-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-soft), var(--accent));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
z-index: 4;
}
.about-photo-dissolve {
position: relative;
width: 100%;
height: 100%;
min-height: 488px;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(circle at 25% 10%, rgba(182,122,45,.16), transparent 34%),
linear-gradient(135deg, #fff 0%, var(--surface-2) 100%);
border: 1px solid rgba(17,17,17,.06);
isolation: isolate;
}
.about-photo-dissolve::before {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,.42);
border-radius: 18px;
z-index: 3;
pointer-events: none;
}
.about-photo-dissolve img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.04);
animation: aboutDissolve 36s infinite ease-in-out;
will-change: opacity, transform;
}
.about-photo-dissolve img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.about-photo-dissolve img:nth-child(2) { animation-delay: 6s; }
.about-photo-dissolve img:nth-child(3) { animation-delay: 12s; }
.about-photo-dissolve img:nth-child(4) { animation-delay: 18s; }
.about-photo-dissolve img:nth-child(5) { animation-delay: 24s; }
.about-photo-dissolve img:nth-child(6) { animation-delay: 30s; }
@keyframes aboutDissolve {
0%, 15% {
opacity: 1;
transform: scale(1.04);
}
22%, 100% {
opacity: 0;
transform: scale(1.1);
}
}
.about-gallery-shade {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(17,17,17,0) 32%, rgba(17,17,17,.72) 100%),
linear-gradient(90deg, rgba(17,17,17,.22), rgba(17,17,17,0) 44%);
pointer-events: none;
}
.about-gallery-caption {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 4;
padding: 18px 20px;
border-radius: 18px;
color: #fff;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 20px 48px rgba(0,0,0,.18);
}
.about-gallery-caption span {
display: inline-flex;
margin-bottom: 6px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.about-gallery-caption strong {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.25rem, 2vw, 1.65rem);
line-height: 1.12;
letter-spacing: -.02em;
font-weight: 800;
text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
/* =============================================
ICON BOX
============================================= */
.icon-box {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: var(--accent-soft);
color: var(--accent-dark);
margin-bottom: 20px;
border: 1px solid rgba(182,122,45,.14);
flex-shrink: 0;
transition: background .2s, transform .2s;
}
.icon-box svg { width: 26px; height: 26px; }
.icon-box.mb-0 { margin-bottom: 0; }
/* =============================================
SERVICES
============================================= */
.services-section { background: #fff; }
.service-card {
background: #fff;
border: 1.5px solid rgba(17,17,17,.07);
border-radius: var(--radius-lg);
padding: 32px 28px;
height: 100%;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .26s cubic-bezier(.34,1.56,.64,1),
box-shadow .26s ease,
border-color .26s ease;
}
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 0;
background: linear-gradient(180deg, rgba(182,122,45,.06), transparent);
transition: height .3s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(17,17,17,.10); border-color: rgba(182,122,45,.22); }
.service-card:hover::before { height: 100%; }
.service-card:hover .icon-box { background: linear-gradient(135deg, var(--accent-soft), rgba(182,122,45,.2)); transform: scale(1.06); }
.card-title {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: 10px;
line-height: 1.3;
}
.service-card .card-number {
position: absolute;
top: 20px;
right: 24px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 3.5rem;
font-weight: 900;
color: rgba(182,122,45,.07);
line-height: 1;
user-select: none;
}
/* =============================================
WHY US
============================================= */
.why-section {
background: var(--surface-2);
position: relative;
overflow: hidden;
}
.why-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.why-card {
background: #fff;
border: 1.5px solid rgba(17,17,17,.06);
border-radius: var(--radius-lg);
padding: 32px 28px;
height: 100%;
box-shadow: var(--shadow-sm);
transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease, border-color .26s ease;
position: relative;
overflow: hidden;
}
.why-card::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent), var(--accent-dark));
opacity: 0;
transition: opacity .26s;
border-radius: 0 2px 2px 0;
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(17,17,17,.09); border-color: rgba(182,122,45,.2); }
.why-card:hover::after { opacity: 1; }
.why-card:hover .icon-box { background: linear-gradient(135deg, var(--accent-soft), rgba(182,122,45,.2)); }
/* =============================================
GALLERY — UNCHANGED (as requested)
============================================= */
.gal-section {
background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
}
.gal-carousel { max-width: 980px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(250px,52vh,500px);
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(17,17,17,.10);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
border: 1px solid rgba(17,17,17,.07);
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
border-radius: 20px;
}
.gal-carousel .carousel-control-prev,
.gal-carousel .carousel-control-next {
z-index: 20; width: 52px; height: 52px;
top: 50%; transform: translateY(-50%);
opacity: 1; background: rgba(17,17,17,.72);
border-radius: 50%; margin: 0 14px;
}
.gal-carousel .carousel-control-prev { left: 0; }
.gal-carousel .carousel-control-next { right: 0; }
.gal-carousel .carousel-control-prev-icon,
.gal-carousel .carousel-control-next-icon { width: 2.4rem; height: 2.4rem; background-size: 58% 58%; }
.gal-carousel .carousel-indicators { z-index: 10; bottom: -56px; margin-bottom: 0; }
.gal-carousel .carousel-indicators button {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(17,17,17,.35); border: none; margin: 0 5px;
}
.gal-carousel .carousel-indicators button.active { background: var(--accent-dark); }
.gal-holder { padding-bottom: 70px; }
#galLightbox .modal-content { background: #000; border: none; }
#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: 48px; height: 48px; border-radius: 999px;
background: rgba(255,255,255,.18); color: #fff;
font-size: 32px; line-height: 48px; text-align: center;
z-index: 5; cursor: pointer;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 14px; }
.gal-lightbox-nav.gal-next { right: 14px; }
/* =============================================
FAQ
============================================= */
.faq-section { background: #fff; }
.faq-wrap {
background: #fff;
border: 1.5px solid rgba(17,17,17,.07);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
}
.accordion-item {
border: none !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 0 !important;
}
.accordion-item:last-child { border-bottom: none !important; }
.accordion-button {
padding: 1.4rem 1.5rem;
font-weight: 700;
font-size: .95rem;
color: #111;
background: #fff !important;
box-shadow: none !important;
border-radius: 0 !important;
gap: 12px;
transition: background .2s, color .2s;
}
.accordion-button:not(.collapsed) {
color: var(--accent-dark);
background: rgba(182,122,45,.04) !important;
}
.accordion-button::after {
width: 20px; height: 20px;
background-image: none;
content: '';
border: 2px solid currentColor;
border-radius: 50%;
position: relative;
flex-shrink: 0;
opacity: .45;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f5e21' stroke-width='2'%3E%3Cpath d='M4 10l4-4 4 4'/%3E%3C/svg%3E");
opacity: 1;
}
.accordion-body {
padding: 0 1.5rem 1.4rem;
color: var(--muted);
line-height: 1.7;
font-size: .95rem;
}
/* =============================================
CONTACT
============================================= */
.contact-section { background: var(--surface-2); position: relative; overflow: hidden; }
.contact-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.contact-panel {
background: #fff;
border: 1px solid rgba(17,17,17,.06);
border-radius: var(--radius-lg);
padding: 40px;
height: 100%;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.contact-panel.main-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.form-label {
font-size: .82rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #444;
margin-bottom: 6px;
}
.form-control, .form-select {
min-height: 52px;
border-radius: 12px;
border: 1.5px solid rgba(17,17,17,.10);
padding: .8rem 1rem;
font-size: .93rem;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s;
background: var(--surface-2);
}
.form-control:focus, .form-select:focus {
background: #fff;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(182,122,45,.12) !important;
}
textarea.form-control { min-height: 150px; resize: vertical; }
/* =============================================
FOOTER
============================================= */
.footer {
background: #0e0c0a;
color: rgba(255,255,255,.88);
padding: 80px 0 28px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-dark));
}
/* Subtle gold ambient glow */
.footer::after {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(182,122,45,.08) 0%, transparent 65%);
pointer-events: none;
}
.footer-brand {
display: flex;
align-items: center;
gap: .85rem;
margin-bottom: 16px;
}
.footer-brand-text {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
letter-spacing: -.01em;
}
.footer-copy {
color: rgba(255,255,255,.58);
max-width: 320px;
font-size: .9rem;
line-height: 1.7;
}
.footer-title {
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
margin-bottom: 20px;
}
.footer-links, .footer-contact {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 11px;
}
.footer-links a, .footer-contact a, .footer-contact span {
color: rgba(255,255,255,.72);
font-size: .9rem;
transition: color .2s;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-bottom {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.1);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
color: rgba(255,255,255,.45);
font-size: .85rem;
}
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: var(--accent); }
/* =============================================
SCROLL REVEAL UTILITY
============================================= */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 991.98px) {
.hero { padding: 148px 0 88px; }
.hero-visual-wrap { margin-top: 44px; }
.about-card, .about-contact-card { padding: 32px; }
.about-gallery-card { min-height: 430px; }
}
@media (max-width: 767.98px) {
.section { padding: 80px 0; }
.section-sm { padding: 64px 0; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.hero-badge { padding: 12px 14px; }
.hero-badge-mark { font-size: 1.4rem; }
.gal-frame { height: clamp(220px,40vh,360px); padding: 10px; }
.gal-carousel .carousel-control-prev,
.gal-carousel .carousel-control-next { width: 46px; height: 46px; margin: 0 8px; }
.contact-panel { padding: 30px 24px; }
}
@media (max-width: 575.98px) {
.brand-logo, .footer-logo { height: 36px; }
.hero { padding-top: 130px; }
.hero-title { font-size: 2.5rem; }
.hero-text { font-size: 1rem; margin-bottom: 18px; }
.hero-visual-col { display: none; }
.hero-visual-mobile {
display: block;
margin: 0 0 22px;
}
.hero-visual-mobile .hero-visual-wrap {
margin-top: 0;
}
.hero-visual-mobile .hero-visual {
width: 100%;
max-width: 420px;
min-height: 280px;
padding: 20px 20px 96px;
margin-inline: auto;
}
.hero-points { margin-bottom: 24px; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-main { width: 100%; }
.section-title { font-size: 2rem; }
.about-card, .about-contact-card { padding: 24px 22px; }
.about-gallery-card { padding: 12px; min-height: 340px; }
.about-photo-dissolve { min-height: 316px; }
.about-gallery-caption { left: 12px; right: 12px; bottom: 12px; padding: 14px 15px; }
.stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.footer-bottom { font-size: .82rem; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
.pdf-section{
background:#fff;
}
.wholesale-notice{
width:min(100%,760px);
margin:24px auto 0;
padding:16px 20px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
border-radius:18px;
background:linear-gradient(135deg, rgba(182,122,45,.12), rgba(143,94,33,.07));
border:1.5px solid rgba(182,122,45,.24);
color:#111;
box-shadow:0 12px 34px rgba(182,122,45,.10);
}
.wholesale-notice strong{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:0 14px;
border-radius:999px;
background:linear-gradient(135deg, var(--accent), var(--accent-dark));
color:#fff;
font-size:.78rem;
font-weight:800;
letter-spacing:.08em;
}
.wholesale-notice span{
color:#4b4035;
font-size:.95rem;
font-weight:600;
line-height:1.5;
}
.pdf-card{
background:#fff;
border:1px solid rgba(17,17,17,.08);
border-radius:24px;
box-shadow:0 16px 40px rgba(17,17,17,.08);
padding:18px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pdf-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 54px rgba(17,17,17,.12);
border-color:rgba(182,122,45,.28);
}
.pdf-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}
.pdf-title{
margin:0;
font-size:1rem;
font-weight:700;
color:#111;
}
.pdf-card-top a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 14px;
border-radius:999px;
background:#b67a2d;
color:#fff;
font-size:.85rem;
font-weight:700;
transition:background .2s ease, transform .2s ease;
}
.pdf-card-top a:hover{
background:#8f5e21;
color:#fff;
transform:translateY(-2px);
}
.pdf-frame-wrap{
overflow:hidden;
border-radius:18px;
border:1px solid rgba(17,17,17,.08);
background:#f8f8f8;
}
.pdf-frame-wrap iframe{
width:100%;
height:560px;
border:0;
display:block;
background:#fff;
}
@media (max-width: 991.98px){
.pdf-frame-wrap iframe{
height:500px;
}
}
@media (max-width: 575.98px){
.pdf-card{
padding:14px;
border-radius:18px;
}
.pdf-frame-wrap{
border-radius:14px;
}
.pdf-frame-wrap iframe{
height:420px;
}
.pdf-card-top{
flex-direction:column;
align-items:flex-start;
}
.wholesale-notice{
align-items:flex-start;
justify-content:flex-start;
text-align:left;
padding:14px;
}
.wholesale-notice strong{
width:100%;
}
}
/* ===== INLINE <style> BLOCK #3 ===== */
.bf-contact-float{
position:fixed;
right:18px;
bottom:18px;
z-index:2147483647;
display:flex;
flex-direction:column;
align-items:flex-end;
font-family:inherit;
}
.bf-float-stack{
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-end;
}
.bf-float-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
display:grid;
place-items:center;
color:#fff;
cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
text-decoration:none;
}
.bf-float-btn:hover{
transform:translateY(-3px) scale(1.05);
color:#fff;
}
.bf-call-btn{
background:linear-gradient(135deg,#b67a2d,#8f5e21);
box-shadow:0 10px 30px rgba(182,122,45,.38);
}
.bf-call-btn:hover{
box-shadow:0 14px 36px rgba(182,122,45,.48);
}
.bf-wa-btn{
background:linear-gradient(135deg,#25D366,#128C7E);
box-shadow:0 10px 30px rgba(37,211,102,.45);
}
.bf-wa-btn:hover{
box-shadow:0 14px 36px rgba(37,211,102,.55);
}
.bf-wa-card{
position:absolute;
right:0;
bottom:144px;
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid #e3e6ea;
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.25s ease;
}
.bf-wa-card[aria-modal="true"]{
transform:none;
opacity:1;
}
.bf-wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,#b67a2d,#8f5e21);
color:#fff;
}
.bf-wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
flex-shrink:0;
}
.bf-wa-avatar img{
width:26px;
height:26px;
object-fit:contain;
}
.bf-wa-title{
font-weight:800;
line-height:1.1;
}
.bf-wa-status{
font-size:.85rem;
opacity:.9;
margin-top:2px;
}
.bf-wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:.9;
}
.bf-wa-close:hover{
opacity:1;
background:rgba(255,255,255,.14);
}
.bf-wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.bf-wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.bf-wa-bot{
background:#fff;
border:1px solid #e3e6ea;
align-self:flex-start;
}
.bf-wa-user{
background:#f7efe5;
border:1px solid rgba(182,122,45,.22);
align-self:flex-end;
}
.bf-wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid #e3e6ea;
background:#fff;
}
.bf-wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid #e3e6ea;
font-family:inherit;
outline:none;
}
.bf-wa-compose textarea:focus{
border-color:#b67a2d;
}
.bf-wa-send{
background:#b67a2d;
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
transition:background .2s ease;
}
.bf-wa-send:hover{
background:#8f5e21;
}
@media (max-width:480px){
.bf-contact-float{
right:12px;
bottom:12px;
}
.bf-wa-card{
width:calc(100vw - 24px);
bottom:144px;
}
}