/* ==========================================================
   VW — Overrides de SP Page Builder
   Migrado desde el param custom_css del template style (Helix).
   Vencen la especificidad de los <style> inline de SPB via
   !important. Se carga global despues de custom.css (index.php).
   ========================================================== */

body.autoplaza-vw h1, body.autoplaza-vw h2, body.autoplaza-vw h3, body.autoplaza-vw h4, body.autoplaza-vw h5, body.autoplaza-vw h6, body.autoplaza-vw .sppb-addon-title, body.autoplaza-vw .sppb-feature-box-title {
    font-family: var(--vw-font-head) !important;
    font-weight: 200 !important;
    color: var(--vw-dark);
    letter-spacing: -0.02em !important;
}
body.autoplaza-vw h1, body.autoplaza-vw h1.sppb-addon-title {
    font-size: var(--vw-h1-size) !important;
    line-height: 1.2 !important;
}
body.autoplaza-vw h2, body.autoplaza-vw h2.sppb-addon-title {
    font-size: var(--vw-h2-size) !important;
    line-height: 1.2 !important;
}
body.autoplaza-vw h3, body.autoplaza-vw h3.sppb-addon-title {
    font-size: var(--vw-h3-editorial-size) !important;
    line-height: 1.2 !important;
}
body.autoplaza-vw h4, body.autoplaza-vw h4.sppb-addon-title {
    font-size: clamp(1rem, 1.5vw, 1.375rem) !important;
    line-height: 1.3 !important;
}
body.autoplaza-vw h5, body.autoplaza-vw h5.sppb-addon-title, body.autoplaza-vw h6, body.autoplaza-vw h6.sppb-addon-title {
    font-size: clamp(0.875rem, 1.2vw, 1.125rem) !important;
    line-height: 1.3 !important;
}
body.autoplaza-vw .sppb-feature-box-title {
    font-weight: 700 !important;
}
body.autoplaza-vw .sppb-addon-content, body.autoplaza-vw .sppb-addon-text, body.autoplaza-vw .sppb-addon p {
    font-family: var(--vw-font-text) !important;
    color: var(--vw-dark);
}
body.autoplaza-vw .sppb-btn, body.autoplaza-vw a.sppb-btn {
    font-family: var(--vw-font-text) !important;
    border-radius: var(--vw-radius-pill) !important;
    border: 1px solid var(--vw-corporate) !important;
    color: var(--vw-corporate) !important;
    background-color: transparent !important;
    padding: 0.75rem var(--vw-btn-padding-x) !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
}
body.autoplaza-vw .sppb-btn:hover, body.autoplaza-vw a.sppb-btn:hover {
    background-color: var(--vw-corporate) !important;
    color: var(--vw-white) !important;
}

/* Variante .flat — boton sin borde; el hover solo cambia el azul a celeste */
body.autoplaza-vw .sppb-btn.flat, body.autoplaza-vw a.sppb-btn.flat {
    border: none !important;
    background-color: transparent !important;
    color: var(--vw-corporate) !important;
}
body.autoplaza-vw .sppb-btn.flat:hover, body.autoplaza-vw a.sppb-btn.flat:hover {
    border: none !important;
    background-color: transparent !important;
    color: var(--vw-blue-hover) !important;
}

/* Section Title addon — titulo y subtitulo de seccion */
body.autoplaza-vw .sppb-title-heading {
    color: var(--vw-dark) !important;
    font-family: var(--vw-font-head) !important;
    font-weight: 700 !important;
    font-size: var(--vw-h2-size) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    margin: 0px 0px 50px 0px !important;
}
body.autoplaza-vw .sppb-title-subheading {
    color: var(--vw-dark) !important;
    font-family: var(--vw-font-head) !important;
    font-weight: 200 !important;
    font-size: clamp(1.75rem, 1.49rem + 0.74vw, 2.38rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    hyphens: auto;
    word-break: break-word;
}

/* ==========================================================
   Bloque "Especificaciones principales" (.vw-specs)
   Componente reutilizable: se pega el HTML limpio (ver
   plan/specs/vw-specs.html) dentro de un Text Block de SPB.
   El wrapper de SPB (section/row/column/addon) provee el
   contenedor; aca solo se estiliza el contenido del bloque,
   sin estilos inline. Tokens definidos en custom.css (:root).
   ========================================================== */
body.autoplaza-vw .vw-specs {
    margin-inline: auto;
}

/* Grid responsivo de tarjetas */
body.autoplaza-vw .vw-specs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
    margin: 1rem 0rem;
    padding: 0;
}
body.autoplaza-vw .vw-specs__item {
    background: var(--vw-gray-bg);
    border-radius: var(--vw-radius-md);
    padding: 1.5rem;
    text-align: center;
    margin: 0;
}
body.autoplaza-vw .vw-specs__label {
    display: block;
    font-family: var(--vw-font-text);
    font-size: 0.875rem;
    color: var(--vw-gray);
    margin: 0 0 0.25rem;
}
body.autoplaza-vw .vw-specs__value {
    display: block;
    font-family: var(--vw-font-head);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--vw-dark);
    margin: 0;
}

