.footer::before { content: unset; }
main section { padding-bottom: var(--size-60); }

:root {
    /* Colores */
    --clr-white: 255, 255, 255; /* #F4F4F4 */

    --clr-gray-100: 244, 244, 244; /* #F4F4F4 */
    --clr-gray-200: 220, 220, 220; /* #DCDCDC */
    --clr-gray-300: 199, 199, 199; /* #C7C7C7 */
    --clr-gray-500: 112, 112, 112; /* #707070 */
    --clr-gray-900: 28, 28, 28;    /* #1C1C1C */

    --clr-blue: 104, 186, 238;     /* #68BAEE */
    --clr-green: 147, 240, 0;     /* #7CF030 */

    /* Interlineado */
    --lh-display: 1;       /* títulos display / hero */
    --lh-large: 1.1;       /* texto grande */
    --lh-medium: 1.25;     /* texto de tamaño medio */
    --lh-ui: 1.4;           /* interfaz / navegación / botones */
    --lh-body: 1.6;         /* párrafos y texto general */
    --lh-reading: 1.75;     /* lectura larga / artículos */

    /* Tamaños */
    --size-2: 2px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-10: 10px;
    --size-12: 12px;
    --size-14: 14px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-22: 22px;
    --size-24: 24px;
    --size-26: 26px;
    --size-28: 28px;
    --size-30: 30px;
    --size-32: 32px;
    --size-34: 34px;
    --size-36: 36px;
    --size-38: 38px;
    --size-40: 40px;
    --size-44: 44px;
    --size-48: 48px;
    --size-52: 52px;
    --size-56: 56px;
    --size-60: 60px;
    --size-64: 64px;
    --size-72: 72px;
    --size-80: 80px;
    --size-82: 82px;
    --size-84: 84px;
    --size-86: 86px;
    --size-88: 88px;
    --size-90: 90px;
    --size-92: 92px;
    --size-94: 94px;
    --size-96: 96px;
    --size-98: 98px;
    --size-100: 100px;
}
main {
    background: rgb(var(--clr-white));
    color: rgb(var(--clr-gray-900));
}
main section :is(h1, h2, h3, h4, h5) {
    text-align: center;
    text-transform: uppercase;
}
main section { padding-top: var(--size-30); }
hr {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid rgb(var(--clr-gray-300));
}

main section article + *,
main section * + article,
.bannr__calcu + *,
* + .bannr__calcu { margin-top: var(--size-60); }

.box__gray {
    background: rgb(var(--clr-gray-100));
    border-radius: var(--size-16);
    padding: var(--size-16);
    border: 1px solid rgb(var(--clr-gray-200));
} 

