@font-face {
    font-family: 'Termina';
    src: url('/fonts/termina.woff2') format('woff2');
    font-weight: 400;
    /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Termina';
    src: url('/fonts/termina-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

body {
    font-family: 'Termina', sans-serif;
    font-weight: 400;

}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Contenedor principal ocupa toda la pantalla y se organiza en columna */
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header ocupa solo lo necesario */
.container-header {
    background-color: #000000;
    height: 95px;
    border-bottom: 5px solid #e20000;
}


.banner-img {
    width: 150px;
    height: auto;
    aspect-ratio: auto;
    display: block;
}

.banner-title {
    color: white;
    font-weight: 400;
    font-size: 18px;
}



/* Body ocupa el resto del espacio disponible y puede crecer */
.container-body {
    flex: 1;
    overflow: auto;
    background-color: #ffffff;
}

.container-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    /* opcional, para evitar que el contenido toque los bordes */
    width: 100%;
}

.banner {
    display: flex;
    align-items: center;
    /* 🔁 Esto centra verticalmente los hijos */
    justify-content: space-between;
    /* uno a la izq, otro a la der */
    height: 100%;
}

.form-container {
    max-width: 890px;
    margin: 0 auto;
    padding-top: 20px;
    /* opcional, para evitar que el contenido toque los bordes */
    width: 100%;
}

form {
    position: relative;
    min-height: 220px;
    overflow: hidden;
}

.form-in {
    position: relative;
}

form {
    position: relative;
    transition: height 0.4s ease-in-out;
}



.navigation-buttons {
    margin-top: 54px;
    margin-bottom: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-button {
    background-color: #000;
    /* fondo negro */
    color: #fff;
    /* texto blanco */
    border: none;
    /* sin borde por defecto */
    padding: 6px 10px 6px 13px;
    /* espacio interno cómodo */
    border-radius: 12px;
    /* bordes redondeados */
    font-size: 1rem;
    /* tamaño de texto legible */
    cursor: pointer;
    /* cambia el cursor al pasar encima */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    gap: 7px;
    width: 120px;
    font-family: 'Termina';
    font-size: 11px;
    font-weight: 600;
}

.submit-button {
    background-color: #000;
    /* fondo negro */
    color: #fff;
    /* texto blanco */
    border: none;
    /* sin borde por defecto */
    padding: 6px 10px 6px 10px;
    /* espacio interno cómodo */
    border-radius: 12px;
    /* bordes redondeados */
    font-size: 1rem;
    /* tamaño de texto legible */
    cursor: pointer;
    /* cambia el cursor al pasar encima */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    gap: 7px;
    width: 115px;
    font-family: 'Termina';
    font-size: 12px;
    font-weight: 600;
    height: 42.46px;
    background-color: red;
    justify-content: center;
    align-items: center;
}

.text-button {
    padding-top: 5px;
    display: flex;
}

/* Efecto al pasar el mouse */
.custom-button:hover {
    background-color: #222;
    /* un negro más claro al hacer hover */
}

/* Efecto al presionar */
.custom-button:active {
    transform: scale(0.98);
    /* efecto de “presionar” */
}

/* Accesibilidad al enfocar con teclado */
.custom-button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.steps-title {
    margin: 20px auto;
    width: fit-content;
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
}

.steps-subtitle {
    margin: 20px auto;
    width: fit-content;
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    margin-top: 45px;
}

.steps-descrption {
    margin: 20px auto;
    width: fit-content;
    display: block;
    text-align: center;
    font-weight: 400;
    /* font-size: 20px; */
    margin-top: 45px;
    margin-bottom: 50px;
}

.label-form {
    display: flex;
    flex-direction: column;
}

.label-form span {
    padding: 4px 10px;
}

.grid-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.custom-input {
    width: 100%;
    background-color: #e8e8e8;
    border: 1px solid #e8e8e8;
    /* mismo color para ocultar el borde */
    border-radius: 8px;
    /* bordes redondeados */
    padding: 8px 41px;
    outline: none;
    /* quita el borde azul al hacer clic */
    transition: border 0.2s ease;
    font-size: 17px;
    font-weight: 400 !important;
    font-family: 'Termina';
}

.input-peso {
    padding: 8px 58px;
}

/* Al enfocar el input */
.custom-input:focus {
    border: 1px solid #789aff;
    /* borde visible solo al hacer clic */
}

/* Autocompletado en Webkit (Chrome, Safari) */
input.custom-input:-webkit-autofill {
    background-color: #d9e6f7 !important;
    -webkit-box-shadow: 0 0 0 1000px #d9e6f7 inset;
    -webkit-text-fill-color: #000 !important;
}

/* Autocompletado para otros navegadores si es necesario */
input.custom-input:-internal-autofill-selected {
    background-color: #d9e6f7 !important;
}

.empty-input {
    display: none;
}

.container-precio {
    position: relative;
}

.signo-peso {
    position: absolute;
    width: 27px;
    height: 27px;
    left: 21px;
    top: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    color: #8e8e8e;
    background-color: #b2b2b2;
    font-size: 22px;
}

/* estilos switchK */

/* Escondemos el input, pero sigue siendo accesible */
.switch input {
    display: none;
}

.switch-label {
    width: 96px;
    height: 42px;
    background-color: black;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.ball {
    width: 42px;
    height: 42px;
    background-color: #dd0010;
    color: white;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
    user-select: none;
}

/* Cuando el input está chequeado, movemos la bola */
.switch input:checked+.switch-label .ball {
    left: 54px;

}

/* Cambiamos el texto con content dinámico usando atributo data */
.ball::after {
    content: attr(data-text);
}

/* El contenido animado */

.contenido-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
    width: 100%;
}

.contenido-wrapper.active {
    grid-template-rows: 1fr;
}

.contenido-financiamiento {
    overflow: hidden;
}

/* range input */

.slider-container {
    width: 100%;
    padding: 0 3px;
}

.value {
    margin-top: 10px;
    font-size: 18px;
}

.title-label {
    display: flex;
}

.is-required {
    color: red;
    font-size: 10px;
    align-content: center;
    padding-left: 0;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #ccc;
    border-radius: 3px;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
    margin-top: 0px;
    /* para centrar el thumb verticalmente */
}

input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
}

/* slector */

.custom-select {
    background-color: #e8e8e8;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 41px;
    outline: none;
    font-size: 17px;
    transition: border 0.3s;
    font-weight: 400 !important;
    font-family: 'Termina';
}

.custom-select:focus {
    border: 1px solid #789aff;
}

/* checkbox */

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: right;
    padding-right: 3px;
}

