/* ============================================================
   Marca de Savá: paleta y tipografía.
   Cambiar el :root de abajo actualiza toda la hoja de estilos.
   Los fondos de marca se referencian más abajo:
   ../imgs/background-start.jpg (2026-07-27: ya actualizado con foto propia de Savá)
   ../imgs/background-quiz.jpg (TODO-MARCA: aún es el binario de Alba del Bosque, pendiente reemplazar)
   ============================================================ */

/* ---- Tipografía del manual de marca (envío del 13-oct-2026) ----
   Reemplaza a Montserrat, que se heredó de Alba del Bosque y se cargaba desde
   Google Fonts. Ahora van autohospedadas en /fonts, convertidas de los .otf
   de RECURSOS/FONTS a woff2 (292 KB -> 155 KB).

   Satoshi          -> cuerpo, formularios, botones
   Monument Extended-> titulares

   Los cortes embarcados salen de los font-weight que usa esta hoja (100, 400,
   500, 600, 700): el 100 cae en Light y el 600 en Bold por las reglas de
   emparejamiento de CSS, asi que no hacen falta mas.

   ⚠️ Son fuentes comerciales de Pangram Pangram. El cliente las entregó, pero
   antes de producción hay que confirmar que la licencia cubre el uso WEB
   (autohospedarlas no es lo mismo que usarlas en un diseño impreso). */

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monument Extended';
    src: url('../fonts/MonumentExtended-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monument Extended';
    src: url('../fonts/MonumentExtended-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Tipografía ---- */
    --font-body: 'Satoshi', 'Montserrat', sans-serif;
    --font-display: 'Monument Extended', 'Satoshi', sans-serif;

    /* ---- Paleta oficial de Savá ----
       Fuente: RECURSOS/COLORES.ai del envío del 13-oct-2026 (archivo modificado
       el 17-sep-2026). Son 7 colores con nombre propio. Ver PALETA-COLORES.md.

       ⚠️ Esto REEMPLAZA la paleta de 4 colores del manual de agosto
       (#54594B / #DEDDD8 / #767468 / #B3AD98). Son paletas distintas, no un
       re-export: ninguno de los 4 viejos aparece en la nueva. El oliva del
       logo nuevo (#525333 muestreado) es practicamente "Verde futuro", lo que
       confirma cual manda.

       Los .ai vienen en Adobe RGB (1998); estos hex son la conversion a sRGB,
       que es lo que corresponde para web. */
    --sava-verde-upgrade:     #80826E;
    --sava-verde-futuro:      #525434;
    --sava-gris-insignia:     #BDB29D;
    --sava-cafe-distintivo:   #756552;
    --sava-marfil-habitable:  #F1E6CC;
    --sava-camel-vida:        #976F44;
    --sava-negro-calidad:     #423D3A;

    /* ---- Alias por uso. Cada uno apunta al color del manual que corresponde
       segun DONDE se usa, no por su nombre historico. ---- */

    /* Fondo del boton de reserva (.reserve-button).
       ⚠️ El amarillo NO esta en la paleta del manual: es una excepcion pedida
       expresamente por el cliente (14-oct-2026) para que el CTA de pago siga
       siendo el elemento mas llamativo de la pantalla, como lo era antes.
       NO reemplazarlo por un color del manual "para unificar": ya se intento
       dos veces (Marfil habitable y Verde futuro) y las dos se revirtieron.
       Con --color-base encima da 6,9:1. */
    --color-accent: #f9ff00;

    /* Color oscuro de marca: es el del logo y el que se usa como texto sobre
       blanco (7,85:1). */
    --color-base: var(--sava-verde-futuro);
    --color-base-rgb: 82, 84, 52;   /* mismo color base, para rgba() */

    --color-secondary-1: var(--sava-cafe-distintivo);

    /* Estos dos SOLO forman el degradado de .cta-button, que va con texto
       blanco: tienen que ser tonos oscuros o el texto deja de leerse.
       Verde futuro 7,85:1 y Negro calidad 10,71:1 con blanco encima.
       Antes eran los azules #2c5aa0 / #1e3a5f de Alba. */
    --color-secondary-2: var(--sava-verde-futuro);
    --color-secondary-3: var(--sava-negro-calidad);

    /* Fondo de quiz-cta-button y nav-button.
       ⚠️ Este boton lleva `color: #ffffff` y el gris insignia da 2,10:1 — NO
       cumple AA. Ya venia mal de antes (2,25:1 con el #ACB19D heredado), asi
       que se mantiene el aspecto claro actual y queda PENDIENTE de decision:
       o el texto pasa a --color-base (3,74:1, solo texto grande) o el boton
       pasa a --sava-verde-futuro con texto blanco (7,85:1). */
    --color-button: var(--sava-gris-insignia);
    --color-button-rgb: 189, 178, 157; /* mismo color-button, para rgba() */
}

/* Reset y estilos base */
html {
    height: 100%;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: #ffffff;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
}

/* Asegurar que no haya scroll en el documento */
html, body {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}
.view-blueprint-link{
    background: var(--color-button);
    color: #ffffff!important;
    display: block;
    text-decoration: none!important;
    width: 120px;
    margin: 7px auto;
    padding: 5px 0px;
    max-width: 100%!important;
}
.view-blueprint-link:hover{
    background: #ffffff;
    color: var(--color-base)!important;
}
.subtitle-medium{
    font-size: 15px!important;
}
.two-buttons-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.two-buttons-container .quiz-cta-button{
    margin-top: 0px;
}
.reserve-button{
    /*background: transparent !important;
    color: var(--color-accent)!important;
    border-bottom: 1px solid var(--color-accent)!important;
    border-radius: 0!important;
    box-shadow: none!important;
    padding: 0 !important;*/
    background: var(--color-accent)!important;   /* amarillo, ver nota en :root */
    color: var(--color-base)!important;
}
.table-properties .reserve-button{
    margin-left: 0px;
    padding: 10px 8px;
    font-size: 15px;
    letter-spacing: 0px;
}
.wrapper-logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 50px;
}
.wrapper-logo img{
    margin-bottom: 0px!important;
}
.my-0{
    margin-top: 0!important;
    margin-bottom: 0!important;
}
.group-titles{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.group-titles .subtitle{
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}
.bg-transparent{
    background: transparent!important;
}
.benefits-container{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin: 50px 0;
}
.benefit-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 311px;
    max-width: 100%;
    font-size: 21px;
    font-weight: 100;
    background: #fff;
    border-radius: 23px;
    overflow: hidden;
}
.benefit-item p{
    margin: 0;
    text-align: left;
    width: 100%;
    line-height: 1.4;
    text-align: center;
    color: var(--color-base);
    font-size: 18px;
    font-weight: 400;
    margin-top: 0;
    height: 100%;
    position: relative;
    padding: 10px;
}
.benefit-item p span {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    left: 0;
    max-width: 100%;
    padding: 10px 15px;
}
.benefit-item b{
    font-weight: 700;
}
.benefit-icon{
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
}
.benefit-icon img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
@media (max-width: 1024px) {
    .benefits-container{
        margin: 30px 0;
    }
    .benefit-item p {
        font-size: 19px;
    }
    .benefit-item{
        width: 260px;
    }
}
@media (max-width: 768px) {
    .benefits-container{
        flex-direction: column;
        margin-top: 0px;
    }
    .benefit-item{
        width: 80%;
        margin: 0 auto;
    }
 
}
.options-location.grid-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    justify-content: center;
}

