/* =========================================================
   STC SPORT — TIENDA ONLINE
   Paleta inspirada en el logo:
   Azul marino #071D49 | Azul #0B4EA2 | Celeste #00BDEB
   Rojo #D9252A | Blanco #FFFFFF | Gris claro #F4F7FB
========================================================= */

:root{
  --stc-navy:#071D49;
  --stc-blue:#0B4EA2;
  --stc-cyan:#00BDEB;
  --stc-red:#D9252A;
  --stc-red-dark:#A91D22;
  --stc-white:#FFFFFF;
  --stc-bg:#F4F7FB;
  --stc-text:#172033;
  --stc-muted:#6B7280;
  --stc-border:#DDE5F0;
  --stc-shadow:0 12px 35px rgba(7,29,73,.10);
  --stc-radius:20px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--stc-bg);
  color:var(--stc-text);
  overflow-x:hidden;
}

a{
  text-decoration:none;
}

img{
  max-width:100%;
}

/*=============================================
IMAGEN AMPLIABLE EN LA TIENDA
=============================================*/

.product-img-wrap{

    overflow: hidden;

}

.imagenProductoTienda{

    cursor: zoom-in;

    transition:
        transform .30s ease,
        opacity .30s ease;

}

.imagenProductoTienda:hover{

    transform: scale(1.04);

    opacity: .95;

}


/*=============================================
MODAL IMAGEN PRODUCTO
=============================================*/

#modalImagenProducto{

    background: rgba(0,0,0,.92);

    z-index: 99999 !important;

}

.modal-backdrop{

    z-index: 99998 !important;

}

#modalImagenProducto .modal-dialog{

    max-width: 90vw;

    margin: 1rem auto;

}

#modalImagenProducto .modal-content{

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0;

}

#imagenProductoGrande{

    display: block;

    margin: auto;

    max-width: 100%;

    max-height: 92vh;

    object-fit: contain;

    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(0,0,0,.45);

    user-select: none;

    -webkit-user-drag: none;

}

.btnCerrarImagen{

    position: absolute;

    top: -10px;

    right: -10px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(0,0,0,.60);

    z-index: 100000;

    transition: .25s;

}

.btnCerrarImagen:hover{

    background: rgba(255,255,255,.20);

}


/*=============================================
RESPONSIVE
=============================================*/

@media(max-width:768px){

    #modalImagenProducto .modal-dialog{

        max-width: 98vw;

        margin: .5rem auto;

    }

    #imagenProductoGrande{

        max-height: 85vh;

    }

    .btnCerrarImagen{

        top: 8px;

        right: 8px;

    }

}

/* =========================
   HEADER / NAVBAR
========================== */

.navbar{
  background:rgba(255,255,255,.96);
  padding:12px 0;
  box-shadow:0 8px 30px rgba(7,29,73,.08);
  position:sticky;
  top:0;
  z-index:9999;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(7,29,73,.07);
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--stc-navy)!important;
  font-size:1.65rem;
  font-weight:800;
  letter-spacing:-.5px;
}

.navbar-brand img{
  width:62px;
  height:62px;
  object-fit:contain;
}

.navbar-brand span{
  color:var(--stc-red);
}

.nav-link{
  position:relative;
  color:var(--stc-navy)!important;
  margin-left:12px;
  font-weight:600;
  transition:.25s ease;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:3px;
  border-radius:20px;
  background:linear-gradient(90deg,var(--stc-red),var(--stc-cyan));
  transform:translateX(-50%);
  transition:.25s ease;
}

.nav-link:hover,
.nav-link.active{
  color:var(--stc-red)!important;
}

.nav-link:hover::after,
.nav-link.active::after{
  width:65%;
}

.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--stc-red);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:11px 21px;
  font-weight:700;
  transition:.25s ease;
  box-shadow:0 8px 20px rgba(217,37,42,.22);
}

.btn-whatsapp:hover{
  color:#fff;
  background:var(--stc-red-dark);
  transform:translateY(-2px);
}

/* =========================
   HERO DEPORTIVO
========================== */

