/* Simulador de inversión · Anta Quality RF 0-3 */
:root{
    color-scheme: light;
    --navy:#2B3840; --steel:#40738F; --teal:#87CCC9; --stone:#DCDAD6; --red:#C0504D;
    --steel-08:#EEF3F6; --teal-15:#E7F5F4; --red-10:#F8ECEB;
    --bg:#FFF; --panel:#F7F8F8; --line:#E6E7E6; --text:#2B3840; --muted:#6F7B82;
    --font:'Manrope', 'Segoe UI', -apple-system, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{background:#F9F9F9}
  body{margin:0; color:var(--text); font-family:var(--font); font-size:14px; line-height:1.45; padding:0 16px; padding-block:24px 56px; -webkit-font-smoothing:antialiased}
  .num{font-variant-numeric:tabular-nums}
  .wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:22px}

  .panel[hidden]{display:none!important}
  .panel{display:flex; flex-direction:column; gap:16px}

  .card{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--bg)}
  .card h2{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
  .card .sub{margin:3px 0 0; font-size:12.5px; color:var(--muted)}
  .eyebrow{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}

  /* simulator */
  .sim{display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start}
  @media (max-width:900px){ .sim{grid-template-columns:1fr} }
  .controls{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:20px}
  .field{display:flex; flex-direction:column; gap:8px}
  .field label{font-size:12.5px; font-weight:700}
  .inp{position:relative}
  .inp input, .field select{width:100%; font:inherit; font-size:18px; font-weight:700; color:var(--text); padding:10px 38px 10px 12px; border:1px solid #D5D8D8; border-radius:10px; background:#fff; font-variant-numeric:tabular-nums}
  .field select{font-size:15px; padding-right:12px}
  .inp input:focus, .field select:focus, .search:focus, .tb select:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--steel)}
  .inp .unit{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700}
  .chips{display:flex; flex-wrap:wrap; gap:6px}
  .chip{all:unset; cursor:pointer; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid #D5D8D8; background:#fff; color:var(--text)}
  .chip:hover{border-color:var(--steel)}
  .chip:focus-visible{outline:2px solid var(--steel); outline-offset:2px}
  .chip.on{background:var(--steel); border-color:var(--steel); color:#fff}

  .result{display:flex; flex-direction:column; gap:16px}
  .headline{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
  .big{font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1}
  .gain{font-size:15px; font-weight:700; margin-top:6px}
  .pos{color:var(--steel)} .neg{color:var(--red)}
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  @media (max-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} }
  .stat{background:var(--panel); border-radius:10px; padding:11px 12px}
  .stat .l{font-size:11px; color:var(--muted); font-weight:600}
  .stat .v{font-size:17px; font-weight:800; margin-top:2px}

  .legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted)}
  .legend i{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}

  .chart{position:relative}
  .chart svg{width:100%; height:auto; display:block; overflow:visible}
  .tick{font-size:10.5px; fill:var(--muted); font-family:var(--font)}
  .tip{position:absolute; pointer-events:none; background:var(--navy); color:#fff; border-radius:8px; padding:8px 10px; font-size:12px; line-height:1.5; white-space:nowrap; transform:translate(-50%,-100%); opacity:0; transition:opacity .1s; box-shadow:0 4px 14px rgba(43,56,64,.18); z-index:2}
  .tip b{font-weight:700}
  .tip .sw{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; box-shadow:0 0 0 1.5px #fff}

  .fine{font-size:11.5px; color:var(--muted); line-height:1.5}


  @media (prefers-reduced-motion: reduce){ *{transition:none!important} }