/* Escondemos el checkbox real */
.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

/* Caja personalizada */
.custom-checkbox {
    width: 30px;
    height: 30px;
    border: 2px solid #555;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

/* Estilo cuando está seleccionado */
.checkbox-wrapper input[type="checkbox"]:checked+.custom-checkbox::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #0052ff;
}

/* Animación al pasar el mouse */
.custom-checkbox:hover {
    border-color: #000;
}



/* estilos loader */

.loader-wrapper {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    animation: fadeInBg 0.8s ease-out forwards;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

@keyframes fadeInBg {
    to {
        background: rgba(0, 0, 0, 0.7);
    }
}

.loader-content {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dots,
.logo {
    position: absolute;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

/* ⬅️ Invierto el orden: ahora los puntos aparecen después */
.dots {
    display: flex;
    gap: 10px;
    opacity: 0;
    animation: fadeDots 3s infinite;
}

@keyframes fadeDots {

    0%,
    60% {
        opacity: 0;
    }

    70%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.dot {
    width: 12px;
    height: 12px;
    background: #f7e319;
    border-radius: 50%;
    animation: bounce 0.6s infinite ease-in-out;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* 👇 Logo ahora aparece al comienzo y desaparece antes de los puntos */
.logo {
    opacity: 0;
    transform: scale(0.8);
    animation: showLogo 3s infinite;
}

@keyframes showLogo {

    0%,
    10% {
        opacity: 0;
        transform: scale(0.8);
    }

    20% {
        opacity: 1;
        transform: scale(1.2);
    }

    30% {
        transform: scale(1);
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
    }
}

.svg {
    /* width: 60px;
    height: auto; */
    width: 60px;
    height: 60px;
    /* -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite; */
    background-image: url("data:image/svg+xml,%3Csvg width='130' height='130' viewBox='0 0 130 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_687_213)'%3E%3Cpath d='M38.8751 10.0534C53.6387 10.0534 63.0572 10.0534 77.7839 10.0534C89.7424 10.0534 98.2684 15.5181 103.965 25.7045C109.439 35.4955 115.16 45.1426 121.004 54.7297C124.806 60.9734 125.064 67.0613 121.349 73.3289C113.278 86.9427 105.146 100.521 97.2226 114.206C94.4914 118.916 90.6159 120.917 85.2149 120.893C74.1586 120.829 63.1065 120.857 52.0585 120.977C49.7906 121.118 47.5305 120.604 45.561 119.5C43.5914 118.396 42 116.75 40.9858 114.77C37.91 109.377 34.7604 104.024 31.537 98.711C29.261 94.972 30.11 93.2822 34.6867 93.3062C46.7559 93.3901 58.8373 93.2223 70.9066 93.486C75.3725 93.5818 78.0546 92.0838 80.1338 88.213C83.8247 81.3582 87.9338 74.6951 92.0922 68.0679C92.8649 67.0406 93.2815 65.8002 93.2815 64.5267C93.2815 63.2531 92.8649 62.0127 92.0922 60.9854C88.4014 55.2451 84.8581 49.4089 81.7947 43.3569C79.5063 38.827 76.4552 37.1253 71.2388 37.1852C55.0412 37.4249 59.9651 37.0414 38.4841 37.3889C30.3026 37.5207 25.4318 34.2847 21.26 27.61C17.0881 20.9353 18.6203 23.5651 15.7011 18.6916C14.4611 16.6214 12.2984 13.3119 13.546 11.4196C14.7936 9.52735 18.0489 10.0774 20.3988 10.0654C35.4084 10.0055 23.927 10.0415 38.8751 10.0534Z' fill='%230073DF'/%3E%3Cpath d='M44.8391 78.1177C38.9214 78.1177 33.0036 78.1177 27.0982 78.1177C25.0432 78.1905 23.0073 77.71 21.2145 76.729C19.4216 75.748 17.9412 74.3045 16.9359 72.5572C13.5526 67.1404 10.4892 61.5319 7.16741 56.0792C5.16202 52.7596 5.5311 50.8542 9.92326 50.8422C22.3616 50.8422 34.7998 50.7224 47.2505 50.7343C48.8975 50.6595 50.5349 51.0172 51.9914 51.7698C53.448 52.5224 54.6702 53.6424 55.5303 55.0126C59.3443 61.1005 63.0106 67.2842 66.6769 73.468C68.547 76.6078 67.7718 78.2616 63.8102 78.2616C57.4865 78.2616 51.1628 78.2616 44.8391 78.2616L44.8391 78.1177Z' fill='%23009DDF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_687_213'%3E%3Crect width='111' height='118' transform='matrix(-4.37114e-08 1 1 4.37114e-08 6 10)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.overlay {
    display: none;
}

.overlay.active {
    display: block;
}


@media screen and (min-width: 640px) {
    .banner-img {
        width: 325px;
    }

    .banner-title {
        font-size: 24px;
    }

    .steps-title {
        font-size: 24px;
    }

    .grid-form {
        grid-template-columns: 1fr 1fr;
    }

    .empty-input {
        display: block;
    }
}