/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES — piezas reutilizables del front
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un `display:` de clase gana al atributo hidden del navegador, y entonces el
   JS oculta cosas que se siguen viendo (pasó con el pie del carrito y con el
   botón «Ver más»). Con esto, lo que lleve hidden no se ve, sin excepciones.
   Va en componentes.css porque lo cargan tanto el front como el panel. */
[hidden] { display: none !important; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  --boton-fondo: var(--marca);
  --boton-texto: #fff;
  --boton-borde: var(--marca);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: .85rem 1.75rem;
  min-height: 46px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  border: 1px solid var(--boton-borde);
  border-radius: var(--radio-full);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-rapida) var(--curva),
    border-color var(--dur-rapida) var(--curva),
    color var(--dur-rapida) var(--curva),
    transform var(--dur-rapida) var(--curva),
    box-shadow var(--dur) var(--curva);
}
.boton:hover {
  --boton-fondo: var(--marca-700);
  --boton-borde: var(--marca-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sombra-marca);
}
.boton:active { transform: translateY(0); }
.boton[disabled],
.boton.esta-desactivado {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.boton--fantasma {
  --boton-fondo: transparent;
  --boton-texto: var(--marca);
  --boton-borde: var(--borde-fuerte);
}
.boton--fantasma:hover {
  --boton-fondo: var(--marca-050);
  --boton-texto: var(--marca-oscuro);
  --boton-borde: var(--marca-300);
  box-shadow: none;
}

.boton--tinta {
  --boton-fondo: var(--tinta);
  --boton-borde: var(--tinta);
}
.boton--tinta:hover { --boton-fondo: #3B2C31; --boton-borde: #3B2C31; box-shadow: var(--sombra-md); }

.boton--claro {
  --boton-fondo: #fff;
  --boton-texto: var(--tinta);
  --boton-borde: #fff;
}
.boton--claro:hover { --boton-fondo: var(--marca-050); --boton-texto: var(--marca-oscuro); --boton-borde: var(--marca-050); }

.boton--contorno-claro {
  --boton-fondo: transparent;
  --boton-texto: #fff;
  --boton-borde: rgba(255,255,255,.45);
}
.boton--contorno-claro:hover {
  --boton-fondo: rgba(255,255,255,.12);
  --boton-borde: #fff;
  --boton-texto: #fff;
  box-shadow: none;
}

.boton--whatsapp { --boton-fondo: var(--whatsapp); --boton-borde: var(--whatsapp); --boton-texto: #04301A; }
.boton--whatsapp:hover { --boton-fondo: #1EB756; --boton-borde: #1EB756; --boton-texto: #04301A; box-shadow: 0 10px 30px rgba(37,211,102,.28); }

.boton--pequeno { padding: .55rem 1.1rem; min-height: 38px; font-size: var(--t-sm); }
.boton--grande  { padding: 1.05rem 2.4rem; min-height: 54px; font-size: var(--t-md); }
.boton--bloque  { display: flex; width: 100%; }

.boton svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Enlace con flecha que se desplaza al pasar por encima */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: var(--peso-semi);
  font-size: var(--t-base);
  color: var(--marca);
}
.enlace-flecha::after {
  content: "→";
  transition: transform var(--dur) var(--curva);
}
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ── Distintivos ─────────────────────────────────────────────────────────── */
.distintivo {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .75em;
  border-radius: var(--radio-full);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--fondo-alt);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.distintivo--nuevo    { background: var(--marca-100); color: var(--marca-700); }
.distintivo--oferta   { background: var(--marca); color: #fff; }
.distintivo--vendido  { background: var(--acento-100); color: var(--acento-700); }
.distintivo--agotado  { background: #EFEBEC; color: var(--tinta-tenue); }
.distintivo--exito    { background: var(--exito-fondo); color: var(--exito); }
.distintivo--error    { background: var(--error-fondo); color: var(--error); }
.distintivo--aviso    { background: var(--aviso-fondo); color: var(--aviso); }
.distintivo--info     { background: var(--info-fondo); color: var(--info); }

/* ── Tarjeta de producto ─────────────────────────────────────────────────── */
.tarjeta-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  transition:
    transform var(--dur) var(--curva),
    box-shadow var(--dur) var(--curva),
    border-color var(--dur) var(--curva);
}
.tarjeta-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--marca-200);
}

.tarjeta-producto__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fondo-alt);
}
.tarjeta-producto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--curva);
}
.tarjeta-producto:hover .tarjeta-producto__media img { transform: scale(1.045); }

/* Segunda foto que aparece al pasar el ratón */
.tarjeta-producto__media .es-secundaria {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--curva);
}
.tarjeta-producto:hover .es-secundaria { opacity: 1; }

