/* ============================================================
   Amor Arenal La Cima — Demo Stylesheet
   Capa sobre el CSS heredado de Amor Arenal (style.css + plugins.css).
   ============================================================ */

:root {
    --gold:       #aa8453;
    --gold-2:     #c9a66b;
    --gold-glow:  rgba(170, 132, 83, .35);
    --dark:       #1b1b1b;
    --darker:     #111;
    --soft-white: #f5f1ea;
}

/* ---------- BASE OVERRIDES ----------
   The parent style.css hides every .animate-box with opacity:0 and relies on a
   scroll-waypoint to reveal it. The cascade timer drops boxes that are scrolled
   past too quickly, so on a long page like this one chunks of content end up
   permanently invisible. We start them at a very subtle opacity instead of 0
   and let our smoother reveal (further below) take over. */
.js .animate-box {
    opacity: 1;
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

/* Kill animate.css's keyframe-driven entrance animations on this page —
   they snap the element 40-50px out of position the instant the waypoint
   fires, which reads as a jump while the user is mid-scroll. We rely on
   the gentle opacity+transform transition above instead, which sits in
   sync with the user's scroll velocity and never overshoots. */
.animated.fadeInUp,
.animated.fadeInLeft,
.animated.fadeInRight,
.animated.fadeIn {
    -webkit-animation: none !important;
    animation: none !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
}

body { overflow-x: hidden; }

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

/* ---------- NAVBAR ---------- */
.lacima-navbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(17, 17, 17, .55);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    padding: 14px 0;
    transition: background .35s ease, padding .35s ease;
}
.lacima-navbar.scrolled { background: rgba(17, 17, 17, .92); padding: 8px 0; }
.lacima-navbar .logo {
    display: inline-flex; align-items: baseline; gap: 10px;
    color: #fff; text-decoration: none;
}
.lacima-navbar .logo-wordmark {
    font-family: 'Gilda Display', serif;
    font-size: 1.45rem;
    letter-spacing: .18em;
    color: var(--gold-2);
}
.lacima-navbar .logo-sub {
    font-family: 'Barlow Condensed', sans-serif;
    color: #fff; opacity: .85;
    letter-spacing: .22em; text-transform: uppercase;
    font-size: .78rem; font-weight: 500;
}
.lacima-navbar .navbar-nav { gap: 4px; }
.lacima-navbar .main-new-navbar-anchor {
    color: #fff; text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .82rem; font-weight: 500;
    padding: 10px 14px; display: inline-block;
    transition: color .25s ease;
}
.lacima-navbar .main-new-navbar-anchor:hover { color: var(--gold-2); }
.lacima-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; padding: 4px 10px;
}
.lacima-navbar .navbar-toggler .icon-bar i { color: #fff; }
@media (max-width: 991px) {
    /* Parent style.css line 1499 strips container padding inside .navbar at
       this breakpoint — restore it so the logo doesn't sit flush against the
       viewport edge. */
    .lacima-navbar .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .lacima-navbar .navbar-collapse {
        background: rgba(17, 17, 17, .96);
        padding: 16px;
        border-radius: 10px;
        margin-top: 10px;
    }
    .lacima-navbar .navbar-nav { gap: 2px; }
    .lacima-navbar .logo-wordmark { font-size: 1.2rem; letter-spacing: .14em; }
    .lacima-navbar .logo-sub { font-size: .68rem; letter-spacing: .18em; }
}
@media (max-width: 480px) {
    .lacima-navbar .logo-wordmark { font-size: 1.05rem; letter-spacing: .12em; }
    .lacima-navbar .logo-sub { display: none; }
}

/* ---------- HERO ---------- */
.lacima-hero {
    margin-top: 0;
    height: 100vh;
    min-height: 640px;
    position: relative;
    overflow: hidden;
}

/* Caption centrada verticalmente */
.lacima-hero .v-middle.caption {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: center;
}

/* Eyebrow refinado */
.lacima-eyebrow {
    display: inline-block;
    color: var(--gold-2);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .42em;
    font-size: .76rem;
    text-transform: uppercase;
    font-weight: 500;
    text-indent: .42em;
    margin-bottom: 26px;
}

/* H1 — el héroe visual */
.lacima-hero .caption h1 {
    font-family: 'Gilda Display', serif;
    font-size: clamp(2.5rem, 6.4vw, 5.4rem);
    letter-spacing: .055em;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 6px 36px rgba(0, 0, 0, .55);
    margin: 0 auto 14px;
    line-height: 1.05;
    max-width: 920px;
}

/* Divisor dorado entre H1 y lead */
.lacima-divider {
    display: block;
    width: 88px; height: 1px;
    margin: 22px auto;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
    position: relative;
}
.lacima-divider::before {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px; height: 6px;
    background: var(--gold-2);
}

/* Lead paragraph.
   Parent style.css `.header .caption p { margin-right: 15px }` outranks
   `margin: 0 auto` on plain `.lacima-lead`, pushing the centered text off-axis.
   Use a more specific selector + force the auto-centering. */
.lacima-hero .caption p.lacima-lead,
.lacima-lead {
    color: rgba(255, 255, 255, .88);
    font-size: 1.08rem;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

/* Animación cascada de los elementos cuando el slide está activo */
.lacima-hero .owl-item.active .lacima-eyebrow { animation: fadeUp .9s ease .35s both; }
.lacima-hero .owl-item.active h1              { animation: fadeUp .9s ease .50s both; }
.lacima-hero .owl-item.active .lacima-divider { animation: fadeIn 1.2s ease .80s both; }
.lacima-hero .owl-item.active .lacima-lead    { animation: fadeUp .9s ease .95s both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Indicadores del slider en dorado.
   Parent .slider-fade rules pin dots vertically to the right (`width: 40px`,
   `top: 50%`, `right: 5%`, `display: block` per-dot, `text-align: right`),
   so we need !important to put them back along the bottom. */
.lacima-hero .owl-dots {
    position: absolute !important;
    bottom: 90px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    transform: none !important;
    text-align: center !important;
    z-index: 5;
    pointer-events: auto;
}
.lacima-hero .owl-dots .owl-dot {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 5px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    vertical-align: middle;
}
.lacima-hero .owl-dots .owl-dot span {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .35) !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    transition: all .35s ease;
}
.lacima-hero .owl-dots .owl-dot.active span,
.lacima-hero .owl-dots .owl-dot:hover span {
    background: var(--gold-2) !important;
    width: 28px !important;
    border-radius: 4px !important;
}
/* Parent makes .slider-fade .owl-dots .owl-dot.active have gold background +
   gold border — kill that on lacima so only the inner span shows the state. */
.lacima-hero .owl-dots .owl-dot.active { background: transparent !important; }

/* Flecha de scroll: círculo elegante.
   Parent `.header .arrow i` already paints a 50×50 bordered circle on the
   icon. Without overriding it, our own circle on the wrapping <a> would draw
   a second concentric ring. Strip the inner border and let the outer ring be
   the single visible circle. */
.lacima-hero .arrow {
    position: absolute;
    bottom: 32px;
    left: 0; right: 0;
    z-index: 5;
}
.lacima-hero .arrow a {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    background: rgba(0, 0, 0, .15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all .3s ease;
}
.lacima-hero .arrow a i {
    color: #fff;
    font-size: .9rem;
    width: auto;
    height: auto;
    line-height: 1;
    border: none;
    border-radius: 0;
}
.lacima-hero .arrow a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(2px);
}
.lacima-hero .arrow a:hover i { border: none; }

/* Móvil */
@media (max-width: 768px) {
    .lacima-eyebrow { letter-spacing: .32em; font-size: .7rem; margin-bottom: 18px; }
    .lacima-divider { margin: 16px auto; width: 64px; }
    .lacima-lead { font-size: .98rem; padding: 0 24px; }
    .lacima-hero .owl-dots { bottom: 74px !important; }
    /* The mt-90 offset on the secondary images in Concept / Pools / Wellness
       creates a staggered look on desktop, but on mobile it just leaves a big
       empty gap above the image. Reset on small viewports. */
    .about .col img.mt-90,
    .about img.mt-90,
    section .col img.mt-90 { margin-top: 0 !important; }
    /* Villa caption h4 is 35px from the parent — too dominant on small screens. */
    .rooms2 .caption h4,
    .rooms2 .caption h4 a { font-size: 24px !important; line-height: 1.2; }
    .rooms2 .caption h3,
    .rooms2 .caption h3 a { font-size: 18px !important; }
    /* Generous padding inside the dark villa caption box on mobile. */
    .rooms2 .caption { padding: 26px 22px !important; }
    /* The lacima-stat numbers were 2.6rem from the desktop rule — pretty big
       at 375px when the layout flips to 2 columns. Tighten a touch. */
    .lacima-stat-num { font-size: 2.1rem; }
    .lacima-stat { padding: 20px 8px; }
    /* Sustainability cards stack on mobile — give them breathing room. */
    .lacima-sustain > [class*='col-'] { margin-bottom: 28px; }
    /* Section padding can feel cramped on mobile when the parent applies its
       large vertical padding. Pull the bottom-rail down slightly. */
    .lacima-footer { padding: 50px 0 20px; }
    .lacima-footer-brand { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    .lacima-hero .caption h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .lacima-hero .lacima-lead { font-size: .92rem; }
}

/* ---------- STATS (Master Plan) ---------- */
.lacima-stats { margin-top: 40px; }
.lacima-stat {
    text-align: center;
    padding: 24px 16px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}
.lacima-stat:last-child { border-right: none; }
@media (max-width: 767px) {
    .lacima-stat { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}
.lacima-stat-num {
    font-family: 'Gilda Display', serif;
    font-size: 2.6rem;
    color: var(--gold-2);
    line-height: 1;
    letter-spacing: .02em;
}
.lacima-stat-label {
    margin-top: 8px;
    color: rgba(255, 255, 255, .7);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .78rem;
}

.lacima-areas-list {
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    gap: 24px;
    color: rgba(255, 255, 255, .8);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .82rem;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 30px;
}
.lacima-areas-list span { display: inline-flex; align-items: center; gap: 8px; }
.lacima-areas-list i { color: var(--gold-2); }
.lacima-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--gold-2);
    color: var(--gold-2);
    font-family: 'Gilda Display', serif;
    font-weight: 400;
    font-size: .8rem;
}

.mt-60 { margin-top: 60px; }

/* ---------- FEATURE LISTS ---------- */
.lacima-features {
    list-style: none; padding: 0;
    margin: 18px 0 0;
}
.lacima-features li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    color: inherit;
    font-family: 'Barlow', sans-serif;
    font-size: .94rem;
}
.lacima-features li i {
    color: var(--gold-2);
    flex-shrink: 0;
    width: 18px; text-align: center;
}

/* Features sobre fondos oscuros (la web entera) */
.lacima-features li i { color: var(--gold-2); }

/* ---------- SUSTAINABILITY ICONS ---------- */
.lacima-sustain h5 {
    font-family: 'Gilda Display', serif;
    margin: 16px 0 8px;
    font-size: 1.2rem;
    color: #fff;
}
.lacima-sustain p {
    color: rgba(255, 255, 255, .6);
    font-size: .92rem;
}
.lacima-sustain-icon {
    font-size: 2rem;
    color: var(--gold-2);
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(170, 132, 83, .15);
    border: 1px solid rgba(170, 132, 83, .35);
    margin-bottom: 6px;
}

/* ---------- FOOTER ---------- */
.lacima-footer {
    background: var(--darker);
    color: rgba(255, 255, 255, .75);
    padding: 70px 0 30px;
    margin-top: 0;
}
.lacima-footer-brand {
    font-family: 'Gilda Display', serif;
    font-size: 1.6rem;
    color: var(--gold-2);
    letter-spacing: .18em;
    margin-bottom: 16px;
}
.lacima-footer-brand span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .78rem;
    letter-spacing: .25em;
    color: #fff;
    opacity: .8;
    margin-left: 6px;
}
.lacima-footer h6 {
    color: var(--gold-2);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: 18px;
}
.lacima-footer-list { list-style: none; padding: 0; margin: 0; }
.lacima-footer-list li { margin-bottom: 8px; }
.lacima-footer-list a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
    transition: color .25s ease;
}
.lacima-footer-list a:hover { color: var(--gold-2); }