.hero{
  min-height:88vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(7,29,73,.96) 0%,rgba(7,29,73,.80) 48%,rgba(7,29,73,.28) 100%),
    url('../img/hero-stc-sport.jpg');
  background-size:cover;
  background-position:center;
}

.hero::before{
  content:"";
  position:absolute;
  inset:auto -120px -170px auto;
  width:430px;
  height:430px;
  border-radius:50%;
  background:rgba(0,189,235,.18);
  filter:blur(2px);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,transparent 0 65%,rgba(217,37,42,.18) 65% 66%,transparent 66%),
    linear-gradient(120deg,transparent 0 72%,rgba(0,189,235,.18) 72% 73%,transparent 73%);
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  font-size:.9rem;
  font-weight:600;
}

.hero h1{
  max-width:760px;
  font-size:clamp(3rem,6vw,5.4rem);
  line-height:.98;
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:22px;
  text-transform:uppercase;
}

.hero h1 span{
  color:var(--stc-cyan);
  text-shadow:0 0 25px rgba(0,189,235,.25);
}

.hero p{
  max-width:640px;
  font-size:1.15rem;
  color:rgba(255,255,255,.86);
  margin-bottom:30px;
  line-height:1.75;
}

.btn-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--stc-red);
  border:2px solid var(--stc-red);
  padding:14px 28px;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  transition:.25s ease;
  margin-right:10px;
  box-shadow:0 10px 24px rgba(217,37,42,.28);
}

.btn-main:hover{
  background:var(--stc-red-dark);
  border-color:var(--stc-red-dark);
  color:#fff;
  transform:translateY(-3px);
}

.btn-outline-custom{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:2px solid rgba(255,255,255,.9);
  padding:14px 28px;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  transition:.25s ease;
}

.btn-outline-custom:hover{
  background:#fff;
  color:var(--stc-navy);
  transform:translateY(-3px);
}

/* =========================
   TITULOS DE SECCION
========================== */

.section-title{
  text-align:center;
  margin-bottom:50px;
}

.section-title .eyebrow{
  display:inline-block;
  color:var(--stc-red);
  font-size:.83rem;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:8px;
}

.section-title h2{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:850;
  color:var(--stc-navy);
  letter-spacing:-1px;
}

.section-title p{
  max-width:640px;
  margin:12px auto 0;
  color:var(--stc-muted);
  line-height:1.7;
}

/* =========================
   CATEGORIAS
========================== */

.category-card{
  position:relative;
  overflow:hidden;
  height:100%;
  padding:34px 24px;
  text-align:center;
  background:#fff;
  border:1px solid var(--stc-border);
  border-radius:var(--stc-radius);
  box-shadow:0 8px 25px rgba(7,29,73,.06);
  transition:.28s ease;
}

.category-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--stc-red),var(--stc-cyan));
}

.category-card:hover{
  transform:translateY(-9px);
  border-color:rgba(11,78,162,.20);
  box-shadow:var(--stc-shadow);
}

.category-card i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:22px;
  margin-bottom:20px;
  color:var(--stc-blue);
  background:linear-gradient(135deg,rgba(11,78,162,.10),rgba(0,189,235,.15));
  font-size:2.2rem;
  transition:.28s ease;
}

.category-card:hover i{
  color:#fff;
  background:linear-gradient(135deg,var(--stc-blue),var(--stc-cyan));
  transform:rotate(-4deg) scale(1.05);
}

.category-card h5{
  color:var(--stc-navy);
  font-weight:750;
  margin-bottom:8px;
}

.category-card p{
  color:var(--stc-muted);
  font-size:.92rem;
}

/* =========================
   PRODUCTOS / TIENDA
========================== */

.product-card{
  height:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--stc-border);
  border-radius:20px;
  box-shadow:0 8px 25px rgba(7,29,73,.06);
  transition:.28s ease;
}

.product-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--stc-shadow);
}

.product-img-wrap{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#F7F9FC,#EAF0F7);
}

.product-img{
  width:100%;
  height:280px;
  object-fit:contain;
  padding:14px;
  transition:.35s ease;
}

.product-card:hover .product-img{
  transform:scale(1.055);
}

