/* =====================================================
   CALAOS CONDOMINIO — Design tokens (fuente: Figma)
   ===================================================== */
:root {
  --teal:        #075053; /* CTAs, headings sobre blanco/crema */
  --teal-deep:   #1f4e4a; /* fondo bloque Ubicado */
  --teal-shadow: #001d1f; /* sombra degradada del hero */
  --cream:       #f8f3e9; /* fondos claros alternos */
  --copper:      #c2823f; /* acento / bloque Ubicación inferior */
  --gray-body:   #5b5b5b; /* texto de cuerpo sobre blanco */
  --white:       #ffffff;

  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
  --gutter: 24px;

  /* tracking (letter-spacing) reutilizado en toda la marca */
  --tracking-loose: 0.35em;
  --tracking-mid:    0.3em;
  --tracking-tight:  0.1em;
}

/* =====================================================
   Reset básico
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--gray-body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-fluid { width: 100%; }

/* =====================================================
   Utilidades tipográficas compartidas
   ===================================================== */
.eyebrow-copper {
  display: block;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 20px);
  letter-spacing: var(--tracking-loose);
  color: var(--copper);
  text-transform: uppercase;
}
/* Figma: la linea (Line 8, w=297) es mas ANCHA que el propio texto "Rooftop" -> llega hasta el boton, no un border-bottom pegado al texto */
.amenidades-lists-underline { position: relative; display: inline-block; padding-bottom: 12px; }
.amenidades-lists-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 191px;
  height: 2px;
  background: var(--copper);
}
.eyebrow-white-small {
  display: block;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title-teal {
  font-weight: 600;
  font-size: clamp(2.5rem, 5.2vw, 4.6875rem); /* 75px @1440 */
  letter-spacing: var(--tracking-loose);
  color: var(--teal);
  text-transform: uppercase;
  line-height: 1.1;
}
.section-title-white {
  font-weight: 600;
  font-size: clamp(2.5rem, 5.2vw, 4.6875rem);
  letter-spacing: var(--tracking-loose);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.1;
}
.section-subtitle-teal {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.75vw, 1.5625rem); /* 25px */
  letter-spacing: var(--tracking-loose);
  color: var(--teal);
  text-transform: uppercase;
  margin-top: 12px;
}
.section-subtitle-teal-light {
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem); /* 40px */
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1.25;
}
.section-subtitle-white {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.75vw, 1.5625rem);
  letter-spacing: var(--tracking-loose);
  color: var(--white);
  text-transform: uppercase;
  margin-top: 12px;
}
.section-subtitle-strong-white {
  font-weight: 500;
  font-size: clamp(1.1rem, 1.75vw, 1.5625rem);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.4;
}

.body-text {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.667; /* 30px */
  color: var(--gray-body);
  margin-top: 20px;
}
.body-text-white {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.875; /* 30px */
  color: var(--white);
  margin-top: 20px;
}
.body-text-copper {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.667;
  color: var(--copper);
}

.location-tag,
.location-tag-white {
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.location-tag { font-size: 14px; letter-spacing: 0.38em; color: var(--copper); } /* Figma Calaos: 14px, tracking 5.32/14 */
.location-tag-white {
  font-size: clamp(16px, 1.53vw, 22px); /* Figma Ubicacion: 22px @1440 */
  letter-spacing: 0.38em; /* Figma: 8.36/22 */
  color: var(--white);
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  margin-bottom: 32px;
}

.list-plain { list-style: none; }
.list-plain li { position: relative; padding-left: 18px; }
.list-plain li::before {
  content: "·";
  position: absolute;
  left: 0;
}
.list-plain-white { font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--white); }
.list-plain-white li + li { margin-top: 4px; }
.list-plain-copper { font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--copper); }
.list-plain-copper li + li { margin-top: 4px; }

/* Figma: la rayita bajo estos links (Descubrelo, Ver todas, Leer mas...) es una linea CORTA fija de 64px,
   NO un border-bottom que se estira al ancho del texto -> ::after con width fijo, no border. */
.link-underline {
  position: relative;
  display: inline-block;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.38em; /* Figma: 6.08px/16px */
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 16px;
  margin-top: 24px;
  transition: color .3s ease;
}
.link-underline::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0; /* Figma: la linea se alinea al borde DERECHO del texto, no al izquierdo (verificado en Descubrelo y Ver todas) */
  width: 64px;
  height: 1px;
  background: var(--copper); /* Figma: la linea SIEMPRE es cobre, sin importar el color del texto arriba */
  transition: width .3s ease;
}
.link-underline:hover { color: var(--copper); }
.link-underline:hover::after { width: 100%; }
/* Figma: Descubrelo esta alineado al borde derecho del parrafo, no a la izquierda */
.link-underline-right { display: block; text-align: right; }
/* la linea es siempre cobre (ver regla base); estas variantes solo cambian el color del TEXTO */
.link-underline-white { color: var(--white); }
.link-underline-teal { color: var(--teal); }

.center { text-align: center; margin-left: auto; margin-right: auto; }
.measure { max-width: 640px; }
.page-cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.page-cta.center { justify-content: center; }
.page-map-image { width: 100%; height: auto; display: block; }
.page-list-large { margin-top: 24px; font-size: 20px; }

/* Botones */
.btn {
  display: inline-block;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 2px;
  text-align: center;
  transition: all .3s ease;
}
.btn-glass {
  color: var(--white);
  background: rgba(255,255,255,0.2);
  border: 1px solid var(--white);
  backdrop-filter: blur(24px);
}
.btn-glass:hover { background: rgba(255,255,255,0.35); }
.btn-teal { background: #b46353; color: var(--white); }
.btn-teal:hover { background: #9a4f42; }
.btn-outline-teal { border: 1px solid #b46353; color: #b46353; background: transparent; }
.btn-outline-teal:hover { background: #b46353; color: var(--white); }

/* =====================================================
   HEADER / NAV
   ===================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled {
  background: rgba(7, 80, 83, 0.92);
  backdrop-filter: blur(10px);
}
.header-inner {
  max-width: none;
  margin: 0;
  padding: 24px 2.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding .3s ease;
}
.site-header.scrolled .header-inner { padding: 10px 2.5vw; }
.logo { position: relative; display: block; }
.logo img { display: block; height: clamp(56px, 6.67vw, 96px); width: auto; transition: height .3s ease; } /* 96px @1440, Figma exacto */
.site-header.scrolled .logo img { height: clamp(60px, 4.4vw, 56px); }
.logo img.logo-scrolled { display: none; }
.site-header.scrolled .logo img.logo-default { display: none; }
.site-header.scrolled .logo img.logo-scrolled { display: block; }

.header-right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }

/* Icono/telefono/Cotizar solo existen sobre el header solido (scrolled) -> ocultos en el hero, aparecen con fade al hacer scroll */
.header-phone,
.header-cotizar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.site-header.scrolled .header-phone,
.site-header.scrolled .header-cotizar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color .3s ease;
}
.header-phone:hover { color: var(--copper); }
.header-phone-icon { flex-shrink: 0; width: 16px; height: 16px; }

.header-cotizar { padding: 12px 28px; font-size: 12px; }

.hamburger {
  width: clamp(40px, 3.9vw, 56px); height: 32px; /* 56px @1440, Figma exacto */
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px 0;
}
.hamburger span { display: block; height: 2px; width: 100%; background: var(--teal-deep); transition: all .3s ease; }
.site-header.scrolled .hamburger span { background: var(--white); }
.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110; /* por encima del header (100) -> el menu tapa todo, incluida la barra fija */
  background: linear-gradient(120deg, var(--teal-shadow) 0%, var(--teal) 55%, var(--teal-deep) 100%);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  overflow: hidden;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* Topbar propia del menu (logo + cerrar), reemplaza visualmente al header mientras esta abierto */
.nav-overlay-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 2.5vw;
}
.nav-overlay-logo img { display: block; height: clamp(56px, 6.67vw, 96px); width: auto; }
.nav-overlay-close {
  width: clamp(40px, 3.9vw, 56px); height: 32px;
  background: none; border: none; cursor: pointer;
  position: relative;
}
.nav-overlay-close span {
  position: absolute; left: 0; top: 50%; width: 100%; height: 2px;
  background: var(--cream);
  transition: background .3s ease;
}
.nav-overlay-close span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.nav-overlay-close span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }
.nav-overlay-close:hover span { background: var(--copper); }

/* Panel de fotografia: cambia segun el link en hover, le da el toque "editorial" al menu */
.nav-overlay-media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.nav-overlay-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 1.2s ease;
}
.nav-overlay-img.is-active { opacity: 1; transform: scale(1); }
.nav-overlay-media-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal-shadow) 0%, rgba(0,29,31,0.35) 18%, rgba(0,29,31,0) 45%);
}

.nav-overlay-content {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4.4vw 0 7.15%;
  height: 100%;
}

.nav-overlay-list { list-style: none; }
.nav-overlay-list li {
  margin: 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.nav-overlay.open .nav-overlay-list li { opacity: 1; transform: translateY(0); }
.nav-overlay-list li:nth-child(1) { transition-delay: .08s; }
.nav-overlay-list li:nth-child(2) { transition-delay: .14s; }
.nav-overlay-list li:nth-child(3) { transition-delay: .2s; }
.nav-overlay-list li:nth-child(4) { transition-delay: .26s; }
.nav-overlay-list li:nth-child(5) { transition-delay: .32s; }
.nav-overlay-list li:nth-child(6) { transition-delay: .38s; }
.nav-overlay-list li:nth-child(7) { transition-delay: .44s; }

.nav-overlay .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 0;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color .35s ease, gap .35s ease;
}
.nav-link-bullet {
  width: 8px; height: 8px;
  flex-shrink: 0;
  background: var(--copper);
  transition: transform .35s ease;
}
.nav-overlay .nav-link:hover .nav-link-bullet,
.nav-overlay .nav-link:focus-visible .nav-link-bullet { transform: rotate(45deg) scale(1.4); }
.nav-link-text { position: relative; }
.nav-link-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.nav-overlay .nav-link:hover,
.nav-overlay .nav-link:focus-visible { color: var(--white); gap: 28px; }
.nav-overlay .nav-link:hover .nav-link-text::after,
.nav-overlay .nav-link:focus-visible .nav-link-text::after { transform: scaleX(1); }

