/* ═══════════════════════════════════════════════════════════════════════════
   Baali Diani Apartments — style.css
   Palette:  Teal #0B5E5C | Coral #E8704A | Sand #F5ECD7 | Dark #1A1A2E | White #FAFAF8
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. CSS Custom Properties ─────────────────────────────────────────────── */
:root {
    --teal:       #0B5E5C;
    --teal-light: #147F7C;
    --teal-pale:  #E0F0EF;
    --coral:      #E8704A;
    --coral-dark: #C9562F;
    --sand:       #F5ECD7;
    --sand-dark:  #EDD9B3;
    --dark:       #1A1A2E;
    --dark-soft:  #2E2E4A;
    --white:      #FAFAF8;
    --text-body:  #3A3A4A;
    --text-muted: #7A7A9A;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Nunito', system-ui, sans-serif;
    --font-brand:   'Pacifico', cursive;
    --radius:       14px;
    --shadow-sm:    0 2px 12px rgba(11,94,92,.10);
    --shadow-md:    0 8px 32px rgba(11,94,92,.15);
    --shadow-lg:    0 20px 60px rgba(11,94,92,.20);
    --transition:   all .3s cubic-bezier(.4,0,.2,1);
}

/* ── 1. Base & Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-body);
    background: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--dark);
}

img { max-width: 100%; height: auto; }

a { text-decoration: none; transition: var(--transition); }

/* ── 2. Utility helpers ───────────────────────────────────────────────────── */
.text-coral   { color: var(--coral)!important; }
.text-teal    { color: var(--teal)!important; }
.bg-sand      { background: var(--sand)!important; }
.bg-teal      { background: var(--teal)!important; }
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: .5rem;
}
.section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .75rem;
}
.section-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 560px;
}
.divider-coral {
    width: 52px; height: 4px;
    background: var(--coral);
    border-radius: 2px;
    margin-bottom: 1.25rem;
}

/* Sand wave shape divider */
.wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
}
.wave-divider svg { display: block; width: 100%; height: 60px; }

/* ── 3. Navbar ────────────────────────────────────────────────────────────── */
#mainNav {
    padding: 1.1rem 0;
    background: transparent;
    transition: background .4s ease, box-shadow .4s ease, padding .3s ease;
}
#mainNav.scrolled {
    background: var(--dark);
    padding: .55rem 0;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
#mainNav .navbar-brand .brand-fallback {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.01em;
}
.brand-accent { color: var(--coral); }

#mainNav .nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.88)!important;
    padding: .45rem .85rem;
    position: relative;
}
#mainNav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px; left: .85rem; right: .85rem;
    height: 2px;
    background: var(--coral);
    transform: scaleX(0);
    transition: transform .25s ease;
}
#mainNav .nav-link:hover::after,
#mainNav .nav-link.active::after { transform: scaleX(1); }

.btn-book {
    background: var(--coral);
    color: #fff!important;
    font-weight: 700;
    font-size: .9rem;
    padding: .5rem 1.4rem;
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(232,112,74,.35);
}
.btn-book:hover {
    background: var(--coral-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,112,74,.45);
}

.navbar-toggler {
    border-color: rgba(255,255,255,.4);
}
.navbar-toggler-icon {
    filter: invert(1);
}

/* ── 4. Hero Carousel ─────────────────────────────────────────────────────── */
#home { position: relative; }

#heroCarousel { height: 100vh; min-height: 600px; }

.carousel-item {
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
    position: relative;
}
.carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11,94,92,.35) 0%,
        rgba(26,26,46,.55) 55%,
        rgba(26,26,46,.75) 100%
    );
    z-index: 1;
}

/* Slide 1 */
.slide-1 { background-image: url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=1600&q=80'); }
/* Slide 2 */
.slide-2 { background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=80'); }
/* Slide 3 */
.slide-3 { background-image: url('https://images.unsplash.com/photo-1551918120-9739cb430c6d?w=1600&q=80'); }

.carousel-caption-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
}
.carousel-caption-center .hero-eyebrow {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp .7s .3s forwards;
}
.carousel-caption-center h1,
.carousel-caption-center h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: .85rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
    opacity: 0;
    animation: fadeUp .7s .5s forwards;
}
.carousel-caption-center p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255,255,255,.88);
    max-width: 620px;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp .7s .7s forwards;
}
.hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    animation: fadeUp .7s .9s forwards;
}
.btn-hero-primary {
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    padding: .75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    box-shadow: 0 6px 24px rgba(232,112,74,.4);
    transition: var(--transition);
}
.btn-hero-primary:hover {
    background: var(--coral-dark);
    color: #fff;
    transform: translateY(-3px);
}
.btn-hero-outline {
    color: #fff;
    font-weight: 700;
    padding: .75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    border: 2px solid rgba(255,255,255,.7);
    backdrop-filter: blur(4px);
    transition: var(--transition);
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: #fff;
    transform: translateY(-3px);
}

