/*
Theme Name:  homming Theme
Theme URI:   https://homming.com
Description: Tema hijo para webs inmobiliarias personalizadas con el Booking Engine de homming. Usa Twenty Twenty-Five como tema padre — decisión de arquitectura definitiva, no provisional.
Author:      homming
Author URI:  https://homming.com
Template:    twentytwentyfive
Version:     1.0.0
License:     Proprietary
Text Domain: homming-theme
*/

/* ============================================================
   SISTEMA DE VARIABLES CSS
   Fuente de verdad: _docs/homming_looks_mockup_v3.html
   Valores por defecto = look Mediterráneo (el del prototipo al cargar).
   Cada looks/*.css sobrescribe estas variables añadiendo .look-{nombre}.
   functions.php inyecta --acc y --fh del cliente encima de todo.
   NUNCA hardcodear colores ni fuentes fuera de este bloque.
   ============================================================ */

:root {
  /* Color de acento — cualquier hex, lo fija el cliente */
  --acc: #1a3a5c;

  /* Fuente de títulos — la fija el cliente */
  --fh: 'Cormorant Garamond', Georgia, serif;

  /* Fuente de interfaz/UI — fija, no configurable por cliente */
  --fu: 'Outfit', sans-serif;

  /* Hero */
  --hero-bg:    #1D3557;
  --hero-fg:    #ffffff;

  /* Header / navegación */
  --header-bg:  #ffffff;
  --header-fg:  #1C1C1A;
  --nav-color:  #777777;

  /* Topbar */
  --topbar-bg:  #1C1C1A;
  --topbar-fg:  rgba(255, 255, 255, .45);

  /* Fondos */
  --body-bg:    #FAF8F5;
  --body-bg2:   #F0EBE0;

  /* Texto */
  --text:       #1C1C1A;
  --text-mid:   #666666;

  /* Bordes */
  --border:     #E8E2D8;

  /* Radios */
  --card-radius: 3px;
  --btn-radius:  2px;
}

/* ============================================================
   BASE DEL TEMA HIJO
   Solo lo mínimo para que los tokens funcionen.
   El CSS de layout viene del tema padre (Twenty Twenty-Five).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--fu);
  background-color: var(--body-bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh);
  color: var(--text);
  line-height: 1.1;
}

a {
  color: var(--acc);
  transition: color .15s;
}

/* ============================================================
   LAYOUT — estructura de los looks PHP (sin colores de marca)
   Fuente: homming_looks_mockup_v3_10.html
   Todos los colores de marca vienen de var(). Solo los grises
   estructurales (overlays blancos/negros semitransparentes) son
   valores directos.
   ============================================================ */

/* ── HERO BASE ────────────────────────────────────────────── */
.hero-wrap { position: relative; overflow: hidden; }

/* Hero full-bleed: imagen ocupa todo el contenedor */
.hero-fb { height: 600px; }
.hero-fb .bg { position: absolute; inset: 0; }
.hero-fb .bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.hero-fb .ov {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.1) 100%);
}
.hero-fb .ct {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 80px;
  max-width: 720px;
}

/* Hero split 50/50 */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}
.hero-split .left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 60px;
  background: var(--hero-bg);
  color: var(--hero-fg);
}
.hero-split .right { position: relative; overflow: hidden; }
.hero-split .right img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── STATS STRIP ──────────────────────────────────────────── */
.stats-strip { display: flex; }

.hero-fb .stats-strip { position: absolute; bottom: 0; right: 0; }
.hero-fb .stat {
  background: rgba(255,255,255,.94);
  padding: 18px 28px;
  text-align: center;
  border-left: 1px solid rgba(0,0,0,.06);
}
.hero-split .stats-strip {
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(3,1fr);
}
.hero-split .stat {
  padding: 16px; text-align: center;
  border-right: 1px solid var(--border);
}
.hero-split .stat:last-child { border-right: none; }

