/* Mont-Real Villas — Extracted Inline Styles */
/* 12 blocks extracted from index.html */

/* ══ Block 1/12 (originally lines 85-6735) ══ */
/* --- BOTONES ORO METÁLICO INSTITUCIONAL (STANDARD CSS) --- */
    .btn-metal-gold {
      position: relative !important;
      overflow: hidden !important;
      background: linear-gradient(135deg, #c39c4a 0%, #ecd4a1 50%, #c39c4a 100%) !important;
      color: #1a1a1a !important;
      border: none !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 2px !important;
      padding: 14px 35px !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      display: inline-flex !important; 
      align-items: center !important; 
      justify-content: center !important;
      z-index: 10 !important;
      text-decoration: none !important;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .btn-metal-gold:hover {
      transform: translateY(-4px) scale(1.02) !important;
      box-shadow: 0 10px 25px rgba(197, 160, 89, 0.4) !important;
      filter: brightness(1.15) !important;
    }

    .btn-metal-gold::after {
      content: "" !important;
      position: absolute !important;
      top: -50% !important; 
      left: -150% !important;
      width: 100% !important; 
      height: 200% !important;
      background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.7) 45%,
        rgba(255,255,255,1) 50%, 
        rgba(255,255,255,0.7) 55%,
        rgba(255,255,255,0) 100%
      ) !important;
      transform: rotate(25deg) !important;
      pointer-events: none !important;
      z-index: 1 !important;
      animation: gold-sweep-pulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    }

    @keyframes gold-sweep-pulse {
      0% { left: -150%; }
      12% { left: 150%; } 
      100% { left: 150%; }
    }

    /* --- FIX HOVER PILARES (OPCI?N A: NEGRO ABSOLUTO) --- */
    #experience .pillar-card {
      background: #111111 !important;
      background-color: #111111 !important;
      color: #ffffff !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      transition: all 0.4s ease !important;
    }
    #experience .pillar-card:hover {
      background: #000000 !important;
      background-color: #000000 !important;
      border: 1.5px solid #c5a547 !important;
    }

    /* ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --bg: #ffffff;
  --surface: #fcfcfc;
  --surface-alt: #f8f8f8;
  --text: #3d3d3d;
  --title: #111111;
  --primary: #c5a547;
  /* Dorado institucional más profundo */
  --primary-dark: #a68b3c;
  --accent: #1a3c34;
  --gray-light: #ddd;
  --gray-mid: #aaa;
  --gray-dark: #666;
  --radius: 28px;
  --radius-pill: 100px;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 40px 90px rgba(197, 165, 71, 0.08);
  /* Sombra con tinte dorado */
  --space: clamp(4rem, 10vw, 8rem);
  /* Espaciado generoso Aman style */
  --container: min(1200px, 90vw);
}

/* ???? SCROLLBAR GLOBAL OSCURA ???? */

/* ???? CHISPA EN BARRA DE PROGRESO ???? */
.avance-bar-wrap {
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  height: 4px;
  overflow: visible;
  position: relative;
}
.avance-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c5a547, #ecd4a1);
  border-radius: 100px;
  position: relative;
  animation: barBreath 2s ease-in-out infinite alternate;
  transform-origin: left center;
}
.avance-bar-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: sparkBreath 2s ease-in-out infinite alternate;
}
@keyframes sparkBreath {
  0%   { box-shadow: 0 0 5px 3px rgba(197,165,71,0.7), 0 0 10px 4px rgba(197,165,71,0.3); opacity: 0.85; }
  100% { box-shadow: 0 0 8px 4px rgba(197,165,71,0.9), 0 0 16px 6px rgba(197,165,71,0.5); opacity: 1; }
}
@keyframes barBreath {
  0%   { width: var(--bar-width, 50%); }
  100% { width: calc(var(--bar-width, 50%) + 0.5%); }
}





/* ???? MOBILE FIXES v3 ?? Todas las secciones ???? */
@media (max-width: 480px) {

  /* 1. HERO ?? altura reducida móvil ?? alta especificidad */
  .hero,
  #hero,
  html body .hero,
  html body #hero {
    height: calc(52vh + 110px) !important;
    min-height: calc(52vh + 110px) !important;
    max-height: calc(52vh + 110px) !important;
  }
  .hero-visual,
  html body .hero-visual {
    height: calc(52vh + 110px) !important;
    min-height: calc(52vh + 110px) !important;
    max-height: calc(52vh + 110px) !important;
  }
  /* Parallax fix ?? desactivar en móvil */
  .hero-bg-layer,
  .hero-visual *,
  html body .hero-bg-layer {
    transform: none !important;
    will-change: auto !important;
    height: calc(52vh + 110px) !important;
    max-height: calc(52vh + 110px) !important;
  }
  /* Hero overlay ?? ajustar posición */
  .hero-overlay,
  html body .hero-overlay {
    min-height: calc(52vh + 110px) !important;
    padding-top: 0 !important;
    padding-bottom: calc(2rem + 150px) !important;
  }

  /* 5. MODELOS ?? tarjetas menos alargadas */
  .villa-card {
    min-height: 480px !important;
    max-height: 540px !important;
    width: 88vw !important;
    padding: 0 0 1.2rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #models .villa-card {
    min-height: 480px !important;
  }
  #models .villa-card .villa-photo {
    height: 200px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0.8rem !important;
    width: 100% !important;
  }
  .villa-desc-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    padding: 0 1rem !important;
    margin: 0.2rem 0 !important;
  }
  .villa-card h3 {
    font-size: 1.6rem !important;
    margin-bottom: 0.2rem !important;
    padding: 0 1rem !important;
  }
  .villa-badge {
    margin: 0 1rem 0.3rem !important;
    font-size: 0.62rem !important;
  }
  .villa-price {
    padding: 0 1rem !important;
    margin: 0.2rem 0 !important;
    font-size: 1rem !important;
  }
  .plusvalia-tag {
    margin: 0.2rem 1rem !important;
    font-size: 0.6rem !important;
  }
  .villa-specs,
  .villa-spec {
    gap: 0.2rem !important;
    margin: 0.2rem 0 !important;
    padding: 0 1rem !important;
  }
  .villa-spec span {
    font-size: 0.68rem !important;
  }
  /* Badge reserva más cerca */
  #models > .container > div[style*="justify-content:flex-end"] {
    margin-top: 0.8rem !important;
    padding-right: 1rem !important;
  }
  /* Botón ver detalles más alto y ancho */
  #models .villa-card .btn,
  .villa-card .btn {
    padding: 0.75rem 2rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 1.5px !important;
    width: calc(100% - 2rem) !important;
    margin: 0.5rem 1rem 0 !important;
    display: block !important;
    text-align: center !important;
  }

  /* 6. MASTERPLAN ?? restaurar foto y texto */
  .masterplan-card {
    height: 260px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .masterplan-card img {
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .masterplan-card-img-bg {
    display: block !important;
    height: 260px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Texto masterplan visible */
  .masterplan-overlay,
  .masterplan-text,
  #masterplan .section-head h2,
  #masterplan .section-head p {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--title) !important;
  }
  /* Botón brochure más compacto */
  .btn-metal-gold,
  a.btn-metal-gold {
    padding: 0.8rem 2rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 1.5px !important;
  }

  /* 9. AVANCE DE OBRAS ?? ocultar foto, mostrar acordeón */
  .avance-photo-wrap,
  #avance .reveal > div[style*="aspect-ratio:16/9"] {
    display: none !important;
  }
  #avance .reveal > div[style*="background:#111"] {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* 8. TESTIMONIOS ?? más compactos y centrados */
  .testimonial-card {
    padding: 1.2rem 1rem !important;
    margin: 0 0.2rem !important;
  }
  .testimonial-card .quote,
  .testimonial-card p.t-text,
  .testimonial-card > p {
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
  .stars,
  .t-stars,
  .testimonial-stars {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
  .t-name,
  .testimonial-author,
  .testimonial-card footer,
  .testimonial-card .author {
    text-align: center !important;
    font-size: 0.72rem !important;
  }
  #testimonios .testimonials-grid {
    gap: 0.8rem !important;
  }

  /* 10. PROCESO DE COMPRA ?? 2x2 grid */
  .proceso-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .proceso-step {
    padding: 1rem 0.8rem !important;
  }
  .proceso-node {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 0.5rem !important;
  }
  .proceso-title {
    font-size: 0.85rem !important;
    text-align: center !important;
  }
  .proceso-desc {
    font-size: 0.72rem !important;
    text-align: center !important;
  }
  .proceso-line-track {
    display: none !important;
  }

  /* 7. FINANCIAMIENTO ?? calculadora más compacta */
  .finance-calc-wrap,
  .calc-inner,
  .calculator-inner {
    padding: 1.2rem 1rem !important;
  }
  .calc-result,
  .finance-result {
    font-size: 1.8rem !important;
  }
  .calc-label,
  .finance-label {
    font-size: 0.72rem !important;
  }
  .range-row,
  .calc-row {
    margin-bottom: 0.8rem !important;
  }

  /* 12. BLOG ?? más estrecho y sin foto grande */
  #blog .blog-card-img,
  #blog article > a > div:first-child {
    height: 120px !important;
  }
  #blog .blog-card-body,
  #blog article > a > div:last-child {
    padding: 0.8rem 1rem !important;
  }
  #blog .blog-card-title {
    font-size: 0.88rem !important;
  }

  /* 13. CONTACTO ?? centrado, sin desbordamiento */
  .section.contact {
    padding: 4rem 1rem !important;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .contact-form,
  .contact-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .contact-form {
    padding: 1.5rem 1rem !important;
  }
  .contact-info h2 {
    font-size: 1.6rem !important;
  }
}
/* ???? FIN MOBILE FIXES v3 ???? */

/* ???? AVANCE OBRAS ACORDE?N M?VIL ???? */
@media (max-width: 480px) {
  /* Grid de 1 columna en móvil */
  #avance > div > div > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  /* Ocultar foto por defecto */
  #avance .avance-photo-wrap,
  #avance div[style*="aspect-ratio:16/9"] {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
  }
  /* Cuando está abierto */
  #avance div[style*="aspect-ratio:16/9"].avance-open {
    max-height: 200px !important;
  }
  /* Header de etapa como botón */
  .avance-etapa-header {
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.2rem !important;
    user-select: none !important;
  }
  .avance-toggle-icon {
    font-size: 0.8rem;
    color: var(--primary);
    transition: transform 0.3s ease;
  }
  .avance-toggle-icon.open {
    transform: rotate(180deg);
  }
}
/* ???? FIN ACORDE?N ???? */



/* ?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?
   MOBILE FIXES v4 ?? Blog, Pilares, Calc, Contact
   ?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—? */
@media (max-width: 480px) {

  /* ???? BLOG ???? */
  #blog .container > div {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
    padding: 0 !important;
  }
  .blog-card {
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .blog-card > a > div:first-child,
  #blog article > a > div:first-child {
    height: 100px !important;
  }
  #blog article > a > div:last-child,
  .blog-card > a > div:last-child {
    padding: 0.8rem 1rem !important;
  }
  .blog-card h3,
  #blog article h3 {
    font-size: 0.85rem !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.3 !important;
  }
  #blog article p,
  .blog-card p {
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important;
  }
  #blog article span,
  .blog-card span {
    font-size: 0.68rem !important;
  }

  /* ???? PILARES ???? */
  .pillars {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.8rem !important;
  }
  .pillars article,
  .pillar-card {
    padding: 1.2rem 0.8rem !important;
  }
  .pillars h3,
  .pillar-card h3 {
    font-size: 0.85rem !important;
    margin-bottom: 0.3rem !important;
  }
  .pillars p,
  .pillar-card p {
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
  }
  .pillars .icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 0.5rem !important;
  }

  /* ???? CALCULADORA ???? */
  .finance-section {
    padding: 2.5rem 1rem !important;
  }
  .calc-card,
  .premium-calc {
    padding: 1.2rem 1rem !important;
    border-radius: 12px !important;
  }
  .calc-cuota-val {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .calc-group {
    margin-bottom: 0.8rem !important;
  }
  .calc-group label {
    font-size: 0.75rem !important;
    margin-bottom: 0.3rem !important;
  }
  .calc-pill {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.72rem !important;
  }
  .calc-note {
    font-size: 0.68rem !important;
  }
  .calc-cuota-label {
    font-size: 0.8rem !important;
  }

  /* ???? CONTACT FORM ???? */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .section.contact,
  section.contact {
    padding: 3rem 1rem !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .contact-form {
    padding: 1.5rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .contact-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-info h2 {
    font-size: 1.5rem !important;
  }
  .contact-info p {
    font-size: 0.82rem !important;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
    padding: 0.8rem 1rem !important;
  }
  .contact-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .contact-actions .btn {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .btn-metal-gold,
  a.btn-metal-gold {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    width: auto !important;
    display: inline-flex !important;
    margin: 0 auto !important;
  }
  #masterplan .btn-metal-gold,
  #masterplan a.btn-metal-gold {
    max-width: 80% !important;
  }
}

/* ?—? FIN MOBILE FIXES v4 ?—? */

/* ???? MOBILE FIXES v2 ?? iPhone ?480px ???? */
@media (max-width: 480px) {

  /* 1. HERO ?? H1 más pequeño */
  h1[data-i18n="hero_title"],
  .hero-overlay h1,
  #hero h1 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }
  .hero-overlay .lead,
  #hero .lead {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
  }
  .hero-overlay {
    padding: 0 1.2rem !important;
  }

  /* 2. MASTERPLAN ?? altura reducida */
  .masterplan-card {
    height: 280px !important;
    min-height: unset !important;
  }
  .masterplan-card img {
    height: 280px !important;
    object-fit: cover !important;
  }

  /* 3. FINANCIAMIENTO ?? calculadora compacta */
  .finance-section,
  #finance .finance-section {
    padding: 3rem 1.2rem !important;
    border-radius: 0 !important;
  }
  .finance-container {
    padding: 0 !important;
  }
  .calculators-grid,
  .dual-calc-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .calculator-card,
  .calc-card {
    padding: 1.5rem 1.2rem !important;
    border-radius: 12px !important;
  }
  .calculator-card h3,
  .calc-card h3 {
    font-size: 1.1rem !important;
  }
  input[type="range"] {
    width: 100% !important;
  }

  /* 4. TESTIMONIOS ?? más compactos */
  .testimonials-grid,
  #testimonios .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 0 0.5rem !important;
  }
  .testimonial-card {
    padding: 1.5rem 1.2rem !important;
    border-radius: 12px !important;
  }
  .testimonial-card .quote,
  .testimonial-card p {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
  }
  .testimonial-card .author,
  .testimonial-card footer,
  .testimonial-card .t-name {
    font-size: 0.78rem !important;
    margin-top: 1rem !important;
  }
  #testimonios .section-head h2 {
    font-size: 1.8rem !important;
  }

  /* 5. UBICACIÓN ?? paneles apilados */
  .locv2-panels {
    grid-template-columns: 1fr !important;
    height: auto !important;
    border-radius: 12px !important;
  }
  .locv2-kb {
    height: 260px !important;
    order: 2 !important;
  }
  .locv2-map,
  .locv2-panels > div:first-child {
    height: auto !important;
    min-height: 280px !important;
    order: 1 !important;
    padding: 2rem 1.5rem !important;
  }
  .locv2-divider {
    display: none !important;
  }
  .locv2-container {
    padding: 0 1rem !important;
  }
  .locv2-head h2 {
    font-size: 1.8rem !important;
  }
}
/* ???? FIN MOBILE FIXES v2 ???? */

/* ???? TARJETAS M?VIL ?? Proporcionalidad iPhone/Android ???? */
@media (max-width: 480px) {

  /* BLOG CARDS ?? más compactas */
  #blog .container > div {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 0 0.5rem !important;
  }
  #blog article,
  #blog .blog-card,
  #blog > div > div > article {
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  #blog .blog-card-img,
  #blog article > a > div:first-child {
    height: 160px !important;
    min-height: unset !important;
  }
  #blog .blog-card-body,
  #blog article > a > div:last-child {
    padding: 1rem 1.2rem !important;
  }
  #blog .blog-card-title,
  #blog h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  #blog .blog-card-excerpt,
  #blog p {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* VILLA CARDS ?? más compactas */
  .villa-card {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    min-height: 380px !important;
  }
  #models .villa-card {
    min-height: 380px !important;
  }
  #models .villa-card .villa-photo {
    height: 180px !important;
  }
  #models .villa-card h3 {
    font-size: 1.4rem !important;
  }
  #models .villa-card .villa-spec span {
    font-size: 0.75rem !important;
  }
  #models .villa-card .villa-price {
    font-size: 1.1rem !important;
  }
  #models .villa-card .btn {
    padding: 0.7rem 1.5rem !important;
    font-size: 0.72rem !important;
  }
}
/* ???? FIN TARJETAS M?VIL ???? */

