html, body {
  margin: 0;
  padding: 0;
 
  background: #ffffff;
  color: #180606;
}

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

/* Párrafo de stock */
.producto p.stock {
  font-size: 0.8rem;
  color: rgb(119, 11, 11);
  font-weight: bold;
  margin: 0px;
}

.producto p.disponible {
  font-size: 0.8rem;
  color: rgb(35, 172, 17);
  font-weight: bold;
  margin: 0px;
}

/* Párrafo de precio */
.producto p.precio {
    font-size: 18px;
    color: #21010c;
    
}

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

@media (max-width: 600px) {
  .productos-container {
    flex-direction: column;
    align-items: center;
  }
}

/* Contenedor de la imagen principal */
.imagen-container {

object-fit: cover;
}

/* Imagen principal */
.imagen-container > img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporciones y recorta si es necesario */
 
  transition: opacity 2s ease;
}

/* Contenedor de la descripción */
.imagen-container .descripcion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* igual que la imagen principal */


  /* centra la imagen de descripción */
  opacity: 0;
  transition: opacity 1s ease;
  background-color: rgba(255, 255, 255, 0.3); /* opcional, un poco de fondo */
}

.descripcion{
  opacity:0;
  transition:opacity .3s ease;
}

/* Imagen dentro de la descripción */
.imagen-container .descripcion img {

  overflow: hidden; /* recorta cualquier parte que sobresalga */
}

.producto .detalle {
  font-size: 12px;       /* tamaño de letra */
  color: #555;           /* color del texto */
  margin-top: 0px;       /* espacio superior */
  line-height: 1.4;      /* altura de línea */
  
}
.producto h2 {
  cursor: pointer;       /* Muestra que se puede clicar */
  z-index: 10;   
  /* Nombre del producto */

  font-size: 20px;
  margin: 1px;
  font-family: 'Lancelot';
  color: #000000;
 
        /* Asegura que quede por encima de imágenes */
}

/* Contenedor de productos */
.productos-container {
  overflow: visible; /* Permite que las tarjetas se muevan sin quedar cortadas */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  
  
}

/* Producto individual */
.producto {
  flex: 0 0 auto;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
  position: relative; /* Muy importante para que la tarjeta se posicione dentro */

}



.producto img {
  width: 100%;
  height: 100%;
 
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
  margin: 0;
  
}


/* Contenedor para alinear precio y botón */
.producto-footer {
  display: flex;
  justify-content: center; /* centra ambos elementos */
  align-items: center;     /* alinea verticalmente */
  gap: 2px;               /* espacio entre precio y botón */
  margin-top: 5px;
 
  
}


.agregar-btn,
.ver-detalle-btn {
  cursor: pointer;
  text-decoration: none; /* quita subrayado del enlace */
  transition: 0.3s;
}

/* Botón Agregar */
.agregar-btn {
    background-color: #ffffff;
    color: #ffffff;
    border: none;
    /* text-shadow: 2px 2px 4px rgba(253, 0, 0, 0.726); */
    font-size: 18.1px;
}

/* Botón Ver detalle */
.ver-detalle-btn {
  background-color: #ffffff;
  color: #000;
   border: none;
  text-shadow: 2px 2px 4px rgb(0, 0, 0); /* sombra solo al texto */
}


.producto .qty-badge {
  position: absolute;
  top: 10px;
  right: 10px;
 z-index: 20;
}



/* ===============================
   BARRA DESPLEGABLE CATEGORÍAS
   =============================== */
