/* =====================================================================
   TERRENOS RIVIERA MAYA — Sistema de diseño
   Esencia: el deseo. Sol, mar turquesa, arena caliente, atardecer sobre
   el Caribe — el HERO vende el sueño; el resto del sitio sostiene ese
   sueño con arena cálida, turquesa de aguas someras y coral de atardecer.
   ===================================================================== */

/* La carga de Google Fonts se agrega dinámicamente en el <head>
   (includes/seo-meta.php), según el paquete de tipografía elegido en
   Admin → Configuración → Marca y negocio. */

:root {
  /* Paleta — Caribe mexicano */
  --piedra:      #EDEFE9;   /* arena cálida / fondo principal */
  --piedra-alta: #F8F9F5;   /* tarjetas, blanco arena */
  --selva:       #0B3B45;   /* azul océano profundo / texto principal y secciones oscuras */
  --selva-suave: #3D6470;   /* texto secundario, azul-gris suave */
  --cenote:      #14B8A6;   /* turquesa de aguas someras - acento primario */
  --cenote-alta: #3FD6C4;
  --barro:       #C97D4A;   /* coral de atardecer - acento CTA / énfasis */
  --barro-alta:  #D99566;
  --dorado:      #F3B94D;   /* dorado de hora dorada - detalle cálido, gradientes */
  --obsidiana:   #082026;   /* azul-noche profundo - secciones oscuras */
  --blanco:      #FFFFFF;   /* blanco puro — solo para texto/bordes sobre fondos oscuros (video, fotos) */
  --linea:       rgba(11,59,69,0.22);

  /* Controlables desde Admin → Configuración → Marca y negocio → Colores.
     Los valores de aquí son el respaldo si por algo no cargó la config. */
  --whatsapp-color: #25D366; /* verde oficial de WhatsApp */
  --cta-color:      #C97D4A; /* color de fondo de los botones principales (CTA) */
  --hero-overlay-opacidad: 1; /* intensidad de la máscara oscura sobre el video/imagen del HERO */
  --nav-cta-color: #0B3B45; /* color del botón "Quiero invertir" del menú */
  --logo-alto: 46px; /* altura máxima del logotipo "Logotipo completo" en el encabezado */
  --logo-footer-alto: 44px; /* altura máxima del logotipo en el pie de página */

  /* Colores de fondo por sección — el texto de cada una se ajusta solo
     (claro u oscuro) según qué tan clara u oscura sea la elección. */
  --color-fondo-header: #F8EFDD;    --color-texto-header: #0B3B45;
  --color-fondo-contenido: #EDEFE9; --color-texto-contenido: #0B3B45;
  --color-fondo-tarjetas: #F8F9F5;  --color-texto-tarjetas: #0B3B45; --color-texto-tarjetas-suave: rgba(11,59,69,.72);
  --color-fondo-tarjetas-equipo: #F8F9F5; --color-texto-tarjetas-equipo: #0B3B45; --color-texto-tarjetas-equipo-suave: rgba(11,59,69,.72);
  --color-fondo-footer: #082026;    --color-texto-footer: #F8F9F5;   --color-texto-footer-suave: rgba(248,239,221,.75); --color-texto-footer-borde: rgba(248,239,221,.35);

  --fuente-display: 'Fraunces', serif;
  --fuente-body: 'Space Grotesk', sans-serif;
  --fuente-mono: 'JetBrains Mono', monospace;

  --radio: 2px;
  --contenedor: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-fondo-contenido);
  color: var(--color-texto-contenido);
  font-family: var(--fuente-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--selva);
}
h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.3rem; }

.eyebrow {
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--barro);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--barro);
  display: inline-block;
}

p.lead { font-size: 1.25rem; color: var(--selva-suave); max-width: 60ch; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin-bottom: 18px; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  font-family: var(--fuente-mono); font-size: .74rem;
}
.breadcrumbs li { display: flex; align-items: center; margin: 0 8px 4px 0; }
.breadcrumbs li.breadcrumbs-sep { color: var(--linea); margin-right: 8px; }
.breadcrumbs a { color: var(--selva-suave); text-decoration: none; }
.breadcrumbs a:hover { color: var(--barro); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--selva); font-weight: 500; }
@media (max-width: 480px) {
  .breadcrumbs ol { font-size: .68rem; }
  .breadcrumbs li { margin: 0 6px 4px 0; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-mono);
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid currentColor;
  border-radius: var(--radio);
  transition: all .2s ease;
  cursor: pointer;
  background: none;
}
.btn-primario {
  background: var(--cta-color);
  color: var(--blanco);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(11,59,69,.18);
}
.btn-primario:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(11,59,69,.24); }
.btn-secundario { color: var(--selva); }
.btn-secundario:hover { background: var(--selva); color: var(--piedra-alta); }
.nav-cta .btn-secundario, .nav-cta-movil { color: var(--nav-cta-color, var(--selva)); }
.nav-cta .btn-secundario:hover, .nav-cta-movil:hover { background: var(--nav-cta-color, var(--selva)); color: var(--piedra-alta); }