/* ???? MOBILE FIX GLOBAL ?? iPhone/Android ???? */
@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  .container {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Contact form centrado y sin desbordamiento */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-form {
    padding: 1.8rem 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
  }
  .contact-form .btn,
  .contact-form button[type="submit"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-actions {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .contact-actions .btn {
    width: 100% !important;
    text-align: center !important;
  }
  /* Section general padding */
  .section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  /* Section contact white bg */
  .section.contact {
    padding: 5rem 1.2rem !important;
  }
}
/* ???? FIN MOBILE FIX ???? */

html {
  scrollbar-width: auto;
  scrollbar-color: #c5a547 #0a0a0a;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ecd4a1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.is-restoring-scroll,
html.is-restoring-scroll body {
  scroll-behavior: auto !important;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--title);
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.section {
  padding: clamp(4rem, 6vw, 7rem) 0;
}

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Soporte iOS */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding-top: env(safe-area-inset-top, 0px); /* Notch iPhone */
  transition: background 0.4s ease, transform 0.4s ease;
}

.nav-wrap {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: clamp(28px, 4.8vw, 36px);
  /* Responsive max-height (reduced 20%) */
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.brand:hover .brand-logo {
  transform: scale(1.03);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--title);
  padding: 0.5rem;
}

.main-nav a {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: var(--primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.8rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: 'Montserrat', sans-serif;
}

.btn-primary, .btn-reserve-alt {
  background: linear-gradient(135deg, #c5a547 0%, #ecd4a1 50%, #c5a547 100%) !important;
  color: #111 !important;
  box-shadow: 0 4px 15px rgba(197, 165, 71, 0.3) !important;
  border: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border-radius: 6px !important;
}

/* Unificación Formato Cuadrado para TODOS los botones */
.btn, .btn-outline, .hero-outline, .btn-reserve-alt, .btn-metal-gold, .btn-3d-exp, .villa-card .btn {
  border-radius: 6px !important;
}

.btn-primary:hover,
.btn-reserve-alt:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important;
  background: linear-gradient(135deg, #ecd4a1 0%, #ffffff 50%, #ecd4a1 100%) !important;
  color: #000 !important;
}

.btn-outline:hover,
.hero-outline:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.btn-outline {
  background: transparent;
  color: var(--title);
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Hero */
.hero {
  position: relative; /* Contenedor de la ventana */
  height: 100vh;

  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: visible; /* Permitimos que el texto fluya hacia afuera */
  background-color: transparent;
  z-index: 1;
  clip-path: inset(0); /* Crucial: Solo vemos el fondo FIXED a trav?©s de esta secci?³n */
}

/* El fondo TRULY FIXED y ANCLADO */
.hero-visual {
  position: absolute; /* Dejamos que GSAP maneje el anclaje real */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  background-color: #000;
  overflow: hidden;
}

.site-lift-content {
  position: relative;
  z-index: 10;
  background-color: #0d0d0d; /* Fondo ultra-s?³lido institucional */
  box-shadow: 0 -20px 50px rgba(0,0,0,0.8);
}

.hero-bg-layer,
.hero-front-layer,
.hero-gradient-layer {
  position: absolute;
  inset: 0;
}

.hero-bg-layer {
  background-image: url("assets/hero-sky-sunset.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-front-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -60px; /* BAJAMOS LA FOTO PARA ELIMINAR EL GAP */
  background-image: url("assets/hero-arco-montreal-villas.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Transformaci?³n permitida para parallax JS */
  z-index: 1;
}

.hero-gradient-layer {
  background: linear-gradient(to right, rgba(26, 60, 52, 0.56), rgba(26, 60, 52, 0.18));
  z-index: 2;
}

.hero-overlay {
  position: relative;
  width: 100%;
  z-index: 3;
  padding: clamp(0.5rem, 3.5vw, 3rem) 0; /* Eleva el bloque otros 1cm hacia arriba */
}

.hero-inner {
  max-width: 850px;
  padding-left: clamp(1rem, 5vw, 4rem);
  position: relative;
  z-index: 10;
  will-change: transform; /* Optimizaci?³n para movimiento fluido */
  transform: translate3d(0, 0, 0);
}

@media (min-width: 1025px) {
  .hero-inner {
    padding-top: 40px;
  }
}

.hero-inner h1 {
  color: #fff;
  font-family: 'Bebas Neue', var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.95;
  margin-bottom: 0.4rem; /* Separación de 0.5cm entre título y subtítulo */
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.hero-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--primary); /* Dorado para destacar la exclusividad */
  margin-bottom: 1rem;
  font-weight: 700;
  display: block;
}

.hero-inner .lead {
  font-family: 'Montserrat', var(--font-body);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--primary);
  max-width: 800px;
  line-height: 1.4;
  letter-spacing: 0.15em; /* Interletrado aumentado para aire premium */
  margin-bottom: 1.8rem; /* Separamos los botones medio centímetro del subtítulo */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  font-weight: 600;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.hero-outline:hover {
  background: #fff;
  color: var(--title);
}

.hero-shape-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 2;
}

.hero-shape-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

.hero-shape-divider .shape-fill {
  fill: var(--bg);
}

/* Trust Bar */
.trust-bar {
  background: var(--bg);
  padding: 3rem 0;
  position: relative;
  z-index: 10;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.trust-item h4 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.trust-item p {
  font-weight: 500;
  color: var(--text);
  font-size: 0.9rem;
}

/* Typography Headings */
.section-head {
  text-align: center;
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
  max-width: 1000px;
  margin-inline: auto;
  position: relative;
}

.section-head h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  /* Elegancia minimalista */
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.05;
  color: var(--title);
}

.section-head p {
  font-size: 1.25rem;
  color: #666;
  max-width: 750px;
  margin-inline: auto;
  line-height: 1.6;
  font-weight: 400;
}

/* Grid & Cards */
.villa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

.villa-card,
.location-card,
.pillar-card,
blockquote,
.faq details,
.contact-form,
.masterplan-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  border: 1px solid transparent;
}

.villa-card:hover,
.location-card:hover,
.stat-box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--primary) !important;
}

/* MASTERPLAN: solo fotografía limpia sin marco */
#masterplan .masterplan-card {
  background: transparent !important;
  padding: 0;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  border: none;
  width: 100% !important;
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
  overflow: hidden !important;
  display: block !important;
  box-sizing: border-box !important;
}
#masterplan .masterplan-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

.villa-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plusvalia-tag {
  display: block;
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: 0.5rem;
  text-align: center;
}

.villa-description {
  font-size: 0.88rem;
  color: #555;
  margin: 0.8rem 0 1.2rem;
  line-height: 1.6;
  text-align: justify !important;
  text-justify: inter-word;
  padding: 0 2%;
  flex-grow: 1; /* Permite que el párrafo ayude a empujar el footer */
  display: flex;
  align-items: center;
}

/* ESTACI?N ARQUITECT?NICA PRO V7 - DISE?O FINAL - CIERRE INMEDIATO */
#plan-viewer {
  display: none; /* JS activa esto con display:grid al abrir */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
 height: 100dvh;
  background: #fdfdfd;
  z-index: 10001;
  grid-template-columns: 1fr 380px; 
  animation: fadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}
.plan-main-stage {
  position: relative;
  /* PATR?N MESA DE DIBUJO ALTA DEFINICI?N (BLUEPRINT REAL) */
  background-color: #fafafa;
  background-image: 
    linear-gradient(rgba(0,0,0,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.2) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #ddd;
}
.close-plan-hub {
  position: absolute;
  top: 1.5rem;
  right: 380px; /* PEGADO AL BORDE DERECHO DE LA ZONA BLANCA */
  width: 50px; height: 50px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  font-weight: 900; font-size: 1.5rem;
  transition: 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 2000000; /* PRIORIDAD TOTAL */
  box-shadow: -10px 0 20px rgba(0,0,0,0.2);
  border-right: 3px solid var(--primary);
}
.close-plan-hub:hover { background: var(--primary); color: #111; width: 65px; border-right-color: #111; }

.plan-sidebar {
  background: #0a0a0a;
  color: #fff;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  border-left: 1px solid #1a1a1a;
  overflow-y: auto;
  position: relative;
  z-index: 100;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.plan-sidebar-toggle {
  display: none;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 45px;
  height: 45px;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  z-index: 200;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
  .plan-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    z-index: 150000;
    padding-top: 5rem;
    transform: translateX(100%); /* Oculto por defecto */
  }
  .plan-sidebar.active,
  .plan-sidebar:not(.is-collapsed) {
    transform: translateX(0);
  }
  .plan-sidebar-toggle {
    display: flex;
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 160000; /* Por encima de todo */
  }
  .close-plan-hub {
    right: auto;
    left: 20px;
    top: 20px;
    z-index: 160000;
  }
}
.plan-img-base {
  max-width: 55%; 
  max-height: 55vh;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.25));
  transition: opacity 0.5s ease;
}
.plan-img-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 5rem;
}
.plan-img-base {
  max-width: 70%;
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.15));
  transition: opacity 0.4s ease;
}

