/* ==========================================================================
   Thompson Private Residences Puerto Cancún - Mobile-First Stylesheet
   ========================================================================== */

/* Font Declarations */
@font-face {
    font-family: 'NotoSansMono';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('assets/fonts/NotoSansMono-Regular.woff2') format('woff2'),
         url('assets/fonts/NotoSansMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NotoSansMono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/NotoSansMono-Light.woff2') format('woff2'),
         url('assets/fonts/NotoSansMono-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'CoralBlushScript';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('assets/fonts/CoralBlushScript.woff2') format('woff2'),
         url('assets/fonts/CoralBlushScript.ttf') format('truetype');
}

/* CSS Variables & Design System */
:root {
    --color-bg-dark: #202326;
    --color-bg-darker: #17191b;
    --color-bg-light: #f7f4ef;
    --color-bg-white: #ffffff;
    --color-footer-teal: #092226;
    
    --color-bronze: #c1976b;
    --color-bronze-hover: #a87e53;
    --color-bronze-dark: #8e6843;
    
    --color-text-dark: #22252a;
    --color-text-muted: #666a72;
    --color-text-light: #ffffff;
    --color-text-tan: #aa8a68;
    
    --font-mono: 'NotoSansMono', -apple-system, BlinkMacSystemFont, monospace;
    --font-script: 'CoralBlushScript', 'Playfair Display', Georgia, serif;
    
    --app-max-width: 860px;
    --radius-pill: 26px;
    --radius-card: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: #0d0e10;
    color: var(--color-text-dark);
    font-family: var(--font-mono);
    line-height: 1.5;
    min-height: 100vh;
}

/* App Main Container (Centered for Mobile Focus) */
.app-container {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    background-color: var(--color-bg-light);
    position: relative;
    overflow-x: hidden;
    overflow-x: clip;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.container-narrow {
    max-width: 700px;
    margin: 0 auto;
}

/* Buttons & Typography Utilities */
.btn-primary {
    display: inline-block;
    background-color: var(--color-bronze);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 16px 44px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(193, 151, 107, 0.3);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--color-bronze-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(193, 151, 107, 0.4);
}

.btn-link {
    color: var(--color-bronze);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    cursor: pointer;
}

.section-tag {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-bronze);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.section-tag-light {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.section-script-title {
    font-family: var(--font-script);
    font-size: 3.8rem;
    color: var(--color-text-dark);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: normal;
}

.section-script-title-light {
    font-family: var(--font-script);
    font-size: 3.8rem;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: normal;
}

/* ==========================================================================
   Header Component & Navigation
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    z-index: 100;
    padding: 22px 0 16px;
    /* verde Thompson (el del footer), no negro */
    background: linear-gradient(to bottom, rgba(1, 44, 50, 0.85) 0%, rgba(1, 44, 50, 0) 100%);
    transition: background-color 0.3s ease;
}

.site-header.scrolled {
    background: rgba(1, 44, 50, 0.96);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-selector {
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.lang-selector span,
.lang-selector a {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    color: inherit;
    text-decoration: none;
}

.lang-selector a:hover {
    opacity: 1;
}

.lang-selector span.active {
    opacity: 1;
    font-weight: bold;
    text-decoration: underline;
}

.header-logo img {
    height: 52px;
    width: auto;
    max-width: 75vw;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.menu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* Mobile Drawer Nav */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: var(--app-max-width);
    height: 100vh;
    background-color: var(--color-bg-darker);
    z-index: 999;
    padding: 80px 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: right 0.4s ease;
}

.mobile-nav.open {
    right: 0;
}

.close-nav {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.5rem;
    cursor: pointer;
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-bronze);
}

/* Sticky Brochure Bar (anclada al borde inferior) */
.brochure-float {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    z-index: 900;
    background-color: var(--color-bronze);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-align: center;
    padding: 15px 22px calc(15px + env(safe-area-inset-bottom));
    text-decoration: none;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
}

.brochure-float:hover {
    background-color: var(--color-bronze-hover);
}

.brochure-float.hidden-float {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(100%);
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: calc(76px + env(safe-area-inset-bottom));
    right: 16px;
    z-index: 900;
    width: 58px;
    height: 58px;
    background-color: #b3895c;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

.whatsapp-float img {
    width: 38px;
    height: 38px;
    display: block;
}

.whatsapp-float:hover {
    background-color: var(--color-bronze-hover);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 88vh;
    background: url('https://resourc.nyc3.cdn.digitaloceanspaces.com/sitio-thompson/assets/images/hero_poster.webp') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    /* Padding inferior amplio: evita que el CTA quede bajo la barra fija del brochure */
    padding: 100px 20px 120px;
    overflow: hidden;
}

.hero-video,
.hero-video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iOS pinta un botón de play sobre videos que no puede autoreproducir */
.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(32,35,38,0.45) 0%, rgba(23,25,27,0.7) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1140px;
}

/* Salto de línea que solo aplica en desktop (≥768px) */
.desktop-break {
    display: none;
}

.hero-title {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.35;
    margin-bottom: 20px;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: #d1c5b8;
    line-height: 1.6;
    margin-bottom: 36px;
}

/* ==========================================================================
   Welcome Section
   ========================================================================== */
.welcome-section {
    padding: 60px 0 0;
    background-color: var(--color-bg-light);
    text-align: center;
}

.welcome-title {
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    color: var(--color-bronze);
    line-height: 1.5;
    margin-bottom: 24px;
    font-weight: 500;
}

.welcome-text {
    font-size: 0.82rem;
    letter-spacing: 1.2px;
    color: var(--color-bronze);
    line-height: 1.7;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.hero-carousel {
    position: relative;
    margin-top: 48px;
    overflow: hidden;
}

.carousel-slide > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Las fotos 2 y 3 del slide solo existen en desktop
   (selector con > img para ganarle al display:block de arriba) */
.carousel-slide > img.carousel-img-extra {
    display: none;
}

.carousel-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background-color: #ffffff;
    transform: scale(1.2);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.carousel-arrow:hover {
    background-color: var(--color-bronze);
    border-color: var(--color-bronze);
}

.carousel-arrow-prev {
    left: 16px;
}

.carousel-arrow-next {
    right: 16px;
}

/* ==========================================================================
   Amenities Section
   ========================================================================== */
.amenities-section {
    padding: 60px 0;
    background-color: #ffffff;
    text-align: center;
}

.amenities-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 40px 32px;
    max-width: 620px;
    margin: 40px auto;
}

.amenity-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    cursor: pointer;
}

.amenity-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.amenity-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: sepia(0.6) hue-rotate(350deg) saturate(1.2);
}

.amenity-label {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: var(--color-text-dark);
    text-transform: uppercase;
}

.amenity-item {
    transition: opacity 0.4s ease;
}

.amenity-item.faded {
    opacity: 0.3;
}

.amenity-item.hidden-amenity {
    display: none;
}

.amenities-grid.expanded .amenity-item.faded {
    opacity: 1;
}

.amenities-grid.expanded .amenity-item.hidden-amenity {
    display: flex;
}

#amenitiesToggle .toggle-arrow-flip,
#amenitiesToggle {
    transition: transform 0.3s ease;
}