/* Variantes para usar sobre el video/imagen oscura del HERO */
.btn-hero-secundario {
  color: var(--blanco); border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.btn-hero-secundario:hover { background: rgba(255,255,255,.18); border-color: var(--blanco); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-fondo-header);
  border-bottom: 1px solid var(--linea);
}
.site-header .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.logo {
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-texto-header);
  display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1;
}
.logo span { font-family: var(--fuente-mono); font-size: .62rem; letter-spacing: .16em; color: var(--barro); margin-top: 4px; text-transform: uppercase; }
.logo-img { max-height: var(--logo-alto, 46px); width: auto; display: block; }
.logo-icono { height: 40px; width: 40px; object-fit: contain; display: block; flex-shrink: 0; }
.logo-texto { display: flex; flex-direction: column; }

.footer-logo-icono-texto { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.footer-logo-icono { height: 34px; width: 34px; object-fit: contain; display: block; flex-shrink: 0; }

.nav-principal { display: flex; align-items: center; }
.nav-principal a:not(.nav-cta-movil) { margin-right: 34px; }
.nav-principal a:nth-last-child(2) { margin-right: 0; }
.nav-principal a:not(.nav-cta-movil) {
  text-decoration: none; color: var(--color-texto-header);
  font-size: 1rem; font-weight: 500;
  position: relative;
  white-space: nowrap;
}
.nav-principal a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--barro);
  transition: width .2s ease;
}
.nav-principal a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; }
.nav-cta > * { margin-left: 16px; }
.nav-cta > *:first-child { margin-left: 0; }
.nav-whatsapp {
  color: var(--color-texto-header); text-decoration: none; font-family: var(--fuente-mono); font-size: .78rem;
  display: none;
}
@media (min-width: 900px) { .nav-whatsapp { display: inline-flex; align-items: center; } }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-texto-header); padding: 8px; }
.nav-cta-movil { display: none; }

@media (max-width: 899px) {
  .nav-principal {
    position: fixed; top: 84px; left: 0; right: 0; bottom: 0;
    background: var(--color-fondo-header);
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 24px 40px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 49;
    overflow-y: auto;
  }
  .nav-principal.nav-abierta { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
  .nav-principal a:not(.nav-cta-movil) { padding: 16px 4px; border-bottom: 1px solid var(--linea); font-size: 1.05rem; margin-right: 0; }
  .nav-principal a::after { display: none; }
  .nav-cta-movil {
    display: inline-flex; justify-content: center; margin-top: 14px;
    /* En móvil no existe "hover" (no hay puntero) — se muestra el relleno
       sólido siempre, en vez de depender de un gesto que nadie va a descubrir. */
    background: var(--nav-cta-color, var(--selva));
    color: var(--piedra-alta);
    border-color: transparent;
  }
  .nav-cta { display: none; }
  .menu-toggle { display: block; }
  body.menu-abierto, html.menu-abierto { overflow: hidden; height: 100%; }
}

@media (max-width: 360px) {
  .logo { font-size: 1.02rem; gap: 8px; }
  .logo-icono { height: 32px; width: 32px; }
  .logo-texto span { display: none; }
}

/* ---------- Hero: el sueño primero ---------- */
.hero {
  position: relative;
  min-height: 94vh;
  min-height: 94dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--obsidiana);
  color: var(--piedra-alta);
  padding-top: 0;
  padding-bottom: 110px;
}
.hero-media {
  position: absolute; top:0; left:0; right:0; bottom:0; z-index: 0;
  background: var(--obsidiana);
}
.hero-media > video,
.hero-media > img {
  position: absolute; top:0; left:0; right:0; bottom:0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-overlay {
  position: absolute; top:0; left:0; right:0; bottom:0; z-index: 1;
  opacity: var(--hero-overlay-opacidad, 1);
  background:
    linear-gradient(180deg, rgba(8,32,38,.25) 0%, rgba(8,32,38,.35) 45%, rgba(8,32,38,.92) 100%),
    linear-gradient(90deg, rgba(8,32,38,.55) 0%, rgba(8,32,38,.05) 55%);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero .eyebrow { color: var(--dorado); }
.hero .eyebrow::before { background: var(--dorado); }
.hero h1 { color: var(--blanco); text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero-lead { color: rgba(255,255,255,.88); font-size: 1.3rem; max-width: 52ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; margin: 36px -8px 0; }
.hero-cta-row .btn { margin: 0 8px 8px; }

.hero-chips { display: flex; flex-wrap: wrap; margin: 56px -7px 0; }
.hero-chip {
  display: flex; align-items: baseline;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  padding: 12px 18px;
  border-radius: 40px;
  font-family: var(--fuente-mono);
  margin: 0 7px 10px;
}
.hero-chip strong { font-family: var(--fuente-display); font-size: 1.3rem; color: var(--dorado); font-weight: 600; margin-right: 8px; }
.hero-chip span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.85); }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; z-index: 3; line-height: 0; }
.hero-wave path { fill: var(--color-fondo-contenido); }

