/* Fichas de producto de Amazon. SIN COMENTARIOS A PROPOSITO: el plugin Debloat
   minifica e inserta este CSS en la pagina y se come reglas enteras cuando hay
   comentarios dentro. La version documentada esta en ficha.css.comentado, que
   NO se sirve. Editar alli y regenerar, o editar aqui y documentar alli. */
.hwpf-wrap { margin: 1.75rem 0; }

.hwpf-card {
  --hwpf-radio: 16px;
  --hwpf-boton-bg: #f5a623;      
  --hwpf-boton-texto: #1a1a1a;
  display: flex;
  gap: .9rem;
  padding: .8rem;
  border: 1px solid rgba(128,128,128,.28);
  border-radius: var(--hwpf-radio);
  background: rgba(128,128,128,.06);
  align-items: center;
  position: relative;   
}
@supports (background: color-mix(in srgb, currentColor 6%, transparent)) {
  .hwpf-card {
    background: color-mix(in srgb, currentColor 6%, transparent);
    border-color: color-mix(in srgb, currentColor 22%, transparent);
  }
}

.hwpf-media { flex: 0 0 clamp(120px, 32%, 210px); }
.hwpf-media-enlace { display: block; }
.hwpf-img {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--hwpf-radio) - 6px);
  background: #fff;              
  object-fit: contain; max-height: 240px;
}

.hwpf-body { flex: 1 1 auto; min-width: 0; }

.hwpf-titulo { margin: 0 0 .1rem; font-size: 1.06rem; line-height: 1.3; text-wrap: balance; }
.hwpf-titulo a { color: inherit; text-decoration: none; }
.hwpf-titulo a:hover, .hwpf-titulo a:focus-visible { text-decoration: underline; }

.hwpf-precio {

  margin: 0 0 .25rem; line-height: 1.05;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.hwpf-precio-antes { text-decoration: line-through; opacity: .55; font-size: .95rem; }
.hwpf-precio-ahora { font-size: 1.35rem; font-weight: 700; }

.hwpf-boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.35rem; border-radius: 999px;
  background: var(--hwpf-boton-bg); color: var(--hwpf-boton-texto) !important;
  font-weight: 700; font-size: .95rem; text-decoration: none !important;
  transition: filter .15s ease, transform .15s ease;
}
.hwpf-boton:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hwpf-boton:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 560px) {
  .hwpf-card { flex-direction: column; align-items: stretch; }
  .hwpf-media { flex: 0 0 auto; max-width: 240px; margin: 0 auto; }
  .hwpf-boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hwpf-boton { transition: none; }
  .hwpf-boton:hover { transform: none; }
}

.hwpf-tienda {
  position: absolute;
  right: .8rem;
  bottom: .6rem;
  display: block;
  width: 62px;
  line-height: 0;
  color: inherit;
  text-decoration: none !important;
  opacity: .82;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.hwpf-tienda-img { display: block; width: 100%; height: auto; }

.hwpf-tienda-oscuro { display: none; }
.s-dark .hwpf-tienda-claro,
.site-s-dark .hwpf-tienda-claro { display: none; }
.s-dark .hwpf-tienda-oscuro,
.site-s-dark .hwpf-tienda-oscuro { display: block; }

.hwpf-tienda:hover,
.hwpf-tienda:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(255,153,0,.55));
}
.hwpf-tienda:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

@media (max-width: 560px) {
  .hwpf-tienda { position: static; margin: .6rem 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hwpf-tienda { transition: none; }
  .hwpf-tienda:hover { transform: none; }
}