/* =========================================================
   RESERVA CASTELO — PROPUESTA ACTUALIZADA
   ========================================================= */

:root {
    --color-green: #104C44;
    --color-green-dark: #0a312c;
    --color-green-deep: #062923;
    --color-gold: #C09A5A;
    --color-gold-light: #d6b882;
    --color-white: #ffffff;
    --color-bg-light: #fafafa;
    --color-bg-soft: #f2f1ed;
    --color-text: #333333;
    --color-muted: #6d746f;

    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;

    --grid-border: 1px solid rgba(16, 76, 68, 0.15);
    --shadow-soft: 0 24px 70px rgba(6, 41, 35, 0.12);
    --shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.22);
    --radius-large: 28px;
    --radius-medium: 18px;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg-light);
    overflow-x: hidden;
}

body.lightbox-open,
body.menu-open {
    overflow: hidden;
}

img,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    color: var(--color-green);
    font-weight: 600;
}

p {
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

::selection {
    background: var(--color-gold);
    color: var(--color-green-deep);
}

/* =========================================================
   UTILIDADES
   ========================================================= */

.section-padding {
    padding: 110px 5vw;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.section-eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
}

.section-eyebrow-light {
    color: var(--color-gold-light);
}

.section-eyebrow-gold {
    color: var(--color-gold-light);
}

/* =========================================================
   LOADER
   ========================================================= */

#intro-loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-green);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.intro-bg-gradient {
    position: absolute;
    width: 150vw;
    height: 150vh;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(192, 154, 90, 0.48) 0%,
            rgba(10, 49, 44, 0.92) 48%,
            var(--color-green-dark) 75%
        );
    opacity: 0;
}

.intro-logo {
    height: 380px;
    max-height: 60vh;
    z-index: 2;
    object-fit: contain;
}

/* =========================================================
   HEADER
   ========================================================= */

#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 50px;
    z-index: 1000;
    transition:
        background 0.4s ease,
        padding 0.4s ease,
        box-shadow 0.4s ease;
    background: transparent;
}

#main-header.scrolled {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 7px 30px rgba(0, 0, 0, 0.07);
    padding: 10px 50px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1450px;
    margin: 0 auto;
    min-height: 88px;
}

.logo-container {
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-decoration: none;
    flex: 0 0 auto;
}

#main-header.scrolled .logo-container {
    opacity: 1;
}

.nav-logo {
    height: 154px;
    width: auto;
    max-width: min(38vw, 395px);
    object-fit: contain;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        height 0.35s ease;
}

#main-header.scrolled .nav-logo {
    height: 130px;
}

.logo-white {
    opacity: 1;
}

.logo-black {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#main-header.scrolled .logo-white {
    opacity: 0;
}

#main-header.scrolled .logo-black {
    opacity: 1;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#main-header.scrolled .nav-links {
    opacity: 1;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-green);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

#main-header:not(.scrolled) .nav-links a {
    color: var(--color-white);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-gold) !important;
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    font-size: 2rem;
    color: var(--color-white);
    cursor: pointer;
    z-index: 4;
}

#main-header.scrolled .mobile-menu-btn {
    color: var(--color-green);
}

/* =========================================================
   HERO
   ========================================================= */

.hero-section {
    position: relative;
    min-height: 100svh;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-green-dark);
    isolation: isolate;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -4;
    pointer-events: none;
    filter:
        saturate(0.88)
        contrast(1.05)
        brightness(0.86);
    transform: scale(1.02);
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(6, 41, 35, 0.78) 0%,
            rgba(16, 76, 68, 0.48) 45%,
            rgba(6, 41, 35, 0.64) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4, 31, 27, 0.60) 0%,
            rgba(16, 76, 68, 0.28) 45%,
            rgba(4, 31, 27, 0.82) 100%
        );
}

.hero-depth {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    box-shadow:
        inset 0 -180px 160px rgba(4, 31, 27, 0.40),
        inset 0 120px 150px rgba(4, 31, 27, 0.32);

    background:
        radial-gradient(
            circle at 50% 50%,
            transparent 25%,
            rgba(3, 30, 26, 0.20) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-white);
    max-width: 1020px;
    padding: 150px 24px 80px;
}

.hero-kicker {
    margin-bottom: 20px;
    color: var(--color-gold-light) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.35em !important;
}

