/* MIXED CSS PACK */
/* Template: pcsdeportes.com.ar     /index.html */
/* Template mtime: 2026-01-27 18:27:56 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
:root{
      --sky:#4aa3df;         /* celeste */
      --sky-2:#e7f4ff;       /* celeste suave */
      --ink:#0d1b2a;         /* texto oscuro */
      --muted:#5b6b7b;
      --card:#ffffff;
      --border: rgba(13,27,42,.10);
      --radius: 18px;
      --shadow: 0 18px 40px rgba(13,27,42,.10);
    }

    html{ scroll-behavior:smooth; }
    body{
      color: var(--ink);
      background:
        radial-gradient(900px 380px at 20% -10%, rgba(74,163,223,.18), transparent 55%),
        radial-gradient(900px 380px at 85% 0%, rgba(74,163,223,.14), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f7fbff 100%);
    }

    /* helpers */
    .eyebrow{
      display:inline-flex;align-items:center;gap:.5rem;
      font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color: var(--sky);
      background: rgba(74,163,223,.10);
      padding:.35rem .6rem;border-radius:999px;
      font-size:.78rem;
    }
    .section{ padding: 80px 0; }
    .section-title{ font-weight: 800; letter-spacing:-.02em; }
    .section-subtitle{ color: var(--muted); max-width: 860px; margin: 0 auto; }

    .soft-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .icon-pill{
      width:46px;height:46px;border-radius:14px;
      display:inline-flex;align-items:center;justify-content:center;
      background: rgba(74,163,223,.12);
      color: var(--sky);
      font-size: 1.2rem;
      flex: 0 0 auto;
    }

    /* navbar */
    .navbar{
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(13,27,42,.08);
    }
    .brand-mark{
      width:38px;height:38px;border-radius:12px;
      background: linear-gradient(135deg, rgba(74,163,223,.95), rgba(74,163,223,.35));
      box-shadow: 0 10px 22px rgba(74,163,223,.25);
    }
    .nav-link{ color: var(--ink); font-weight: 600; }
    .nav-link:hover{ color: var(--sky); }
    .btn-sky{
      background: var(--sky);
      border-color: var(--sky);
      color: #fff;
      font-weight: 700;
      border-radius: 999px;
      padding: .65rem 1rem;
    }
    .btn-sky:hover{ filter: brightness(.96); color:#fff; }
    .btn-ghost{
      border: 1px solid rgba(13,27,42,.14);
      border-radius: 999px;
      font-weight: 700;
      padding: .65rem 1rem;
      background: #fff;
      color: var(--ink);
    }
    .btn-ghost:hover{ border-color: rgba(74,163,223,.55); color: var(--sky); }

    /* hero */
    .hero{
      padding: 110px 0 70px;
      position: relative;
    }
    .hero h1{ font-weight: 900; letter-spacing:-.03em; }
    .hero p{ color: var(--muted); }
    .hero-badges{
      display:flex;flex-wrap:wrap;gap:.5rem;margin-top: 14px;
    }
    .hero-badge{
      display:inline-flex;align-items:center;gap:.45rem;
      padding:.45rem .7rem;border-radius:999px;
      border: 1px solid rgba(13,27,42,.10);
      background: rgba(255,255,255,.85);
      color: var(--ink);
      font-weight: 600;
      font-size:.92rem;
    }
    .hero-media{
      border-radius: 24px;
      overflow:hidden;
      border: 1px solid rgba(13,27,42,.10);
      box-shadow: var(--shadow);
      background: #fff;
      min-height: 360px;
      display:flex;align-items:center;justify-content:center;
      padding: 10px;
    }
    .hero-media img{
      width: 100%;
      height: 100%;
      max-height: 520px;
      object-fit: contain;
      object-position: center;
      display:block;
    }

    /* records/results blocks */
    .data-shell{
      background: #fff;
      border: 1px dashed rgba(13,27,42,.18);
      border-radius: var(--radius);
      padding: 18px;
      color: var(--muted);
    }
    .kpi{
      border: 1px solid rgba(13,27,42,.10);
      border-radius: 16px;
      background: #fff;
      padding: 16px;
      height: 100%;
    }
    .kpi .kpi-title{ font-weight: 800; margin: 0; }
    .kpi .kpi-sub{ color: var(--muted); margin: 0; }

    /* services */
    .service-item{
      display:flex;gap:14px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(13,27,42,.10);
      background:#fff;
      height: 100%;
    }
    .service-item h3{ font-size: 1.05rem; margin: 0; font-weight: 800; }
    .service-item p{ margin: 6px 0 0; color: var(--muted); }

    /* faqs */
    .accordion-button{ font-weight: 800; }
    .accordion-button:not(.collapsed){
      color: var(--ink);
      background: rgba(74,163,223,.10);
      box-shadow:none;
    }
    .accordion-item{
      border: 1px solid rgba(13,27,42,.10) !important;
      border-radius: 16px !important;
      overflow:hidden;
      background: #fff;
    }
    .accordion .accordion-item + .accordion-item{ margin-top: 12px; }

    /* contact */
    .form-control, .form-select{
      border-radius: 14px;
      border: 1px solid rgba(13,27,42,.14);
      padding: .85rem .9rem;
    }
    .form-control:focus, .form-select:focus{
      border-color: rgba(74,163,223,.65);
      box-shadow: 0 0 0 .2rem rgba(74,163,223,.18);
    }

    /* footer */
    footer{
      padding: 44px 0;
      background: #0b2236;
      color: rgba(255,255,255,.86);
    }
    footer a{ color: rgba(255,255,255,.86); text-decoration: none; }
    footer a:hover{ color: #ffffff; }
    .footer-title{ font-weight: 900; color:#fff; }
    .footer-muted{ color: rgba(255,255,255,.68); }

    @media (max-width: 991.98px){
      .hero{ padding: 92px 0 56px; }
      .hero-media{ min-height: 300px; }
    }

/* ===== INLINE <style> BLOCK #2 ===== */
.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
  .gal-frame{
    height: clamp(220px, 48vh, 440px);
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;padding:8px
  }
  .gal-img{
    width:auto !important;max-width:100%;
    height:auto !important;max-height:100%;
    object-fit:contain !important;object-position:center;display:block;cursor:zoom-in
  }
  /* Controles circulares con más contraste */
  .gal-gallery .carousel-control-prev,
  .gal-gallery .carousel-control-next{
    z-index:20;width:50px;height:50px;top:50%;transform:translateY(-50%);
    opacity:1;background:rgba(0,0,0,.55);border-radius:50%;margin:0 12px
  }
  .gal-gallery .carousel-control-prev{left:0}
  .gal-gallery .carousel-control-next{right:0}
  .gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
  /* Indicadores: se sitúan fuera; agregamos espacio inferior para que no se corten */
  .gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
  .gal-gallery .carousel-indicators button{
    width:10px;height:10px;border-radius:50%;
    background:rgba(0,0,0,.5);border:none
  }
  .gal-gallery .carousel-indicators button.active{background:#000}
  .gal-gallery{padding-bottom:56px} /* espacio para indicadores */

  /* Modal */
  #galLightbox .modal-content{background:#000}
  #galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
  .gal-lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    border:0;width:44px;height:44px;border-radius:999px;
    background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:44px;text-align:center;z-index:5;cursor:pointer
  }
  .gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
  .gal-lightbox-nav.gal-prev{left:10px}
  .gal-lightbox-nav.gal-next{right:10px}

  /* Pequeños ajustes móviles */
  @media (max-width: 575.98px){
    .gal-frame{height: clamp(200px, 40vh, 360px)}
  }