.stat-n {
  font-family: var(--fh);
  font-size: 28px; font-weight: 600;
  color: var(--acc);
  line-height: 1;
}
.hero-split .stat-n { font-size: 22px; }
.stat-l {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: #aaa; margin-top: 3px;
  font-family: var(--fu);
}

/* ── MIN-COUNTER (stats sobre imagen en split hero) ──────── */
.min-counter {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.07);
  display: grid; grid-template-columns: repeat(3,1fr);
}
.min-cnt {
  padding: 14px; text-align: center;
  border-right: 1px solid rgba(0,0,0,.07);
}
.min-cnt:last-child { border-right: none; }
.min-cnt-n {
  font-family: var(--fh);
  font-size: 22px; font-weight: 600;
  color: var(--acc); line-height: 1;
}
.min-cnt-l {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: #aaa; margin-top: 3px;
  font-family: var(--fu);
}

/* ── TIPOGRAFÍA DEL HERO ──────────────────────────────────── */
.eyebrow {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 2.5px; margin-bottom: 18px;
  font-family: var(--fu); opacity: .9;
}
.hero-h1 {
  font-family: var(--fh);
  font-weight: 700; line-height: 1.1; margin-bottom: 14px;
}
.hero-fb .hero-h1 {
  font-size: 58px; color: #fff; font-weight: 400;
  text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 4px 24px rgba(0,0,0,.6);
}
.hero-split .hero-h1 { font-size: 50px; color: var(--text); }
.hero-h1 em { font-style: italic; color: var(--acc); }

.hero-p {
  font-size: 14px; line-height: 1.75; margin-bottom: 32px;
  font-family: var(--fu); font-weight: 300;
  max-width: 440px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.hero-split .hero-p { color: var(--text-mid); text-shadow: none; }

/* ── BOTÓN BUSCAR ─────────────────────────────────────────── */
.btn-s {
  display: inline-block;
  background: var(--acc); color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--btn-radius);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .8px;
  cursor: pointer; white-space: nowrap;
  font-family: var(--fu);
  text-decoration: none;
}
.btn-s:hover { opacity: .85; color: #fff; }

/* ── SECCIONES ────────────────────────────────────────────── */
.sec { padding: 56px 48px; background: var(--body-bg); }
.sec.alt { background: var(--body-bg2); }

.sec-head { margin-bottom: 36px; }
.sec-head h2 {
  font-family: var(--fh);
  font-size: 36px; font-weight: 400;
  color: var(--text); line-height: 1.1;
}
.sec-head p { font-size: 13px; color: var(--text-mid); margin-top: 6px; font-family: var(--fu); }

.sec-row {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}
.sec-row h2 {
  font-family: var(--fh);
  font-size: 36px; font-weight: 400;
  color: var(--text); line-height: 1.1;
}
.sec-row h2 em { font-style: italic; color: var(--acc); }

.sec-lnk {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--acc);
  font-family: var(--fu); text-decoration: none;
}
.sec-line {
  display: block;
  width: 40px; height: 2px;
  background: var(--acc);
  margin-top: 10px; border-radius: 1px;
}

/* ── GRID DE SERVICIOS ────────────────────────────────────── */
.srv-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.srv-grid--5col { grid-template-columns: repeat(5,1fr) !important; }
.srv {
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px 18px; text-align: center;
}
.srv-icon { font-size: 24px; margin-bottom: 10px; }
.srv-title { font-family: var(--fh); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.srv-desc  { font-size: 13px; color: var(--text-mid); line-height: 1.6; font-family: var(--fu); }

/* ── FOOTER PHP ───────────────────────────────────────────── */
.ftr { padding: 48px 48px 24px; font-family: var(--fu); font-size: 12px; }
.ftr-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 40px; margin-bottom: 32px;
}
.ftr h4 {
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .5px;
}
.ftr p  { margin-bottom: 7px; line-height: 1.7; }
.ftr a  { transition: color .15s; }
.ftr-name { font-size: 14px; font-weight: 600; margin-top: 8px; }
.ftr-bottom {
  padding-top: 18px;
  display: flex; justify-content: space-between;
  align-items: center;
  font-size: 10px; flex-wrap: wrap; gap: 8px;
}
.ftr-logo { max-height: 28px; max-width: 120px; object-fit: contain; opacity: .5; margin-bottom: 10px; }