/* Carousel controls */
.carousel-control-prev,
.carousel-control-next {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    transition: var(--transition);
}
.carousel-control-prev { left: 1.5rem; }
.carousel-control-next { right: 1.5rem; }
.carousel-control-prev:hover,
.carousel-control-next:hover { background: var(--coral); }

.carousel-indicators [data-bs-target] {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    transition: var(--transition);
}
.carousel-indicators .active { background: var(--coral); width: 28px; border-radius: 4px; }

/* Scroll cue */
.hero-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: rgba(255,255,255,.6);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    animation: bounce 2.5s infinite;
}
.hero-scroll-cue i { font-size: 1.2rem; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── 5. About Section ─────────────────────────────────────────────────────── */
#about { padding: 6rem 0; background: var(--white); }

.about-image-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: visible;
}
.about-image-wrap .img-main {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/3;
    object-fit: cover;
}
.about-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--coral);
    color: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    font-family: var(--font-display);
}
.about-badge .badge-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.about-badge .badge-lbl {
    font-size: .8rem;
    opacity: .9;
    font-family: var(--font-body);
}

.about-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.stat-box {
    flex: 1;
    min-width: 100px;
    border-left: 3px solid var(--coral);
    padding-left: 1rem;
}
.stat-box .stat-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--teal);
    line-height: 1;
    display: block;
}
.stat-box .stat-lbl {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── 6. Rooms Section ─────────────────────────────────────────────────────── */
#rooms { padding: 6rem 0; background: var(--sand); }

.room-card {
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: var(--white);
}
.room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.room-card .card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 230px;
}
.room-card .card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.room-card:hover .card-img-wrap img { transform: scale(1.06); }
.room-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background: var(--teal);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .8rem;
    border-radius: 50px;
    letter-spacing: .06em;
}
.room-card .card-body { padding: 1.5rem; }
.room-card .card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--dark);
    margin-bottom: .5rem;
}
.room-card .card-text { color: var(--text-muted); font-size: .95rem; }
.room-price {
    font-family: var(--font-display);
    color: var(--coral);
    font-size: 1.4rem;
    font-weight: 700;
}
.room-price small { font-size: .8rem; color: var(--text-muted); font-family: var(--font-body); font-weight: 400; }

.btn-teal {
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    padding: .5rem 1.4rem;
    border-radius: 50px;
    font-size: .9rem;
    transition: var(--transition);
}
.btn-teal:hover {
    background: var(--teal-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ── 7. Amenities Section ─────────────────────────────────────────────────── */
#amenities { padding: 6rem 0; background: var(--teal); position: relative; overflow: hidden; }
#amenities::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
}
#amenities .section-eyebrow { color: var(--sand-dark); }
#amenities .section-title,
#amenities .section-sub { color: var(--white); }
#amenities .section-sub { opacity: .8; }
#amenities .divider-coral { background: var(--sand-dark); }

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    background: rgba(255,255,255,.08);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.12);
    transition: var(--transition);
    color: var(--white);
}
.amenity-item:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-4px);
}
.amenity-item .amenity-icon {
    font-size: 2.2rem;
    color: var(--coral);
    margin-bottom: .75rem;
    line-height: 1;
}
.amenity-item .amenity-label {
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255,255,255,.9);
}

/* ── 8. Gallery Section ───────────────────────────────────────────────────── */
#gallery { padding: 6rem 0; background: var(--white); }

.gallery-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}
.gallery-item:first-child,
.gallery-item:nth-child(4) {
    grid-column: span 2;
    aspect-ratio: 16/7;
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11,94,92,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay i { font-size: 2rem; color: #fff; }

/* ── 9. Testimonials ──────────────────────────────────────────────────────── */
#testimonials { padding: 6rem 0; background: var(--sand); }

.testi-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
    border-top: 4px solid var(--coral);
    transition: var(--transition);
}
.testi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.testi-stars { color: #FFC107; font-size: 1rem; margin-bottom: .75rem; }
.testi-text {
    font-style: italic;
    color: var(--text-body);
    font-size: .95rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.testi-name { font-weight: 700; font-size: .95rem; color: var(--dark); margin: 0; }
.testi-country { font-size: .8rem; color: var(--text-muted); }

/* ── 10. Location ─────────────────────────────────────────────────────────── */
#location { padding: 6rem 0; background: var(--dark); }
#location .section-eyebrow { color: var(--coral); }
#location .section-title { color: var(--white); }
#location .section-sub { color: rgba(255,255,255,.65); }
#location .divider-coral { background: var(--coral); }

.location-map {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 420px;
}
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.location-info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.location-info-item .loc-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(232,112,74,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coral);
    font-size: 1.1rem;
}
.location-info-item .loc-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.45);
    margin-bottom: .2rem;
}
.location-info-item .loc-value {
    color: rgba(255,255,255,.9);
    font-weight: 500;
}
.location-info-item a.loc-value { color: rgba(255,255,255,.9); }
.location-info-item a.loc-value:hover { color: var(--coral); }