.options-location.grid-options-container .grid-option {
    flex: 0 0 calc((100% - 40px) / 3);
    box-sizing: border-box;
    max-width: calc((100% - 40px) / 3);
}
.mb-20{
    margin-bottom: 20px!important;
}
.m-0{
    margin: 0!important;
}
.mb-10{
    margin-bottom: 10px!important;
}
.mt-30{
    margin-top: 30px!important;
}
.mt-10{
    margin-top: 10px!important;
}
/* ===== ESTILOS DEL HERO ===== */

/* Contenedor principal del hero */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Fondo del hero */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 10%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 2;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 0 20px;
}

/* Logo */
.logo-container {
    margin-bottom: 40px;
}

.logo {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Texto del hero */
.hero-text {
    margin-bottom: 40px;
}

.main-headline {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.sub-headline {
    font-size: 1.5rem;
    font-weight: 400;
    color: #f0f0f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.4;
}

/* Contenedor del CTA */
.cta-container {
    margin-top: 40px;
}

.cta-button {
    background: linear-gradient(135deg, var(--color-secondary-2) 0%, var(--color-secondary-3) 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, var(--color-secondary-3) 0%, var(--color-secondary-2) 100%);
}

.cta-button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-content {
        padding: 0 15px;
    }
    
    .logo {
        max-width: 250px;
    }
    
    .main-headline {
        font-size: 2.5rem;
    }
    
    .sub-headline {
        font-size: 1.2rem;
    }
    
    .cta-button {
        padding: 15px 30px;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .main-headline {
        font-size: 2rem;
    }
    
    .sub-headline {
        font-size: 1rem;
    }
    
    .logo {
        max-width: 200px;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
    .two-buttons-container{
        flex-direction: column-reverse;
    }
}

/* Efectos de hover adicionales */
.hero-content:hover .logo {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Optimización para dispositivos táctiles */
@media (hover: none) {
    .cta-button:hover {
        transform: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

/* ===== ESTILOS DEL CUESTIONARIO ===== */

/* Contenedor principal del cuestionario */
.quiz-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Indicador de progreso */
.progress-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mostrar progress dots desde el segundo slide */
.progress-container.show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ocultar progress dots cuando hay colisión con el contenido */
.progress-container.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ocultar progress dots en el primer slide */
.progress-container[data-step="0"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

.progress-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
    opacity: 0.3;
    transition: all 0.3s ease;
}

/* Ocultar el primer dot siempre */
.progress-dot[data-step="0"] {
    display: none;
}

.progress-dot.active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
    opacity: 1;
}

.progress-dot.completed {
    background: #fff;
    border-color: #fff;
    transform: scale(1);
    opacity: 1;
}

/* Contenedor de páginas - Carrusel vertical */
.pages-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.quiz-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1;
    opacity: 0;
}

/* Slide activo - Visible */
.quiz-page.active {
    opacity: 1;
    z-index: 2;
    overflow-y: auto;
}

/* Mejorar scroll en pantallas pequeñas */
@media (max-width: 768px) {
    
    .quiz-page.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Mejor scroll en iOS */
    }
    
    .quiz-page.active .page-content {
        min-height: 100vh;
        padding: 20px 15px;
        padding-top: 60px; /* Espacio para los dots de progreso */
        justify-content: start; /* Empezar desde el inicio cuando el contenido es alto */
    }
}

@media (max-width: 480px) {
    .quiz-page.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .quiz-page.active .page-content {
        min-height: 100vh;
        padding: 15px 10px;
        padding-top: 50px; /* Espacio para los dots de progreso en pantallas muy pequeñas */
        justify-content: start; /* Empezar desde el inicio cuando el contenido es alto */
    }
}

/* Asegurar que el slide de agradecimiento sea visible */
.quiz-page[data-page="9"].active {
    opacity: 1;
    z-index: 2;
    transform: translateY(0%) !important;
}

/* Posiciones iniciales de todos los slides */
.quiz-page[data-page="0"] { transform: translateY(0%); }
.quiz-page[data-page="1"] { transform: translateY(100%); }
.quiz-page[data-page="2"] { transform: translateY(200%); }
.quiz-page[data-page="3"] { transform: translateY(300%); }
.quiz-page[data-page="4"] { transform: translateY(400%); }
.quiz-page[data-page="5"] { transform: translateY(500%); }
.quiz-page[data-page="6"] { transform: translateY(600%); }
.quiz-page[data-page="7"] { transform: translateY(700%); }
.quiz-page[data-page="8"] { transform: translateY(800%); }
.quiz-page[data-page="9"] { transform: translateY(900%); }

.quiz-page[data-page="1"] .page-content,
.quiz-page[data-page="2"] .page-content,
.quiz-page[data-page="8"] .page-content { 
    width: 457px; 
}
.quiz-page[data-page="3"] .page-content { 
    width: 540px; 
}
.quiz-page[data-page="4"] .page-content { 
    width: 730px; 
}

/* Fondo de página - Fijo */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../imgs/background-start.jpg?v=20260727-2') center center/cover no-repeat;
    z-index: 1;
    transition: background-image 0.5s ease;
}

/* Degradado negro con transparencia por encima del fondo */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
}

.page-background.quiz-background {
    background: url('../imgs/background-quiz.jpg') center center/cover no-repeat;
}

/* Degradado negro con transparencia por encima del fondo del cuestionario */
.page-background.quiz-background .background-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Fondo específico para la página de estilo de vida */
.quiz-page[data-page="3"] .page-background {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%);
    position: relative;
}