.muted-line {
    color: rgba(255, 255, 255, .65);
    font-size: .92rem;
    margin-bottom: 6px;
}
.muted-line i { color: var(--gold-2); margin-right: 6px; }

.lacima-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    border: 1px solid var(--gold);
    color: var(--gold-2);
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .82rem;
    transition: background .25s ease, color .25s ease;
}
.lacima-cta:hover { background: var(--gold); color: #fff; }

.lacima-footer-bottom {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.lacima-footer-bottom p {
    color: rgba(255, 255, 255, .45);
    font-size: .82rem;
    letter-spacing: .04em;
    margin: 0;
}

/* ---------- Section accents ---------- *
   La web hereda fondo oscuro (body #222) y títulos blancos.
   Solo afinamos tipografía y mantenemos la jerarquía. */
.section-subtitle {
    color: var(--gold-2) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
    font-size: .82rem !important;
    margin-bottom: 14px !important;
}
.section-title {
    font-family: 'Gilda Display', serif !important;
    color: #fff !important;
    line-height: 1.2 !important;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important;
}
.bg-darkblack p,
.about p,
.services p,
.rooms1 p { color: rgba(255, 255, 255, .65); }
h4 { color: #fff; }
.lacima-features li {
    color: rgba(255, 255, 255, .85);
}

/* Caption oscura de las tarjetas (.rooms2 .caption es #1b1b1b) */
.rooms2 .caption {
    color: #fff;
}
.rooms2 .caption h3,
.rooms2 .caption h3 span,
.rooms2 .caption h4,
.rooms2 .caption h4 a {
    color: #fff !important;
}
.rooms2 .caption h3 span {
    color: var(--gold-2) !important;
}
.rooms2 .caption p { color: rgba(255, 255, 255, .65); }
.rooms2 .caption .lacima-features li { color: rgba(255, 255, 255, .82); }

/* Overlay del hero: oscurece arriba (legibilidad navbar) + viñeta
   suave + fade fuerte abajo para que respiren las imágenes claras. */
.lacima-hero .item.bg-img::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .18) 22%,
            rgba(0, 0, 0, .32) 58%,
            rgba(0, 0, 0, .75) 100%),
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .35) 95%);
    pointer-events: none;
    z-index: 1;
}
.lacima-hero .item.bg-img {
    background-size: cover !important;
    background-position: center center !important;
}