.opt__type {
    display: flex;
    justify-content: center;
    gap: var(--size-20);
}
.opt__type label {
    width: calc((100% - var(--size-20))/2);
    text-align: center;
    cursor: pointer;
    border-width: var(--size-2);
    border-style: solid;
    border-color: transparent;
    margin: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.opt__type label.box__gray { border-radius: clamp(var(--size-16), 2vw, var(--size-32)); }
.opt__type input {
    border: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.opt__type label span + figure { margin-top: var(--size-20) }
.opt__type label span {
    font-size: clamp(var(--size-14), 2vw, var(--size-18));
    line-height: var(--lh-display);
}
.opt__type label figure {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: calc(calc(var(--size-100) * 2 ) + var(--size-52));
}
label:has(input[type="radio"]:checked) { border-color: rgb(var(--clr-blue)); }

* + .cont__range,
.cont__range + * { margin-top: var(--size-30); }
.cont__range {
    background: rgb(var(--clr-gray-900));
    border-radius: clamp(var(--size-16), 2vw, var(--size-20));
    padding: var(--size-20) var(--size-32) var(--size-24);
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 75px;
    z-index: 10;
}
.sliderKmDiario.ui-slider {
    border-radius: var(--size-20);
    background: rgba(var(--clr-white), .5);
    border: none;
    height: var(--size-8);
    margin: var(--size-32) 0 var(--size-32);
}              
.sliderKmDiario .ui-slider-handle {
    border-radius: 50%;
    height: var(--size-24);
    width: var(--size-24);
    top: -8px;
    margin-left: -11px;
    border: var(--size-2) solid rgb(var(--clr-green));
}
.sliderKmDiario .ui-state-default,
.sliderKmDiario .ui-widget-content .ui-state-default { background: rgb(var(--clr-green)); }
.sliderKmDiario.ui-slider-float .ui-slider-tip {
    opacity: 1 !important;
    visibility: visible !important;
    top: -30px !important;
    border: 0;
    background: transparent;
    color: rgb(var(--clr-white));
    font-weight: bold;
    white-space: nowrap;
    margin-left: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.sliderKmDiario.ui-slider-float .ui-slider-tip::before,
.sliderKmDiario.ui-slider-float .ui-slider-tip::after { content: unset !important; }
.sliderKmDiario .ui-slider-pip.ui-slider-pip-selected,
.sliderKmDiario.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label { color: rgb(var(--clr-green)) !important; }               
.sliderKmDiario .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
.sliderKmDiario .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    width: 50px;
    margin-left: -2em;
}
.sliderKmDiario.ui-slider-pips .ui-slider-line { opacity: .5; }
.sliderKmDiario .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
.sliderKmDiario .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
    font-weight: bold;
    top: var(--size-10);
}

.costo + .costo { margin-top: var(--size-30); }
.costo__01 {
    display: flex;
    flex-direction: column;
    gap: var(--size-12);
    text-align: center;
    font-size: var(--size-18);
}
.costo__01 > * { margin: 0; }
.costo__01 small {
    font-style: italic;
    opacity: .6;
    text-align: left;
}

.costo__col {
    display: flex;
    gap: clamp(var(--size-10), 2vw, var(--size-20));
}
.costo__col .box__gray {
    width: calc((100% - (clamp(var(--size-10), 2vw, var(--size-20))) * 2)/3);
    padding-top: clamp(var(--size-16), 2vw, var(--size-32));
    padding-bottom: clamp(var(--size-16), 2vw, var(--size-32));
    padding-left: clamp(var(--size-10), 2vw, var(--size-32));
    padding-right: clamp(var(--size-10), 2vw, var(--size-32));
    text-align: center;
}
.costo__col > * > * {
    margin: 0;
    line-height: var(--lh-medium);
}
.costo__col > * > *:nth-child(1) { font-size: clamp(var(--size-20), 4vw, var(--size-52)); }
.costo__col > * > *:nth-child(1) sup { font-size: 60%; }
.costo__col > * > *:nth-child(2) { font-size: clamp(var(--size-14), 2vw, var(--size-20)); }

* + .info__car { margin-top: var(--size-60); }
.info__car {
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.info__car > * {
    width: 100%;
    border-radius: clamp(var(--size-16), 2vw, var(--size-32));
    padding: clamp(var(--size-16), 2vw, var(--size-32));
    display: flex;
    flex-direction: column;
    text-align: center;
}
.car__01 {
    gap: var(--size-20);
    justify-content: center;
    align-items: center;
}
.car__img { max-width: calc(var(--size-100) * 4); }
.txt__auto {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-medium);
}
.txt__auto > *:nth-child(1) { font-size: clamp(var(--size-18), 2vw, var(--size-20)); }
.txt__auto > *:nth-child(2) { font-size: clamp(var(--size-32), 4vw, var(--size-52)); }
.txt__auto > *:nth-child(2) span { font-size: 60%; }
.car__02 {
    gap: var(--size-20);
    justify-content: space-evenly;
    align-items: center;
}
.car__02 > * {
    margin: 0;
    line-height: var(--lh-medium);
}
.txt__desc { font-size: clamp(var(--size-18), 2vw, var(--size-26)); }
.txt__num { font-size: clamp(var(--size-32), 4vw, var(--size-52)); }

.table__compare {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.table__compare::-webkit-scrollbar { height: 4px; }
.table__compare table {
    width: 100%;
    border-collapse: separate;
    border-spacing: var(--size-10);
    line-height: var(--lh-large);
}
.table__compare table :is(td, th) {
    font-size: clamp(var(--size-14), 1.5vw, var(--size-18));
    padding: clamp(var(--size-14), 1.7vw, var(--size-20));
    border-radius: var(--size-16);
    white-space: nowrap;
}
.table__compare table th {
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-gray-900));
}
.table__compare table td {
    background: rgb(var(--clr-gray-100));
    border: 1px solid rgb(var(--clr-gray-200));
}
.table__compare table td:last-child {
    background-color: rgb(var(--clr-green));
    border-color: rgb(var(--clr-green));
    font-weight: bold;
}

.table__compare th:first-child,
.table__compare td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}
* + .disclaimer { margin-top: var(--size-30); }
.disclaimer {
    font-size: var(--size-10);
    line-height: var(--lh-reading);
    text-align: center;
}

.cta, a.cta {
    color: rgb(var(--clr-white));
    border-radius: clamp(var(--size-14), 1.5vw, var(--size-18));
    font-size: clamp(var(--size-14), 1.5vw, var(--size-18));
    padding: clamp(var(--size-14), 1.7vw, var(--size-20));
}
.cta__01 { background: rgb(var(--clr-gray-900)); }



@media (min-width : 680px) {
main section { padding-top: var(--size-60); }
.info__car { flex-direction: row; }
.info__car > * { width: calc((100% - var(--size-20)) / 2); }

}
@media (min-width: 1320px) {
.cont__range { top: 120px; }

}