/* Tema La Casa del Espía (frontend only)
   - No tocar lógica ni scripts
   - Override suave sobre estilos.css + Bootstrap
*/

:root{
  --pg-acento:#f59e0b;      /* naranja del logo */
  --pg-oscuro:#0b0b0c;
  --pg-gris:#6b7280;

  /* Reusa variables existentes del sitio (si están) */
  --oro: var(--pg-acento);
  --negro: var(--pg-oscuro);
  --negro2:#141416;
}

/* Topbar */
.topbar{
  background: var(--pg-oscuro);
  color: #e5e7eb;
}
.topbar a{ color:#e5e7eb; }
.topbar a:hover{ color: var(--pg-acento); }
.top-social{color:#444;text-decoration:none;width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;}
.top-social:hover i{ color: var(--pg-acento); }

/* Header principal */
.header-main{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand-logo{
  max-height:76px;
  width:auto;
}

/* Layout nuevo (acciones arriba, buscador abajo) */
.pg-header-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.pg-header-search{
  margin-top:.9rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.pg-search-form{
  display:flex;
  gap:.5rem;
  align-items:stretch;
}
.pg-search-form .form-control{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  padding:.65rem 1rem;
}
.pg-search-form .form-control:focus{
  border-color: var(--pg-acento);
  box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .18);
}
.pg-search-form .btn{
  border-radius:999px;
  padding:.65rem 1rem;
}

/* Botones */
.btn-warning{
  background: var(--pg-acento);
  border-color: var(--pg-acento);
  color:#111;
}
.btn-warning:hover{ filter: brightness(.95); }

.btn-outline-dark{
  border-color: rgba(0,0,0,.25);
}
.btn-outline-dark:hover{
  background: var(--pg-oscuro);
  border-color: var(--pg-oscuro);
  color:#fff;
}

/* Favoritos / Carrito (icon buttons) */
.btn-cart{
  background: #0f1115;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
}
.btn-cart:hover{
  background: #161a22;
  color:#fff;
}
.btn-cart .badge{
  background: var(--pg-acento) !important;
  color:#111 !important;
}

/* Navbar */
.nav-main{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-main .nav-link{
  color:#111;
  font-weight:600;
}
.nav-main .nav-link:hover,
.nav-main .nav-link:focus{
  color: var(--pg-acento);
}
.nav-main .dropdown-menu{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Cards y secciones */
.card-soft{
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.titulo-seccion{
  font-weight:800;
  letter-spacing:.2px;
}
.precio{
  color: var(--pg-acento);
  font-weight:800;
}

/* Ajuste banners / carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .brand-logo{ max-height:48px; }
  .pg-header-actions{ justify-content:space-between; width:100%; }
}

/* Ajuste SOLO altura del banner carousel (pisar inline height:295px) */
#carouselBanners .carousel-inner img{
  height: 470px !important;   /* ← ajustá este número si querés más/menos */
  object-fit: cover !important;
}

/* Responsive */
@media (max-width: 992px){
  #carouselBanners .carousel-inner img{ height: 390px !important; }
}
@media (max-width: 576px){
  #carouselBanners .carousel-inner img{ height:300px !important; }
}
/* Carrusel de producto: flechas NOTORIAS (solo flecha con borde, sin círculo) */
#carouselProd .carousel-control-prev-icon,
#carouselProd .carousel-control-next-icon{
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;

  width: 3rem;
  height: 3rem;
  background-size: 2.2rem 2.2rem;
}

/* Flecha izquierda con borde (stroke) */
#carouselProd .carousel-control-prev-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 5 8l5.5 5.5' fill='none' stroke='rgba(0,0,0,0.85)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Flecha derecha con borde (stroke) */
#carouselProd .carousel-control-next-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='rgba(0,0,0,0.85)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;



}
/* --- Compra anticipada / Sin stock ticket --- */

/* --- Compra anticipada: cinta diagonal SIN STOCK (solo frontend) --- */
.pg-thumb-wrap{position:relative;display:block;overflow:hidden;}
.pg-stock-ribbon{
  position:absolute;
  top:14px;
  left:-69px;
  width:250px;
  padding:8px 0;
  background:#d10000;
  color:#fff;
  font-weight:800;
  font-size:18px;
  text-align:center;
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(-35deg);
  box-shadow:0 10px 18px rgba(0,0,0,.22);
  z-index:9;
  pointer-events:none;
}
.pg-stock-ribbon small{
  display:block;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  text-transform:none;
  opacity:.95;
}

.pg-thumb-wrap2{position:relative;display:block;overflow:hidden;}
.pg-stock-ribbon2{
  position:absolute;
  top:14px;
  left:-52px;
  width:200px;
  padding:8px 0;
  background:#d10000;
  color:#fff;
  font-weight:800;
  font-size:12px;
  text-align:center;
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(-35deg);
  box-shadow:0 10px 18px rgba(0,0,0,.22);
  z-index:9;
  pointer-events:none;
}
.pg-stock-ribbon2 small{
  display:block;
  font-weight:700;
  font-size:10px;
  letter-spacing:.2px;
  text-transform:none;
  opacity:.95;
}

.pg-thumb-wrap-ind{ 
  position:relative !important;
  overflow:visible !important;
}

.pg-stock-ribbon-ind{
  position:absolute;
  top:18px;          /* un poco más abajo para que se lea */
  left:-70px;        /* más afuera para que cruce bien */
  width:260px;       /* más ancha (más visible) */
  padding:12px 0;    /* más alta */
  background:#d10000;
  color:#fff;
  font-weight:900;
  font-size:14px;    /* más grande */
  text-align:center;
  letter-spacing:.8px;
  text-transform:uppercase;
  transform:rotate(-35deg);
  box-shadow:0 12px 22px rgba(0,0,0,.28);
  z-index:9999;      /* por encima de todo */
  pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.pg-stock-ribbon-ind small{
  display:block;
  font-weight:800;
  font-size:11px;
  letter-spacing:.3px;
  text-transform:none;
  opacity:.98;
}


/* --- CINTA SIN STOCK (solo overlay, NO cambia tamaños) --- */
.destacados-grid .producto-card .img-wrap{ position: relative; }

.pg-stock-ribbon-ind{
  position:absolute;
  top:18px;
  left:-50px;          /* menos negativo para que NO se recorte con overflow:hidden */
  width:220px;
  padding:10px 0;
  background:#d10000;
  color:#fff;
  font-weight:900;
  font-size:12px;
  text-align:center;
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(-35deg);
  box-shadow:0 10px 18px rgba(0,0,0,.22);
  z-index:9;
  pointer-events:none;
  line-height:1.1;
}
.pg-stock-ribbon-ind small{
  display:block;
  font-weight:800;
  font-size:10px;
  letter-spacing:.2px;
  text-transform:none;
  opacity:.95;
}