/* al pasar por un link, los demas bajan de intensidad para dar foco (progressive enhancement, no rompe sin :has) */
.nav-overlay-list:has(.nav-link:hover) .nav-link:not(:hover) { color: rgba(248,243,233,0.4); }

.nav-overlay-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 72px);
  opacity: 0;
  transition: opacity .6s ease .4s;
}
.nav-overlay.open .nav-overlay-footer { opacity: 1; }
.nav-overlay-contact {
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.nav-overlay-contact:hover { border-color: var(--copper); color: var(--copper); }
.nav-overlay-socials { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.nav-overlay-social { width: 18px; height: 18px; color: var(--cream); transition: color .3s ease; }
.nav-overlay-social svg { width: 100%; height: 100%; display: block; }
.nav-overlay-social:hover { color: var(--copper); }
.nav-overlay-tagline {
  font-size: 12px;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: rgba(248,243,233,0.5);
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1800 / 936;
  /* sin overflow:hidden: el object-fit:cover ya recorta la foto por su cuenta (mismo motivo que .amenidades-media);
     sin este techo, VOLVER puede empujarse hacia abajo sin quedar recortado por el propio contenedor */
  color: var(--white);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--teal-deep); overflow: hidden; }
.hero-bg { width: 100%; height: 100%; object-fit: cover; animation: heroKenBurns 24s ease-in-out infinite alternate; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
}

/* Brillo cálido que respira lentamente sobre el agua (elemento aparte, no compite con
   el transform del zoom de .hero-bg) — sensación de luz viva, mezclado con el zoom lento. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 32% 72%, rgba(255,214,150,0.28), transparent 70%);
  opacity: 0.4;
  animation: heroGlowBreathe 12s ease-in-out infinite;
}
@keyframes heroGlowBreathe {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; opacity: 0.4; }
}
.hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, var(--teal-shadow) 100%);
}

.hero-heading {
  position: absolute;
  left: 12.71%;
  top: 67.31%;
  z-index: 2;
  max-width: 88%;
}
.hero-kicker {
  display: block;
  font-weight: 300;
  font-size: clamp(14px, 1.667vw, 24px);
  letter-spacing: 1.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-title {
  font-weight: 600;
  font-size: clamp(3.5rem, 10.417vw, 9.375rem); /* 150px @1440 */
  line-height: 1.22;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Párrafo + Cotizar: dos elementos independientes con posición propia. */
.hero-quote-text {
  position: absolute;
  left: 60%;
  top: 72.86%;
  z-index: 2;
  width: 29.1%;
  font-weight: 300;
  font-size: clamp(12px, 0.972vw, 14px);
  line-height: 1.286;
}
.hero-quote-text strong { font-weight: 700; }

.hero-cta {
  position: absolute;
  left: 78.4%;
  top: 81.09%;
  z-index: 2;
  padding: 7px 28px;
  font-size: 14px;
  letter-spacing: 0.25em;
  white-space: nowrap;
}

/* =====================================================
   CALAOS
   ===================================================== */
.calaos { position: relative; background: var(--white); padding-top: 70px; overflow: hidden; }
.calaos-intro {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 24px;
}
.calaos-intro-left { display: flex; flex-direction: column; gap: 8px; }
/* Figma: CALAOS = 45px/tracking .5em (no 75px como Ubicado/Tipologias); CONDOMINIO = 20px/tracking .45em */
.calaos-intro-left .section-title-teal { font-size: clamp(1.75rem, 3.13vw, 2.8125rem); letter-spacing: 0.5em; }
.calaos-intro-left .eyebrow-copper { font-size: clamp(14px, 1.39vw, 20px); letter-spacing: 0.45em; }

/* Vector decorativo — Figma: x=-537 y=0(relativo a la seccion) w=893 h=733 sobre un lienzo de 1440.
   left = -537/1440, width = 893/1440. Pegado arriba de la seccion; el edificio (imagen) va POR ENCIMA. */
.calaos-decor {
  position: absolute;
  left: -37.29%;
  top: 140px;
  width: 62.01%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Imagen — Figma: x=-120 y=511(relativo) w=1567.8 h=926 sobre lienzo 1440.
   Full-bleed (NO max-width/centrado): left=-120/1440, width=1567.8/1440.
   Fondo: blanco arriba / crema abajo, con el quiebre en 220/926=23.76% de la ALTURA DE LA IMAGEN (no de la seccion) */
.calaos-image {
  position: relative;
  z-index: 1;
  margin-left: -8.33%;
  width: 108.87%;
  overflow: hidden;
}
.calaos-image-bg {
  position: absolute;
  left: 0; right: 0;
  top: 23.76%;
  bottom: 0;
  background: var(--cream);
  z-index: 0;
}
.calaos-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Vector decorativo reutilizado (marca CALAOS) — mismo asset en Footer (Calaos usa .calaos-decor, Ubicacion usa .ubicacion-decor, ver arriba) */
.decor-wave { position: absolute; width: 380px; max-width: none; opacity: 0.5; pointer-events: none; z-index: 0; }
/* Figma: Vector x=293(20.35%) y=0 w=1561(108.4%) h=1282 -> mucho mas grande que el placeholder anterior */
.decor-wave--footer { left: 20.35%; top: 0; width: 108.4%; height: auto; opacity: 0.15; }

/* =====================================================
   UBICACION
   ===================================================== */
.ubicacion { position: relative; background: var(--white); overflow: hidden; }

/* Figma: Rectangle 5 (fondo verde) x=0 y=0(inicio real de la seccion) w=1448 h=608 sobre lienzo 1440.
   NO cubre toda la seccion -> termina dentro de la imagen (36% de su alto), el resto de la seccion es blanco. */
.ubicacion-teal-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100.56%;
  height: 34.72vw; /* 500/1440, a pedido del usuario */
  background: var(--teal-deep);
  z-index: 0;
}

/* Vector — Figma: x=994 y=1948(=inicio del frame) w=1561 h=1282 sobre lienzo 1440.
   La tinta visible del trazo arranca a 554px dentro de su propio lienzo; el frame arranca 513px ANTES
   de donde empieza el verde real (Rectangle 5, y=2461) -> top:-513px para que la tinta caiga dentro del verde.
   Bleedea a la DERECHA, DETRAS de la imagen (z-index bajo) -> solo se asoma en el margen verde. */
.ubicacion-decor {
  position: absolute;
  left: 69.03%;
  top: -513px;
  width: 108.4%;
  max-width: none; /* el reset global img{max-width:100%} lo capaba al ancho del contenedor y no llegaba al borde */
  height: auto;
  z-index: 0;
  opacity: 0.1; /* el mask-type:alpha del SVG original no es respetado por navegadores -> opacidad real via CSS */
  clip-path: inset(43.2% 71.4% 0 0); /* recorta al mismo fragmento que la mascara original (esquina inferior-izquierda del trazo) */
  pointer-events: none;
}

/* Figma: Rectangle 10 (cream, x=0 w=718 h=152) conecta visualmente con el fondo crema de Amenidades */
.ubicacion-beige-connector {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 49.86%;
  height: 10.56vw; /* 152/1440 */
  background: var(--cream);
  z-index: 0;
  pointer-events: none;
}

/* Figma: "Ubicado" (x=87) alinea con el borde izquierdo de la imagen (x=88) -> mismo ancho/margen que .ubicacion-image, NO el .container generico de 1200px */
.ubicacion-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  width: 87.78%;
  margin: 0 auto;
  padding: 60px 0 64px;
}
.ubicacion-desc { margin-top: 0; align-self: end; }

/* Figma: image1 x=88 width=1264 sobre lienzo 1440 -> CENTRADA, NO full-bleed (88px de margen simetrico, se ve el verde a los lados) */
.ubicacion-image {
  position: relative;
  z-index: 1;
  width: 87.78%;
  margin: 0 auto;
}
.ubicacion-image img { width: 100%; height: auto; display: block; }

/* Figma: Rectangle 8 (fondo cobre) mismo x=88 width=1264 que la imagen -> el cobre tambien va centrado,
   NO full width; el margen lateral sigue mostrando el verde de .ubicacion */
.ubicacion-footer { position: relative; z-index: 1; overflow: hidden; }
.ubicacion-footer-inner {
  position: relative;
  background: var(--copper);
  width: 87.78%;
  margin: 0 auto;
  padding: 20px var(--gutter) 72px; /* Figma: el location-tag aparece casi enseguida (18px) tras iniciar el cobre */
  /* corte diagonal real en la esquina inferior derecha (no un cuadrado superpuesto) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), calc(100% - 90px) 100%, 0 100%);
}
.ubicacion-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 48px;
}
.ubicacion-ver-mas { grid-column: 2; transition: transform .3s ease; transform-origin: right center; }
.ubicacion-ver-mas::after { background: var(--white); } /* la barra cobre no se ve sobre el fondo cobre de este bloque */
.ubicacion-ver-mas:hover { color: var(--white); transform: scale(1.06); }

/* =====================================================
   AMENIDADES
   ===================================================== */
/* Figma: el crema (Rectangle 15, w=718 = mitad del ancho) solo cubre la columna IZQUIERDA de la intro;
   la columna derecha ("Experiencias que te invitan volver") va sobre BLANCO, no crema */
.amenidades { position: relative; background: var(--white); }
.amenidades-cream-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 49.86%;
  height: 20.07vw; /* 289/1440 */
  background: var(--cream);
  z-index: 0;
}
/* Alineado con el mismo ancho/margen del panel cobre de Ubicacion (87.78%), no el .container generico */
.amenidades-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  width: 87.78%;
  margin: 0 auto;
  padding: 96px 0 64px;
}
.amenidades-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 872;
  /* sin overflow:hidden: el object-fit:cover ya recorta la foto por su cuenta; sin este limite
     el texto AMENIDADES puede desplazarse hacia abajo sin quedar recortado por el propio contenedor */
}
.amenidades-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.amenidades-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
}
/* Figma: la barra (Rectangle 16) NO toca el texto (45px de espacio) y es mas alta que la linea de texto
   (62px vs 24px), centrada verticalmente respecto al texto -> elemento separado, no border-right */