/* Fondo de respaldo cuando aún no hay video ni imagen: gradiente CSS puro
   (cubre cualquier proporción de pantalla sin recortes impredecibles) +
   sol y palmeras como elementos anclados de forma independiente. */
.hero-fallback { position: absolute; top:0; left:0; right:0; bottom:0; overflow: hidden; }
.hero-fallback-cielo {
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(180deg,
    #1B4E5A 0%, #2E6B72 22%, #4C8C86 40%, #E8B96E 58%,
    #FF8A5B 66%, #2E9C93 74%, #0F6E70 88%, var(--selva) 100%);
}
.hero-fallback-sol {
  position: absolute; top: 30%; right: 12%;
  width: 26vw; max-width: 340px; height: 26vw; max-height: 340px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6DC 0%, #FBDD8B 45%, rgba(251,221,139,0) 72%);
}
.hero-fallback-sol::after {
  content: '';
  position: absolute; top: 32%; left: 32%; right: 32%; bottom: 32%;
  border-radius: 50%;
  background: #FFF3D6;
}
.hero-fallback-olas { position: absolute; left: 0; right: 0; bottom: 14%; width: 100%; height: 12%; }
.hero-fallback-palmera { position: absolute; bottom: -2%; width: 26vw; max-width: 320px; height: auto; opacity: .92; }
.hero-fallback-palmera-izq { left: -3%; }
.hero-fallback-palmera-der { right: -3%; transform: scaleX(-1); }

/* ============================================================
   VARIANTE: Dividido — foto de un lado, texto del otro, sobre
   un color sólido configurable (con contraste automático).
   ============================================================ */
.hero.hero-dividido {
  min-height: auto;
  align-items: stretch;
  background: var(--color-fondo-hero);
  color: var(--color-texto-hero);
  padding-bottom: 0;
}
.hero-dividido .hero-content { display: flex; flex-direction: column; justify-content: center; padding: 90px 0; max-width: 640px; }
.hero-dividido .eyebrow { color: var(--dorado); }
.hero-dividido .eyebrow::before { background: var(--dorado); }
.hero-dividido h1 { color: var(--color-texto-hero); text-shadow: none; }
.hero-dividido .hero-lead { color: var(--color-texto-hero-suave); }
.hero-dividido .btn-hero-secundario { color: var(--color-texto-hero); border-color: var(--color-chip-borde-hero); background: var(--color-chip-fondo-hero); }
.hero-dividido .hero-chip { background: var(--color-chip-fondo-hero); border-color: var(--color-chip-borde-hero); }
.hero-dividido .hero-chip span { color: var(--color-texto-hero-suave); }
.hero-dividido-media { flex: 1 1 46%; position: relative; min-height: 480px; }
.hero-dividido-media video, .hero-dividido-media img {
  position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 901px) {
  .hero-dividido { display: flex; }
  .hero-dividido .contenedor.hero-content { flex: 1 1 54%; padding-left: 64px; padding-right: 48px; }
}
@media (max-width: 900px) {
  .hero.hero-dividido { display: block; min-height: auto; }
  .hero-dividido-media { display: block; width: 100%; height: 280px; min-height: 0; position: relative; overflow: hidden; }
  .hero-dividido-media video, .hero-dividido-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-dividido .hero-content { display: block; padding: 50px 24px 60px; max-width: none; }
}

/* ============================================================
   VARIANTE: Minimalista — solo texto, sin foto, sobre un color
   sólido configurable (con contraste automático).
   ============================================================ */
.hero.hero-minimalista {
  min-height: 68vh;
  min-height: 68dvh;
  align-items: center;
  background: var(--color-fondo-hero);
  color: var(--color-texto-hero);
  padding-bottom: 90px;
}
.hero-minimalista .eyebrow { color: var(--dorado); }
.hero-minimalista .eyebrow::before { background: var(--dorado); }
.hero-minimalista h1 { color: var(--color-texto-hero); text-shadow: none; }
.hero-minimalista .hero-lead { color: var(--color-texto-hero-suave); }
.hero-minimalista .btn-hero-secundario { color: var(--color-texto-hero); border-color: var(--color-chip-borde-hero); background: var(--color-chip-fondo-hero); }
.hero-minimalista .hero-chip { background: var(--color-chip-fondo-hero); border-color: var(--color-chip-borde-hero); }
.hero-minimalista .hero-chip span { color: var(--color-texto-hero-suave); }
@media (max-width: 900px) {
  .hero.hero-minimalista { min-height: 52vh; min-height: 52dvh; padding-bottom: 60px; }
}

@media (max-width: 700px) {
  .hero-fallback-sol { width: 40vw; max-width: none; height: 40vw; max-height: none; top: 24%; }
  .hero-fallback-palmera { width: 42vw; max-width: none; }
}

@media (max-width: 900px) {
  .hero { min-height: 86vh; min-height: 86dvh; padding-bottom: 80px; }
  .hero-chip { padding: 10px 14px; }
}
@media (max-width: 480px) {
  .hero-cta-row { flex-direction: column; margin-left: 0; margin-right: 0; }
  .hero-cta-row .btn { width: 100%; justify-content: center; margin: 0 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* ---------- Secciones generales ---------- */
section { padding: 96px 0; }
.section-porque { background: var(--color-fondo-porque); color: var(--color-texto-porque); }
.section-porque h2 { color: var(--color-texto-porque); }
.section-nosotros-valores { background: var(--color-fondo-nosotros); color: var(--color-texto-nosotros); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.section-head .btn { flex-shrink: 0; }

/* ---------- Tarjetas de proyecto ---------- */
.grid-proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1000px) { .grid-proyectos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-proyectos { grid-template-columns: 1fr; } }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.paginacion-num, .paginacion-flecha {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--linea); border-radius: 20px;
  font-family: var(--fuente-mono); font-size: .85rem;
  text-decoration: none; color: var(--color-texto-contenido);
  transition: background .15s ease, border-color .15s ease;
}
.paginacion-num:hover, .paginacion-flecha:hover { background: var(--piedra-alta); border-color: var(--barro); }
.paginacion-actual { background: var(--barro); border-color: var(--barro); color: var(--blanco); font-weight: 600; }

.card-proyecto {
  background: var(--color-fondo-tarjetas);
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(11,59,69,.05), 0 10px 28px rgba(11,59,69,.06);
  text-decoration: none;
  color: var(--color-texto-tarjetas);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-proyecto:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(11,59,69,.18); }

.card-media { position: relative; aspect-ratio: 4/3.1; overflow: hidden; background: var(--selva); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-proyecto:hover .card-media img { transform: scale(1.07); }

/* Degradado inferior para que el precio siempre sea legible sobre cualquier foto */
.card-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,32,38,0) 55%, rgba(8,32,38,.75) 100%);
  pointer-events: none;
}

