:root {
    --blue-950: #082a45;
    --blue-900: #0a3b62;
    --blue-800: #095991;
    --blue-700: #0b74c9;
    --blue-600: #1689dd;
    --blue-500: #26a0e8;
    --blue-300: #8ed4f5;
    --blue-200: #c2e8fb;
    --blue-100: #e8f7ff;
    --blue-50: #f4fbff;
    --cyan: #19b9c5;
    --green: #198754;
    --amber: #b87800;
    --red: #c94444;
    --ink: #173044;
    --muted: #678095;
    --line: #dceaf2;
    --white: #ffffff;
    --shadow: 0 20px 50px rgba(9, 78, 121, .12);
    --shadow-soft: 0 8px 24px rgba(9, 78, 121, .08);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(38, 160, 232, .08), transparent 28%),
        radial-gradient(circle at 92% 28%, rgba(25, 185, 197, .08), transparent 24%),
        #f6fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.water-page { min-height: 100vh; }

.hero {
    position: relative;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(135deg, rgba(7, 77, 128, .98), rgba(10, 119, 198, .96) 52%, rgba(20, 157, 207, .93)),
        #0b74c9;
    padding: 28px 20px 118px;
}

.hero::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -68px;
    height: 130px;
    border-radius: 50% 50% 0 0;
    background: #f6fafc;
}

.hero__inner {
    width: min(1120px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 42px;
    color: rgba(255, 255, 255, .88);
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover { color: #fff; }

.hero__copy {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 900px;
}

.hero__icon {
    display: grid;
    place-items: center;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 28px;
    font-size: 43px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
}

.eyebrow,
.section-kicker {
    margin: 0 0 8px;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 850;
}

.eyebrow { color: #bdeaff; }

.hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.hero__lead {
    max-width: 790px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.84);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
}

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    background: #fff;
    color: var(--blue-800);
}

.badge--soft {
    color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
}

.hero__bubble {
    position: absolute;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
}

.hero__bubble--one { width: 260px; height: 260px; right: 8%; top: -120px; }
.hero__bubble--two { width: 420px; height: 420px; right: -170px; top: 70px; }

.page-shell {
    position: relative;
    z-index: 3;
    width: min(1120px, calc(100% - 32px));
    margin: -82px auto 0;
    padding-bottom: 60px;
}

.calculator-card,
.panel,
.tariffs-section,
.info-strip {
    border: 1px solid rgba(13, 93, 143, .09);
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow);
}

.calculator-card {
    padding: clamp(24px, 4vw, 42px);
    border-radius: var(--radius-xl);
}

.section-heading,
.panel__heading,
.old-rates__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.section-heading h2,
.panel h3,
.tariffs-section h2,
.old-rates h3 {
    margin: 0;
    color: var(--blue-950);
    letter-spacing: -.025em;
}

.section-heading h2,
.tariffs-section h2 { font-size: clamp(25px, 3vw, 34px); }
.panel h3, .old-rates h3 { font-size: 21px; }
.section-kicker { color: var(--blue-700); }

.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #effbf5;
    color: #23724d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.live-dot i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2fa66d;
    box-shadow: 0 0 0 5px rgba(47,166,109,.12);
}

.mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 30px 0 26px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f7fbfd;
}

.mode-switch__button {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 14px 16px;
    border: 0;
    border-radius: 13px;
    color: var(--muted);
    background: transparent;
    text-align: left;
    transition: .18s ease;
}

.mode-switch__button:hover { background: #fff; }

.mode-switch__button.is-active {
    color: var(--blue-900);
    background: #fff;
    box-shadow: 0 8px 22px rgba(12, 86, 132, .11);
}

.mode-switch__button strong,
.mode-switch__button small { display: block; }
.mode-switch__button strong { font-size: 15px; }
.mode-switch__button small { margin-top: 3px; font-size: 12px; color: var(--muted); }

.mode-switch__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-weight: 900;
}

.calculator-form { max-width: 760px; }
.input-block label { display: block; margin-bottom: 9px; font-weight: 800; color: var(--blue-950); }

.input-wrap { position: relative; }

