/* =========================================================
   VALENZUELA PROPIEDADES — V27
   ALINEACIÓN GLOBAL CON LAS SECCIONES DE PROPIEDADES
   ========================================================= */

/*
   REFERENCIA:
   Las secciones de propiedades usan:
   - margen exterior del marco: --vp-frame-gutter
   - padding interior de container-xl: 28px

   Por lo tanto el borde real del contenido es:
   --vp-content-edge = margen exterior + 28px

   Todas las secciones inferiores y el footer usan desde ahora
   exactamente esa misma línea izquierda y derecha.
*/

@media (min-width:1366px){

  :root{
    --vp-content-inner:28px;
    --vp-content-edge:calc(var(--vp-frame-gutter) + var(--vp-content-inner));
  }

  /* =====================================================
     FULL-WIDTH VISUAL
     Los fondos siguen ocupando todo el viewport.
     ===================================================== */
  .page-wrap > .why-section,
  .page-wrap > .about-testimonial,
  .page-wrap > .cta-band,
  .page-wrap > footer{
    position:relative !important;
    left:50% !important;

    width:100vw !important;
    max-width:100vw !important;

    margin-left:-50vw !important;
    margin-right:0 !important;

    box-sizing:border-box !important;
  }

  /* =====================================================
     ¿POR QUÉ ELEGIR?
     ===================================================== */
  .page-wrap > .why-section{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .page-wrap > .why-section > .container-xl{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:var(--vp-content-edge) !important;
    padding-right:var(--vp-content-edge) !important;
  }

  /* =====================================================
     SOBRE NOSOTROS + TESTIMONIOS
     Esta sección no usa container-xl, por lo tanto la línea
     de alineación se aplica directamente al grid.
     ===================================================== */
  .page-wrap > .about-testimonial{
    box-sizing:border-box !important;

    padding-left:var(--vp-content-edge) !important;
    padding-right:var(--vp-content-edge) !important;

    gap:0 !important;
  }

  .page-wrap > .about-testimonial > .about-image,
  .page-wrap > .about-testimonial > .about-copy,
  .page-wrap > .about-testimonial > .testimonial{
    min-width:0 !important;
  }

  /* Mantiene el bloque central limpio sin generar desplazamientos */
  .page-wrap > .about-testimonial > .about-copy{
    box-sizing:border-box !important;
  }

  .page-wrap > .about-testimonial > .testimonial{
    box-sizing:border-box !important;
  }

  /* =====================================================
     CTA FINAL
     ===================================================== */
  .page-wrap > .cta-band{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .page-wrap > .cta-band > .container-xl{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:var(--vp-content-edge) !important;
    padding-right:var(--vp-content-edge) !important;
  }

  /* =====================================================
     FOOTER
     Fondo full-width, contenido EXACTAMENTE en la misma
     línea de las propiedades.
     ===================================================== */
  .page-wrap > footer{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .page-wrap > footer > .container-xl{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:var(--vp-content-edge) !important;
    padding-right:var(--vp-content-edge) !important;
  }

  .page-wrap > footer .footer-grid,
  .page-wrap > footer .footer-bottom{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   1920+:
   V22 limita el marco central a 1672px.
   El borde de las propiedades queda en:
   (viewport - 1672px)/2 + 28px
   ========================================================= */
@media (min-width:1920px){
  :root{
    --vp-content-edge:calc((100vw - 1672px) / 2 + 28px);
  }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:768px) and (max-width:1365.98px){

  .page-wrap > .why-section > .container-xl,
  .page-wrap > .cta-band > .container-xl,
  .page-wrap > footer > .container-xl{
    padding-left:28px !important;
    padding-right:28px !important;
  }

  .page-wrap > .about-testimonial{
    box-sizing:border-box !important;
    padding-left:28px !important;
    padding-right:28px !important;
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width:767.98px){

  .page-wrap > .why-section > .container-xl,
  .page-wrap > .cta-band > .container-xl,
  .page-wrap > footer > .container-xl{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .page-wrap > .about-testimonial{
    box-sizing:border-box !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}