/*
 * Marca de agua (Configuración → Marca → "Marca de agua en fotos").
 * La imprime includes/medios.php::marca_agua_overlay() dentro de un
 * contenedor con position:relative + overflow:hidden (tarjetas de
 * propiedad, galería de la ficha y el visor de pantalla completa) --
 * el mismo <span>, la misma regla, en los 3 lugares.
 *
 * Es puramente visual/CSS: nunca toca el archivo de la foto. `opacity` en
 * el propio elemento (no en el color de fondo) es lo que la deja
 * semi-transparente de forma pareja, sin importar si el logo que subieron
 * ya traía transparencia o es un PNG sólido normal. El mosaico se agranda
 * más allá del contenedor y se rota; el overflow:hidden del contenedor es
 * lo que lo recorta de vuelta a la foto.
 */
.marca-agua-overlay {
  position: absolute; inset: -75%; z-index: 1;
  background-repeat: repeat;
  background-size: 130px auto;
  transform: rotate(-30deg);
  opacity: .16;
  pointer-events: none;
}
@media (max-width: 640px) {
  .marca-agua-overlay { background-size: 90px auto; }
}

.card-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--piedra-alta); color: var(--selva);
  font-family: var(--fuente-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 10px;
}
.card-badge-estatus {
  position: absolute; top: 48px; left: 16px; z-index: 2;
  color: var(--blanco); text-shadow: 0 1px 3px rgba(8,32,38,.65);
  font-family: var(--fuente-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
}

.card-precio-overlay {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  color: var(--blanco);
  font-family: var(--fuente-mono);
  line-height: 1.15;
}
.card-precio-overlay small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); margin-bottom: 2px; }
.card-precio-overlay strong { display: block; font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

.card-body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-ubicacion { font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--barro); }
.card-codigo { color: var(--selva-suave); }
.card-body h3 { margin: 0; font-size: 1.4rem; }
.card-body p { margin: 0; color: var(--color-texto-tarjetas-suave); font-size: .94rem; line-height: 1.5; }
.card-caracteristicas { display: flex; gap: 14px; font-size: .82rem; color: var(--color-texto-tarjetas-suave); }