/* CONSOLA DE CONTROL CENTRALIZADA */
.control-hub {
  background: #111;
  border: 1px solid #222;
  padding: 1.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 1rem 0;
}
.level-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #000;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #222;
}
.level-tab {
  background: none;
  border: none;
  color: #666;
  padding: 0.8rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 4px;
}
.level-tab.active { background: var(--primary); color: #111; }

.btn-3d-exp {
  background: #111;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 1rem;
  border-radius: 4px;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s;
}
.btn-3d-exp:hover { background: var(--primary); color: #111; box-shadow: 0 0 20px rgba(212,175,55,0.4); }

/* HOTSPOTS TOOLTIP ARQUITECT?NICO */
.hotspot {
  position: absolute;
  width: 26px; height: 26px;
  background: var(--primary);
  color: #111;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px;
  box-shadow: 0 0 15px var(--primary);
  animation: pulsePlan 2.5s infinite;
  z-index: 100;
}
.hotspot:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 40px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff;
  padding: 10px 20px; border-radius: 2px;
  font-size: 0.75rem; white-space: nowrap;
  border-left: 3px solid var(--primary);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
@keyframes pulsePlan {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,0.6); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 12px rgba(212,175,55,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.villa-card {
  padding: 1.5rem;
}

.villa-photo {
  border-radius: calc(var(--radius) - 8px);
  height: 260px;
  margin-bottom: 1.5rem;
  background-size: cover;
  background-position: center;
}

.villa-1 {
  background-image: url('assets/amara.webp');
}

.villa-2 {
  background-image: url('assets/emaar.webp');
}

.villa-3 {
  background-image: url('assets/mia.webp');
}

.villa-card h3 {
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
  text-align: center;
}

.villa-spec {
  display: flex;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.villa-spec span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.villa-price {
  font-size: 1.3rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

.villa-card .btn {
  width: 100%;
}

.center {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

/* Sections Backgrounds */
.experience {
  background: #ffffff;
}

.experience-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pillars article {
  padding: 2.5rem 2rem;
  background: #111111;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pillars article:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.1);
}

.pillars .icon {
  width: 56px;
  height: 56px;
  background: rgba(212, 175, 55, 0.1);
  color: var(--primary);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}

.pillars h3 {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.pillars p {
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Full Width Architecture Banner */
.architecture-banner {
  height: 80vh;
  min-height: 600px;
  background-image: linear-gradient(to right, rgba(26, 60, 52, 0.7), rgba(26, 60, 52, 0.2)), url('assets/masterplan-topografico.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  border-radius: 40px;
  /* Bordes suaves anti-cuadros */
  margin: 4rem 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.architecture-banner h2 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 900px;
  line-height: 1.2;
}

/* Finance Section */
.finance-section {
  background: #000 !important;
  /* Negro absoluto */
  color: #fff;
  padding: 6rem 5%;
  border-radius: 0 !important;
  /* Sin redondeo, corte recto */
  margin: 0 !important;
  width: 100% !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.finance-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.finance-section::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 300px;
  height: 300px;
  background: var(--primary);
  filter: blur(100px);
  opacity: 0.15;
  border-radius: 50%;
}

/* Calculadora Financiera Interactiva */
.calc-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3rem);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: 4rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
}

@media (max-width: 768px) {
  .calc-card { grid-template-columns: 1fr; gap: 2rem; }
}

.calc-inputs { display: flex; flex-direction: column; gap: 0.8rem; }
.calc-group { display: flex; flex-direction: column; gap: 0.5rem; }
.calc-group label { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.calc-group select, .calc-group input { 
  background: rgba(255, 255, 255, 0.1); 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  padding: 1rem; 
  border-radius: 12px; 
  color: #fff; 
  font-family: inherit;
  font-size: 1rem;
}

.calc-results { 
  background: rgba(197, 165, 71, 0.1); 
  border-radius: 20px; 
  padding: 2rem; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
  border: 1px dashed var(--primary);
}
.calc-cuota-label { font-size: 0.72rem; color: #fff; opacity: 0.8; margin-bottom: 0.3rem; }
.calc-cuota-val { font-family: var(--font-display); font-size: 2.5rem; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; }
.calc-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); text-align: center; font-style: italic; }

.finance-badge {
  display: inline-block;
  background: var(--primary);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* Masterplan */
.masterplan-wrapper {
  background: var(--surface-alt);
  padding: 6rem 0;
}

.masterplan-card {
  padding: 3rem;
  text-align: center;
  background: #fff;
}

.masterplan-card img {
  max-width: 100%;
  border-radius: calc(var(--radius) - 8px);
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.mp-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.mp-stat h4 {
  font-size: 2rem;
  color: var(--title);
  margin-bottom: 0.2rem;
}

.mp-stat p {
  color: var(--muted);
}

/* Map Locations */
.locations {
  background: var(--bg);
}

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

.location-card {
  padding: 2.5rem 2rem;
  text-align: center;
}

.location-card h3 {
  color: var(--title);
  margin-bottom: 1rem;
}

/* Contact */
.contact {
  background: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 10;
  filter: none !important; /* Elimina cualquier desenfoque */
}

.contact-info {
  position: relative;
  z-index: 20; /* Por encima de la marca de agua */
  filter: none !important;
}

.contact-info h2 {
  color: #111111 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.contact-info p {
  color: #444444 !important;
  opacity: 1 !important;
  line-height: 1.8;
  filter: none !important;
}

.contact-actions {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.contact-actions .btn {
  flex: 0 1 auto;
  min-width: 180px;
  /* Asegura un tama???±o m???­nimo c???³modo */
}

.contact-form {
  padding: 3rem;
  background: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid #eee !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05) !important;
  z-index: 25;
  filter: none !important;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #111111 !important;
  font-size: 0.95rem;
  opacity: 1 !important;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #ddd !important;
  background: #ffffff !important;
  font-family: inherit;
  font-size: 1rem;
  color: #000000 !important;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  opacity: 1 !important;
  filter: none !important;
}

.contact-form input::placeholder, 
.contact-form textarea::placeholder {
  color: #999 !important;
}

.contact-form .btn {
  width: 100%;
  margin-top: 0.5rem;
  opacity: 1 !important;
}

/* Language Switcher */
.lang-switch {
  position: relative;
}

.lang-btn {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  min-width: 100px;
}

.lang-switch.open .lang-menu {
  display: flex;
}

.lang-menu button {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.lang-menu button:hover {
  background: var(--surface);
  color: var(--primary);
}

/* Floating WhatsApp */
.wa-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wa-float:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
}

.wa-float svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
}

/* Footer */
.site-footer {
  background: #000;
  /* Negro absoluto */
  color: rgba(255, 255, 255, 0.7);
  padding: 5rem 0 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-logo {
  height: 35px;
  /* Reducido para mayor elegancia */
  width: auto;
  object-fit: contain;
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(1);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: var(--primary);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-nav h4 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 1000px) {
  .menu-toggle {
    display: block;
  }

  .nav-wrap {
    min-height: 65px; /* Más compacto en móvil */
    padding: 0 5%;
  }

  .main-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2.5rem 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 30px 30px;
    align-items: center;
    gap: 1.8rem;
  }

  .main-nav.open {
    display: flex;
  }

  .experience-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* La Trust Bar (ahora horizontal única para iPad/Desktop) */
  .trust-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 3.5rem 1.2rem !important;
  }

  .hero-overlay {
    margin-top: 0 !important;
    padding-top: 1.25rem !important;
  }

  h2 {
    font-size: 2.1rem !important;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }

  /* Carrusel 3D / Coverflow para Villas en móvil */
  .villa-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 2.5rem 0 3.5rem 0 !important;
    gap: 1.5rem !important;
    perspective: 1500px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: pointer;
    user-select: none;
  }
  .villa-grid:active { cursor: default; }
  .villa-grid::-webkit-scrollbar { display: none; }

  .villa-card {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    min-height: 520px;
    scroll-snap-align: center !important;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease !important;
    opacity: 1;
    transform: rotateY(180deg) translateZ(-50px);
    margin: 0 !important;
    transform-style: preserve-3d;
    position: relative;
    cursor: pointer;
  }

  /* El frente de la tarjeta (Boca Arriba) */
  .villa-card > div,
  .villa-card > h3,
  .villa-card > p,
  .villa-card > span,
  .villa-card > a {
    backface-visibility: hidden !important;
  }

  /* Revelado: la tarjeta gira 180 grados para quedar boca arriba en el centro */
  .villa-card.active-card {
    opacity: 1;
    transform: rotateY(0deg) translateZ(50px);
    z-index: 30;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  }

  .villa-desc-text {
    display: block !important;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    opacity: 0.9;
  }

  .location-grid,
  .mp-stats {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr !important; /* 2x2 para teléfonos, 4x1 para el resto */
  }

  .villa-card {
    padding: 2rem !important;
  }

  .hero-copy h1 {
    font-size: 2.5rem;
  }

  .finance-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .finance-section {
    border-radius: 0 !important;
    padding: 3rem 1.2rem !important;
  }

  .contact-form {
    padding: 2.5rem 1.2rem !important;
  }
}

/* Thank You Overlay */
.thank-you-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.thank-you-overlay.active {
  opacity: 1;
}

.thank-you-content {
  text-align: center;
  color: #fff;
  max-width: 600px;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.thank-you-overlay.active .thank-you-content {
  transform: translateY(0);
}

.thank-you-logo {
  height: 100px;
  /* Un poco m???¡s grande para que luzca la corona */
  width: auto;
  margin-bottom: 2.5rem;
  /* Eliminado el filtro para que se vea el color dorado original de la M */
}

.thank-you-content h2 {
  color: var(--primary);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.thank-you-content p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 3rem;
  line-height: 1.6;
}

.thank-you-content .btn {
  min-width: 200px;
}



/* ===== MERGED CONTENT FROM styles-alt.css ===== */
/* Estilos Espec???­ficos para Alternativa Minimalista Aman */

.site-header-alt {
  position: fixed !important;
  top: 36px;
  left: 0;
  right: 0;
  background-color: #111 !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: none !important;
  z-index: 1500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: padding 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* Smooth reveal after hand-off */
.site-header-alt .brand-alt,
.site-header-alt .header-alt-right,
.site-header-alt .header-alt-left {
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero {
  padding-top: 85px;
  /* Ajuste para el header fijo */
  min-height: 90vh;
  position: relative;
  overflow: hidden;
  clip-path: inset(0); /* Contenedor para parallax fijo */
}

.trust-bar {
  background: #111;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
  margin: -40px auto 0 auto !important;
  max-width: 1000px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 3rem 4% !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.trust-bar.active:hover {
  transform: translateY(-10px) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
}

/* El texto se mantiene blanco/dorado original, ya no cambia a negro */
.trust-bar:hover .trust-item h4 {
  color: var(--primary) !important;
}

.trust-bar:hover .trust-item p {
  color: #ffffff !important;
  /* White for better contrast on dark background */
}

.trust-item h4 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--primary) !important;
  font-size: 2.8rem !important;
  /* Slightly larger for impact */
  font-weight: 400 !important;
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}

.trust-item p {
  color: #ffffff !important;
  /* White for better contrast on dark background */
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  /* 30% less white for a premium greyish tone */
  font-weight: 500;
}

.nav-wrap-alt {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 3rem 1rem;
  min-height: 70px;
  max-width: none;
  margin: 0;
  transition: min-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              padding 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* LEFT SIDE: Menu & Search */
.header-alt-left {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
}

.menu-alt-btn {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  color: #fff;
  /* Cambio a BLANCO */
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1001;
  /* Must be above the overlay nav */
  position: relative;
  /* For z-index to work */
  transition: opacity 0.18s ease;
}

.menu-alt-btn * {
  pointer-events: none;
}

.menu-alt-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.premium-reveal {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  letter-spacing: -0.1em;
}

.premium-reveal.trigger {
  animation: premiumFadeIn 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 1 !important;
}

@keyframes premiumFadeIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    letter-spacing: -0.1em;
  }

  100% {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.05em;
    /* Un poco m?¡s de aire al final */
  }
}

.menu-alt-line {
  width: 24px;
  height: 1.6px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, width 0.3s ease;
}

.menu-alt-btn:hover .menu-alt-line {
  width: 26px;
}

.menu-alt-btn[aria-expanded="true"] .menu-alt-line:nth-child(1) {
  transform: translateY(7.6px) rotate(45deg);
}

.menu-alt-btn[aria-expanded="true"] .menu-alt-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}

.menu-alt-btn[aria-expanded="true"] .menu-alt-line:nth-child(3) {
  transform: translateY(-7.6px) rotate(-45deg);
}

.menu-alt-btn[aria-expanded="true"]:hover .menu-alt-line:nth-child(1) {
  transform: translateY(7.6px) rotate(52deg);
}

.menu-alt-btn[aria-expanded="true"]:hover .menu-alt-line:nth-child(3) {
  transform: translateY(-7.6px) rotate(-52deg);
}


.search-alt-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  /* Cambio a BLANCO */
  padding-top: 2px;
}

.search-alt-btn svg {
  stroke-width: 1px;
}

.brand-alt {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.5rem 0.4rem !important;
  position: relative;
  min-height: 60px;
}

.header-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.brand-logo-m {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.site-header-alt.header-scrolled .brand-logo-m {
  height: 34px;
}

.brand-logo-text {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.site-header-alt.header-scrolled .brand-logo-text {
  height: 26px;
}

.brand-logo-alt {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.logo-small {
  position: absolute;
  height: 28px;
  width: auto;
  opacity: 0;
  transform: translateY(10px);
  object-fit: contain;
}

/* Modificadores al hacer Scroll */
/* ?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?
   TOP BAR INSTITUCIONAL
?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—? */
.top-bar {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  padding: 0.45rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1600;
  font-family: var(--font-body);
  height: 36px;
  min-height: 36px;
}
.top-bar-left a {
  font-size: 0.72rem;
  color: #555;
  text-decoration: none;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.3s;
}
.top-bar-left a:hover { color: var(--primary); }
.tb-email-icon {
  transform-origin: bottom center;
  transition: stroke 0.3s ease;
  flex-shrink: 0;
}
#topbar-email-link:hover .tb-email-icon {
  animation: emailBounce 0.8s ease-in-out infinite alternate;
  stroke: var(--primary);
}
@keyframes emailBounce {
  0%   { transform: rotate(-15deg) scale(1); }
  100% { transform: rotate(15deg) scale(1.1); }
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.tb-address {
  font-size: 0.68rem;
  color: #888;
  letter-spacing: 0.5px;
  margin-right: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
/* Texto ?? transición lenta 0.8s */
.tb-addr-text {
  color: #888;
  transition: color 0.8s ease;
}
.tb-address:hover .tb-addr-text {
  color: var(--primary);
}
/* Top bar pin ?? permanent 0.8s, hover 0.10s */
.tb-address svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  transform-origin: bottom center;
  transition: stroke 0.3s ease;
  stroke: #888;
  animation: pinBounce 0.8s ease-in-out infinite alternate;
}
.tb-address:hover svg {
  animation: pinBounce 0.10s ease-in-out infinite alternate;
  stroke: var(--primary);
  filter: drop-shadow(0 0 4px rgba(197,165,71,0.6));
}
@keyframes pinBounce {
  0%   { transform: rotate(-18deg); }
  100% { transform: rotate(18deg); }
}
.top-bar-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.top-bar-social a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: all 0.3s ease;
  text-decoration: none;
}
.top-bar-social a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .top-bar { display: none; }
  .site-header-alt { top: 0 !important; }
}

.site-header-alt.header-scrolled {
  background-color: rgba(17, 17, 17, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border-bottom: transparent;
}
.site-header-alt.header-scrolled .nav-wrap-alt {
  padding: 0.8rem 3rem 0.8rem;
  min-height: 64px;
}

.site-header-alt.header-scrolled .brand-alt {
  height: 64px; /* Aire extra para que el logo no toque el borde superior */
}

.site-header-alt.header-scrolled .logo-large {
  opacity: 0;
  transform: translateY(-10px);
  /* Se esconde hacia arriba */
  pointer-events: none;
}

.site-header-alt.header-scrolled .logo-small {
  opacity: 1;
  transform: translateY(0);
  /* Queda en el centro */
}

/* Menu abierto: se oculta la barra superior y queda solo el boton animado */
.site-header-alt.menu-active {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header-alt.menu-active .brand-alt,
.site-header-alt.menu-active .header-alt-right {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.site-header-alt.menu-active .nav-wrap-alt {
  justify-content: flex-start;
}

.site-header-alt.menu-active .header-alt-left {
  flex: 0 0 auto;
}



.site-header-alt.menu-active .menu-alt-btn {
  position: fixed;
  top: calc(36px + 22px);
  left: 24px;
  z-index: 1201;
}

.site-header-alt.menu-closing .menu-alt-btn {
  opacity: 0;
}

.site-header-alt.menu-active .menu-alt-text {
  display: none;
}


/* RIGHT SIDE: Lang & Reserve */
.header-alt-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  flex: 1;
}

.location-alt-btn {
  color: #fff;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.location-alt-btn:hover {
  color: var(--primary);
}

.lang-switch .lang-btn {
  font-size: 0.85rem;
  color: #fff !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  font-weight: 400;
  transition: color 0.3s ease;
}

.lang-switch .lang-btn:hover {
  color: var(--primary) !important;
}

.lang-switch .lang-btn svg {
  stroke-width: 1.5px;
}

.site-header-alt .lang-menu {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.site-header-alt .lang-menu button {
  color: #fff;
}

.site-header-alt .lang-menu button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--primary);
}

.btn-reserve-alt {
  background-color: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 1rem 2.8rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.btn-reserve-alt:hover {
  background-color: var(--primary-dark);
}

/* Adjustments to override existing styles */
.menu-toggle {
  display: none !important;
}

body.alt-menu-open {
  overflow: hidden;
}

/* Overlay Navigation Alt */
.overlay-nav-alt {
  position: fixed;
  top: 36px;
  left: 0;
  width: 100%;
  height: calc(100dvh - 36px);
  background-color: rgba(17, 17, 17, 0.98);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 1190;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 768px) {
  .overlay-nav-alt {
    top: 0 !important;
    height: 100dvh !important;
  }
}

.overlay-nav-alt.open {
  opacity: 1;
  pointer-events: auto;
}

/* Scroll indicator ?? fade at bottom when content overflows */
.overlay-nav-alt::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1191;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.overlay-nav-alt.open::after {
  opacity: 1;
}

.overlay-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 2rem 2rem 4rem;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  min-height: 100%;
  justify-content: center;
}

.overlay-nav-alt.open .overlay-nav-inner {
  transform: translateY(0);
}

.menu-overlay-logo {
  width: auto;
  height: 80px;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.95;
  object-fit: contain;
}

.hero-inner {
  max-width: 1400px;
  padding-left: clamp(1rem, 5vw, 4rem);
  transform: translateY(calc(150px + var(--hero-parallax, 0px))) !important;
  will-change: transform;
  /* Reubicación Aman FORZADA: Bajado ~3cm (150px) venciendo al bloqueo de reveal */
}

.nav-link-alt {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0.2rem 0;
  letter-spacing: 0.15em;
}

/* ???? CASCADA TRIANGULAR: tamaño decreciente de arriba a abajo ???? */
.nav-link-alt:nth-of-type(2)  { font-size: clamp(1.1rem, 2.6vw, 2.6rem); letter-spacing: 0.06em; }
.nav-link-alt:nth-of-type(3)  { font-size: clamp(1.05rem, 2.4vw, 2.3rem); letter-spacing: 0.07em; }
.nav-link-alt:nth-of-type(4)  { font-size: clamp(1.0rem, 2.2vw, 2.1rem); letter-spacing: 0.08em; }
.nav-link-alt:nth-of-type(5)  { font-size: clamp(0.97rem, 2.0vw, 1.9rem); letter-spacing: 0.09em; }
.nav-link-alt:nth-of-type(6)  { font-size: clamp(0.94rem, 1.9vw, 1.75rem); letter-spacing: 0.10em; }
.nav-link-alt:nth-of-type(7)  { font-size: clamp(0.91rem, 1.8vw, 1.6rem); letter-spacing: 0.11em; }
.nav-link-alt:nth-of-type(8)  { font-size: clamp(0.88rem, 1.7vw, 1.5rem); letter-spacing: 0.12em; }
.nav-link-alt:nth-of-type(9)  { font-size: clamp(0.85rem, 1.6vw, 1.4rem); letter-spacing: 0.14em; }
.nav-link-alt:nth-of-type(10) { font-size: clamp(0.83rem, 1.5vw, 1.3rem); letter-spacing: 0.15em; }
.nav-link-alt:nth-of-type(11) { font-size: clamp(0.81rem, 1.4vw, 1.2rem); letter-spacing: 0.16em; }
.nav-link-alt:nth-of-type(12) { font-size: clamp(0.79rem, 1.3vw, 1.1rem); letter-spacing: 0.17em; }
.nav-link-alt:nth-of-type(13) { font-size: clamp(0.77rem, 1.2vw, 1.05rem); letter-spacing: 0.18em; }
.nav-link-alt:nth-of-type(14) { font-size: clamp(0.75rem, 1.1vw, 1.0rem); letter-spacing: 0.20em; }

/* ???? CTA Dorado ?? Opción A: texto puro, mismo flujo, color dorado ???? */
.nav-link-alt.nav-cta-gold {
  color: var(--primary) !important;
  font-size: clamp(1rem, 2.1vw, 1.6rem) !important;
  letter-spacing: 0.26em !important;
  margin-top: 1rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(197,165,71,0.3);
  padding-bottom: 0.2rem;
  transition: all 0.3s ease;
}
.nav-link-alt.nav-cta-gold:hover {
  color: #fff !important;
  border-bottom-color: #fff;
}

.nav-link-alt:hover {
  color: var(--primary);
  transform: scale(1.05);
}



/* ???? MEN? DOS COLUMNAS ?? PROPUESTA A ???? */
.overlay-nav-alt {
  align-items: center !important;
  justify-content: center !important;
}

.overlay-nav-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 2rem 3rem !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.menu-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 1.5rem 0 1.2rem;
}
.menu-overlay-logo-m {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.menu-overlay-logo-text {
  height: 38px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}

.menu-divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,165,71,0.9), transparent) !important;
  margin: 1.2rem auto;
  border: none !important;
  outline: none !important;
  display: block;
  opacity: 1;
}

.menu-cols {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  justify-content: center;
  padding: 0.5rem 0;
}

.menu-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  padding: 0 2rem;
}

.menu-col-label {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 5px;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.4rem;
  opacity: 1;
}

.menu-col-divider {
  width: 1px;
  min-height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(197,165,71,0.85) 30%, rgba(197,165,71,0.85) 70%, transparent);
  align-self: stretch;
  flex-shrink: 0;
  display: block;
  opacity: 1;
}
@media (max-width: 768px) {
  .menu-col-divider {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
    background: none !important;
  }
  .menu-cols {
    flex-direction: column !important;
    align-items: center !important;
  }
  .menu-col {
    align-items: center !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .menu-col-label {
    text-align: center !important;
  }
  .menu-col:last-child .menu-col-label {
    margin-top: 2rem !important;
  }
}

/* Nav links ?? uniform size in two-col layout */
.menu-cols .nav-link-alt {
  font-size: clamp(1rem, 1.6vw, 1.4rem) !important;
  letter-spacing: 0.15em !important;
  margin: 0.3rem 0 !important;
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  position: relative;
  white-space: nowrap;
  text-transform: none !important;
}
.menu-cols .nav-link-alt::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 6px;
  height: 1px;
  background: var(--primary);
  transition: transform 0.3s ease;
  transform-origin: left;
}
.menu-cols .nav-link-alt:hover {
  color: #fff !important;
  transform: translateX(4px) !important;
}
.menu-cols .nav-link-alt:hover::before {
  transform: translateY(-50%) scaleX(1);
}

/* CTA + footer del menú */
.menu-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0 1.5rem;
  width: 100%;
}
.nav-cta-gold-btn {
  border-radius: 100px !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  background: transparent;
  border: 1px solid rgba(197,165,71,0.6);
  padding: 0.75rem 2.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}
.nav-cta-gold-btn:hover {
  background: rgba(197,165,71,0.08);
  border-color: rgba(197,165,71,0.9);
  color: #ecd4a1;
  transform: translateY(-2px);
}
.menu-contact-info {
  display: flex;
  gap: 2rem;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 1.5px;
  font-family: var(--font-body);
}

/* RESPONSIVE ?? móvil: stack columns vertically */
@media (max-width: 600px) {
  .menu-cols {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .menu-col-divider {
    width: 40px !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(197,165,71,0.3), transparent) !important;
    align-self: center !important;
    margin: 0.5rem 0 !important;
  }
  .menu-col {
    padding: 0 1rem !important;
  }
  .menu-cols .nav-link-alt {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
  }
  .overlay-nav-inner {
    padding: 1.5rem 1.5rem !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
}
/* ???? FIN MEN? DOS COLUMNAS ???? */

/* Responsive Hide for some elements */
@media (max-width: 900px) {

  .menu-alt-text,
  .lang-alt-switch {
    display: none;
  }

  .header-alt-left {
    gap: 1rem;
  }

  .header-alt-right {
    justify-content: flex-end;
  }

  .btn-reserve-alt {
    padding: 0.8rem 1.8rem;
    font-size: 0.78rem;
  }

}


/* En telefono ocultamos solo el CTA de reserva en el header
   para mantener visibles ubicacion + idioma sin desbordes */
@media (max-width: 768px) {
  .btn-reserve-alt {
    display: none !important;
  }

  .header-alt-right {
    gap: 0.75rem;
  }

  .location-alt-btn {
    padding: 0.2rem;
  }
}

/* El badge de Reservas se oculta en pantallas medianas para evitar overflow */
@media (max-width: 1200px) {
  .hero-reservation-badge {
    display: flex;
  }
}

/* Modificaciones de Hero p/ dise?±o Mockup */
.site-header-alt~main {
  position: relative;
}

@media (min-width: 769px) {
  .site-header-alt~main .hero {
    position: relative;
    top: auto;
    min-height: calc(100vh - 85px);
    padding-top: 0;
    z-index: 0;
  }

  .site-header-alt~main .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .site-header-alt~main .hero-bg-layer {
    will-change: transform;
  }

  .site-header-alt~main .hero-overlay,
  .site-header-alt~main .hero-shape-divider {
    position: relative;
    z-index: 2;
  }

  .site-header-alt~main>.container:first-of-type {
    position: relative;
    z-index: 3;
    margin-top: clamp(-13rem, -16vh, -7rem);
  }

  .site-header-alt~main>section:not(.hero),
  .site-header-alt~main>div:not(.container) {
    position: relative;
    z-index: 2;
  }

  .architecture-banner {
    position: -webkit-sticky;
  position: sticky;
    top: 85px;
    z-index: 0;
  }

  .architecture-banner {
    min-height: calc(100vh - 85px);
  }

  .architecture-banner + #masterplan.masterplan-wrapper {
    position: relative;
    z-index: 3;
    margin-top: 0;
  }

  #masterplan.masterplan-wrapper {
    min-height: calc(100vh - 85px);
    padding-bottom: clamp(7rem, 11vw, 10rem);
  }

  #masterplan .container {
    width: min(97vw, 1840px);
    max-width: none;
    padding-inline: clamp(12px, 1.8vw, 28px);
  }

  #masterplan .masterplan-card {
    margin-inline: auto;
  }

  #masterplan .container,
  #masterplan .masterplan-card {
    position: relative;
    z-index: 2;
  }

  #masterplan + .finance-section {
    position: relative;
    z-index: 4;
    margin-top: clamp(-8rem, -10vh, -4rem);
  }
}

@media (max-width: 768px) {
  .site-header-alt~main .hero {
    position: relative;
    top: auto;
    min-height: calc(90vh + 100px);
    padding-top: 85px;
    padding-bottom: 100px;
  }

  .architecture-banner,
  #masterplan.masterplan-wrapper {
    position: relative;
    top: auto;
  }

  .architecture-banner + #masterplan.masterplan-wrapper,
  #masterplan + .finance-section {
    margin-top: 0;
  }
}
/* Badge de Reservas en la seccion Modelos */
.models-with-badge {
  position: relative;
  overflow: hidden !important;
}

body {
  overflow-x: hidden;
}

.hero-reservation-badge {
  position: relative;
  bottom: auto;
  right: auto;
  top: auto;
  left: auto;
  width: fit-content;
  height: fit-content;
  background-color: #1a1a1a;
  color: #fff;
  padding: 1.2rem 2.2rem;
  border-radius: 15px;
  text-align: left;
  z-index: 20;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  opacity: 0;
  transform: translateX(200px);
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
  border: 1px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
}

.hero-reservation-badge.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.hero-reservation-badge:hover {
  background-color: #222;
  transform: translateY(-6px);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52), 0 0 28px rgba(212, 175, 55, 0.34);
}

/* Cuando ya esta visible, mantenemos translateX(0) y sumamos elevacion/glow */
html body .hero-reservation-badge.is-visible:hover {
  transform: translateX(0) translateY(-6px) !important;
  background: linear-gradient(135deg, #1f1f1f 0%, #151515 100%) !important;
  border-color: rgba(235, 196, 78, 0.95) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.38) !important;
}

.hero-reservation-badge span {
  font-size: 0.85rem;
  color: #ddd;
  border-bottom: 1px solid #555;
  padding-bottom: 3px;
  margin-bottom: 5px;
  font-weight: 500;
}

.hero-reservation-badge strong {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}



/* Estilos de Lujo para la Secci???³n About */
/* --- SECTION ADJUSTMENTS (MINIMALIST) --- */

#about {
  padding: 15rem 0; /* Espacio monumental para elementos din?¡micos */
  background: #fff;
  text-align: center;
  position: relative; /* Base para partners móviles */
  min-height: 60vh;
  display: flex;
  align-items: center;
}

#about h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: #111;
  margin-bottom: 2rem;
}

#about p {
  font-size: 1.25rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto;
}

/* --- MODELOS (FONDO NEGRO, TARJETAS BLANCAS) --- */
#models {
  background: #000 !important;
  color: #fff !important;
  padding: 8rem 0;
}

#models .section-head h2,
#models .section-head p {
  color: #fff !important;
}

#models .villa-card {
  background: #fff !important;
  color: #111 !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 1.5rem;
  border: 1px solid transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Dorsos de tarjeta unificados (Garantiza aparición en Desktop, iPad y Mobile) */
#models .villa-card::after {
  content: "M";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c5a547 0%, #ecd4a1 50%, #c5a547 100%);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 15vw, 6.5rem); /* Ajuste fluido */
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  z-index: 5;
  border: 2px solid rgba(255,255,255,0.1);
  pointer-events: none;
}

