/* ============================================================
   Amazon Productos ES — Frontend CSS v2.0
   Layout: 5 col desktop → 4 → 3 → 2 → 1 (móvil)
   Fuente: Outfit (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
.ape-wrap {
  --ape-orange:     #FF9900;
  --ape-orange-dk:  #e07b00;
  --ape-orange-lt:  #fff3e0;
  --ape-navy:       #232f3e;
  --ape-blue:       #146eb4;
  --ape-text:       #111827;
  --ape-muted:      #6b7280;
  --ape-border:     #e5e7eb;
  --ape-bg:         #ffffff;
  --ape-card-bg:    #ffffff;
  --ape-img-bg:     #f3f6f9;
  --ape-star:       #FF9900;
  --ape-star-empty: #d1d5db;
  --ape-radius:     14px;
  --ape-radius-sm:  8px;
  --ape-shadow:     0 2px 12px rgba(0,0,0,.07);
  --ape-shadow-hov: 0 8px 32px rgba(0,0,0,.14);
  --ape-font:       'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ape-ease:       cubic-bezier(.4,0,.2,1);
  --ape-cols:       5;          /* columnas por defecto */
  --ape-gap:        14px;

  font-family: var(--ape-font);
  color:        var(--ape-text);
  margin:       28px 0;
  box-sizing:   border-box;
}
.ape-wrap *, .ape-wrap *::before, .ape-wrap *::after { box-sizing: inherit; }

/* ── Header ─────────────────────────────────────────────── */
.ape-head {
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ape-border);
}
.ape-head-icon {
  width:         46px;
  height:        46px;
  flex-shrink:   0;
  background:    linear-gradient(135deg, var(--ape-orange), var(--ape-orange-dk));
  border-radius: 12px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     22px;
  box-shadow:    0 4px 10px rgba(255,153,0,.35);
}
.ape-head-title {
  margin:      0 0 2px !important;
  padding:     0 !important;
  font-size:   1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color:       var(--ape-text) !important;
  border:      none !important;
}
.ape-head-title em { color: var(--ape-orange); font-style: normal; }
.ape-head-sub {
  margin:    0 !important;
  font-size: .78rem;
  color:     var(--ape-muted);
}

/* ── Grid — 5 columnas ───────────────────────────────────
   Usamos CSS Grid con auto-fill para adaptarse
   a cualquier contenedor sin media-queries hardcoded.
   El mínimo de columna es 160px; el máximo 1fr.
   Esto da:
     ≥ 850px  → 5 columnas (min 160px × 5 + gaps)
     640–849  → 4 columnas
     480–639  → 3 columnas
     320–479  → 2 columnas
     < 320    → 1 columna
   ─────────────────────────────────────────────────────── */
.ape-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--ape-gap);
}

/* Forzar exactamente 5 si el contenedor es suficientemente ancho */
@media (min-width: 900px) {
  .ape-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .ape-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) and (max-width: 639px) {
  .ape-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 320px) and (max-width: 479px) {
  .ape-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 319px) {
  .ape-grid { grid-template-columns: 1fr; }
}

/* ── Tarjeta ─────────────────────────────────────────────── */
.ape-card {
  background:    var(--ape-card-bg);
  border:        1px solid var(--ape-border);
  border-radius: var(--ape-radius);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  position:      relative;
  box-shadow:    var(--ape-shadow);
  transition:    transform .25s var(--ape-ease),
                 box-shadow .25s var(--ape-ease),
                 border-color .25s var(--ape-ease);

  /* Animación de entrada escalonada */
  animation:     ape-rise .45s var(--ape-ease) both;
}
.ape-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--ape-shadow-hov);
  border-color: var(--ape-orange);
}

/* Acento superior en hover */
.ape-card::before {
  content:    '';
  position:   absolute;
  inset:      0 0 auto 0;
  height:     3px;
  background: linear-gradient(90deg, var(--ape-orange), var(--ape-orange-dk));
  opacity:    0;
  transition: opacity .25s;
  border-radius: var(--ape-radius) var(--ape-radius) 0 0;
}
.ape-card:hover::before { opacity: 1; }

/* Carta nº1 dorada siempre */
.ape-card-1 { border-color: rgba(255,180,0,.45); }
.ape-card-1::before { opacity: 1; }