.quiz-page[data-page="3"] .page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.4) 0%, transparent 50%);
    z-index: 1;
}

/* Fondo específico para la página de tipo de propiedad */
.quiz-page[data-page="4"] .page-background {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%);
    position: relative;
}

.quiz-page[data-page="4"] .page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.4) 0%, transparent 50%);
    z-index: 1;
}

/* Fondo específico para la página de agradecimiento */
.quiz-page[data-page="9"] .page-background {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%);
    position: relative;
}

.quiz-page[data-page="9"] .page-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.4) 0%, transparent 50%);
    z-index: 1;
}

.page-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay con gradiente radial - Opaco en el centro, transparente en los bordes */
.page-background::after {
    display: none;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 10%;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
}

/* Contenedor de páginas */
.pages-container {
    position: relative;
    z-index: 15;
    width: 100%;
    height: 100%;
}

/* Contenido de página - Se mueve */
.page-content {
    position: relative;
    z-index: 15;
    text-align: center;
    width: 100%;
    transition: all 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    min-height: 100vh;
    justify-content: center;
}

/* Estilos específicos para el contenido de la página de estilo de vida */
.quiz-page[data-page="5"] .page-content {
    text-align: left;
    align-items: flex-start;
    padding: 0;
}

/* Contenedor para el contenido principal */
.page-content-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Mas aire arriba que abajo: con los dots de progreso justo encima, 40px
       dejaban el titular pegado a ellos, y con Monument Extended (que es
       grande y ancha) se notaba mas. */
    padding: 64px 0 40px;
}

/* El titular define el ancho de su contenedor flex, asi que al ensancharlo a
   50/90vw el subtitulo se estiraba con el y quedaba en una linea de punta a
   punta. Se le da su propio tope de lectura (~62 caracteres) y se centra. */
.page-subtitle,
.group-titles .subtitle {
    max-width: min(62ch, 90vw);
    margin-left: auto;
    margin-right: auto;
}

/* Logo en páginas de cuestionario */
.quiz-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 16;
}

/* Títulos y textos */
.page-title {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 600;   /* Monument Extended no trae 700; su corte alto es SemiBold */
    color: #ffffff;
    text-shadow: none;
    line-height: 1.2;
    /* Se limita el ancho para que el titular no se estire de borde a borde:
       con Monument Extended, que es muy ancha, una pregunta larga quedaba en
       una sola linea de punta a punta y costaba leerla.

       ⚠️ Va en vw, no en %, porque el % se resuelve contra el CONTENEDOR y no
       contra la pantalla. En las paginas con formulario ese contenedor mide
       ~457px, asi que un `max-width: 50%` dejaba la caja en 229px y
       "¡Qué gusto tenerte aquí!" caia partido en 3 lineas. El min() con 100%
       evita que en esos contenedores angostos el titular se desborde.

       En pantallas chicas sube al 90% (ver media queries).

       El titular vive dentro de .page-content, que se encoge al ancho del
       formulario (~457px en varias paginas), asi que acotarlo al 100% del
       contenedor lo dejaba partido en 3 o 4 lineas. Se lo deja "escapar": se
       le da un ancho relativo a la PANTALLA y se lo recentra sobre el centro
       del padre con margin-left 50% + translateX(-50%).

       No hace falta ningun truco para recentrarlo: en las 16 paginas el padre
       del titular es flex column con align-items:center, y eso centra al hijo
       aunque sea mas ancho que el contenedor. (Se intento con
       margin-left:50% + translateX(-50%) y quedaba corrido, justamente porque
       el flex ya lo estaba centrando y el margen lo desplazaba de nuevo.)

       Y no se recorta: los ancestros con overflow:hidden (.quiz-page,
       .pages-container, .quiz-container) miden el ancho completo de la
       ventana, asi que recortan en el borde de la pantalla y no en los ~457px
       del formulario. Mientras el ancho se exprese en vw, nunca hay recorte. */
    /* El ancho se maneja con una variable para que las reglas de abajo
       (encabezados cortos, .medium-width, movil) no peleen por especificidad:
       todas cambian --title-w, no `width`. Antes .page-title.medium-width
       (0,2,0) le ganaba a la regla de movil (0,1,0) y esa pregunta se quedaba
       en 50vw en el celular, partida en 7 lineas. */
    --title-w: 50vw;
    width: var(--title-w);
    max-width: none;
    margin-bottom: 30px;
    text-align: center;
}

/* Cuatro titulares arrastran .medium-width (650px fijos) del diseño anterior,
   que es mas angosto que el 50vw del sistema en pantallas grandes y encima no
   escala. Manda el ancho del sistema. Va ANTES de la regla de encabezados
   cortos para que esa siga ganando donde corresponde (misma especificidad,
   gana la ultima). */
.page-title.medium-width {
    width: var(--title-w);
    max-width: none;
}

/* Encabezados cortos: entran en una sola linea, asi que no tiene sentido
   apretarlos al 50%. Se les da el 90%, igual que en movil.
   La lista sale de medir el ancho natural de cada titular con la tipografia
   ya cargada: estos son los que caben en una linea dentro del 50%.
   Si se cambia el texto de alguna pregunta, conviene volver a medir. */
.quiz-page[data-page="1"] .page-title,
.quiz-page[data-page="6"] .page-title,
.quiz-page[data-page="10"] .page-title,
.quiz-page[data-page="11"] .page-title,
.quiz-page[data-page="12"] .page-title,
.quiz-page[data-page="17"] .page-title {
    --title-w: 90vw;
}

