/*
Theme Name:  RS BAJA
Theme URI:   https://rsbaja.com
Author:      RS BAJA
Author URI:  https://rsbaja.com
Description: Tema personalizado ligero y premium para RS BAJA | Administración y Gestión Inmobiliaria. Sin page builders, sin frameworks. Diseño editorial, ejecutivo y sobrio para propiedades de alto valor en Tijuana y Baja California.
Version:     1.1.0
Requires at least: 6.0
Tested up to:      6.6
Requires PHP:      8.0
License:     Propietario
Text Domain: rs-baja
*/

/* ============================================================
   ÍNDICE
   ------------------------------------------------------------
   1.  Variables CSS
   2.  Reset y base
   3.  Tipografía y utilidades
   4.  Botones
   5.  Header y navegación
   6.  Menú móvil
   7.  Hero
   8.  Sección 360°
   9.  Propiedades (portafolio)
   10. Por qué RS BAJA (why-grid)
   11. Propiedad destacada (editorial 50/50)
   12. Proceso
   13. Banda CTA
   14. Footer
   15. Animación reveal
   16. Responsive 1100px
   17. Responsive 860px
   18. Responsive 560px
   ============================================================ */


/* ----------------------------------------------------------
   1. VARIABLES CSS
   ---------------------------------------------------------- */
:root {
  /* Paleta */
  --bg:           #07111b;
  --bg-2:         #0d1824;
  --panel:        rgba(14, 23, 34, .78);
  --panel-solid:  #101b28;
  --line:         rgba(255, 255, 255, .10);
  --text:         #eef2f5;
  --muted:        #b5c0ca;
  --soft:         #8fa1b1;
  --accent:       #34a9cc;
  --accent-soft:  #76cce3;
  --white:        #ffffff;

  /* Sombras y radios */
  --shadow:       0 20px 60px rgba(0, 0, 0, .30);
  --radius:       22px;

  /* Layout */
  --max:          1280px;
}


/* ----------------------------------------------------------
   2. RESET Y BASE
   ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(52, 169, 204, .12), transparent 25%),
    linear-gradient(180deg, #07111b 0%, #0a1520 55%, #0b1723 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
button { font: inherit; }

/* WordPress añade clases al body; evitar que afecten el layout */
.home,
.page { background: none; }


/* ----------------------------------------------------------
   3. TIPOGRAFÍA Y UTILIDADES
   ---------------------------------------------------------- */
.container {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}

.section    { padding: 96px 0; }
.section-sm { padding: 72px 0; }

.eyebrow {
  display: inline-block;
  color: var(--accent-soft);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 14px;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 60px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 18px;
  color: #f6f6f3;
}

.section-copy {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 760px;
  margin: 0;
}


/* ----------------------------------------------------------
   4. BOTONES
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
  cursor: pointer;
  min-height: 50px;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #2f8eaa 100%);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(52, 169, 204, .22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(52, 169, 204, .32);
}

.btn-secondary {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, .10);
  transform: translateY(-2px);
}


/* ----------------------------------------------------------
   5. HEADER Y NAVEGACIÓN
   ---------------------------------------------------------- */

/* CAMBIAR LOGO: Apariencia > Personalizar > Identidad del sitio
   CAMBIAR MENÚ: Apariencia > Menús → asignar a "Menú Principal" */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(7, 17, 27, .84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Barra interna del header */
.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- Logo / Marca --- */
/* NOTA: cuando WordPress usa custom_logo genera un <a> propio.
   .brand-logo-wrap contiene ese <a> alineándolo al layout */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo custom de WordPress */
.brand-logo-wrap .custom-logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-logo-wrap .custom-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

/* Logo fallback (rsbaja_logo_fallback) */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}
.brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}
.brand-text { min-width: 0; }
.brand-title {
  font-size: 15px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #f7f8f9;
  white-space: nowrap;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--soft);
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}

/* --- Menú desktop ---
   wp_nav_menu genera: <ul class="nav-menu"><li>...<a>
   WordPress añade clases como current-menu-item, current_page_item */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li { position: relative; }
.nav-menu a {
  display: block;
  color: #dbe2e8;
  font-size: 14px;
  opacity: .92;
  padding: 4px 0;
  position: relative;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--accent-soft);
  transition: width .28s ease;
}
.nav-menu a:hover::after                              { width: 100%; }
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after,
.nav-menu .current-menu-ancestor > a::after           { width: 100%; }

/* Acciones del header */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--white);
  cursor: pointer;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transition: background .2s ease;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .08); }