.hero-content h1 {
    font-size: clamp(2.7rem, 5vw, 5.1rem);
    line-height: 1.08;
    color: var(--color-white);
    margin-bottom: 26px;
    letter-spacing: 0.035em;
    text-wrap: balance;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}

.hero-content > p:not(.hero-kicker) {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 300;
    color: #f0dfbf;
    letter-spacing: 0.08em;
}

.hero-scroll {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.17em;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}

.hero-scroll i {
    font-size: 1.2rem;
    animation: hero-arrow 1.8s ease-in-out infinite;
}

.hero-scroll:hover {
    color: var(--color-gold-light);
    border-color: var(--color-gold-light);
}

@keyframes hero-arrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* =========================================================
   INTRO
   ========================================================= */

.arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: var(--grid-border);
    max-width: 1400px;
    margin: 0 auto;
}

.arch-grid > div {
    padding: 60px;
    border: var(--grid-border);
}

.text-block h2,
.dark-block h2 {
    font-size: clamp(1.75rem, 2.5vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 30px;
}

.text-block .highlight {
    font-weight: 600;
    color: var(--color-gold);
    font-size: 1.05rem;
    margin-top: 20px;
}

.image-block {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    min-height: 440px;
}

.placeholder-img {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
}

.dark-block {
    background-color: var(--color-green);
    color: var(--color-white);
}

.dark-block h2 {
    color: var(--color-gold);
}

.stats-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: var(--color-bg-light);
}

.stat {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-green);
}

.stat i {
    font-size: 2.5rem;
    color: var(--color-gold);
}

/* =========================================================
   MASTERPLAN
   ========================================================= */

.masterplan-section {
    position: relative;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(192, 154, 90, 0.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--color-green-deep) 0%,
            var(--color-green-dark) 100%
        );

    color: var(--color-white);
    overflow: hidden;
}

.masterplan-section::before,
.masterplan-section::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(214, 184, 130, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.masterplan-section::before {
    width: 700px;
    height: 700px;
    top: -390px;
    right: -160px;
}

.masterplan-section::after {
    width: 500px;
    height: 500px;
    bottom: -330px;
    left: -180px;
}

.masterplan-header {
    max-width: 940px;
    margin: 0 auto 52px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.masterplan-header h2 {
    color: var(--color-white);
    font-size: clamp(2.8rem, 5vw, 5rem);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

.masterplan-header p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.masterplan-shell {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: var(--shadow-deep);
    overflow: hidden;
}

.masterplan-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.master-tab {
    min-height: 76px;
    padding: 18px 28px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.master-tab:last-child {
    border-right: 0;
}

.master-tab i {
    font-size: 1.4rem;
}

.master-tab:hover,
.master-tab.is-active {
    background: var(--color-gold);
    color: var(--color-green-deep);
}

.master-view {
    display: none;
}

.master-view.is-active {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(350px, 0.65fr);
}

.master-map-column,
.amenities-map-column {
    padding: clamp(22px, 3vw, 48px);
    min-width: 0;
}

/* =========================================================
   MAPA PRINCIPAL
   ========================================================= */

.master-image-frame {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(0, 0, 0, 0.12)
        ),
        rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.09);
}

.master-image-frame::before {
    content: '';
    position: absolute;
    inset: 9%;
    background:
        radial-gradient(
            circle,
            rgba(192, 154, 90, 0.16),
            transparent 68%
        );
    filter: blur(28px);
    pointer-events: none;
}

#masterplan-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(
            0 24px 30px rgba(0, 0, 0, 0.38)
        );
    transition:
        opacity 0.35s ease,
        filter 0.35s ease;
}

#masterplan-image.is-dimmed {
    opacity: 0.18;

    filter:
        grayscale(0.5)
        brightness(0.72)
        drop-shadow(
            0 24px 30px rgba(0, 0, 0, 0.28)
        );
}

#masterplan-highlight {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    z-index: 2;
    opacity: 0;
    pointer-events: none;

    filter:
        drop-shadow(
            0 0 20px rgba(255, 255, 255, 0.25)
        );

    transition:
        opacity 0.35s ease,
        filter 0.35s ease;
}

#masterplan-highlight.is-visible {
    opacity: 1;
}

#masterplan-highlight.is-vialidad {
    filter:
        drop-shadow(
            0 0 8px rgba(230, 239, 236, 0.78)
        )
        drop-shadow(
            0 0 22px rgba(174, 176, 178, 0.48)
        );
}