#amenitiesToggle.expanded {
    transform: rotate(180deg);
}

.scroll-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-text-dark);
    color: var(--color-text-dark);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s;
}

.scroll-circle-btn:hover {
    background-color: var(--color-bronze);
    border-color: var(--color-bronze);
    color: #ffffff;
}

/* ==========================================================================
   Residences Banner & Details
   ========================================================================== */
.residences-split {
    display: contents;
}

.residences-banner-section {
    position: relative;
    overflow: hidden;
}

.residences-hero-img {
    width: 100%;
    display: block;
}

.residences-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 40%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 70px 20px 20px;
}

.residence-details-section {
    padding: 50px 0 70px;
    background-color: var(--color-bg-light);
}

.residence-tabs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 40px;
}

.tab-btn {
    background: transparent;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 8px 0 10px;
    position: relative;
    transition: color 0.3s;
}

.tab-btn.active {
    color: var(--color-text-dark);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-dark);
}

/* Estado inicial sin tipología elegida: edificio prendido y solo la
   invitación a elegir un tab (referencia: vista-residences-sin-selecconar.jpeg) */
.residence-pick-one {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 34px 0 44px;
    font-family: var(--font-mono);
    color: var(--color-text-dark);
}

.residence-pick-one .pick-one-arrow {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 300;
}