#models .villa-card:hover {
  transform: translateY(-4px) rotateY(4deg) rotateX(0.8deg);
  border-color: rgba(212, 175, 55, 0.42) !important;
  box-shadow:
    -8px 16px 34px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(212, 175, 55, 0.14),
    0 0 18px rgba(197, 165, 71, 0.1) !important;
}

#models .villa-card .villa-photo {
  transition: transform 0.8s ease;
}

#models .villa-card:hover .villa-photo {
  transform: scale(1.02) translateZ(8px);
}

#models .villa-card h3 {
  color: #111 !important;
}

#models .villa-card .villa-spec span {
  color: #666 !important;
}

#models .villa-card .btn-outline {
  background-color: var(--primary) !important;
  border: none !important;
  color: #fff !important;
}

/* --- EXPERIENCIA (FONDO BLANCO) --- */
#experience {
  background: #ffffff !important;
  color: var(--title) !important;
  padding: 8rem 0;
}

#experience h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(2.8rem, 4vw, 4.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 1.2rem !important;
}

#experience h2,
#experience p,
#experience .pillars h3 {
  color: var(--title) !important;
}

#experience .reveal > p {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: #666 !important;
  max-width: 480px;
  text-align: left;
}

/* Pillar card text stays white on dark card */
#experience .pillars h3 {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  letter-spacing: 2px !important;
  margin-bottom: 0.4rem !important;
}
#experience .pillars p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 1.0rem !important;
  line-height: 1.55 !important;
}

#experience .reveal.active h2,
#experience .reveal.active p {
  opacity: 1 !important;
}

#experience .pillars article {
  background: #111111 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(197, 165, 71, 0.15) !important;
  padding: 28px 22px;
  border-radius: 12px !important;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative;
  overflow: hidden;
  cursor: default;
}

#experience .pillars article::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(197, 165, 71, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

#experience .pillars article:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

#experience .pillars article:hover::before {
  opacity: 1;
}

#experience .pillars article .icon {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0 auto 1.5rem auto; /* Centrar icono */
}

#experience .pillars article:hover .icon {
  transform: scale(1.15) translateY(-5px);
}

#experience .pillars article .icon svg {
  filter: none;
  transition: filter 0.3s ease;
}
#experience .pillars article:hover .icon svg {
  filter: none;
}

.masterplan-card {
  background: linear-gradient(135deg, #c5a547 0%, #ecd4a1 50%, #c5a547 100%) !important;
  border-radius: 0 0 clamp(64px, 9.6vw, 128px) clamp(64px, 9.6vw, 128px) !important;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  margin: 4rem auto !important;
  width: 96% !important; /* Más cerca de los bordes laterales */
}

.masterplan-card-img-bg {
  width: 100% !important;
  height: clamp(625px, 78vw, 1060px) !important; /* Aumentado ~80px-100px para mayor impacto vertical */
  position: relative;
  background-color: #000;
  /* CODIGO PARALLAX SUSPENDIDO (Mantener Escondido)
  background-attachment: fixed !important; 
  */
  border-radius: 0 0 clamp(60px, 10vw, 120px) clamp(60px, 10vw, 120px);
  overflow: hidden;
}

.masterplan-card-img-bg::before {
  /* CODIGO PARALLAX SUSPENDIDO (Mantener Escondido)
  display: none !important; 
  */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/masterplan-topografico.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0) scale(1.04);
  transform-origin: center center;
  animation: masterplan-depth 24s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

@keyframes masterplan-depth {
  from {
    transform: translate3d(0, 0, 0) scale(1.03);
  }

  to {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
}

.masterplan-card img {
  display: none !important;
}

.mp-stats {
  padding: 2.5rem 10% !important;
  background: transparent !important;
}

.mp-stat h4 {
  color: #111 !important;
  /* Negro sobre dorado para m???¡xima legibilidad */
  text-shadow: none;
}

.mp-stat p {
  color: rgba(0, 0, 0, 0.7) !important;
  /* Negro suavizado */
  font-weight: 600;
  font-size: 0.85rem !important;
  /* Increased for better legibility */
}

/* --- ARQUITECTURA (PORTAL DE INGRESO) --- */
.architecture-banner {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Resetting card layout from base styles for true full-width */
  width: 100% !important;
  margin: 4rem 0 !important;
  border-radius: 0 !important;
  height: clamp(500px, 70vh, 800px);
  /* Altura generosa */
  display: flex;
  align-items: center;
  justify-content: center;
}

.architecture-banner::before {
  content: none !important;
}

.arch-overlay-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  transition: background 0.4s ease;
}

.architecture-banner:hover .arch-overlay-btn {
  background: rgba(0, 0, 0, 0.3);
}

.play-trigger {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0.8;
  transition: all 0.4s ease;
}

.play-trigger svg {
  width: 70px;
  height: 70px;
  background: rgba(212, 175, 55, 0.9);
  padding: 18px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
  animation: pulse-gold 2s infinite;
}

.play-trigger span {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: #fff;
}

.architecture-banner:hover .play-trigger {
  opacity: 1;
  transform: scale(1.1);
}

@keyframes pulse-gold {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(212, 175, 55, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

@keyframes model-modal-spin-in {
  0% {
    opacity: 0;
    transform: translateY(36px) rotateY(90deg) scale(0.985);
  }

  62% {
    opacity: 1;
    transform: translateY(4px) rotateY(14deg) scale(0.995);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes model-modal-content-reveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-breath {
  0% {
    transform: translate3d(0, 0.6%, 0) scale(1.02);
  }

  50% {
    transform: translate3d(0, -0.8%, 0) scale(1.045);
  }

  100% {
    transform: translate3d(0, 0.4%, 0) scale(1.03);
  }
}

@keyframes architecture-depth {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.02);
  }
}

@keyframes masterplan-depth {
  0% {
    transform: translate3d(0, 1.2%, 0) scale(1.06);
  }

  100% {
    transform: translate3d(0, -1.2%, 0) scale(1.03);
  }
}

@keyframes mp-text-blur-in {
  0% {
    opacity: 0;
    filter: blur(24px);
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes mp-stat-blur-in {
  0% {
    opacity: 0;
    filter: blur(18px);
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Modal de Video Espec???­fico */
.video-modal-content {
  background: #000;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.9);
}

.video-responsive-container {
  width: 100%;
  height: 100%;
}

.video-responsive-container iframe,
.video-responsive-container video {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: contain;
  /* Para no deformar el video */
  background: #000;
}

/* --- CONOCE LA ARQUITECTURA (DETALLES DE PLANOS) --- */
.architecture-details {
  background-color: #fff;
  padding: 8rem 0;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.plan-item {
  position: relative;
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.plan-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.plan-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-img-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
}

.plan-item:hover .plan-img-container img {
  transform: scale(1.05);
}

.plan-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  text-align: center;
}

.plan-overlay span {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}

/* --- UBICACION --- */
#location {
  background-color: var(--surface);
  padding: 8rem 0;
}

.location-card {
  background: #111 !important;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
  max-width: 1050px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* --- UBICACION (BLOQUE NEGRO) --- */
.location-details {
  background: #111 !important;
  color: #fff !important;
  padding: 4rem 3rem !important;
  display: flex;
  flex-direction: column;
  /* Centrado vertical stack */
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}

.location-text p {
  line-height: 1.4 !important;
  margin: 0 !important;
}

.loc-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.05);
  /* Muy sutil al inicio */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: all 0.4s ease;
}

.location-card:hover .loc-icon {
  background: rgba(212, 175, 55, 0.2);
}

.loc-icon svg {
  width: 35px;
  height: 35px;
}

.location-details h3 {
  color: #fff !important;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  /* Reducido para mayor elegancia */
  margin-bottom: 1.5rem !important;
}

.location-details p {
  color: #aaa !important;
  font-size: 1.1rem;
  margin: 0;
}

.contact-form {
  background: #050505 !important;
  border: 1.5px solid #c5a547 !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.4s ease !important;
  padding: 3rem !important;
  border-radius: 20px !important;
}

/* Ajuste balanceado del ancho del contenedor para respiro lateral sin comprimir el contenido */
.contact .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.contact-form:hover {
  border-color: #ecd4a1 !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.7), 0 0 25px rgba(197, 165, 71, 0.2) !important;
  transform: translateY(-8px) !important;
}

.contact-actions {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.contact-actions .btn {
  flex: 0 1 auto;
  min-width: 180px;
}


/* Modales (Modal Overlay y Funcionalidad) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #111;
  width: 90%;
  max-width: 1300px;
  height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform: translateY(50px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

/* Model details modal: spin-in reveal inspired by intro M */
#model-modal .modal-content {
  opacity: 0;
  transform: translateY(36px) rotateY(90deg) scale(0.985);
  transform-origin: 50% 60%;
  backface-visibility: hidden;
  transition: none;
}

#model-modal.active .modal-content {
  animation: model-modal-spin-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#model-modal .modal-media-gallery,
#model-modal .modal-col-left {
  opacity: 0;
  transform: translateY(18px);
}

#model-modal.active .modal-media-gallery {
  animation: model-modal-content-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;
}

#model-modal.active .modal-col-left {
  animation: model-modal-content-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.56s forwards;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-close:hover {
  background: var(--primary);
  transform: scale(1.1);
}

.modal-render-body {
  display: grid !important;
  grid-template-columns: 1.7fr 1fr !important;
  grid-template-rows: 1fr !important;
  height: 100% !important;
  direction: ltr !important;
}

.modal-media-gallery {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
  overflow: hidden !important;
  border-right: 1px solid #222 !important;
  border-left: none !important;
}

.modal-col-left {
  grid-column: 2 !important;
  grid-row: 1 !important;
  overflow-y: auto !important;
  padding: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  background: #111 !important;
}

.modal-main-view {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-display-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.main-display-img.contain {
  object-fit: contain;
  background: #fff;
  padding: 2rem;
}

.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-nav-btn:hover {
  background: var(--primary);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav-btn svg {
  width: 24px;
  height: 24px;
}

.modal-nav-prev {
  left: 20px;
}

.modal-nav-next {
  right: 20px;
}

.modal-thumb-carousel {
  height: 140px;
  background: #000;
  padding: 15px 20px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  border-top: 1px solid #222;
  scrollbar-width: auto;
  scrollbar-color: #333 transparent;
}

.modal-thumb-carousel::-webkit-scrollbar {
  height: 4px;
}

.modal-thumb-carousel::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.thumb-item {
  flex: 0 0 110px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.thumb-item.active {
  border-color: var(--primary);
  transform: scale(0.95);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.thumb-item.active img,
.thumb-item:hover img {
  opacity: 1;
}

.thumb-item.video-thumb::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.2);
}

.gallery-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--primary);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  z-index: 5;
}

.modal-col-left {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  background: #111;
  overflow-y: auto;
  scrollbar-width: auto;
  scrollbar-color: #333 transparent;
}

.modal-col-left::-webkit-scrollbar {
  width: 5px;
}

.modal-col-left::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}

.modal-sticky-header {
  margin-bottom: 2rem;
}

.modal-sticky-header h2 {
  font-size: 2.2rem;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.modal-price {
  font-size: 1.4rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.btn-view-arch {
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 0.9rem 2rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 1rem;
}

.btn-view-arch:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-col-left ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  /* Reducido de 3rem */
}

.modal-col-left li {
  font-size: 0.95rem;
  padding: 0.8rem 0;
  /* Reducido de 1rem para evitar scroll */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 15px;
  color: #bbb;
}

.modal-col-left li svg {
  color: var(--primary);
  flex-shrink: 0;
}

.modal-carousel-wrap {
  position: relative;
  flex: 1;
  /* ocupa el espacio restante mayormente */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0a0a;
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.carousel-btn:hover {
  background: var(--primary);
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

/* Carrusel de control simple para opacity (JS toggles this) */
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* 3 Mini-Videos (o fotos extra) debajo */
.modal-video-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  height: clamp(120px, 20vh, 180px);
  background: #000;
  border-top: 1px solid #222;
}

.vid-thumb {
  position: relative;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 991px) {
  .modal-render-body {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh auto;
    /* Gallery takes top half */
  }

  .modal-col-left {
    padding: 2rem;
    order: 2;
  }

  .modal-media-gallery {
    order: 1;
    border-right: none;
    border-bottom: 1px solid #222;
  }

  .gallery-item {
    flex: 0 0 300px;
    /* Smaller items on mobile */
  }

  .hero-reservation-badge {
    top: auto;
    bottom: 1.5rem;
    right: 2.5%;
    left: auto;
    padding: 0.8rem 1.5rem;
    z-index: 50; /* Darle super prioridad para que esté por encima de las tarjetas que giran */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Intensificar la sombra contra fondos claros */
  }

  .hero-reservation-badge strong {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .location-card {
    flex-direction: row;
    align-items: stretch;
  }

  .map-container {
    flex: 2;
  }

  .location-details {
    flex: 1.2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* --- NARRATIVE TEXT STYLES (PREMIUM DARK GLASSMORPHISM) --- */
.masterplan-narrative-glass {
  background: rgba(15, 15, 15, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 3px solid var(--primary);
  border-radius: 12px;
  max-width: 850px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  margin-bottom: -50px;
  padding: 2.5rem 3rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  text-align: center;
}

#masterplan .masterplan-narrative-glass {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.2s;
}
#masterplan.active .masterplan-narrative-glass {
  opacity: 1;
  transform: translateY(0);
}

.mp-community-note {
  color: #f0f0f0 !important;
  font-size: 1.15rem;
  line-height: 1.8;
  font-weight: 400;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.mp-stats-note {
  color: #cccccc !important;
  font-size: 1.1rem;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.fin-scheme-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 650px;
  margin: 0 auto 2rem;
  text-align: center;
  font-style: italic;
}

.location-tagline {
  color: #888 !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  margin-top: 2rem !important;
  font-style: italic;
}

.form-intro-note {
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* --- COMPLIANCE MODAL --- */
.legal-modal-content {
  max-width: 700px;
  width: 92vw;
  background: #111;
  color: #fff;
  border-radius: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.legal-modal-body {
  overflow-y: auto;
  padding: 4rem 3rem;
  flex: 1;
  scrollbar-width: auto;
  scrollbar-color: #c5a547 #0a0a0a;
}

.legal-modal-body::-webkit-scrollbar {
  width: 6px;
}
.legal-modal-body::-webkit-scrollbar-track {
  background: #0a0a0a;
  border-radius: 0 20px 20px 0;
}
.legal-modal-body::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}
.legal-modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#legal-modal {
  align-items: flex-start;
  padding-top: calc(36px + 72px + 1.5rem);
  padding-bottom: 2rem;
  overflow-y: auto;
}

.legal-modal-body h2 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 2rem;
  text-align: center;
}

.legal-section {
  margin-bottom: 2rem;
}

.legal-section h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.8rem;
  border-left: 3px solid var(--primary);
  padding-left: 15px;
  background: #0a0a0a;
}

.legal-section p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #aaa;
}

@media (max-width: 768px) {
  .legal-modal-content {
    width: 95%;
    padding: 3rem 1.5rem;
  }
}

/* === POST-PRELOADER REVEAL SYSTEM === */

/* 1. Hero Content (Visible by Default to avoid load issues) */
.hero-inner {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 2.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 2.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.hero-inner.active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* 2. Hero Buttons (Visible by Default) */
.cta-row {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.3s;
  will-change: opacity, transform;
}

.cta-row.active {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Trust Bar / Stats Banner (Scroll Reveal) */
.trust-bar {
  opacity: 0 !important;
  transform: translateY(80px) !important;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.2s !important;
  transition-delay: 1s;
  will-change: opacity, transform;
}

.trust-bar.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible;
}

/* --- MASTERPLAN BLUR REVEAL --- */
#masterplan .section-head h2,
#masterplan .section-head p {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(18px);
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Desktop: el título y la intro del masterplan no deben depender del observer */
@media (min-width: 769px) {
  #masterplan .section-head h2,
  #masterplan .section-head p {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
}

#masterplan.active .section-head h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#masterplan.active .section-head p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.4s;
}

#masterplan .mp-community-note,
#masterplan .mp-stats,
#masterplan .mp-stats-note {
  opacity: 0;
  filter: blur(24px);
  transform: translateY(30px);
  transition: opacity 1.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#masterplan .mp-stats .mp-stat {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#masterplan .mp-stats .mp-stat p {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translateY(16px) !important;
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

#masterplan.active .mp-community-note {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  animation: mp-text-blur-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition-delay: 0.55s;
}

#masterplan.active .mp-stats {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.8s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(1) {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.9s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(2) {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 1.05s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(3) {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 1.2s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(1) p {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  animation: mp-stat-blur-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition-delay: 1s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(2) p {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  animation: mp-stat-blur-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition-delay: 1.15s;
}

#masterplan.active .mp-stats .mp-stat:nth-child(3) p {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  animation: mp-stat-blur-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition-delay: 1.3s;
}

#masterplan.active .mp-stats-note {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  animation: mp-text-blur-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition-delay: 1.3s;
}

/* --- FINANCE BLUR REVEAL --- */
#finance h2,
#finance [data-i18n="fin_intro"],
#finance .fin-scheme-note {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(18px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

#finance.active h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#finance.active [data-i18n="fin_intro"] {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.35s;
}

#finance.active .fin-scheme-note {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.55s;
}

/* =============================================
   MEJORA #1: ABOUT â?—? BLUR REVEAL
   ============================================= */
#about .section-head h2,
#about .section-head p {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(16px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .section-head.active h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#about .section-head.active p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.35s;
}

/* =============================================
   PILARES - ENTRADA GLASSMORPHISM (STAGGER)    
   ============================================= */
#experience .pillars {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
#experience .pillars article {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#experience .pillars article.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px) {
  #experience .pillars {
    grid-template-columns: 1fr;
  }
}


/* =============================================
   MEJORA #3: FINANCE STAT BOXES â?—? SCALE + FADE
   ============================================= */
.stat-box {
  opacity: 0;
  transform: translateY(25px) scale(0.96);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#finance.active .stat-box:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}

#finance.active .stat-box:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.4s;
}

/* =============================================
   MEJORA #4: FOOTER â?—? FADE-IN SUAVE
   ============================================= */
.site-footer .footer-grid>div:first-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer.active .footer-grid>div:first-child {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

/* =============================================
   BLUR REVEAL â?—? SISTEMA GLOBAL DE SECCIONES
   Aplica a: Models, Experience, Finance,
             Location, Contact, Architecture
   ============================================= */

/* --- BASE: Estado inicial compartido --- */
#models .section-head h2,
#models .section-head p,
#experience .reveal h2,
#experience .reveal p,
.finance-container h2,
.finance-container>p,
#location .section-head h2,
#location .section-head p,
#contact .contact-info h2,
#contact .contact-info>p,
.architecture-banner h2 {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- A: MODELOS --- */
#models .section-head.active h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#models .section-head.active p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- B: EXPERIENCE / CONCEPTO --- */
#experience .reveal.active h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#experience .reveal.active p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- D: FINANCIAMIENTO --- */
#finance.active .finance-container h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.15s;
}

#finance.active .finance-container>p:not(.fin-scheme-note) {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.35s;
}