.categorias-barra {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fffaf7;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.btn-categorias {
  border: none;
  background: #fff;
  color: #333;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.panel-categorias {
  display: none;
  position: absolute;
  left: 12px;
  top: 52px;
  width: 230px;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

.panel-categorias.abierto {
  display: block;
}

.panel-categorias-titulo {
  font-weight: 800;
  margin-bottom: 8px;
  color: #333;
}

.panel-categorias a {
  display: block;
  padding: 9px 10px;
  color: #333;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
}

.panel-categorias a:hover,
.panel-categorias a.activa {
  background: #fff0f5;
  color: #e91e63;
  font-weight: 700;
}

@media (max-width: 768px) {
  .categorias-barra {
    padding: 8px 10px;
  }

  .panel-categorias {
    left: 10px;
    right: 10px;
    width: auto;
  }
}

.productos-aleatorios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 10px;
    opacity: 0;
  transition: opacity 0.3s ease;
}

.productos-aleatorios.visible {
  opacity: 1;
}

/* 🔥 aparición suave */
.producto {

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.producto.mostrar {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 900px) {
  .productos-aleatorios {
    grid-template-columns: repeat(5, 1fr); /* 👈 ahora 5 */
  }
}


.productos-aleatorios .producto {
  width: 100%;
  min-width: 0;
  background: #fffaf77e;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.productos-aleatorios .imagen-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}



/* =================================
   🌙 DARK MODE
   CATEGORÍAS + PRODUCTOS
================================= */

/* BARRA */

.dark .categorias-barra{

background:
rgba(24,18,18,0.95);

border-bottom:
1px solid rgba(255,255,255,0.05);

backdrop-filter:blur(12px);
}

/* BOTÓN */

.dark .btn-categorias{

background:
linear-gradient(
135deg,
rgba(44,30,30,0.96),
rgba(32,24,24,0.96)
);

color:#f6eaea;

box-shadow:
0 6px 18px rgba(0,0,0,0.28);

border:
1px solid rgba(255,255,255,0.05);
}

.dark .btn-categorias:hover{

background:
linear-gradient(
135deg,
rgba(58,40,40,0.98),
rgba(40,28,28,0.98)
);
}

/* PANEL */

.dark .panel-categorias{

background:
linear-gradient(
180deg,
rgba(30,22,22,0.98),
rgba(22,18,18,0.98)
);

border:
1px solid rgba(255,255,255,0.05);

box-shadow:
0 18px 40px rgba(0,0,0,0.42);
}

/* TITULO */

.dark .panel-categorias-titulo{

color:#ffe3ee;
}

/* LINKS */

.dark .panel-categorias a{

color:#e6d6d6;

transition:
background .25s ease,
color .25s ease,
transform .2s ease;
}

.dark .panel-categorias a:hover,
.dark .panel-categorias a.activa{

background:
rgba(255,182,217,0.12);

color:#ffcae2;

font-weight:700;

transform:translateX(2px);
}

/* GRID */

.dark .productos-aleatorios{

background:transparent;
}

/* PRODUCTO */

.dark .productos-aleatorios .producto{

width:100%;
min-width:0;

background:
linear-gradient(
145deg,
rgba(34,24,24,0.94),
rgba(24,18,18,0.94)
);

box-sizing:border-box;

display:flex;
flex-direction:column;

border:
1px solid rgba(255,255,255,0.05);

box-shadow:
0 10px 28px rgba(0,0,0,0.32);

transition:
transform .25s ease,
box-shadow .25s ease,
border .25s ease;
}

/* HOVER */

.dark .productos-aleatorios .producto:hover{

transform:translateY(-3px);

box-shadow:
0 18px 38px rgba(0,0,0,0.42);

border:
1px solid rgba(255,182,217,0.08);
}

/* IMAGEN */

.dark .productos-aleatorios .imagen-container{

background:#181212;
}

.dark .productos-aleatorios .imagen-container img{

filter:
brightness(.94)
contrast(1.03);
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 10px;
}

@media (min-width: 900px) {
  .productos-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
}

.producto-grande {

  justify-content: space-between;
  padding: 4px;
}

.producto-grande .imagen-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 4px;
}

.producto-grande .imagen-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.producto-grande .info-producto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 2px 2px 2px;
}

.producto-grande .nombre-producto {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: #4a3b34;
  text-align: left;
}

.producto.producto-grande p.precio {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  color: #7a5c4f;
  font-weight: 600;
  white-space: nowrap;
}

/* Ajuste extra para celular */
@media (max-width: 600px) {
  .productos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .producto-grande .nombre-producto {
    font-size: 14px;
  }

  .producto.producto-grande p.precio {
    font-size: 14px;
  }

  .producto-grande .carrito-esquina {
    width: 42px;
    height: 42px;
    bottom: 6px;
    right: 6px;
  }
}

.producto-grande .agregar-btn {
    border: none;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 5px;
    border-radius: 3px;
    background: #ffffff70;
}

.producto-grande .carrito-esquina {
    position: absolute;
    bottom: 3px;
    right: 10px;
    width: 55px;
    height: 55px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}


@media (max-width: 600px) {
  .producto-grande .carrito-esquina {
    width: 44px;
    height: 44px;
    bottom: 6px;
    right: 6px;
  }

  .producto-grande .icono-carrito {
    width: 28px;
    height: 28px;
  }
}


.icono-no-stock {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.heart-like-chip,
.heart-like-chip *{

  color:#0e0c0c  !important;
}

.imagen-container{
  position:relative;
}

.mto-chip{
  position:absolute;
  top:8px;
  right:8px;

  z-index:20;

  background:#ff4fa39c;
  color:#fff;

  font-size:11px;
  font-weight:700;

  padding:5px 10px;

  border-radius:999px;

  box-shadow:
    0 4px 10px rgba(0,0,0,.15);

  white-space:nowrap;

  pointer-events:none;

  backdrop-filter:blur(4px);
}

.digital-chip{
   position:absolute;
  top:8px;
  right:8px;

  z-index:20;

  background:#a14fff9c;
  color:#fff;

  font-size:11px;
  font-weight:700;

  padding:5px 10px;

  border-radius:999px;

  box-shadow:
    0 4px 10px rgba(0,0,0,.15);

  white-space:nowrap;

  pointer-events:none;

  backdrop-filter:blur(4px);
}

/* =========================
   BOTÓN COMO COMPRAR
========================= */

.btn-como-comprar{

  border:none;

  background:#fff;

  color:#2b2b2b;

  padding:10px 16px;

  border-radius:999px;

  cursor:pointer;

  font-weight:700;

  box-shadow:
    0 4px 14px rgba(0,0,0,.08);

  transition:.2s;
}

.btn-como-comprar:hover{

  transform:translateY(-1px);

  background:#fff5f8;
}

/* =========================
   MODAL
========================= */

.modal-comprar{

  position:fixed;

  inset:0;

  display:none;

  justify-content:center;

  align-items:flex-start;

  padding:110px 20px 40px;

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

  backdrop-filter:blur(6px);

  z-index:999;

  overflow-y:auto;
}

.modal-comprar.active{
  display:flex;
}

/* =========================
   BOX
========================= */

.modal-comprar-box{

  width:100%;

  max-width:620px;

  background:#ffffff;

  border-radius:28px;

  padding:34px;

  position:relative;

  box-shadow:
    0 25px 70px rgba(0,0,0,.18);

  animation:modalIn .18s ease;
}

/* =========================
   TITULO
========================= */

.modal-comprar-box h2{

  margin:0 0 30px;

  font-size:42px;

  line-height:1;

  color:#5f204e;

  font-family:'Antonio', sans-serif;
}

/* =========================
   BOTÓN CERRAR
========================= */

.cerrar-modal{

  position:absolute;

  top:16px;
  right:16px;

  width:38px;
  height:38px;

  border:none;

  border-radius:50%;

  background:#fff3f7;

  color:#7a4764;

  cursor:pointer;

  font-size:18px;

  transition:.2s;
}

.cerrar-modal:hover{

  background:#f8dce8;

  transform:rotate(90deg);
}

/* =========================
   PASOS
========================= */

.pasos-compra{

  display:flex;

  flex-direction:column;

  gap:22px;
}

.paso{

  display:flex;

  gap:16px;

  align-items:flex-start;
}

.paso span{

  width:34px;
  height:34px;

  border-radius:50%;

  background:#f4a8c7;

  color:white;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:700;

  flex-shrink:0;
}

.paso p{

  margin:4px 0 0;

  line-height:1.5;

  color:#3f2c33;

  font-size:16px;
}

/* =========================
   ANIMACIÓN
========================= */

@keyframes modalIn{

  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:600px){

  .modal-comprar{

    padding:90px 14px 30px;
  }

  .modal-comprar-box{

    padding:26px 22px;
  }

  .modal-comprar-box h2{

    font-size:34px;
  }

  .paso p{

    font-size:15px;
  }
}