/* Pt-0 helper */
.pt-0 { padding-top: 0 !important; }

/* ---------- EDITORIAL GALLERY (Concept / Pools / Wellness) ---------- */
.lacima-gallery {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* Wrapper height matches the full visible extent of the staggered images,
       so Bootstrap's align-items-center on the row centers what you actually
       see (not just the natural cell box). */
    grid-template-rows: 510px;
    gap: 22px;
    align-items: stretch;
    padding-left: 20px;
}
.lacima-gallery-img {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, .55),
        0 12px 24px -16px rgba(0, 0, 0, .35);
    position: relative;
    background: #111;
}
.lacima-gallery-img::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .18);
    pointer-events: none;
    transition: box-shadow .5s ease;
}
.lacima-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.lacima-gallery-img:hover img { transform: scale(1.045); }
.lacima-gallery-img:hover::after { box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .45); }

/* Stagger via grid alignment instead of transform so the wrapper bounds
   contain the offset — keeps the section vertically centered. */
.lacima-gallery-img--tall  { height: 440px; align-self: end; }
.lacima-gallery-img--short { height: 320px; align-self: start; }

@media (max-width: 991px) {
    .lacima-gallery {
        padding-left: 0;
        gap: 18px;
        grid-template-rows: 420px;
    }
    .lacima-gallery-img--tall  { height: 360px; }
    .lacima-gallery-img--short { height: 260px; }
}
@media (max-width: 767px) {
    .lacima-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
        padding-left: 0;
        margin-top: 30px;
    }
    .lacima-gallery-img--tall,
    .lacima-gallery-img--short {
        height: 260px;
        align-self: stretch;
    }
}

