:root{
    --bg1:#e9f2ff;
    --bg2:#f4f9ff;
    --text:#0f172a;          /* slate-900 */
    --muted:#6b7280;         /* gray-500 */
    --chip:#1d4ed8;          /* blue-700 */
    --card-radius:18px;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    min-height:100svh;
    display:grid;
    color:var(--text);
  }

  .cuaca .card{
    position:relative;
    width: 220px;
    height: 300px;
    border-radius:var(--card-radius);
    padding:18px 18px 16px;
    background: radial-gradient(120% 120% at -10% -20%, var(--bg1) 0%, var(--bg2) 60%, #ffffff 100%);
    box-shadow:0 10px 24px rgba(15,23,42,.12);
    overflow:hidden;
  }

  /* subtle abstract lines */
  .cuaca .card::before,
  .cuaca .card::after{
    content:"";
    position:absolute;
    inset:auto -40% -30% auto; /* right side curve */
    width:240px;height:240px;
    border-radius:50%;
    border:1px solid rgba(59,130,246,.18);
    transform:rotate(18deg);
  }
  .cuaca .card::after{
    inset:auto -20% -48% auto;
    width:300px;height:300px;
    border-color:rgba(59,130,246,.10);
    transform:rotate(12deg);
  }

  .cuaca .top{
    display:flex;
    flex-direction:column;
    gap:2px;
    letter-spacing:.2px;
  }
  .city{
    font-weight:600;
    font-size:18px;
  }
  .cuaca .time{
    font-size:12px;
    color:var(--muted);
  }

  .cuaca .icon{
    margin:18px 0 10px;
    width:56px;height:56px;
  }

  .cuaca .temp{
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .temp .value{
    font-size:40px;
    font-weight:600;
    line-height:1;
  }
  .temp .unit{
    font-size:22px;
    font-weight:600;
    transform:translateY(-2px);
  }

  .cuaca .desc{
    margin-top:6px;
    font-size:14px;
    color: #111827;
  }

  .cuaca .cta{
    position:absolute;
    right:12px;
    bottom:12px;
    width:30px;height:30px;
    border-radius:999px;
    display:grid;place-items:center;
    background:var(--chip);
    box-shadow:0 6px 14px rgba(29,78,216,.35);
  }
  .cuaca.cta svg{width:16px;height:16px;fill:#fff}