/* ======================================================================
   CLINI · RESPONSIVE GLOBAL
   Capa compartida para layout general, Inicio y Resultado.
   Los estilos específicos de Cotizar viven en cotizar.css.
   ====================================================================== */

:root {
    --responsive-gutter: clamp(14px, 3vw, 32px);
    --touch-target: 44px;
}

/* =========================================================
   BASE RESPONSIVE GLOBAL
   ========================================================= */

html {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body,
main {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    max-width: 100%;
}

    button,
    a[role="button"],
    input[type="button"],
    input[type="submit"] {
        min-height: var(--touch-target);
    }

input,
textarea,
select {
    font-size: 16px;
}

/* =========================================================
   INICIO
   ========================================================= */

.landing {
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(clamp(24px, 5vh, 64px), env(safe-area-inset-top)) max(var(--responsive-gutter), env(safe-area-inset-right)) max(clamp(24px, 5vh, 64px), env(safe-area-inset-bottom)) max(var(--responsive-gutter), env(safe-area-inset-left));
}

.landing-card {
    width: min(1040px, 100%);
    min-width: 0;
}

.landing h1,
.landing-lead,
.landing-step strong,
.landing-step small {
    overflow-wrap: anywhere;
}

.landing-logo {
    max-width: min(205px, 52vw);
}

/* =========================================================
   RESULTADO
   ========================================================= */

.result-page {
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(clamp(20px, 4vw, 48px), env(safe-area-inset-top)) max(var(--responsive-gutter), env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(var(--responsive-gutter), env(safe-area-inset-left));
}

.result-container,
.result-hero,
.result-copy,
.summary-panel,
.result-meta,
.result-meta-card,
.value-list,
.value-list__row,
.result-actions,
.details-dialog,
.exam-row {
    min-width: 0;
}

.result-hero--clean {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
    align-items: center;
}

.result-copy h1,
.result-copy > p,
.result-meta-card strong,
.result-meta-card small,
.value-list__row span,
.benefit-classification p,
.result-legal--inline p {
    overflow-wrap: anywhere;
}

.summary-panel--clean {
    width: 100%;
    max-width: 100%;
}

.summary-final-clean > strong,
.value-list__row strong {
    white-space: nowrap;
}

.result-meta--inline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-actions--clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.details-dialog {
    width: min(1120px, calc(100vw - 28px));
    max-height: min(90dvh, 900px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.exam-row {
    grid-template-columns: auto minmax(180px, 1.15fr) minmax(220px, 1fr) auto auto;
}

/* =========================================================
   NOTEBOOK / TABLET HORIZONTAL / ZOOM ALTO
   ========================================================= */

@media (max-width: 1180px) {
    .result-hero--clean {
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vw, 52px);
    }

    .result-copy--clean,
    .summary-panel--clean {
        width: min(900px, 100%);
        margin-inline: auto;
    }

    .summary-panel--clean {
        justify-self: stretch;
    }
}

/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 860px) {
    .landing-card {
        padding-inline: 0;
    }

    .landing-steps--minimal {
        max-width: 560px;
    }

    .result-meta--inline,
    .result-meta--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .result-meta-card--caja:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .exam-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
    }

    .exam-prep {
        grid-column: 2 / -1;
    }

    .exam-price {
        grid-column: 2;
    }

    .exam-remove-form {
        grid-column: 3;
        grid-row: 1;
    }
}

/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 620px) {
    :root {
        --responsive-gutter: 14px;
    }

    /* Inicio */

    .landing {
        place-items: start center;
        padding-top: max(24px, env(safe-area-inset-top));
    }

        .landing h1 {
            font-size: clamp(38px, 12vw, 52px);
            line-height: .98;
        }

    .landing-lead {
        font-size: 14px;
    }

    .landing-action {
        width: 100%;
        max-width: 360px;
    }

    .landing-steps--minimal {
        width: 100%;
        max-width: 420px;
    }

    /* Resultado */

    .result-page {
        padding-inline: 12px;
    }

    .result-copy h1 {
        font-size: clamp(40px, 12vw, 56px);
        line-height: .98;
    }

    .result-meta--inline,
    .result-meta--three {
        grid-template-columns: 1fr;
    }

    .result-meta-card--caja:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .summary-panel--clean {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .summary-heading--clean strong {
        font-size: clamp(20px, 6vw, 24px);
    }

    .summary-final-clean {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

        .summary-final-clean > strong {
            font-size: clamp(44px, 14vw, 62px);
            white-space: normal;
        }

    .saving-highlight--clean {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .value-list__row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

        .value-list__row strong {
            font-size: 18px;
            white-space: normal;
        }

    .benefit-classification {
        padding: 14px;
    }

    .result-actions--clean {
        grid-template-columns: 1fr;
    }

        .result-actions--clean .result-button {
            width: 100%;
        }

    .result-legal--inline {
        margin-top: 24px;
    }

    .details-dialog {
        width: calc(100vw - 20px);
        padding: 18px 14px;
        border-radius: 20px;
    }

    .details-dialog__header {
        align-items: flex-start;
    }

    .exam-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 14px;
    }

    .exam-prep,
    .exam-price {
        grid-column: 1 / -1;
    }

    .exam-remove-form {
        grid-column: 3;
        grid-row: 1;
    }
}

/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 380px) {
    .landing-kicker {
        font-size: 8px;
        letter-spacing: .08em;
    }

    .summary-panel--clean {
        padding-inline: 14px;
    }

    .summary-final-clean > strong {
        font-size: 42px;
    }

    .saving-highlight--clean > b {
        width: 50px;
        height: 50px;
    }
}

/* =========================================================
   PANTALLAS BAJAS / NOTEBOOK CON POCA ALTURA
   ========================================================= */

@media (min-width: 861px) and (max-height: 760px) {
    .landing {
        padding-block: 24px;
    }

        .landing h1 {
            margin-top: 22px;
        }

    .landing-action {
        margin-top: 24px;
    }

    .landing-steps--minimal {
        margin-top: 30px;
    }

    .result-page {
        padding-top: 22px;
    }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-contrast: more) {
    .result-meta-card,
    .summary-panel--clean,
    .result-legal--inline {
        border-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

@supports not (overflow: clip) {
    html,
    body,
    main {
        overflow-x: hidden;
    }
}