/* Estilos específicos para el título de la página de estilo de vida */
.quiz-page[data-page="3"] .page-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
    line-height: 1.3;
    max-width: 600px;
}

/* Estilos específicos para el título de la página de tipo de propiedad */
.quiz-page[data-page="4"] .page-title {
    max-width: 100%;
    width: 500px;
}

/* Estilos para la página de agradecimiento */
.quiz-page[data-page="9"] .page-content {
    text-align: center;
    max-width: 600px;
}

.thank-you-icon {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
    background: var(--color-base);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.thank-you-message {
    /*background: rgb(140 233 255 / 60%);*/
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    text-align: center;
}
.width-930{
    width: 930px;
    max-width: 100%;
}
.link-proposa, .link-web {
    color: #fff;
    font-weight: bold;
}
.thank-you-message p {
    margin-bottom: 15px;
    line-height: 1.2;
    color: #ffffff;
    font-size: 1rem;
}

.thank-you-message p:last-child {
    margin-bottom: 0;
}

.page-subtitle {
    font-size: 21px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: none;
}

.property-message {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin-top: -30px;
    margin-bottom: 30px;
    text-align: center;
    opacity: 0.9;
}

/* Estilos específicos para la primera página (intro) */
.quiz-page[data-page="0"] .quiz-logo {
    max-width: 250px;
    margin-bottom: 70px;
    margin-top: 20px;
}
.w-650{
    width: 650px;
    max-width: 100%;
}

/* Campos de entrada */
.input-field {
    width: 100%;
    max-width: 400px;
    padding: 15px 20px;
    font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    color: var(--color-base);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border-radius: 160px;
}
.data-user .input-field{
    margin-bottom: 10px;
}
.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.input-field::placeholder {
    color: var(--color-secondary-1);
}

/* Opciones de selección única */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}
.options-container.multiple-options {
   margin-bottom: 50px;
}
.medium-text{
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 22px;
}
.secondary-text{
    font-size: 13px;
    margin-top: 20px;
}
/* Los enlaces dentro de este parrafo van sobre fondo oscuro: sin esto toman
   el azul por defecto del navegador (#0000ee) y no se leen. */
.secondary-text a{
    color: inherit;
    text-decoration: underline;
}
.list-circle{
    list-style: disc;
    text-align: left;
    width: 590px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 15px;
}
.medium-width{
    width: 650px;
    max-width: 100%;
}
.option-button {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 160px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 1rem;
    color: var(--color-base);
}
.option-button .small-text {
    color: var(--color-base);
    font-weight: normal;
    font-size: 0.8rem;
    font-style: normal;
}
.option-button.selected .small-text{
    color: #ffffff;
}
.option-button .two-lines{
    line-height: 18px;
}

.option-button:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.option-button.selected {
    background: var(--color-button);
    border-color: var(--color-button);
    color: #fff;
}

.option-radio {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-base);
    border-radius: 50%;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.option-button.selected .option-radio {
    border-color: white;
    background: white;
}

.option-button.selected .option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-base);
    border-radius: 50%;
}

/* Estilos para checkbox (selección múltiple) */
.option-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-base);
    border-radius: 4px;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.option-button.selected .option-checkbox {
    border-color: white;
    background: white;
}

.option-button.selected .option-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-base);
    font-size: 14px;
    font-weight: bold;
}

/* Opciones múltiples */
.multiple-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.multiple-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 1rem;
    color: #ffffff;
}

.multiple-option:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
}

.multiple-option.selected {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-base);
}

.multiple-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 0;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.multiple-option.selected .multiple-checkbox {
    border-color: white;
    background: white;
}

.multiple-option.selected .multiple-checkbox::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-base);
    font-weight: bold;
    font-size: 14px;
}

/* Opciones en grid */
.grid-options-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.grid-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 1rem;
    color: #ffffff;
}

.grid-option:hover {
    transform: translateY(-2px);
}

.grid-option.selected {
    color: #ffffff;
}

.grid-option.selected .grid-option-icon {
    background: var(--color-button)!important;
}

.grid-option.selected .grid-option-icon img {
    filter: brightness(0) invert(1);
}

.grid-option-icon {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    width: 126px;
    height: 126px;
    transition: background-color 0.3s ease;
}

.grid-option-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    padding: 20px;
}

.grid-option-text {
    font-size: 21px;
    color: #ffffff;
    line-height: 1.2;
}

.grid-option-price {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

/* Preguntas duales */
.dual-questions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.dual-question {
    text-align: center;
    padding: 20px;
}

.dual-question-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 167px;
    height: 167px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 15px auto;
}

.question-icon-image {
    width: 80%;
    height: 80%;
    object-fit: contain;
    padding: 12px;
}

.dual-question-title {
    font-size: 21px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #ffffff;
}
.quiz-page[data-page="5"] .dual-questions-container{
    align-items: flex-end;
}
.dual-options {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.dual-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border-radius: 160px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    color: var(--color-base);
}

.dual-option:hover {
    background: #f0f0f0;
}

.dual-option.selected {
    background: var(--color-base);
    border-color: var(--color-base);
    color: #fff;
}

.radio-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    position: relative;
    flex-shrink: 0;
    border: 1px solid var(--color-base);
}

.dual-option.selected .radio-circle {
    background: white;
}

.dual-option.selected .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--color-base);
    border-radius: 50%;
}

/* Slider de rango */
.range-slider-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.range-slider {
    width: 100%;
    height: 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    -webkit-appearance: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--color-base);
    cursor: pointer;
    border: 2px solid white;
}

.range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--color-base);
    cursor: pointer;
    border: 2px solid white;
}

.range-value {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 15px;
}

/* Formulario de contacto */
.contact-form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.form-field {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff;
    text-align: left;
}

.form-input {
    width: 100%;
    padding: 15px;
    border-radius: 160px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    color: #ffffff;
    border: none;
    font-family: var(--font-body);
}
.contact-form .form-input{
    color: var(--color-base);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-base);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(var(--color-base-rgb), 0.2);
}
.option-button .form-input{
    color: var(--color-base);
    border: 2px solid #9fc0cf;
}
.option-button.calendar-meeting{
    flex-direction: column;
    gap: 15px;
}
.with-auto{
    width: auto;
    max-width: unset;
}
.link-policies{
    color: #ffffff;
    text-decoration: underline;
    font-weight: normal;
}
.form-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    color: #ffffff;
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-body);
}