/* Logo del cliente en el footer */
.ftr .custom-logo-link img,
.ftr .custom-logo { max-height: 36px; width: auto; opacity: .6; }

/* Secciones CTA (Propietarios / Inquilinos) */
.sec-cta { }
.sec-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sec-cta-text { flex: 1; min-width: 240px; }
.sec-cta-h2 {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin: 6px 0 12px;
}
.sec-cta-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin: 0; max-width: 480px; }

/* Bloque unificado Propietarios + Inquilinos */
.sec-owners { padding: 0 !important; }
.owners-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Piso, no techo: con height fija el texto que no entraba se recortaba en
     silencio — visible al apilar en móvil, donde imagen y texto comparten la
     misma fila, pero también pasaba en ventanas intermedias. */
  min-height: 280px;
}
.owners-row--rev .owners-img-wrap { order: 2; }
.owners-row--rev .owners-body    { order: 1; }
.owners-img-wrap {
  position: relative;
  overflow: hidden;
}
.owners-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.owners-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
}
.owners-overlay-box {
  border: 1px solid rgba(255,255,255,.55);
  padding: 18px 32px;
  text-align: center;
  color: #ffffff;
}
.owners-overlay-h {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-family: var(--fh);
}
.owners-overlay-s {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: .75;
}
.owners-body {
  padding: 36px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--body-bg);
}
.owners-h2 {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.owners-p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* ── CONTENIDO DE PÁGINA (La Empresa, Contacto) ──────────────
   Prosa simple (h2/p/ul/table) sin grid ni cards propias —
   necesita su propio ancho máximo y espaciado, igual que
   .page-hero-inner limita el hero. */
.content-page { max-width: 720px; margin: 0 auto; }
/* Reusado dentro de páginas anchas (ej. bloque "La Empresa" al final de
   Servicios) — ahí no queremos el ancho angosto pensado para una página
   standalone, sino aprovechar el mismo ancho que el resto de la página. */
.content-page.content-page--wide { max-width: none; }
.content-page h2 {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: var(--text);
  margin: 40px 0 12px;
}
.content-page h2:first-child { margin-top: 0; }
.content-page p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0 0 16px;
}
.content-page ul { margin: 0 0 16px; padding-left: 20px; }
.content-page li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 8px;
}
.content-page table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.content-page table td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.content-page table td:first-child { color: var(--text-mid); width: 140px; }
.content-page table a { color: var(--acc); text-decoration: none; }

/* ── DATOS DE CONTACTO ───────────────────────────────────────────
   Reusa el patrón de lista con icono de la página de Servicios
   (.srv-includes-grid / .srv-includes-item). Antes era una <table>,
   heredada de una tabla markdown del documento de contenido, y los
   bordes que se veían alrededor de cada celda no eran del tema: los
   ponía el global-styles del tema padre con un shorthand de 4 lados. */
.contact-data { margin-bottom: 32px; }
.contact-data .contact-data-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-mid);
  margin-bottom: 3px;
  font-family: var(--fu);
}
.contact-data a { color: var(--acc); text-decoration: none; }
.contact-data a:hover { text-decoration: underline; }