/* Delays de entrada */
.ape-card-1  { animation-delay: .04s; }
.ape-card-2  { animation-delay: .08s; }
.ape-card-3  { animation-delay: .12s; }
.ape-card-4  { animation-delay: .16s; }
.ape-card-5  { animation-delay: .20s; }
.ape-card-6  { animation-delay: .24s; }
.ape-card-7  { animation-delay: .28s; }
.ape-card-8  { animation-delay: .32s; }
.ape-card-9  { animation-delay: .36s; }
.ape-card-10 { animation-delay: .40s; }

@keyframes ape-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge ────────────────────────────────────────────────── */
.ape-badge {
  position:      absolute;
  top:           8px;
  left:          8px;
  z-index:       5;
  background:    linear-gradient(135deg, var(--ape-orange), var(--ape-orange-dk));
  color:         #fff;
  font-size:     .62rem;
  font-weight:   700;
  line-height:   1;
  padding:       4px 8px;
  border-radius: 20px;
  white-space:   nowrap;
  box-shadow:    0 2px 6px rgba(255,153,0,.45);
  pointer-events: none;
}
.ape-demo-tag {
  position:      absolute;
  top:           8px;
  right:         8px;
  z-index:       5;
  background:    rgba(0,0,0,.55);
  color:         #fff;
  font-size:     .6rem;
  font-weight:   600;
  padding:       2px 7px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ── Imagen ───────────────────────────────────────────────── */
.ape-img-link { display: block; text-decoration: none !important; }

.ape-img-wrap {
  position:        relative;
  background:      var(--ape-img-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Ratio 4:5 para imagen de producto Amazon (_SR360,460) */
  aspect-ratio:    4 / 5;
  overflow:        hidden;
  padding:         12px;
}

.ape-img {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  transition: transform .35s var(--ape-ease);
  /* Sombra suave tipo producto */
  filter:     drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.ape-card:hover .ape-img {
  transform: scale(1.07);
}

.ape-img-ph {
  color:       #ccc;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       100%;
  height:      100%;
}

/* Prime badge */
.ape-prime {
  position:   absolute;
  bottom:     6px;
  right:      6px;
  background: rgba(255,255,255,.92);
  border-radius: 5px;
  padding:    2px 5px;
  line-height: 1;
  backdrop-filter: blur(4px);
}

/* ── Info ─────────────────────────────────────────────────── */
.ape-info {
  padding: 10px 10px 12px;
  display:  flex;
  flex-direction: column;
  gap:      7px;
  flex:     1;
}

/* Título — máximo 60 chars ya aplicados en PHP */
.ape-title {
  margin:      0 !important;
  padding:     0 !important;
  font-size:   .8rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color:       var(--ape-text) !important;
  border:      none !important;
}
.ape-title a {
  color:           inherit !important;
  text-decoration: none !important;
  transition:      color .2s;
  /* Sin clamp: el truncado lo hace PHP a 60 chars */
}
.ape-title a:hover { color: var(--ape-blue) !important; }

/* ── Rating — estrellas + score (sin nº reseñas) ────────── */
.ape-rating {
  display:     flex;
  align-items: center;
  gap:         5px;
}
.ape-stars {
  display:     flex;
  align-items: center;
  gap:         1px;
  color:       var(--ape-star);
}
.ape-star-empty { color: var(--ape-star-empty); }
.ape-score {
  font-size:   .75rem;
  font-weight: 700;
  color:       #92400e;
  background:  var(--ape-orange-lt);
  padding:     1px 6px;
  border-radius: 4px;
  line-height: 1.6;
}

/* ── Tags SEO ─────────────────────────────────────────────── */
.ape-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}
.ape-tag {
  font-size:     .62rem;
  font-weight:   500;
  color:         var(--ape-blue);
  background:    #eff6ff;
  border:        1px solid #bfdbfe;
  padding:       2px 7px;
  border-radius: 20px;
  white-space:   nowrap;
  max-width:     90px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ── Precio ───────────────────────────────────────────────── */
.ape-price {
  margin-top: auto;
  padding-top: 2px;
}
.ape-price-amt {
  font-size:   1rem;
  font-weight: 800;
  color:       #b91c1c;
  letter-spacing: -.3px;
}

/* ── Botón ────────────────────────────────────────────────── */
.ape-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             5px !important;
  padding:         9px 10px !important;
  background:      linear-gradient(135deg, var(--ape-orange), var(--ape-orange-dk)) !important;
  color:           #fff !important;
  text-decoration: none !important;
  border-radius:   var(--ape-radius-sm) !important;
  font-size:       .75rem !important;
  font-weight:     700 !important;
  font-family:     var(--ape-font) !important;
  letter-spacing:  .02em !important;
  border:          none !important;
  cursor:          pointer !important;
  box-shadow:      0 2px 6px rgba(255,153,0,.35) !important;
  transition:      background .2s, transform .2s, box-shadow .2s !important;
  overflow:        hidden !important;
  position:        relative !important;
  white-space:     nowrap !important;
}
.ape-btn::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:  translateX(-100%);
  transition: transform .5s;
}
.ape-btn:hover::before { transform: translateX(100%); }
.ape-btn:hover {
  background:  linear-gradient(135deg, var(--ape-orange-dk), #b86200) !important;
  transform:   translateY(-1px) !important;
  box-shadow:  0 5px 14px rgba(255,153,0,.48) !important;
  color:       #fff !important;
}
.ape-btn-arr { transition: transform .2s; flex-shrink: 0; }
.ape-btn:hover .ape-btn-arr { transform: translateX(3px); }
.ape-btn-ico { flex-shrink: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.ape-foot {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             6px;
  margin-top:      18px;
  padding:         12px 14px;
  background:      #f9fafb;
  border:          1px solid var(--ape-border);
  border-radius:   var(--ape-radius-sm);
}
.ape-foot-disc {
  font-size:  .72rem;
  color:      var(--ape-muted);
  line-height: 1.4;
  max-width:  75%;
}
.ape-foot-date {
  font-size:  .7rem;
  color:      #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Error ────────────────────────────────────────────────── */
.ape-error {
  padding:       14px 18px;
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: var(--ape-radius-sm);
  color:         #dc2626;
  font-size:     .9rem;
  font-family:   var(--ape-font);
}

/* ═══════════════════════════════════════════════════════════
   TEMA OSCURO
   ═══════════════════════════════════════════════════════════ */
.ape-theme-dark {
  --ape-text:     #f0f4f8;
  --ape-muted:    #94a3b8;
  --ape-border:   #374151;
  --ape-bg:       #111827;
  --ape-card-bg:  #1f2937;
  --ape-img-bg:   #111827;
  --ape-star-empty: #4b5563;
  --ape-orange-lt:  rgba(255,153,0,.15);
}
.ape-theme-dark .ape-tag {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
}
.ape-theme-dark .ape-foot  { background: #111827; border-color: #374151; }
.ape-theme-dark .ape-title a:hover { color: var(--ape-orange) !important; }

/* ═══════════════════════════════════════════════════════════
   TEMA MINIMAL
   ═══════════════════════════════════════════════════════════ */
.ape-theme-minimal .ape-card {
  border-radius: 4px;
  box-shadow:    none;
  border-color:  #e5e7eb;
}
.ape-theme-minimal .ape-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.ape-theme-minimal .ape-btn,
.ape-theme-minimal .ape-card { border-radius: 4px !important; }
.ape-theme-minimal .ape-head-icon { display: none; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE EXTRA — ajustes finos por tamaño
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .ape-head-title { font-size: 1.05rem !important; }
  .ape-badge      { font-size: .58rem; }
}
@media (max-width: 639px) {
  .ape-foot { flex-direction: column; }
  .ape-foot-disc { max-width: 100%; }
  .ape-head-icon { width: 38px; height: 38px; font-size: 18px; }
}
@media (max-width: 479px) {
  .ape-wrap { --ape-gap: 10px; }
  .ape-img-wrap { padding: 8px; }
  .ape-info { padding: 8px 8px 10px; gap: 5px; }
  .ape-title { font-size: .75rem !important; }
  .ape-price-amt { font-size: .9rem; }
  .ape-btn { font-size: .7rem !important; padding: 8px 8px !important; }
}