.amenidades-tag {
  position: absolute;
  left: 6%; bottom: 21%; /* Figma: text608 y=948 dentro de imagen 259-1131 -> 20.98% desde abajo */
  z-index: 1; /* crea contexto de apilamiento propio: sin esto, el ::before (z-index:-1) queda detras de TODA la foto, no solo del texto */
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
/* Figma: la barra va en el borde del PANEL (fondo semitransparente), no pegada al texto -> posicion FIJA
   (no gap/flex relativo al texto: con textos cortos como "Aquapark" quedaba flotando lejos del panel) */
.amenidades-tag-bar {
  position: absolute;
  left: 353px; top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 4px; height: 3.1em;
  background: var(--copper);
}
/* Figma: Rectangle 14 (fondo semitransparente detras del texto, igual tratamiento que .amenidades-thumb) */
.amenidades-tag::before {
  content: '';
  position: absolute;
  left: -113px;
  top: 50%;
  transform: translateY(-50%);
  width: 466px;
  height: 3.1em;
  background: rgba(0,0,0,0.4);
  z-index: -1;
}
/* Swiper de fotos de amenidades: reemplaza el boton "thumb" que bleedeaba fuera del
   contenedor (right negativo) y a veces generaba scroll horizontal en la pagina. */
.amenidades-swiper,
.amenidades-swiper .swiper-wrapper,
.amenidades-swiper .swiper-slide { width: 100%; height: 100%; }
.amenidades-swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* swiper-bundle.css le pone z-index:1 a .swiper por defecto -> tapaba el degradado, el tag
   y el "AMENIDADES" gigante (position:absolute sin z-index propio, quedaban por debajo) */
.amenidades-swiper { z-index: 0; }
.amenidades-gradient, .amenidades-tag, .amenidades-giant { z-index: 2; }

.amenidades-name-list { --amenidades-name-gap: 8px; }
.amenidades-name-item {
  cursor: pointer;
  transition: color .3s ease;
}
.amenidades-name-item.is-active {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Figma: Rectangle 619 (82x43) es UN SOLO boton con las 2 flechas adentro, separadas por una linea fina -> no dos cuadrados con espacio */
.amenidades-nav {
  display: flex;
  align-items: center;
  align-self: flex-end; /* pegado al final de la linea (borde derecho), no debajo del texto */
  width: 82px;
  height: 43px;
  background: var(--copper);
}
.amenidades-nav button {
  flex: 1;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.amenidades-nav-divider { width: 1px; height: 60%; background: rgba(255,255,255,0.4); }
.amenidades-nav button img { width: 8px; height: auto; filter: brightness(0) invert(1); }
.amenidades-nav-prev img { transform: rotate(180deg); }

/* Flechas de imagen sobre la foto (cambian de foto dentro de la categoria activa), simetricas
   al .amenidades-tag del otro lado. Reutiliza el mismo look de pastilla cobre que .amenidades-nav. */
.amenidades-img-nav {
  position: absolute;
  right: 0%;
  bottom: 21%;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100px;
  height: 60px;
  background: var(--copper);
}
.amenidades-img-nav button { flex: 1; height: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.amenidades-img-nav button img { width: 8px; height: auto; filter: brightness(0) invert(1); }
.amenidades-img-nav .amenidades-nav-prev img { transform: rotate(180deg); }

/* El wrapper de cada categoria no debe contar como 1 solo item del grid de .amenidades-lists
   (que espera 2 <ul> sueltas en las columnas 2 y 3) -> display:contents deja pasar sus hijos
   directo al grid; JS oculta grupos inactivos con display:none (sobreescribe el contents). */
.amenidades-nombres-group { display: contents; }
.amenidades-giant {
  position: absolute;
  left: 3%; bottom: 0;
  /* margin-bottom negativo NO funciona en un elemento absolute con bottom:0 (no empuja el contenido) ->
     transform si desplaza el contenido. Sin overflow:hidden en el padre ya no hay techo de recorte,
     asi que empujamos de sobra (no al filo) para garantizar que quede pegado sin duda alguna. */
  transform: translateY(0.12em);
  font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 8rem); /* 128px @1440 */
  line-height: 0.85;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
/* Figma: "Rooftop" x=56 (3.9%), "ver todas" termina ~94.4% -> gutter viewport-relativo, NO el .container generico */
.amenidades-lists {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr 0.6fr;
  gap: 24px;
  align-items: start;
  padding: 56px 4% 96px;
  background: var(--cream); /* seccion base ahora es blanca; esta franja inferior si es crema en el Figma */
}
/* Figma: las flechas van DEBAJO de "Rooftop" (apiladas), no al lado */
/* Figma: Rectangle 619 (boton) comparte la misma Y que Line 8 (la linea) y su borde derecho coincide
   con el final de la linea -> boton pegado a la linea (sin gap), alineado a la derecha del mismo ancho */
.amenidades-lists-header { display: flex; flex-direction: column; align-items: flex-start; width: 191px; gap: 0; }
.amenidades-ver-todas { grid-column: 4; justify-self: end; align-self: end; }

/* =====================================================
   APARTAMENTOS (viewer interactivo Tipo A/B/C — pestaña + panel por
   tipología, planos/áreas/ambientes reales desde web_tipologias/web_plantas)
   ===================================================== */
.apartamentos { position: relative; background: var(--white); }
.apartamentos-intro {
    padding: 96px var(--gutter) 48px;
    max-width: 1460px;
    text-align: center;
    margin: 0 auto;
}
.apartamentos-intro .section-subtitle-teal { margin-top: 24px; }
.apartamentos-intro .body-text { margin-top: 32px; }

.apto-tabs { display: flex; justify-content: center; gap: 20px; padding: 0 var(--gutter) 56px; flex-wrap: wrap; }
.apto-tab {
  width: 165px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--teal);
  background: var(--white);
  border: 1px solid var(--teal);
  padding: 11px 0;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.apto-tab:hover { background: rgba(7,80,83,0.08); }
.apto-tab.is-active { background: var(--teal); color: var(--white); }

.apto-panel { display: none; }
.apto-panel.is-active { display: block; }

.apto-eyebrow-row { width: 87.78%; margin: 0 auto; }
.apto-eyebrow {
  display: block;
  font-weight: 300;
  font-size: clamp(14px, 1.736vw, 25px);
  letter-spacing: 0.35em;
  color: var(--teal);
  text-transform: uppercase;
}

.apto-viewer { background: var(--cream); }
.apto-viewer-inner {
  width: 87.78%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 31.3% 1fr;
  gap: 8.3%;
  align-items: start;
  padding: 0 0 64px;
}
.apto-info { display: flex; flex-direction: column; }
.apto-info-name {
  margin-top: 0;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.819vw, 3.4375rem);
  letter-spacing: 0.35em;
  color: var(--teal);
  text-transform: uppercase;
}
.apto-info-area {
  display: block;
  width: fit-content;
  margin-top: 10px;
  background: var(--copper);
  color: var(--teal);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
}
.apto-info-list { margin-top: 51px; }
.apto-info-list li + li { margin-top: 4px; }
.apto-info .btn { margin-top: 96px; align-self: flex-start; }

.apto-plano-col { margin-top: -6.33%; }
.apto-plano img { width: 100%; height: auto; display: block; }

.apto-thumbs { display: flex; gap: 5px; margin-top: 20px; }
.apto-thumb {
  flex: 1;
  aspect-ratio: 100 / 65;
  border: 2px solid transparent;
  background: var(--cream);
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .3s ease, border-color .3s ease;
}
.apto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apto-thumb:hover { opacity: 0.85; }
.apto-thumb.is-active { opacity: 1; border-color: var(--copper); }

/* =====================================================
   EXPLORA EN 3D (visor umbra3d.studio) — "Explora Calaos antes de construirse"
   ===================================================== */
.explora3d { background: var(--cream); padding-bottom: 50px; }
.explora3d-intro { padding: 96px var(--gutter) 40px; max-width: 760px; text-align: center; margin: 0 auto; }
.explora3d-title { margin-top: 12px; }
.explora3d-text { margin-top: 24px; }
.explora3d-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--teal-deep); }
.explora3d-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.explora3d-badge {
  position: absolute; top: 20px; left: 20px;
  font-weight: 500; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--white); background: rgba(0,29,31,0.55); backdrop-filter: blur(6px);
  padding: 8px 16px; pointer-events: none;
}
.explora3d-footer { padding: 24px var(--gutter) 0; text-align: center; }

/* =====================================================
   SANTA MARTA
   ===================================================== */
/* Figma: TODO el contenido (heading/parrafo/leer mas) va SUPERPUESTO sobre la foto, en el area oscura
   del degradado a la derecha -> NO es una caja teal separada debajo, es una sola foto full-bleed. */