/* ── FORMULARIO DE CONTACTO (crea un lead en Homming) ────────── */
.contact-form { display: flex; flex-direction: column; max-width: 480px; }
.contact-form label {
  font-size: 13px; font-weight: 500; color: var(--text);
  margin: 16px 0 6px;
}
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
  border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 10px 12px; font-size: 14px; font-family: var(--fu);
  color: var(--text); background: #fff;
}
.contact-form-consent {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-mid); font-weight: 400;
}
.contact-form-consent input[type="checkbox"] { margin: 0; }
.contact-form-consent a { color: var(--acc); }
.contact-form button[type="submit"] { margin-top: 24px; align-self: flex-start; }
.contact-form-status { font-size: 13px; margin: 0; }
.contact-form-status--success { color: #2a7a3b; }
.contact-form-status--error { color: #c0392b; }
.field-error {
  display: block; font-size: 12px; color: #c0392b;
  margin-top: 4px; min-height: 14px;
}

/* Grid de servicios en 2 columnas (página Servicios completa) */
.srv-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.srv--lg {
  text-align: left;
  padding: 32px 28px;
}
.srv--lg .srv-icon  { margin-bottom: 14px; }
.srv--lg .srv-icon svg { display: block; }
.srv--lg .srv-title { font-size: 17px; margin-bottom: 10px; }
.srv--lg .srv-desc  { font-size: 14px; line-height: 1.75; }
.srv--full { grid-column: 1 / -1; }

/* CTA dentro de card de servicio */
.srv-cta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.srv-cta-p { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }

/* ── BLOQUE SERVICIO INTEGRAL (página servicios) ── */
.sec-integral { padding-top: 40px !important; padding-bottom: 40px !important; }

/* Lado a lado: icono+título+desc a la izquierda, "¿Qué incluye?" a la
   derecha — mismo patrón que .sec-feature-inner de la portada (QA ronda 3,
   evitar espacio en blanco a la derecha). */
.srv-integral-inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.srv-integral-inner .srv-integral-top {
  flex: 0 0 460px;
  max-width: 460px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.srv-integral-inner .srv-includes { flex: 1; min-width: 0; }
@media (max-width: 880px) {
  .srv-integral-inner { flex-direction: column; gap: 32px; }
  .srv-integral-inner .srv-integral-top { flex-basis: auto; max-width: none; }
}

/* Fila superior: icono + título + descripción */
.srv-integral-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.srv-integral-top .srv-icon { flex-shrink: 0; margin-bottom: 0; }
.srv-integral-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 10px !important;
}
.srv-integral-desc {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
  max-width: 680px;
}

/* Subsección "¿Qué incluye?" */
.srv-includes-h {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--text-mid);
  margin-bottom: 20px;
  font-family: var(--fu);
}
.srv-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.srv-includes-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.srv-includes-grid--2col { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.srv-includes-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border);
}
.srv-includes-item svg { flex-shrink: 0; }

/* ── HERO DE PÁGINAS INTERIORES ───────────────────────────── */
.page-hero {
  padding: 56px 48px;
  background: var(--body-bg2);
}
.page-hero--dark {
  background: var(--text);
  color: #ffffff;
}
.page-hero-inner { max-width: 720px; }
.page-hero-h1 {
  font-family: var(--fh);
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--text);
  margin: 12px 0 16px;
}
.page-hero--dark .page-hero-h1 { color: #ffffff; }
.page-hero-sub {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  opacity: .75;
}
.page-hero-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 560px;
}

/* Hero con imagen a la derecha (página Servicios, feedback Ana punto 10).
   Misma altura Y mismo ancho que el hero de Inicio — CSS Grid 1fr 1fr,
   igual mecanismo que .hero-split (QA ronda 6: con flexbox y flex-basis
   mezclados (420px vs 50%) el reparto de flex-grow no daba un 50/50
   real, la imagen quedaba más ancha que la mitad). */