/* ----------------------------------------------------------
   6. MENÚ MÓVIL
   ---------------------------------------------------------- */
.mobile-panel {
  position: fixed;
  inset: 84px 16px auto 16px;
  z-index: 999;
  background: rgba(9, 17, 27, .97);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: 8px 0;
  /* Oculto por defecto: visibility + opacity para transición suave */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mobile-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Links generados por wp_nav_menu dentro del panel móvil */
.mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-panel li { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mobile-panel li:last-child { border-bottom: 0; }

.mobile-panel a {
  display: block;
  padding: 15px 22px;
  color: #e7edf2;
  font-size: 15px;
  transition: color .2s ease;
}
.mobile-panel a:hover { color: var(--accent-soft); }

/* Botón WhatsApp al pie del panel móvil */
.mobile-panel .mobile-wa {
  display: block;
  margin: 10px 14px 8px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, #2f8eaa 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border: none;
}


/* ----------------------------------------------------------
   7. HERO
   ---------------------------------------------------------- */

/* CAMBIAR VIDEO: /assets/video/hero-rsbaja.mp4
   CAMBIAR POSTER: /assets/img/property-hero-poster.jpg */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #08111a;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mejora rendimiento en navegadores que lo soportan */
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 12, 18, .28)  0%,
      rgba(7, 17, 27, .45) 36%,
      rgba(7, 17, 27, .92) 100%),
    radial-gradient(circle at 78% 24%, rgba(52, 169, 204, .16), transparent 24%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 150px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: end;
}

.hero-copy { max-width: 760px; }

/* CAMBIAR TÍTULO: editar en front-page.php
   FUTURO ACF: the_field('hero_titulo') */
.hero-title {
  margin: 0 0 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 8vw, 104px);
  line-height: .92;
  font-weight: 600;
  letter-spacing: .005em;
  color: #fbfbf8;
}

.hero-subtitle {
  margin: 0 0 30px;
  max-width: 700px;
  color: #d8dfe6;
  font-size: 17px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Panel flotante lateral
   CAMBIAR CONTENIDO: editar en front-page.php
   FUTURO ACF: the_field('hero_panel_titulo') */
.hero-panel {
  background: rgba(12, 20, 30, .55);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 28px;
  padding: 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  align-self: end;
}
.hero-panel .mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent-soft);
  margin-bottom: 12px;
  display: block;
}
.hero-panel h3 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  color: #f6f6f3;
}
.hero-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px;
}

/* Indicador de scroll */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  color: #dbe3ea;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .65;
  user-select: none;
  pointer-events: none;
}
.scroll-indicator::after {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .30);
  margin: 10px auto 0;
}


/* ----------------------------------------------------------
   8. SECCIÓN 360° (Pannellum)
   ---------------------------------------------------------- */

/* CAMBIAR IMAGEN 360: /assets/img/esferica-diamante.jpg
   Inicialización del viewer: assets/js/rs-baja-main.js */
.featured-360-wrap {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 34px;
  align-items: center;
}

.featured-card {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .03),
    rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 24px;
}

.tag {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d9e5eb;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  padding: 8px 14px;
  border-radius: 999px;
}

/* Contenedor del viewer — Pannellum inyecta su canvas aquí */
#panorama {
  width: 100%;
  height: 560px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow);
  background: #0b1520;
  /* Necesario para que Pannellum renderice correctamente */
  position: relative;
}


/* ----------------------------------------------------------
   9. PROPIEDADES (portafolio)
   ---------------------------------------------------------- */

/* ESTADO: estático/placeholder.
   FUTURO CPT: este grid se rellena con WP_Query sobre 'propiedades'.
   Ver front-page.php para el loop comentado. */
.properties-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta individual de propiedad
   FUTURO CPT: <article class="property-card"> generado por el loop */
.property-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.property-card:hover {
  transform: translateY(-6px);
  border-color: rgba(118, 204, 227, .22);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .36);
}

/* Media de la propiedad — imagen thumbnail */
.property-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0c1621;
}
.property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.property-card:hover .property-media img { transform: scale(1.04); }

/* FUTURO ACF: badge_etiqueta */
.property-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 15, 22, .75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #ecf3f7;
  font-weight: 600;
}

.property-body { padding: 22px 22px 26px; }

/* FUTURO ACF: ubicacion_propiedad */
.property-location {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 10px;
  font-weight: 600;
}

/* FUTURO: post_title del CPT */
.property-title {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  color: #fafaf8;
}