#finance.active .fin-scheme-note {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* --- E: UBICACIÓN --- */
#location .container.active .section-head h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#location .container.active .section-head p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- F: CONTACTO --- */
#contact .contact-grid.active .contact-info h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.1s;
}

#contact .contact-grid.active .contact-info>p {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* --- H: ARCHITECTURE BANNER --- */
.architecture-banner.active h2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* --- MODELS CARDS: RISE + TILT (SOFT) --- */
#models .villa-grid {
  perspective: 1200px;
}

#models .villa-card.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#models .villa-card.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

#models .villa-grid .villa-card.reveal:nth-child(1).active {
  transition-delay: 0s;
}

#models .villa-grid .villa-card.reveal:nth-child(2).active {
  transition-delay: 0.42s;
}

#models .villa-grid .villa-card.reveal:nth-child(3).active {
  transition-delay: 0.84s;
}

#models .villa-card.reveal.active:hover {
  transform: translateY(-8px) rotateY(0deg) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .site-header-alt~main .hero-visual {
    animation: none !important;
    transform: none !important;
  }

  .site-header-alt~main .hero-bg-layer {
    animation: none !important;
    transform: none !important;
  }

  .masterplan-card-img-bg::before {
    animation: none !important;
    transform: none !important;
  }

  .architecture-banner::before {
    animation: none !important;
    transform: none !important;
  }

  #model-modal .modal-content,
  #model-modal.active .modal-content,
  #model-modal .modal-media-gallery,
  #model-modal .modal-col-left,
  #model-modal.active .modal-media-gallery,
  #model-modal.active .modal-col-left {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #masterplan .mp-community-note,
  #masterplan .mp-stats-note,
  #masterplan .mp-stats .mp-stat p,
  #masterplan.active .mp-community-note,
  #masterplan.active .mp-stats-note,
  #masterplan.active .mp-stats .mp-stat p {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  #models .villa-card.reveal,
  #models .villa-card.reveal.active {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- REFINAMIENTOS DE ESPACIADO Y VISIBILIDAD --- */

/* Separaci?³n en Finanzas (Intro vs Esquema) */
.fin-scheme-note {
  margin-top: 2.5rem !important;
  /* M?¡s aire */
  display: block;
}

/* Separaci?³n en Ubicación (Direcci?³n vs Tagline) */
.location-tagline {
  margin-top: 1.5rem !important;
  /* Ajustado con el <br> del HTML */
  display: block;
}

/* Fix Masterplan Stats (Prevenir desaparici?³n) */
#masterplan.active .mp-stat,
#masterplan.active .mp-stat h4,
#masterplan.active .mp-stat p,
#masterplan.active .mp-stat .premium-reveal {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  color: #111 !important;
  /* Forzar negro sobre dorado */
  visibility: visible !important;
}

#masterplan.active .mp-stats {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

/* Asegurar que las notas del masterplan respiren */
.mp-community-note,
.mp-stats-note {
  padding: 1rem 1.5rem;
  margin: 1rem auto;
}

@media (max-width: 600px) {
  .mp-community-note,
  .mp-stats-note {
    font-size: 0.88rem;
    padding: 1rem 1.2rem;
    line-height: 1.65;
  }
}

/* Animaci?³n de Ondulaci?³n (Sway) para el Icono de Ubicación */
@keyframes iconSway {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-12deg);
  }

  50% {
    transform: rotate(12deg);
  }

  75% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Animaci?³n de Vibraci?³n Intensa (Shake) */
@keyframes iconShake {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-22deg);
  }

  40% {
    transform: rotate(22deg);
  }

  60% {
    transform: rotate(-18deg);
  }

  80% {
    transform: rotate(18deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.loc-icon {
  isolation: isolate;
}
.loc-icon svg {
  transform-origin: bottom center;
  transition: stroke 0.3s ease;
  will-change: transform;
  display: block;
}

/* Hover sobre la tarjeta ?? 0.10s */
.location-card:hover .loc-icon svg {
  animation: locPinBounce 0.10s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(197, 165, 71, 0.5));
}
/* Hover directo sobre el ícono ?? 0.12s */
.loc-icon:hover svg {
  animation: locPinBounce 0.12s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 6px rgba(197, 165, 71, 0.5));
}

@keyframes locPinBounce {
  0%   { transform: rotate(-18deg); }
  100% { transform: rotate(18deg); }
}

.location-card:hover .loc-icon {
  background: rgba(212, 175, 55, 0.15) !important;
  transform: none !important;
}


/* --- BOT???N ATENCI???N INMEDIATA (FOOTER/CONTACTO) --- */
.btn-phone {
  background: #fff !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.6rem 1.4rem !important;
  font-weight: 600 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  transition: all 0.3s ease !important;
}

.btn-phone:hover {
  transform: translateY(-5px) !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3) !important;
}


/* --- ANIMACIONES DE TEL??FONO (RINGING EFFECT) --- */
@keyframes phoneRing {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-12deg);
  }

  50% {
    transform: rotate(12deg);
  }

  75% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes phoneIntense {
  0% {
    transform: rotate(0deg) scale(1.1);
  }

  10% {
    transform: rotate(-15deg) scale(1.1);
  }

  20% {
    transform: rotate(15deg) scale(1.1);
  }

  30% {
    transform: rotate(-15deg) scale(1.1);
  }

  40% {
    transform: rotate(15deg) scale(1.1);
  }

  50% {
    transform: rotate(-15deg) scale(1.1);
  }

  60% {
    transform: rotate(15deg) scale(1.1);
  }

  100% {
    transform: rotate(0deg) scale(1.1);
  }
}

.btn-phone svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  animation: phoneRing 1.5s ease-in-out infinite;
  transform-origin: center;
}

/* --- VISUAL RHYMING --- */
.section-head {
  position: relative;
}

.visual-rhyme {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 240px;
  opacity: 0.18 !important;
  /* Marca de agua sutil pero perceptible */
  pointer-events: none;
  z-index: 0;
  user-select: none;
  filter: grayscale(1) brightness(0.85);
  /* Estilo gris oscuro institucional */
  transition: opacity 1.5s ease;
  display: flex;
  justify-content: center;
}


.visual-rhyme img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.section-head h2,
.section-head p {
  position: relative;
  z-index: 2;
  /* Texto por encima de la M */
}

@media (max-width: 768px) {
  .visual-rhyme {
    max-width: 150px;
  }
}

.btn-phone:hover svg {
  animation: phoneIntense 0.4s ease-in-out infinite !important;
}

.contact-actions .btn:first-child svg {
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
}

.contact-actions .btn:first-child:hover svg {
  animation: emailWobble 0.7s ease-in-out infinite;
}

@keyframes emailWobble {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-12deg) scale(1.04);
  }
  40% {
    transform: rotate(10deg) scale(1.04);
  }
  60% {
    transform: rotate(-8deg) scale(1.03);
  }
  80% {
    transform: rotate(6deg) scale(1.02);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}


    /* PRIORIDAD M?XIMA PARA IM?GENES Y EFECTOS */
    /* 1. Forzar Im?¡genes .webp con selectores ultra-espec?­ficos */
    /* 1. Limpieza y Nuevo Cielo Sunset (Path Corregido) */
    html body .site-header-alt ~ main #hero .hero-visual { 
      background: none !important;
      display: block !important;
      opacity: 1 !important;
    }
    html body .hero-bg-layer {
      background-image: url("assets/hero-sky-sunset.webp") !important;
      background-position: center bottom !important;
    }
    @media (max-width: 900px) {
      html body .site-header-alt ~ main #hero .hero-visual { 
        background-attachment: scroll !important;
      }
    }
    html body #models .villa-1 { background-image: url('assets/mia.webp') !important; }
    html body #models .villa-2 { background-image: url('assets/emaar.webp') !important; }
    html body #models .villa-3 { background-image: url('assets/amara.webp') !important; }
    html body #masterplan .masterplan-card-img-bg::before { background-image: url('assets/masterplan-topografico.webp') !important; }
    html body .architecture-banner::before { 
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url('assets/hero-family.webp') !important; 
    }

    /* 2. Animaci?³n de entrada tipo "carta revelada" + Efecto hover */

    /* Keyframe:
       Las 3 tarjetas suben desde abajo y giran en la misma direccion */
    @keyframes cardReveal {
      0% {
        opacity: 0;
        transform: perspective(1400px) translateY(140px) rotateY(180deg) scale(0.95);
        background: var(--card-back-metal) !important;
        border-color: rgba(255, 231, 162, 0.52);
        box-shadow:
          inset 0 1px 0 rgba(255, 247, 212, 0.62),
          inset 0 -14px 28px rgba(109, 77, 10, 0.24),
          0 20px 44px rgba(0, 0, 0, 0.34);
      }
      38% {
        opacity: 1;
        transform: perspective(1400px) translateY(0px) rotateY(180deg) scale(1);
        background: var(--card-back-metal) !important;
        border-color: rgba(255, 231, 162, 0.52);
        box-shadow:
          inset 0 1px 0 rgba(255, 247, 212, 0.62),
          inset 0 -14px 28px rgba(109, 77, 10, 0.24),
          0 18px 38px rgba(0, 0, 0, 0.28);
      }
      58% {
        opacity: 1;
        transform: perspective(1400px) translateY(0px) rotateY(238deg) scale(1);
      }
      78% {
        opacity: 1;
        transform: perspective(1400px) translateY(0px) rotateY(296deg) scale(1);
      }
      92% {
        opacity: 1;
        transform: perspective(1400px) translateY(0px) rotateY(337deg) scale(1);
      }
      100% {
        opacity: 1;
        transform: perspective(1400px) translateY(0px) rotateY(360deg) scale(1);
        background: #f5f5f5 !important;
        border-color: rgba(255, 255, 255, 0.18);
      }
    }

    /* Wrapper con perspective para que el giro se vea en 3D */
    html body #models .villa-grid {
      perspective: none !important;
    }

    html body #models .villa-card {
      --card-back-metal:
        radial-gradient(circle at 18% 14%, rgba(255, 249, 214, 0.98) 0%, rgba(255, 249, 214, 0.42) 22%, transparent 40%),
        radial-gradient(circle at 82% 86%, rgba(255, 237, 166, 0.34) 0%, transparent 48%),
        linear-gradient(132deg, #f4db8b 0%, #d6ad43 28%, #b48419 52%, #f0cd70 100%);
      position: relative;
      transform-style: preserve-3d !important;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
      opacity: 0;
      backface-visibility: visible !important;
    }

    /* Cara trasera dorada metalica */
    html body #models .villa-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--card-back-metal) !important;
      border-radius: inherit;
      border: 1px solid rgba(255, 241, 184, 0.52);
      box-shadow:
        inset 0 1px 0 rgba(255, 247, 212, 0.62),
        inset 0 -14px 28px rgba(109, 77, 10, 0.24);
      transform: rotateY(180deg);
      backface-visibility: visible;
      z-index: 10;
      pointer-events: none;
    }

    /* Logo Montreal Villas sobre dorado + cruces sutiles */
    html body #models .villa-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--mv-logo-mark);
      background-repeat: no-repeat;
      background-size: min(52%, 205px) auto;
      background-position: center;
      opacity: 0.86;
      filter:
        drop-shadow(0 1px 0 rgba(255, 244, 198, 0.24))
        drop-shadow(0 10px 20px rgba(0, 0, 0, 0.16));
      transform: rotateY(180deg);
      backface-visibility: visible;
      z-index: 11;
      pointer-events: none;
    }

    html body #models .villa-card > * {
      position: relative;
      z-index: 2;
      backface-visibility: hidden;
    }

    /* Mientras sube/gira, ocultamos el frente para que se vea la cara dorada */
    html body #models .villa-card.card-revealed > * {
      animation: cardFrontReveal 1.38s linear forwards !important;
    }

    /* Animacion principal de la tarjeta */
    html body #models .villa-card.card-revealed {
      animation: cardReveal 1.38s linear forwards !important;
    }

    html body #models .villa-card.card-revealed::before {
      animation: cardBackFaceHide 1.38s linear forwards !important;
    }

    html body #models .villa-card.card-revealed::after {
      animation: cardBackMark 1.38s linear forwards !important;
    }

    @keyframes cardFrontReveal {
      0% { opacity: 0; }
      46% { opacity: 0; }
      62% { opacity: 0.42; }
      78% { opacity: 0.74; }
      92% { opacity: 0.92; }
      100% { opacity: 1; }
    }

    @keyframes cardBackFaceHide {
      0% { opacity: 1; }
      44% { opacity: 1; }
      62% { opacity: 0.62; }
      78% { opacity: 0.28; }
      92% { opacity: 0.05; }
      100% { opacity: 0; }
    }

    @keyframes cardBackMark {
      0% { opacity: 0.92; }
      44% { opacity: 0.88; }
      62% { opacity: 0.52; }
      78% { opacity: 0.18; }
      92% { opacity: 0.04; }
      100% { opacity: 0; }
    }

    /* Estado inicial */
    html body #models .villa-card:not(.card-revealed) {
      opacity: 0 !important;
      transform: perspective(1400px) translateY(140px) rotateY(180deg) scale(0.95) !important;
      background: var(--card-back-metal) !important;
      border-color: rgba(255, 231, 162, 0.52);
    }

    /* Disparar animaci?³n al entrar en pantalla */
    html body #models .villa-card.card-revealed.delay-1 {
      animation-delay: 0s !important;
    }
    html body #models .villa-card.card-revealed.delay-2 {
      animation-delay: 0s !important;
    }

    /* Hover limpio despu?©s de la animaci?³n */
    html body #models .villa-card.card-revealed:hover {
      transform: translateY(-18px) !important;
      border-color: var(--primary) !important;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 28px rgba(197, 165, 71, 0.25) !important;
    }

    html body #models .villa-photo {
      background-size: cover !important;
      background-position: center !important;
      transition: transform 0.7s ease-in-out !important;
    }
    html body #models .villa-card.card-revealed:hover .villa-photo {
      transform: scale(1.07) !important;
    }

    /* 3. Visibilidad Garantizada de Finanzas y Badge */
    html body .finance-section { background: #000 !important; visibility: visible !important; opacity: 1 !important; }
    html body .finance-section h2, html body .finance-section p { color: #fff !important; opacity: 1 !important; }
    html body .hero-reservation-badge {
      display: flex !important;
      z-index: 999 !important;
      opacity: 0;
      transform: translateX(200px) !important;
      transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    html body .hero-reservation-badge.is-visible {
      opacity: 1 !important;
      transform: translateX(0) !important;
    }
    html body .counter-up { 
      color: var(--primary) !important; 
      font-weight: 700 !important; 
      font-size: clamp(3rem, 5vw, 4.5rem) !important; 
    }
  

/* === BEBAS NEUE â?—? T?­tulos premium modernos === */
h1, h2,
.hero-inner h1,
.section-head h2,
#about h2,
#models .section-head h2,
#experience h2,
.architecture-banner h2,
.finance-section h2,
.contact-info h2,
#location .section-head h2,
.modal-sticky-header h2,
.villa-card h3,
.modal-col-left h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  font-style: normal !important;
}

.hero-inner h1 {
  letter-spacing: 0.05em !important;
  line-height: 1.05 !important;
}

.villa-card h3 {
  letter-spacing: 0.1em !important;
}

/* ============================================================
   BEBAS NEUE â?—? Sistema tipogr?¡fico unificado para TODOS los H2/H3
   ============================================================ */
h1,
h2,
h3,
.hero-inner h1,
.section-head h2,
.section-head h3,
#about h2,
#about h3,
#models .section-head h2,
#models .villa-card h3,
#experience h2,
#experience .pillars h3,
.architecture-banner h2,
.finance-section h2,
.finance-container h2,
#finance h2,
#masterplan h2,
#masterplan .section-head h2,
#location h2,
#location .section-head h2,
#location h3,
#contact h2,
#contact .contact-info h2,
.modal-sticky-header h2,
.modal-col-left h2,
.trust-item h4,
.stat-box h3 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.07em !important;
}

/* Tama?±os consistentes por jerarqu?­a */
h1, .hero-inner h1 {
  font-size: clamp(4.1rem, 7vw, 6.7rem) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
}

h2,
.section-head h2,
#about h2,
#models .section-head h2,
#experience h2,
.architecture-banner h2,
.finance-section h2,
.finance-container h2,
#finance h2,
#masterplan h2,
#location h2,
#location .section-head h2,
#contact h2,
#contact .contact-info h2 {
  font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.07em !important;
}

h3,
#models .villa-card h3,
#experience .pillars h3,
#location h3,
.modal-sticky-header h2,
.modal-col-left h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  letter-spacing: 0.08em !important;
}

/* Montserrat se mantiene para cuerpo, precios, botones y UI */
p, span, a, li, label, input, textarea, button,
.lead, .villa-spec, .villa-price, .modal-price,
.nav-link-alt, .btn, .btn-reserve-alt,
.trust-item p, .stat-box p, .pillars p,
.section-head p, .contact-form, .footer-nav {
  font-family: 'Montserrat', sans-serif !important;
}