.page-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
  padding: 0; /* .page-hero pone 56px 48px al bloque entero — acá lo maneja .page-hero-inner */
}
.page-hero--split .page-hero-inner {
  align-self: center;
  padding: 56px 48px;
}
.page-hero-img {
  overflow: hidden;
}
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) {
  .page-hero--split { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .page-hero--split .page-hero-inner { padding: 40px 48px 24px; }
  .page-hero-img { max-width: none; width: 100%; height: 320px; }
}

/* ── BLOQUE SERVICIO INTEGRAL (homepage) ──────────────────── */
.sec-feature { }
.sec-feature-inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.sec-feature-text  { flex: 0 0 460px; max-width: 460px; }
.sec-feature-includes { flex: 1; min-width: 0; padding-top: 4px; }
.sec-feature-includes .srv-includes-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.sec-feature-includes .srv-includes-item--lg { padding: 18px 0; gap: 18px; }
@media (max-width: 880px) {
  .sec-feature-inner  { flex-direction: column; gap: 32px; }
  .sec-feature-text   { flex-basis: auto; max-width: none; }
}

/* ── BUSCADOR SOLO (portada, feedback Ana punto 2, QA ronda 4) ──────
   [homming_list_publications show_search="true" show_results="false"]
   ya no renderiza ningún grid de resultados (ver show_results en
   functions.php/publications-list.php) — no hace falta ocultar nada
   por CSS ni pelear con la cascada del inline style del plugin. */
.home-search-only .list-page { padding: 0 !important; }

/* Vive dentro de .hero-split .left, debajo del texto (mismo lugar que
   .srch en el mockup homming_looks_mockup_v3_10.html), pero con TODOS
   los campos del buscador de Alquiler (feedback Ana 13JUL2026, punto 2:
   "idéntico al buscador de Alquiler") — apilados en 2-3 filas para
   entrar en el ancho angosto de esta columna, en vez de una sola fila
   como en Alquiler (que tiene todo el ancho de la página disponible).
   Al buscar, el form redirige a /alquiler/ con los filtros aplicados
   (ver redirect_url en functions.php/publications-list.php). */
.hero-split .left .home-search-only { margin-top: 8px; max-width: 460px; }
.hero-split .left .home-search-only #publication-filter-form {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
}
.hero-split .left .home-search-only .list-header {
  flex-wrap: wrap !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
}
.hero-split .left .home-search-only .list-header::before { display: none !important; }

/* Cada campo ocupa toda la fila por defecto (ubicación, tipo) */
.hero-split .left .home-search-only .list-header__input {
  flex: 1 1 100% !important;
}
.hero-split .left .home-search-only .list-header__input select,
.hero-split .left .home-search-only .list-header__input input[type="text"] {
  width: 100% !important;
}

/* Entrada + Salida van lado a lado, no cada uno a todo el ancho */
.hero-split .left .home-search-only .list-header__input:has(#start_date),
.hero-split .left .home-search-only .list-header__input:has(#end_date) {
  flex: 1 1 calc(50% - 5px) !important;
}

/* Fila final: ícono de filtros avanzados + botón Buscar */
.hero-split .left .home-search-only .list-header .button-container {
  flex: 0 0 auto !important;
}
.hero-split .left .home-search-only .list-header .button-container:not(.list-filter) {
  flex: 1 1 auto !important;
}
.hero-split .left .home-search-only .list-header .button-container:not(.list-filter) .content__button {
  width: 100% !important;
}
/* ── PÁRRAFOS DE PROSA — justificados ─────────────────────────
   Texto libre que hoy queda a la izquierda por defecto (no toca los
   bloques ya centrados: stats, cards de servicios, "Nos estabas
   esperando", cabecera del carrusel). hyphens:auto mitiga los espacios
   irregulares típicos del justificado sin guionado, sobre todo en
   columnas angostas como .page-hero-desc (max-width:560px). */
.hero-p, .page-hero-desc, .srv-integral-desc, .srv-desc,
.content-page p, .owners-p, .testimonial-quote, .sec-feature-desc {
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.sec-feature-h2 {
  font-family: var(--fh);
  font-size: 36px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  /* Explícito: la regla de h1-h6 de más arriba es un selector de elemento y
     pierde la cascada contra el global-styles del tema padre, así que sin esto
     el line-height efectivo lo pone el padre y las dos líneas se pisan. */
  line-height: 1.1;
  color: var(--text);
  margin: 8px 0 16px;
}
.sec-feature-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 24px;
}

/* ── BLOQUE NOS ESTABAS ESPERANDO (homepage) ──────────────── */
.sec-espera-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.sec-espera-h2 {
  font-family: var(--fh);
  font-size: 38px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 24px;
}
.sec-espera-sub {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  opacity: .65;
}
.sec-espera-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 640px;
  margin: 0 auto;
}