/* FUTURO ACF: precio_propiedad */
.property-price {
  font-size: 17px;
  font-weight: 700;
  color: #f7fbfd;
  margin-bottom: 12px;
}

/* FUTURO ACF: especificaciones (repeater) */
.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #ccd5dc;
  font-size: 12px;
  margin-bottom: 14px;
}
.property-specs span {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 5px 10px;
}

/* FUTURO: excerpt del CPT */
.property-copy {
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
  margin: 0 0 18px;
}

.property-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: gap .2s ease, opacity .2s ease;
}
.property-link:hover { gap: 12px; opacity: .85; }


/* ----------------------------------------------------------
   10. POR QUÉ RS BAJA
   ---------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.why-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  padding: 28px 24px;
  min-height: 240px;
  transition: border-color .28s ease;
}
.why-card:hover { border-color: rgba(118, 204, 227, .16); }

.why-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(52, 169, 204, .10);
  border: 1px solid rgba(118, 204, 227, .18);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.why-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-soft);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-card h3 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 600;
  color: #f0f4f6;
}
.why-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}


/* ----------------------------------------------------------
   11. PROPIEDAD DESTACADA (editorial 50/50)
   ---------------------------------------------------------- */

/* CAMBIAR IMAGEN: /assets/img/fachada.jpg
   FUTURO ACF: propiedad_destacada_id → carga dinámica del CPT */
.featured-property {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.featured-property .fp-media,
.featured-property .fp-content {
  border-radius: 26px;
  overflow: hidden;
  min-height: 560px;
}
.featured-property .fp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-property .fp-content {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .03),
    rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}
.featured-property .fp-content h2 {
  margin: 0 0 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .95;
  font-weight: 600;
  color: #f6f6f3;
}
.featured-property .fp-content > p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 24px;
  font-size: 15px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 12px;
}
.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: #dfebf0;
  line-height: 1.7;
  font-size: 15px;
}
.feature-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  margin-top: 9px;
  flex: 0 0 auto;
}


/* ----------------------------------------------------------
   12. PROCESO
   ---------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.process-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow);
  transition: border-color .28s ease;
}
.process-card:hover { border-color: rgba(118, 204, 227, .16); }

.process-step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--accent-soft);
  margin-bottom: 14px;
  display: block;
  font-weight: 600;
}
.process-card h3 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 600;
  color: #f0f4f6;
}
.process-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px;
}


/* ----------------------------------------------------------
   13. BANDA CTA
   ---------------------------------------------------------- */

/* CAMBIAR TEXTO Y WHATSAPP: editar en front-page.php
   FUTURO ACF OPTIONS: campos cta_titulo, cta_texto */
.cta-band {
  position: relative;
  overflow: hidden;
  border-top:    1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at left center, rgba(52, 169, 204, .14), transparent 26%),
    linear-gradient(180deg, #0c1621 0%, #101b27 100%);
}
.cta-inner {
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-inner h2 {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .95;
  font-weight: 600;
  color: #f6f6f3;
}
.cta-inner > div > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  max-width: 640px;
  font-size: 16px;
}


/* ----------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------- */

/* CAMBIAR LOGO: Personalizar > Identidad del sitio
   CAMBIAR MENÚ FOOTER: Apariencia > Menús → "Menú Footer"
   FUTURO ACF OPTIONS: datos de contacto dinámicos */
