/* Start custom CSS for html, class: .elementor-element-9b8edcb */:root{
      /* Base */
      --bg: #f6f7fb;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --stroke: rgba(15, 23, 42, .12);
      --stroke-2: rgba(15, 23, 42, .08);
      --shadow: 0 10px 30px rgba(2, 6, 23, .08);

      /* Botón oscuro tipo Holded */
      --btn: #0b1220;
      --btn-text: #ffffff;
      --btn-hover: #0a1020;

      /* Básico (azul cian) */
      --basic: #00B3C6;
      --basic-soft: #E6F9FB;

      /* Hero (derivados de #FF5E00) */
      --hero: #FF5E00;
      --hero-soft: #FFF2EA;   /* muy suave */
      --hero-soft-2: #FFE7D8; /* algo más intenso */

      /* Radius */
      --r: 16px;
      --r2: 12px;
    }

    *{ box-sizing:border-box; }
   

    .wrap{
      max-width: 1120px;
      margin: 0 auto;
    }

    .header{
      margin-bottom: 16px;
      display:flex;
      gap:12px;
      align-items:flex-end;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .header h1{
      margin:0;
      font-size: 18px;
      letter-spacing: .2px;
    }
    .header p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      max-width: 70ch;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .plan{
      background: var(--card);
      border: 1px solid var(--stroke-2);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 520px;
    }

    /* Barra superior fina (como en el ejemplo) */
    .plan .topbar{
      height: 6px;
      background: #e5e7eb;
    }
    .plan.basic .topbar{ background: var(--basic); }
    .plan.hero1 .topbar{ background: color-mix(in srgb, var(--hero) 80%, white); }
    .plan.hero2 .topbar{ background: var(--hero); }
    .plan.hero3 .topbar{ background: color-mix(in srgb, var(--hero) 92%, black); }

    .plan-body{
      padding: 18px 18px 14px;
      display:flex;
      flex-direction:column;
      gap: 12px;
      flex: 1;
    }

    .plan-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
    }

    .plan-title{
      margin:0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .2px;
    }
    .plan-desc{
      margin: 6px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
      min-height: 36px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
      border: 1px solid var(--stroke);
      background: #fff;
      white-space:nowrap;
    }
    .badge.popular{
      border-color: rgba(255, 94, 0, .35);
      background: color-mix(in srgb, var(--hero) 10%, white);
    }

    .price{
      display:flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 2px;
    }
    .price .amount{
      font-size: 40px;
      font-weight: 900;
      letter-spacing: -1.2px;
    }
    .price .unit{
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
    }

    .subprice{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
      display:flex;
      gap: 6px;
      flex-wrap:wrap;
      align-items:center;
    }
    .subprice .strike{
      text-decoration: line-through;
      color: #94a3b8;
    }

    .cta{
      margin-top: 8px;
    }
    .btn{
      width: 100%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(2,6,23,.14);
      background: var(--btn);
      color: var(--btn-text);
      font-weight: 800;
      cursor:pointer;
      transition: transform .12s ease, opacity .12s ease, background .12s ease;
    }
    .btn:hover{ background: var(--btn-hover); }
    .btn:active{ transform: translateY(1px); }

    .divider{
      height: 1px;
      background: rgba(15,23,42,.10);
      margin: 14px 0 6px;
    }

    .features{
      padding: 0 18px 18px;
    }
    .features ul{
      list-style:none;
      margin: 0;
      padding: 0;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .features li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
    }

    .icon{
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 18px;
      margin-top: 1px;
      border: 1px solid rgba(15,23,42,.12);
      background: #fff;
      color: #0f172a;
      font-size: 12px;
      font-weight: 900;
    }
    .basic .icon{ border-color: color-mix(in srgb, var(--basic) 25%, rgba(15,23,42,.12)); }
    .hero1 .icon, .hero2 .icon, .hero3 .icon{
      border-color: rgba(255, 94, 0, .22);
    }

    /* “Tint” muy sutil del plan para look premium */
    .plan.basic{ background: linear-gradient(180deg, var(--basic-soft), #fff 22%); }
    .plan.hero1{ background: linear-gradient(180deg, var(--hero-soft), #fff 22%); }
    .plan.hero2{ background: linear-gradient(180deg, var(--hero-soft-2), #fff 24%); }
    .plan.hero3{ background: linear-gradient(180deg, color-mix(in srgb, var(--hero) 12%, white), #fff 26%); }

    /* Responsive */
    @media (max-width: 1100px){
      .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plan{ min-height: 520px; }
    }
    @media (max-width: 640px){
      .grid{ grid-template-columns: 1fr; }
      .plan{ min-height: auto; }
      .price .amount{ font-size: 36px; }
    }/* End custom CSS */