.santamarta { background: var(--teal-deep); }
.santamarta-media { position: relative; width: 100%; color: var(--white); }
/* wrapper solo de la FOTO (img+degradado+SANTA MARTA gigante): en desktop coincide exactamente
   con .santamarta-media (mismo aspect-ratio); en mobile es quien lleva el alto fijo, para que
   .santamarta-media pueda crecer con el contenido real (texto+leer mas) que va DEBAJO de la foto */
.santamarta-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 665; /* alto total del frame Figma (no solo el de la imagen) */
  /* sin overflow:hidden: mismo motivo que .hero/.amenidades-media -> permite subir SANTA MARTA
     sin que el propio contenedor lo recorte (el object-fit:cover ya recorta la foto solo) */
}
.santamarta-photo img { width: 100%; height: 100%; object-fit: cover; }
.santamarta-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 80%);
}
.santamarta-giant {
  position: absolute;
  left: 5.07%; top: 0;
  transform: translateY(-0.22em); /* aun quedaba un resto de espacio arriba con -0.15em, se sube un poco mas */
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 6.25rem); /* 100px @1440 */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
}
/* Figma: heading x=937 y=158(rel) w=483 -> 65.07%/23.76%/33.54% */
.santamarta-content {
  position: absolute;
  left: 65.07%; top: 23.76%;
  width: 33.54%;
}
.santamarta-content .section-subtitle-white { margin-top: 0; }
/* Figma: leer mas, centrado en x=1287 (89.375%), y=578(rel) -> 86.92% */
.santamarta-leermas { position: absolute; left: 89.375%; top: 86.92%; transform: translateX(-50%); }

/* =====================================================
   FOOTER
   ===================================================== */
/* Figma: el teal NO empieza en y=0 -> hay 91px de blanco antes; logo va SOLO en su propia fila;
   tagline+telefonos comparten fila; texto legal+partners comparten otra fila; la barra cobre es
   corta (700px, no todo el ancho) y arranca en 55.9%, no pegada al borde izquierdo. */
.site-footer { position: relative; background: var(--teal); color: var(--white); }

/* Crédito "Desarrollado por" (fuera de .footer-inner): sin estos estilos quedaba con fondo
   blanco por defecto -> se veia como una franja blanca despegada del resto del footer teal. */
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 24px;
  background: #91524b;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.footer-credit__link { display: inline-flex; align-items: center; }
.footer-credit__logo { width: 16px; height: 16px; opacity: 0.8; transition: opacity .3s ease; }
.footer-credit__link:hover .footer-credit__logo { opacity: 1; }
.footer-inner { position: relative; background: var(--teal); overflow: hidden; padding-top: 6.31vw; /* 91/1440 */ }
.footer-content { position: relative; z-index: 1; max-width: 87.78%; margin: 0 auto; }
.footer-logo { display: block; height: 14.03vw; width: auto; } /* 202/1440 */

.footer-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 5.42vw; /* gap logo -> fila 1, medido en Figma */
}
.footer-tagline {
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.5625rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1.4;
}
.footer-phones { text-align: center; }
.footer-phone { font-weight: 500; font-size: 18px; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 12px; }

.footer-row-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-top: 2.99vw; /* gap fila 1 -> fila 2, medido en Figma */
}
.footer-legal { font-weight: 300; font-size: 10px; line-height: 1.5; color: rgba(255,255,255,0.75); max-width: 588px; }
.footer-partners { display: flex; gap: 48px; flex-wrap: wrap; flex-shrink: 0; }
.footer-partner img { height: 48px; width: auto; }

/* Figma: Rectangle 31, x=805 (55.9%) w=700 (48.6%) -> barra corta descentrada, NO de borde a borde */
.footer-bar {
  position: relative;
  z-index: 1;
  margin-top: 5.63vw;
  margin-left: 55.9%;
  width: 48.6%;
  height: 45px;
  background: var(--copper);
}

/* =====================================================
   PAGINAS INTERIORES (Calaos, Ubicacion, Amenidades, Apartamentos,
   Cotizar, Santa Marta, Contactenos) — componentes compartidos
   ===================================================== */

/* Contenedor generico de contenido de pagina interior, mismo ancho/margen que el resto del sitio */
.page-section { width: 87.78%; margin: 0 auto; padding: 96px 0; }
.page-section + .page-section { padding-top: 0; }
.page-section-tight { padding: 64px 0; }
.page-section-cream { background: var(--cream); }
.page-section-cream .page-section { padding-top: 64px; padding-bottom: 64px; }

/* Grid de plantas (Apartamentos) */
.plano-group { margin-top: 64px; }
.plano-group:first-child { margin-top: 40px; }
.plano-group-header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.plano-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.plano-card { background: var(--cream); padding: 24px; }
.plano-card-media { cursor: pointer; position: relative; }
.plano-card img { width: 100%; height: auto; display: block; margin-bottom: 20px; background: var(--cream); }
.plano-card-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--teal); color: var(--white);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  padding: 5px 12px; border-radius: 99px;
}
.plano-card-area { font-weight: 600; font-size: 22px; color: var(--teal); margin-bottom: 12px; }
.plano-card .list-plain { font-size: 14px; color: var(--gray-body); }
.plano-card .list-plain li::before { color: var(--copper); }
.plano-card .list-plain li + li { margin-top: 2px; }
.plano-card .link-underline { display: block; margin-top: 20px; }
.plano-card .btn { display: block; text-align: center; margin-top: 20px; }

/* Galeria de fotos (Amenidades) */
.amenidad-group { margin-top: 72px; }
.amenidad-group:first-child { margin-top: 40px; }
.amenidad-group-body { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items: start; margin-top: 24px; }
.amenidad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.amenidad-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.amenidad-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.amenidad-card:hover img { transform: scale(1.06); }
.amenidad-card span {
  position: absolute; left: 14px; bottom: 12px;
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

/* Formulario (Cotizar / Contactenos) */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.contact-form .field-full { grid-column: 1 / -1; }
.form-msg { margin-top: 12px; font-size: 14px; color: var(--teal); min-height: 20px; }
.form-msg--error { color: #b3261e; }

/* Filtros de disponibilidad (Cotizar) */
.cotizar-filtros { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 40px 0 32px; }
.cotizar-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cotizar-tab {
  padding: 10px 20px; border: 1px solid var(--teal); border-radius: 99px;
  background: var(--white); color: var(--teal); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s, color .15s;
}
.cotizar-tab span { font-weight: 400; opacity: .75; }
.cotizar-tab:hover { background: var(--cream); }
.cotizar-tab.is-active { background: var(--teal); color: var(--white); }

.cotizar-filtros-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid var(--teal); border-radius: 99px;
  background: var(--teal); color: var(--white); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: opacity .15s; flex-shrink: 0;
}
.cotizar-filtros-btn:hover { opacity: .85; }
.cotizar-filtros-btn svg { width: 18px; height: 18px; }
.cotizar-filtros-btn__texto-mobil { display: none; }

.cotizar-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 190;
}
.cotizar-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.cotizar-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 340px; max-width: 88vw;
  background: var(--white); box-shadow: -10px 0 30px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .3s ease;
  z-index: 200; overflow-y: auto; display: flex; flex-direction: column;
}
.cotizar-drawer.is-open { transform: translateX(0); }
.cotizar-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,.08);
  font-weight: 600; font-size: 16px; color: var(--teal);
}
.cotizar-drawer__close { background: none; border: none; font-size: 22px; color: var(--teal); cursor: pointer; line-height: 1; }
.cotizar-drawer__body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.cotizar-drawer__body .field { display: flex; flex-direction: column; gap: 8px; }
.cotizar-drawer__body label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--copper); }

.cotizar-filtro-area {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px; border: 1px solid var(--teal); border-radius: 99px;
  color: var(--teal); font-size: 13px; font-weight: 600;
}
.cotizar-input-area {
  width: 100%; padding: 6px 4px; border: none; border-bottom: 1px solid var(--teal);
  color: var(--teal); font-size: 13px; font-weight: 600; background: transparent;
}
.cotizar-input-area:focus { outline: none; border-color: var(--copper); }
.cotizar-input-area::-webkit-outer-spin-button,
.cotizar-input-area::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cotizar-select-piso {
  padding: 10px 16px; border: 1px solid var(--teal); border-radius: 99px;
  background: var(--white); color: var(--teal); font-weight: 600; font-size: 14px;
  cursor: pointer; width: 100%;
}

.plano-card-numero { font-weight: 600; font-size: 18px; color: var(--teal); margin-bottom: 8px; }
.plano-card-etapa { font-weight: 400; font-size: 11px; color: var(--copper); text-transform: uppercase; letter-spacing: 0.03em; }
.cotizar-unidad-specs { font-size: 13px; color: var(--gray-body); display: flex; flex-direction: column; gap: 6px; }
.cotizar-unidad-specs li { display: flex; align-items: center; gap: 8px; }
.cotizar-unidad__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--copper); }

.cotizar-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; }
.cotizar-pager__btn {
  padding: 10px 18px; border: 1px solid var(--teal); border-radius: 99px;
  background: var(--white); color: var(--teal); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s;
}
.cotizar-pager__btn:hover:not(:disabled) { background: var(--cream); }
.cotizar-pager__btn:disabled { opacity: .35; cursor: default; }
.cotizar-pager__info { font-size: 13px; color: var(--gray-body); }

