/* archivo: css/secciones.css */
/* ================== secciones.css ================== */
/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Encabezado con flecha y buscador */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
}

.back-icon {
  font-size: 20px;
  color: #333;
  text-decoration: none;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-box input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  font-size: 14px;
}

.search-box button {
  background: #333;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 50%;
  cursor: pointer;
}

/* Accesibilidad de foco (teclado) */
.back-icon:focus-visible,
.search-box button:focus-visible,
.filtros a:focus-visible,
.producto a:focus-visible {
  outline: 2px solid #0077cc;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Barra de navegación con scroll */
.filtros {
  background: #fafafa;
  border-bottom: 1px solid #ddd;
  overflow-x: auto;
  white-space: nowrap;
}

.filtros-scroll {
  display: inline-flex;
  gap: 15px;
  padding: 10px;
}

.filtros-scroll a, 
.filtros-scroll span {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}

.filtros-scroll a:hover {
  color: #0077cc;
}

/* Sección productos */
.productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* móvil: 2 columnas */
  gap: 15px;
  padding: 15px;
}

.producto {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  font-size: 14px; /* Letra más pequeña */
  display: flex;            /* para alinear precio al fondo */
  flex-direction: column;
}

/* Hover solo en dispositivos con puntero */
@media (hover: hover) {
  .producto:hover { transform: translateY(-5px); }
}
/* Equivalente para teclado */
.producto:focus-within { transform: translateY(-3px); }

.producto img {
  width: 100%;
  max-width: 160px;
  border-radius: 8px;
  object-fit: contain;
  /* Estabilidad visual: reservar espacio mientras carga */
  aspect-ratio: 3 / 4;
  height: auto;
  background: #f6f6f6; /* fallback para que no “salte” */
}

/* Etiqueta superior */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0077cc;
  color: #fff;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
}

/* Marca pequeña en negritas debajo de la imagen */
.producto .marca{
  display:block;
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
  margin: 6px 0 0;
}

/* Nombre del perfume con altura fija para alinear precios */
h3.nombre {
  margin: 6px 0 4px;
  font-size: 14px;
  color: #333;

  /* Clampeo a dos líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Altura mínima común para TODAS las cards */
  min-height: 36px; /* ~2 líneas con line-height ~18px */
  line-height: 18px;
}

.precio {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-top: auto;  /* empuja el precio hacia abajo */
}

.descuento {
  color: red;
  font-size: 12px;
  margin-left: 4px;
}

.precio-original {
  text-decoration: line-through;
  color: #777;
  font-size: 12px;
}

/* Botón flotante (si llegas a usarlo) */
.add {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #0077cc;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.add:hover { background: #005fa3; }

/* ====== Desktop/tablet/laptop: 4 columnas siempre ====== */
@media (min-width: 768px){
  .productos{
    grid-template-columns: repeat(4, 1fr); /* tablet/desktop/laptop: 4 columnas */
    max-width: 1200px;
    margin: 0 auto;
  }
  .producto{
    padding: 12px;
    min-height: 320px;   /* uniformidad de tarjetas */
  }
  .producto img{
    max-width: 150px;
    height: auto; /* mantenemos aspect-ratio */
    margin: 8px auto 6px;
  }
}

/* (Eliminamos reglas previas de 3 y 5 columnas para cumplir 2 → 4 fijo) */

/* Preferencias de movimiento reducidas */
@media (prefers-reduced-motion: reduce) {
  .producto,
  .add {
    transition: none !important;
  }
}
/* archivo: /css/secciones.css */
/* Inserta al final del archivo o junto a tus reglas de .header/.tag */

/* Evitar que el tag toque la flecha en vistas de detalle (refuerza posiciones) */
.detalle .galeria { position: relative; }
.galeria .tags-overlay { position:absolute; left:10px; bottom:10px; display:flex; gap:6px; flex-wrap:wrap; }

/* Mostrar el estado en la esquina superior derecha de la imagen */
.galeria .availability {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

/* (ya lo tienes) etiquetas del borde inferior de la imagen */
.galeria .tags-overlay{
  position:absolute; 
  left:10px; 
  bottom:10px; 
  display:flex; 
  gap:8px; 
  flex-wrap:nowrap;
}