#masterplan-highlight.is-donacion-exterior {
    filter:
        drop-shadow(
            0 0 9px rgba(192, 154, 90, 0.42)
        )
        drop-shadow(
            0 0 20px rgba(155, 124, 101, 0.30)
        );
}

.master-map-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow:
        inset 0 0 80px rgba(4, 31, 27, 0.28);
}

.map-selected-label {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;
    max-width: calc(100% - 100px);

    background: rgba(6, 41, 35, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);

    color: var(--color-white);

    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-selected-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow:
        0 0 0 5px rgba(192, 154, 90, 0.14);
}

.map-expand-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;

    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    background:
        rgba(6, 41, 35, 0.72);

    color:
        var(--color-white);

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.map-expand-btn:hover {
    background: var(--color-gold);
    color: var(--color-green-deep);
    transform: translateY(-2px);
}

.map-expand-btn i {
    font-size: 1.35rem;
}

.master-map-help {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.74rem;
}

.master-map-help i {
    color: var(--color-gold-light);
    font-size: 1.1rem;
    margin-top: 3px;
}

/* PDF */
.master-brochure-download {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-top: 12px;
    padding: 10px 13px;

    color:
        rgba(255, 255, 255, 0.58);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.025);

    text-decoration: none;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.master-brochure-download i {
    color: var(--color-gold-light);
    font-size: 1.15rem;
}

.master-brochure-download span {
    display: grid;
    gap: 2px;
}

.master-brochure-download strong {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.master-brochure-download small {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.40);
}

.master-brochure-download:hover {
    color: var(--color-white);
    border-color: rgba(214, 184, 130, 0.34);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

/* =========================================================
   LEYENDA
   ========================================================= */

.master-legend,
.amenities-copy {
    padding: clamp(30px, 3vw, 52px);
    border-left:
        1px solid rgba(255, 255, 255, 0.12);
    background:
        rgba(0, 0, 0, 0.08);
}

.master-legend-heading h3,
.amenities-copy h3 {
    color: var(--color-white);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.25;
    margin-bottom: 14px;
}

.master-legend-heading p,
.amenities-copy > p {
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 28px;
}

.zone-list {
    display: grid;
    gap: 8px;
}

.zone-item {
    width: 100%;

    display: grid;
    grid-template-columns: 42px 1fr;

    align-items: center;
    gap: 14px;

    padding: 12px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        var(--color-white);

    text-align: left;
    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;
}

.zone-item:hover,
.zone-item.is-active {
    transform: translateX(5px);

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(214, 184, 130, 0.34);
}

.zone-list.has-active .zone-item:not(.is-active) {
    opacity: 0.46;
}

.zone-swatch {
    width: 34px;
    height: 34px;

    border:
        1px solid rgba(255, 255, 255, 0.78);

    background:
        var(--zone-color);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.16);
}

.zone-copy {
    display: grid;
    gap: 3px;
}

.zone-copy strong {
    font-size: 0.78rem;
    letter-spacing: 0.055em;
}

.zone-copy small {
    color:
        rgba(255, 255, 255, 0.5);

    font-size: 0.68rem;
    line-height: 1.4;
}

.zone-reset {
    width: 100%;
    margin-top: 18px;
    min-height: 48px;

    border:
        1px solid rgba(214, 184, 130, 0.42);

    background:
        transparent;

    color:
        var(--color-gold-light);

    cursor:
        pointer;

    font-size:
        0.7rem;

    font-weight:
        600;

    letter-spacing:
        0.1em;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.zone-reset:hover {
    background:
        var(--color-gold);

    color:
        var(--color-green-deep);
}

/* =========================================================
   AMENIDADES
   ========================================================= */

.amenities-stage {
    --focus-x: 50%;
    --focus-y: 50%;
    --marker-x: 50%;
    --marker-y: 50%;
    --amenity-zoom: 1.72;

    position: relative;
    min-height: 640px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(192, 154, 90, 0.06),
            transparent 48%
        ),
        rgba(255, 255, 255, 0.025);

    isolation:
        isolate;
}

.amenities-stage img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

    transform: scale(1);

    transform-origin:
        var(--focus-x) var(--focus-y);

    filter:
        drop-shadow(
            0 26px 34px rgba(0, 0, 0, 0.35)
        );

    transition:
        transform 0.78s cubic-bezier(.16, 1, .3, 1),
        filter 0.45s ease;

    z-index:
        1;
}

