/* Imagina — tokens de marca y base tipográfica.
   Colores y fuentes del Manual de Marca. Se aplica en todo el front. */

:root{
  --imagina-jade:   #2D8071; /* Esencia de Jade — acento */
  --imagina-cumbre: #73908B; /* Cumbre de Montaña — secundario */
  --imagina-bruma:  #D1DDD9; /* Bruma de Otoño — claro */
  --imagina-negro:  #000000;
  --imagina-atrio:  #D7D8D7; /* Blanco atrio */
  --imagina-blanco: #FFFFFF;
}

/* Tipografía base (títulos Roboto Bold, cuerpo Roboto Regular). */
body{ font-family:"Roboto", Arial, sans-serif; color:var(--imagina-negro); }
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{ font-family:"Roboto", Arial, sans-serif; font-weight:700; }

/* Texto destacado → Roboto Serif Italic. */
.imagina-destacado, blockquote{ font-family:"Roboto Serif", Georgia, serif; font-style:italic; }

/* Números → Mozilla Text. */
.imagina-num{ font-family:"Mozilla Text", "Roboto", sans-serif; }

/* Utilidades de color por si se estiliza por clase. */
.imagina-bg-jade{ background-color:var(--imagina-jade); color:var(--imagina-blanco); }
.imagina-bg-cumbre{ background-color:var(--imagina-cumbre); color:var(--imagina-blanco); }
.imagina-bg-bruma{ background-color:var(--imagina-bruma); color:var(--imagina-negro); }
.imagina-text-jade{ color:var(--imagina-jade); }

/* ---------- Header (wrapper de Theme Builder) ---------- */
.elementor-location-header{ box-shadow:0 1px 0 rgba(0,0,0,.06); }
.imagina-logo img{ display:block; }
.imagina-cta a.elementor-button,
.imagina-cta .elementor-button{ font-weight:700; letter-spacing:.02em; }

/* ---------- Footer (wrapper de Theme Builder) ---------- */
.elementor-location-footer, .elementor-location-footer *{ color:var(--imagina-blanco); }
.elementor-location-footer a{ color:var(--imagina-blanco); text-decoration:none; }
.elementor-location-footer a:hover{ color:var(--imagina-bruma); }
.elementor-location-footer p{ margin:0 0 .5em; line-height:1.5; }
/* logo jade → blanco sobre el footer negro */
.elementor-location-footer img{ filter:brightness(0) invert(1); }
/* botones de contacto del footer (email / teléfono) */
.imagina-contact{ display:flex; flex-direction:column; align-items:center; gap:.4em; }
.imagina-contact-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border:0; background:none; padding:.35em .6em;
  color:var(--imagina-blanco); font-size:1.5rem; line-height:1.2; text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.imagina-contact-btn:hover{ transform:translateY(-2px); opacity:.85; color:var(--imagina-blanco); }
.imagina-contact-btn svg{ width:1.1em; height:1.1em; fill:currentColor; flex:none; }

/* ---------- Botón flotante de WhatsApp (global) ---------- */
.imagina-wa{
  position:fixed; right:20px; bottom:20px; z-index:9990;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.imagina-wa:hover{ transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.imagina-wa svg,.imagina-wa svg path{ width:32px; height:32px; fill:#fff; }
.imagina-wa:focus-visible{ outline:3px solid var(--imagina-jade); outline-offset:3px; }
@media (max-width:767px){ .imagina-wa{ right:16px; bottom:16px; } }

/* Ficha técnica: ocultar filas cuyo valor ACF está vacío (el tag no renderiza → contenedor vacío).
   La class madre por línea vive en <body> (.imagina-linea-real-estate / .imagina-linea-studio)
   para resolver por CSS las discrepancias RE/Studio de layout. */
.imagina-ficha-row:has(> .elementor-widget-container:empty){ display:none; }

/* Card de portfolio/loop: meta contextual por línea.
   RE muestra ubicación + estado; Studio muestra tipología. La class madre la pone <body>. */
body.imagina-linea-real-estate .imagina-studio-only{ display:none; }
body.imagina-linea-studio .imagina-re-only{ display:none; }
/* Ocultar la línea de meta si el campo ACF vino vacío (mismo patrón que la ficha). */
.imagina-card-meta:has(> .elementor-widget-container:empty){ display:none; }