/* ============================================================
   CINEMATIC POLISH — professionalism + immersion across imagery
   ============================================================ */

/* 1. HERO · subtle Ken Burns on the ACTIVE slide only.
   The earlier version applied scale(1.06) to every .item.bg-img which made
   the inactive neighbours bleed ~43px past the stage-outer clip into the
   visible slide. Now non-active slides stay at scale(1) so their content
   stays inside their own owl-item box, and the active slide alone runs
   the slow ken-burns drift. */
.lacima-hero .item.bg-img {
    transform-origin: 50% 50%;
    will-change: transform;
}
.lacima-hero .owl-item.active .item.bg-img {
    animation: lacima-kenburns 14s ease-in-out infinite alternate;
}
@keyframes lacima-kenburns {
    0%   { transform: scale(1.0) translate(0%, 0%); }
    100% { transform: scale(1.08) translate(-1%, -.8%); }
}

/* Belt-and-suspenders: clip each slide to its own bounds so a scaled
   background never escapes into a neighbour, regardless of carousel mode. */
.lacima-hero .owl-item { overflow: hidden; }

/* 2. SIDE-BY-SIDE images (Restaurant / Spa / Reception) ·
   The parent .services .img:hover already scales 1.09 — we layer a
   cinematic bottom-up vignette, a soft inner border, and a smoother
   easing curve. Image fills its half-column flush; gradient gives
   depth without breaking the full-bleed feel. */