/* ── GRID VENTA (propiedades estáticas) ───────────────────── */
.venta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v-card {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.v-card:hover {
  border-color: var(--acc);
  box-shadow: 0 6px 28px rgba(0,0,0,.10);
}
.v-card-img {
  height: 200px;
  overflow: hidden;
  background: var(--body-bg2);
  flex-shrink: 0;
}
.v-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s;
}
.v-card:hover .v-card-img img { transform: scale(1.05); }
.v-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  border-top: 2px solid var(--acc);
}
.v-card-zona {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-mid);
  margin: 0;
  font-family: var(--fu);
}
.v-card-dir {
  font-family: var(--fu);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 2px 0 2px;
}
.v-card-tipo {
  font-size: 11px;
  color: var(--text-mid);
  margin: 0 0 8px;
}
.v-card-precio {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  color: var(--acc);
  margin: 0 0 16px;
}
.v-card-body .btn-s { align-self: flex-start; margin-top: auto; }

/* ── CARDS ESTÁTICAS VENTA (.venta-card) ─────────────────────
   Usadas en page-venta.php. Sin dependencia del plugin.
   ──────────────────────────────────────────────────────────── */
.venta-wrap { padding: 0 0 60px; }
.venta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.venta-card {
  background: var(--body-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .15s;
}
.venta-card:hover { background: var(--body-bg2); }
.venta-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.venta-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.venta-card:hover .venta-card-img img { transform: scale(1.04); }
.venta-badge {
  position: absolute; top: 0; left: 0;
  background: var(--text); color: #ffffff;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 5px 10px;
  font-family: var(--fu);
}
.venta-card-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  border-top: 1px solid var(--border);
}
.venta-card-price {
  font-size: 20px; font-weight: 700; color: var(--text);
  font-family: var(--fh); letter-spacing: -.5px;
  margin-bottom: 2px;
}
.venta-card-title {
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .5px;
}
.venta-card-loc {
  font-size: 10px; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 8px;
}
.venta-card-feats {
  display: flex; gap: 14px; font-size: 12px; color: var(--text-mid);
  flex-wrap: wrap; margin-bottom: 14px;
}
.venta-card-cta {
  display: inline-block; align-self: flex-start; margin-top: auto;
  background: var(--text); color: #ffffff !important;
  padding: 9px 18px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  text-decoration: none !important; font-family: var(--fu);
  transition: opacity .15s;
}
.venta-card-cta:hover { opacity: .8; }
.venta-empty {
  text-align: center; padding: 60px 20px; display: none;
  font-size: 14px; color: var(--text-mid); background: var(--body-bg);
}

@media (max-width: 900px) {
  .venta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .venta-grid { grid-template-columns: 1fr; }
}

/* ── CARRUSEL DE OPINIONES (homepage, feedback Ana punto 4) ───────────
   Boceto con contenido de ejemplo — dimensión recomendada 600×400 para
   tarjetas con foto/video (object-fit:cover); las de solo texto usan el
   mismo ancho de tarjeta para que el carrusel quede parejo. */
.sec-testimonials .sec-head { text-align: center; }
.sec-testimonials .sec-line { margin: 10px auto 0; }