.residence-pick-one .pick-one-label {
    font-size: 0.85rem;
    letter-spacing: 2.5px;
}

.residence-details-section.no-selection .residence-pick-one {
    display: flex;
}

.residence-details-section.no-selection .residence-content-wrapper {
    display: none;
}

.residence-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.residence-main-title {
    font-size: 1.7rem;
    letter-spacing: 2px;
    color: var(--color-text-dark);
    font-weight: 500;
}

.carousel-nav-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.nav-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #c5bbb0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.nav-arrow-btn:hover {
    border-color: var(--color-bronze);
    color: var(--color-bronze);
}

.residence-specs-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.residence-specs {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.spec-value {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.spec-value sup {
    font-size: 0.55em;
    font-weight: normal;
}

.spec-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.residence-diagram {
    flex: 0 1 48%;
}

.residence-diagram img {
    width: 100%;
    display: block;
}

.residence-photo-box {
    overflow: hidden;
    margin-bottom: 15px;
}

.residence-photo-box img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.residence-caption-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-dark);
    margin-bottom: 30px;
}

.residence-caption-row #photoCounter strong {
    font-weight: bold;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-dark);
    margin-bottom: 40px;
}

.brochure-btn-wrapper {
    text-align: center;
}

/* ==========================================================================
   Awards & Mentions Section
   ========================================================================== */
.awards-section {
    padding: 70px 0;
    background: #24282a url('https://resourc.nyc3.cdn.digitaloceanspaces.com/sitio-thompson/assets/images/pattern_bg.webp') top center / 100% auto no-repeat;
    color: #ffffff;
    text-align: center;
}

.awards-logos-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    width: 80%;
    margin: 40px auto;
}

.award-logo {
    max-width: 22%;
    max-height: 62px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Los logos con enlace: el <a> no participa en el layout (display: contents),
   así el <img> sigue siendo hijo directo del flex y conserva su 22% */
.awards-logos-grid a {
    display: contents;
}

.awards-logos-grid a .award-logo {
    cursor: pointer;
}

.awards-divider {
    height: 1px;
    background-color: rgba(255,255,255,0.2);
    margin: 30px auto;
    width: 80%;
}

/* Misma anchura que la fila de premios (80%), con cajas uniformes por logo */
.press-logos-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 80%;
    margin: 0 auto 40px;
}

.press-logo {
    width: 26%;
    max-width: 190px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Slider de prensa: el logo central es el activo (blanco), los laterales apagados */
.press-logo.press-active {
    opacity: 1;
    cursor: pointer;
}

.press-logo.press-side {
    opacity: 0.3;
    transform: scale(0.85);
    cursor: pointer;
}

.awards-cta {
    margin-top: 20px;
}

/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section {
    padding: 60px 0;
    background-color: #ffffff;
    text-align: center;
}

.section-subtitle {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: var(--color-bronze);
    margin-bottom: 40px;
}

.services-section .section-script-title {
    color: var(--color-bronze);
}

.services-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
}

.services-image {
    flex: 0 0 50%;
}

.services-image img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

.services-body {
    flex: 1;
    padding: 8px 20px 0 26px;
}

.services-lead {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-dark);
    margin-bottom: 28px;
    line-height: 1.5;
}

.services-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: var(--color-text-dark);
    margin-bottom: 40px;
    /* La altura fija la pone el JS midiendo la página más alta del slider,
       para que las flechas nunca se desplacen al cambiar el contenido */
    transition: opacity 0.2s ease;
}

/* Sangría francesa: cuando un renglón se parte en dos líneas, la segunda
   alinea con el texto (después del guion) y no con el borde izquierdo.
   El valor equivale al ancho de "- " con el letter-spacing de cada lista */
.services-list li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.location-detail-group li {
    padding-left: 1.3em;
    text-indent: -1.3em;
}

.services-nav {
    justify-content: space-between;
}

/* Nota al pie de servicios: queda fija bajo el slider, no rota con la lista */
.services-note {
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-top: 24px;
}

/* ==========================================================================
   Exclusive Community Section
   ========================================================================== */
