.bg-navy,
.banner-escala {
    /*background-color: #002244 !important;*/
    background: radial-gradient( ellipse 38% 180% at 12% 50%, rgba(15, 112, 143, 0.90) 0%, rgba(8, 88, 115, 0.70) 35%, rgba(5, 65, 86, 0.35) 65%, transparent 100% ), linear-gradient( 180deg, #07536c 0%, #03445b 50%, #033b51 100% );

}

.text-navy {
    color: #002244 !important;    
}

/* Azul brillante del texto 'nos mueve' */
.text-royal-blue {
    color: #0057B8 !important;
}

/* Rayita decorativa azul */
.accent-line {
    width: 38px;
    height: 3.5px;
    background-color: #004ad9;
    border-radius: 2px;
}

/* Imagen de la chica y el arco ajustada a la tarjeta */
.hero-banner-img {
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    object-position: right top;
    display: block;
}

/* En dispositivos móviles se adapta sin deformarse */
@media (max-width: 767.98px) {
    .hero-banner-img {
        max-height: 230px;
        object-fit: contain;
        object-position: center;
    }
}

/* Título fluido que escala con el ancho de la pantalla */
.hero-title {
    font-size: clamp(1.15rem, 4.2vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -0.5px;
}

/* Subtítulo escalable */
.hero-subtitle {
    font-size: clamp(0.7rem, 2.3vw, 2.15rem);
    line-height: 1.25;
}

/* Ícono de corazón escalable */
.hero-heart-svg {
    width: clamp(22px, 5vw, 68px);
    height: clamp(22px, 5vw, 68px);
}

/* Línea azul decorativa proporcional */
.accent-line {
    width: clamp(22px, 4vw, 40px);
    height: 3px;
    background-color: #004ad9;
    border-radius: 2px;
}

/* Imagen en celular: mantiene su proporción lateral sin desbordar */
.hero-banner-mobile {
    width: 100%;
    max-height: clamp(140px, 34vw, 300px);
    object-fit: contain;
    object-position: right center;
    display: block;
    border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
}

@media (min-width: 992px) {
    .hero-banner-mobile {
        width: 100% !important;
        height: 290px !important; /* Mantén aquí la altura exacta que te guste */
        max-height: 290px !important;
        object-fit: cover !important;
        object-position: right center !important; /* Mantiene a la chica y los círculos visibles */
    }
}

.scale-text {
    font-size: clamp(0.75rem, 1.3vw, 1.05rem);
}

/* Dimensiones del círculo blanco en celulares */
.scale-icon-wrapper {
    width: 38px;
    height: 38px;
}

/* Dimensiones del ícono SVG dentro del círculo en celulares */
.scale-icon-svg {
    width: 18px;
    height: 18px;
}

/* Escalado para PC (tablets medianas y monitores de 768px en adelante) */
@media (min-width: 768px) {
    .scale-icon-wrapper {
        width: 52px;
        height: 52px;
    }

    .scale-icon-svg {
        width: 24px;
        height: 24px;
    }
}

.bg-light-blue {
    background-color: #ebf3ff !important;
}

.survey-icon-box {
    width: clamp(34px, 4.5vw, 48px);
    height: clamp(34px, 4.5vw, 48px);
}

/* Input integrado */
.custom-survey-input {
    height: 42px;
    font-size: 0.95rem;
}

    .custom-survey-input:focus {
        background-color: #fff !important;
        border-color: #004ad9;
        box-shadow: none;
    }

.o-content-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.o-page-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 100% !important; /* Evita que achique el ancho */
}

/* Limpieza de la tabla generada por RadioButtonList */
.survey-rating-list {
    border-collapse: separate;
    border-spacing: 10px 0;
    margin: 0 auto;
}

    .survey-rating-list td {
        padding: 0;
        text-align: center;
    }

    /* Ocultar el radiobutton nativo y convertir la etiqueta en botón */
    .survey-rating-list input[type="radio"] {
        display: none;
    }

    .survey-rating-list label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid #cbd5e1;
        background-color: #ffffff;
        color: #475569;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        margin: 0 auto;
    }

        /* Efecto hover */
        .survey-rating-list label:hover {
            border-color: #0057B8;
            background-color: #f0f6ff;
            color: #004ad9;
        }

    /* Opción seleccionada activa */
    .survey-rating-list input[type="radio"]:checked + label {
        background-color: #0057B8;
        border-color: #0057B8;
        color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 74, 217, 0.25);
        transform: scale(1.06);
    }