.card-meta {
  margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--linea);
  display: flex; justify-content: space-between; align-items: center;
}
.card-m2 { font-family: var(--fuente-mono); font-size: .8rem; color: var(--color-texto-tarjetas-suave); }
.card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fuente-mono); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--barro);
  /* Si la propiedad no tiene superficie, .card-m2 no se imprime y este
     queda como único hijo de .card-meta -- margin-left:auto lo mantiene
     pegado a la derecha igual que con justify-content:space-between. */
  margin-left: auto;
}
.card-cta svg { transition: transform .25s ease; }
.card-proyecto:hover .card-cta svg { transform: translateX(4px); }

@media (max-width: 480px) {
  .card-body h3 { font-size: 1.25rem; }
  .card-precio-overlay strong { font-size: 1.3rem; }
}

/* ---------- Franja de confianza / NAP ---------- */
/* Franja de confianza — un solo párrafo centrado, sin columnas ni tarjetas,
   así nunca hay nada que "se rompa" en ningún ancho de pantalla. El texto
   ya trae su propio límite de ancho de lectura vía .lead (60ch). */
.franja-confianza { padding: 46px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* ---------- Detalle de proyecto ---------- */
.detalle-hero { padding: 50px 0 0; }

/* Barra de acciones (compartir / descargar PDF) — justo debajo del
   resumen de la propiedad, antes de la galería. Mobile-first: los
   botones ocupan lo necesario y se envuelven si no caben en una línea. */
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 28px; }
.btn-accion {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fuente-mono); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
  font-weight: 600;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radio);
  padding: 11px 16px; cursor: pointer; transition: all .2s ease; line-height: 1;
  /* Mobile-first: sólido por defecto. En touch no existe :hover, así que
     si el estado "bonito" solo aparece al pasar el mouse, en celular
     nunca se ve — por eso aquí el sólido es el punto de partida. */
  background: var(--color-acciones, var(--selva)); color: var(--blanco);
}
.btn-accion svg { flex-shrink: 0; }

/* Solo en dispositivos que de verdad tienen mouse (hover:hover) se usa
   el estilo "fantasma hasta pasar el cursor" — ahí sí tiene sentido
   como micro-interacción. En touch (celular/tablet) el botón se queda
   siempre sólido, porque :hover nunca se dispara. */
@media (hover: hover) and (pointer: fine) {
  .btn-accion {
    background: var(--piedra-alta); color: var(--color-acciones, var(--selva));
    border-color: var(--linea);
  }
  .btn-accion:hover {
    background: var(--color-acciones, var(--selva)); color: var(--blanco);
    border-color: var(--color-acciones, var(--selva));
  }
}

/* Botón sólido de WhatsApp (ficha de propiedad, tarjeta del asesor,
   tarjeta de equipo) — mismo color configurable que el botón flotante
   (--whatsapp-color), pero de fondo sólido para que se reconozca de
   inmediato como una acción de WhatsApp real. */
.btn-whatsapp {
  background: var(--whatsapp-color); color: var(--blanco) !important; border-color: transparent !important;
  font-weight: 600;
}
.btn-whatsapp:hover { filter: brightness(1.08); }

.compartir-wrap { position: relative; }
.compartir-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  display: none; flex-direction: column; min-width: 190px;
  background: var(--piedra-alta); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(11,59,69,.16); padding: 6px; gap: 2px;
}
.compartir-menu-abierto { display: flex; }
.compartir-opcion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--fuente-body); font-size: .88rem; color: var(--selva);
  text-decoration: none; background: none; border: none; border-radius: var(--radio);
  padding: 10px 12px; cursor: pointer; text-align: left;
}
.compartir-opcion:hover { background: var(--piedra); }
.compartir-opcion svg { flex-shrink: 0; color: var(--selva-suave); }

/* En pantallas angostas, el menú se estira a todo el ancho disponible
   para que nunca se salga del viewport por el lado derecho. */
@media (max-width: 480px) {
  .compartir-menu { left: 0; right: 0; min-width: 0; width: 100%; }
  .detalle-acciones { width: 100%; }
  .btn-accion, .compartir-wrap { flex: 1 1 auto; }
  .btn-accion { justify-content: center; }
  .compartir-wrap .btn-accion { width: 100%; }
}