/* ===== CORRECCI???N GLOBAL DE TEXTO DE CUERPO EN M???VIL ===== */
@media (max-width: 768px) {

  /* Textos de introducci?³n / subt?­tulos de secci?³n */
  .hero-inner h1 {
    margin-bottom: 0.2rem !important;
  }
  .section-head p,
  #masterplan .section-head p,
  #about .section-head p,
  #models .section-head p,
  #location .section-head p,
  #contact .section-head p,
  #finance .section-head p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    max-width: 90vw !important;
    margin-inline: auto !important;
  }

  /* Texto del hero */
  .hero-inner .lead {
    font-size: 1.45rem !important;
    line-height: 1.6 !important;
    max-width: 90vw !important;
  }

  /* P?¡rrafos dentro de tarjetas de pilares / experiencia */
  .pillars p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  /* Notas de comunidad y masterplan */
  .mp-community-note,
  .mp-stats-note {
    font-size: 0.88rem !important;
    padding: 1rem 1.2rem !important;
    line-height: 1.65 !important;
  }

  /* Nota de esquema de financiaci?³n */
  .fin-scheme-note {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    padding: 0 1rem !important;
  }

  /* Tagline de ubicaci?³n */
  .location-tagline {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }

  /* Nota intro de formulario */
  .form-intro-note {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* Info de contacto */
  #contact .contact-info > p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  /* Precio en tarjetas de villa */
  .villa-price {
    font-size: 1.1rem !important;
  }

  /* Reserva en finanzas */
  .finance-reserve {
    font-size: 0.78rem !important;
  }
  .finance-reserve span {
    font-size: 0.9rem !important;
  }

  /* Stat box labels */
  .stat-box p {
    font-size: 0.88rem !important;
  }

  /* Trust items labels */
  .trust-item p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  /* Blockquotes / testimonios */
  blockquote {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }

  /* FAQ */
  .faq details {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  /* P?¡rrafos generales */
  p {
    font-size: 0.92rem;
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  .section-head p,
  #masterplan .section-head p,
  #about .section-head p,
  #models .section-head p,
  #location .section-head p,
  #contact .section-head p {
    font-size: 0.88rem !important;
  }

  p {
    font-size: 0.88rem;
  }

  .pillars p,
  .mp-community-note,
  .mp-stats-note,
  .fin-scheme-note,
  .form-intro-note {
    font-size: 0.85rem !important;
  }
}
/* ===== FIN CORRECCI?N GLOBAL ===== */
/* ===== EFECTO CLICK MODEL CARD ===== */
  
  /* ===== RESTAURACI?N DE ARMONÍA EN TARJETAS (VERSI?N FINAL) ===== */
  .villa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; align-items: stretch; }
  .villa-card { 
    background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; 
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(0,0,0,0.06); height: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); padding: 0 0 2rem 0; align-items: center; text-align: center;
  }
  .villa-card:hover { transform: translateY(-15px); box-shadow: 0 40px 80px rgba(0,0,0,0.15); }
  .villa-photo { width: 100%; height: 260px; margin-bottom: 2rem; }
  .villa-badge { 
    background: #1a2e28; color: #fff; padding: 6px 16px; border-radius: 30px; font-size: 0.65rem; 
    font-weight: 800; text-transform: uppercase; margin: 0 auto 1.2rem auto; letter-spacing: 1.5px;
    display: inline-block; width: fit-content;
  }
  .villa-card h3 { font-family: 'Oswald', sans-serif; font-size: 1.8rem; margin: 0 0 0.8rem 0; text-transform: uppercase; letter-spacing: 2px; color: #111; }
  .villa-desc-text { font-size: 0.83rem; line-height: 1.6; color: #666; margin: 0 1.5rem 1.5rem 1.5rem; min-height: 4.5rem; display: flex; align-items: center; justify-content: center; }
  .villa-price { font-family: 'Oswald', sans-serif; font-size: 1.8rem !important; color: var(--primary); margin: 0 0 0.5rem 0 !important; font-weight: 400 !important; }
  .plusvalia-tag { font-size: 0.65rem; color: #d4af37; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1.8rem; display: block; }
  .villa-card .btn { 
    background: var(--primary); color: #fff; padding: 14px 25px; border-radius: 40px; 
    text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 2.5px; 
    transition: 0.4s; width: calc(100% - 4rem); margin: auto 2rem 0 2rem; border: none;
  }
  .villa-card .btn:hover { background: #111; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: scale(1.03) !important; }
  /* ===== FIN RESTAURACI?N ===== */
  /* ===== MATRIX RESPONSIVE TRUST-BAR (POSICI?N ELEVADA 1.5CM) ===== */
  html body .trust-bar {
    padding: 0 !important;
    border-radius: 20px !important;
    max-width: 1100px !important;
    margin-inline: auto !important;
    background: #050505 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    margin-top: -2.5rem !important; /* SUBIDA 1.5CM ADICIONALES */
    position: relative !important;
    z-index: 100 !important;
  }
  html body .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }
  html body .trust-item {
    padding: 2.5rem 1rem !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
  }
  html body .trust-item:last-child {
    border-right: none !important;
  }
  /* ===== FIN MATRIX RESPONSIVE ===== */
  
  @media (max-width: 768px) {
    html body .trust-grid {
      grid-template-columns: repeat(2, 1fr) !important; /* 2x2 solo en m?³vil p?ºblico */
    }
    html body .trust-item:nth-child(even) {
      border-right: none !important;
    }
    html body .trust-item:nth-child(1),
    html body .trust-item:nth-child(2) {
      border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    }
  }
  /* Achicamos textos para que calcen estéticos */
  html body .trust-item h4 {
    font-size: clamp(2rem, 5vw, 2.5rem) !important;
    margin-bottom: 0.3rem !important;
  }
  html body .trust-item p {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.65) !important;
  }
  /* Reducción en Mobile extremo */
  @media (max-width: 480px) {
    html body .trust-item { padding: 1.5rem 0.5rem !important; }
  }
  /* ===== FIN MATRIX TRUST-BAR ===== */

  /* ===== MATRIX RESPONSIVE PILARES 2x2 ===== */
  /* Convertimos el contenedor en la "Caja Maestra" */
  html body #experience .pillars {
    gap: 0 !important;
    background: rgba(20, 20, 20, 0.6) !important;
    border: 1px solid rgba(197, 165, 71, 0.2) !important;
    border-radius: 16px !important;
    overflow: hidden;
    max-width: 900px;
    margin-inline: auto;
  }
  /* Limpiamos las tarjetas individuales para que luzcan como "celdas" */
  html body #experience .pillars article {
    background: #111111 !important;
    border: 1px solid rgba(197,165,71,0.15) !important;
    border-radius: 12px !important;
    padding: 2.5rem 1.5rem !important; /* Equilibrio: menos estiramiento vertical, más espacio horizontal para el texto */
    box-shadow: none !important;
    transform: none !important; /* Evitar que se rompa la matríz al hacer hover */
    transition: background 0.4s ease !important;
  }
  html body #experience .pillars article:hover {
    background: #1a1a1a !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    transform: none !important;
  }
  /* Dibujado de La Cruz (con bordes sutiles dorados) */
  html body #experience .pillars article:nth-child(1),
  html body #experience .pillars article:nth-child(2) {
    border-bottom: 1px solid rgba(197, 165, 71, 0.2) !important;
  }
  html body #experience .pillars article:nth-child(odd) {
    border-right: 1px solid rgba(197, 165, 71, 0.2) !important;
  }
  /* Textos y adaptabilidad en tabla */
  @media (max-width: 768px) {
    html body #experience .pillars {
      grid-template-columns: repeat(2, 1fr) !important; 
    }
    html body #experience .pillars article {
      padding: 1.5rem 1rem !important; /* Reducción de estiramiento vertical en tablet */
    }
  }
  @media (max-width: 480px) {
    html body #experience .pillars {
      grid-template-columns: repeat(2, 1fr) !important; /* Forzar el 2x2 en celulares */
    }
    html body #experience .pillars article {
      padding: 1.2rem 0.5rem !important; /* Reducción drástica del estiramiento vertical en móvil */
    }
    html body #experience .pillars article h3 {
      font-size: 1.15rem !important;
      margin-bottom: 0.5rem !important;
    }
    html body #experience .pillars p {
      font-size: 0.72rem !important;
      line-height: 1.4 !important;
    }
    html body #experience .pillars article .icon {
       transform: scale(0.8) !important;
       margin-bottom: 0.3rem !important;
    }
    html body #experience .pillars article:hover .icon {
       transform: scale(0.85) !important;
    }
  }
  /* ===== FIN MATRIX PILARES ===== */

  /* ===== REFINAMIENTOS DE UI SOLICITADOS ====== */
  /* Calculadora: Centrar textos en pantallas pequeñas */
  @media (max-width: 991px) {
    html body .premium-results { text-align: center !important; }
    html body .premium-results .res-item { align-items: center !important; }
  }

  /* Tablet y Mobile Generales */
  @media (max-width: 768px) {
    /* Ubicación: Forzar diseño horizontal (mapa izq, texto der) y a mitad de tamaño */
    html body .location-card {
      flex-direction: row !important;
      align-items: stretch !important;
      min-height: 260px !important; /* Más verticalidad para que no recorte el texto base */
      max-height: 320px !important;
      padding: 0 !important;
    }
    html body .map-container { flex: 1.1 !important; }
    html body .map-container iframe { height: 100% !important; object-fit: cover !important; }
    html body .location-details {
      flex: 1.2 !important; /* Un poco más de espacio para el texto */
      padding: 1.5rem 1rem !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
    }
    html body .location-details h3 { font-size: 1.05rem !important; margin-bottom: 0.5rem !important; }
    html body .location-details p { font-size: 0.75rem !important; line-height: 1.3 !important; }
    html body .loc-icon { margin-bottom: 5px !important; }
    html body .loc-icon svg { width: 22px !important; height: 22px !important; }

    html body .masterplan-card-img-bg {
      border-radius: 0 0 clamp(25px, 5vw, 50px) clamp(25px, 5vw, 50px) !important;
    }

    /* Contacto: Respiro adaptativo (Base Mobile) */
    html body #contact {
      padding: 3rem 1.2rem !important; /* Más reducido en móvil puro */
    }
    /* Añadido para estabilizar el formulario y evitar que se salga del borde derecho */
    html body .contact-form {
      padding: 2.5rem 1.5rem !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }
    html body .contact-form input,
    html body .contact-form textarea,
    html body .contact-form .btn {
      box-sizing: border-box !important;
      max-width: 100% !important;
    }
  }

  /* Específico para Tablet (Respiro intermedio prolongado) */
  @media (min-width: 481px) and (max-width: 1200px) {
    html body #contact {
      padding: 6rem 3rem !important; /* Más margen de respiro para Tablet */
    }
    html body .location-card {
      min-height: 280px !important;
      max-height: 350px !important;
    }
    
    /* Masterplan iPad: Estiramiento Vertical (Efecto Rectángulo Vertical) */
    html body #masterplan .masterplan-card {
      min-height: 850px !important; /* Estirado verticalmente */
      padding: 0; /* Más respiro arriba y abajo */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    /* Gafete Reservas iPad (Movido arriba de la tercera tarjeta - Modelo MIA) */
    html body .hero-reservation-badge {
      top: clamp(280px, 35vh, 320px) !important; /* Posicionado ~1cm arriba de la tarjeta */
      bottom: auto !important;
      right: 4.5% !important;
      padding: 0.8rem 1.6rem !important;
      z-index: 50 !important;
      transform: translateY(-10px); /* Ajuste de flotación */
    }
    
    /* ACTIVACION CARRUSEL BARAJA 3D PARA TABLETS */
    html body #models .villa-grid {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      padding: 2.5rem 0 3.5rem 0 !important;
      gap: 1.5rem !important;
      perspective: 1500px !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: pointer;
      user-select: none;
    }
    html body #models .villa-grid:active { cursor: default; }
    html body #models .villa-grid::-webkit-scrollbar { display: none; }

    html body #models .villa-card {
      flex: 0 0 360px !important; /* Forzar el tamaño arquitectónico de Escritorio */
      max-width: 360px !important;
      min-height: 520px;
      scroll-snap-align: center !important;
      transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease !important;
      opacity: 1;
      transform: rotateY(180deg) translateZ(-50px);
      margin: 0 !important;
      transform-style: preserve-3d;
      position: relative;
      cursor: pointer;
    }

    /* El frente de la tarjeta (Boca Arriba) */
    html body #models .villa-card > div,
    html body #models .villa-card > h3,
    html body #models .villa-card > p,
    html body #models .villa-card > span,
    html body #models .villa-card > a {
      backface-visibility: hidden !important;
    }

    /* Revelado: la tarjeta gira 180 grados para quedar boca arriba en el centro */
    html body #models .villa-card.active-card {
      opacity: 1;
      transform: rotateY(0deg) translateZ(50px);
      z-index: 30;
      box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    }
  }

  /* Específico para Celular Pequeño */
  @media (max-width: 480px) {
    /* Pilares: Centrado absoluto garantizado */
    html body #experience .pillars article {
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }
    /* Ubicación: Reducción extrema para sostener el diseño horizontal en teléfonos */
    html body .location-card { 
      min-height: 220px !important;
      max-height: 260px !important; 
    }
    html body .location-details { padding: 1rem 0.6rem !important; }
    html body .location-details h3 { font-size: 0.85rem !important; margin-bottom: 0.3rem !important; }
    html body .location-details p { font-size: 0.68rem !important; }
    html body .btn-phone { padding: 0.4rem 0.6rem !important; font-size: 0.55rem !important; gap: 4px !important; }
    html body .loc-icon svg { width: 18px !important; height: 18px !important; }
  }

/* ?????? iOS SAFARI: Prevent auto-zoom on form inputs ?????? */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ?????? iOS SAFARI FALLBACK: backdrop-filter not supported ?????? */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header,
  .site-header-alt,
  .overlay-nav-alt,
  .modal-overlay,
  .plan-viewer,
  .cinema-overlay,
  [class*="modal"] {
    background: rgba(5, 5, 5, 0.97) !important;
  }
}

/* ?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?
   RESPONSIVE HOTFIX ?? Mobile & Apple Devices
   Max coverage: 480px (iPhone SE) ?? 768px (iPad mini)
?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—?—? */

/* Contact Grid ?? Base responsive */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ???? 768px: Tablet portrait ???? */
@media (max-width: 768px) {

  /* Contact: stack vertical */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  /* Contact form: reduce padding */
  .contact-form {
    padding: 2rem 1.5rem !important;
  }

  /* Finance section padding */
  .finance-section {
    padding: 4rem 0 !important;
  }
  .finance-container {
    padding: 0 1.2rem !important;
  }

  /* Trust bar: 2x2 grid */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Amenities mosaic: 2 columns */
  .amenities-mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .mosaic-item-1 {
    grid-column: span 2 !important;
    height: 300px;
  }
  .mosaic-item-2 {
    grid-column: span 1 !important;
    height: 220px;
  }
  .mosaic-item-3,
  .mosaic-item-4 {
    grid-column: span 1 !important;
    height: 220px;
  }

  /* Modal villa: stack vertical */
  .modal-render-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: 300px auto !important;
  }
  .modal-col-left {
    grid-column: 1 !important;
    padding: 1.5rem !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  .modal-main-view {
    height: 280px !important;
    min-height: unset !important;
  }
  #modal-thumbs {
    height: 100px !important;
  }

  /* Sidebar plan viewer */
  #planSidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateY(100%) !important;
  }
  #planSidebar.active {
    transform: translateY(0) !important;
  }

  /* Fixed width elements */
  .calc-card {
    width: 100% !important;
  }
}

/* ???? 480px: iPhone SE / small phones ???? */
@media (max-width: 480px) {

  /* Hero h1 ?? single authoritative size */
  .hero-inner h1 {
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
    line-height: 0.95 !important;
  }
  .hero-inner .lead {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  /* Section padding: reduce laterals */
  .section {
    padding: 3.5rem 0 !important;
  }
  .container {
    padding: 0 1.1rem !important;
  }

  /* Finance section inner padding */
  .finance-section {
    padding: 3rem 0 !important;
  }
  .finance-container,
  .calc-card {
    padding: 1.2rem !important;
  }

  /* Trust bar: single column */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-item h4 {
    font-size: 1.8rem !important;
  }

  /* Amenities: single column */
  .amenities-mosaic {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .mosaic-item-1,
  .mosaic-item-2,
  .mosaic-item-3,
  .mosaic-item-4 {
    grid-column: span 1 !important;
    height: 160px !important;
    grid-row: span 1 !important;
    border-radius: 8px !important;
  }
  .mosaic-item-1 {
    grid-column: span 2 !important;
    height: 180px !important;
  }

  /* Villa cards: single column */
  .villa-grid {
    grid-template-columns: 1fr !important;
  }

  /* Masterplan card */
  .masterplan-card {
    height: 280px !important;
  }

  /* Buttons: full width on small screens */
  .cta-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.7rem !important;
  }
  .cta-row .btn,
  .cta-row a {
    width: calc(50% - 0.35rem) !important;
    max-width: calc(50% - 0.35rem) !important;
    padding: 0.85rem 0.9rem !important;
    font-size: 0.72rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Contact form padding */
  .contact-form {
    padding: 1.5rem 1rem !important;
  }

  /* Footer padding */
  #main-footer {
    padding: 4rem 1.2rem 3rem !important;
  }
  .footer-logo-big {
    font-size: 2rem !important;
    letter-spacing: 8px !important;
  }
  .footer-contact-row {
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  /* Modal full screen on small devices */
  .modal-content {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Overlay nav */
  /* Experience pillars: single column */
  .pillars {
    grid-template-columns: 1fr !important;
  }
  .experience-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Location card */
  .location-grid,
  .location-card {
    grid-template-columns: 1fr !important;
  }

  /* Architecture banner text */
  .arch-overlay-btn h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }
}

/* ???? MASTERPLAN CARD: Proporción Fija en Todos los Dispositivos ????
   La tarjeta amarilla se comporta como una imagen:
   siempre mantiene su forma, solo cambia de tamaño.
   Proporción 4:5 (ligeramente vertical) ?? idéntica en desktop, tablet y móvil.
???? */
/* ???? MASTERPLAN RESPONSIVE: 16:9 desktop ?? 4:3 tablet ?? auto mobile ???? */
#masterplan .masterplan-card {
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 780px !important;
  padding: 0;
  border-radius: clamp(20px, 3vw, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* Tablet: 4:3 */
@media (max-width: 1024px) {
  #masterplan .masterplan-card {
    aspect-ratio: 4 / 3 !important;
    max-height: 600px !important;
    border-radius: clamp(16px, 3vw, 32px) !important;
    padding: 0;
  }
}
/* Mobile: auto height, no aspect-ratio constraint */
@media (max-width: 768px) {
  #masterplan .masterplan-card {
    aspect-ratio: unset !important;
    height: auto !important;
    max-height: unset !important;
    padding: 0;
    border-radius: 24px !important;
  }
}
@media (max-width: 480px) {
  #masterplan .masterplan-card {
    padding: 0;
    border-radius: 18px !important;
  }
}

/* La imagen rellena exactamente el espacio disponible dentro del padding */
.masterplan-card-img-bg {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(12px, 3vw, 55px) !important;
  overflow: hidden !important;
}