/* Movil: dos columnas para evitar tarjetas demasiado angostas */
@media (max-width: 575.98px) {
    body.autoplaza-vw .vw-specs__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    body.autoplaza-vw .vw-specs__item {
        padding: 1.25rem;
    }
}

/* ==========================================================
   Galeria de modelo (.galeria-modelo)
   Componente reutilizable: se pega la clase en cualquier
   section de SPB (Polo, Nivus, Taos, etc.).

   El comportamiento aplica SOLO a las imagenes cuyo .sppb-addon
   tiene la clase .w-100 (toggle "full width" del addon de SPB).
   Esas imagenes ocupan el 100% del ancho de su columna y la
   altura es proporcional a su relacion de aspecto (sin recorte):
   una imagen vertical queda mas alta que una apaisada. Las
   imagenes sin .w-100 conservan su tamano natural de SPB. El row
   conserva su alineacion nativa (align-bottom).
   ========================================================== */

/* El contenedor de imagen de SPB es display:inline-block, asi que se
   encoge al ancho natural de la imagen y deja espacios en blanco en
   pantallas anchas (4K). Lo forzamos a bloque full-width para que la
   imagen pueda ocupar el 100% del ancho de su columna. */
body.autoplaza-vw .galeria-modelo .sppb-addon.w-100,
body.autoplaza-vw .galeria-modelo .sppb-addon.w-100 .sppb-addon-content,
body.autoplaza-vw .galeria-modelo .sppb-addon.w-100 .sppb-addon-single-image-container {
    display: block !important;
    width: 100% !important;
}

body.autoplaza-vw .galeria-modelo .sppb-addon.w-100 .sppb-img-responsive,
body.autoplaza-vw .galeria-modelo .sppb-addon.w-100 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ==========================================================
   CTA "¿Estás listo?" — bloque reutilizable sobre fondo oscuro
   Aplica a cualquier pagina cuya seccion tenga id="estas-listo-contacto".
   El id es unico por documento, pero se reutiliza el mismo id en otras paginas.
   ========================================================== */
body.autoplaza-vw #estas-listo-contacto .sppb-title-heading {
    color: var(--vw-white) !important;
    font-weight: 400 !important;
}
body.autoplaza-vw #estas-listo-contacto .sppb-title-subheading {
    color: var(--vw-white) !important;
    /* mitad del tamano base del subheading */
    font-size: clamp(0.875rem, 0.745rem + 0.37vw, 1.19rem) !important;
}
body.autoplaza-vw #estas-listo-contacto .sppb-btn,
body.autoplaza-vw #estas-listo-contacto a.sppb-btn {
    color: var(--vw-white) !important;
    border-color: var(--vw-white) !important;
}
body.autoplaza-vw #estas-listo-contacto .sppb-btn:hover,
body.autoplaza-vw #estas-listo-contacto a.sppb-btn:hover {
    background-color: var(--vw-accent) !important;
    border-color: var(--vw-accent) !important;
    color: var(--vw-white) !important;
}