.services .img {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.services .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(.2, .8, .2, 1),
                filter .8s ease !important;
    will-change: transform;
}
.services .img::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%),
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity .6s ease;
    opacity: .9;
}
.services .img::after {
    content: '';
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .12);
    pointer-events: none;
    z-index: 2;
    transition: box-shadow .6s ease;
}
.services .img:hover img {
    transform: scale(1.06);
    filter: saturate(1.08) brightness(1.04);
}
.services .img:hover::before { opacity: .65; }
.services .img:hover::after  { box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .35); }

/* 3. VILLA CARDS (.rooms2) ·
   Parent rule scales image DOWN on hover (0.98) — counterintuitive for a
   luxury showcase. Override with a slow ken-burns IN and add a soft
   shadow + gold rim to frame the figure. */
.rooms2 figure {
    overflow: hidden;
    border-radius: 4px;
    box-shadow:
        0 24px 60px -30px rgba(0, 0, 0, .55),
        0 10px 22px -12px rgba(0, 0, 0, .35);
    position: relative;
    isolation: isolate;
}
.rooms2 figure::after {
    content: '';
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .15);
    pointer-events: none;
    transition: box-shadow .6s ease;
    z-index: 2;
}
.rooms2 figure img {
    transition: transform 1.4s cubic-bezier(.2, .8, .2, 1),
                filter .8s ease;
    will-change: transform;
}
.rooms2 figure img:hover {
    transform: scale(1.05) !important;   /* override parent's 0.98 */
    filter: saturate(1.06) brightness(1.03);
}
.rooms2 figure:hover::after {
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .4);
}

/* 4. FULL-WIDTH POOL IMAGE (between Pools and Spa) ·
   Standalone <img> in a .container-fluid row. Wrap it visually with a
   slow auto-Ken-Burns and a horizon-style gradient that mirrors the
   hero treatment for continuity. */