.product-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  border-radius:999px;
  padding:7px 12px;
  background:var(--stc-red);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.4px;
}

.product-body{
  padding:20px;
}

.product-category{
  color:var(--stc-blue);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.product-title{
  color:var(--stc-navy);
  font-size:1.05rem;
  font-weight:750;
  line-height:1.4;
  margin:7px 0 9px;
}

.product-price{
  color:var(--stc-red);
  font-size:1.35rem;
  font-weight:850;
  margin-bottom:8px;
}

.product-stock{
  color:var(--stc-muted);
  font-size:.88rem;
}

.product-stock.disponible{
  color:#14804A;
  font-weight:650;
}

.product-stock.agotado{
  color:var(--stc-red);
  font-weight:650;
}

.product-qty{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.inputCantidadProducto{
  width:72px;
  min-height:44px;
  border:1px solid var(--stc-border);
  border-radius:12px;
  text-align:center;
  font-weight:700;
}

.btnAgregarCarrito{
  flex:1;
  min-height:44px;
  border:none;
  border-radius:12px;
  background:var(--stc-navy);
  color:#fff;
  font-weight:700;
  transition:.25s ease;
}

.btnAgregarCarrito:hover{
  background:var(--stc-blue);
  color:#fff;
  transform:translateY(-2px);
}

.btnAgregarCarrito:disabled{
  background:#AEB8C7;
  cursor:not-allowed;
  transform:none;
}

/* Selector de tallas */
.tallas-producto{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.talla-btn{
  min-width:44px;
  height:40px;
  padding:0 10px;
  border:1px solid var(--stc-border);
  border-radius:11px;
  background:#fff;
  color:var(--stc-navy);
  font-weight:750;
  transition:.2s ease;
}

.talla-btn:hover{
  border-color:var(--stc-blue);
  color:var(--stc-blue);
}

.talla-btn.active{
  border-color:var(--stc-red);
  background:var(--stc-red);
  color:#fff;
  box-shadow:0 6px 16px rgba(217,37,42,.22);
}

.talla-btn:disabled{
  opacity:.42;
  text-decoration:line-through;
  cursor:not-allowed;
}

/* =========================
   BUSCADOR
========================== */

.form-custom{
  min-height:52px;
  border:1px solid var(--stc-border);
  border-radius:999px;
  padding-left:22px;
  box-shadow:0 6px 20px rgba(7,29,73,.05);
}

.form-custom:focus{
  border-color:var(--stc-cyan);
  box-shadow:0 0 0 4px rgba(0,189,235,.13);
}

/* =========================
   BENEFICIOS
========================== */

.benefits{
  position:relative;
  overflow:hidden;
  margin-top:90px;
  padding:65px 40px;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(135deg,var(--stc-navy),var(--stc-blue));
  box-shadow:var(--stc-shadow);
}

.benefits::after{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(0,189,235,.15);
}

.benefit-item{
  position:relative;
  z-index:2;
  text-align:center;
}

.benefit-item i{
  font-size:2.7rem;
  color:var(--stc-cyan);
  margin-bottom:16px;
}

.benefit-item h5{
  font-weight:750;
}

.benefit-item p{
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}

/* =========================
   CARRITO / CHECKOUT
========================== */

.checkout-resumen{
  background:#fff;
  border:1px solid var(--stc-border);
  border-radius:20px;
  box-shadow:var(--stc-shadow);
}

.checkout-resumen h4,
.checkout-resumen h5{
  color:var(--stc-navy);
  font-weight:750;
}

.btn-checkout{
  width:100%;
  min-height:50px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--stc-red),var(--stc-red-dark));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(217,37,42,.22);
  transition:.25s ease;
}

.btn-checkout:hover{
  color:#fff;
  transform:translateY(-2px);
}

/* =========================
   FOOTER
========================== */

footer{
  position:relative;
  overflow:hidden;
  margin-top:100px;
  padding-top:70px;
  color:#fff;
  background:var(--stc-navy);
}

footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--stc-red),var(--stc-cyan),var(--stc-blue));
}

footer h5{
  margin-bottom:20px;
  font-weight:750;
}