/* ==========================================================
   Feature boxes — alto uniforme de imagenes (cuadrado 1:1 fluido)
   Reutilizable: aplica a cualquier seccion marcada con
   normalize-heigth-feature-img, ya sea en su atributo id
   (ej. id="confort normalize-heigth-feature-img", de ahi el
   selector [id~=...]) o en su class. Iguala el alto de todas las
   .sppb-img-responsive de los addons Feature forzandolas a un
   cuadrado que escala con el ancho de la columna; object-fit:cover
   recorta sin deformar las imagenes de proporciones dispares.
   ========================================================== */
body.autoplaza-vw [id~="normalize-heigth-feature-img"] .sppb-addon-feature .sppb-img-container,
body.autoplaza-vw .normalize-heigth-feature-img .sppb-addon-feature .sppb-img-container {
    display: block !important;
    width: 100% !important;
}
body.autoplaza-vw [id~="normalize-heigth-feature-img"] .sppb-addon-feature .sppb-img-responsive,
body.autoplaza-vw .normalize-heigth-feature-img .sppb-addon-feature .sppb-img-responsive {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* ==========================================================
   Pagina Contacto (itemid-531) — formulario ajax_contact + tarjetas
   de info. Restyle sutil alineado a la paleta/tipografia VW.
   Scopeado a la pagina para no afectar otros formularios del sitio.
   !important vence los <style> inline con selectores ID de SPB.
   ========================================================== */

/* Formulario: ancho contenido y centrado */
body.autoplaza-vw.itemid-531 .sppb-addon-ajax-contact {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}
body.autoplaza-vw.itemid-531 .sppb-addon-ajax-contact .sppb-addon-title {
    margin-bottom: 2rem !important;
    text-align: center;
}

/* Labels */
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form label {
    font-family: var(--vw-font-text) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--vw-gray-mid) !important;
    margin-bottom: 0.375rem !important;
    display: inline-block;
}

/* Separacion entre campos */
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-form-group {
    margin-bottom: 1.25rem !important;
}

/* Inputs y textarea */
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-form-control {
    width: 100% !important;
    background-color: var(--vw-white) !important;
    border: 1px solid var(--vw-gray-light) !important;
    border-radius: var(--vw-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--vw-font-text) !important;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem) !important;
    line-height: 1.5 !important;
    color: var(--vw-dark) !important;
    box-shadow: none !important;
    transition: border-color var(--vw-transition-base), box-shadow var(--vw-transition-base) !important;
}
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form textarea.sppb-form-control {
    min-height: 8.5rem;
    resize: vertical;
}
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-form-control::placeholder {
    color: var(--vw-gray) !important;
    opacity: 1;
}
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-form-control:focus {
    border-color: var(--vw-accent) !important;
    box-shadow: 0 0 0 0.1875rem rgba(76, 199, 244, 0.18) !important;
    outline: none !important;
}

/* Boton enviar — pill VW (colores vienen de los settings del addon) */
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn {
    border: none !important;
    border-radius: var(--vw-radius-pill) !important;
    padding: 0.875rem 2.75rem !important;
    font-family: var(--vw-font-text) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background-color var(--vw-transition-base), color var(--vw-transition-base) !important;
}

/* Tarjetas de info de contacto (addons Feature) — sutiles y consistentes */
body.autoplaza-vw.itemid-531 .sppb-addon-feature {
    margin-bottom: 0.5rem;
}
body.autoplaza-vw.itemid-531 .sppb-addon-feature .sppb-icon-container {
    color: var(--vw-corporate) !important;
    font-size: 1.25rem !important;
}
body.autoplaza-vw.itemid-531 .sppb-addon-feature .sppb-feature-box-title,
body.autoplaza-vw.itemid-531 .sppb-addon-feature .sppb-media-heading {
    font-family: var(--vw-font-text) !important;
    font-weight: 400 !important;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem) !important;
    line-height: 1.5 !important;
    color: var(--vw-dark) !important;
    letter-spacing: 0 !important;
}

/* Boton: colores VW forzados (los settings del addon no recompilan
   su <style> inline al editar el content por BD). */
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn,
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn:link,
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn:visited {
    background-color: var(--vw-corporate) !important;
    color: var(--vw-white) !important;
}
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn:hover,
body.autoplaza-vw.itemid-531 .sppb-ajaxt-contact-form .sppb-btn:focus {
    background-color: var(--vw-accent) !important;
    color: var(--vw-dark) !important;
}