.amenities-stage.is-focused img {
    transform:
        scale(var(--amenity-zoom));

    filter:
        drop-shadow(
            0 32px 44px rgba(0, 0, 0, 0.44)
        )
        brightness(1.04)
        contrast(1.02);
}

.amenity-focus-ring {
    position: absolute;
    left: var(--marker-x);
    top: var(--marker-y);

    width: 72px;
    height: 72px;

    border:
        1px solid rgba(214, 184, 130, 0.72);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%)
        scale(0.55);

    opacity:
        0;

    z-index:
        4;

    pointer-events:
        none;

    box-shadow:
        0 0 0 10px rgba(192, 154, 90, 0.08),
        0 0 32px rgba(192, 154, 90, 0.30);

    transition:
        opacity 0.3s ease,
        transform 0.55s cubic-bezier(.16, 1, .3, 1);
}

.amenities-stage.is-focused .amenity-focus-ring {
    opacity:
        1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.amenity-marker {
    position:
        absolute;

    left:
        var(--marker-x);

    top:
        var(--marker-y);

    z-index:
        6;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;

    transform:
        translate(-50%, -92%)
        translateY(14px)
        scale(0.84);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.28s ease,
        transform 0.55s cubic-bezier(.16, 1, .3, 1);
}

.amenities-stage.is-focused .amenity-marker {
    opacity:
        1;

    transform:
        translate(-50%, -92%)
        translateY(0)
        scale(1);
}

.amenity-marker-pin {
    width:
        48px;

    height:
        48px;

    border-radius:
        50% 50% 50% 8px;

    transform:
        rotate(-45deg);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--color-gold);

    border:
        3px solid var(--color-white);

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.34),
        0 0 0 8px rgba(192, 154, 90, 0.13);
}

.amenity-marker-pin i {
    transform:
        rotate(45deg);

    color:
        var(--color-green-deep);

    font-size:
        1.35rem;
}

.amenity-marker-label {
    max-width:
        190px;

    padding:
        7px 10px;

    background:
        rgba(6, 41, 35, 0.91);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    color:
        var(--color-white);

    font-size:
        0.62rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-align:
        center;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.20);
}

.amenity-reset-map {
    position:
        absolute;

    left:
        18px;

    bottom:
        18px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        38px;

    padding:
        8px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    background:
        rgba(6, 41, 35, 0.82);

    color:
        var(--color-white);

    font-size:
        0.62rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    cursor:
        pointer;

    backdrop-filter:
        blur(10px);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
}

.amenities-stage.is-focused .amenity-reset-map {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}

.amenity-reset-map:hover {
    background:
        var(--color-gold);

    color:
        var(--color-green-deep);
}

.amenity-detail {
    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        18px;

    padding:
        20px 0;

    margin:
        12px 0 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.amenity-detail-number {
    color:
        var(--color-gold-light);

    font-family:
        var(--font-heading);

    font-size:
        1.4rem;
}

.amenity-detail strong {
    display:
        block;

    color:
        var(--color-white);

    font-size:
        0.9rem;

    letter-spacing:
        0.06em;

    margin-bottom:
        6px;
}

.amenity-detail p {
    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        0.76rem;

    margin:
        0;
}

.amenity-pills {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}

.amenity-pill {
    border:
        1px solid rgba(255, 255, 255, 0.13);

    background:
        rgba(255, 255, 255, 0.03);

    color:
        rgba(255, 255, 255, 0.66);

    padding:
        9px 11px;

    cursor:
        pointer;

    font-size:
        0.68rem;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.amenity-pill:hover,
.amenity-pill.is-active {
    background:
        var(--color-gold);

    color:
        var(--color-green-deep);

    border-color:
        var(--color-gold);
}

.amenities-fullscreen {
    margin-top:
        24px;

    background:
        transparent;

    color:
        var(--color-gold-light);

    border-color:
        rgba(214, 184, 130, 0.48);

    cursor:
        pointer;
}

.amenities-fullscreen:hover {
    background:
        var(--color-gold);

    color:
        var(--color-green-deep);
}

/* =========================================================
   MODELOS
   ========================================================= */

.modelos-section {
    background:
        var(--color-white);

    border-top:
        var(--grid-border);

    overflow:
        hidden;
}

.modelos-header {
    text-align:
        center;

    max-width:
        850px;

    margin:
        0 auto 60px;
}

.modelos-header h2 {
    font-size:
        clamp(2.3rem, 4vw, 3.6rem);

    margin-bottom:
        20px;

    letter-spacing:
        0.06em;
}

.modelos-grid {
    display:
        flex;

    gap:
        28px;

    overflow-x:
        auto;

    overscroll-behavior-inline:
        contain;

    padding:
        10px 5vw 42px;

    scroll-snap-type:
        x mandatory;

    scroll-padding-inline:
        5vw;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--color-gold)
        rgba(16, 76, 68, 0.08);
}

.modelos-grid::-webkit-scrollbar {
    height:
        8px;
}

.modelos-grid::-webkit-scrollbar-track {
    background:
        rgba(16, 76, 68, 0.08);
}

.modelos-grid::-webkit-scrollbar-thumb {
    background:
        var(--color-gold);

    border-radius:
        4px;
}

.modelo-card {
    width:
        clamp(390px, 31vw, 500px);

    min-width:
        clamp(390px, 31vw, 500px);

    flex:
        0 0 auto;

    border:
        var(--grid-border);

    scroll-snap-align:
        center;

    background:
        var(--color-bg-light);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    overflow:
        hidden;
}

.modelo-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);
}