.detalle-sobre-proyecto { padding-top: 18px; }
.detalle-descripcion { color: var(--selva-suave); font-size: 1.02rem; }
.detalle-subtitulo { margin-top: 50px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

/* Nombre de la propiedad en la ficha — es texto libre que cualquiera
   puede escribir tan corto o tan largo como quiera (a diferencia de los
   titulares de portada del home/nosotros/listado, que sí son copy corto
   y curado a propósito). Por eso usa un tope más prudente que el h1
   genérico del resto del sitio. */
.detalle-titulo { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.detalle-mapa { border: 1px solid var(--linea); aspect-ratio: 16/8; }
.detalle-mapa iframe { border: 0; }
.detalle-ubicacion-imagen { border: 1px solid var(--linea); }
.detalle-ubicacion-imagen img { width: 100%; display: block; }
.ficha-precio-nota { margin: 0 0 16px; font-size: .82rem; color: var(--selva-suave); }
.ficha .btn + .btn { margin-top: 10px; }
.detalle-galeria { display: grid; gap: 10px; margin-top: 40px; }
.detalle-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detalle-galeria a { position: relative; min-height: 0; min-width: 0; overflow: hidden; }

/* 1 sola imagen: banner ancho de alto impacto, sin espacio desperdiciado */
.detalle-galeria--1 { grid-template-columns: 1fr; }
.detalle-galeria--1 a { aspect-ratio: 21/8; }

/* 2 imágenes: mitad y mitad */
.detalle-galeria--2 { grid-template-columns: 1fr 1fr; }
.detalle-galeria--2 a { aspect-ratio: 4/3; }

/* 3 imágenes: una grande + dos apiladas */
.detalle-galeria--3 { grid-template-columns: 2fr 1fr; height: 440px; }
.detalle-galeria--3 a:first-child { grid-row: span 2; }

/* 4 imágenes: mosaico completo (diseño original) */
.detalle-galeria--4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); height: 440px; }
.detalle-galeria--4 a:first-child { grid-column: 1; grid-row: span 3; }

@media (max-width: 800px) {
  .detalle-galeria--3, .detalle-galeria--4 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .detalle-galeria--3 a:first-child, .detalle-galeria--4 a:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .detalle-galeria--3 a:not(:first-child), .detalle-galeria--4 a:not(:first-child) { aspect-ratio: 4/3; }
}

.detalle-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; margin-top: 60px; }
@media (max-width: 900px) { .detalle-grid { grid-template-columns: 1fr; } .ficha { position: static; } }

.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contacto-grid > * { min-width: 0; }
@media (max-width: 800px) { .contacto-grid { grid-template-columns: 1fr; gap: 40px; } .contacto-grid .ficha { position: static; } }

.nosotros-grid { display: flex; flex-wrap: wrap; gap: 40px; }
.nosotros-grid > div { flex: 1 1 220px; }
@media (max-width: 500px) { .nosotros-grid > div { flex-basis: 100%; } }

.porque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 800px) { .porque-grid { grid-template-columns: 1fr; gap: 32px; } }
.porque-grid .eyebrow { color: var(--cenote-alta); }
.porque-grid .lead { color: var(--color-texto-porque-suave); }
.porque-grid .lista-amenidades { grid-template-columns: 1fr; color: var(--piedra-alta); }

.eyebrow-centrado { justify-content: center; }
.mt-30 { margin-top: 30px; }
.mt-20 { margin-top: 20px; }
.section-sin-padding-inferior { padding-bottom: 40px; }
.section-sin-padding-superior { padding-top: 0; }
.filtros-form { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; max-width: 640px; }
.filtro-campo { flex: 1; min-width: 180px; }
.section-padding-reducido { padding-bottom: 20px; }
.texto-legal { font-size: 1rem; line-height: 1.75; color: var(--selva-suave); }
.lead-centrado { margin: 0 auto 30px; }
@media (max-width: 480px) {
  .detalle-galeria--2, .detalle-galeria--3, .detalle-galeria--4 { grid-template-columns: 1fr; height: auto; }
  .detalle-galeria a { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4/3 !important; }
}