.lacima-feature-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.lacima-feature-image img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.04);
    animation: lacima-feature-drift 22s ease-in-out infinite alternate;
    will-change: transform;
}
.lacima-feature-image::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.lacima-feature-image::after {
    content: '';
    position: absolute; inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .35);
    pointer-events: none;
    z-index: 2;
}
@keyframes lacima-feature-drift {
    0%   { transform: scale(1.04) translate(0%, 0%); }
    100% { transform: scale(1.10) translate(-1%, -.8%); }
}

/* 5. HERO TEXT depth on top of the moving background.
   Slightly stronger shadow + a hairline gold underline on lead text for
   editorial polish. */
.lacima-hero .caption h1 {
    text-shadow:
        0 6px 36px rgba(0, 0, 0, .65),
        0 1px 2px rgba(0, 0, 0, .35);
}

/* 6. Honor reduced-motion preferences — disables all ambient ken-burns
   for users who request less motion, while keeping hover affordances. */
@media (prefers-reduced-motion: reduce) {
    .lacima-hero .owl-item.active .item.bg-img,
    .lacima-feature-image img,
    .lacima-map-hotspot::after {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   INTERACTIVE MASTERPLAN — legend + hotspots over aerial render
   ============================================================ */
.lacima-map-row { padding-top: 30px; }

.lacima-map-legend {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 30px 26px;
}
.lacima-map-legend h6 {
    color: var(--gold-2);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-size: .82rem;
    margin: 0 0 22px;
}
.lacima-map-legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: areas;
}
.lacima-map-legend-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
    position: relative;
}
.lacima-map-legend-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: var(--gold-2);
    transform: translateY(-50%);
    border-radius: 2px;
    transition: height .35s ease;
}
.lacima-map-legend-list li:hover,
.lacima-map-legend-list li.is-active,
.lacima-map-legend-list li:focus-visible {
    background: rgba(201, 166, 107, .08);
    transform: translateX(2px);
}
.lacima-map-legend-list li:hover::before,
.lacima-map-legend-list li.is-active::before {
    height: 28px;
}
.lacima-map-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(201, 166, 107, .14);
    border: 1px solid var(--gold-2);
    color: var(--gold-2);
    font-family: 'Gilda Display', serif;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.lacima-map-legend-list li:hover .lacima-map-num,
.lacima-map-legend-list li.is-active .lacima-map-num {
    background: var(--gold-2);
    color: #111;
    box-shadow: 0 0 0 4px rgba(201, 166, 107, .25);
}
.lacima-map-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lacima-map-name {
    color: #fff;
    font-family: 'Gilda Display', serif;
    font-size: 1.05rem;
    line-height: 1.2;
}
.lacima-map-meta {
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lacima-map-hint {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .45);
    font-size: .76rem;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.lacima-map-hint i { color: var(--gold-2); margin-right: 6px; }

/* Map canvas + hotspots */
.lacima-map-wrap {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .04) 0%, rgba(0, 0, 0, 0) 70%),
        #1a1a1a;
    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, .55),
        0 12px 24px -16px rgba(0, 0, 0, .4);
    isolation: isolate;
}
.lacima-map-img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: normal;
}
.lacima-map-wrap::after {
    content: '';
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .12);
    pointer-events: none;
    border-radius: inherit;
    z-index: 5;
}

/* Cutout variant — used when the source map is a PNG with transparency.
   Drops the rectangular dark frame and instead lets the organic forest
   silhouette float on the section background, with a soft drop-shadow
   that follows the actual shape (not a rectangle). */