.btn-directions {
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    padding: .7rem 1.8rem;
    border-radius: 50px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-directions:hover {
    background: var(--coral-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* ── 11. Contact / Booking Form ───────────────────────────────────────────── */
#contact { padding: 6rem 0; background: var(--white); }

.contact-wrapper {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.contact-sidebar {
    background: var(--teal);
    padding: 3rem 2rem;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}
.contact-sidebar h4 {
    font-family: var(--font-display);
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.contact-sidebar p { color: rgba(255,255,255,.8); font-size: .95rem; }
.sidebar-contact-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    color: rgba(255,255,255,.85);
    margin-bottom: 1rem;
    font-size: .95rem;
}
.sidebar-contact-item i { color: var(--coral); font-size: 1.1rem; width: 24px; }

.contact-form-area { padding: 3rem 2.5rem; }

.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--dark-soft);
    margin-bottom: .35rem;
}
.form-control, .form-select {
    border: 1.5px solid #e0e0ee;
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .95rem;
    color: var(--text-body);
    transition: var(--transition);
    background: var(--white);
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(11,94,92,.12);
    outline: none;
}
.btn-submit {
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    padding: .75rem 2.5rem;
    border-radius: 50px;
    border: none;
    font-size: 1rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
}
.btn-submit:hover {
    background: var(--coral-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,112,74,.4);
}

/* ── 12. Footer ───────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--dark);
    color: rgba(255,255,255,.75);
    padding: 4rem 0 0;
}
.footer-tagline { color: rgba(255,255,255,.6); font-size: .95rem; }
.footer-heading {
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.footer-links {
    list-style: none;
    padding: 0; margin: 0;
}
.footer-links li {
    margin-bottom: .5rem;
    font-size: .9rem;
    color: rgba(255,255,255,.6);
}
.footer-links a {
    color: rgba(255,255,255,.6);
    transition: var(--transition);
}
.footer-links a:hover { color: var(--coral); }

.footer-socials { display: flex; gap: .8rem; }
.footer-socials a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.65);
    font-size: 1rem;
    transition: var(--transition);
}
.footer-socials a:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

.footer-divider { border-color: rgba(255,255,255,.1); margin: 2.5rem 0 1.25rem; }

.footer-copy { color: rgba(255,255,255,.4); font-size: .85rem; margin: 0; }

.footer-lang-links {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}
.footer-lang-links a {
    color: rgba(255,255,255,.4);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    transition: var(--transition);
}
.footer-lang-links a:hover,
.footer-lang-links a.active { color: var(--coral); }

/* ── 13. Floating UI ──────────────────────────────────────────────────────── */
/* Language switcher — bottom left */
.float-lang-switcher {
    position: fixed;
    bottom: 2rem;
    left: 1.25rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.float-lang-switcher a {
    display: block;
    width: 40px; height: 28px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    opacity: .75;
    transition: var(--transition);
    border: 2px solid transparent;
}
.float-lang-switcher a img { width: 100%; height: 100%; object-fit: cover; }
.float-lang-switcher a:hover,
.float-lang-switcher a.active {
    opacity: 1;
    border-color: var(--coral);
    transform: scale(1.1);
}

/* WhatsApp — bottom right */
.float-whatsapp {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    z-index: 1000;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37,211,102,.45);
    transition: var(--transition);
    animation: waPulse 2.5s infinite;
}
.float-whatsapp:hover {
    background: #1ebe5d;
    color: #fff;
    transform: scale(1.1);
}
@keyframes waPulse {
    0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,.45); }
    50%      { box-shadow: 0 6px 36px rgba(37,211,102,.75); }
}

/* ── 14. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    #mainNav.scrolled,
    #mainNav { background: var(--dark)!important; }

    .about-badge { bottom: 1rem; right: 1rem; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item:first-child,
    .gallery-item:nth-child(4) {
        grid-column: span 2;
        aspect-ratio: 16/7;
    }

    .contact-wrapper { border-radius: 0; }
    .contact-form-area { padding: 2rem 1.5rem; }
    .contact-sidebar { padding: 2rem 1.5rem; }
}

@media (max-width: 575px) {
    #heroCarousel { height: 100svh; }
    .carousel-item { height: 100svh; }
    .carousel-caption-center h1,
    .carousel-caption-center h2 { font-size: 2rem; }

    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item:first-child,
    .gallery-item:nth-child(4) {
        grid-column: span 1;
        aspect-ratio: 4/3;
    }

    .about-stats { gap: 1rem; }
    .float-lang-switcher { bottom: 1.25rem; left: .75rem; }
    .float-whatsapp { bottom: 1.25rem; right: .75rem; width: 50px; height: 50px; font-size: 1.5rem; }
}

/* ── 15. Misc / Accessibility ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.footer-map-thumb { border-radius: 8px; overflow: hidden; }