/* Desactivar parallax en móvil/tablet ?? evita desbordamientos */
@media (max-width: 1024px) {
  .masterplan-card-img-bg::before {
    animation: none !important;
    transform: scale(1) !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  .mp-stats {
    padding: 1.5rem 5% !important;
  }
}

/* ???? Safe area padding for iPhone notch / home indicator ???? */
@supports (padding: max(0px)) {
  .site-header,
  .site-header-alt {
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* overlay safe-area handled by inner padding */
}


/* ???? i18n FONT NORMALIZATION: All languages use same typography as ES ???? */
[data-i18n="hero_title"],
h1[data-i18n="hero_title"] {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
}
[data-i18n="about_title"],
[data-i18n="models_title"],
[data-i18n="amenities_title"],
[data-i18n="mp_title"],
[data-i18n="experience_title"],
[data-i18n="fin_title"],
/* Prevent overflow on long translated strings */
.section-head h2,
.hero-inner h1 {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ══ Block 2/12 (originally lines 6890-7394) ══ */
/* MOSAICO DE AMENIDADES PREMIUM (Consolidado) */
      .amenities-mosaic {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 260px 200px 200px;
        gap: 1.5rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
      }
      .mosaic-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        background: #000;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      /* Fallback: si GSAP no actúa, CSS lo revela al entrar en viewport */
      .mosaic-item.in-view {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
      }
      .mosaic-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
        opacity: 0.3;
        transition: opacity 0.4s ease;
      }
      .mosaic-item:hover::after { opacity: 1; }
      .mosaic-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        display: block;
      }
      .mosaic-item:hover img { transform: scale(1.08); }
      
      .mosaic-tag {
        position: absolute;
        bottom: 20px; left: 20px;
        color: #fff;
        font-family: 'Bebas Neue', var(--font-display);
        font-size: 1.5rem;
        z-index: 2;
        opacity: 0.8;
        transform: translateY(0);
        transition: all 0.4s ease;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
      }
      .mosaic-item:hover .mosaic-tag { opacity: 1; transform: translateY(-5px); }

      /* Parque Central ?? arriba, ancho completo */
      .mosaic-item-1 { grid-column: 1 / 3; grid-row: 1; }
      /* Área Niños ?? col 1, fila 2 */
      .mosaic-item-3 { grid-column: 1; grid-row: 2; }
      /* Casa Club ?? col 1, fila 3 */
      .mosaic-item-4 { grid-column: 1; grid-row: 3; }
      /* Calles Privadas ?? col 2, filas 2+3, estirada hasta el borde de Casa Club */
      .mosaic-item-2 { grid-column: 2; grid-row: 2 / 4; }
      
      @media (max-width: 900px) {
        .amenities-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
        .mosaic-item-1 { grid-column: span 2; height: 350px; }
        .mosaic-item-2 { grid-column: span 1; height: 400px; }
        .mosaic-item-3 { grid-column: span 1; height: 200px; }
      }
      @media (max-width: 600px) {
        .amenities-mosaic { grid-template-columns: 1fr; }
        .mosaic-item-1, .mosaic-item-2, .mosaic-item-3 { grid-column: span 1; height: 300px; }
      }

      /* Desktop grande: composición editorial con una sola secuencia visual */
      @media (min-width: 1025px) {
        .amenities-mosaic {
          grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: minmax(208px, 1fr) minmax(208px, 1fr);
          grid-template-areas:
            "park street kids"
            "park street social";
          gap: 1.5rem;
          height: clamp(448px, 45vw, 608px);
          align-items: stretch;
        }

        .mosaic-item-1 {
          grid-area: park;
          height: 100%;
        }

        .mosaic-item-2 {
          grid-area: street;
          height: 100%;
        }

        .mosaic-item-3 {
          grid-area: kids;
          height: 100%;
        }

        .mosaic-item-4 {
          grid-area: social;
          height: 100%;
        }

        .architecture-banner {
          position: relative !important;
          overflow: hidden !important;
          background: #000 !important;
          background-image: none !important;
          background-attachment: scroll !important;
          padding: 0 !important;
          align-items: stretch !important;
          justify-content: stretch !important;
          box-sizing: border-box !important;
        }

        .architecture-banner::before {
          content: none !important;
          display: none !important;
        }

        .arch-overlay-btn {
          position: absolute !important;
          inset: 3rem 2rem 3rem 2rem !important;
          z-index: 1 !important;
          width: auto !important;
          height: auto !important;
          min-height: 0 !important;
          background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url('assets/aerial.webp') !important;
          background-size: cover !important;
          background-position: center center !important;
          background-repeat: no-repeat !important;
          background-attachment: scroll !important;
          border-radius: 0 !important;
          box-sizing: border-box !important;
        }

        #models {
          padding: 8rem 0 4rem !important;
        }

        #models .models-badge-wrap {
          position: absolute !important;
          top: clamp(15.5rem, 20vw, 18.5rem) !important;
          right: 5% !important;
          margin-top: 0 !important;
          padding-right: 0 !important;
          z-index: 12 !important;
        }

        #models .hero-reservation-badge {
          position: relative !important;
          top: auto !important;
          right: auto !important;
          bottom: auto !important;
          left: auto !important;
          padding: 0.85rem 1.55rem !important;
          border-radius: 12px !important;
        }

        #models .hero-reservation-badge span {
          font-size: 0.72rem !important;
          margin-bottom: 0.22rem !important;
        }

        #models .hero-reservation-badge strong {
          font-size: 1.7rem !important;
        }

        #testimonios {
          padding: clamp(3.5rem, 5vw, 5.5rem) 0 !important;
        }

        #testimonios .section-head {
          margin-bottom: 2.1rem !important;
        }

        #testimonios .section-head h2 {
          font-size: clamp(1.7rem, 2.9vw, 2.45rem) !important;
          margin-bottom: 0.55rem !important;
        }

        #testimonios .section-head p {
          font-size: 0.86rem !important;
          line-height: 1.55 !important;
          max-width: 500px !important;
        }

        .t-desktop-grid {
          grid-template-columns: repeat(3, minmax(0, 0.86fr)) !important;
          gap: 1rem !important;
          justify-content: center !important;
        }

        .t-card {
          padding: 0.95rem !important;
          border-radius: 12px !important;
        }

        .t-card > div:first-child {
          font-size: 0.8rem !important;
          margin-bottom: 0.45rem !important;
        }

        .t-card > p {
          font-size: 0.75rem !important;
          line-height: 1.48 !important;
        }

        .t-card > div:last-child {
          gap: 0.55rem !important;
          padding-top: 0.65rem !important;
        }

        .t-card > div:last-child > div:first-child {
          width: 31px !important;
          height: 31px !important;
          font-size: 0.9rem !important;
        }

        .t-card > div:last-child p {
          font-size: 0.81rem !important;
        }

        .t-card > div:last-child span {
          font-size: 0.54rem !important;
          letter-spacing: 1.4px !important;
          padding: 0.14rem 0.42rem !important;
        }
      }

      .partners-marquee-section {
        background: #0d0d0d;
        padding: 3rem 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }

      .partners-marquee-container {
        display: flex;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        /* Efecto Fade de desvanecimiento premium interno */
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      }
      .partners-marquee-track {
        display: flex;
        align-items: center;
        gap: 5rem;
        animation: marqueeScroll 40s linear infinite;
        will-change: transform;
        padding-right: 5rem;
      }
      .partners-marquee-track.reverse {
        animation: marqueeScrollReverse 45s linear infinite;
        /* Un poco de gap visual respecto a la fila de arriba */
        margin-top: 2.5rem; 
      }
      .partners-marquee-container:hover .partners-marquee-track {
        animation-play-state: paused;
      }
      .partner-logo-item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .partner-logo-item img {
        height: clamp(35px, 4vw, 50px);
        width: auto;
        object-fit: contain;
        filter: grayscale(100%) brightness(200%) opacity(0.5);
        transition: all 0.4s ease;
      }
      .partner-logo-item:hover img {
        filter: grayscale(0%) brightness(100%) opacity(1) drop-shadow(0 0 10px rgba(197, 165, 71, 0.4));
        transform: scale(1.05);
      }
      @keyframes marqueeScroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } 
      }
      @keyframes marqueeScrollReverse {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0); } 
      }
      @media (max-width: 768px) {
        .partners-marquee-track {
          animation-duration: 25s;
          gap: 3rem;
          padding-right: 3rem;
        }
        .partners-marquee-track.reverse {
          animation-duration: 28s;
          margin-top: 1.5rem;
        }
        .partner-logo-item img {
          height: 30px;
        }
      }
      .partner-logo-plaza {
        height: clamp(22px, 2.2vw, 32px) !important;
      }
      @media (max-width: 768px) {
        .partner-logo-plaza {
          height: 20px !important;
        }
      }

      /* GALERÍA INMERSIVA DE AMENIDADES */
      #amenity-gallery {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.92);
        -webkit-backdrop-filter: blur(25px);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        display: none; align-items: center; justify-content: center;
        z-index: 200000; opacity: 0; transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      }
      #amenity-gallery.active { display: flex; opacity: 1; }
      
      #gallery-main-img {
        max-width: 80%; max-height: 80vh;
        border-radius: 12px;
        box-shadow: 0 40px 100px rgba(0,0,0,0.8);
        border: 1px solid rgba(255,255,255,0.1);
        transform: scale(0.9); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      }
      #amenity-gallery.active #gallery-main-img { transform: scale(1); }

      .gallery-close {
        position: absolute; top: 40px; right: 40px;
        background: rgba(255,255,255,0.1); color: #fff;
        border: none; width: 50px; height: 50px; border-radius: 50%;
        font-size: 1.5rem; cursor: pointer; transition: 0.3s;
        display: flex; align-items: center; justify-content: center;
      }
      .gallery-close:hover { background: var(--primary); color: #000; transform: rotate(90deg); }

      .gallery-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: rgba(255,255,255,0.05); color: #fff;
        border: none; width: 60px; height: 60px; border-radius: 50%;
        font-size: 1.2rem; cursor: pointer; transition: 0.3s;
        display: flex; align-items: center; justify-content: center;
        z-index: 10;
      }
      .gallery-nav:hover { background: var(--primary); color: #000; }
      .gallery-nav.prev { left: 40px; }
      .gallery-nav.next { right: 40px; }

      .premium-calc {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        background: rgba(20, 20, 20, 0.6);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(197, 165, 71, 0.15);
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 20px 50px rgba(0,0,0,0.4);
      }
      .calc-radio-group {
        display: flex;
        gap: 0.8rem;
        background: rgba(0,0,0,0.5);
        padding: 5px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.05);
      }
      .calc-pill {
        flex: 1;
        background: transparent;
        color: #888;
        border: none;
        padding: 7px 4px;
        border-radius: 5px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.72rem;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .calc-pill:hover {
        color: #fff;
        background: rgba(255,255,255,0.05);
      }
      .calc-pill.active {
        background: linear-gradient(135deg, #c5a547 0%, #ecd4a1 50%, #c5a547 100%);
        color: #111;
        box-shadow: 0 4px 15px rgba(197, 165, 71, 0.3);
      }
      .premium-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: rgba(255,255,255,0.1);
        outline: none;
        margin-top: 15px;
      }
      .premium-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #c5a547;
        cursor: pointer;
        border: 3px solid #111;
        box-shadow: 0 0 10px rgba(197, 165, 71, 0.5);
        transition: transform 0.2s;
      }
      .premium-slider::-webkit-slider-thumb:hover {
        transform: scale(1.2);
      }
      .calc-entry-display {
        color: #ffffff;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2rem;
        line-height: 1;
        letter-spacing: 1px;
        text-shadow: 0 0 25px rgba(255,255,255,0.15);
      }
      .premium-results {
        background: rgba(0,0,0,0.8);
        border-radius: 15px;
        padding: 2.5rem;
        border: 1px solid rgba(197,165,71, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center !important;
      }
      .calc-res-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
      }
      .res-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center !important;
      }
      .res-item.full-row {
        grid-column: 1 / -1;
      }
      .res-label {
        font-size: 0.62rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .res-label.highlight {
        color: #fff;
        font-weight: 600;
        font-size: 0.72rem;
      }
      .res-val {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.4rem;
        color: #fff;
        letter-spacing: 1px;
      }
      .res-val.giant {
        font-size: 3.5rem;
        color: #c5a547;
        line-height: 1;
        text-shadow: 0 0 25px rgba(197, 165, 71, 0.3);
        margin: 0.3rem 0;
      }
      .res-item.suggest-income {
        display: none !important;
      }
      .res-item.suggest-income .res-val.accent {
        font-size: 1.2rem;
        color: #ecd4a1;
      }
      @media (max-width: 991px) {
        .premium-calc { padding: 2rem; gap: 2rem; }
        .res-val.giant { font-size: 2.2rem; }
      }
      @media (max-width: 768px) {
        .premium-calc { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
        .premium-results { padding: 1rem; margin-top: 0.5rem; }
        .calc-radio-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
        .calc-pill { flex: 1 1 22%; padding: 0.4rem 0.2rem; font-size: 0.65rem; }
        .res-val.giant { font-size: 2rem; }
        .res-item.suggest-income .res-val.accent { font-size: 1rem; }
        .btn-metal-gold { width: auto; text-align: center; display: inline-flex !important; padding: 0.65rem 1.2rem !important; margin: 0 auto !important; font-size: 0.7rem !important; }
      }
      /* Footer styles consolidated ?? see inline style block after </footer> */


/* ══ Block 3/12 (originally lines 7720-7729) ══ */
@media (max-width: 900px) {
            #avance .container > div[style*="grid-template-columns:repeat(4"] {
              grid-template-columns: repeat(2, 1fr) !important;
            }
          }
          @media (max-width: 480px) {
            #avance .container > div[style*="grid-template-columns:repeat(4"] {
              grid-template-columns: 1fr !important;
            }
          }


/* ══ Block 4/12 (originally lines 7840-7927) ══ */
/* ???? PROCESO DE COMPRA ???? */
        .proceso-step {
          display:flex;flex-direction:column;align-items:center;text-align:center;
          opacity:0;transform:translateY(20px);
          transition:opacity 1s ease, transform 1s ease;
        }
        .proceso-step.step-visible {
          opacity:1;transform:translateY(0);
        }
        .proceso-node {
          width:108px;height:108px;border-radius:50%;
          background:#080808;
          border:2px solid rgba(197,165,71,0.06);
          display:flex;align-items:center;justify-content:center;
          margin-bottom:1.8rem;position:relative;
          transition:border-color 0.9s ease, box-shadow 0.9s ease, background 0.9s ease;
        }
        .proceso-node.node-active {
          background:#0d0d0d;
          border-color:var(--primary);
          box-shadow:0 0 25px rgba(197,165,71,0.25), 0 0 50px rgba(197,165,71,0.08);
        }
        .proceso-node svg {
          opacity:0.08;
          transition:opacity 0.9s ease;
          position:relative;z-index:1;
        }
        .proceso-node.node-active svg { opacity:1; }

        /* Número ?? gira y aparece en dorado */
        .proceso-num {
          position:absolute;
          bottom:-14px;left:50%;
          transform:translateX(-50%) rotateY(90deg);
          font-family:'Bebas Neue',sans-serif;
          font-size:1rem;letter-spacing:2px;
          color:var(--primary);
          background:#0a0a0a;
          border:1px solid rgba(197,165,71,0.4);
          border-radius:100px;
          padding:0.15rem 0.7rem;
          opacity:0;
          transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
          z-index:2;
          white-space:nowrap;
        }
        .proceso-node.node-active .proceso-num {
          transform:translateX(-50%) rotateY(0deg);
          opacity:1;
        }

        /* Línea base ?? apagada */
        .proceso-line-track {
          position:absolute;top:54px;
          left:calc(12.5% + 54px);right:calc(12.5% + 54px);
          height:2px;background:rgba(197,165,71,0.08);z-index:0;
          border-radius:2px;overflow:hidden;
        }
        /* Línea de energía ?? avanza progresivamente, no en loop */
        .proceso-line-fill {
          height:100%;
          width:0%;
          background:linear-gradient(90deg, var(--primary), #ecd4a1);
          box-shadow:0 0 8px rgba(197,165,71,0.5);
          border-radius:2px;
          transition:width 1.1s cubic-bezier(0.4,0,0.2,1);
        }

        .proceso-title {
          font-family:'Bebas Neue',sans-serif;font-size:1.6rem;
          color:rgba(255,255,255,0.3);letter-spacing:2px;margin-bottom:0.8rem;
          transition:color 0.5s ease;
        }
        .proceso-step.step-visible .proceso-title { color:#fff; }
        .proceso-desc {
          font-size:0.88rem;color:rgba(255,255,255,0.2);
          line-height:1.8;font-weight:300;max-width:200px;
          transition:color 0.5s ease;
        }
        .proceso-step.step-visible .proceso-desc { color:rgba(255,255,255,0.55); }

        @media(max-width:768px){
          .proceso-grid { grid-template-columns:repeat(2,1fr) !important; }
          .proceso-line-track { display:none; }
        }
        @media(max-width:480px){
          .proceso-grid { grid-template-columns:1fr !important; }
        }


/* ══ Block 5/12 (originally lines 8396-8450) ══ */
@media (max-width: 768px) {
  #blog {
    padding: 1.5rem 0 !important;
  }
  #blog .section-head {
    margin-bottom: 1rem !important;
    padding: 0 1rem;
  }
  #blog .section-head h2 {
    font-size: 1.8rem !important;
  }
  #blog .section-head p {
    font-size: 0.92rem !important;
  }
  #blog .blog-grid-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 1rem 1rem !important;
    scrollbar-width: none !important;
  }
  #blog .blog-grid-wrap::-webkit-scrollbar {
    display: none !important;
  }
  #blog > .container > div[style*="grid-template-columns:repeat(3,1fr)"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.8rem !important;
    width: max-content !important;
  }
  #blog article.reveal {
    min-width: 260px !important;
    max-width: 260px !important;
    flex-shrink: 0 !important;
  }
  #blog article div[style*="height:85px"] {
    height: 75px !important;
  }
  #blog article h3 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  #blog article p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
  #blog article span {
    font-size: 0.72rem !important;
  }
  #blog article div[style*="padding:0.75rem"] {
    padding: 0.75rem !important;
  }
  #blog .container > div[style*="margin-top"] {
    margin-top: 1rem !important;
  }
}


/* ══ Block 6/12 (originally lines 8544-8553) ══ */
.blog-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 25px 60px rgba(0,0,0,0.1) !important;
          border-color: rgba(197,165,71,0.3) !important;
        }
        @media (max-width: 900px) {
          #blog .container > div[style*="grid-template-columns:repeat(3"] {
            grid-template-columns: 1fr !important;
          }
        }