.lacima-map-wrap--cutout {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.lacima-map-wrap--cutout::after { display: none; }
.lacima-map-wrap--cutout .lacima-map-img {
    filter:
        drop-shadow(0 24px 40px rgba(0, 0, 0, .55))
        drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
    -webkit-filter:
        drop-shadow(0 24px 40px rgba(0, 0, 0, .55))
        drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}

.lacima-map-hotspot {
    position: absolute;
    left: var(--mx);
    top: var(--my);
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
}
.lacima-map-hotspot:focus { outline: none; }
.lacima-map-hotspot::before {
    /* Outer glow ring — fades in on hover */
    content: '';
    position: absolute; inset: 6px;
    border-radius: 50%;
    box-shadow:
        0 0 0 0 rgba(201, 166, 107, 0),
        0 0 0 0 rgba(201, 166, 107, 0);
    transition: box-shadow .45s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.lacima-map-hotspot::after {
    /* Ambient pulse — continuous, soft */
    content: '';
    position: absolute; inset: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-2);
    opacity: 0;
    animation: lacima-hotspot-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
.lacima-map-hotspot:hover::before,
.lacima-map-hotspot:focus-visible::before,
.lacima-map-hotspot.is-active::before {
    box-shadow:
        0 0 0 10px rgba(201, 166, 107, .22),
        0 0 30px 4px rgba(201, 166, 107, .35);
}
.lacima-map-hotspot:hover::after,
.lacima-map-hotspot:focus-visible::after,
.lacima-map-hotspot.is-active::after {
    animation-duration: 1.6s;
    border-color: #fff;
}
.lacima-map-hotspot:hover,
.lacima-map-hotspot:focus-visible,
.lacima-map-hotspot.is-active { z-index: 6; }

@keyframes lacima-hotspot-pulse {
    0%   { transform: scale(.55); opacity: .8; }
    100% { transform: scale(2.1); opacity: 0; }
}

@media (max-width: 991px) {
    .lacima-map-row { padding-top: 16px; }
    .lacima-map-wrap { margin-top: 26px; }
    .lacima-map-hotspot { width: 46px; height: 46px; }
}
@media (max-width: 576px) {
    .lacima-map-legend { padding: 22px 20px; }
    .lacima-map-hotspot { width: 40px; height: 40px; }
    .lacima-map-hotspot::after { inset: 10px; }
}

/* ============================================================
   DEV-NOTICE BADGE — floating glass chip, bottom-left
   ============================================================ */
.lacima-dev-badge {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 18px;
    max-width: 360px;
    background: rgba(17, 17, 17, .72);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(201, 166, 107, .28);
    border-radius: 14px;
    box-shadow:
        0 18px 40px -18px rgba(0, 0, 0, .65),
        0 6px 16px -10px rgba(0, 0, 0, .45);
    color: #fff;
    /* Hidden by default — JS adds .is-visible after the hero settles */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.lacima-dev-badge.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lacima-dev-badge.is-leaving {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}

/* Pulsing gold indicator — signals "in progress / live state" */
.lacima-dev-badge__dot {
    position: relative;
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold-2);
    box-shadow: 0 0 0 4px rgba(201, 166, 107, .18);
}
.lacima-dev-badge__dot::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--gold-2);
    animation: lacima-dev-pulse 2.4s ease-out infinite;
}
@keyframes lacima-dev-pulse {
    0%   { transform: scale(1);   opacity: .85; }
    100% { transform: scale(3.4); opacity: 0; }
}

.lacima-dev-badge__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.25;
}
.lacima-dev-badge__eyebrow {
    color: var(--gold-2);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-weight: 500;
}
.lacima-dev-badge__line {
    color: rgba(255, 255, 255, .92);
    font-family: 'Barlow', sans-serif;
    font-size: .88rem;
    letter-spacing: .015em;
}
.lacima-dev-badge__sub {
    color: rgba(255, 255, 255, .55);
    font-family: 'Barlow', sans-serif;
    font-size: .74rem;
    font-style: italic;
    margin-top: 3px;
    letter-spacing: .01em;
}

.lacima-dev-badge__close {
    flex-shrink: 0;
    width: 26px; height: 26px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .65);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.lacima-dev-badge__close:hover {
    color: var(--gold-2);
    border-color: var(--gold-2);
    background: rgba(201, 166, 107, .1);
}
.lacima-dev-badge__close i { font-size: .72rem; }

@media (max-width: 576px) {
    .lacima-dev-badge {
        left: 12px; right: 12px; bottom: 14px;
        max-width: none;
        padding: 10px 12px 10px 14px;
        gap: 10px;
    }
    .lacima-dev-badge__line { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lacima-dev-badge__dot::after { animation: none; }
}