.detalle-galeria-extra-titulo {
  font-family: var(--fuente-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--selva-suave); margin: 16px 0 0;
}
.detalle-galeria-extra {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px;
}
.detalle-galeria-extra a { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.detalle-galeria-extra img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Visor de fotos (lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,32,38,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease;
}
.lightbox.lightbox-abierto { opacity: 1; visibility: visible; pointer-events: auto; }
body.lightbox-bloqueado { overflow: hidden; }
/* Envuelve la <img> del visor para que la marca de agua (si está activa)
   se recorte exactamente al tamaño real de la foto mostrada, no a toda la
   pantalla -- display:inline-block hace que el contenedor se "encoja" al
   tamaño con el que el navegador ya dibuja la imagen. */
.lightbox-img-wrap { position: relative; display: inline-block; overflow: hidden; line-height: 0; }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block; }
.lightbox-cerrar {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--blanco); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-cerrar:hover { background: rgba(255,255,255,.22); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--blanco); font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.22); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-contador {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--fuente-mono); font-size: .8rem; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08); padding: 6px 14px; border-radius: 20px;
}
@media (max-width: 600px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-cerrar { top: 10px; right: 10px; }
  .lightbox-img { max-width: 94vw; max-height: 78vh; }
}

.video-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,32,38,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease;
  padding: 60px 20px;
}
.video-modal.lightbox-abierto { opacity: 1; visibility: visible; pointer-events: auto; }
.video-modal-marco { width: 100%; max-width: 1000px; aspect-ratio: 16/9; }
.video-modal-marco iframe { width: 100%; height: 100%; border: 0; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
@media (max-width: 600px) { .video-modal { padding: 70px 14px; } }

.ficha {
  background: var(--piedra-alta); border: 1px solid var(--linea); padding: 30px; position: sticky; top: 110px;
  box-shadow: 0 1px 2px rgba(11,59,69,.05), 0 10px 28px rgba(11,59,69,.06);
}
.hero-panel-titulo { font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--selva-suave); margin-bottom: 18px; }
.ficha-precio { font-family: var(--fuente-display); font-size: clamp(1.5rem, 6vw, 2.1rem); color: var(--barro); margin-bottom: 4px; }
.ficha-linea {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 0; border-bottom: 1px dashed var(--linea); font-size: .9rem;
  overflow-wrap: break-word; word-break: break-word;
}
.ficha-linea span:first-child {
  font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--selva-suave);
}
.ficha-linea span:last-child { font-family: var(--fuente-mono); font-size: .95rem; color: var(--selva); }
.ficha .btn { width: 100%; justify-content: center; margin-top: 22px; }

.ficha-agente { position: static; margin-top: 20px; padding: 24px; }
.ficha-agente-perfil { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ficha-agente-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ficha-agente-sin-foto {
  display: flex; align-items: center; justify-content: center;
  background: var(--piedra); color: var(--selva);
  font-family: var(--fuente-display); font-size: 1.4rem; font-weight: 600;
}
.ficha-agente-perfil strong { display: block; font-size: 1rem; }
.ficha-agente-puesto { margin: 2px 0 0; font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--selva-suave); }

.lista-amenidades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .lista-amenidades { grid-template-columns: 1fr; } }
.lista-amenidades li { font-size: .92rem; padding-left: 22px; position: relative; }
.lista-amenidades li::before { content: '◆'; position: absolute; left: 0; color: var(--cenote); font-size: .6rem; top: 6px; }

.faq-item { border-bottom: 1px solid var(--linea); padding: 22px 0; }
.faq-item h4 { margin-bottom: 8px; font-family: var(--fuente-body); font-size: 1.05rem; }
.faq-item p { margin: 0; color: var(--selva-suave); }