.site-footer {
  padding: 52px 0 30px;
  background: #08111a;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-brand { max-width: 520px; }

.footer-brand .logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
/* El logo custom de WP en el footer */
.footer-brand .custom-logo-link {
  display: flex;
  align-items: center;
}
.footer-brand .custom-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
/* Fallback logo en footer */
.footer-brand .footer-logo-fallback {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.footer-title {
  font-size: 15px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #f0f4f6;
}
.footer-sub {
  margin-top: 4px;
  color: var(--soft);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.footer-text {
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
  margin: 0;
}

/* Columnas de nav y contacto en el footer */
.footer-col h4 {
  margin: 0 0 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #dfe6eb;
  font-weight: 600;
}

/* wp_nav_menu en el footer genera un <ul> */
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-nav-list a {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  transition: color .2s ease;
}
.footer-nav-list a:hover { color: var(--accent-soft); }

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contact-list a {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  transition: color .2s ease;
}
.footer-contact-list a:hover { color: var(--accent-soft); }

.footer-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: #7a8f9e;
  font-size: 13px;
}


/* ----------------------------------------------------------
   15. ANIMACIÓN REVEAL (IntersectionObserver)
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .65, .2, 1),
              transform .8s cubic-bezier(.2, .65, .2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Evitar que el reveal bloquee interacción antes de activarse */
.reveal { pointer-events: none; }
.reveal.visible { pointer-events: auto; }


/* ----------------------------------------------------------
   16. RESPONSIVE ≤ 1100px
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid          { grid-template-columns: 1fr; }
  .hero-panel         { max-width: 580px; }
  .featured-360-wrap  { grid-template-columns: 1fr; }
  .featured-property  { grid-template-columns: 1fr; }
  .footer-grid        { grid-template-columns: 1fr 1fr; }

  .why-grid           { grid-template-columns: repeat(2, 1fr); }
  .properties-grid    { grid-template-columns: repeat(2, 1fr); }
  .process-grid       { grid-template-columns: 1fr; }

  .cta-inner          { flex-direction: column; align-items: flex-start; }
}


/* ----------------------------------------------------------
   17. RESPONSIVE ≤ 860px
   ---------------------------------------------------------- */
@media (max-width: 860px) {
  /* Ocultar menú desktop y botón WA del header */
  .nav-menu              { display: none; }
  .nav-actions .btn-primary { display: none; }

  /* Mostrar hamburguesa */
  .menu-toggle           { display: grid; }

  .hero-title            { font-size: clamp(44px, 11vw, 72px); }

  .properties-grid       { grid-template-columns: 1fr; }
  .why-grid              { grid-template-columns: 1fr 1fr; }

  #panorama              { height: 420px; }

  .featured-property .fp-media,
  .featured-property .fp-content { min-height: auto; }

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


/* ----------------------------------------------------------
   18. RESPONSIVE ≤ 560px
   ---------------------------------------------------------- */
@media (max-width: 560px) {
  .container              { width: calc(100% - 24px); }
  .section                { padding: 72px 0; }
  .section-sm             { padding: 56px 0; }
  .hero-content           { padding: 130px 0 64px; }
  .hero-panel             { padding: 22px; }

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

  .featured-card          { padding: 24px; }
  .featured-property .fp-content { padding: 28px; }
  .process-card           { padding: 24px; }
  .why-card               { padding: 22px; min-height: auto; }

  .property-body          { padding: 18px 18px 22px; }

  .cta-inner              { padding: 60px 0; }
  .cta-inner .btn         { width: 100%; justify-content: center; }

  .footer-bottom          { flex-direction: column; gap: 8px; }
}


/* ===== RS BAJA hotfixes v1.1.1 ===== */
body{background:radial-gradient(circle at top right, rgba(52,169,204,.10), transparent 25%),linear-gradient(180deg,#07111b 0%,#0a1520 55%,#0b1723 100%) !important;color:var(--text);}
.section,.section-sm{position:relative;background:transparent;}
.section::before,.section-sm::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));opacity:.9;}
.featured-card,.property-card,.why-card,.process-card,.featured-property .fp-content{background:linear-gradient(180deg, rgba(16,27,40,.92), rgba(12,21,32,.84)) !important;border-color:rgba(255,255,255,.10);}
.featured-card .section-title,.properties-head .section-title,.why-card h3,.process-card h3,.featured-property .fp-content h2,.property-title{color:#f6f7f8 !important;}
.featured-card .section-copy,.property-copy,.why-card p,.process-card p,.featured-property .fp-content > p,.footer-text,.footer-contact-list a,.footer-nav-list a,.cta-inner > div > p{color:rgba(232,238,243,.82) !important;}
.properties-head .section-copy,.hero-subtitle{color:rgba(226,233,239,.86) !important;}
.property-location,.process-step,.eyebrow,.hero-panel .mini-label,.footer-sub{color:#86d7ec !important;}
.property-specs{color:#d7e1e8 !important;}
.property-specs span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);}
.site-header{background:rgba(7,17,27,.58);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.08);}
.brand-logo-wrap .custom-logo-link,.brand-logo-wrap{display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.brand-logo-wrap img.custom-logo,.brand img,.footer-brand .custom-logo{width:46px;height:46px;object-fit:contain;}
.footer-brand .custom-logo-link,.footer-brand .brand{display:flex;align-items:center;gap:14px;}
#panorama{background:#08111a;}
.wp-custom-logo .brand{gap:14px;}
.hero-panel{background:rgba(12,20,30,.72)!important;}
.property-media{background:#09131d;}
.property-media img{display:block;}
@media (max-width:860px){.why-grid{grid-template-columns:1fr;} .brand-title{font-size:13px;} .brand-sub{font-size:9px;}}