/* Detalle de unidad (ampliado de Cotizar) */
.cotizar-detalle-hero { position: relative; height: 320px; overflow: hidden; }
.cotizar-detalle-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cotizar-detalle-hero__vignette { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,44,42,.85) 0%, rgba(15,44,42,.35) 55%, rgba(15,44,42,.15) 100%); }
.cotizar-detalle-hero__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px var(--gutter); max-width: var(--container); margin: 0 auto; }
.cotizar-detalle-hero__back { display: inline-block; color: var(--white); font-size: 13px; font-weight: 600; text-decoration: none; opacity: .85; margin-bottom: 14px; }
.cotizar-detalle-hero__back:hover { opacity: 1; text-decoration: underline; }
.cotizar-detalle-hero__eyebrow { display: block; color: var(--copper); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.cotizar-detalle-hero__title { color: var(--white); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; }

.cotizar-detalle-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: var(--cream); }
.cotizar-detalle-media { position: relative; min-height: 420px; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cotizar-detalle-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cotizar-detalle-info { padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; }

.cotizar-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.cotizar-stats__item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 80px; text-align: center; }
.cotizar-stats__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.cotizar-stats__icon svg { width: 24px; height: 24px; color: var(--white); }
.cotizar-stats__value { font-size: 24px; font-weight: 600; color: var(--teal); }
.cotizar-stats__label { font-size: 12px; color: var(--gray-body); text-transform: uppercase; letter-spacing: 0.03em; }
.cotizar-detalle-nota { font-size: 14px; color: var(--gray-body); margin-top: 28px; line-height: 1.6; }
.cotizar-detalle-cta { display: inline-block; margin-top: 20px; }
#cotizar-formulario { scroll-margin-top: 100px; }
@media (max-width: 1024px) {
  .cotizar-detalle-layout { grid-template-columns: 1fr; }
  .cotizar-detalle-media { min-height: 280px; }
  .cotizar-detalle-info { padding: 40px var(--gutter); }
}
@media (max-width: 640px) {
  .cotizar-detalle-hero { height: 260px; }
  .cotizar-stats { justify-content: space-between; gap: 12px; }
  .cotizar-filtros { flex-direction: column; align-items: stretch; }
}
.contact-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(7,80,83,0.25);
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--gray-body);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--copper); }
.contact-form .btn { border: none; cursor: pointer; }
.contact-form .field--error input,
.contact-form .field--error select,
.contact-form .field--error textarea { background: #fdecea; border-color: #b3261e; }

/* Bloque de telefonos/aliados (Contactenos) */
.contact-info { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 32px; }
.contact-info-item .eyebrow-copper { margin-bottom: 8px; }
.contact-info-item a,
.contact-info-item span:last-child { font-size: 20px; font-weight: 500; color: var(--teal); letter-spacing: 0.05em; }


/* =====================================================
   EDITORIAL (.ed-*) — diagramado de paginas interiores,
   inspirado en la estructura de coralbay/que-es-coral-bay.html
   (hero cinematico, intro editorial, showcase, stats, vision,
   galeria con lightbox, cta final) con la paleta/tokens de CALAOS
   ===================================================== */
.ed-tag {
  display: inline-block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
}

/* Hero cinematico */
.ed-hero { position: relative; width: 100%; height: 450px; overflow: hidden; color: var(--white); } /* tope de 450px en escritorio: el hero de pagina interior no debe competir con el del home */
.ed-hero__media { position: absolute; inset: 0; }
.ed-hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.ed-hero__vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.7) 100%); /* negro neutro, no verde/teal */
}
.ed-hero__scroll { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ed-hero__scroll-track { width: 1px; height: 40px; background: rgba(255,255,255,0.3); position: relative; overflow: hidden; }
.ed-hero__scroll-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--copper); animation: edScroll 1.8s ease-in-out infinite; }
@keyframes edScroll { 0% { top: -40%; } 100% { top: 100%; } }
.ed-hero__scroll span { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* Titulo de pagina interior, DEBAJO del hero (ya sin texto encima de la foto) — mismo
   patron de breadcrumb+titulo centrado que /calaos (.cal-breadcrumb), pero conservando el
   tratamiento tipografico ya afinado de .ed-hero__title para cada frase de cada pagina. */
.ed-titlebar { position: relative; background: var(--white); padding: 48px var(--gutter) 56px; text-align: center; }
.ed-titlebar .cal-breadcrumb { text-align: left; margin-bottom: 32px; }
.ed-titlebar__eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--copper); margin-bottom: 24px; }
.ed-titlebar__title { font-weight: 600; text-transform: uppercase; line-height: 1.15; color: var(--teal); }
.ed-titlebar__title-line { display: block; font-size: clamp(2.4rem, 6vw, 4.6875rem); letter-spacing: 0.06em; }
.ed-titlebar__title-line--accent { color: var(--copper); font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: 0.4em; font-weight: 300; margin-top: 8px; }

/* Intro editorial en 2 columnas */
.ed-intro { width: 87.78%; margin: 0 auto; padding: 5px 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; }
.ed-intro__headline { margin-top: 16px; font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.3; color: var(--teal); }
.ed-intro__headline em { font-style: normal; color: inherit; } /* el titulo va solo en verde/teal, sin acentos en cobre */
.ed-intro__right { position: relative; padding-left: 32px; }
.ed-intro__right p { font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--gray-body); margin-top: 20px; }
.ed-intro__right p:first-child { margin-top: 0; }
.ed-intro__right strong { font-weight: 600; color: var(--teal); }

/* Stats flotantes */
.ed-stats { width: 87.78%; margin: 0 auto; padding: 80px 0; background: var(--cream); }
.ed-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ed-stats__item { text-align: center; padding: 0 20px; border-left: 1px solid rgba(194,130,63,0.25); }
.ed-stats__item:first-child { border-left: none; }
.ed-stats__number { display: block; font-weight: 600; font-size: 52px; color: var(--teal); line-height: 1; }
.ed-stats__number--icono { display: flex; justify-content: center; }
.ed-stats__number--icono svg { width: 52px; height: 52px; }
.ed-stats__dash { font-size: 28px; color: var(--copper); margin: 0 4px; }
.ed-stats__unit { display: block; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--copper); margin-top: 12px; }
.ed-stats__desc { display: block; font-size: 13px; color: var(--gray-body); margin-top: 4px; }

/* Vision: split limpio panel oscuro + foto (sin texto encima de foto, sin overlay) */
.ed-vision { width: 100%; background: var(--teal-deep); }
.ed-vision__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ed-vision__media { position: relative; min-height: 480px; }
.ed-vision__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-vision__content { position: relative; color: var(--white); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.ed-vision__title { margin-top: 16px; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-transform: uppercase; line-height: 1.25; }
.ed-vision__rule { width: 64px; height: 1px; background: var(--copper); margin: 28px 0; }
.ed-vision__lead { font-weight: 300; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--cream); }
.ed-vision__highlights { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.ed-vision__highlight { display: flex; gap: 16px; align-items: flex-start; }
.ed-vision__highlight-icon { color: var(--copper); font-size: 10px; margin-top: 6px; flex-shrink: 0; }
.ed-vision__highlight p { font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.9); }
.ed-vision__highlight strong { font-weight: 600; color: var(--white); }
.ed-vision .btn { margin-top: 40px; align-self: flex-start; }

/* Contacto: split panel oscuro (info) + formulario (Contactenos) */
.ed-contact { width: 100%; background: var(--cream); }
.ed-contact__layout { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; }
.ed-contact__info { position: relative; color: var(--teal); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.ed-contact__title { margin-top: 16px; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-transform: uppercase; line-height: 1.25; }
.ed-contact__rule { width: 64px; height: 1px; background: var(--copper); margin: 28px 0; }
.ed-contact__lead { font-weight: 300; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--gray-body); }
.ed-contact__list { margin-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.ed-contact__item { display: flex; flex-direction: column; gap: 6px; }
.ed-contact__item-label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--copper); }
.ed-contact__item a,
.ed-contact__item-value { font-size: 20px; font-weight: 500; color: var(--teal); letter-spacing: 0.03em; }
.ed-contact__item a:hover { color: var(--copper); }
.ed-contact__form { background: var(--white); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.ed-contact__form .contact-form { margin-top: 32px; }

.ed-contact-map { width: 100%; background: var(--cream); }
.ed-contact-map #contactoMapa { position: relative; z-index: 0; width: 100%; height: 420px; }
.contacto-mapa-marker {
  position: relative;
  width: 110px; height: 90px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  padding: 8px;
}
.contacto-mapa-marker img { width: 100%; height: 100%; object-fit: contain; display: block; }
.contacto-mapa-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--white);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* =====================================================
   CALAOS.HTML (.cal-*) — rediseño de la pagina /calaos: hero corto,
   intro con breadcrumb+titulo+2 columnas+cita+edificio, franja "3 Pilares"
   (stats + 3 fotos), CTA "Vive frente al mar Caribe", tour 3D y vision final.
   ===================================================== */
.cal-hero { position: relative; width: 100%; aspect-ratio: 1440 / 517; color: var(--white); }
.cal-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--teal-deep); }
.cal-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cal-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,29,31,0) 15.3%, rgba(0,29,31,0.8) 99.4%);
}

.cal-intro { position: relative; background: var(--white); padding-top: 19px; overflow: hidden; }
.cal-intro .calaos-decor { top: 310px; }

.cal-breadcrumb { position: relative; z-index: 2; margin: 0 0 0 3.26%; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.cal-breadcrumb a { color: var(--gray-body); }
.cal-breadcrumb a:hover { color: var(--teal); }
.cal-breadcrumb span { color: var(--copper); }

.cal-title-wrap { position: relative; z-index: 2; margin-top: 23px; text-align: center; }
.cal-title {
  font-weight: 600;
  font-size: clamp(2.75rem, 6.667vw, 6rem);
  letter-spacing: 0.3em;
  line-height: 1.22;
  text-transform: uppercase;
  color: var(--teal);
}
.cal-condominio {
  display: block;
  margin-top: 13px;
  font-weight: 300;
  font-size: clamp(1rem, 1.389vw, 1.25rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--copper);
}

.cal-location {
  position: relative; z-index: 2;
  margin-top: 87px;
  text-align: center;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--copper);
}
.cal-columns { position: relative; z-index: 2; height: 162px; margin-top: 57px; }
.cal-col-left,
.cal-col-right {
  position: absolute;
  top: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.667;
  color: var(--gray-body);
}
.cal-col-left { left: 12.71%; width: 37.15%; }
.cal-col-right { left: 58.06%; width: 34.93%; }
.cal-col-left strong,
.cal-col-right strong { font-weight: 600; color: var(--teal); }