/* ---------- Formulario de contacto ---------- */
.form-contacto { display: grid; gap: 18px; max-width: 620px; min-width: 0; }
.form-contacto > * { min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
.form-row > * { min-width: 0; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
label { font-family: var(--fuente-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 8px; color: var(--selva-suave); }
input, select, textarea {
  width: 100%; padding: 13px 14px; font-family: var(--fuente-body); font-size: .95rem;
  border: 1px solid var(--linea); background: var(--piedra-alta); color: var(--selva); border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cenote); outline-offset: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cenote); outline-offset: 2px; }
textarea { resize: vertical; min-height: 120px; }

.ayuda { font-size: .8rem; color: var(--selva-suave); }

.alerta { padding: 16px 18px; border-left: 3px solid var(--cenote); background: rgba(47,163,155,.1); font-size: .92rem; margin-bottom: 24px; }
.alerta-error { border-color: var(--barro); background: rgba(181,98,47,.1); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-fondo-footer); color: var(--color-texto-footer); padding: 70px 0 30px; }
.footer-grid { display: flex; flex-wrap: wrap; }
.footer-grid > div {
  box-sizing: border-box;
  flex: 1;
  min-width: 200px;
  margin-right: 40px;
  margin-bottom: 30px;
}
.footer-grid > div:first-child { flex: 1.4; }
.footer-grid > div:nth-child(4) { margin-right: 0; }
@media (max-width: 480px) {
  .footer-grid { flex-direction: column; }
  .footer-grid > div { margin-right: 0; }
}
.site-footer h4 { color: var(--color-texto-footer); font-family: var(--fuente-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.site-footer a { color: var(--color-texto-footer-suave); text-decoration: none; display: block; margin-bottom: 10px; font-size: .92rem; overflow-wrap: break-word; word-break: break-word; }
.site-footer a:hover { color: var(--cenote-alta); }

.footer-social { display: flex; margin-top: 18px; }
.footer-logo-img { max-height: var(--logo-footer-alto, 44px); max-width: 220px; display: block; margin-bottom: 6px; }
.footer-eslogan { color: var(--color-texto-footer-suave); max-width: 34ch; font-size: .92rem; }
.footer-direccion { pointer-events: none; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--color-texto-footer-borde);
  margin: 0 12px 0 0;
  color: var(--color-texto-footer);
  transition: border-color .2s ease, background .2s ease;
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:last-child { margin-right: 0; }
.footer-social a:hover { border-color: var(--cenote-alta); background: rgba(63,214,196,.12); }

.footer-bottom {
  margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--color-texto-footer-borde);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--fuente-mono); font-size: .74rem; color: var(--color-texto-footer-suave);
}
.footer-marca-agua {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-texto-footer-borde);
  font-family: var(--fuente-mono); font-size: .72rem; color: var(--color-texto-footer-suave);
  text-align: center;
}
.footer-marca-agua a { color: var(--cenote); text-decoration: none; font-weight: 600; }
.footer-marca-agua a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-marca-agua { padding-bottom: 110px; }
}

/* ---------- Utilidades ---------- */
.text-center { text-align: center; }
.m-0 { margin: 0; }
.w-auto { width: auto; }
.contenedor-angosto { max-width: 820px; }
.texto-claro { color: var(--color-texto-nosotros); }
.texto-claro-suave { color: var(--color-texto-nosotros-suave); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.preview-imagen { max-width: 280px; border-radius: 8px; margin-bottom: 10px; display: block; }
.mb-0 { margin-bottom: 0; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ficha-estatica { position: static; height: fit-content; }
.form-contacto .ayuda { margin: 4px 0 0; }
.badge-estatus {
  display: inline-block; font-family: var(--fuente-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 5px 10px; border: 1px solid var(--linea); white-space: nowrap;
}
.whatsapp-flotante {
  position: fixed; bottom: 26px; right: 26px; z-index: 60;
  background: var(--whatsapp-color); color: var(--blanco); border-radius: 50%;
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s ease, filter .2s ease;
}
.whatsapp-flotante:hover { transform: scale(1.08); filter: brightness(.92); }

.grid-equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
@media (max-width: 900px) { .grid-equipo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-equipo { grid-template-columns: 1fr; } }
.tarjeta-agente {
  text-align: center; padding: 36px 28px;
  background: var(--color-fondo-tarjetas-equipo);
  color: var(--color-texto-tarjetas-equipo);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11,59,69,.05), 0 10px 28px rgba(11,59,69,.06);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column; align-items: center;
}
.tarjeta-agente:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(11,59,69,.14); }
.tarjeta-agente-foto {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 18px; display: block;
  border: 3px solid var(--color-fondo-tarjetas-equipo);
  box-shadow: 0 0 0 1px var(--linea);
}
.tarjeta-agente-sin-foto {
  display: flex; align-items: center; justify-content: center;
  background: var(--piedra-alta); color: var(--selva);
  font-family: var(--fuente-display); font-size: 2.2rem; font-weight: 600;
}
.tarjeta-agente h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--color-texto-tarjetas-equipo); }
.tarjeta-agente-puesto { margin: 0 0 14px; color: var(--barro); font-family: var(--fuente-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.tarjeta-agente-bio { margin: 0 0 20px; color: var(--color-texto-tarjetas-equipo-suave); font-size: .9rem; line-height: 1.55; }
.tarjeta-agente-contacto { margin-top: auto; }
/* El botón usa el mismo estilo que en la ficha de propiedad (.btn-secundario),
   pero aquí se ajusta a var(--color-texto-tarjetas-equipo) en vez del color
   fijo del sitio — así se mantiene legible sin importar qué color de fondo
   se elija para estas tarjetas específicamente. */
.tarjeta-agente .btn-secundario { color: var(--color-texto-tarjetas-equipo); }
.tarjeta-agente .btn-secundario:hover { background: var(--color-texto-tarjetas-equipo); color: var(--color-fondo-tarjetas-equipo); }