.community-section {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.community-hero-wrapper {
    height: 100%;
}

/* el <picture> (imagen móvil/desktop) no debe romper el height:100% del img */
.community-picture {
    display: block;
    height: 100%;
}

.community-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%;
}

.community-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 55px 20px 60px;
    color: #ffffff;
}

.community-overlay .community-footer-text {
    margin-top: auto;
}

.community-subtitle {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 24px;
    font-weight: 500;
}

.community-footer-text {
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    color: #ffffff;
    max-width: 600px;
    line-height: 1.6;
}

/* ==========================================================================
   Location & Map Section
   ========================================================================== */
.map-section {
    padding: 0 0 60px;
    background-color: var(--color-bg-light);
    text-align: center;
}

.map-section .section-script-title {
    color: var(--color-bronze);
    font-size: 4.6rem;
}

.map-container-outer {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 45px;
    background-color: #e5e3df;
}

.google-map-box, #mat {
    width: 100%;
    height: 100%;
}

.map-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
}

.map-fallback.show {
    display: block;
}

.map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-pin {
    position: absolute;
    top: 45%;
    left: 52%;
    transform: translate(-50%, -50%);
    background-color: var(--color-bronze);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.map-intro-text {
    font-size: 0.85rem;
    letter-spacing: 1.2px;
    color: var(--color-text-dark);
    text-align: left;
    line-height: 1.8;
    margin-bottom: 45px;
}

/* Accordion Component */
.accordion-list {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.accordion-item {
    background-color: transparent;
    border-bottom: 1px solid #c9c4ba;
}

.accordion-item:first-child {
    border-top: 1px solid #c9c4ba;
}

.accordion-header {
    width: 100%;
    padding: 22px 4px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Los <button> centran el texto por defecto; se nota cuando el título salta de línea */
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-dark);
    cursor: pointer;
    font-weight: 500;
}

/* Títulos del acordeón más grandes solo en Ubicación */
.map-section .accordion-header {
    font-size: 1rem;
}

.accordion-header .arrow {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header .arrow {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
    padding: 0 20px 18px 20px;
}

/* Ubicación: contenido con imagen + puntos (más alto que el Q&A) */
.map-section .accordion-item.active .accordion-content {
    max-height: 2000px;
}

/* Q&A: las respuestas del documento son largas y superan los 200px base */
.qa-section .accordion-item.active .accordion-content {
    max-height: 2000px;
}

.location-flex {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.accordion-img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.location-desc {
    margin-bottom: 14px;
}

.location-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.location-detail-group h4 {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    color: var(--color-bronze);
    margin-bottom: 6px;
    font-weight: 600;
}

.location-detail-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    line-height: 1.8;
}

/* ==========================================================================
   Groundbreaking Ceremony Section
   ========================================================================== */
.groundbreaking-section {
    background-color: #0d0e10;
    color: #ffffff;
    text-align: center;
    padding-bottom: 50px;
}

.gb-hero {
    position: relative;
}

/* El bloque desktop de groundbreaking solo existe en pantallas amplias */
.gb-desktop {
    display: none;
}

.groundbreaking-img {
    width: 100%;
    height: auto;
    display: block;
}

.gb-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13,14,16,0.85) 0%, rgba(13,14,16,0) 45%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 20px 0;
}

.section-script-title-gold {
    font-family: var(--font-script);
    font-size: 3.8rem;
    color: var(--color-bronze);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: normal;
}

.groundbreaking-desc {
    font-size: 0.85rem;
    letter-spacing: 1.2px;
    color: #ffffff;
    text-align: left;
    line-height: 1.8;
    margin: 45px 0 0;
}

/* ==========================================================================
   World of Hyatt Section
   ========================================================================== */
.hyatt-section {
    position: relative;
    min-height: 520px;
}

/* Móvil conserva la foto de fondo con velo y texto blanco;
   el panel blanco con texto negro es solo de desktop */
.hyatt-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hyatt-overlay {
    position: relative;
    z-index: 2;
    background: rgba(0, 30, 45, 0.25);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: #ffffff;
}

.hyatt-logo-box {
    margin-bottom: 30px;
}

.hyatt-logo-img {
    height: 90px;
    width: auto;
    object-fit: contain;
}

.hyatt-title {
    font-size: 1.55rem;
    letter-spacing: 2px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 500;
}

