/* =========================================================
   TIENDA.CSS (completo) — ADAPTADO A:
   - TARJETAS 50/50 (2 columnas)
   - CARRUSEL CUADRADO DENTRO DE CADA TARJETA (1 por producto)
   - Al cargar más productos, se agregan más tarjetas automáticamente
   - Ads siempre en línea (desktop y mobile)
   ========================================================= */

/* =========================
   RESET / BASE
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; }
body{
  background-color: rgba(107, 103, 98, 0.333);
  font-family: "Montserrat", Arial, sans-serif;
}

/* =========================
   HEADER / NAV (igual index)
   ========================= */
.header{ width:100%; }

nav{
  width: 100%;
  background-color: rgb(240, 236, 236);
  border-style: solid;
  color: rgb(0, 5, 10);
}

.menu{
  display:flex;
  width:100%;
}

/* Logo / Logo2 */
.logo, .logo2{
  display:flex;
  justify-content:center;
  align-items:center;
  width:25%;
  max-width:25%;
  overflow:hidden;
}

.logo img, .logo2 img{
  max-height:100px;
  max-width:100%;
  width:auto;
  height:auto;
  border-radius:15%;
  animation:pulse 1s infinite;
}

@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}

/* Redes */
.redes-sociales{
  width:20%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.redes-sociales img{
  width:36px;
  height:36px;
}

/* =========================
   TÍTULOS POR IMAGEN (BANNERS)
   ========================= */
.hero-title{
  font-family:"Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* Cartel principal tienda */
.banner-titulo{
  width:100%;
  height:auto;
  display:block;
  background:#fff;
  border-style: solid;
}

/* Cartel de sección */
.tienda-banner-seccion{
  width:100%;
  padding:10px 20px 0;
}
.banner-seccion{
  width:100%;
  height:auto;
  display:block;
  background:#fff;
  border-style: solid;
}

/* =========================
   BOTONES (igual index)
   ========================= */
.caja-categoria{
  display:flex;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:0 20px;
}

.categoria{
  width:25%;
  padding:10px;
  text-align:center;
  display:flex;
  border-style: solid;
  color:#000;
}
.categoria a{ width:100%; display:block; }

.categoria img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  transition:transform .2s ease;
}
.categoria img:hover{ transform:scale(1.06); }

/* =========================
   MAIN
   ========================= */
main{ width:100%; }

/* =========================
   ADS (3 bloques) - siempre en línea
   ========================= */
.ads{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
}

.ad{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}

.ad img{
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  border-radius:10px;
}

/* Mobile: se mantiene en línea */
@media (max-width: 600px){
  .ads{
    flex-direction:row;
    gap:10px;
    padding:10px;
  }
}

/* =========================================================
   NUEVO LAYOUT: GRID DE TARJETAS 50/50
   ========================================================= */

/* Contenedor: 2 columnas */
.tienda-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50/50 */
  gap:14px;
  padding:12px 20px 0;
}

/* Tarjeta */
.tienda-card{
  border-style: solid;
  background:#fff;
  color:#131313;
  overflow:hidden;
  min-width:0; /* ✅ CLAVE: evita que en mobile se “rompa” el 50/50 */
}
.tienda-card-link{ display:block; }

.tienda-card-inner{
  padding:12px;
}

.tienda-card-title{
  margin:0 0 10px;
  font-weight:700;
  font-size:15px;
  line-height:1.2;

  /* ✅ evita que un título largo fuerce ancho y te “mate” las 2 columnas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Precio debajo del carrusel */
.tienda-card-price{
  margin-top:10px;
  font-weight:700;
  font-size:15px;
  color:#000;
}

.tienda-empty{
  padding: 6px 2px;
  font-size: 14px;
}

/* =========================================================
   CARRUSEL POR PRODUCTO (CUADRADO) — .pcar*
   ========================================================= */
.pcar{ width:100%; position:relative; }

.pcar-viewport {
  width: 100%;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
  border-style: solid;
  background: #ffffff; /* Aseguramos blanco de fondo */
}

.pcar-track{
  display:flex;
  height:100%;
  transition: transform .35s ease;
  will-change: transform;
}

.pcar-slide{
  flex: 0 0 100%;
  height:100%;
}

.pcar-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  /* El fondo blanco de seguridad por si el PNG falla */
  background-color: #ffffff !important; 
}
/* Flechas */
.pcar-btn{
  width:40px;
  height:40px;
  border-style: solid;
  background: rgb(240,236,236);
  cursor:pointer;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  opacity:.95;
}
.pcar-btn:hover{ opacity:1; }

.pcar-btn.prev{ left:6px; }
.pcar-btn.next{ right:6px; }

/* Dots */
.pcar-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}
.pcar-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border-style: solid;
  background: rgb(240,236,236);
  cursor:pointer;
}
.pcar-dot.active{
  background:#dfb26f;
}

/* =========================================================
   FOOTER (igual vibe)
   ========================================================= */
footer{
  width:100%;
  text-align:center;
  padding:18px 0 22px;
  margin-top:18px;
  background: rgb(240,236,236);
  border-style: solid;
  color:#000;
}

footer .iconos{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:10px;
}

footer .iconos img{
  width:30px;
  height:30px;
  border-radius:10px;
}

/* =========================================================
   RESPONSIVE: mantener 2 columnas (50/50) en pantalla chica
   ========================================================= */
@media (max-width: 900px){
  .tienda-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* sigue 50/50 */
    padding:12px 10px 0;
    gap:10px;
  }
}

/* =========================================================
   MOBILE FINO (unificado — sin duplicados)
   ========================================================= */
@media (max-width: 560px){
  /* Botones */
  .caja-categoria{ padding:0 10px; gap:10px; }
  .categoria{ width:33%; padding:8px; }

  /* Banners */
  .tienda-banner-seccion{ padding:10px 10px 0; }

  /* Tarjeta */
  .tienda-card-inner{ padding:10px; }
  .tienda-card-title{ font-size:13px; }
  .tienda-card-price{ font-size:13px; }

  /* Flechas */
  .pcar-btn{ width:34px; height:34px; }
}
/* =========================================================
   OVERRIDE FINAL: SIEMPRE 2 COLUMNAS EN MOBILE
   (por si algún style inline te está pisando)
   ========================================================= */
@media (max-width: 900px){
  .tienda-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* =====================================================
   BOTONES FLOTANTES: WHATSAPP + INSTALAR
   INICIO
   ===================================================== */
.fab{
  position: fixed;
  right: 14px;
  z-index: 9999;
  border-style: solid;
  background: rgb(240,236,236);
  color:#000;
  border-radius: 999px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
}

.fab .fab-icon{ font-size: 18px; line-height: 1; }
.fab .fab-text{ font-weight: 700; font-size: 13px; }

.fab-wa{ bottom: 18px; }
.fab-install{ bottom: 66px; } /* queda arriba del WhatsApp */

.fab:hover{ transform: translateY(-1px); }

.fab-ios-tip{
  position: fixed;
  right: 14px;
  bottom: 66px;  /* mismo lugar del botón instalar */
  z-index: 9999;
  border-style: solid;
  background: rgb(240,236,236);
  color:#000;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  max-width: 240px;
}

/* Mobile: un poco más compacto */
@media (max-width: 560px){
  .fab{ right: 10px; padding: 9px 10px; }
  .fab .fab-text{ font-size: 12px; }
}
/* =====================================================
   BOTONES FLOTANTES: WHATSAPP + INSTALAR
   FIN
   ===================================================== */