/* ══ Block 7/12 (originally lines 8635-8663) ══ */
.faq-accordion { display:flex; flex-direction:column; gap:0; }
        .faq-item { border-bottom:1px solid #eee; }
        .faq-item:first-child { border-top:1px solid #eee; }
        .faq-question {
          width:100%; display:flex; align-items:center; justify-content:space-between;
          padding:1.3rem 0; background:none; border:none; cursor:pointer;
          font-family:var(--font-body); font-size:1rem; font-weight:600;
          color:var(--title); text-align:left; transition:color 0.3s ease;
        }
        .faq-question:hover { color:var(--primary); }
        .faq-question svg {
          flex-shrink:0; margin-left:1rem; color:var(--primary);
          transition:transform 0.3s ease;
        }
        .faq-question[aria-expanded="true"] svg { transform:rotate(180deg); }
        .faq-answer {
          max-height:0; overflow:hidden;
          transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s ease;
          padding:0 0;
        }
        .faq-answer.open { max-height:300px; padding:0 0 1.2rem 0; }
        .faq-answer p {
          font-family:var(--font-body); font-size:0.92rem; line-height:1.7;
          color:#666; margin:0;
        }
        @media (max-width:768px) {
          .faq-question { font-size:0.9rem; padding:1.1rem 0; }
          .faq-answer p { font-size:0.85rem; }
        }


/* ══ Block 8/12 (originally lines 8691-8901) ══ */
.locv2-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 2rem;
        }
        .locv2-head {
          text-align: center;
          margin-bottom: 3rem;
        }
        .locv2-head .eyebrow {
          font-family: 'Montserrat', sans-serif;
          font-size: 0.7rem;
          letter-spacing: 5px;
          color: var(--primary);
          text-transform: uppercase;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 1rem;
        }
        .locv2-head .eyebrow span {
          width: 30px;
          height: 1px;
          background: var(--primary);
          display: inline-block;
        }
        .locv2-head h2 {
          font-family: 'Bebas Neue', sans-serif;
          font-size: clamp(2.5rem, 5vw, 4rem);
          color: #fff;
          letter-spacing: 3px;
          margin: 0 0 0.5rem;
        }
        .locv2-head p {
          font-family: 'Montserrat', sans-serif;
          font-size: 0.95rem;
          color: rgba(255,255,255,0.45);
          max-width: 500px;
          margin: 0 auto;
        }
        .locv2-panels {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          border: 1px solid rgba(197,165,71,0.45);
          border-radius: 20px;
          overflow: hidden;
          min-height: 480px;
          height: auto;
          box-shadow:
            0 0 0 1px rgba(197,165,71,0.1),
            0 8px 40px rgba(0,0,0,0.6),
            0 0 60px rgba(197,165,71,0.08);
        }
        /* Etiquetas de panel */
        .locv2-panel-label {
          position: absolute;
          top: 1rem;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0,0,0,0.65);
          border: 1px solid rgba(197,165,71,0.4);
          color: var(--primary);
          font-family: 'Montserrat', sans-serif;
          font-size: 0.6rem;
          font-weight: 700;
          letter-spacing: 3px;
          text-transform: uppercase;
          padding: 0.3rem 1rem;
          border-radius: 100px;
          white-space: nowrap;
          z-index: 4;
          backdrop-filter: blur(6px);
        }
        /* ???? Panel Ken Burns ???? */
        .locv2-kb {
          position: relative;
          overflow: hidden;
          background: #000;
          min-height: 480px;
        }
        .locv2-kb .kb-slide {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          opacity: 0;
          will-change: transform, opacity;
        }
        .locv2-kb .kb-slide.kb-visible {
          opacity: 1;
        }
        .locv2-kb .kb-slide.kb-animating {
          animation: kbZoom 2000ms linear forwards;
        }
        @keyframes kbZoom {
          0%   { transform: scale(1)    translate3d(0,0,0); }
          20%  { transform: scale(1.08) translate3d(-0.7%,-1.4%,0); }
          58%  { transform: scale(1.11) translate3d(-1.1%,-2.2%,0); }
          100% { transform: scale(1.2)  translate3d(-1.8%,-3.4%,0); }
        }
        .locv2-kb .kb-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%),
            linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1) 40%);
          z-index: 2;
        }
        .locv2-kb .kb-label {
          position: absolute;
          bottom: 2.5rem;
          right: 1.5rem;
          left: auto;
          text-align: right;
          z-index: 3;
        }
        .locv2-kb .kb-label h3 {
          font-family: 'Bebas Neue', sans-serif;
          font-size: 2.2rem;
          color: #fff;
          letter-spacing: 3px;
          margin: 0 0 0.3rem;
        }
        .locv2-kb .kb-label p {
          font-family: 'Montserrat', sans-serif;
          font-size: 0.78rem;
          color: rgba(255,255,255,0.65);
          letter-spacing: 2px;
          text-transform: uppercase;
          margin: 0;
        }
        .locv2-kb .kb-badge {
          position: absolute;
          top: 1.2rem;
          left: 1.2rem;
          background: rgba(197,165,71,0.15);
          border: 1px solid rgba(197,165,71,0.4);
          color: var(--primary);
          font-family: 'Montserrat', sans-serif;
          font-size: 0.6rem;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 0.3rem 0.8rem;
          border-radius: 100px;
          z-index: 3;
        }
        /* Divider dorado */
        .locv2-divider {
          width: 2px;
          background: linear-gradient(to bottom, transparent, rgba(197,165,71,0.8) 30%, rgba(197,165,71,0.8) 70%, transparent);
          position: absolute;
          top: 0; bottom: 0;
          left: 50%;
          z-index: 5;
          pointer-events: none;
          box-shadow: 0 0 8px rgba(197,165,71,0.4);
        }
        /* ???? Panel Google Maps ???? */
        .locv2-map {
          position: relative;
          overflow: hidden;
          background: #111;
          min-height: 480px;
        }
        .locv2-map iframe {
          width: 100%;
          height: 100%;
          border: none;
          display: block;
          filter: grayscale(20%) brightness(0.9);
        }
        .locv2-map .map-cta {
          position: absolute;
          bottom: 1.5rem;
          left: 50%;
          transform: translateX(-50%);
          z-index: 3;
          white-space: nowrap;
        }
        .locv2-map .map-cta a {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: linear-gradient(135deg, #c5a547, #ecd4a1, #c5a547);
          color: #111;
          font-family: 'Montserrat', sans-serif;
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 0.8rem 1.6rem;
          border-radius: 4px;
          text-decoration: none;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          box-shadow: 0 4px 20px rgba(197,165,71,0.3);
        }
        .locv2-map .map-cta a:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 30px rgba(197,165,71,0.5);
        }
        /* Responsive */
        @media(max-width: 768px) {
          .locv2-panels {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
          }
          .locv2-kb { height: 320px !important; min-height: 320px !important; display: block !important; position: relative !important; }
          .locv2-map { height: 300px; min-height: 300px; }
          .locv2-divider { display: none; }
        }


/* ══ Block 9/12 (originally lines 9052-9100) ══ */
@media (max-width: 768px) {
  #contact {
    padding: 2.5rem 0 !important;
    overflow: hidden !important;
  }
  .contact-grid {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-actions {
    margin-top: 1.2rem !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-actions .btn {
    padding: 0.65rem 0.6rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.5px !important;
    gap: 5px !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
  }
  .contact-actions .btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }
  .contact-form {
    padding: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
  }
}


/* ══ Block 10/12 (originally lines 9290-9451) ══ */
/* === FOOTER ESTRUCTURA BLOQUES ?? ESTILO PRESSREADER ADAPTADO === */
    #main-footer {
      background: #080808 !important;
      color: #fff !important;
      padding: 5rem 0 3rem 0 !important;
      border-top: 1px solid rgba(197, 165, 71, 0.1) !important;
      font-family: 'Montserrat', sans-serif !important;
      margin-top: 0 !important;
    }
    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 5%;
    }
    .footer-grid-blocks {
      display: grid;
      grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.3fr;
      align-items: start;
      gap: 2.5rem;
      margin-bottom: 4rem;
    }
    .footer-brand-img {
      height: 26px;
      width: auto;
      object-fit: contain;
      opacity: 0.95;
      filter: brightness(0) invert(1);
      transition: all 0.4s ease;
      cursor: pointer;
      margin-bottom: 1.5rem;
    }
    .footer-brand-img:hover {
      filter: brightness(0) saturate(100%) invert(69%) sepia(50%) saturate(545%) hue-rotate(5deg) brightness(92%) contrast(89%);
      transform: scale(1.05);
    }
    .footer-micro-tagline {
      font-size: 0.78rem !important;
      color: rgba(255,255,255,0.6) !important;
      line-height: 1.8;
      letter-spacing: 0.5px;
      font-weight: 400;
      margin-bottom: 1.5rem;
      text-align: left;
    }
    .footer-region-label {
      font-size: 0.65rem;
      letter-spacing: 2.5px;
      color: #c5a547;
      font-weight: 700;
      opacity: 0.8;
    }
    .footer-block-title {
      font-size: 0.62rem;
      letter-spacing: 2px;
      color: #ffffff;
      margin-bottom: 1rem;
      text-transform: uppercase;
      font-weight: 700;
    }
    .footer-link-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-link-list li {
      margin-bottom: 0.45rem;
    }
    .footer-link-list a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 0.72rem;
      transition: all 0.3s ease;
      font-weight: 400;
      letter-spacing: 0.3px;
    }
    .footer-link-list a:hover {
      color: #c5a547;
      padding-left: 5px;
    }
    .contact-list li {
      margin-bottom: 1.5rem;
    }
    .micro-label {
      display: block;
      font-size: 0.6rem;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.3);
      text-transform: uppercase;
      margin-bottom: 0.3rem;
    }
    .footer-bottom-v2 {
      border-top: 1px solid rgba(255,255,255,0.05);
      margin-top: -1.5rem;
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.6rem;
      text-align: center;
    }
    .footer-copy-legal {
      font-size: 0.68rem;
      color: rgba(255,255,255,0.35);
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .footer-dev-signature {
      font-size: 0.72rem;
      letter-spacing: 1px;
    }
    .dev-link-gold {
      color: #c5a547;
      text-decoration: none;
      font-weight: 700;
      margin-left: 5px;
      transition: opacity 0.3s;
    }
    .dev-link-gold:hover {
      opacity: 0.8;
    }
    @media (max-width: 1024px) {
      .footer-grid-blocks {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
        align-items: start;
      }
      .footer-block.brand-block { grid-column: 1; grid-row: 1; }
      .footer-block.contact-block { grid-column: 2; grid-row: 1; }
      .footer-block.menu-block-a { grid-column: 1; grid-row: 2; }
      .footer-block.menu-block-b { grid-column: 2; grid-row: 2; }
      .footer-block.recursos-block { grid-column: 1; grid-row: 3; }
      .menu-block-b .footer-block-title { display: none !important; }
    }
    @media (max-width: 768px) {
      .footer-grid-blocks {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
        align-items: start;
      }
      .footer-block.brand-block { grid-column: 1; grid-row: 1; text-align: left; }
      .footer-block.contact-block { grid-column: 2; grid-row: 1; }
      .footer-block.menu-block-a { grid-column: 1; grid-row: 2; }
      .footer-block.menu-block-b { grid-column: 2; grid-row: 2; }
      .footer-block.recursos-block { grid-column: 1; grid-row: 3; }
      .menu-block-b .footer-block-title { display: none !important; }
      .footer-micro-tagline { text-align: left; }
      .footer-bottom-v2 { flex-direction: column; text-align: center; }
      .footer-link-list a:hover { padding-left: 0; }
      .footer-block-title { text-align: left; }
      .footer-recursos-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
      }
    }
    @media (max-width: 480px) {
      .footer-grid-blocks {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
      }
    }


/* ══ Block 11/12 (originally lines 10329-10556) ══ */
/* ???? BASE: Contact grid (override any inline) ???? */
.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: start !important;
}

/* ???? 768px: Tablet Portrait ???? */
@media (max-width: 768px) {

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .contact-form {
    padding: 2rem 1.5rem !important;
  }
  #contact {
    padding: 5rem 0 !important;
  }

  /* Hero */
  .hero-inner h1 {
    font-size: clamp(3.2rem, 11vw, 5rem) !important;
    line-height: 0.93 !important;
  }

  /* Architecture banner: compact card on phone */
  .architecture-banner {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 1rem !important;
    background: transparent !important;
  }
  .architecture-banner::before {
    content: none !important;
    display: none !important;
  }
  .arch-overlay-btn {
    min-height: 260px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.18)), url('assets/aerial.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 1.25rem !important;
  }
  .arch-overlay-btn h2 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    max-width: 92% !important;
  }
  .play-trigger {
    margin-top: 1.2rem !important;
    gap: 0.55rem !important;
  }
  .play-trigger svg {
    width: 56px !important;
    height: 56px !important;
    padding: 14px !important;
  }
  .play-trigger span {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
  }

  /* Finance */
  .finance-section { padding: 4rem 0 !important; }
  .finance-container { padding: 0 1.5rem !important; }
  .calc-card {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 1.8rem !important;
  }

  /* Trust bar */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .trust-item {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 2rem 1.2rem !important;
  }

  /* Masterplan */
  .masterplan-card { height: auto !important; }

  /* Amenities mosaic */
  .amenities-mosaic {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .mosaic-item-1 { grid-column: span 2 !important; height: 300px !important; }
  .mosaic-item-2 { grid-column: span 1 !important; height: 240px !important; }
  .mosaic-item-3,
  .mosaic-item-4 { grid-column: span 1 !important; height: 200px !important; }

  /* Villa modals: stack vertical */
  .modal-render-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: 280px auto !important;
    height: auto !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
  }
  .modal-col-left {
    grid-column: 1 !important;
    padding: 1.5rem !important;
  }
  .modal-main-view { height: 260px !important; }
  #modal-thumbs { height: 90px !important; }

  /* Pillars / Experience */
  .experience-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .pillars {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Location */
  .location-grid,
  #location .reveal > a {
    grid-template-columns: 1fr !important;
  }

  /* Plan sidebar: slide from bottom */
  #planSidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: 85dvh !important;
    transform: translateY(100%) !important;
  }
  #planSidebar.active {
    transform: translateY(0) !important;
  }

  /* Fixed px widths */
  .calc-card, .calc-inputs, .calc-results {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
}

/* ???? 480px: iPhone SE / iPhone mini ???? */
@media (max-width: 480px) {

  /* Global container */
  .container {
    padding: 0 1.1rem !important;
  }
  .section {
    padding: 3.5rem 0 !important;
  }

  /* Hero */
  .hero-inner h1 {
    font-size: clamp(2.8rem, 12vw, 4rem) !important;
    line-height: 0.93 !important;
  }
  .hero-inner .lead {
    font-size: 0.88rem !important;
    max-width: 100% !important;
  }
  .cta-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.65rem !important;
  }
  .cta-row .btn,
  .cta-row a {
    width: calc(50% - 0.325rem) !important;
    max-width: calc(50% - 0.325rem) !important;
    padding: 0.75rem 0.8rem !important;
    font-size: 0.68rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Finance */
  .finance-section { padding: 3rem 0 !important; }
  .finance-container { padding: 0 1rem !important; }
  .calc-card { padding: 1.2rem !important; }
  .trust-item h4 { font-size: 1.7rem !important; }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Amenities: single column */
  .amenities-mosaic {
    grid-template-columns: 1fr !important;
  }
  .mosaic-item-1,
  .mosaic-item-2,
  .mosaic-item-3,
  .mosaic-item-4 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    height: 220px !important;
  }

  /* Models */
  .villa-grid {
    grid-template-columns: 1fr !important;
  }

  /* Masterplan */
  .masterplan-card { height: auto !important; }
  .masterplan-wrapper .section-head p {
    font-size: 0.9rem !important;
  }

  /* Pillars: single column */
  .pillars {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Contact */
  #contact { padding: 4rem 0 !important; }
  .contact-form { padding: 1.5rem 1rem !important;
  }
}


/* ══ Block 12/12 (originally lines 10613-10756) ══ */
/* ══ CONTACT NUCLEAR FIX — WINS EVERYTHING ══ */
@media (max-width: 768px) {
  html body #contact,
  html body section#contact {
    padding: 2.5rem 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #contact .container.contact-grid,
  html body .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
  html body .contact-form,
  html body form#contact-form {
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .contact-form input,
  html body .contact-form textarea,
  html body .contact-form select,
  html body .contact-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
  }
  html body .contact-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }
  html body .contact-actions a.btn {
    flex: 1 1 0 !important;
    max-width: 50% !important;
    padding: 0.65rem 0.5rem !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    gap: 4px !important;
  }
  html body .contact-actions a.btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }
}
/* ══ FIN CONTACT NUCLEAR FIX ══ */

/* ══ ACCESSIBILITY: FOCUS STATES ══ */
*:focus-visible {
  outline: 2px solid var(--primary, #c5a547);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Buttons and links */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary, #c5a547);
  outline-offset: 3px;
}

/* Dark backgrounds need brighter outline */
.site-header-alt *:focus-visible,
#avance *:focus-visible,
#proceso *:focus-visible,
#location *:focus-visible,
footer *:focus-visible {
  outline-color: #ecd4a1;
}

/* Modal close buttons */
.modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 50%;
}

/* Nav links in menu overlay */
.nav-link-alt:focus-visible {
  outline-color: var(--primary, #c5a547);
  outline-offset: 5px;
}

/* FAQ accordion buttons */
.faq-question:focus-visible {
  outline-offset: -2px;
}

/* Skip link for screen readers (hidden, shown on focus) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary, #c5a547);
  color: #111;
  padding: 0.8rem 2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 8px 8px;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 0;
}
/* ══ FIN ACCESSIBILITY ══ */

/* ══════════════════════════════════════════════════════════════
   TABLET / iPAD RESPONSIVE FIXES (768px – 1024px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* ── GLOBAL ── */
  .container {
    padding: 0 2.5rem !important;
  }
  .section {
    padding: 4rem 0 !important;
  }

  /* ── HERO ── */
  #hero .hero-inner h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
  }
  #hero .hero-inner .lead {
    font-size: 0.95rem !important;
    max-width: 85% !important;
  }

  /* ── TRUST BAR ── */
  .trust-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }
  .trust-item h4 {
    font-size: 1.8rem !important;
  }
  .trust-item p {
    font-size: 0.72rem !important;
  }

  /* ── ABOUT ── */
  #about .section-head p {
    font-size: 0.95rem !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }

  /* ── AMENITIES MOSAIC ── */
  .amenities-mosaic {
    gap: 0.8rem !important;
  }

  /* ── MODELS ── */
  #models .villa-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }
  #models .villa-card {
    min-height: auto !important;
  }

  /* ── MASTERPLAN ── */
  #masterplan .section-head p {
    font-size: 0.92rem !important;
    max-width: 85% !important;
    margin: 0 auto !important;
  }

  /* ── PILARES (EXPERIENCE) ── */
  #experience {
    padding: 5rem 0 3rem !important;
  }
  #experience h2 {
    font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  }
  #experience .reveal > p {
    font-size: 0.95rem !important;
    max-width: 80% !important;
  }
  .pillars {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  .pillars article,
  .pillar-card {
    padding: 1.8rem 1.5rem !important;
  }
  #experience .pillars h3 {
    font-size: 0.95rem !important;
  }
  #experience .pillars p {
    font-size: 0.85rem !important;
  }

  /* ── FINANCE / CALCULATOR ── */
  #finance {
    padding: 4rem 0 !important;
  }
  .premium-calc {
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  /* ── AVANCE DE OBRAS ── */
  #avance .container {
    max-width: 90% !important;
  }

  /* ── PROCESO DE COMPRA ── */
  .proceso-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* ── TESTIMONIOS ── */
  #testimonios {
    padding: 3rem 2rem !important;
  }

  /* ── BLOG ── */
  #blog > .container > div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.2rem !important;
  }

  /* ── LOCATION / UBICACIÓN ── */
  .locv2-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* ── CONTACT ── */
  #contact {
    padding: 5rem 2.5rem !important;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }
  .contact-form {
    padding: 2rem !important;
  }

  /* ── FAQ ── */
  #faq {
    padding: 4rem 0 !important;
  }
  #faq > div {
    max-width: 700px !important;
  }
  .faq-question {
    font-size: 0.95rem !important;
  }

  /* ── FOOTER ── */
  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
  .footer-block {
    text-align: left !important;
  }
}
/* ══ FIN TABLET FIXES ══ */