/* Navegación */
.navigation-container {
    position: relative;
    display: flex;
    gap: 20px;
    z-index: 20;
    justify-content: center;
    width: 100%;
}

/* Asegurar que el botón de navegación sea visible */
.nav-button.back-button {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.nav-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--color-button);
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--color-base-rgb), 0.3);
}

/* Estilos específicos para el icono de la flecha */
.nav-button i {
    font-size: 1.2rem;
    color: #ffffff;
    display: block;
}

.nav-button:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-base-rgb), 0.3);
}

.nav-button:hover i {
    color: var(--color-base);
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Ocultar botones de navegación en los primeros dos slides */
.nav-button.next-button.hide,
.nav-button.back-button.hide {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Botón principal */
.quiz-cta-button {
    background: var(--color-button);
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--color-base-rgb), 0.3);
    letter-spacing: 0.5px;
    margin-top: 20px;
    min-width: 179px;
}

.quiz-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-base-rgb), 0.35);
    background: #ffffff;
    color: var(--color-base);
}

.quiz-cta-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#agendarCitaBtn:disabled,
#contactPhoneBtn:disabled {
    opacity: 1 !important;
}

/* Mensajes de error */
.error-message {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin-top: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Responsive design para cuestionario */
@media (max-width: 768px) {
    .page-title {
        /* 24px, no 2rem: los 32px anteriores eran MAS grandes que los 25px de
           escritorio, y con Monument Extended (muy ancha) eso dejaba titulares
           de 5 lineas a 600px de ancho. Medido con la fuente real: 32px -> 5
           lineas, 24px -> 4. */
        font-size: 24px;
        /* en pantallas chicas el 50% dejaria el titular demasiado angosto */
        --title-w: 90vw;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    .grid-options-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
    
    .options-location.grid-options-container .grid-option {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
    
    .dual-questions-container {
        grid-template-columns: 1fr;
        gap: 0px;
    }
    
    .multiple-options-container {
        grid-template-columns: 1fr;
    }
    
    .navigation-container {
        bottom: 20px;
    }
    
    .dual-question-icon {
        width: 100px;
        height: 100px;
    }
    .dual-question-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .question-icon-image {
        width: 80%;
        height: 80%;
        padding: 15px;
    }
    
    /* Responsive para la página de tipo de propiedad */
    .quiz-page[data-page="4"] .page-title {
        margin-bottom: 10px;
    }
    .grid-option{
        padding-bottom: 5px;
    }
    .grid-option-icon {
        width: 100px;
        height: 100px;
    }
    
    .grid-option-text {
        font-size: 12px;
    }
    
    .grid-option-price {
        font-size: 11px;
    }
    
    .quiz-page[data-page="9"] .page-subtitle {
        font-size: 1.1rem;
    }
    
    .thank-you-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .thank-you-message {
        padding: 20px;
    }
    
    .field-group {
        max-width: 350px;
        gap: 8px;
    }
    
    .field-group select {
        min-width: 100px;
        padding: 12px 15px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        /* 18px: a 360px de ancho, 20px dejaba el titular mas largo en 6 lineas
           y 18px lo baja a 5. Por debajo (16px) ya se lee chico para un titulo. */
        font-size: 18px;
    }
    
    .grid-options-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
    }
    
    .options-location.grid-options-container {
        max-width: 100%;
        padding: 0 10px;
    }
    
    .options-location.grid-options-container .grid-option {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
        min-width: 0;
    }
    
    @media (max-width: 360px) {
        .options-location.grid-options-container .grid-option {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    
    .quiz-page {
        padding: 0px 15px 15px;
        padding-top: 50px; /* Espacio para los dots de progreso */
    }
    
    .progress-container {
        top: 15px;
    }
    
    .progress-dot {
        width: 10px;
        height: 10px;
    }
    .option-button {
        padding: 12px 14px;
    }
    .quiz-page[data-page="8"] .quiz-cta-button {
        margin-top: 0;
    }
    .quiz-page[data-page="8"] .page-title {
        margin-bottom: 20px;
    }
}

/* ===== ESTILOS DEL CHECKBOX ===== */

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.checkbox-input {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid var(--color-base);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-input:checked {
    background: var(--color-button);
    border-color: var(--color-button);
}

.checkbox-input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.checkbox-label {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    user-select: none;
}

/* Estilos para campos con error */
.input-field.error,
.form-input.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 1) !important;
}

/* Estilos para checkbox con error */
.checkbox-input.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 1) !important;
}

/* Estilos para mensajes de error */
.error-message {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    text-align: left;
    padding: 8px 12px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    display: block;
    max-width: 100%;
}

/* Los mensajes anclados a un campo (data-for) se insertan justo despues del
   input. El del telefono cae dentro de la fila flex que comparte con el
   selector de pais, asi que sin esto se acomoda a un costado, angosto y alto.
   Ocupando toda la fila baja debajo del campo, como los demas. */
.error-message[data-for] {
    flex-basis: 100%;
    width: 100%;
    /* Mismo ancho que los campos (.input-field y .field-group son 400px), para
       que el mensaje no sobresalga a los costados del campo que describe. */
    max-width: 400px;
    box-sizing: border-box;
    /* Un poco de aire abajo: sin esto el mensaje quedaba pegado al campo
       siguiente y parecia pertenecerle a ese y no al de arriba. */
    margin: 6px auto 14px;
}

/* Estilos para texto pequeño */
.small-text {
    font-size: 0.7rem;
    color: #ffffff;
    font-style: italic;
    margin: 10px 0;
    line-height: 1.3;
    text-align: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.small-text-terms{
    font-size: 0.6rem;
}

/* Responsive para checkbox */
@media (max-width: 768px) {
    .checkbox-container {
        max-width: 400px;
        gap: 10px;
    }
    
    .checkbox-label {
        font-size: 0.85rem;
    }
    
    .small-text {
        font-size: 0.7rem;
        max-width: 350px;
    }
    
    .error-message {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .checkbox-container {
        max-width: 350px;
        gap: 8px;
    }
    
    .checkbox-input {
        width: 18px;
        height: 18px;
    }
    
    .checkbox-label {
        font-size: 0.8rem;
    }
    
    .small-text {
        font-size: 0.65rem;
        max-width: 300px;
    }
    
    .error-message {
        font-size: 0.75rem;
        padding: 5px 8px;
    }
}

/* Estilos para campo de teléfono con código de país */
.field-group {
    display: flex;
    /* Permite que el mensaje de error (flex-basis:100%) baje a una linea
       propia debajo de la fila. Sin esto quedaba apretado al costado del
       campo, angosto y alto. Los dos elementos normales (select + input)
       entran de sobra, asi que el wrap no los afecta. */
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto;
}

.field-group select {
    flex: 0 0 auto;
    padding: 15px 15px;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 160px;
    background: rgba(255, 255, 255, 1);
    color: var(--color-base);
    cursor: pointer;
    font-family: var(--font-body);
    min-width: 80px;
    max-width: 100px;
}

.field-group .input-field {
    flex: 1;
    margin-bottom: 0;
    min-width: 200px;
}

/* Responsive para campo de teléfono */
@media (max-width: 768px) {
    .field-group {
        max-width: 350px;
        gap: 8px;
    }
    
    .field-group select {
        min-width: 70px;
        max-width: 90px;
        padding: 12px 12px;
        font-size: 0.95rem;
    }
    
    .field-group .input-field {
        min-width: 180px;
    }
    .data-user .field-group{
        max-width: 400px;
        flex-direction: row;
    }
    .data-user .field-group select{
        min-width: 35%;
        max-width: 35%;
    }
    .data-user .field-group .input-field{
        min-width: auto;
        max-width: auto;
    }
}

@media (max-width: 480px) {
    
    .field-group {
        max-width: 300px;
        gap: 6px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .field-group select {
        min-width: auto;
        max-width: none;
        width: 100%;
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .field-group .input-field {
        width: 100%;
        min-width: auto;
    }
}

/* ===== ESTILOS PARA GROUP-SELECT ===== */

/* Contenedor de selects en línea */
.form-field.group-select {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px auto;
}

/* Estilos para los selects dentro de group-select */
.form-field.group-select select {
    flex: 1;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 160px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-base);
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.3s ease;
    border: 2px solid #9fc0cf;
}

.form-field.group-select select:focus {
    outline: none;
    border-color: var(--color-base);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(var(--color-base-rgb), 0.2);
}

.form-field.group-select select:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Responsive para group-select */
@media (max-width: 768px) {
    .form-field.group-select {
        max-width: 450px;
        gap: 12px;
    }
    
    .form-field.group-select select {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .form-field.group-select {
        flex-direction: column;
        gap: 15px;
        max-width: 350px;
    }
    
    .form-field.group-select select {
        width: 100%;
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}

/* ===== ESTILOS PARA BOTÓN DE COPIAR ===== */
.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--color-base);   /* era el azul #007bff de Bootstrap */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.copy-button:hover {
    background-color: rgba(var(--color-base-rgb), 0.1);   /* era rgba(0,123,255,.1) */
    color: var(--sava-negro-calidad);   /* era #0056b3 */
}

.copy-button:active {
    transform: scale(0.95);
}

.copy-button svg {
    width: 16px;
    height: 16px;
}

/* ===== ESTILOS PARA TOOLTIP ===== */
.tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

/* ===== ESTILOS PARA INPUTS CON ERROR ===== */

/* Estilo para input con error */
.form-input.error,
.option-button input.error {
    border: 2px solid #ff0000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    animation: shake 0.5s ease-in-out;
}

/* Mensaje de error para inputs */
.input-error-message {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    background: rgba(255, 0, 0, 0.1);
    border-radius: 5px;
    border-left: 3px solid #ff0000;
}

/* Animación de shake para inputs con error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Transición suave para el borde del input */
.form-input,
.option-button input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

  /* Grilla de casas 3x2 */
  .houses-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      max-width: calc(180px * 3 + 20px * 2); /* Máximo 3 tarjetas + 2 gaps */
      margin: 0 auto;
      margin-bottom: 30px;
  }
  
  /* Mantener ancho fijo de 180px en las tarjetas */
  .houses-grid .property-card {
      width: 180px;
      flex: 0 0 180px; /* No crecer, no encoger, tamaño base 180px */
  }

.houses-grid > div {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.houses-grid > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

  .houses-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* Tarjetas de propiedades con información */
  .property-card {
      position: relative;
      width: 180px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
      background: white;
      border: 3px solid transparent;
      display: flex;
      flex-direction: column;
  }

  .property-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .property-card.selected {
      border-color: var(--color-button);
      box-shadow: 0 8px 25px rgba(var(--color-base-rgb), 0.3);
  }
  .property-card.selected .property-info{
    background: var(--color-button);
  }
  .property-card.selected .property-name, .property-card.selected .property-detail{
    color: #ffffff;
  }
  .property-image-container {
      width: 100%;
      height: 122px;
      overflow: hidden;
      position: relative;
  }

  .property-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* Placeholder de los modelos que todavia no tienen render propio de Sava
     (Laurea, Cedria y Cedro). Antes era gris #666 sobre gris #f0f0f0 y no se
     leia; ahora va en la paleta de Sava y con borde punteado, para que se
     entienda como "falta la foto" y no como un error de carga. */
  .property-image-container .no-image-message {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      border: 1px dashed rgba(var(--color-base-rgb), 0.45);
      color: var(--color-base);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      padding: 20px;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
  }

  .property-info {
      padding: 12px;
      background: white;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .property-name {
      font-size: 16px;
      font-weight: bold;
      color: var(--color-base);
  }
    .no-properties-message{
        text-align: center;
        padding: 40px 20px;
        color: var(--color-base);
        font-size: 18px;
        font-weight: 500;
        background: #fff;
    }
  .property-detail {
      font-size: 13px;
      color: var(--color-base);
      line-height: 1.4;
  }

                        @media (max-width: 768px) {
            .houses-grid {
                gap: 15px;
                max-width: calc(180px * 2 + 15px); /* 2 tarjetas + 1 gap */
            }
            
            .houses-grid .property-card {
                width: 180px;
                flex: 0 0 180px;
                max-width: 180px;
            }

        .property-image-container {
            height: 150px;
        }
        
        /* En pantallas muy pequeñas (teléfonos), una columna */
        @media (max-width: 480px) {
            .houses-grid {
                max-width: 300px;
            }
            
            .houses-grid .property-card {
                width: 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

      .property-name {
          font-size: 18px;
      }

      .property-detail {
          font-size: 14px;
      }
  }
.option-button-content{
    display: flex;
    align-items: center;
    font-weight: 700;
    width: 100%;
}
.radius-12{
    border-radius: 12px;
}
.contact-phone{
 flex-direction: column;
 gap: 15px;
}
.calendar-meeting .form-field.group-select select, .contact-phone .field-group select, 
.contact-phone .field-group input{
    padding: 5px 15px;
    border: 2px solid #9fc0cf;
}
.calendar-meeting .form-field.group-select select:hover{
    border-color: var(--color-base);
}
.contact-phone .field-group{
    margin: 0;
    width: 100%;
    max-width: unset;
}
.finish-process{
    gap: 20px;
    max-width: 100%;
}
.finish-process .option-button .quiz-cta-button{
    padding: 4px;
    margin: 0;
    background: var(--color-button);
    color: #ffffff;
    box-shadow: unset;
}
.finish-process .option-button.selected .quiz-cta-button{
    background: #ffffff;
    color: var(--color-base);
}
.calendar-meeting .form-field.group-select{
    margin-bottom: 0;
}
.calendar-meeting, .contact-phone, .continue-exploring{
    width: 490px;
    max-width: 100%;
    margin: 0 auto;
}
.thank-you-page p{
    font-size: 21px;
    font-weight: 100;
    width: 595px;
    max-width: 100%;
    margin-bottom: 20px;
}
.thank-you-page img{
    filter: brightness(0) invert(1);
}
.thank-you-page .copy-button{
    margin: 0;
    position: relative;
    bottom: -10px;
}

/* Estilos para la tabla de proposalPropertyModels en página 14 */
.table-properties {
    width: 100%;
    border-collapse: separate;
    /*background-color: rgba(var(--color-base-rgb), 0.8);*/
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    margin: 30px auto;
    margin-bottom: 20px;
    max-width: calc(100% - 60px);
}

.table-properties thead {
    background-color: #fff; 
}

.table-properties th {
    padding: 15px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-base);
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
    border: 1px solid #fff;
}

.table-properties th:last-child {
    border-right: none;
}

.table-properties tbody {
    background-color: transparent;
}

.table-properties td {
    padding: 15px 12px;
    color: #ffffff;
    border: 1px solid #fff;
    vertical-align: middle;
    background-color: transparent;
    text-align: center;
}

/* Estilos específicos para las celdas */
.table-properties .modelo-cell {
    min-width: 180px;
    padding: 0px!important;
}

.table-properties .property-image-container {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 0px;
    margin-bottom: 0px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-properties .property-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.table-properties-container{
    overflow-x: auto;
    max-width: 95%;
    width: 100%;
}
.table-properties .property-name {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    padding: 5px 0 5px 0;
    background-color: rgba(var(--color-button-rgb), 0.9);
}

.table-properties .plantas-habitaciones-cell {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
}

.table-properties .ubicacion-cell {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
}

.table-properties .precio-cell,
.table-properties .reserva-cell,
.table-properties .thirty-percent-cell,
.table-properties .installment-12-cell,
.table-properties .installment-24-cell,
.table-properties .installment-36-cell,
.table-properties .installment-44-cell,
.table-properties .seventy-percent-cell {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.table-properties .property-field .label{
    display: none;
}
.table-properties .plantas-habitaciones-cell .property-field .label{
    display: block;
}
.table-properties .property-field{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}
/* Mensaje cuando no hay imagen.
   Esta tabla tiene fondo blanco, asi que el blanco al 60% que habia aqui era
   invisible. Mismo tratamiento que en las tarjetas. */
.table-properties .no-image-message {
    background-color: #ffffff;
    border: 1px dashed rgba(var(--color-base-rgb), 0.45);
    color: var(--color-base);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
}
#propertyMessage{
    padding-left: 20px!important;
    padding-right: 20px!important;
}
/* Responsive para tablets */
@media (max-width: 1280px) {
    .data-user .input-field{
        padding: 10px 20px;
    }
    .data-user .field-group select{
        padding: 10px 15px;
    }
    .data-user .field-group{
        margin-bottom: 0;
    }
    .data-user .page-content-main{
        padding-bottom: 15px;
    }
    .data-user .checkbox-container{
        margin: 5px 0;
    }
    .benefits-container{
        margin: 0px 0;
    }
    .location-page .page-subtitle{
        margin-bottom: 0;
    }
    .location-page .grid-option-icon{
        margin-bottom: 5px;
    }
    .location-page .grid-options-container{
        gap: 0px;
    }
    .location-page .page-title {
        margin-bottom: 5px;
    }
    .floors-page .option-button{
        padding: 10px 20px;
    }
    .floors-page .options-container.multiple-options {
        margin-bottom: 35px;
    }
    .floors-page #firstFloorRoomQuestion .options-container.multiple-options{
        margin-bottom: 0px;
    }
    .move-time-page .option-button{
        padding: 10px 20px;
    }
}

/* Responsive para tablets */
@media (max-width: 1024px) {
    .table-properties {
        font-size: 12px;
    }
    
    .table-properties th,
    .table-properties td {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .table-properties .property-image-container {
        height: 120px;
    }
    .benefit-icon{
        height: 140px;
        border-radius: 20px 20px 0 0;
    }
    .benefit-icon img{
        width: 100%;
        height: auto;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .table-properties {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .table-properties thead,
    .table-properties tbody,
    .table-properties th,
    .table-properties td,
    .table-properties tr {
        display: block;
    }
    
    .table-properties thead {
        display: none;
    }
    
    .table-properties tr {
        margin-bottom: 15px;
        border-radius: 8px;
        padding: 10px;
        background-color: #fff;
    }
    
    .table-properties td {
        border: none;
        padding: 8px 0;
        text-align: left;
        color: var(--color-base);
    }
    
    .benefits-page .page-title{
        margin-bottom: 15px;
    }
    .benefits-page .benefit-item p{
        margin-top: 15px;
    }
    .benefits-page .benefit-icon{
        height: auto;
    }
    .benefits-page .page-content-main{
        padding-top: 22px;
    }
    .continue-process-page .option-button-content > span,
    .continue-process-page .continue-exploring > span{
        line-height: 20px;
    }
    .continue-process-page .form-field, .continue-process-page .field-group{
        flex-direction: row;
    }
    .continue-process-page .form-field select{
        width: 50%;
        font-size: 13px;
        padding: 5px 10px;
    }
    .continue-process-page .field-group select{
        width: 80px;
    }
    .continue-process-page .quiz-cta-button{
        margin-top: 0;
    }
    .table-properties .reserve-button{
        display: none;
    }
    .table-properties .property-field span{
        display: block!important;
    }
    .benefit-item p span{
        position: static;
    }
    .benefit-icon{
        height: auto;
    }
    .benefit-icon img{
        width: 100%;
        height: auto;
    }
}

/* Estilos para el modal del plano */
.blueprint-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.blueprint-modal.blueprint-modal-has-pdf {
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.blueprint-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.blueprint-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 10001;
    animation: zoomIn 0.3s ease;
}

.blueprint-modal-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.blueprint-modal-content.blueprint-modal-pdf-container,
.blueprint-modal-content:has(iframe) {
    max-width: 95vw;
    max-height: 95vh;
    width: 95vw;
    height: 95vh;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-sizing: border-box;
}

.blueprint-modal-content iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border: none;
    display: block;
    box-sizing: border-box;
}

.blueprint-modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 10002;
}

.blueprint-modal-pdf-container .blueprint-modal-close {
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 10003;
}

.blueprint-modal-close:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.blueprint-modal-close i {
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .blueprint-modal-content {
        max-width: 95%;
        max-height: 95%;
    }

    .blueprint-modal-content img {
        max-width: 95vw;
        max-height: 95vh;
    }

    .blueprint-modal-content.blueprint-modal-pdf-container,
    .blueprint-modal-content:has(iframe) {
        max-width: 100vw;
        max-height: 95vh;
        width: 100vw;
        height: 95vh;
        left: 0;
        transform: translateY(-50%);
    }

    .blueprint-modal-content iframe {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .blueprint-modal-close {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

/* Modal formulario de pago (Datafast/OPPWA) */
.payment-checkout-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.payment-checkout-modal.payment-checkout-modal--open {
    display: flex;
}

.payment-checkout-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.payment-checkout-modal__box {
    position: relative;
    background: #fff;
    color: var(--color-base);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.payment-checkout-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.payment-checkout-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.payment-checkout-modal__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-base);
    font-size: 20px;
    line-height: 1;
}

.payment-checkout-modal__close:hover {
    opacity: 0.8;
}

/* Modal pago aprobado (mensaje en verde, centrado, usuario lo cierra) */
.payment-success-modal__box {
    border-top: 4px solid var(--color-base);   /* era el verde #198754 de Bootstrap */
    max-width: 420px;
}

.payment-success-modal__header {
    border-bottom-color: #d1e7dd;
}

.payment-success-modal__title {
    color: #0f5132;
}

.payment-success-modal__body {
    text-align: center;
}

.payment-success-modal__message {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #0f5132;
}

.payment-success-modal__btn {
    background: var(--color-base);   /* era #198754 */
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.payment-success-modal__btn:hover {
    background: var(--sava-negro-calidad);   /* hover; era #157347 */
}

.payment-checkout-modal__body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

.payment-checkout-modal__error {
    display: none;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.payment-checkout-modal__form {
    min-height: 0;
}

.payment-checkout-modal__body .paymentWidgets {
    margin: 0;
}

/* Validación cardholder (Datafast): borde rojo y mensaje visible como CVV/Expira */
.payment-checkout-modal .wpwl-has-error,
.payment-checkout-modal .wpwl-control-cardHolder.wpwl-has-error,
.payment-checkout-modal .wpwl-control-cardholder.wpwl-has-error {
    border: 1px solid #dc3545 !important;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545 !important;
}

.payment-checkout-modal .wpwl-hint-cardHolderError,
.payment-checkout-modal .wpwl-hint.wpwl-hint-cardHolderError {
    color: #dc3545 !important;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
    display: block;
}

/* Banner de error: todos los campos a completar en un solo mensaje */
.payment-cardholder-error-banner {
    display: block;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 12px;
}

.payment-cardholder-error-banner .payment-error-list {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

.payment-cardholder-error-banner .payment-error-list li {
    margin: 2px 0;
}

.payment-widget-error {
    color: #c00;
    margin: 0;
    font-size: 14px;
}

.payment-email-modal .payment-email-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.payment-email-modal .payment-email-input:focus {
    outline: none;
    border-color: #2c5530;
}

@media (max-width: 768px) {
    .payment-checkout-modal__box {
        max-height: 95vh;
    }
    .payment-checkout-modal__body {
        max-height: calc(95vh - 60px);
    }
}

/* === Chatbot — Asistente 24/7 === */
.containeravatar {
    width: 120px;
    height: auto;
    position: fixed;
    display: flex;
    bottom: 20px;
    right: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    z-index: 9999;
}

.containeravatar .avatar {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 4px white solid;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.8);
    transform: translateY(0);
    animation: chatbot-float 2s ease-in-out infinite;
    transition: border 0.7s ease;
}

.containeravatar .avatar a {
    display: block;
    width: 100%;
    height: 100%;
}

.containeravatar .avatar img {
    width: 100%;
    height: auto;
    display: block;
}

.containeravatar__label {
    text-align: center;
    line-height: 1.1;
    margin-top: 5px;
    width: 80%;
    font-size: 14px;
    color: white;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 6px 10px;
}

@keyframes chatbot-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@media (max-width: 768px) {
    .containeravatar {
        bottom: 10px;
        right: 6px;
    }
    .containeravatar .avatar {
        width: 80px;
        height: 80px;
    }
}