.modelo-media {
    display:
        block;

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    background:
        #eef0ed;

    overflow:
        hidden;
}

.modelo-media::after {
    content:
        '';

    position:
        absolute;

    inset:
        0;

    box-shadow:
        inset 0 0 0 1px rgba(16, 76, 68, 0.06);

    pointer-events:
        none;
}

.modelo-media img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    transition:
        transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.modelo-card:hover .modelo-media img {
    transform:
        scale(1.015);
}

.modelo-media.is-missing {
    display:
        grid;

    place-items:
        center;

    padding:
        40px;

    text-align:
        center;
}

.modelo-media.is-missing::before {
    content:
        'FICHA TÉCNICA';

    color:
        var(--color-green);

    font-family:
        var(--font-heading);

    letter-spacing:
        0.1em;

    font-size:
        0.9rem;
}

.modelo-media.is-missing img {
    display:
        none;
}

.modelo-info {
    padding:
        22px 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    border-top:
        var(--grid-border);
}

.modelo-info h3 {
    margin:
        3px 0 0;

    letter-spacing:
        0.13em;

    font-size:
        1.2rem;
}

.modelo-number {
    color:
        var(--color-gold);

    font-size:
        0.68rem;

    letter-spacing:
        0.16em;
}

.btn-outline {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px 18px;

    border:
        1px solid var(--color-green);

    color:
        var(--color-green);

    text-decoration:
        none;

    font-family:
        var(--font-heading);

    font-size:
        0.72rem;

    letter-spacing:
        0.04em;

    transition:
        all 0.3s ease;

    white-space:
        nowrap;
}

.btn-outline:hover {
    background:
        var(--color-green);

    color:
        var(--color-white);
}

.modelos-hint {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        var(--color-muted);

    font-size:
        0.72rem;

    margin:
        16px 0 0;
}

/* =========================================================
   EXPERIENCIA
   ========================================================= */

.experiencia-section {
    position:
        relative;

    min-height:
        70vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        url('../img/acceso.jpeg')
        center / cover
        no-repeat;

    background-attachment:
        fixed;

    color:
        var(--color-white);

    overflow:
        hidden;
}

.video-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 41, 35, 0.90),
            rgba(16, 76, 68, 0.73),
            rgba(6, 41, 35, 0.90)
        );

    z-index:
        1;
}

.experiencia-section .content {
    position:
        relative;

    z-index:
        2;

    max-width:
        850px;
}

.experiencia-section h2 {
    color:
        var(--color-gold-light);

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height:
        1.2;

    margin-bottom:
        25px;
}

.experiencia-section p {
    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        1rem;
}

/* =========================================================
   URBIKA
   ========================================================= */

.urbika-strip {
    background:
        var(--color-bg-soft);

    padding-top:
        80px;

    padding-bottom:
        80px;
}

.urbika-card {
    max-width:
        1400px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(180px, 0.55fr)
        minmax(0, 1.55fr)
        auto;

    align-items:
        center;

    gap:
        clamp(30px, 4vw, 68px);

    padding:
        clamp(34px, 4vw, 58px);

    background:
        var(--color-green);

    box-shadow:
        var(--shadow-soft);

    position:
        relative;

    overflow:
        hidden;
}