.input-wrap input {
    width: 100%;
    height: 68px;
    padding: 0 82px 0 20px;
    border: 2px solid #d8e8f0;
    border-radius: 16px;
    outline: none;
    color: var(--blue-950);
    background: white;
    font-size: 22px;
    font-weight: 800;
    transition: border .15s ease, box-shadow .15s ease;
}

.input-wrap input:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 5px rgba(38,160,232,.12);
}

.input-unit {
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 38px;
    padding: 0 9px;
    border-radius: 10px;
    color: var(--blue-800);
    background: var(--blue-100);
    font-weight: 900;
}

.field-help,
.panel-copy,
.chart-note,
.section-heading--tariffs p,
.old-rates p,
.info-strip p {
    color: var(--muted);
    line-height: 1.55;
}

.field-help { margin: 8px 0 0; font-size: 13px; }

.quick-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.quick-values > span { margin-right: 2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.quick-values button,
.saving-buttons button {
    border: 1px solid #d5e8f1;
    border-radius: 999px;
    background: #fff;
    color: var(--blue-800);
    font-weight: 800;
    transition: .15s ease;
}

.quick-values button { padding: 7px 10px; font-size: 12px; }
.quick-values button:hover,
.saving-buttons button:hover,
.saving-buttons button.is-active {
    border-color: var(--blue-500);
    background: var(--blue-100);
}

.form-error {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--red);
    font-size: 13px;
    font-weight: 750;
}

.calculate-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 62px;
    margin-top: 6px;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    box-shadow: 0 12px 26px rgba(11,116,201,.24);
    font-weight: 900;
    transition: transform .15s ease, box-shadow .15s ease;
}

.calculate-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(11,116,201,.30); }
.calculate-button:active { transform: translateY(0); }

.results { margin-top: 24px; }

.result-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 210px;
    padding: clamp(28px, 5vw, 52px);
    border-radius: var(--radius-xl);
    color: #fff;
    background: linear-gradient(135deg, #073d65, #0a78c9 62%, #20a6d6);
    box-shadow: var(--shadow);
}

.result-hero::before,
.result-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
}
.result-hero::before { width: 250px; height: 250px; right: -40px; top: -120px; }
.result-hero::after { width: 180px; height: 180px; right: 120px; bottom: -120px; }

.result-hero__main { position: relative; z-index: 2; }
.result-label { margin: 0 0 6px; color: #beeaff; font-weight: 850; }
.result-number { font-size: clamp(46px, 8vw, 78px); line-height: 1; letter-spacing: -.05em; font-weight: 950; }
.result-subtitle { margin: 10px 0 0; color: rgba(255,255,255,.82); font-size: 16px; }

.result-hero__drop {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 38px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    font-size: 60px;
    transform: rotate(4deg);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.metric-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.metric-card__icon { font-size: 20px; }
.metric-card p { margin: 10px 0 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.metric-card strong { color: var(--blue-950); font-size: 17px; }

.insight-card {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid #cfe9f6;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #f6fcff, #eef9ff);
}
.insight-card__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-soft); }
.insight-card__title { margin: 1px 0 3px; font-weight: 900; color: var(--blue-900); }
.insight-card p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 16px;
    margin-top: 16px;
}

.content-grid + .content-grid { grid-template-columns: 1fr 1fr; }