/* Base de la tabla */
.survey-badge-num {
    width: clamp(20px, 2.5vw, 26px);
    height: clamp(20px, 2.5vw, 26px);
    font-size: clamp(0.7rem, 1vw, 0.82rem);
}

.survey-icon-svg {
    width: clamp(18px, 2.5vw, 24px);
    height: clamp(18px, 2.5vw, 24px);
}

.survey-question-text {
    font-size: clamp(0.75rem, 1.2vw, 0.98rem);
    line-height: 1.25;
}

.survey-faces-wrapper {
    width: clamp(165px, 40vw, 310px);
}

.survey-rating-faces,
.survey-rating-faces tbody,
.survey-rating-faces tr,
.survey-rating-faces td {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.survey-rating-faces {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 auto !important;
}

    .survey-rating-faces td {
        padding: 0 !important;
        text-align: center !important;
        vertical-align: top !important;
    }

    .survey-rating-faces input[type="radio"] {
        display: none !important;
    }

    /* Contenedor vertical: Emoji arriba, número abajo */
    .survey-rating-faces label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 auto !important;
        cursor: pointer;
        font-size: 0.75rem !important; /* Reducido de 0.95rem para que se vea fino y alineado */
        font-weight: 700;
        line-height: 1 !important;
        color: #475569;
        user-select: none;
    }

        /* El círculo con el WebP */
        .survey-rating-faces label::before {
            content: "";
            display: block;
            width: clamp(28px, 4.5vw, 46px);
            height: clamp(28px, 4.5vw, 46px);
            border-radius: 50% !important;
            margin-bottom: 2px;
            margin-bottom: 3px !important;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            box-sizing: border-box;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Efecto hover (flotar) */
        .survey-rating-faces label:hover::before {
            transform: scale(1.18);
        }

    /* Resalte seleccionado */
    .survey-rating-faces input[type="radio"]:checked + label::before {
        transform: scale(1.12);
        box-shadow: 0 0 0 2.5px #004ad9;
    }

    .survey-rating-faces input[type="radio"]:checked + label {
        color: #004ad9;
    }

    /* Tus 5 emojis locales */
    .survey-rating-faces td:nth-child(1) label::before {
        background-image: url("../Img/Emojis/enojado.webp") !important;
    }

    .survey-rating-faces td:nth-child(2) label::before {
        background-image: url("../Img/Emojis/Triste.webp") !important;
    }

    .survey-rating-faces td:nth-child(3) label::before {
        background-image: url("../Img/Emojis/Neutral.webp") !important;
    }

    .survey-rating-faces td:nth-child(4) label::before {
        background-image: url("../Img/Emojis/Satisfecho.webp") !important;
    }

    .survey-rating-faces td:nth-child(5) label::before {
        background-image: url("../Img/Emojis/MuySatisfechoo.webp") !important;
    }

    /* --- MICRO-ANIMACIONES AL SELECCIONAR (CLICK) --- */

    /* 1. Enojado: Tiembla */
    .survey-rating-faces td:nth-child(1) input[type="radio"]:checked + label::before {
        animation: fb-shake 0.45s ease-in-out;
    }

    /* 2. Triste: Cae y rebota levemente */
    .survey-rating-faces td:nth-child(2) input[type="radio"]:checked + label::before {
        animation: fb-sad 0.5s ease-in-out;
    }

    /* 3. Neutral: Se balancea */
    .survey-rating-faces td:nth-child(3) input[type="radio"]:checked + label::before {
        animation: fb-sway 0.5s ease-in-out;
    }

    /* 4. Satisfecho: Pulso */
    .survey-rating-faces td:nth-child(4) input[type="radio"]:checked + label::before {
        animation: fb-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 5. Muy Feliz: Salto elástico con alegría */
    .survey-rating-faces td:nth-child(5) input[type="radio"]:checked + label::before {
        animation: fb-jump 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

/* --- DEFINICIÓN DE LOS KEYFRAMES --- */
@keyframes fb-shake {
    0%, 100% {
        transform: scale(1.2) rotate(0deg);
    }

    20% {
        transform: scale(1.25) rotate(-10deg);
    }

    40% {
        transform: scale(1.25) rotate(10deg);
    }

    60% {
        transform: scale(1.2) rotate(-6deg);
    }

    80% {
        transform: scale(1.2) rotate(6deg);
    }
}

@keyframes fb-sad {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateY(4px) scale(1.15);
    }

    100% {
        transform: translateY(0) scale(1.18);
    }
}

@keyframes fb-sway {
    0%, 100% {
        transform: scale(1.18) rotate(0deg);
    }

    35% {
        transform: scale(1.2) rotate(-8deg);
    }

    70% {
        transform: scale(1.2) rotate(8deg);
    }
}

@keyframes fb-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.18);
    }
}