.tarjeta-producto__marcas {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  z-index: 2;
}

.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e-4);
  gap: var(--e-2);
}
.tarjeta-producto__categoria {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.tarjeta-producto__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  line-height: 1.4;
  margin: 0;
}
.tarjeta-producto__titulo a { color: var(--tinta); }
.tarjeta-producto__titulo a:hover { color: var(--marca); }

.tarjeta-producto__precios {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: var(--e-2);
}
.precio {
  font-size: var(--t-lg);
  font-weight: var(--peso-semi);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.precio--anterior {
  font-size: var(--t-base);
  color: var(--tinta-tenue);
  text-decoration: line-through;
  font-weight: var(--peso-normal);
}
.precio--rebajado { color: var(--marca); }

.tarjeta-producto__pie { padding: 0 var(--e-4) var(--e-4); }

/* Muestras de color en la tarjeta */
.muestras { display: flex; gap: .3rem; align-items: center; }
.muestra {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  box-shadow: inset 0 0 0 2px #fff;
}
.muestras__mas { font-size: var(--t-xs); color: var(--tinta-tenue); }

/* ── Tarjeta de categoría ────────────────────────────────────────────────── */
.tarjeta-categoria {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radio-md);
  background: var(--fondo-alt);
  aspect-ratio: 4 / 3;
  color: #fff;
}
.tarjeta-categoria img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--curva);
}
.tarjeta-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36,26,29,.78) 0%, rgba(36,26,29,.25) 45%, rgba(36,26,29,0) 75%);
  transition: opacity var(--dur) var(--curva);
}
.tarjeta-categoria:hover img { transform: scale(1.05); }
.tarjeta-categoria__texto {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--e-5);
}
.tarjeta-categoria__texto h3 {
  color: #fff;
  font-size: var(--t-xl);
  margin: 0 0 var(--e-1);
}
.tarjeta-categoria__texto span {
  font-size: var(--t-sm);
  color: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.tarjeta-categoria__texto span::after {
  content: "→";
  transition: transform var(--dur) var(--curva);
}
.tarjeta-categoria:hover .tarjeta-categoria__texto span::after { transform: translateX(4px); }

/* Formato alto para la primera de la rejilla */
.tarjeta-categoria--alta { aspect-ratio: 4 / 5; }

/* ── Tarjeta de artículo ─────────────────────────────────────────────────── */
.tarjeta-post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.tarjeta-post:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.tarjeta-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fondo-alt); }
.tarjeta-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--curva); }
.tarjeta-post:hover .tarjeta-post__media img { transform: scale(1.045); }
.tarjeta-post__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.tarjeta-post__fecha { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-tenue); }
.tarjeta-post__titulo { font-size: var(--t-xl); margin: 0; }
.tarjeta-post__titulo a { color: var(--tinta); }
.tarjeta-post__titulo a:hover { color: var(--marca); }
.tarjeta-post__extracto { color: var(--tinta-suave); font-size: var(--t-base); margin: 0; }
.tarjeta-post__pie { margin-top: auto; padding-top: var(--e-3); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo { margin-bottom: var(--e-4); }
.campo__etiqueta {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  margin-bottom: var(--e-2);
  color: var(--tinta);
}
.campo__etiqueta .opcional { font-weight: var(--peso-normal); color: var(--tinta-tenue); }

.campo__control,
input[type="text"].campo__control,
input[type="tel"].campo__control,
input[type="email"].campo__control,
input[type="number"].campo__control,
input[type="password"].campo__control,
input[type="search"].campo__control,
input[type="date"].campo__control,
input[type="url"].campo__control,
select.campo__control,
textarea.campo__control {
  width: 100%;
  padding: .78rem 1rem;
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: 1.4;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
  -webkit-appearance: none;
  appearance: none;
}
.campo__control:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-100);
}
.campo__control::placeholder { color: var(--tinta-tenue); }
textarea.campo__control { min-height: 7rem; resize: vertical; line-height: 1.6; }

select.campo__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E6266' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.campo--error .campo__control { border-color: var(--error); }
.campo--error .campo__control:focus { box-shadow: 0 0 0 3px var(--error-fondo); }
.campo__error {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--error);
  font-weight: var(--peso-medio);
}
.campo__pista { display: block; margin-top: var(--e-2); font-size: var(--t-sm); color: var(--tinta-suave); }

.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); }
@media (max-width: 560px) { .campo-doble { grid-template-columns: 1fr; } }

