/* ============================================================
   Estilo Dukerpi — estilos complementarios a Tailwind
   Tailwind cubre casi todo. Aquí solo animaciones y detalles.
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #121212; color: #fff; }

/* ---- Reveal on scroll (suave, estilo Dawn "slide-in") ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ---- Tarjeta de producto: zoom suave + segunda imagen al hover ---- */
.card-img { transition: transform .7s ease, opacity .5s ease; }
.group:hover .card-img { transform: scale(1.04); }
.card-img-alt { opacity: 0; }
.group:hover .card-img-alt { opacity: 1; }

/* ---- Link con subrayado (nav) ---- */
.link-u { position: relative; padding-bottom: 2px; }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .3s ease;
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Header al hacer scroll ---- */
.header-scrolled { box-shadow: 0 4px 16px -8px rgba(0,0,0,.12); }

/* ---- Logo JPG: quitar fondo blanco sobre fondos claros ---- */
.logo-img { mix-blend-mode: multiply; }

/* ---- Scrollbar oculta (chips de filtros) ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- <details> sin marcador nativo ---- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Favorito activo ---- */
.fav-btn.is-fav { color: #dc2626; border-color: #dc2626; }

/* ============================================================
   Radio de las imágenes
   ------------------------------------------------------------
   Todas las fotos del sitio (tarjetas, categorías, ficha, carrito)
   usan .img-box. Para cambiar el redondeo de TODO el sitio basta
   con tocar --radius-img aquí: 0 = esquinas rectas, 1.5rem = muy
   redondeado. El overflow recorta la foto al radio.
   ============================================================ */
:root { --radius-img: 1.5rem; }

.img-box {
  border-radius: var(--radius-img);
  overflow: hidden;
}

/* Refuerzo: la propia foto también redondea. Así el radio se ve aunque el
   recorte del contenedor falle (pasa con algunos transform en Safari). */
.img-box > img,
.img-box > a > img { border-radius: inherit; }

/* ============================================================
   Barras de scroll discretas
   ------------------------------------------------------------
   Por defecto el navegador pinta una barra gris muy marcada que
   ensucia el sidebar y los carruseles. Se deja fina y casi
   invisible hasta que el cursor pasa por encima.
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 18, 18, .10) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(18, 18, 18, .10);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(18, 18, 18, .22); }

/* ============================================================
   Campos de formulario
   ------------------------------------------------------------
   El sitio público carga Tailwind SIN el plugin de formularios, y su
   Preflight deja todos los elementos con border-width: 0. Las clases
   tipo "border-line" solo definen el COLOR, así que los campos se
   veían sin borde. Aquí va el estilo base de todos los formularios
   del sitio (carrito, mis datos, contacto).
   ============================================================ */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="search"], input[type="password"], input[type="date"],
input:not([type]), textarea, select {
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0.55rem 0.85rem;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea { min-height: 5rem; }

input::placeholder, textarea::placeholder { color: rgba(18, 18, 18, .35); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #121212;
  box-shadow: 0 0 0 1px #121212;
}

/* Las casillas y radios conservan su tamaño propio */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border-radius: 0.25rem;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23121212' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  padding-right: 2.2rem;
}