/* =========================================================
   VALENZUELA PROPIEDADES — V22
   MARCO / MÁRGENES VISIBLES DESDE 14" (1366px+)
   ========================================================= */

/*
  CSS no puede detectar pulgadas físicas de forma confiable.
  Para notebooks de 14" se toma 1366px como inicio del diseño desktop
  con margen visible, creciendo progresivamente hasta 124px por lado.
*/

@media (min-width:1366px){

  :root{
    --vp-frame-gutter: clamp(88px, 6.45vw, 124px);
    --vp-frame-inner: 28px;
  }

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:#fff !important;
  }

  /* =====================================================
     MARCO GENERAL DE LA PÁGINA
     La portada completa deja margen blanco a izquierda/derecha.
     ===================================================== */
  .page-wrap{
    width:auto !important;
    max-width:none !important;
    margin-left:var(--vp-frame-gutter) !important;
    margin-right:var(--vp-frame-gutter) !important;
    overflow:visible !important;
  }

  /*
    IMPORTANTE:
    El Hero YA NO es full-bleed en desktop grande.
    Queda contenido dentro del mismo marco visual de la página,
    tal como en la imagen de referencia.
  */
  .page-wrap .hero,
  .page-wrap .hero-carousel,
  .page-wrap .hero-carousel .carousel-inner,
  .page-wrap .hero-carousel .carousel-item,
  .page-wrap .hero-slide{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* =====================================================
     NAVBAR Y BARRA SUPERIOR
     Mismo margen exterior que toda la página.
     ===================================================== */
  .top-strip{
    left:var(--vp-frame-gutter) !important;
    right:var(--vp-frame-gutter) !important;
    width:auto !important;
  }

  .main-nav{
    left:var(--vp-frame-gutter) !important;
    right:var(--vp-frame-gutter) !important;
    width:auto !important;
  }

  /*
    Evita que Bootstrap/V20/V21 vuelvan a reducir el contenido.
    El margen principal ahora lo controla el marco exterior.
  */
  .top-strip > .container-xl,
  .main-nav > .container-xl{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Logo alineado exactamente con el borde izquierdo del marco */
  .main-nav .brand-wrap{
    margin-left:0 !important;
    padding-left:0 !important;
  }

  .main-nav .brand-logo{
    left:0 !important;
    margin-left:0 !important;
  }

  /* =====================================================
     CONTENIDO INTERIOR
     Solo 28px de aire interno; no doble margen.
     ===================================================== */
  .page-wrap .container-xl{
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--vp-frame-inner) !important;
    padding-right:var(--vp-frame-inner) !important;
  }

  /* Hero con contenido interior, pero fotografía desde borde a borde del marco */
  .page-wrap .hero-slide > .container-xl{
    padding-left:var(--vp-frame-inner) !important;
    padding-right:var(--vp-frame-inner) !important;
  }

  /* Buscador y cards mantienen alineación con el mismo marco */
  .search-shell,
  .properties-area,
  .why-section,
  .cta-band,
  footer{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* =====================================================
     FOTOS DE CARDS
     Mantiene la altura premium de V21.
     ===================================================== */
  .properties-area .property-media{
    height:300px !important;
    min-height:300px !important;
  }

  .properties-area .property-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* Full HD: un poco más de altura de foto */
@media (min-width:1600px){
  .properties-area .property-media{
    height:320px !important;
    min-height:320px !important;
  }
}

/* 1920+: el margen sigue visible y no crece indefinidamente */
@media (min-width:1920px){
  :root{
    --vp-frame-gutter:124px;
  }

  .page-wrap,
  .top-strip,
  .main-nav{
    max-width:1672px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .top-strip,
  .main-nav{
    left:0 !important;
    right:0 !important;
  }
}

/* Tablet y móvil: se conserva el comportamiento responsive normal */
@media (max-width:1365.98px){
  .page-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}