:root {

    /* Tipografía */
    --font-bold: 'Montserrat-bold';
    --font-regular: 'Montserrat-regular';
    --font-title: 'Montserrat-bold';

    /* Colores */
    --color-primary: #000000;
    --color-secondary: #D30D2B;
    --color-border: #999999;
    --color-bg: #ffffff;
    --slider-active: #D30D2B;
    --slider-inactive: #999999;

    /* Layout */
    --container-width: 900px;
    --padding-card: 48px;

    /* Bordes */
    --radius-card: 32px;
    --radius-input: 14px;

    /* Tipografía */
    --title-size: 36px;
    --subtitle-size: 28px;
    --label-size: 20px;
    --body-size: 13px;
    --result-size: 36px;

    /* Inputs */
    --input-height: 72px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px;
    display: flex;
    justify-content: center;
    background: #f7f8fb;
    font-family: var(--font-regular);
    font-size: var(--body-size);
}

.calc-fin {
    width: min(100%, var(--container-width));
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--padding-card);
}

h1 {
    color: var(--color-primary);
    margin: 0 0 40px;
    font-size: var(--title-size);
    line-height: 42px;
    font-family: var(--font-title);
    text-transform: uppercase;
}

h2 {
    color: var(--color-primary);
    margin: 0 0 30px;
    font-size: var(--subtitle-size);
    line-height: 34px;
    font-family: var(--font-title);
}

.campo {
    margin-bottom: 40px;
}

.campo label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: var(--label-size);
    color: var(--color-primary);
    font-family: var(--font-bold);
}

input[type="text"] {
    font-family: var(--font-regular);
    width: 100%;
    height: var(--input-height);
    padding: 0 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 24px;
    color: var(--color-primary);
}

/* ==RANGE== */

input[type="range"] {
    width: 100%;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: var(--slider-inactive);
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--color-primary);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--color-primary);
    cursor: pointer;
}

/* ==ESCALA== */

.slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: var(--body-size);
    color: var(--color-primary);
    font-family: var(--font-regular);
}

.valor-destacado {
    margin-top: 20px;
    font-size: 28px;
    color: var(--color-primary);
    font-family: var(--font-bold);
}

/* ==RESULTADO== */

.resultados {
    margin-top: 60px;
}

.resultado {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 22px;
    border-bottom: 1px solid var(--color-border);
}

.resultados-lista .resultado:last-child {
    /*border-bottom: none;*/
}

.resultado span {
    font-size: 18px;
    color: var(--color-primary);
    font-family: var(--font-bold);
}

.resultado strong {
    font-size: var(--result-size);
    font-weight: 700;
    color: var(--color-secondary);
}

.legal {
    margin-top: 30px;
    font-size: var(--body-size);
    line-height: 20px;
    color: var(--color-border);
}

/* ==MOBILE== */

@media (max-width: 768px) {
    :root {
        --padding-card: 24px;
        --title-size: 32px;
        --subtitle-size: 24px;
        --label-size: 16px;
        --result-size: 28px;
        --input-height: 60px;
    }

    body {
        padding: 12px;
    }

    .slider-scale {
        font-size: 12px;
    }
}

/* Boton Cotizador */
.btn-cotizar {
    margin: 30px auto;
    background: var(--color-secondary);
    border: none;
    padding: 20px 30px;
    text-transform: uppercase;
    display: none;
}

.btn-cotizar a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: var(--subtitle-size);
    font-family: var(--font-title);
}