/* Casillas y opciones */
.casilla { display: flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; font-size: var(--t-base); }
.casilla input[type="checkbox"],
.casilla input[type="radio"] {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--marca);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Selector de cantidad ────────────────────────────────────────────────── */
.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-full);
  overflow: hidden;
  background: #fff;
}
.cantidad__boton {
  width: 42px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.cantidad__boton:hover:not([disabled]) { background: var(--marca-050); color: var(--marca); }
.cantidad__boton[disabled] { opacity: .35; cursor: not-allowed; }
.cantidad__valor {
  width: 46px;
  height: 44px;
  border: 0;
  border-inline: 1px solid var(--borde);
  text-align: center;
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: transparent;
  -moz-appearance: textfield;
}
.cantidad__valor::-webkit-outer-spin-button,
.cantidad__valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  border: 1px solid;
  font-size: var(--t-base);
  margin-bottom: var(--e-4);
}
.aviso p:last-child { margin-bottom: 0; }
.aviso--exito { background: var(--exito-fondo); border-color: #BEE3CE; color: #14563A; }
.aviso--error { background: var(--error-fondo); border-color: #F3C9C5; color: #7A1A14; }
.aviso--aviso { background: var(--aviso-fondo); border-color: #EBDCBC; color: #6B4E12; }
.aviso--info  { background: var(--info-fondo);  border-color: #C4DDE8; color: #17475C; }
.aviso__icono { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }

/* Mensajes flotantes (alta del carrito, errores de red) */
.notificaciones {
  position: fixed;
  bottom: var(--e-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.notificacion {
  pointer-events: auto;
  background: var(--tinta);
  color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-full);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-lg);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.notificacion.visible { opacity: 1; transform: translateY(0); }
.notificacion--exito { background: var(--exito); }
.notificacion--error { background: var(--error); }

/* ── Migas de pan ────────────────────────────────────────────────────────── */
.migas {
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  padding-block: var(--e-4);
}
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.migas li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.migas li + li::before { content: "/"; color: var(--borde-fuerte); }
.migas a { color: var(--tinta-suave); }
.migas a:hover { color: var(--marca); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: var(--peso-medio); }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.paginacion { display: flex; justify-content: center; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-8); }
.paginacion a, .paginacion span {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  font-size: var(--t-base);
  color: var(--tinta-suave);
  background: #fff;
  transition: all var(--dur-rapida) var(--curva);
}
.paginacion a:hover { border-color: var(--marca); color: var(--marca); }
.paginacion .actual { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: var(--peso-semi); }
.paginacion .puntos { border: 0; background: transparent; }

/* ── Acordeón (FAQ) ──────────────────────────────────────────────────────── */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon__item { border-bottom: 1px solid var(--borde); }
.acordeon__boton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  font-weight: var(--peso-semi);
  color: var(--tinta);
  cursor: pointer;
  transition: color var(--dur-rapida) var(--curva);
}
.acordeon__boton:hover { color: var(--marca); }
.acordeon__icono {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: .35rem;
  position: relative;
}
.acordeon__icono::before,
.acordeon__icono::after {
  content: "";
  position: absolute;
  background: var(--marca);
  transition: transform var(--dur) var(--curva), opacity var(--dur) var(--curva);
}
.acordeon__icono::before { inset: 50% 0 auto 0; height: 1.5px; transform: translateY(-50%); }
.acordeon__icono::after  { inset: 0 50% 0 auto; width: 1.5px; transform: translateX(50%); }
.acordeon__boton[aria-expanded="true"] .acordeon__icono::after { transform: translateX(50%) scaleY(0); opacity: 0; }
.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--curva);
}
.acordeon__panel[data-abierto="1"] { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p { padding-bottom: var(--e-5); color: var(--tinta-suave); margin: 0; }
.acordeon__panel p + p { padding-top: 0; margin-top: calc(var(--e-3) * -1); }

/* Sin JS el panel queda siempre abierto para no ocultar contenido */
html:not(.js) .acordeon__panel { grid-template-rows: 1fr; }

/* ── Valoración con estrellas ────────────────────────────────────────────── */
.estrellas { display: inline-flex; gap: 2px; color: var(--acento); }
.estrellas svg { width: 15px; height: 15px; }

/* ── Chips de filtro ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: .42rem .9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-full);
  background: #fff;
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: all var(--dur-rapida) var(--curva);
}
.chip:hover { border-color: var(--marca-300); color: var(--marca); }
.chip--activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.chip--activo:hover { background: var(--marca-700); color: #fff; }
.chip__quitar { font-size: 1.05em; line-height: 1; opacity: .8; }

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.vacio {
  text-align: center;
  padding: var(--e-9) var(--e-4);
  max-width: 32rem;
  margin-inline: auto;
}
.vacio__icono { width: 56px; height: 56px; margin: 0 auto var(--e-4); color: var(--marca-300); }
.vacio h3 { margin-bottom: var(--e-2); }
.vacio p { color: var(--tinta-suave); margin-bottom: var(--e-5); }