/* ============================================================
   BASE / VARIABLES
   ============================================================ */
:root {
  --fondo-opacidad: 0.25;
}

/* ============================================================
   FONDO ESTÁTICO A PANTALLA COMPLETA
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('fondo.jpg');
  background-size: cover;
  background-position: center center;
  opacity: var(--fondo-opacidad);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   TIPOGRAFÍA GLOBAL Y COLORES BASE
   ============================================================ */
body {
  font-family: 'Georgia', serif;
  background-color: #fdfaf5;
  color: #333;
  margin: 0;
  padding: 0;
}

/* ============================================================
   CONTENEDOR GENERAL
   ============================================================ */
.contenedor {
  max-width: 1000px;
  margin: auto;
  padding: 30px 20px;
}

/* ============================================================
   ENCABEZADO PRINCIPAL
   ============================================================ */
.encabezado {
  text-align: center;
  margin-bottom: 50px;
}
.encabezado h1 {
  font-size: 42px;
  margin: 0;
  color: #8b0000;
  font-family: 'Fjalla One', regular;
}
.subtitulo {
  font-size: 18px;
  color: #666;
  margin-top: 8px;
}

/* ============================================================
   CATEGORÍAS (BLOQUES H2)
   ============================================================ */
.categoria {
  margin-bottom: 50px;
}
.categoria h2 {
  font-family: 'Oswald';
  font-size: 35px;
  color: #b22222;
  border-bottom: 2px dashed #ccc;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

/* ============================================================
   SUBCATEGORÍAS (ETIQUETAS) H3
   ============================================================ */
.subcategoria {
  font-family: 'Sansation', regular;
  font-size: 25px;
  color: #a52a2a;
  margin: 25px 0 10px;
  border-left: 6px solid #2e4d00; /* ← corregido (antes faltaba el estilo/anchura) */
  padding-left: 10px;
}

/* ============================================================
   TARJETA DE PRODUCTO (.item)
   ============================================================ */
.item {
  display: grid;
  grid-template-columns: auto 1fr auto; /* imagen | texto | precio/presentaciones */
  gap: 20px;
  align-items: start;
  margin-bottom: 30px;
  padding: 20px 25px;
  border-radius: 15px;
  background: rgba(255 255 255 / 0.85);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  border: 1px solid #eee;
}

/* ============================================================
   IMAGEN DEL PRODUCTO (CÍRCULO con CROSSFADE)
   ============================================================ */
.imagen-producto-container {
  grid-column: 1 / 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 8px rgb(0 0 0 / 0.15);
  position: relative;            /* apilar imágenes dentro */
}

/* Apilar todas las imágenes y animar opacidad */
.imagen-producto-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s ease;  /* efecto fade */
  display: block;
  will-change: opacity;
}
.imagen-producto-container img.active { opacity: 1; }

/* En PROMOS se omite el círculo (la imagen va de fondo del slide) */
.promo-item .imagen-producto-container { display: none !important; }

/* ============================================================
   TEXTO DEL PRODUCTO (TÍTULO + DESCRIPCIÓN)
   ============================================================ */
.item > .texto-producto {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.item > .texto-producto > h3 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  color: #8b0000;
  line-height: 1.2;
}

/* Descripción general */
.descripcion-general {
  font-style: italic;
  color: #555;
  font-size: 16px;
  margin: 5px 0 0 0;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
  max-width: 80ch;
}

/* ============================================================
   PRECIO Y PRESENTACIONES
   ============================================================ */
.valor-general {
  grid-column: 3 / 4;
  font-weight: bold;
  font-size: 18px;
  color: #404040;
  white-space: nowrap;
  align-self: start;
  margin-bottom: 10px;
  text-align: right;
}
.presentaciones {
  grid-column: 3 / 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 15px;
}
.presentacion {
  display: flex;
  align-items: center;
  border-left: 3px solid #8b0000;
  padding-left: 10px;
  gap: 8px;
}
.presentacion-descripcion {
  font-weight: 600;
  font-size: 15px;
  color: #444;
}
.presentacion-valor {
  font-weight: bold;
  font-size: 16px;
  color: #222;
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE (MÓVIL)
   ============================================================ */
@media (max-width: 700px) {
  .item {
    grid-template-columns: 1fr 100px;  /* texto | imagen */
    grid-template-rows: auto auto auto;/* texto, precio, presentaciones */
    gap: 10px;
    padding: 15px 20px;
    align-items: start;
  }

  /* Imagen fija a la derecha ocupando las 3 filas */
  .imagen-producto-container {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    justify-self: end;
    align-self: center;
    width: 100px;
    height: 100px;
  }

  /* Texto arriba a la izquierda */
  .item > .texto-producto {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* Precio debajo del texto, a la izquierda */
  .valor-general {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: left;
  }

  /* Presentaciones debajo del precio, a la izquierda */
  .presentaciones {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    justify-content: flex-start;
    gap: 10px;
  }
  .presentacion {
    border-left: 3px solid #8b0000;
    padding-left: 10px;
    gap: 8px;
  }
}

/* ============================================================
   SIN IMAGEN (libera la columna)
   ============================================================ */
.imagen-producto-container:empty { display: none; }