/*===== GOOGLE FONTS =====*/

body.modal-open {
  overflow: hidden; /* desactiva scroll */
}

:root{

        --primary:#0d6efd;           /* azul principal */
      --primary-600:#0b5ed7;       /* hover */
      --primary-700:#0a58ca;       /* active */
      --bg:#f5f7fb;
      --text:#1f2937;
      --muted:#6b7280;
      --card:#ffffff;
      --ring: rgba(13,110,253,.35);
      --shadow: 0 10px 25px rgba(2, 6, 23, 0.08);

      --android:#a4c639;
       --android7:#78931e;
}



    /* Modal */
    .overlayApps{ position:fixed; inset:0; display:none; place-items:center; background: rgba(2,6,23,.45);
      backdrop-filter:saturate(110%) blur(4px); z-index:50; animation: fade .18s ease;
    }
    .overlayApps[aria-hidden="false"]{ display:grid; }
    @keyframes fade{ from{opacity:0} to{opacity:1}}
    .modalApps{
      text-align: center;
      width:min(450px, 92%);
      background: white;
      border-radius:20px;
      box-shadow: 0 30px 80px rgba(2,6,23,.30);
      border:1px solid rgba(2,6,23,.10);
      padding:22px 18px 18px;
      animation: rise .22s ease forwards;
    }
    .modalImage{
    height: 120px;
    width: auto;
    margin-bottom: 15px;    
    }
    @keyframes rise{ to{ transform: translateY(0)} }
    .modalApps h2{ margin:0 0 4px; font-size:18px }
    .modalApps p{ margin:0 0 16px; color:var(--muted); font-size:18px }
    .actionsApps{ display:flex; gap:10px; flex-wrap:wrap; }
    .btnApps{
      flex:1 1 160px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 14px; border-radius:14px; border:1px solid rgba(2,6,23,.10);
      background:#fff; color:var(--text); font-weight:700; text-decoration:none; cursor:pointer;
      transition: box-shadow .15s ease, transform .04s ease, border-color .15s ease;
    }
    .btnApps.android{ background: var(--android); color:#fff; border-color: transparent }
    .btnApps.android:hover{ background: var(--android7) }
    .btnApps.android:active{ background: var(--android7) }
    .btnApps.ios{ background: var(--primary); color:#fff; border-color: transparent }
    .btnApps.ios:hover{ background: var(--primary-600) }
    .btnApps.ios:active{ background: var(--primary-700) }
    .closex{ position:absolute; inset:12px 12px auto auto; border:0; background:transparent; font-size:30px; cursor:pointer; color:var(--muted)}
    .closex:hover{ color:var(--text)}