footer ul{
  list-style:none;
  padding:0;
}

footer ul li{
  margin-bottom:12px;
}

footer ul li a{
  color:rgba(255,255,255,.68);
  transition:.25s ease;
}

footer ul li a:hover{
  color:var(--stc-cyan);
  padding-left:4px;
}

.footer-bottom{
  margin-top:50px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
  color:rgba(255,255,255,.62);
  font-size:.88rem;
}

.social-icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-right:8px;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.09);
  transition:.25s ease;
}

.social-icons a:hover{
  color:#fff;
  background:var(--stc-red);
  transform:translateY(-3px);
}

/* =========================
   WHATSAPP FLOAT
========================== */
.swal2-container{
  z-index:20000 !important;
}
.swal2-container.swal2-top-end{
  padding-top:90px !important;
}

.float-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  font-size:2rem;
  box-shadow:0 10px 24px rgba(0,0,0,.23);
  transition:.25s ease;
}

.float-whatsapp:hover{
  color:#fff;
  transform:translateY(-4px) scale(1.04);
}

/* =========================
   RESPONSIVE
========================== */

@media(max-width:991px){
  .navbar-brand img{
    width:50px;
    height:50px;
  }

  .hero{
    min-height:76vh;
    text-align:center;
    background-position:65% center;
  }

  .hero p{
    margin-left:auto;
    margin-right:auto;
  }

  .product-img{
    height:230px;
  }
}

@media(max-width:768px){
  .hero h1{
    font-size:3rem;
    letter-spacing:-1px;
  }

  .hero-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .btn-main,
  .btn-outline-custom{
    width:100%;
    margin:0;
  }

  .benefits{
    padding:45px 22px;
  }
}

@media(max-width:576px){
  .navbar{
    padding:8px 0;
  }

  .navbar-brand{
    font-size:1.2rem;
  }

  .navbar-brand img{
    width:44px;
    height:44px;
  }

  .hero{
    min-height:70vh;
  }

  .hero h1{
    font-size:2.45rem;
  }

  .hero p{
    font-size:.98rem;
  }

  .product-img{
    height:190px;
  }

  .product-title{
    font-size:.95rem;
  }

  .product-price{
    font-size:1.15rem;
  }

  .product-qty{
    flex-direction:column;
    align-items:stretch;
  }

  .inputCantidadProducto{
    width:100%;
  }

  .section-title{
    margin-bottom:35px;
  }
}

.navbar-toggler{
  border:1px solid var(--stc-border);
  border-radius:12px;
  padding:8px 10px;
}

.navbar-toggler:focus{
  box-shadow:0 0 0 4px rgba(0,189,235,.12);
}

.btn-carrito{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--stc-navy);
  color:#fff;
  font-size:1.2rem;
  transition:.25s ease;
  box-shadow:0 8px 18px rgba(7,29,73,.18);
}

.btn-carrito:hover{
  color:#fff;
  background:var(--stc-red);
  transform:translateY(-2px);
}

.badge-carrito{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--stc-cyan);
  color:var(--stc-navy);
  font-size:.72rem;
  font-weight:800;
  border:2px solid #fff;
}

@media(max-width:991px){

  .navbar-collapse{
    margin-top:14px;
    padding:18px;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--stc-shadow);
  }

  .nav-link{
    margin-left:0;
    padding:11px 0;
  }

  .btn-carrito{
    width:100%;
    border-radius:14px;
  }

  .badge-carrito{
    top:50%;
    right:18px;
    transform:translateY(-50%);
  }

}
/* =========================================
   IMAGEN AMPLIABLE EN TIENDA
========================================= */

.product-img-wrap{
    overflow: hidden;
}

.imagenProductoTienda{
    cursor: zoom-in;
    transition:
        transform .25s ease,
        opacity .25s ease;
}

.imagenProductoTienda:hover{
    transform: scale(1.04);
    opacity: .96;
}

/* Imagen dentro del modal */

#imagenProductoGrande{
    display: block;
    max-width: 100%;
    max-height: 85vh;
    margin: 0 auto;
    object-fit: contain;
}