@keyframes fb-jump {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-14px) scale(1.32);
    }

    70% {
        transform: translateY(-2px) scale(1.15);
    }

    100% {
        transform: translateY(-6px) scale(1.22);
    }
}

.survey-scale-labels {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 4px !important;
}

    .survey-scale-labels span {
        font-size: 0.62rem !important; /* Letra pequeña y discreta */
        line-height: 1.15;
        color: #64748b;
        white-space: nowrap !important; /* Evita que "Muy" e "insatisfecho" se rompan en 2 líneas */
        text-align: center;
    }

        .survey-scale-labels span:first-child {
            text-align: left;
            transform: translateX(-4px); /* Ajuste fino hacia el borde exterior */
        }
        /* El texto de la derecha alineado a la derecha */
        .survey-scale-labels span:last-child {
            text-align: left;
            transform: translateX(-4px);
        }

/* Validador: centrado solo cuando ASP.NET decida mostrarlo */
span[id$="RequiredFieldValidator1"] {
    width: 100%;
    font-size: 0.75rem !important;
}

@media (min-width: 992px) {

    /* 1. ANCHO DEL BLOQUE COMPLETO EN PC */
    .survey-icon-box {
        width: 70px !important;
        height: 70px !important;
    }

    /* 2. Ícono SVG del sobre */
    .survey-icon-svg {
        width: 46px !important;
        height: 46px !important;
    }

    /* 3. Círculo negro con el número "1" */
    .survey-badge-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
    }

    /* 4. Texto de la pregunta */
    .survey-question-text {
        font-size: 1.2rem !important; /* Puedes probar con 1rem, 1.05rem o 1.1rem */
        line-height: 1.4 !important;
    }
    /* Súbelo a 320px, 340px o 360px si quieres más separación horizontal entre caritas */
    .survey-faces-wrapper {
        width: 460px !important;
    }

    /* 2. TAMAÑO DE LAS CARITAS (CÍRCULO Y EMOJI) */
    .survey-rating-faces label::before {
        width: 58px !important; /* Diámetro del contenedor (puedes probar 44px, 48px o 52px) */
        height: 58px !important;
        background-size: 48px 48px !important; /* Tamaño del dibujo/emoji animado */
        margin-bottom: 5px !important; /* Separación entre la carita y el número */
    }

    /* 3. TAMAÑO DEL NÚMERO (1 al 5) */
    .survey-rating-faces label {
        font-size: 0.88rem !important; /* Tamaño de fuente del número en PC */
    }

    /* 4. TAMAÑO DE LAS LEYENDAS INFERIORES */
    .survey-scale-labels span {
        font-size: 0.70rem !important; /* "Muy insatisfecho" / "Muy satisfecho" */
    }
}

