:root {
      --bg: #050712;
      --panel: rgba(16, 21, 42, 0.78);
      --panel-2: rgba(24, 31, 60, 0.9);
      --text: #f4f7ff;
      --muted: #98a4c8;
      --cyan: #00e5ff;
      --green: #5cff72;
      --orange: #ff9f2f;
      --red: #ff4d67;
      --line: rgba(154, 176, 255, 0.2);
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(0, 229, 255, 0.13), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(92, 255, 114, 0.09), transparent 25%),
        radial-gradient(circle at 50% 100%, rgba(147, 51, 234, 0.14), transparent 36%),
        var(--bg);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }

    a { color: var(--cyan); }
    button, input, select { font: inherit; }
    button { cursor: pointer; }

    .shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 64px; }
    .hero { text-align: center; padding: 54px 12px 24px; }
    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 13px;
      border: 1px solid rgba(0, 229, 255, .35);
      border-radius: 999px;
      color: var(--cyan);
      background: rgba(0, 229, 255, .07);
      font-size: .78rem;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .header-meta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .page-version {
      display: inline-flex;
      align-items: center;
      padding: 5px 9px;
      border: 1px solid rgba(152,164,200,.25);
      border-radius: 999px;
      background: rgba(255,255,255,.03);
      color: rgba(223,230,255,.72);
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .9;
    }
    h1 { margin: 18px 0 12px; font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.055em; }
    h1 span { color: var(--green); text-shadow: 0 0 24px rgba(92,255,114,.38); }
    
    .carousel-container {
      position: relative;
      max-width: 760px;
      margin: 18px auto 28px;
      min-height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .carousel-slide {
      display: none;
      color: var(--muted);
      font-size: clamp(1rem, 2.4vw, 1.25rem);
      line-height: 1.6;
      animation: fadeIn 0.5s ease forwards;
    }
    .carousel-slide.active { display: block; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .carousel-controls {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 14px;
    }
    .carousel-btn {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(152,164,200,0.3);
      color: var(--text);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s ease;
    }
    .carousel-btn:hover { background: rgba(0,229,255,0.2); border-color: var(--cyan); }
    .carousel-dots { display: flex; gap: 8px; }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(152,164,200,0.3);
      cursor: pointer;
      transition: 0.2s ease;
    }
    .dot.active { background: var(--green); box-shadow: 0 0 10px var(--green); }

    .hero-cta-btn {
      max-width: 420px;
      margin: 10px auto 30px;
      font-size: 1.15rem;
    }

    .notice {
      margin: 0 auto 22px;
      max-width: 980px;
      border: 1px solid rgba(255,159,47,.38);
      background: rgba(255,159,47,.08);
      color: #ffd3a2;
      border-radius: 16px;
      padding: 14px 16px;
      line-height: 1.5;
      font-size: .9rem;
    }

    .card {
      position: relative;
      background: linear-gradient(145deg, rgba(18,24,48,.92), rgba(9,13,29,.8));
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.045), transparent 24%);
    }
    .step { padding: clamp(22px, 4vw, 36px); margin-bottom: 20px; }
    .step-head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
    .step-num {
      flex: 0 0 auto;
      width: 38px; height: 38px;
      display: grid; place-items: center;
      border-radius: 12px;
      color: #00120a;
      background: var(--green);
      box-shadow: 0 0 22px rgba(92,255,114,.36);
      font-weight: 900;
    }
    .step h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); }
    .step-head p { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
    .closure-context {
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--cyan) !important;
    }

    .result-context-control {
      width: min(320px, 100%);
      margin-top: 14px;
    }

    .result-context-control label {
      margin-bottom: 6px;
    }

    .result-context-control select {
      padding: 10px 12px;
      border-radius: 12px;
    }

    .result-context-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
      gap: 32px;
      align-items: center;
      margin-top: 12px;
      margin-left: -50px;
      padding: 20px 24px 20px 54px;
      border: 1px solid rgba(92,255,114,.62);
      border-radius: 20px;
      background: linear-gradient(90deg, rgba(92,255,114,.15), rgba(0,229,255,.08));
      box-shadow: 0 0 34px rgba(92,255,114,.14);
    }

    .result-context-description {
      margin: 0 !important;
    }

    .result-context-data {
      min-width: 0;
    }

    .result-context-data .closure-context {
      margin: 0 0 10px;
    }

    .result-context-data .result-context-control {
      width: 100%;
      margin-top: 0;
    }

    .chart-context-panel {
      margin-bottom: 20px;
      padding: 20px 24px;
      border: 1px solid rgba(92,255,114,.62);
      border-radius: 20px;
      background: linear-gradient(90deg, rgba(92,255,114,.15), rgba(0,229,255,.08));
      box-shadow: 0 0 34px rgba(92,255,114,.14);
    }

    .chart-context-panel > p {
      margin-left: 0;
      margin-right: 0;
    }

    .chart-context-panel .closure-context {
      margin-top: 0;
    }

    .chart-context-panel .fine-print {
      margin-bottom: 0;
    }

    .afore-grid, .results-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .afore-btn {
      position: relative;
      min-height: 70px;
      border: 1px solid rgba(152,164,200,.2);
      border-radius: 16px;
      color: #cbd4ee;
      background: rgba(255,255,255,.035);
      transition: .22s ease;
      font-weight: 750;
      padding: 12px;
    }
    .afore-btn:hover { transform: translateY(-2px); border-color: rgba(0,229,255,.55); color: #fff; }
    .afore-btn.selected {
      color: #031006;
      border-color: var(--green);
      background: var(--green);
      box-shadow: 0 0 26px rgba(92,255,114,.42);
    }

    .helper { margin-top: 18px; color: var(--muted); font-size: .92rem; }
    .helper a { text-decoration: none; border-bottom: 1px dashed currentColor; }

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

    .basic-data-grid {
      display: grid;
      grid-template-columns: 1.05fr .72fr .78fr .88fr 1.85fr;
      gap: 12px;
      align-items: end;
    }
    .basic-data-grid > div { min-width: 0; }
    .basic-data-grid > div:nth-child(2) input,
    .basic-data-grid > div:nth-child(4) input {
      padding-left: 12px;
      padding-right: 12px;
    }
    .basic-data-grid > div:nth-child(5) select { font-size: .9rem; }
    .basic-data-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .basic-data-links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: .88rem;
    }
    .basic-data-links a {
      text-decoration: none;
      border-bottom: 1px dashed currentColor;
    }
    label { display: block; color: #cbd4ee; font-size: .9rem; margin-bottom: 8px; font-weight: 700; }
    input, select {
      width: 100%;
      border: 1px solid rgba(152,164,200,.25);
      border-radius: 14px;
      color: var(--text);
      background: rgba(2,5,16,.72);
      padding: 14px 15px;
      outline: none;
      transition: .2s ease;
    }
    input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,229,255,.08); }
    select option { background: #0b1022; }

    .inline-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

    .primary {
      width: 100%;
      min-height: 56px;
      border: 0;
      border-radius: 16px;
      color: #021007;
      background: linear-gradient(90deg, var(--green), #b4ff4d);
      box-shadow: 0 0 28px rgba(92,255,114,.24);
      font-weight: 900;
      letter-spacing: .02em;
      transition: .2s ease;
    }
    .primary:hover { transform: translateY(-2px); box-shadow: 0 0 38px rgba(92,255,114,.36); }

    #dashboard { display: none; }
    #dashboard.visible { display: block; animation: rise .45s ease both; }
    @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

    .performance-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
      padding: 20px 24px;
      border-radius: 20px;
      border: 1px solid rgba(92,255,114,.62);
      background: linear-gradient(90deg, rgba(92,255,114,.15), rgba(0,229,255,.08));
      box-shadow: 0 0 34px rgba(92,255,114,.14);
    }
    .performance-banner.opportunity {
      border-color: rgba(92,255,114,.62);
      background: linear-gradient(90deg, rgba(92,255,114,.15), rgba(0,229,255,.08));
      box-shadow: 0 0 34px rgba(92,255,114,.14);
    }
    .performance-banner .banner-copy { line-height: 1.45; }
    .performance-banner .banner-copy strong { display: block; font-size: clamp(1.15rem, 3vw, 1.55rem); margin-bottom: 3px; }
    .performance-banner .banner-copy span { color: #d7def4; }
    .performance-banner .banner-rate { flex: 0 0 auto; text-align: right; }
    .performance-banner .banner-rate b { display: block; color: var(--green); font-size: clamp(1.55rem, 4vw, 2.35rem); }
    .performance-banner.opportunity .banner-rate b { color: var(--green); }
    .performance-banner .banner-rate small { color: var(--muted); }

    .summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
    .loss-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,77,103,.24); }
    .loss-block span { display: block; color: #ffc0ca; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
    .loss-block strong { display: block; margin-top: 3px; color: var(--red) !important; font-size: clamp(1rem, 2.2vw, 1.45rem) !important; }
    .gain-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(152,164,200,.18); }
    .gain-block span { display: block; color: #dfe6ff; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
    .gain-block strong { display: block; margin-top: 3px; color: var(--green); font-size: clamp(1rem, 2.2vw, 1.45rem) !important; }
    .summary-row.needs-improvement .gain-block strong { color: var(--red) !important; }
    .comparison-section { margin-bottom: 20px; }
    .comparison-title { display: flex; align-items: flex-start; gap: 15px; margin: 4px 0 20px; padding: 0 2px; }
    .comparison-title h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
    .comparison-title p { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
    .metric { padding: 20px; }
    .metric small { color: var(--muted); display: block; margin-bottom: 8px; }
    .metric strong { font-size: clamp(1.25rem, 3vw, 2rem); }
    .metric .positive { color: var(--green); }
    .summary-row.needs-improvement .metric {
      border-color: rgba(255,77,103,.58);
      box-shadow: inset 0 0 28px rgba(255,77,103,.055), var(--shadow);
    }
    .summary-row.needs-improvement .metric strong,
    .summary-row.needs-improvement .metric .positive,
    .summary-row.needs-improvement .selected-irn {
      color: var(--red);
    }
    .summary-row.needs-improvement .selected-irn {
      border-color: rgba(255,77,103,.58);
      background: rgba(255,77,103,.08);
      box-shadow: inset 0 0 20px rgba(255,77,103,.06), 0 0 18px rgba(255,77,103,.10);
    }
    .selected-afore-name { display: block; margin-bottom: 10px; }
    .selected-irn {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
      padding: 8px 12px;
      border: 1px solid rgba(92,255,114,.58);
      border-radius: 13px;
      color: var(--green);
      background: rgba(92,255,114,.08);
      box-shadow: inset 0 0 20px rgba(92,255,114,.06), 0 0 18px rgba(92,255,114,.10);
      font-size: clamp(1.45rem, 3vw, 2.15rem) !important;
    }
    .selected-irn em { color: var(--muted); font-size: .72rem; font-style: normal; font-weight: 700; }

    .result-card {
      min-height: 156px;
      border: 1px solid transparent;
      border-radius: 18px;
      padding: 18px 14px;
      background: rgba(255,255,255,.035);
      color: var(--text);
      text-align: left;
      transition: .2s ease;
    }
    .result-card:hover { transform: translateY(-3px); }
    .result-card.selected { outline: 2px solid var(--cyan); outline-offset: 2px; }
    .result-card.best { border-color: rgba(92,255,114,.72); box-shadow: inset 0 0 26px rgba(92,255,114,.08); }
    .result-card.mid { border-color: rgba(255,159,47,.58); }
    .result-card.low { border-color: rgba(255,77,103,.5); }
    .rank { font-size: .73rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
    .result-card h3 { margin: 8px 0 14px; font-size: 1rem; }
    .result-card .amount { font-size: 1.18rem; font-weight: 900; white-space: nowrap; }
    .result-card.best .amount { color: var(--green); text-shadow: 0 0 15px rgba(92,255,114,.3); }
    .result-card.mid .amount { color: var(--orange); }
    .result-card.low .amount { color: var(--red); }
    .irn { display: block; margin-top: 8px; color: var(--muted); font-size: .82rem; }
    .loss { display: block; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(152,164,200,.15); color: var(--muted); font-size: .76rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: .035em; }
    .result-card.best .loss { color: var(--green); }
    .result-card.mid .loss { color: var(--orange); }
    .result-card.low .loss { color: var(--red); }
    .retirement-card .amount { font-size: 1.06rem; }
    .effective-balance {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: .73rem;
      font-weight: 850;
      line-height: 1.35;
      text-transform: uppercase;
      letter-spacing: .035em;
    }
    .effective-balance strong {
      display: block;
      margin-top: 3px;
      font-size: .92rem;
      color: currentColor;
    }
    .result-card.best .effective-balance { color: var(--green); }
    .result-card.mid .effective-balance { color: var(--orange); }
    .result-card.low .effective-balance { color: var(--red); }

    .chart-wrap { height: 430px; padding: 18px; }
    .chart-controls { display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
    .chart-controls > div { flex: 1 1 260px; }
    .chart-controls-advanced {
      display: grid;
      grid-template-columns: 1.05fr .72fr .78fr .88fr 1.85fr;
      align-items: end;
      gap: 12px;
      margin-top: 18px;
    }
    .chart-controls-advanced > div { min-width: 0; }
    .chart-controls-advanced > div:nth-child(2) input,
    .chart-controls-advanced > div:nth-child(4) input {
      padding-left: 12px;
      padding-right: 12px;
    }
    .chart-controls-advanced > div:nth-child(5) select {
      font-size: .9rem;
    }
    canvas { max-height: 350px; }

    .support-section {
      display: none;
      margin-top: 20px;
      padding: clamp(24px, 4vw, 38px);
      text-align: center;
    }
    .support-section.visible {
      display: block;
      animation: rise .45s ease both;
    }
    .support-section h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 4vw, 2.35rem); }
    .support-section > p { max-width: 760px; margin: 0 auto 24px; color: var(--muted); line-height: 1.65; }
    
    .support-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      max-width: 880px;
      margin: 20px auto;
      align-items: stretch;
    }
    .report-gift,
    .donacion-movil {
      margin: 0;
      padding: 24px;
      border-radius: 18px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 190px;
    }
    .report-gift {
      border: 1px solid rgba(0,229,255,.35);
      background: linear-gradient(145deg, rgba(0,229,255,.065), rgba(92,255,114,.035));
      box-shadow: inset 0 0 24px rgba(0,229,255,.035);
    }
    .report-gift.available {
      border-color: rgba(0,229,255,.58);
      box-shadow: inset 0 0 24px rgba(0,229,255,.05), 0 0 24px rgba(0,229,255,.08);
    }
    .donacion-movil {
      border: 1px solid rgba(92,255,114,.35);
      background: rgba(92,255,114,.045);
    }
    .report-gift p,
    .donacion-movil p {
      font-size: 1.1rem;
      margin: 0 0 12px;
      color: var(--text);
    }
    .report-gift b,
    .donacion-movil b {
      font-size: 1.25rem;
      letter-spacing: .035em;
    }
    .report-gift b { color: var(--cyan); }
    .donacion-movil b { color: var(--green); }
    .support-action-copy {
      flex: 1;
      color: var(--muted) !important;
      font-size: .92rem !important;
      line-height: 1.55;
    }
    .report-gift button,
    .donacion-movil button {
      width: 100%;
      min-height: 48px;
      border: 0;
      border-radius: 13px;
      font-weight: 900;
      transition: .2s ease;
    }
    .report-gift button {
      color: #001014;
      background: linear-gradient(90deg, var(--cyan), var(--green));
      box-shadow: 0 0 22px rgba(0,229,255,.14);
    }
    .donacion-movil button {
      color: #031006;
      background: linear-gradient(90deg, var(--green), #b4ff4d);
      box-shadow: 0 0 22px rgba(92,255,114,.16);
    }
    .report-gift button:not(:disabled):hover,
    .donacion-movil button:hover {
      transform: translateY(-2px);
    }
    .report-gift button:disabled {
      cursor: not-allowed;
      opacity: .42;
      filter: saturate(.45);
      box-shadow: none;
    }

    .support-note { margin-top: 18px !important; font-size: .82rem; }

    .independence-policy {
      margin-top: 18px;
      padding: 16px 18px;
      border: 1px solid rgba(0,229,255,.34);
      border-radius: 16px;
      background: rgba(0,229,255,.055);
      color: #dfe6ff;
      line-height: 1.6;
      text-align: center;
      box-shadow: inset 0 0 22px rgba(0,229,255,.035);
    }
    .independence-policy strong {
      color: var(--cyan);
    }

    .fine-print { color: var(--muted); line-height: 1.6; font-size: .82rem; margin-top: 16px; }
    footer { text-align: center; color: #7781a4; font-size: .8rem; padding-top: 26px; }

    @media (max-width: 900px) {
      .afore-grid, .results-grid { grid-template-columns: repeat(2, 1fr); }
      .summary-row { grid-template-columns: repeat(2, 1fr); }
      .basic-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .basic-data-grid > div:nth-child(5) { grid-column: 1 / -1; }
      .chart-controls-advanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chart-controls-advanced > div:nth-child(5) { grid-column: 1 / -1; }

      .result-context-layout {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
        margin-left: 0;
      }
    }

    @media (max-width: 580px) {
      .shell { width: min(100% - 18px, 1180px); padding-top: 14px; }
      .hero { padding-top: 34px; }
      .form-grid, .form-grid.three, .summary-row { grid-template-columns: 1fr; }
      .basic-data-grid { grid-template-columns: 1fr; }
      .basic-data-grid > div:nth-child(5) { grid-column: auto; }
      .performance-banner { align-items: flex-start; flex-direction: column; padding: 18px; }
      .performance-banner .banner-rate { text-align: left; }
      .afore-grid, .results-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
      .afore-btn { min-height: 62px; font-size: .86rem; }
      .result-card { min-height: 145px; padding: 15px 11px; }
      .result-card .amount { font-size: .96rem; }
      .chart-controls-advanced { grid-template-columns: 1fr; }
      .chart-controls-advanced > div:nth-child(5) { grid-column: auto; }
      .chart-wrap { height: 390px; padding: 10px; }
      .support-actions { grid-template-columns: 1fr; }
    }