/* =========================================================
   VALENZUELA PROPIEDADES — V24
   Secciones full-width + footer alineado al navbar + 4 cards
   ========================================================= */

/*
  V22/V23 mantienen un marco lateral para navbar y contenido central.
  En V24 las siguientes secciones salen de ese marco y ocupan todo
  el ancho de la pantalla:
  - ¿Por qué elegir Valenzuela Propiedades?
  - Sobre nosotros / testimonios
  - CTA "Nos comprometemos..."
*/

@media (min-width:1366px){

  /* -------------------------------------------------------
     FULL WIDTH REAL PARA LAS 3 SECCIONES SOLICITADAS
     ------------------------------------------------------- */
  .page-wrap > .why-section,
  .page-wrap > .about-testimonial,
  .page-wrap > .cta-band{
    width:calc(100% + (var(--vp-frame-gutter) * 2)) !important;
    max-width:none !important;
    margin-left:calc(var(--vp-frame-gutter) * -1) !important;
    margin-right:calc(var(--vp-frame-gutter) * -1) !important;
  }

  /* ¿Por qué elegir...? — contenido ocupa toda la sección
     pero con padding interior discreto para que no se pegue al borde */
  .page-wrap > .why-section > .container-xl{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:36px !important;
    padding-right:36px !important;
  }

  /* Sobre nosotros / testimonios:
     como la sección no tiene container externo, solo se asegura full width. */
  .page-wrap > .about-testimonial{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* CTA full width, contenido con aire interno */
  .page-wrap > .cta-band > .container-xl{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:36px !important;
    padding-right:36px !important;
  }

  /* -------------------------------------------------------
     FOOTER FULL WIDTH, PERO CON PADDING INTERNO IGUAL AL NAVBAR
     ------------------------------------------------------- */
  .page-wrap > footer{
    width:calc(100% + (var(--vp-frame-gutter) * 2)) !important;
    max-width:none !important;
    margin-left:calc(var(--vp-frame-gutter) * -1) !important;
    margin-right:calc(var(--vp-frame-gutter) * -1) !important;
  }

  /*
    El fondo del footer llega de borde a borde.
    Su CONTENIDO interno usa exactamente la misma referencia lateral
    que el navbar: --vp-frame-gutter.
  */
  .page-wrap > footer > .container-xl{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:var(--vp-frame-gutter) !important;
    padding-right:var(--vp-frame-gutter) !important;
  }

  /* -------------------------------------------------------
     4 CARDS EN CADA SECCIÓN
     ------------------------------------------------------- */
  .properties-area .property-row-dynamic > [class*="col-xl-"]{
    flex:0 0 25% !important;
    max-width:25% !important;
  }

  /* Mantiene fotografías con presencia en 4 columnas */
  .properties-area .property-media{
    height:285px !important;
    min-height:285px !important;
  }
}

/* Full HD / pantallas grandes */
@media (min-width:1600px){
  .properties-area .property-media{
    height:305px !important;
    min-height:305px !important;
  }
}

/* 1920+: V22 centra el marco en 1672px.
   Las secciones full-width deben recuperar TODO el viewport. */
@media (min-width:1920px){
  .page-wrap > .why-section,
  .page-wrap > .about-testimonial,
  .page-wrap > .cta-band,
  .page-wrap > footer{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc((100vw - 1672px) / -2) !important;
    margin-right:calc((100vw - 1672px) / -2) !important;
  }

  .page-wrap > footer > .container-xl{
    padding-left:124px !important;
    padding-right:124px !important;
  }
}

/* Tablet: 2 cards */
@media (min-width:768px) and (max-width:1199.98px){
  .properties-area .property-row-dynamic > [class*="col-md-"]{
    flex:0 0 50% !important;
    max-width:50% !important;
  }
}

/* Móvil: 1 card */
@media (max-width:767.98px){
  .properties-area .property-row-dynamic > [class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}