/* ============================================================
   InmoPanama — Banner premium (F11.10B)

   Estilos EXCLUSIVOS de la ubicación publicitaria home_premium (y
   de cualquier futura ubicación que reutilice
   includes/parts/ib_banner_slot.php). Prefijo .ib-banner-premium —
   completamente aislado, no modifica ningún estilo global
   (main.css / ib-overrides.css / header.css no se tocan).

   La sección fluye normalmente en el documento — NUNCA se usa
   position:absolute para ubicarla respecto al hero o al buscador.
   ============================================================ */

.ib-banner-premium {
    width: 100%;
    max-width: 1320px; /* mismo ancho máximo que .container de la plantilla */
    margin: 32px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.ib-banner-premium__link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.ib-banner-premium__picture {
    display: block;
    width: 100%;
}

.ib-banner-premium__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px; /* discreto, no decorativo en exceso */
    object-fit: contain; /* nunca deforma ni recorta la creatividad */
}

@media (max-width: 767px) {
    .ib-banner-premium {
        margin: 20px auto;
        padding: 0 12px;
    }
}

/* ============================================================
   HERO PUBLICITARIO (F11.10E)

   Reglas acotadas específicas de contexto: todas anidadas bajo
   .hero-area-slider/.hero1-section-area — nunca redefinen las
   clases base .ib-banner-premium* de arriba (usadas por otras
   ubicaciones normal-flow), solo las sobrescriben CUANDO están
   dentro del Hero. No se toca main.css ni ib-overrides.css en
   ningún momento: esta es la ÚNICA hoja donde se permite escribir
   estas reglas, y se usan selectores iguales o más específicos
   que los de main.css para ganar la cascada por orden de aparición
   (este archivo se enlaza después de main.css en el documento).
   ============================================================ */

/* Cuando el Hero muestra un banner: reducir el padding excesivo que
   solo existía para dejar espacio al H1/subtítulo (ya reubicados
   debajo del buscador) y suprimir el overlay oscuro del 60% — la
   creatividad del anunciante nunca debe oscurecerse ni filtrarse.
   El padding del Hero SIN banner (fallback foto original) queda
   intacto, tal como estaba.

   F11.10H — CORRECCIÓN: .header-area.homepage1 es position:absolute
   (main.css L1832-1838, z-index:9) — NO reserva espacio en el flujo
   normal, se superpone al contenido que sigue; no es un problema de
   z-index (el header ya gana el stacking, correctamente, por diseño:
   es un header "overlay" sobre el hero). El padding-top reducido a
   20px/12px en la fase anterior (F11.10F) dejaba la creatividad
   empezando literalmente debajo del propio header, por eso se veía
   recortada arriba. Esta misma codebase ya documenta la altura real
   del header — ib-overrides.css línea ~819: "header sticky (135px
   desktop, 82px mobile)" — usada ahí mismo para reservar espacio en
   otro hero (.hero-inner-section-area-sidebar). Aquí se reserva esa
   MISMA altura documentada como padding-top (+ aire extra), en vez
   de un valor arbitrario. padding-bottom se mantiene mínimo/discreto,
   sin tocar las alturas de banner-premium (340/260/200px, F11.10F,
   sin cambios en esta fase). */
.hero-area-slider.ib-hero-has-ad .hero1-section-area {
    padding-top: 150px;   /* 135px de header documentado + ~15px de aire */
    padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-area-slider.ib-hero-has-ad .hero1-section-area {
        padding-top: 120px;  /* clearance intermedio entre desktop y mobile */
        padding-bottom: 16px;
    }
}
@media (max-width: 767px) {
    .hero-area-slider.ib-hero-has-ad .hero1-section-area {
        padding-top: 96px;   /* 82px de header documentado + ~14px de aire */
        padding-bottom: 12px;
    }
}
.hero-area-slider.ib-hero-has-ad .hero1-section-area::after {
    content: none; /* elimina el overlay ::after de main.css solo en este caso */
}

/* El buscador nunca debe tapar la creatividad: se neutraliza
   EXCLUSIVAMENTE el margin-top negativo de main.css (-120px en
   desktop/tablet) cuando hay un banner en el Hero, vía selector de
   hermano general — main.css no se toca, solo se sobrescribe desde
   aquí con igual especificidad y orden posterior en el documento. */
.hero-area-slider.ib-hero-has-ad ~ .others-section-area .property-tab-section {
    margin-top: 0;
}

/* Caja del banner dentro del Hero (F11.10I — reemplaza las alturas
   fijas de F11.10F).

   Formato desktop aprobado: 1920×300 (ratio 1920/300 = 6.4). La caja
   ahora usa aspect-ratio en vez de una altura en píxeles fija, para
   que se reduzca PROPORCIONALMENTE al ancho real del viewport
   (1920px→300px, 1440px→225px, 1366px→213px, ...), nunca deformando
   ni recortando. max-width:1920px + margin:0 auto evita escalar la
   creatividad por ENCIMA de su resolución real aprobada (nunca se
   "inventa" definición que el archivo no tiene) cuando el viewport es
   más ancho que 1920px — la caja se centra en vez de seguir creciendo.
   object-fit:contain + width/height:100% del <img> dentro de esa caja
   es lo que garantiza "sin recorte, sin deformación" incluso si la
   proporción real de la creatividad subida no coincide exactamente
   con 1920:300 — el fondo neutro (#F4F4F4) cubre cualquier diferencia
   mínima en vez de recortar.

   Nota: la fase F11.10F había abandonado aspect-ratio asumiendo que
   fallaba en producción; en retrospectiva, F11.10F corrió ANTES de
   implementarse el versionado de caché (F11.10G) — es posible que el
   problema real fuera CSS desactualizado en caché, no aspect-ratio en
   sí. Esta fase lo reintroduce porque el ticket exige una caja que se
   reduzca proporcionalmente (una altura fija en px no puede, por
   definición, representar 1920:300 en todos los anchos de viewport);
   si el problema reaparece, es la primera hipótesis a descartar.

   Tablet: SIN una regla aparte — la misma aspect-ratio de desktop
   sigue aplicando y se reduce sola a medida que el viewport se angosta
   (768px→120px, 991px→155px aprox.), evitando imponer una altura de
   260px que generara bandas vacías excesivas (instrucción explícita
   del ticket). */