.panel {
    min-width: 0;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.panel__heading { margin-bottom: 20px; }
.chart-legend { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.chart-legend i { width: 18px; height: 4px; border-radius: 9px; background: var(--blue-600); }

.chart-wrap {
    overflow: hidden;
    width: 100%;
    min-height: 270px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdfe, #f6fbfe);
}
.cost-chart { display: block; width: 100%; height: auto; min-height: 270px; }
.chart-note { margin: 12px 0 0; font-size: 12px; }

.chart-grid-line { stroke: #dceaf2; stroke-width: 1; }
.chart-axis-text { fill: #7a91a4; font: 12px system-ui, sans-serif; }
.chart-area { fill: rgba(38,160,232,.10); }
.chart-line { fill: none; stroke: #1689dd; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-user-line { stroke: #0b74c9; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .55; }
.chart-user-dot { fill: #fff; stroke: #0b74c9; stroke-width: 5; }
.chart-user-label { fill: #0a3b62; font: 800 12px system-ui, sans-serif; }

.tier-breakdown { display: grid; gap: 9px; }
.tier-row {
    display: grid;
    grid-template-columns: minmax(90px, .7fr) minmax(150px, 1.2fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e1edf3;
    border-radius: 14px;
    background: #fbfdfe;
}
.tier-row__range { color: var(--blue-900); font-weight: 850; }
.tier-row__calc { color: var(--muted); font-size: 13px; }
.tier-row__amount { color: var(--blue-950); font-weight: 900; text-align: right; }

.tariffs-section {
    margin-top: 16px;
    padding: clamp(24px, 4vw, 34px);
    border-radius: var(--radius-xl);
}
.section-heading--tariffs { align-items: center; }
.section-heading--tariffs p { margin: 7px 0 0; }

.secondary-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #cde1ec;
    border-radius: 12px;
    color: var(--blue-800);
    background: #fff;
    font-weight: 850;
    white-space: nowrap;
}
.secondary-button:hover { background: var(--blue-50); }

.tariff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
}
.tariff-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border: 1px solid #dcebf2;
    border-radius: 15px;
    background: #fbfdfe;
}
.tariff-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--tier-color, var(--blue-300));
}
.tariff-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.tariff-card strong { display: block; margin-top: 4px; color: var(--blue-950); font-size: 19px; }
.tariff-card small { display: block; margin-top: 3px; color: var(--muted); }

.old-rates {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.tariff-grid--old .tariff-card { background: #fcfcfc; }

.info-strip {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.info-strip__icon { font-size: 22px; }
.info-strip strong { color: var(--blue-950); }
.info-strip p { margin: 4px 0 0; font-size: 13px; }

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 4px 0;
    color: var(--muted);
    font-size: 13px;
}
.footer a { color: var(--blue-700); font-weight: 850; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.is-hidden { display: none !important; }

@media (max-width: 900px) {
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .content-grid,
    .content-grid + .content-grid { grid-template-columns: 1fr; }
    .tariff-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .hero { padding: 22px 16px 105px; }
    .hero::after { bottom: -84px; }
    .back-link { margin-bottom: 30px; }
    .hero__copy { align-items: flex-start; gap: 15px; }
    .hero__icon { width: 58px; height: 58px; flex-basis: 58px; border-radius: 18px; font-size: 28px; }
    .hero h1 { font-size: 35px; }
    .hero__lead { font-size: 15px; }
    .page-shell { width: min(100% - 20px, 1120px); margin-top: -72px; }
    .calculator-card { padding: 20px; border-radius: 22px; }
    .section-heading { display: block; }
    .live-dot { margin-top: 12px; }
    .mode-switch { grid-template-columns: 1fr; }
    .mode-switch__button { min-height: 62px; }
    .input-wrap input { height: 62px; font-size: 20px; }
    .quick-values > span { width: 100%; }
    .result-hero { min-height: 190px; padding: 26px 22px; }
    .result-number { font-size: 50px; }
    .result-hero__drop { display: none; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .metric-card { padding: 14px; border-radius: 16px; }
    .metric-card strong { font-size: 15px; }
    .panel { padding: 20px; border-radius: 22px; }
    .panel__heading { display: block; }
    .chart-legend { margin-top: 8px; }
    .tier-row { grid-template-columns: 1fr auto; }
    .tier-row__calc { grid-column: 1 / -1; grid-row: 2; }
    .tier-row__amount { grid-column: 2; grid-row: 1; }
    .tariffs-section { padding: 20px; border-radius: 22px; }
    .section-heading--tariffs { display: block; }
    .secondary-button { margin-top: 14px; }
    .tariff-grid { grid-template-columns: 1fr 1fr; }
    .footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 410px) {
    .hero__icon { display: none; }
    .hero h1 { font-size: 32px; }
    .metric-grid { grid-template-columns: 1fr; }
    .tariff-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* v2.1 · conceptos fijos de la factura */
.tier-row--fixed {
    background: #f4f9fc;
    border-style: dashed;
}
.tier-row--fixed .tier-row__range {
    color: #285b78;
}

/* =========================================================
   v2.2 · Más visual + facturación bimensual
   ========================================================= */

body {
    background:
        radial-gradient(circle at 5% 8%, rgba(36, 156, 232, .14), transparent 24%),
        radial-gradient(circle at 96% 24%, rgba(21, 190, 198, .12), transparent 25%),
        linear-gradient(180deg, #f3faff 0%, #f8fbfd 45%, #f1f7fb 100%);
}

.hero {
    min-height: 410px;
    background:
        radial-gradient(circle at 82% 17%, rgba(255,255,255,.16) 0 4%, transparent 4.4%),
        radial-gradient(circle at 88% 35%, rgba(255,255,255,.10) 0 7%, transparent 7.4%),
        linear-gradient(118deg, #063b78 0%, #086fbd 46%, #13a8c2 100%);
}

.hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -235px;
    top: -275px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,.035),
        0 0 0 145px rgba(255,255,255,.025);
    pointer-events: none;
}

.hero__copy { max-width: 940px; }

.hero__icon {
    background: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 18px 38px rgba(0,46,91,.22);
}

.hero__update {
    position: relative;
    display: inline-block;
    margin: 25px 0 0;
    padding-left: 22px;
    color: rgba(255,255,255,.93);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
}

.hero__update::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9beeff;
    box-shadow: 0 0 0 5px rgba(155,238,255,.14);
    transform: translateY(-50%);
}

.page-shell { margin-top: -92px; }

.calculator-card,
.billing-card,
.panel,
.tariffs-section,
.info-strip {
    border-color: rgba(13, 93, 143, .11);
    box-shadow: 0 24px 62px rgba(6, 69, 112, .13);
}

.calculator-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 96% 0%, rgba(41, 174, 231, .10), transparent 25%),
        rgba(255,255,255,.97);
}

.calculator-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0871c2, #21b8d0 58%, #8ee5f2);
}

.calculator-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    right: -135px;
    bottom: -150px;
    border-radius: 50%;
    border: 30px solid rgba(22,137,221,.035);
    box-shadow: 0 0 0 28px rgba(25,185,197,.025);
}

.section-kicker { font-size: 11px; letter-spacing: .16em; }

.mode-switch {
    border-color: #d6e9f3;
    background: linear-gradient(180deg, #f4faff, #eef7fb);
    box-shadow: inset 0 1px 0 #fff;
}

.mode-switch__button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #0876ca, #119bc7);
    box-shadow: 0 12px 28px rgba(8,118,202,.22);
}

.mode-switch__button.is-active small { color: rgba(255,255,255,.74); }
.mode-switch__button.is-active .mode-switch__icon {
    color: #0868ae;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 15px rgba(0,0,0,.10);
}

.input-wrap {
    transition: transform .18s ease, box-shadow .18s ease;
}

.input-wrap:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px rgba(22,137,221,.10), 0 14px 28px rgba(9,102,160,.10);
}

.calculate-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #0873c4, #109bd0 55%, #13b8c0);
    box-shadow: 0 15px 30px rgba(8,115,196,.24);
}

.calculate-button::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -30%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    transform: rotate(20deg);
    transition: left .5s ease;
}
.calculate-button:hover::before { left: 115%; }