.hyatt-desc {
    font-size: 0.85rem;
    letter-spacing: 1.2px;
    color: inherit;
    line-height: 1.8;
    margin-bottom: 18px;
    max-width: 620px;
}

.hyatt-overlay .btn-primary {
    margin-top: 22px;
    width: auto;
    font-size: 0.75rem;
    padding: 12px 28px;
}

/* ==========================================================================
   Q&A Section
   ========================================================================== */
.qa-section {
    padding: 70px 0;
    background-color: #d9d8d6;
    text-align: center;
}

.qa-section .accordion-item,
.qa-section .accordion-item:first-child {
    border-color: #8b8b89;
}

/* Títulos de categoría del Q&A */
.qa-category {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-bronze);
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    margin: 36px 0 4px;
}

.qa-section .accordion-header span:first-child {
    text-transform: uppercase;
}

.qa-oculto {
    display: none;
}

.qa-mostrar-mas-wrap {
    margin-top: 28px;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.site-footer {
    background-color: #012c32;
    color: #ffffff;
    padding: 60px 0 0;
    position: relative;
}

.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.footer-logo img {
    height: 65px;
    width: auto;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.social-icon-btn:hover {
    opacity: 0.75;
}

.social-icon-btn img {
    height: 30px;
    width: auto;
    display: block;
}

.social-icon-btn:hover {
    color: var(--color-bronze);
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.partner-logos {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.partner-logos img {
    width: 40px;
    height: auto;
    object-fit: contain;
    /* Tinte dorado (≈ var(--color-bronze) #c1976b) */
    filter: brightness(0) invert(60%) sepia(100%) saturate(160%) hue-rotate(351deg) brightness(85%);
}

.footer-disclaimer {
    font-size: 0.68rem;
    color: #dfe3e2;
    line-height: 1.6;
    text-align: justify;
}

/* Enlace al aviso legal (/legal-disclaimer-es/ · /legal-disclaimer/) */
.footer-legal {
    margin-top: 12px;
    font-size: 0.68rem;
    letter-spacing: 1px;
}

.footer-legal a {
    color: #dfe3e2;
    text-decoration: underline;
}

.footer-bottom-pattern {
    height: 18px;
    background: url('https://resourc.nyc3.cdn.digitaloceanspaces.com/sitio-thompson/assets/images/footer_pattern.webp') top center / 100% auto repeat-x;
    margin-top: 45px;
}

/* ==========================================================================
   WhatsApp Lead Modal Popup (Matching pop up.png)
   ========================================================================== */
.lead-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lead-modal.open {
    opacity: 1;
    visibility: visible;
}

.lead-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

.lead-modal-content {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px 28px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.lead-modal-close {
    position: absolute;
    top: 15px;
    right: 18px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #444;
    cursor: pointer;
    line-height: 1;
}

.lead-modal-subtitle {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 500;
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: #777;
    text-transform: uppercase;
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #222;
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: var(--color-bronze);
}

.phone-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.phone-row select {
    width: 40%;
}

.phone-row input {
    width: 60%;
}

.btn-submit-lead {
    margin-top: 10px;
    background-color: var(--color-bronze);
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-submit-lead:hover {
    background-color: var(--color-bronze-hover);
}

.form-legal {
    margin-top: 4px;
    font-size: 0.7rem;
    text-align: center;
    opacity: 0.8;
}

.form-legal a {
    color: inherit;
    text-decoration: underline;
}

.btn-submit-lead:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Estados de los formularios del CRM (crm.js) */
.form-group label span {
    color: #c0392b;
    margin-left: 2px;
}

.crm-err {
    display: none;
    color: #c0392b;
    font-size: 0.7rem;
    font-style: normal;
}

.form-group.is-bad input,
.form-group.is-bad select {
    border-bottom-color: #c0392b;
}

.form-group.is-bad .crm-err {
    display: block;
}

.crm-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.crm-fallo {
    display: none;
    color: #c0392b;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

.crm-fallo.on {
    display: block;
}

/* ==========================================================================
   Desktop Adaptation (mobile-first: todo lo anterior queda intacto < 768px)
   ========================================================================== */
@media (min-width: 768px) {
    :root {
        --app-max-width: 100%;
    }

    .app-container {
        max-width: none;
        box-shadow: none;
    }

    .container {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 40px;
        padding-right: 40px;
    }

    /* Header */
    .site-header {
        max-width: none;
        padding: 26px 0 20px;
    }

    .header-logo img {
        height: 62px;
        max-width: none;
    }

    /* Hero */
    .hero-section {
        min-height: 100vh;
    }

    /* El tamaño se encoge con el viewport para que la primera línea
       siempre quepa completa y el salto del .desktop-break deje la
       segunda mitad del claim como segunda línea en cualquier ancho/zoom.
       Recalculado el 01-sep-2026 al llevar el claim principal al hero:
       la primera línea pasó de 31 caracteres a 40 ("EL PRIMER CONCEPTO
       DE PRIVATE RESIDENCES"), a 0.6em + 3px de letter-spacing cada uno
       y ~120px de padding acumulado. El mínimo del clamp baja a 1.25rem
       porque a 768px el cálculo da ~21px y un mínimo de 1.5rem lo
       forzaría hacia arriba hasta desbordar. */
    .hero-title {
        font-size: clamp(1.25rem, calc((100vw - 240px) / 25), 2.6rem);
    }

    .desktop-break {
        display: block;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* Welcome / carrusel full-screen */
    .welcome-title {
        font-size: 1.5rem;
    }

    .welcome-text {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Carrusel de bienvenida: una foto panorámica por slide a 75vh
       (fotos 16:9 de 1921px en amenidades/galeria-desktop, recortadas
       con object-fit; las cuadradas de 861px solo se usan en móvil).
       El ancho se topa en 1920px para que en pantallas más anchas la
       foto nunca se estire por encima de su resolución nativa. */
    .hero-carousel {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }

    .carousel-slide > img {
        aspect-ratio: auto;
        width: 100%;
        height: 75vh;
        object-fit: cover;
    }

    /* Amenidades: 4 columnas */
    .amenities-grid {
        max-width: 940px;
        grid-template-columns: repeat(4, auto);
        gap: 44px 48px;
    }

    /* Desktop muestra el grid completo de 8: la fila de abajo (SPA,
       ROOFTOP, CINE y GIMNASIO) difuminada hasta pulsar "mostrar más" */
    .amenity-item.hidden-amenity:nth-child(7),
    .amenity-item.hidden-amenity:nth-child(8) {
        display: flex;
        opacity: 0.3;
    }

    .amenities-grid.expanded .amenity-item.hidden-amenity:nth-child(7),
    .amenities-grid.expanded .amenity-item.hidden-amenity:nth-child(8) {
        opacity: 1;
    }


    /* Residencias: split 40/60 — edificio izquierda, detalle derecha sin scroll interno */
    .residences-split {
        display: flex;
        align-items: stretch;
        min-height: 100vh;
    }

    .residences-banner-section {
        flex: 0 0 30%;
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .residences-hero-wrapper {
        height: 100%;
    }

    .residences-hero-img {
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

    .residence-details-section {
        flex: 0 0 70%;
        min-width: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .residence-details-section .container {
        max-width: 820px;
        margin: 0 auto;
        padding: 60px 48px 12px;
    }

    .residence-tabs {
        margin-bottom: 16px;
    }

    .residence-header-row {
        margin-bottom: 12px;
    }

    .residence-main-title {
        font-size: 1.6rem;
    }

    .residence-specs-flex {
        margin-bottom: 18px;
        align-items: center;
    }

    .residence-specs {
        gap: 10px;
    }

    .spec-value {
        font-size: 0.9rem;
    }

    .spec-label {
        font-size: 0.72rem;
        margin-top: 2px;
    }

    .residence-diagram {
        flex: 0 1 40%;
    }

    .residence-diagram img {
        max-height: 140px;
        width: auto;
        margin-left: auto;
    }

    /* Foto y features lado a lado: la foto (con su caption debajo)
       ocupa el 50% del cuadro y los features la otra mitad */
    .residence-content-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        align-items: start;
    }

    .residence-header-row,
    .residence-specs-flex {
        grid-column: 1 / -1;
    }

    .residence-photo-box {
        grid-column: 1;
        margin-bottom: 10px;
    }

    .residence-photo-box img {
        aspect-ratio: 4 / 3;
        width: 100%;
        height: auto;
        max-height: 34vh;
        object-fit: cover;
    }

    .residence-caption-row {
        grid-column: 1;
        margin-bottom: 12px;
    }

    .features-grid {
        grid-column: 2;
        grid-row: 3 / 5;
        align-self: center;
        gap: 10px 8px;
        font-size: 0.75rem;
        margin-bottom: 14px;
    }

    .residence-details-section .brochure-btn-wrapper .btn-primary {
        padding: 13px 36px;
    }

    /* Servicios */
    .services-card {
        max-width: 1100px;
        margin: 0 auto;
    }

    .services-image {
        flex: 0 0 45%;
    }

    .services-image img {
        aspect-ratio: 1 / 1;
    }

    .services-body {
        padding: 30px 40px 0 60px;
    }

    /* Texto un poco más grande que en móvil */
    .services-lead {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .services-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 28px;
        font-size: 0.75rem;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .services-note {
        font-size: 0.7rem;
        margin-top: 32px;
    }

    /* Ubicación y Q&A: contenedor más angosto que el global */
    .map-section .container,
    .qa-section .container {
        max-width: 1140px;
    }

    /* Ubicación: imagen a la izquierda, detalles a la derecha */
    .location-flex {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
    }

    .location-flex .accordion-img {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .location-info {
        flex: 1;
        min-width: 0;
    }

    /* Comunidad: foto panorámica con el texto a la derecha
       (arte en desktop/Comunidad curada/) */
    .community-section {
        aspect-ratio: 1920 / 726;
        height: auto;
        min-height: 480px;
    }

    .community-bg-img {
        object-position: center;
    }

    /* Groundbreaking: foto a la izquierda, texto bronce a la derecha
       (arte en desktop/groundbreaking/) */
    .gb-movil {
        display: none;
    }

    .groundbreaking-section {
        padding-bottom: 0;
        background-color: #24282a;
    }

    .gb-desktop {
        display: flex;
        position: relative;
        aspect-ratio: 1920 / 926;
    }

    .gb-desktop-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }

    .gb-desktop-texto {
        position: relative;
        margin-left: 52%;
        width: 43%;
        padding: 70px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .gb-desktop .section-tag-light {
        color: var(--color-bronze);
        margin-bottom: 18px;
    }

    .gb-desktop .section-script-title-gold {
        font-size: clamp(2.6rem, 4.5vw, 4.6rem);
    }

    .gb-desktop .groundbreaking-desc {
        text-align: center;
        color: var(--color-bronze);
        max-width: 560px;
        margin: 32px 0 0;
    }

    /* Premios: patrón según regla del cliente */
    .awards-section {
        padding: 70px 0;
        background: #24282a url('https://resourc.nyc3.cdn.digitaloceanspaces.com/sitio-thompson/assets/images/pattern_bg.webp') top center / 100% auto repeat;
        color: #ffffff;
        text-align: center;
        background-size: contain !important;
    }

    /* Comunidad: texto centrado a la derecha, sobre el agua (sin veladura) */
    .community-overlay {
        background: none;
        left: 56%;
        right: 8%;
        justify-content: center;
        padding: 40px 0;
    }

    /* el subtítulo parte en dos líneas, como en el arte */
    .community-overlay .community-subtitle {
        max-width: 340px;
    }

    .community-overlay .community-footer-text {
        margin-top: 52px;
        max-width: 460px;
    }

    /* World of Hyatt: texto izquierda / imagen derecha, 50-50 */
    .hyatt-hero-wrapper {
        display: flex;
        flex-direction: row-reverse;
    }

    .hyatt-bg-img {
        display: block;
        position: static;
        flex: 0 0 50%;
        width: 50%;
        height: auto;
        min-height: 620px;
    }

    .hyatt-overlay {
        flex: 0 0 50%;
        max-width: none;
        min-height: 620px;
        background: #ffffff;
        padding: 80px 60px;
        color: #1a1a1a;
    }

    .hyatt-overlay .btn-primary {
        width: auto;
    }

    /* Footer */
    .partner-logos img {
        width: 60px;
    }

    .footer-bottom-pattern {
        background-size: 430px auto;
    }
}