.urbika-card::after {
    content:
        '';

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    border:
        1px solid rgba(214, 184, 130, 0.16);

    border-radius:
        50%;

    right:
        -160px;

    top:
        -190px;

    pointer-events:
        none;
}

.urbika-mark {
    min-height:
        90px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding-right:
        30px;

    border-right:
        1px solid rgba(255, 255, 255, 0.14);
}

.urbika-logo {
    max-width:
        215px;

    width:
        100%;

    max-height:
        96px;

    object-fit:
        contain;
}

.urbika-logo-fallback {
    display:
        none;

    color:
        var(--color-white);

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    font-weight:
        600;

    letter-spacing:
        -0.05em;
}

.urbika-copy {
    position:
        relative;

    z-index:
        1;
}

.urbika-copy h2 {
    color:
        var(--color-white);

    font-size:
        clamp(1.5rem, 2.4vw, 2.2rem);

    line-height:
        1.25;

    margin-bottom:
        12px;
}

.urbika-copy p {
    max-width:
        720px;

    color:
        rgba(255, 255, 255, 0.68);

    margin:
        0;
}

.urbika-link {
    position:
        relative;

    z-index:
        1;

    min-width:
        190px;

    min-height:
        54px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        1px solid var(--color-gold-light);

    color:
        var(--color-gold-light);

    text-decoration:
        none;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        0.09em;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.urbika-link:hover {
    background:
        var(--color-gold);

    color:
        var(--color-green-deep);
}

.urbika-link i {
    font-size:
        1.2rem;
}

/* =========================================================
   CONTACTO
   ========================================================= */

.contacto-section {
    background-color:
        var(--color-bg-light);
}

.contacto-container {
    background:
        var(--color-white);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.05);
}

.contacto-info {
    padding:
        60px;
}

.contacto-info h2 {
    font-size:
        clamp(1.6rem, 2.5vw, 2rem);

    margin-bottom:
        20px;
}

.contacto-info h3 {
    font-size:
        1.05rem;

    margin:
        30px 0 15px;
}

.social-links {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        30px;
}

.social-links a {
    color:
        var(--color-green);

    font-size:
        1.5rem;

    transition:
        color 0.3s ease;
}

.social-links a:hover {
    color:
        var(--color-gold);
}

.contacto-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

    margin-top:
        30px;
}

.form-group.row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;
}

.form-group label {
    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--color-green);

    font-size:
        0.78rem;

    font-weight:
        600;
}

input,
select,
textarea {
    width:
        100%;

    padding:
        12px 15px;

    border:
        1px solid rgba(0, 0, 0, 0.1);

    background:
        var(--color-bg-light);

    font-family:
        var(--font-body);

    font-size:
        0.9rem;

    outline:
        none;

    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--color-gold);

    box-shadow:
        0 0 0 3px rgba(192, 154, 90, 0.10);
}

.btn-solid {
    background:
        var(--color-green);

    color:
        var(--color-white);

    border:
        none;

    padding:
        15px;

    font-family:
        var(--font-heading);

    font-size:
        1rem;

    cursor:
        pointer;

    transition:
        background 0.3s;
}

.btn-solid:hover {
    background:
        var(--color-gold);
}

.aviso-privacidad {
    text-align:
        center;

    font-size:
        0.8rem;
}

.aviso-privacidad a {
    color:
        var(--color-text);
}

.map-container {
    padding:
        0 !important;

    min-height:
        560px;
}