.hero1-section-area .ib-banner-premium.ib-banner-premium--hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.hero1-section-area .ib-banner-premium--hero .ib-banner-premium__link {
    display: block;
}
.hero1-section-area .ib-banner-premium--hero .ib-banner-premium__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1920px; /* nunca escalar la creatividad por encima de su resolución aprobada */
    margin: 0 auto;
    aspect-ratio: 1920 / 300; /* formato aprobado — se reduce proporcionalmente con el viewport */
    background: #F4F4F4; /* fondo neutro, solo visible si la proporción real no coincide exacto */
    overflow: hidden;
    border-radius: 0;
}
.hero1-section-area .ib-banner-premium--hero .ib-banner-premium__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* nunca cover: nunca recorta ni deforma la creatividad */
    border-radius: 0;
}

/* Móvil (F11.10I): NO se impone el ratio 1920:300 aquí — una
   creatividad de creative_url_mobile puede tener una proporción
   distinta (más alta/cuadrada), y forzar 6.4:1 sobre ella la
   deformaría o la dejaría ilegible de tan delgada. Se cancela
   aspect-ratio y se deja que la caja tome la altura natural de
   CUALQUIER imagen que el <picture> termine cargando (mobile o,
   a falta de ella, el fallback desktop ya reducido) — exactamente
   el mismo criterio que la variante normal-flow (no-hero) de este
   componente ya usa arriba. Decisión explícita: el límite de 200px
   usado en F11.10F ya NO se mantiene como techo fijo — se reemplaza
   por una altura adaptada al contenido, porque un techo fijo
   reintroduciría el riesgo de recorte/deformación que esta fase
   busca eliminar. Esto es resoluble enteramente en CSS — no requirió
   ningún cambio en includes/parts/ib_banner_slot.php. */
@media (max-width: 767px) {
    .hero1-section-area .ib-banner-premium--hero .ib-banner-premium__picture {
        max-width: 100%;
        aspect-ratio: auto;
        height: auto;
        display: block;
    }
    .hero1-section-area .ib-banner-premium--hero .ib-banner-premium__img {
        height: auto;
    }
}

/* ============================================================
   TÍTULO Y SUBTÍTULO REUBICADOS DEBAJO DEL BUSCADOR (F11.10E)

   .hero-title/.hero-subtitle ya NO están dentro de
   .hero-area-slider .hero1-section-area .hero-header-area (esa era
   la ruta exacta que ib-overrides.css usa para darles color/tamaño
   — al moverlos, esas reglas dejan de aplicar por completo). Estas
   reglas replican el mismo tamaño/peso/interlineado/responsive que
   tenían antes, adaptando SOLO el color (antes blanco + sombra sobre
   foto oscurecida; ahora un color oscuro sobre el fondo claro de la
   página, reutilizando las variables de marca ya existentes
   --ztc-text-text-2/--ztc-text-text-3 definidas en main.css — se
   referencian, nunca se modifican).
   ============================================================ */
/* F11.10F: más separación respecto al buscador — antes el bloque
   quedaba casi pegado a la tarjeta del buscador (padding-top 40px),
   lo que se veía apretado. Se aumenta el padding superior por
   breakpoint para un resultado más "respirado"; el inferior se
   mantiene discreto porque ya le sigue la sección "Sobre nosotros". */
.hero-title-area-below-search {
    padding: 100px 0 10px;
}
.hero-title-area-below-search .hero-header-area h1.hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ztc-text-text-2);
    text-align: center;
    margin: 0;
    text-shadow: none;
}
.hero-title-area-below-search .hero-header-area p.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: var(--ztc-text-text-3);
    text-align: center;
    line-height: 1.5;
    margin: 16px auto 0;
    max-width: 720px;
    padding: 0 20px;
    text-shadow: none;
    opacity: 1;
}
@media (max-width: 991px) {
    .hero-title-area-below-search { padding-top: 72px; }
    .hero-title-area-below-search .hero-header-area h1.hero-title { font-size: 42px; }
    .hero-title-area-below-search .hero-header-area p.hero-subtitle { font-size: 17px; margin-top: 12px; }
}
@media (max-width: 640px) {
    .hero-title-area-below-search { padding-top: 48px; }
    .hero-title-area-below-search .hero-header-area h1.hero-title { font-size: 32px; }
    .hero-title-area-below-search .hero-header-area p.hero-subtitle { font-size: 15px; margin-top: 10px; max-width: 90%; }
}
@media (max-width: 480px) {
    .hero-title-area-below-search { padding-top: 40px; }
    .hero-title-area-below-search .hero-header-area h1.hero-title { font-size: 28px; line-height: 1.2; }
    .hero-title-area-below-search .hero-header-area p.hero-subtitle { font-size: 14px; }
}