.cal-quote {
  position: relative; z-index: 2;
  margin: 89px auto 0;
  width: 63.5%;
  text-align: center;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.778vw, 2.5rem);
  line-height: 1.25;
  color: var(--teal-deep);
}
.cal-quote strong { font-weight: 700; }

.cal-building { position: relative; z-index: 1; margin-top: 10px; }

.cal-pillars { position: relative; background: var(--white); padding-bottom: 90px; }
.cal-pillars-inner { position: relative; z-index: 1; padding: 70px 0 0; background: var(--copper); color: var(--white); }

.cal-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.cal-stat { text-align: center; padding: 0 16px; border-left: 1px solid rgba(255,255,255,0.3); }
.cal-stat:first-child { border-left: none; }
.cal-stat-number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(3.675rem, 8.167vw, 7.35rem);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.556vw, 5rem);
  letter-spacing: 0.35em;
  line-height: 1.225;
  text-transform: uppercase;
}
.cal-stat-number--tight { letter-spacing: 0.1em; }
.cal-stat-number--lg { font-size: clamp(3rem, 6.667vw, 6rem); }
.cal-stat-label {
  display: block;
  margin-top: 29px;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.667vw, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cal-stat-desc {
  display: block;
  margin-top: 11px;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.389vw, 1.25rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cal-pillars-cta { display: block; width: fit-content; margin: 87px auto 0; }
.cal-pillars-title {
  margin: 79px auto 0;
  width: fit-content;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.208vw, 4.6875rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

.cal-pillars-grid {
  position: relative; z-index: 1; margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5px; padding: 0 4.24%;
}
.cal-pillars-grid::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -48px; height: 225px;
  background: var(--copper); z-index: -1;
}
.cal-pillar-media { aspect-ratio: 429 / 660; overflow: hidden; background: var(--teal-deep); }
.cal-pillar-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-pillar-name {
  margin-top: 19px;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.222vw, 2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal);
}
.cal-pillar-desc { margin-top: 8px; font-weight: 300; font-size: clamp(0.95rem, 1.389vw, 1.25rem); line-height: 1.5; color: var(--gray-body); }

.cal-cta { position: relative; width: 100%; aspect-ratio: 1440 / 785; color: var(--white); overflow: hidden; }
.cal-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-cta-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); }
.cal-cta-title {
  position: absolute;
  left: 4.72%;
  top: -24px;
  width: min(64%, 921.6px);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.556vw, 5rem);
  letter-spacing: 0.2em;
  line-height: 1.22;
  text-transform: uppercase;
}
.cal-cta-content { position: absolute; left: 63.96%; top: 68.28%; width: 32.78%; }
.cal-cta-text { font-weight: 400; font-size: clamp(1rem, 1.667vw, 1.5rem); line-height: 1.25; }
.cal-cta-btn { display: block; width: fit-content; margin-top: 21px; }

.cal-tour {
  position: relative;
  background: var(--white);
  /* padding-bottom: 64px; */
}
.cal-tour-cream { position: absolute; left: -1.46%; top: 0; width: 53.54%; height: 380px; background: var(--cream); z-index: 0; }
.cal-tour-title {
  position: relative; z-index: 1;
  padding-top: 101px; margin-left: 12.15%; width: 36.39%;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.736vw, 1.5625rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
}
.cal-tour-text {
  position: relative; z-index: 1;
  margin-top: -55px;
  margin-left: 60.56%; width: 32.78%;
  font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--gray-body);
}
.cal-tour-media {
  position: relative;
  z-index: 1;
  margin: 25px auto 0;
  /* margin-left: 12.15%; */
  width: 100%;
  aspect-ratio: 1168 / 420;
  overflow: hidden;
  background: var(--teal-deep);
}
.cal-tour-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.cal-tour-label {
  position: absolute; left: 20px; bottom: 20px;
  font-weight: 500; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--white); background: rgba(0,29,31,0.55); backdrop-filter: blur(6px);
  padding: 8px 16px; pointer-events: none;
}

.cal-vision { position: relative; background: var(--cream); padding: 49px var(--gutter) 62px; text-align: center; }
.cal-vision-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.222vw, 2rem);
  letter-spacing: 0.35em;
  line-height: 1.22;
  text-transform: uppercase;
  color: var(--teal);
}
.cal-vision-text {
  margin: 48px auto 0;
  max-width: 52.6%;
  font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--gray-body);
}
.cal-vision-btn { display: inline-block; margin-top: 26px; }

/* =====================================================
   UBICACION.HTML (.ubi-*) — rediseño de /ubicacion: hero+intro fusionado
   (estilo .cal-intro), reusa el bloque .ubicacion-* del home tal cual, y
   agrega debajo un resumen de Santa Marta (hero+vision+cta+placeholder galeria).
   ===================================================== */
.ubi-title-wrap { margin-top: 43px; text-align: center; }
.ubi-title-wrap + .cal-location { margin-top: 22px; }

.ubi-intro { position: relative; width: 100%; margin-top: 93px; height: 331px; }
.ubi-intro-title {
  position: absolute; left: 11.32%; top: 0; width: 46%;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.083vw, 1.875rem);
  letter-spacing: 0.1em;
  line-height: 1.43;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.ubi-intro-text {
  position: absolute; left: 58.06%; top: 0.42%; width: 33.61%;
  font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--gray-body);
}
.ubi-intro-text p + p { margin-top: 20px; }
.ubi-amenidades-link {
  position: absolute; left: 58.06%; top: 317px; width: 33.61%;
  text-align: right; margin-top: 0;
}

.ubi-apartamentos-row { width: 87.78%; margin: 0 auto; padding: 43px 0 95px; }
.ubi-apartamentos-cta { display: block; width: fit-content; margin: 0 0 0 auto; }

.ubi-sm-hero { position: relative; width: 100%; aspect-ratio: 1440 / 649; color: var(--white); overflow: hidden; }
.ubi-sm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ubi-sm-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 79.9%);
}
.ubi-sm-title {
  position: absolute; left: 5.07%; top: 0; z-index: 1;
  font-weight: 600;
  font-size: clamp(2.2rem, 6.94vw, 6.25rem);
  letter-spacing: 0.35em;
  line-height: 1;
  text-transform: uppercase;
}
.ubi-sm-hero-heading {
  position: absolute; left: 65.07%; top: 21.88%; width: 40%; z-index: 1;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.736vw, 1.5625rem);
  letter-spacing: 0.35em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ubi-sm-hero-text {
  position: absolute; left: 65.07%; top: 41.14%; width: 29.93%; z-index: 1;
  font-weight: 300; font-size: 16px; line-height: 1.875; color: var(--white);
}
.ubi-sm-hero-text p + p { margin-top: 16px; }
.ubi-sm-hero-text strong { font-weight: 700; }

.ubi-sm-vision { position: relative; background: var(--teal-deep); color: var(--white); padding: 64px 0 96px; }
.ubi-sm-vision-title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.22vw, 2rem);
  letter-spacing: 0.35em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ubi-sm-vision-cols { width: 87.78%; margin: 56px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.ubi-sm-vision-cols p { font-weight: 300; font-size: 16px; line-height: 1.875; }
.ubi-sm-vision-cols p + p { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); }
.ubi-sm-vision-cols strong { font-weight: 700; }

.ubi-sm-cta { width: 100%; background: var(--cream); }
.ubi-sm-cta-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ubi-sm-cta-content { display: flex; flex-direction: column; justify-content: center; padding: 64px 80px; }
.ubi-sm-cta-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.22vw, 2rem);
  letter-spacing: 0.35em;
  color: var(--teal);
  text-transform: uppercase;
  line-height: 1.3;
}
.ubi-sm-cta-text { margin-top: 24px; font-weight: 300; font-size: 18px; line-height: 1.667; color: var(--gray-body); }
.ubi-sm-cta-tag { margin-top: 16px; font-weight: 300; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
.ubi-sm-cta-content .btn { margin-top: 32px; align-self: flex-start; }
.ubi-sm-cta-media { position: relative; aspect-ratio: 721 / 494; }
.ubi-sm-cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ubi-sm-gallery {
    width: 100%;
    background: var(--cream);
    padding: 80px 0 0px;
}
.ubi-sm-gallery-title {
  text-align: center;
  font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.375rem);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 40px;
}
.ubi-sm-gallery-swiper {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    overflow: hidden;
    /* padding-bottom: 40px; */
}
.ubi-sm-gallery-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ubi-sm-gallery-swiper .swiper-pagination-bullet { background: var(--teal); opacity: 0.4; }
.ubi-sm-gallery-swiper .swiper-pagination-bullet-active { background: var(--copper); opacity: 1; }
.ubi-sm-gallery-prev,
.ubi-sm-gallery-next {
  position: absolute;
  top: calc(50% - 20px);
  z-index: 5;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s ease;
}
.ubi-sm-gallery-prev:hover,
.ubi-sm-gallery-next:hover { background: var(--white); }
.ubi-sm-gallery-prev { left: 20px; }
.ubi-sm-gallery-next { right: 20px; }
.ubi-sm-gallery-prev img,
.ubi-sm-gallery-next img { width: 10px; height: auto; filter: brightness(0); }
.ubi-sm-gallery-prev img { transform: rotate(180deg); }
.ubi-sm-gallery-credito {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  font-size: 11px; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  padding: 3px 10px;
}
.ubi-sm-gallery-credito:empty { display: none; }