.testimonials-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
.testimonials-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  flex: 1;
  min-width: 0;
}
.testimonials-track::-webkit-scrollbar { height: 4px; }
.testimonials-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.testimonial-card {
  flex: 0 0 340px;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.testimonial-media {
  width: 100%;
  height: 220px;
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.testimonial-media img,
.testimonial-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.testimonial-quote-icon { opacity: .8; margin-bottom: 14px; }
.testimonial-quote {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
  flex: 1;
}
.testimonial-author {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text);
}
.testimonial-location { font-weight: 400; text-transform: none; color: var(--text-mid); }

.testimonials-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--body-bg);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--card-radius);
  transition: background .15s, color .15s;
}
.testimonials-nav:hover { background: var(--acc); color: #ffffff; border-color: var(--acc); }

@media (max-width: 560px) {
  .testimonials-nav { display: none; }
  .testimonial-card { flex-basis: 82vw; max-width: 82vw; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — colapso de grids y escalado de titulares

   Hasta acá solo .page-hero--split y .venta-grid tenían reglas mobile;
   el resto de los grids se quedaba multi-columna en pantalla de celular,
   con imágenes a media pantalla, texto en columnas de ~150px y contenido
   cortado fuera del viewport.

   Estos bloques van al final del archivo a propósito: las reglas que
   pisan tienen la misma especificidad (una clase), así que dependen del
   orden de aparición para ganar.
   ════════════════════════════════════════════════════════════════════ */

/* Bloques de imagen + texto lado a lado → apilados.
   Mismo breakpoint que ya usaba .page-hero--split. */
@media (max-width: 780px) {
  .hero-split { grid-template-columns: 1fr; }
  .owners-row { grid-template-columns: 1fr; }

  /* En la fila invertida el desktop pone la imagen a la derecha. Al
     apilar, respetar ese orden dejaría los dos bloques de texto pegados
     uno debajo del otro; forzar imagen-primero mantiene el ritmo
     imagen/texto en las dos filas. */
  .owners-row--rev .owners-img-wrap { order: 1; }
  .owners-row--rev .owners-body     { order: 2; }

  /* Apilada, la imagen ya no tiene al texto al lado para que le fije la
     altura, así que se la damos. Y el padding lateral propio del bloque,
     porque .sec-owners anula con !important el de .sec. */
  .owners-img-wrap { height: 220px; }
  .owners-body { padding: 28px 20px; }

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

  .srv-grid--2col { grid-template-columns: 1fr; }
  .srv-includes-grid,
  .srv-includes-grid--2col,
  .srv-includes-grid--3col,
  .sec-feature-includes .srv-includes-grid { grid-template-columns: 1fr; }
}

/* Grids de tarjetas: mismo escalonado que .venta-grid (3→2→1). */
@media (max-width: 900px) {
  .srv-grid { grid-template-columns: repeat(2, 1fr); }
  .srv-grid--5col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 580px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-grid--5col { grid-template-columns: 1fr !important; }
}

/* Padding lateral: las secciones usan 48px a cada lado, que en un viewport
   de 360px deja ~264px útiles — el texto queda pegado a los bordes y los
   titulares wrapean donde no deberían. Se usa padding-left/right y no el
   shorthand porque los verticales son distintos en cada selector. */
@media (max-width: 580px) {
  .sec,
  .page-hero,
  .ftr { padding-left: 20px; padding-right: 20px; }
}

/* Justificado: en una columna de ~320px deja ríos de espacio entre palabras.
   Se mantiene en escritorio, donde la columna es ancha y funciona. La lista de
   selectores se repite tal cual la de arriba para que se vean emparejadas. */
@media (max-width: 580px) {
  .hero-p, .page-hero-desc, .srv-integral-desc, .srv-desc,
  .content-page p, .owners-p, .testimonial-quote, .sec-feature-desc {
    text-align: left;
  }
}

/* Titulares: están en px fijos (36-58px), que en un celular ocupan media
   pantalla en tres líneas. */
@media (max-width: 580px) {
  .hero-fb .hero-h1 { font-size: 34px; }
  .hero-split .hero-h1 { font-size: 32px; }
  .page-hero-h1 { font-size: 30px; letter-spacing: -1px; }
  .sec-espera-h2 { font-size: 26px; letter-spacing: -1px; }
  .sec-feature-h2 { font-size: 26px; letter-spacing: -1px; }
}