.map-container iframe {
    display:
        block;

    min-height:
        560px;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

.map-lightbox {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        grid;

    place-items:
        center;

    padding:
        28px;

    background:
        rgba(4, 24, 21, 0.94);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.map-lightbox.is-open {
    opacity:
        1;

    visibility:
        visible;
}

.lightbox-inner {
    width:
        min(95vw, 1800px);

    height:
        min(90vh, 1100px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        auto;
}

.lightbox-inner img {
    width:
        auto;

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 30px 50px rgba(0, 0, 0, 0.45)
        );
}

.lightbox-close {
    position:
        absolute;

    top:
        24px;

    right:
        24px;

    width:
        52px;

    height:
        52px;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    background:
        rgba(255, 255, 255, 0.06);

    color:
        var(--color-white);

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        2;
}

.lightbox-close i {
    font-size:
        2rem;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background:
        var(--color-green-dark);

    color:
        rgba(255, 255, 255, 0.7);

    padding:
        40px 5vw;

    text-align:
        center;

    font-size:
        0.8rem;
}

footer .legal {
    max-width:
        850px;

    margin:
        0 auto 10px;
}

.copyright {
    margin-top:
        30px;

    padding-top:
        20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);

    color:
        var(--color-gold);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .master-view.is-active {
        grid-template-columns:
            1fr;
    }

    .master-legend,
    .amenities-copy {
        border-left:
            0;

        border-top:
            1px solid rgba(255, 255, 255, 0.12);
    }

    .master-image-frame,
    .amenities-stage {
        min-height:
            560px;
    }

    .amenities-stage {
        --amenity-zoom:
            1.58;
    }

    .zone-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .urbika-card {
        grid-template-columns:
            190px 1fr;
    }

    .urbika-link {
        grid-column:
            2;

        justify-self:
            start;
    }
}

@media (max-width: 992px) {

    .section-padding {
        padding:
            85px 5vw;
    }

    .arch-grid {
        grid-template-columns:
            1fr;
    }

    .arch-grid > div {
        padding:
            48px;
    }

    #main-header,
    #main-header.scrolled {
        padding:
            8px 18px;
    }

    .nav-container {
        min-height:
            76px;
    }

    .nav-logo,
    #main-header.scrolled .nav-logo {
        height:
            110px;

        max-width:
            285px;
    }

    .mobile-menu-btn {
        display:
            inline-flex;
    }

    .nav-links {
        position:
            fixed;

        top:
            0;

        right:
            0;

        width:
            min(360px, 86vw);

        height:
            100svh;

        padding:
            140px 34px 40px;

        background:
            rgba(6, 41, 35, 0.98);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            24px;

        transform:
            translateX(105%);

        opacity:
            1 !important;

        transition:
            transform 0.42s cubic-bezier(.16, 1, .3, 1);

        box-shadow:
            -20px 0 60px rgba(0, 0, 0, 0.24);

        z-index:
            3;
    }

    #main-header .nav-links a,
    #main-header.scrolled .nav-links a,
    #main-header:not(.scrolled) .nav-links a {
        color:
            var(--color-white);

        font-size:
            0.95rem;
    }

    #main-header.menu-open .nav-links {
        transform:
            translateX(0);
    }

    #main-header.menu-open .mobile-menu-btn {
        color:
            var(--color-white);
    }

    .hero-content {
        padding-top:
            130px;
    }

    .hero-content h1 {
        font-size:
            clamp(2.25rem, 7vw, 3.6rem);
    }

    .form-group.row {
        grid-template-columns:
            1fr;
    }

    .experiencia-section {
        background-attachment:
            scroll;
    }

    .urbika-card {
        grid-template-columns:
            1fr;
    }

    .urbika-mark {
        justify-content:
            flex-start;

        border-right:
            0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.14);

        padding:
            0 0 26px;
    }

    .urbika-link {
        grid-column:
            auto;
    }
}