/* Galeria con lightbox: 1 foto protagonista (alto completo) + 4 fotos en grilla 2x2 a la derecha, todas con
   la misma proporcion real (alto fijo del contenedor) -> evita el collage desordenado de mezclar
   aspect-ratios distintos por fila */
.ed-gallery { width: 87.78%; margin: 0 auto; padding: 0 0 96px; }
.ed-gallery__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 16px; height: 620px; }
.ed-gallery__item { position: relative; overflow: hidden; cursor: pointer; }
.ed-gallery__item--wide { grid-row: 1 / span 2; }
.ed-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ed-gallery__item:hover img { transform: scale(1.06); }
.ed-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,29,31,0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  padding: 40px;
}
.ed-lightbox.is-active { opacity: 1; visibility: visible; }
.ed-lightbox__img { max-width: 100%; max-height: 100%; display: block; }
.ed-lightbox__close {
  position: absolute; top: 24px; right: 32px;
  background: none; border: none; color: var(--white);
  font-size: 40px; line-height: 1; cursor: pointer;
}

/* CTA final en 2 columnas */
.ed-cta { width: 100%; background: var(--cream); }
.ed-cta__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ed-cta__image { position: relative; aspect-ratio: 4/3; }
.ed-cta__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-cta__content { display: flex; flex-direction: column; justify-content: center; padding: 60px 80px; }
.ed-cta__title { margin-top: 16px; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--teal); text-transform: uppercase; line-height: 1.25; }
.ed-cta__rule { width: 64px; height: 1px; background: var(--copper); margin: 28px 0; }
.ed-cta__text { font-weight: 300; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; color: var(--gray-body); }
.ed-cta__sub { margin-top: 16px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--copper); }
.ed-cta .btn { margin-top: 36px; align-self: flex-start; }