/* Widget de facturación bimensual */
.billing-card {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(17, 126, 188, .12);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 98% 0%, rgba(30,185,198,.12), transparent 30%),
        linear-gradient(135deg, #ffffff, #f5fbff 68%, #eefaff);
}

.billing-card::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -95px;
    width: 220px;
    height: 220px;
    border: 34px solid rgba(19,168,194,.04);
    border-radius: 50%;
    pointer-events: none;
}

.billing-card__heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.billing-card__heading h2 {
    margin: 0;
    color: var(--blue-950);
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -.03em;
}

.billing-card__heading p:last-child {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.billing-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: linear-gradient(145deg, #e7f7ff, #dff8f7);
    box-shadow: inset 0 0 0 1px rgba(20,136,190,.09), 0 10px 24px rgba(9,83,130,.10);
    font-size: 25px;
}

.billing-cycle {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 26px;
}

.billing-period {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 16px 14px 14px;
    border: 1px solid #dceaf2;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(8,83,129,.055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.billing-period:hover {
    transform: translateY(-3px);
    border-color: #b9dceb;
    box-shadow: 0 14px 28px rgba(8,83,129,.10);
}

.billing-period__number {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #2875a6;
    background: #edf8fd;
    font-size: 11px;
    font-weight: 900;
}

.billing-period strong {
    display: block;
    color: var(--blue-950);
    font-size: 14px;
    line-height: 1.25;
}

.billing-period small {
    display: block;
    margin-top: 7px;
    color: #7890a3;
    font-size: 11px;
    font-weight: 750;
}

.billing-period.is-current {
    border-color: rgba(9,126,202,.55);
    background: linear-gradient(145deg, #0877c8, #12a7bf);
    box-shadow: 0 16px 34px rgba(8,119,200,.22);
    transform: translateY(-4px);
}

.billing-period.is-current .billing-period__number {
    color: #086eae;
    background: #fff;
}

.billing-period.is-current strong,
.billing-period.is-current small { color: #fff; }
.billing-period.is-current small { opacity: .76; }

.billing-period__current {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #075c98;
    background: rgba(255,255,255,.92);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.billing-card__note {
    position: relative;
    z-index: 1;
    margin: 17px 0 0;
    color: #6d8496;
    font-size: 12px;
}
.billing-card__note span { color: #0c91c7; margin-right: 6px; }

/* Resultados más potentes y menos “caja blanca” */
.results { margin-top: 18px; }

.result-hero {
    box-shadow: 0 22px 48px rgba(5,75,128,.20);
    background:
        radial-gradient(circle at 85% 25%, rgba(255,255,255,.13), transparent 23%),
        linear-gradient(115deg, #063c78 0%, #087aca 52%, #11aebe 100%);
}

.metric-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8,83,129,.12); }
.metric-card::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    right: -28px;
    bottom: -34px;
    border-radius: 50%;
    background: rgba(22,137,221,.06);
}

.insight-card {
    border-color: #bfe5f5;
    background: linear-gradient(110deg, #f1fbff, #f4fffd);
    box-shadow: 0 10px 28px rgba(8,83,129,.07);
}

.results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 16px;
    margin-top: 16px;
}

.panel--chart,
.panel--breakdown {
    position: relative;
    overflow: hidden;
}

.panel--chart {
    background: linear-gradient(180deg, #ffffff, #f9fdff);
}

.panel--chart::before,
.panel--breakdown::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
}
.panel--chart::before { background: linear-gradient(90deg, #1689dd, #22c2cc); }
.panel--breakdown::before { background: linear-gradient(90deg, #0a689f, #65bfdc); }

.panel__mini-note {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: #54758b;
    background: #edf7fb;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.chart-wrap {
    border: 1px solid #e3eff5;
    background:
        linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
        repeating-linear-gradient(0deg, #f0f7fa 0 1px, transparent 1px 28px);
}

.tier-row {
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.tier-row:hover {
    transform: translateX(3px);
    border-color: #c7e1ed;
    background: #f5fbfe;
}

.tariffs-section {
    background:
        radial-gradient(circle at 96% 6%, rgba(38,160,232,.09), transparent 23%),
        rgba(255,255,255,.97);
}

.tariff-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tariff-card:hover {
    transform: translateY(-3px);
    border-color: #c7e2ee;
    box-shadow: 0 10px 25px rgba(9,78,121,.09);
}

.info-strip {
    border-left: 4px solid #18a7c3;
    background: linear-gradient(90deg, #f7fcff, #fff);
}

@media (max-width: 1050px) {
    .billing-cycle { grid-template-columns: repeat(3, 1fr); }
    .results-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .hero { min-height: 380px; }
    .hero__update { margin-top: 20px; font-size: 13px; }
    .page-shell { margin-top: -78px; }
    .billing-card { padding: 20px; border-radius: 22px; }
    .billing-card__heading { gap: 12px; }
    .billing-card__icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 21px; }
    .billing-cycle { grid-template-columns: 1fr 1fr; gap: 8px; }
    .billing-period { min-height: 118px; padding: 13px; border-radius: 15px; }
    .billing-period.is-current { transform: none; }
    .panel__mini-note { margin-top: 9px; }
}

@media (max-width: 380px) {
    .billing-cycle { grid-template-columns: 1fr; }
    .billing-period { min-height: auto; }
}