@media (max-width: 720px) {

    .section-padding {
        padding:
            70px 20px;
    }

    .nav-logo,
    #main-header.scrolled .nav-logo {
        height:
            98px;

        max-width:
            250px;
    }

    .hero-video {
        object-fit:
            cover;

        object-position:
            center center;

        transform:
            scale(1.06);
    }

    .hero-video-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 31, 27, 0.68) 0%,
                rgba(16, 76, 68, 0.46) 45%,
                rgba(4, 31, 27, 0.88) 100%
            );
    }

    .hero-content {
        padding:
            130px 20px 70px;
    }

    .hero-content h1 {
        font-size:
            clamp(2rem, 10vw, 3.2rem);

        line-height:
            1.12;
    }

    .arch-grid > div {
        padding:
            34px 28px;
    }

    .image-block {
        min-height:
            340px;
    }

    .masterplan-header {
        margin-bottom:
            34px;
    }

    .masterplan-header h2 {
        font-size:
            clamp(2.35rem, 13vw, 4rem);
    }

    .masterplan-tabs {
        grid-template-columns:
            1fr;
    }

    .master-tab {
        min-height:
            62px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);
    }

    .master-map-column,
    .amenities-map-column,
    .master-legend,
    .amenities-copy {
        padding:
            18px;
    }

    .master-image-frame,
    .amenities-stage {
        min-height:
            360px;
    }

    #masterplan-image {
        width:
            120%;

        max-width:
            none;
    }

    .map-selected-label {
        left:
            12px;

        bottom:
            12px;

        font-size:
            0.62rem;

        padding:
            9px 10px;
    }

    .map-expand-btn {
        top:
            12px;

        right:
            12px;

        width:
            42px;

        height:
            42px;
    }

    .zone-list {
        grid-template-columns:
            1fr;
    }

    .zone-item:hover,
    .zone-item.is-active {
        transform:
            none;
    }

    .amenities-stage {
        --amenity-zoom:
            1.38;
    }

    .amenity-marker-pin {
        width:
            42px;

        height:
            42px;
    }

    .amenity-marker-label {
        max-width:
            145px;

        font-size:
            0.56rem;
    }

    .amenity-reset-map {
        left:
            12px;

        bottom:
            12px;
    }

    .modelo-card {
        width:
            min(86vw, 430px);

        min-width:
            min(86vw, 430px);
    }

    .modelo-info {
        padding:
            18px;

        flex-direction:
            column;

        align-items:
            stretch;

        text-align:
            center;
    }

    .modelo-info .btn-outline {
        width:
            100%;
    }

    .urbika-strip {
        padding:
            55px 20px;
    }

    .urbika-card {
        padding:
            32px 24px;
    }

    .urbika-link {
        width:
            100%;
    }

    .contacto-info {
        padding:
            34px 28px;
    }

    .map-container,
    .map-container iframe {
        min-height:
            420px;
    }

    .map-lightbox {
        padding:
            14px;
    }

    .lightbox-close {
        top:
            14px;

        right:
            14px;
    }
}

/* ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}

/* =========================================================
   AJUSTE FINAL AMENIDADES
   ZOOM DIRECTO SOBRE LAS FOTOGRAFÍAS
   ========================================================= */

.amenities-stage img {
    transform-origin:
        0 0 !important;
}

.amenities-stage.is-focused img {
    transform:
        translate(
            var(--amenity-tx, 0px),
            var(--amenity-ty, 0px)
        )
        scale(
            var(--amenity-zoom, 1)
        ) !important;

    filter:
        drop-shadow(
            0 34px 50px rgba(0, 0, 0, 0.48)
        )
        brightness(1.035)
        contrast(1.025) !important;
}

/* Marco exacto de la imagen de amenidad */
.amenity-focus-ring {
    left:
        var(--focus-left, 50%) !important;

    top:
        var(--focus-top, 50%) !important;

    width:
        var(--focus-width, 0px) !important;

    height:
        var(--focus-height, 0px) !important;

    border-radius:
        4px !important;

    transform:
        none !important;

    border:
        2px solid rgba(214, 184, 130, 0.96) !important;

    background:
        transparent !important;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.26) inset,
        0 0 0 8px rgba(192, 154, 90, 0.10),
        0 0 34px rgba(192, 154, 90, 0.42),
        0 18px 50px rgba(0, 0, 0, 0.34) !important;

    opacity:
        0 !important;

    z-index:
        7 !important;

    pointer-events:
        none;

    transition:
        opacity 0.30s ease,
        left 0.78s cubic-bezier(.16, 1, .3, 1),
        top 0.78s cubic-bezier(.16, 1, .3, 1),
        width 0.78s cubic-bezier(.16, 1, .3, 1),
        height 0.78s cubic-bezier(.16, 1, .3, 1) !important;
}

.amenities-stage.is-focused .amenity-focus-ring {
    opacity:
        1 !important;

    transform:
        none !important;
}

/* El antiguo pin ya no se muestra */
.amenity-marker {
    display:
        none !important;
}

/* Evita saltos en resize */
.amenity-no-transition img,
.amenity-no-transition .amenity-focus-ring {
    transition:
        none !important;
}

@media (max-width: 720px) {

    .amenities-stage.is-focused img {
        transform:
            translate(
                var(--amenity-tx, 0px),
                var(--amenity-ty, 0px)
            )
            scale(
                var(--amenity-zoom, 1)
            ) !important;
    }

    .amenity-focus-ring {
        border-width:
            1.5px !important;

        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.20) inset,
            0 0 0 5px rgba(192, 154, 90, 0.08),
            0 0 24px rgba(192, 154, 90, 0.36) !important;
    }
}