/* ===== GRACIAS (confirmacion post-OTP del cotizador) ===== */
.gracias-section { width: 100%; min-height: calc(100vh - 320px); background: var(--cream); padding: 64px var(--gutter) 96px; display: flex; align-items: center; justify-content: center; }
.gracias-card { display: flex; flex-direction: column; align-items: center; }
.gracias-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: var(--white);
  margin-bottom: 28px;
}
.gracias-icon svg { width: 32px; height: 32px; }
.gracias-title { margin-top: 12px; font-weight: 600; text-transform: uppercase; color: var(--teal); font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: 0.04em; }
.gracias-card .body-text { margin-top: 24px; }
.gracias-tagline { margin-top: 16px; font-style: italic; color: var(--copper); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.gracias-card .page-cta { margin-top: 40px; }
.gracias-pasos { margin-top: 72px; width: 100%; max-width: 900px; text-align: center; }
.gracias-pasos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 24px; text-align: left; }
.gracias-paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--copper);
  color: var(--copper);
  font-weight: 600;
  font-size: 14px;
}
.gracias-paso__titulo { margin-top: 16px; font-weight: 500; color: var(--teal); font-size: 18px; }
.gracias-paso .body-text { margin-top: 8px; font-size: 14px; }
.gracias-whatsapp { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gracias-whatsapp .body-text { margin-top: 0; }

/* Reveal on scroll (progressive enhancement, ver main.js) */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* =====================================================
   RESPONSIVE — Tablet
   ===================================================== */
@media (max-width: 1024px) {
  .plano-grid { grid-template-columns: repeat(1, 1fr); }
  .amenidad-grid { grid-template-columns: repeat(2, 1fr); }
  .amenidad-group-body { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }

  .ed-intro { grid-template-columns: 1fr; gap: 32px; }
  .ed-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ed-stats__item:nth-child(3) { border-left: none; }
  .ed-cta__layout { grid-template-columns: 1fr; }
  .ed-cta__image { aspect-ratio: 16/9; }
  .ed-cta__content { padding: 48px 40px; }

  .calaos-intro,
  .ubicacion-intro,
  .amenidades-intro,
  .ubicacion-footer-grid,
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .amenidades-lists { grid-template-columns: 1fr 1fr; }
  .amenidades-ver-todas { grid-column: 2; }
  .apto-viewer-inner { grid-template-columns: 1fr; }
  .apto-plano-col { order: -1; margin-top: 0; }
  .header-phone span { display: none; } /* deja solo el icono, no cabe el numero completo */
  .header-cotizar { padding: 10px 20px; }

  .nav-overlay { grid-template-columns: 1.4fr 1fr; }
  .nav-overlay .nav-link { font-size: clamp(15px, 2.2vw, 20px); gap: 16px; }

  .ed-gallery__grid { height: 460px; }
  .ed-vision__layout { grid-template-columns: 1fr; }
  .ed-vision__media { min-height: 320px; }
  .ed-vision__content { padding: 56px 40px; }

  .ed-contact__layout { grid-template-columns: 1fr; }
  .ed-contact__info,
  .ed-contact__form { padding: 56px 40px; }
}

/* =====================================================
   RESPONSIVE — Mobile
   ===================================================== */
@media (max-width: 640px) {
  .ed-stats { background: none; }
  .ed-intro { background: var(--cream); width: 100%; margin: 0; padding: 25px; }
  .ed-intro__right {
    position: relative;
    padding-left: 0px;
  }
  .cotizar-filtros-btn__texto-pc { display: none; }
  .cotizar-filtros-btn__texto-mobil { display: inline; }
  .header-inner { padding: 20px; }
  .logo img { height: 40px; }
  .header-right { gap: 12px; }
  .header-cotizar { display: none; } /* en mobile el CTA vive en el hero y en el menu; aca solo queda el whatsapp + hamburguesa */

  .nav-overlay { grid-template-columns: 1fr; }
  .nav-overlay-topbar { padding: 0 4px; height: 72px; }
  .nav-overlay-logo img { height: 40px; }
  .nav-overlay-media { display: none; } /* la foto editorial no cabe en mobile, se prioriza el listado */
  .nav-overlay-content { padding: 0 var(--gutter); align-items: center; text-align: center; }
  .nav-overlay-list { width: 100%; }
  .nav-overlay .nav-link { font-size: 4.5vw; gap: 14px; padding: 10px 0; justify-content: center; }
  .nav-overlay-socials { justify-content: center; width: 100%; margin-top: 32px; }
  .nav-overlay-footer { flex-direction: column; align-items: center; gap: 10px; width: 100%; }

  /* Editorial (.ed-*): en mobile se apila todo a 1 columna, se acortan paddings generosos */
  .ed-hero { height: 340px; }
  .ed-contact-map #contactoMapa { height: 280px; }
  .ed-titlebar { padding: 32px var(--gutter) 40px; }
  .ed-titlebar .cal-breadcrumb { margin: 0 0 24px; }
  .ed-titlebar__eyebrow { letter-spacing: 0.3em; }

  /* CALAOS.HTML (.cal-*): apilado a 1 columna, sin las posiciones absolutas de escritorio */
  .cal-hero { aspect-ratio: unset; height: 30vh; min-height: 260px; }
  .cal-intro { padding-top: 40px; }
  .cal-intro .calaos-decor { display: none; }
  .cal-breadcrumb { margin: 0 var(--gutter); }
  .cal-title { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  .cal-location { margin-top: 24px; padding: 0 var(--gutter); font-size: clamp(1rem, 4.5vw, 1.4rem); letter-spacing: 0.25em; }
  .cal-columns { position: static; height: auto; margin-top: 24px; display: flex; flex-direction: column; gap: 24px; padding: 0 var(--gutter); }
  .cal-col-left, .cal-col-right { position: static; width: 100%; text-align: center; }
  .cal-quote { width: 100%; padding: 0 var(--gutter); font-size: clamp(1.3rem, 6vw, 1.6rem); margin-top: 40px; }

  .cal-pillars-inner { padding: 48px var(--gutter) 56px; }
  .cal-pillars { padding-bottom: 48px; }
  .cal-stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .cal-stat:nth-child(odd) { border-left: none; }
  .cal-pillars-title { margin-top: 48px; }
  .cal-pillars-grid { margin-top: 32px; grid-template-columns: 1fr; gap: 16px; padding: 0 var(--gutter); }
  .cal-pillars-grid::before { display: none; }
  .cal-pillar-media { aspect-ratio: 4 / 3; }

  .cal-cta { aspect-ratio: unset; height: auto; min-height: 0; padding-top: 75%; background: var(--teal-deep); }
  .cal-cta-img, .cal-cta-overlay { inset: auto; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .cal-cta-title { position: relative; left: auto; top: auto; z-index: 2; width: 100%; padding: 32px var(--gutter) 0; text-align: center; }
  .cal-cta-content { position: relative; left: auto; top: auto; z-index: 2; width: 100%; padding: 24px var(--gutter) 40px; text-align: center; }
  .cal-cta-btn { margin-left: auto; margin-right: auto; }

  .cal-tour-cream { position: static; width: 100%; height: auto; padding-bottom: 32px; }
  .cal-tour-title { padding-top: 40px; margin-left: 0; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }
  .cal-tour-text { margin-top: 16px; margin-left: 0; width: 100%; padding: 0 var(--gutter); }
  .cal-tour-media { margin: 32px var(--gutter) 0; margin-left: var(--gutter); width: calc(100% - 2 * var(--gutter)); aspect-ratio: 4 / 3; }

  .cal-vision-text { max-width: 100%; }
  .ed-stats { padding: 56px 0; }
  .ed-stats__grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ed-stats__item:nth-child(odd) { border-left: none; }
  .ed-vision__media { min-height: 240px; }
  .ed-vision__content { padding: 48px var(--gutter); }
  .ed-contact__info,
  .ed-contact__form { padding: 40px var(--gutter); }
  .ed-gallery { width: 100%; padding: 0 var(--gutter) 56px; }
  .ed-gallery__grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: 12px; }
  .ed-gallery__item { aspect-ratio: 4/3; }
  .ed-gallery__item--wide { grid-row: auto; aspect-ratio: 16/10; }
  .ed-cta__content { padding: 40px var(--gutter); }

  /* Hero: foto de altura fija (no fixed -> con fixed el degradado ya no coincidia con la altura
     real de la seccion y VOLVER/el texto quedaban sobre la zona clara de la foto, illegibles) */
  .hero { aspect-ratio: unset; min-height: 100vh; }
  .hero-media { position: absolute; }
  .hero-heading { position: absolute; left: 0; right: 0; top: auto; bottom: 0; max-width: 100%; padding: 0 var(--gutter) 32px; }
  .hero-title { white-space: normal; font-size: clamp(3rem, 15vw, 5rem); line-height: 0.95; }
  .hero-quote-text {
    left: 0; right: 0; top: auto; bottom: 222px;
    width: auto; max-width: 100%; font-size: 14px; padding: 0 var(--gutter);
  }
  .hero-cta { left: var(--gutter); right: auto; top: auto; bottom: 160px; padding: 14px 32px; letter-spacing: var(--tracking-mid); }

  .calaos { padding-top: 96px; }
  .calaos-intro { padding-bottom: 24px; }
  .calaos-decor { display: none; } /* elemento decorativo de bleed, oculto en mobile */

  .ubicacion-decor { display: none; } /* elemento decorativo de bleed, oculto en mobile */
  /* el fondo teal tenia una altura fija en vw pensada para el texto en 2 columnas; en 1 columna
     (mobile) el texto es mas alto que esa franja y quedaba texto blanco sobre blanco -> el propio
     intro lleva el fondo, con alto automatico segun su contenido real */
  .ubicacion-teal-bg { display: none; }
  /* el intro heredaba el width:87.78%/margin:auto del desktop -> el fondo quedaba angosto, con
     blanco a los lados en vez de ocupar todo el ancho */
  .ubicacion-intro { background: var(--teal-deep); width: 100%; margin: 0; padding: 96px var(--gutter) 40px; }
  .ubicacion-image { width: 100%; }
  .ubicacion-footer-inner { width: 100%; padding: 24px var(--gutter) 56px; clip-path: none; } /* el corte diagonal dependia de que el conector crema calzara justo detras -> en mobile quedaba blanco ahi; se quita el corte y el panel cobre pasa a ser un rectangulo simple, sin depender de esa alineacion */
  .ubicacion-footer-grid { grid-template-columns: 1fr; }
  .ubicacion-ver-mas { grid-column: 1; margin-top: 8px; }
  .ubicacion-beige-connector { display: none; } /* ya no hace falta: sin el corte, el cobre llega solido hasta el borde de la seccion */

  /* mismo caso que Ubicacion: el bloque crema tenia alto fijo en vw pensado para 2 columnas;
     en 1 columna el texto es mas alto y quedaba sin fondo -> lo lleva el propio intro */
  .amenidades-cream-left { display: none; }
  /* mismo problema que Ubicacion: heredaba el width:87.78%/margin:auto de escritorio -> el crema
     quedaba angosto en vez de ocupar todo el ancho */
  .amenidades-intro { background: var(--cream); width: 100%; margin: 0; padding: 40px var(--gutter); }
  /* el panel oscuro + la barra cobre usan posiciones en px fijos pensadas para 1440px -> en mobile
     se salen del ancho de la foto; se simplifica a texto plano con sombra (el degradado ya oscurece la base) */
  .amenidades-tag::before,
  .amenidades-tag-bar { display: none; }
  .amenidades-tag { left: 5%; bottom: 80px; font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); } /* despegado del pie: si no, choca con el "AMENIDADES" gigante que va pegado abajo */
  .amenidades-media { aspect-ratio: 3 / 4; } /* mas alta que la proporcion panoramica de escritorio, pedido explicito */
  .amenidades-lists { grid-template-columns: 1fr; padding: 40px var(--gutter) 64px; gap: 32px; }
  .amenidades-lists-header { width: auto; }
  .amenidades-lists-underline::after { width: 100%; max-width: 191px; }
  .amenidades-ver-todas { grid-column: 1; justify-self: end; margin-top: 8px; }
  /* con el tracking normal (0.25em) "AMENIDADES" no entra en el ancho movil y se corta -> se
     reduce el tracking y el tope de tamaño para que la palabra completa quede visible */
  .amenidades-giant { font-size: clamp(1.7rem, 10.5vw, 2.6rem); letter-spacing: 0.08em; }

  .section-title-teal {
    font-weight: 600;
    font-size: clamp(1.5rem, 5.2vw, 4.6875rem);
    letter-spacing: var(--tracking-loose);
    color: var(--teal);
    text-transform: uppercase;
    line-height: 1.1;
  }

  .apartamentos-intro { padding: 64px var(--gutter) 40px; }
  .apartamentos-intro .section-title-teal { font-size: clamp(1.8rem, 8vw, 2.75rem); letter-spacing: 0.1em; }
  .apto-tabs { padding: 0 var(--gutter) 32px; }
  .apto-tab { width: auto; flex: 1; padding: 12px 8px; }
  .apto-eyebrow-row { width: 100%; padding: 0 var(--gutter); }
  .apto-viewer-inner { padding: 32px var(--gutter); gap: 24px; }
  .apto-info-area { margin-top: 12px; }
  .apto-info-list { margin-top: 24px; }
  .apto-info .btn { margin-top: 32px; }
  .apto-thumbs { padding: 0 var(--gutter) 64px; }

  /* en desktop el contenido va superpuesto sobre la foto (%); en mobile eso es ilegible ->
     se apila en flujo normal debajo de una foto de altura fija */
  .santamarta-photo { aspect-ratio: unset; height: 30vh; }
  .santamarta-content,
  .santamarta-leermas {
    position: static;
    left: auto; top: auto; transform: none;
    width: auto;
    padding: 0 var(--gutter);
  }
  .santamarta-content { padding-top: 24px; }
  .santamarta-leermas { display: block; text-align: right; padding-bottom: 40px; }
  .santamarta-giant { font-size: clamp(2.2rem, 14vw, 3.5rem); }

  /* debajo de la foto, pedido explicito: fondo beige (no teal) y texto gris (no blanco) */
  .santamarta { background: var(--cream); }
  .santamarta-content .section-subtitle-white,
  .santamarta-content .body-text-white { color: var(--gray-body); }
  .santamarta-leermas.link-underline-white { color: var(--teal); } /* blanco sobre beige no se veia; queda como el resto de los links del sitio */

  /* el footer no tenia override real en mobile (.footer-top no existe en el HTML, quedo de una
     estructura anterior) -> footer-row-1/2 seguian en flex row y se aplastaban en pantallas angostas */
  .footer-inner { padding-top: 56px; }
  .footer-content { max-width: none; padding: 0 var(--gutter); }
  .footer-logo { height: 64px; }
  .footer-row-1 { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 40px; }
  .footer-phones { text-align: left; }
  .footer-row-2 { flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 40px; }
  .footer-legal { max-width: 100%; }
  .footer-partners { gap: 32px; }
  .footer-bar { margin-left: 0; width: 100%; margin-top: 40px; height: 32px; }

  /* UBICACION.HTML (.ubi-*): apilado a 1 columna, sin las posiciones absolutas de escritorio */
  .ubi-intro { height: auto; margin-top: 48px; padding: 0 var(--gutter); }
  .ubi-intro-title { position: static; width: 100%; text-align: center; }
  .ubi-intro-text { position: static; width: 100%; margin-top: 24px; text-align: center; }
  .ubi-amenidades-link { position: static; width: 100%; text-align: center; margin-top: 24px; }
  .ubi-apartamentos-row { width: 100%; padding: 32px var(--gutter) 56px; }
  .ubi-apartamentos-cta { margin: 0 auto; }

  .ubi-sm-hero { aspect-ratio: unset; min-height: 70vh; }
  .ubi-sm-title { position: relative; left: auto; top: auto; z-index: 2; padding: 32px var(--gutter) 0; text-align: center; }
  .ubi-sm-hero-heading { position: relative; left: auto; top: auto; z-index: 2; width: 100%; padding: 24px var(--gutter) 0; text-align: center; }
  .ubi-sm-hero-text { position: relative; left: auto; top: auto; z-index: 2; width: 100%; padding: 16px var(--gutter) 32px; text-align: center; }
  .ubi-sm-hero::after { background: rgba(0,0,0,0.45); }

  .ubi-sm-vision-cols { grid-template-columns: 1fr; gap: 0; width: 100%; padding: 0 var(--gutter); }

  .ubi-sm-cta-layout { grid-template-columns: 1fr; }
  .ubi-sm-cta-content { padding: 40px var(--gutter); }
  .ubi-sm-cta-media { aspect-ratio: 4 / 3; }

  .ubi-sm-gallery { padding: 56px 0 64px; }
  .ubi-sm-gallery-swiper { width: 100%; padding: 0 var(--gutter) 32px; aspect-ratio: 4 / 3; }

  .gracias-section { min-height: calc(100vh - 220px); padding: 48px var(--gutter) 64px; }
  .gracias-pasos__grid { grid-template-columns: 1fr; gap: 32px; }
  .gracias-card .page-cta { flex-direction: column; gap: 20px; }
}


.background-color-3 { background: #b46353; }