.btn-survey-primary {
    background-color: #0044bb !important;
    border: none !important;
    color: #ffffff !important;
    white-space: nowrap !important;    
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(0, 68, 187, 0.2) !important;
    transition: all 0.25s ease-in-out !important;
    cursor: pointer;
}

    /* Efecto Hover: se ilumina, sube 2px y aumenta la sombra */
    /*.btn-survey-primary:hover {
        background-color: #003699 !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 68, 187, 0.35) !important;
    }*/

    /* Efecto Click / Presionado */
    /*.btn-survey-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 68, 187, 0.2) !important;
    }*/

.vwfs-neon-banner {
    background: linear-gradient(90deg, #011638 0%, #001e47 50%, #001433 100%);
    border: 1px solid rgba(28, 126, 214, 0.3);
    min-height: 90px;
}

/* Color azul suave para el texto secundario */
.text-light-blue {
    color: #b0c9e8;
}

/* Efecto cursiva y brillo en "la llave" */
.neon-script-text {
    font-family: 'Dancing Script', cursive;
    color: #ffffff;
    /* 1.25em hace que sea proporcional al renglón donde se encuentre */
    font-size: 1.25em !important;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    margin: 0 3px;
    /* Efecto de resplandor neón adaptado a escala */
    text-shadow: 0 0 4px #00d2ff, 0 0 8px #00d2ff, 0 0 16px #0055ff, 0 0 24px #0055ff;
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* =========================================================
   VWFS - BANNER COMPLETO
   ========================================================= */


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.vwfs-container {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #06445c;
}


/* =========================================================
   HERO
   ========================================================= */

.vwfs-hero {
    position: relative;
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.vwfs-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.vwfs-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   HEADER
   ========================================================= */

.vwfs-topbar {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 76px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 0 42px;
    background: transparent;
}


/* =========================================================
   LOGO
   ========================================================= */

.vwfs-logo {
    flex-shrink: 0;
    color: #ffffff;
    text-align: center;
    user-select: none;
}


.vwfs-logo-title {
    font-size: 16px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffffff;
}


.vwfs-logo-subtitle {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #ffffff;
}


/* =========================================================
   IDIOMAS
   ========================================================= */

.vwfs-languages {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    white-space: nowrap;
}


.vwfs-language-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}


    .vwfs-language-label svg {
        flex-shrink: 0;
        opacity: 0.85;
    }


.vwfs-language-selector {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


.vwfs-language-option {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}


    .vwfs-language-option:hover {
        color: #0f172a;
        text-decoration: none;
    }


    .vwfs-language-option.active {
        color: #111827;
        font-weight: 700;
    }


    .vwfs-language-option img {
        display: block;
        width: 16px;
        height: auto;
        flex-shrink: 0;
    }


.vwfs-language-separator {
    color: #cbd5e1;
    user-select: none;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.vwfs-content {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    box-sizing: border-box;
    padding-left: clamp(35px, 3vw, 50px);
    padding-top: clamp(80px, 7vw, 105px);
    color: #ffffff;
    pointer-events: none;
}


    /*
   Permitimos interacción únicamente
   donde realmente pueda existir algún
   elemento interactivo en el contenido.
*/
    .vwfs-content a,
    .vwfs-content button,
    .vwfs-content input,
    .vwfs-content select {
        pointer-events: auto;
    }


/* =========================================================
   TITULO
   ========================================================= */

.vwfs-title {
    margin: 0;
    padding: 0;
    font-size: clamp(12px, 5vw, 74px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #ffffff;
}


.vwfs-title-blue {
    color: #19d8f4;
}


.vwfs-title-line {
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 18px;
    background: #19d8f4;
    border-radius: 3px;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.vwfs-description {
    margin: 18px 0 0 0;
    padding: 0;
    max-width: 650px;
    font-size: clamp(16px, 2vw, 48px);
    line-height: 1.45;
    font-weight: 400;
    color: #ffffff;
}


    .vwfs-description strong {
        font-weight: 700;
        color: #ffffff;
    }


/* =========================================================
   ESCALA
   ========================================================= */

.vwfs-scale {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    max-width: 700px;
}


.vwfs-scale-icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #19d8f4;
    border-radius: 50%;
}

.scale-icon-svg {
    width: 29px;
    height: 29px;
    fill: #19d8f4;
}


.vwfs-scale-text {
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.4;
}


    .vwfs-scale-text strong {
        color: #ffffff;
        font-weight: 700;
    }

.survey-icon-box {
    width: 52px;
    height: 52px;
    min-width: 52px; /* Evita compresión en flexbox */
}

.survey-icon-svg {
    width: 28px;
    height: 28px;
}
.survey-icon-box {
    width: 52px;
    height: 52px;
    min-width: 52px; /* Evita compresión en flexbox */
}
.client-input-group {
    width: 100%;
}

.survey-title {
    color: #fff;
    /* En móviles inicia en ~14px y escala de forma controlada hasta ~32px en desktop */
    font-size: clamp(0.9rem, 3.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15; /* Evita que las letras con tildes o descendentes se encimen */
    margin: 0;
    margin-top: 30px;
    word-break: break-word;
}

.survey-subtitle {
    color: #00e5ff;
    /* Inicia legible en móvil (~11px) y escala hasta ~18px */
    font-size: clamp(0.7rem, 2.5vw, 3rem);
    font-weight: 700;
    line-height: 1.25;
    margin-top: clamp(4px, 0.8vw, 8px);
}

/* =========================================================
   TABLETS / MONITORES MEDIANOS
   ========================================================= */

@media (max-width: 1100px) {

    .vwfs-topbar {
        height: 68px;
        padding-left: 30px;
        padding-right: 22px;
    }


    .vwfs-logo-title {
        font-size: 12px;
    }


    .vwfs-logo-subtitle {
        font-size: 9px;
        letter-spacing: 2px;
    }


    .vwfs-content {
        width: 55%;
        padding-left: 30px;
        padding-top: 98px;
    }


    .vwfs-title {
        font-size: clamp(32px, 6vw, 78px);
        margin-top: 30px;
    }


    .vwfs-description {
        max-width: 330px;
        font-size: 14px;
    }


    .vwfs-scale {
        margin-top: 48px;
        max-width: 450px;
    }


    .vwfs-scale-icon {
        width: 46px;
        height: 46px;
    }


    .scale-icon-svg {
        width: 23px;
        height: 23px;
    }


    .vwfs-scale-text {
        font-size: 18px;
    }
    .survey-title {
        font-size: 36px;
        line-height: 1.2;
        margin-top: 50px;
    }

    .survey-subtitle {
        font-size: 28px;
        line-height: 1.25;
        margin-top: 3px;
    }
}


/* =========================================================
   TABLETS PEQUEÑAS
   ========================================================= */

@media (max-width: 768px) {

    .vwfs-topbar {
        height: 62px;
        padding-left: 20px;
        padding-right: 16px;
    }


    .vwfs-logo-title {
        font-size: 10px;
        letter-spacing: 0.2px;
    }


    .vwfs-logo-subtitle {
        margin-top: 3px;
        font-size: 6px;
        letter-spacing: 1.5px;
    }


    .vwfs-language-label span {
        display: none;
    }


    .vwfs-language-selector {
        padding: 5px 7px;
    }


    .vwfs-language-option {
        font-size: 11px;
        padding: 2px 3px;
    }


        .vwfs-language-option img {
            width: 14px;
        }


    .vwfs-content {
        width: 60%;
        padding-left: clamp(15px, 2.5vw, 25px);
        padding-top: clamp(60px, 6vw, 82px);
    }

    .vwfs-title {
        font-size: clamp(27px, 5vw, 38px);
        letter-spacing: -1px;
    }

    .vwfs-description {
        margin-top: clamp(8px, 1vw, 10px);
        max-width: 250px;
        font-size: clamp(10px, 1.6vw, 12px);
        line-height: 1.35;
    }

    .vwfs-scale {
        gap: clamp(6px, 1vw, 8px);
        margin-top: clamp(10px, 1.5vw, 15px);
        max-width: 280px;
    }

    .vwfs-scale-icon {
        width: clamp(34px, 4vw, 40px);
        height: clamp(34px, 4vw, 40px);
    }

    .scale-icon-svg {
        width: clamp(17px, 2vw, 20px);
        height: clamp(17px, 2vw, 20px);
    }

    .vwfs-scale-text {
        font-size: clamp(8px, 2vw, 14px);
        line-height: 1.3;
    }
    .client-input-group {
        width: 210px; /* Tamaño controlado y parejo en escritorio */
    }
    .client-id-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .survey-title {
        font-size: 30px;
        line-height: 1.2;
        margin-top: 0px;
    }

    .survey-subtitle {
        font-size: 24px;
        line-height: 1.25;
        margin-top: 3px;
    }
}


/* =========================================================
   MÓVILES
   ========================================================= */

@media (max-width: 600px) {

    .vwfs-topbar {
        height: 58px;
        padding-left: 12px;
        padding-right: 10px;
    }


    .vwfs-title {
        font-size: clamp(25px, 7vw, 32px);
        line-height: 0.98;
        letter-spacing: -0.8px;
    }


    .vwfs-logo-subtitle {
        font-size: 5px;
        letter-spacing: 1.2px;
    }


    .vwfs-language-label {
        display: none;
    }


    .vwfs-language-selector {
        padding: 4px 5px;
        border-radius: 7px;
    }


    .vwfs-language-option {
        font-size: 10px;
        gap: 3px;
        padding: 2px;
    }


        .vwfs-language-option img {
            width: 13px;
        }


    .vwfs-language-separator {
        margin: 0 1px;
    }


    .vwfs-content {
        width: 63%;
        padding-left: clamp(10px, 2.5vw, 15px);
        padding-top: clamp(50px, 7vw, 75px);
    }

    .vwfs-title {
        font-size: clamp(21px, 7vw, 32px);
        line-height: 0.98;
        letter-spacing: -0.8px;
    }

    .vwfs-description {
        margin-top: 10px;
        max-width: 230px;
        font-size: 11px;
        line-height: 1.35;
    }

    .vwfs-scale {
        gap: 9px;
        margin-top: 0px;
        max-width: 280px;
    }

    .vwfs-scale-icon {
        width: clamp(30px, 5.5vw, 34px);
        height: clamp(30px, 5.5vw, 34px);
    }

    .scale-icon-svg {
        width: clamp(15px, 3vw, 17px);
        height: clamp(15px, 3vw, 17px);
    }

    .vwfs-scale-text {
        font-size: 12px;
        line-height: 1.3;
    }
    .vwfs-logo-title {
        font-size: 8px;
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: 0.4px;
        color: #ffffff;
    }
    .vwfs-languages {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* Ocultar el icono del planeta en móvil para ahorrar espacio */
    .vwfs-language-label {
        display: none !important;
    }

    /* Caja blanca del selector */
    .vwfs-language-selector {
        padding: 2px 6px !important;
        border-radius: 6px !important;
        gap: 2px;
    }

    /* Texto 'ESP' / 'ENG' */
    .vwfs-language-option {
        font-size: 8.5px !important;
        font-weight: 600;
        gap: 3px !important;
        padding: 1px 3px !important;
    }

        /* Bandera */
        .vwfs-language-option img {
            width: 11px !important;
            height: auto;
        }

    /* Separador '|' */
    .vwfs-language-separator {
        font-size: 8px;
        margin: 0 1px !important;
        opacity: 0.6;
    }
    .btn-survey-primary {
        width: 100% !important; /* Ocupa el ancho completo disponible */
        max-width: 180px; /* Evita que se vea exageradamente ancho si no lo deseas */
        font-size: 13px !important;
        padding: 8px 16px !important;
        margin: 0 auto;
    }

        .btn-survey-primary svg {
            width: 13px !important;
            height: 13px !important;
        }
    .survey-icon-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .survey-icon-svg {
        width: 26px !important;
        height: 26px !important;
    }
    .survey-scale-target {
        width: 140px; /* En móvil estrecho se compacta junto con las caritas */
        max-width: 140px;
    }

    .survey-title {
        font-size: 18px;
        line-height: 1.2;
        margin-top: 0px;
    }

    .survey-subtitle {
        font-size: 14px;
        line-height: 1.25;
        margin-top: 3px;
    }
}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {

    .vwfs-hero {
        height: 230px;
    }

    .vwfs-content {
        width: 67%;
        padding-left: 12px;
        padding-top: 55px;
    }

    .vwfs-title {
        font-size: 26px;
    }

    .vwfs-description {
        max-width: 200px;
        font-size: 10px;
        line-height: 1.3;
    }

    .vwfs-scale {
        max-width: 210px;
        margin-top: -3px;
    }

    .vwfs-scale-text {
        font-size: 10px;
    }
    .vwfs-logo-title {
        font-size: 8px;
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: 0.4px;
        color: #ffffff;
    }
    .vwfs-language-selector {
        padding: 2px 4px !important;
    }

    .vwfs-language-option {
        font-size: 7.5px !important;
    }

        .vwfs-language-option img {
            width: 10px !important;
        }
    .survey-icon-box {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .survey-icon-svg {
        width: 20px !important;
        height: 20px !important;
    }
    .survey-title {
        font-size: 16px;
        margin-top: 0px;
    }

    .survey-subtitle {
        font-size: 12px;
    }
}



/* =========================================================
   AJUSTE FINAL VWFS
   ========================================================= */

.vwfs-container {
    margin: 0 !important;
    padding: 0 !important;
}

.vwfs-hero {
    height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vwfs-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vwfs-hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
}
.survey-validator {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.68rem, 2.2vw, 0.85rem) !important;
    line-height: 1.25;
    word-break: break-word;
}
    

    /* Control estricto de tipografía para que herede a la etiqueta interna i18n */
    .survey-validator,
    .survey-validator * {
        font-size: clamp(0.65rem, 2.2vw, 0.75rem) !important;
        line-height: 1.25 !important;
    }
/* TABLET */
@media (max-width: 768px) {

    .vwfs-hero {
        height: 300px !important;
    }
    .survey-faces-wrapper {
        width: 175px;
    }
}


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

    .vwfs-hero {
        height: 250px !important;
    }
    .survey-validator,
    .survey-validator * {
        font-size: 10.5px !important;
        margin-top: 3px !important;
    }

}


/* MÓVIL PEQUEÑO */
@media (max-width: 400px) {

    .vwfs-hero {
        height: 230px !important;
    }
}

.o-root {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
    .o-root > .vwfs-container {
        margin: 0 !important;
        padding: 0 !important;
    }

@media (max-width: 567.9px) {

    /* El texto de la pregunta ocupa todo el ancho y no se amontona */
    .survey-question-text {
        font-size: 13.5px;
        line-height: 1.3;
    }

    /* El bloque de caritas queda centrado y cómodo al tacto */
    .survey-faces-wrapper {
        width: 100%;
        max-width: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 4px;
    }

    .survey-rating-faces {
        margin: 0 auto;
    }

        .survey-rating-faces td {
            padding: 0 4px !important; /* Espacio táctil suficiente entre caritas */
        }

    .survey-scale-labels {
        width: 100%;
        font-size: 10px !important;
    }
}
.no-break {
    white-space: nowrap;
}