/* ============================================================
   components.css — Botones, formularios, fichas de producto 3D,
   chips, insignias, acordeones, pestañas, testimonios.
   ============================================================ */

/* ============================================================
   Botones
   ============================================================ */
.btn {
  --btn-bg: var(--c-tinta);
  --btn-fg: var(--c-lino);
  --btn-bd: var(--c-tinta);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .92em 1.9em;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-medio) var(--e-suave),
              border-color var(--d-medio) var(--e-suave),
              transform var(--d-rapido) var(--e-suave),
              box-shadow var(--d-medio) var(--e-suave);
}
/* Relleno que sube desde abajo — gesto de "llenado de tinta" */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--g-laton);
  background-size: 220% 100%;
  transform: translateY(101%);
  transition: transform var(--d-medio) var(--e-salida);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: #fff; border-color: transparent; box-shadow: var(--sh-laton); }
.btn:active { transform: scale(.975); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--fantasma { --btn-bg: transparent; --btn-fg: var(--c-tinta); --btn-bd: var(--c-borde-fuerte); }
.btn--fantasma:hover { color: #fff; }

.btn--claro { --btn-bg: var(--c-lino); --btn-fg: var(--c-tinta); --btn-bd: var(--c-lino); }

.btn--laton { --btn-bg: transparent; --btn-fg: var(--c-lino); --btn-bd: rgba(231,201,154,.6); }

.btn--solido-laton {
  --btn-fg: #fff; --btn-bd: transparent;
  background: var(--g-laton);
  background-size: 200% 100%;
}
.btn--solido-laton::before { background: var(--c-tinta); }

.btn--bloque { width: 100%; }
.btn--sm { padding: .7em 1.35em; font-size: var(--t-xs); }
.btn--lg { padding: 1.06em 2.4em; }

/* En pantallas táctiles ningún botón baja de 44 px de alto: es la
   medida mínima para acertarle con el dedo. `.btn--sm` se quedaba en
   28 px, que en el catálogo obligaba a apuntar. */
@media (pointer: coarse), (max-width: 620px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; padding-block: .55em; }
}

.btn:disabled { opacity: .45; pointer-events: none; }
.btn.cargando { pointer-events: none; color: transparent; }
.btn.cargando::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1.6px solid rgba(247,243,238,.35);
  border-top-color: var(--c-lino);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

/* Enlace con subrayado animado */
.link-sub {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-medio) var(--e-salida), color var(--d-rapido);
}
.link-sub:hover { color: var(--c-laton-hondo); background-size: 0% 1px; background-position: 100% 100%; }
.link-sub svg { width: 15px; height: 15px; transition: transform var(--d-medio) var(--e-salida); }
.link-sub:hover svg { transform: translateX(4px); }
.seccion--noche .link-sub:hover { color: var(--c-laton-claro); }

/* ============================================================
   Chips / filtros
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.05em;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-humo);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--d-rapido) var(--e-suave);
}
.chip:hover { border-color: var(--c-laton); color: var(--c-laton-hondo); }
.chip.is-activo {
  background: var(--c-tinta);
  border-color: var(--c-tinta);
  color: var(--c-lino);
}
.chip__x { font-size: 13px; opacity: .6; }
.chip.is-activo .chip__x { opacity: 1; }

/* ============================================================
   Insignias
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .8em;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  line-height: 1.4;
  background: var(--c-arena);
  color: var(--c-tinta-80);
}
.badge--nuevo  { background: var(--c-tinta); color: var(--c-lino); }
.badge--unico  { background: var(--g-laton-suave); color: #fff; }
.badge--agotado{ background: var(--c-borde); color: var(--c-humo); }
/* Rebaja de tienda. Es la única insignia que se lee más grande que las
   demás: se pidió que en ninguna pieza quedara duda de que está
   rebajada, y a 9,5 px el «−10%» se perdía contra la fotografía.

   Sigue en rosa ceniza. El latón habría gritado más, pero MARCA.md es
   explícito: el latón es el 10% de la paleta, y ponerlo de fondo en
   las 295 fichas del catálogo lo convierte en protagonista. El rosa
   está justo para esto —etiquetas— y no compite con ninguna otra
   insignia viva. */
.badge--oferta {
  background: var(--c-rosa);
  color: #fff;
  font-size: 11px;
  padding: .42em .9em;
  letter-spacing: .1em;
}
.badge--novia  { background: var(--c-malva); color: #fff; }
.badge--orden  { background: var(--c-tinta); color: var(--c-laton-claro); font-variant-numeric: tabular-nums; }

/* ============================================================
   Ficha de producto — con inclinación 3D real
   ============================================================ */
.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
}

.ficha__marco {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(168deg, var(--c-nube) 0%, var(--c-lino-2) 100%);
  border: 1px solid var(--c-borde);
  transform-style: preserve-3d;
  transition: transform var(--d-medio) var(--e-suave),
              box-shadow var(--d-medio) var(--e-suave),
              border-color var(--d-medio);
  will-change: transform;
}
.ficha:hover .ficha__marco {
  box-shadow: var(--sh-3);
  border-color: var(--c-borde-fuerte);
}

/* Capas 3D: la pieza flota por delante del fondo */
.ficha__arte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateZ(28px) scale(.92);
  transition: transform var(--d-lento) var(--e-salida);
}
.ficha__arte svg { width: 86%; height: 86%; overflow: visible; }
.ficha:hover .ficha__arte { transform: translateZ(46px) scale(.98); }

/* Reflejo especular que sigue al cursor */
.ficha__brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 252, 246, .75),
    rgba(255, 252, 246, 0) 62%);
  mix-blend-mode: soft-light;
  transition: opacity var(--d-medio) var(--e-suave);
}
.ficha:hover .ficha__brillo { opacity: 1; }

/* Sombra proyectada de la pieza */
.ficha__sombra {
  position: absolute;
  left: 50%; bottom: 12%;
  translate: -50% 0;
  width: 52%; height: 14px;
  background: radial-gradient(closest-side, rgba(58,44,30,.24), transparent);
  filter: blur(5px);
  transform: translateZ(6px);
  transition: width var(--d-lento) var(--e-salida), opacity var(--d-lento);
  opacity: .8;
}
.ficha:hover .ficha__sombra { width: 44%; opacity: .55; }

.ficha__insignias {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  transform: translateZ(50px);
}

.ficha__fav {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  color: var(--c-humo);
  opacity: 0;
  transform: translateZ(50px) translateY(-6px);
  transition: opacity var(--d-medio), transform var(--d-medio) var(--e-salida), color var(--d-rapido);
}
.ficha:hover .ficha__fav,
.ficha__fav.is-activo { opacity: 1; transform: translateZ(50px) translateY(0); }
.ficha__fav:hover { color: var(--c-rosa); }
.ficha__fav.is-activo { color: var(--c-rosa); }
.ficha__fav.is-activo svg { fill: currentColor; }
.ficha__fav svg { width: 17px; height: 17px; }

/* Acción rápida que emerge desde abajo */
.ficha__accion {
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  z-index: 3;
  display: flex;
  gap: var(--s-2);
  transform: translateZ(50px) translateY(calc(100% + var(--s-3)));
  opacity: 0;
  transition: transform var(--d-medio) var(--e-salida), opacity var(--d-medio);
}
.ficha:hover .ficha__accion,
.ficha:focus-within .ficha__accion { transform: translateZ(50px) translateY(0); opacity: 1; }
.ficha__accion .btn { flex: 1; padding-inline: 1em; }
.ficha__accion .btn--icono { flex: none; width: 40px; padding: 0; }

.ficha__cuerpo {
  padding-top: var(--s-4);
  display: grid;
  gap: 5px;
}
.ficha__cat {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-humo-claro);
}
.ficha__nombre {
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-tinta);
  transition: color var(--d-rapido);
}
.ficha:hover .ficha__nombre { color: var(--c-laton-hondo); }
.ficha__pie {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: 2px;
}
.ficha__precio { font-size: var(--t-base); font-variant-numeric: tabular-nums; }
/* Precio con rebaja de tienda. En latón y con algo más de peso, para
   que se lea como «este es el precio de ahora» y no como un número más
   junto al tachado. El latón aquí sí corresponde: es un acento sobre
   texto, no un fondo repetido 295 veces. */
.ficha__precio--promo { color: var(--c-laton-hondo); font-weight: 500; }
.ficha__precio-antes {
  font-size: var(--t-sm);
  /* Antes iba en --c-humo-claro y la raya casi no se veía sobre el
     lino. Un tono más firme y una raya de 1,5 px: lo tachado tiene que
     leerse como tachado de un vistazo, no al acercarse. */
  color: var(--c-humo);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--c-rosa);
}
.ficha.is-agotado .ficha__arte { opacity: .45; filter: saturate(.4); }

@media (hover: none) {
  .ficha__accion { position: static; opacity: 1; transform: none; margin-top: var(--s-3); }
  .ficha__fav { opacity: 1; transform: none; }
}

/* ---------- Ficha en el teléfono ----------
   A dos columnas la tarjeta mide unos 165 px: el nombre a 1.28rem
   ocupaba tres líneas y la fila de acciones no cabía con dos
   botones. Se ajusta la escala y se deja solo "Agregar", porque la
   vista rápida no aporta nada cuando tocar la ficha ya abre la pieza
   completa. */
@media (max-width: 620px) {
  .ficha__nombre { font-size: 1.06rem; }
  .ficha__cuerpo { padding-top: var(--s-3); }
  .ficha__cat { font-size: 10px; letter-spacing: .14em; }
  .ficha__pie { gap: var(--s-2); flex-wrap: wrap; }
  .ficha__insignias { top: var(--s-2); left: var(--s-2); gap: 4px; }
  .ficha__fav { top: var(--s-2); right: var(--s-2); width: 36px; height: 36px; }
  .ficha__fav svg { width: 16px; height: 16px; }
  .ficha__accion { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); }
  .ficha__accion .btn--icono { display: none; }
  .badge { padding: .3em .6em; font-size: 8.5px; letter-spacing: .1em; }
}

/* ============================================================
   Carrusel horizontal de fichas

   Desplazamiento nativo con anclaje: en el teléfono se arrastra con
   el dedo y en escritorio se avanza con las flechas de los costados.
   La pista sangra hasta el borde de la pantalla para que la ficha
   siguiente asome y se entienda que hay más.

   (No confundir con `.vitrina`, el carrusel cilíndrico 3D de la
   portada, que es otra cosa y no se toca.)
   ============================================================ */
.carrusel {
  position: relative;
  margin-top: var(--s-6);
  /* Eje vertical de las flechas: lo fija views.js midiendo la foto
     de la primera ficha, porque el alto del texto cambia con el
     tamaño de pantalla. */
  --carrusel-eje: 40%;
}

.carrusel__pista {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-2) var(--pad-x) var(--s-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  /* Barra oculta: la navegación son las flechas y el arrastre. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible {
  outline: 2px solid var(--c-laton);
  outline-offset: -4px;
  border-radius: var(--r-md);
}

.carrusel__item {
  flex: 0 0 auto;
  /* Cuántas fichas caben a la vez. El decimal deja asomando la
     siguiente, que es lo que invita a deslizar. */
  --vis: 1.55;
  width: calc(100% / var(--vis) - var(--s-4));
  scroll-snap-align: start;
}
@media (min-width: 560px)  { .carrusel__item { --vis: 2.4; } }
@media (min-width: 860px)  { .carrusel__item { --vis: 3.4; } }
@media (min-width: 1180px) { .carrusel__item { --vis: 4.2; } }
@media (min-width: 1440px) { .carrusel__item { --vis: 5;   } }

.carrusel__flecha {
  position: absolute;
  top: calc(var(--s-2) + var(--carrusel-eje));
  z-index: 4;
  translate: 0 -50%;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  color: var(--c-tinta);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: opacity var(--d-medio), transform var(--d-rapido) var(--e-suave),
              background var(--d-rapido), border-color var(--d-rapido);
}
.carrusel__flecha--izq { left: max(var(--s-2), calc(var(--pad-x) - 21px)); }
.carrusel__flecha--der { right: max(var(--s-2), calc(var(--pad-x) - 21px)); }
.carrusel__flecha:hover { background: var(--c-lino-2); border-color: var(--c-borde-fuerte); }
.carrusel__flecha:active { transform: scale(.92); }
.carrusel__flecha svg { width: 20px; height: 20px; }

/* Al llegar al extremo la flecha se apaga en vez de desaparecer: si
   se quitara del todo, la otra saltaría de sitio. */
.carrusel__flecha[disabled] {
  opacity: 0;
  pointer-events: none;
}
/* Si el carrusel cabe entero no hay nada que recorrer. */
.carrusel.es-estatico .carrusel__flecha,
.carrusel.es-estatico .carrusel__pista-txt { display: none; }

.carrusel__pista-txt {
  padding-inline: var(--pad-x);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-humo-claro);
}
/* En escritorio se navega con las flechas y la pista sobra. */
@media (min-width: 860px) { .carrusel__pista-txt { display: none; } }

/* En pantallas pequeñas las flechas estorban menos pegadas al borde
   y algo más chicas; el gesto principal ahí es el arrastre. */
@media (max-width: 559px) {
  .carrusel__flecha { width: 36px; height: 36px; background: rgba(255,255,255,.92); }
  .carrusel__flecha svg { width: 17px; height: 17px; }
  .carrusel__flecha--izq { left: var(--s-1); }
  .carrusel__flecha--der { right: var(--s-1); }
}

/* Dentro del carrusel la ficha no se inclina: el efecto 3D peleaba
   con el desplazamiento horizontal. */
.carrusel__item .ficha { perspective: none; }

/* ============================================================
   Fotografía real de producto
   Cuando un producto define `fotos`, la imagen ocupa el marco
   completo y el dibujo generado deja de usarse. Todos los
   contenedores de pieza aceptan ambas fuentes sin cambios.
   ============================================================ */
.foto-pieza {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ficha__arte:has(.foto-pieza),
.pgal__pieza:has(.foto-pieza) { transform: none; }
.ficha:hover .ficha__arte:has(.foto-pieza) { transform: scale(1.04); }
.pgal__pieza:has(.foto-pieza) { width: 100%; height: 100%; border-radius: var(--r-lg); overflow: hidden; }
.pgal__marco:has(.foto-pieza) .pgal__sombra,
.pgal__marco:has(.foto-pieza) .pgal__hint { display: none; }
.ficha__marco:has(.foto-pieza) .ficha__sombra { display: none; }

/* ============================================================
   Formularios
   ============================================================ */
.campo { display: grid; gap: var(--s-2); }
.campo__label {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-humo);
}
.campo__label span { color: var(--c-error); }

.input, .textarea, .select {
  width: 100%;
  padding: .82em 1.05em;
  font-size: var(--t-base);
  color: var(--c-tinta);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-sm);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido), background var(--d-rapido);
}
.input::placeholder, .textarea::placeholder { color: var(--c-humo-claro); opacity: .7; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-laton);
  box-shadow: 0 0 0 3px rgba(185, 139, 78, .13);
}
.input:invalid:not(:placeholder-shown) { border-color: var(--c-error); }
.textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  cursor: pointer;
  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 d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E6660' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.campo__error { font-size: var(--t-xs); color: var(--c-error); }
.campo__ayuda { font-size: var(--t-xs); color: var(--c-humo-claro); }

/* Casilla y radio personalizados */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--c-humo);
  line-height: 1.5;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__caja {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: 3px;
  display: grid; place-items: center;
  background: var(--c-nube);
  transition: all var(--d-rapido);
}
.check__caja::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 1.7px solid #fff;
  border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--d-rapido) var(--e-elastico);
  margin-top: -2px;
}
.check input:checked + .check__caja { background: var(--c-laton); border-color: var(--c-laton); }
.check input:checked + .check__caja::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__caja { box-shadow: 0 0 0 3px rgba(185,139,78,.2); }

/* Tarjeta de opción (radio ampliado, p. ej. método de envío) */
.opcion {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: var(--c-nube);
  cursor: pointer;
  transition: all var(--d-rapido);
}
.opcion:hover { border-color: var(--c-borde-fuerte); }
.opcion input { position: absolute; opacity: 0; }
.opcion__punto {
  width: 17px; height: 17px;
  flex: none;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color var(--d-rapido);
}
.opcion__punto::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-laton);
  transform: scale(0);
  transition: transform var(--d-rapido) var(--e-elastico);
}
.opcion input:checked ~ .opcion__punto { border-color: var(--c-laton); }
.opcion input:checked ~ .opcion__punto::after { transform: scale(1); }
.opcion:has(input:checked) {
  border-color: var(--c-laton);
  background: rgba(185, 139, 78, .05);
}
.opcion__txt { flex: 1; }
.opcion__txt b { display: block; font-weight: 400; font-size: var(--t-base); }
.opcion__txt small { color: var(--c-humo-claro); font-size: var(--t-xs); }
.opcion__precio { font-variant-numeric: tabular-nums; font-size: var(--t-sm); }

/* Selector de variantes (talla) */
.variantes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.variante {
  position: relative;
  min-width: 46px;
  padding: .55em 1em;
  font-size: var(--t-sm);
  text-align: center;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-full);
  background: var(--c-nube);
  cursor: pointer;
  transition: all var(--d-rapido);
}
.variante:hover { border-color: var(--c-laton); }
.variante.is-activo { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-lino); }
.variante:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* ============================================================
   Acordeón
   ============================================================ */
.acordeon { border-top: 1px solid var(--c-borde); }
.acordeon__item { border-bottom: 1px solid var(--c-borde); }
.acordeon__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.16rem;
  font-weight: 400;
  color: var(--c-tinta);
  transition: color var(--d-rapido);
}
.acordeon__btn:hover { color: var(--c-laton-hondo); }
.acordeon__signo {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.acordeon__signo::before, .acordeon__signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.3px;
  background: var(--c-laton);
  transition: transform var(--d-medio) var(--e-salida);
}
.acordeon__signo::after { transform: rotate(90deg); }
.acordeon__item.is-abierto .acordeon__signo::after { transform: rotate(0deg); }
.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-medio) var(--e-salida);
}
.acordeon__item.is-abierto .acordeon__panel { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  padding-bottom: var(--s-5);
  color: var(--c-humo);
  max-width: var(--ancho-texto);
}

/* ============================================================
   Testimonios
   ============================================================ */
.testimonio {
  padding: var(--s-6);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--s-4);
  position: relative;
  transition: transform var(--d-medio) var(--e-salida), box-shadow var(--d-medio);
}
.testimonio:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.testimonio__estrellas { display: flex; gap: 2px; color: var(--c-laton); }
.testimonio__estrellas svg { width: 14px; height: 14px; fill: currentColor; }
.testimonio__txt {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.56;
  color: var(--c-tinta-80);
}
.testimonio__quien { display: flex; align-items: center; gap: var(--s-3); }
.testimonio__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-rosa);
  color: #fff;
  font-size: var(--t-sm);
  flex: none;
}
.testimonio__quien b { display: block; font-weight: 400; font-size: var(--t-sm); }
.testimonio__quien small { color: var(--c-humo-claro); font-size: var(--t-xs); }

/* ============================================================
   Nota / aviso
   ============================================================ */
.nota {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(185, 139, 78, .07);
  border-left: 2px solid var(--c-laton);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  color: var(--c-humo);
  line-height: 1.6;
}
.nota svg { width: 18px; height: 18px; flex: none; color: var(--c-laton-hondo); margin-top: 2px; }
.nota b { color: var(--c-tinta); font-weight: 500; }

/* ============================================================
   Píldoras de confianza
   ============================================================ */
.confianza {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.confianza__item {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  text-align: center;
  padding: var(--s-4) var(--s-2);
}
.confianza__item svg { width: 30px; height: 30px; color: var(--c-laton); stroke-width: 1; }
.confianza__item b {
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.confianza__item small { font-size: var(--t-xs); color: var(--c-humo-claro); line-height: 1.5; max-width: 24ch; }
@media (max-width: 760px) { .confianza { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Paginación / cargar más
   ============================================================ */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.paginacion__info { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-humo-claro); }

/* ============================================================
   Migas de pan
   ============================================================ */
.migas {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-humo-claro);
  margin-bottom: var(--s-5);
}
.migas a:hover { color: var(--c-laton-hondo); }
.migas span[aria-current] { color: var(--c-tinta-80); }
.migas i { font-style: normal; opacity: .5; }

/* ============================================================
   Rebaja de toda la tienda

   Todo lo que anuncia la campaña: la banda ancha de la portada y el
   catálogo, el aviso en línea de la ficha, el precio de lista tachado
   y las dos filas que la desglosan en el resumen.

   Los precios ya llegan rebajados del servidor; esto es solo cómo se
   cuenta. Cuando la campaña vence, el JavaScript deja de imprimir
   estas clases y no queda nada que apagar a mano.
   ============================================================ */

/* ---------- Banda ancha ---------- */
.promo-cinta {
  background: var(--c-noche);
  color: rgba(247, 243, 238, .92);
  padding-block: var(--s-4);
}
.promo-cinta__int {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.promo-cinta__pct {
  flex: none;
  font-family: var(--f-display);
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-laton-claro);
}
.promo-cinta__txt { display: grid; gap: 2px; flex: 1 1 16rem; }
.promo-cinta__txt b {
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--c-laton-claro);
}
.promo-cinta__txt span { font-size: var(--t-sm); color: rgba(247, 243, 238, .78); }
/* El botón claro sobre el fondo noche: el btn normal se perdería. */
.promo-cinta .btn {
  flex: none;
  background: var(--c-lino);
  color: var(--c-tinta);
  border-color: transparent;
}
.promo-cinta .btn:hover { background: var(--c-laton-claro); }

@media (max-width: 560px) {
  /* En el teléfono el botón sobra: la cinta ya está dentro del
     catálogo, y bajo ella empiezan las piezas. */
  .promo-cinta .btn { display: none; }
}

/* ---------- Aviso en línea (ficha de producto) ---------- */
.promo-aviso {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-rosa-claro);
  /* Rosa ceniza aclarado sobre el lino del fondo. Va literal y no con
     color-mix() porque en el resto de la hoja no se usa: un navegador
     que no lo entienda dejaría el aviso sin fondo y sin avisar. */
  background: #F3EAE4;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--c-tinta-80);
}
.promo-aviso__pct {
  flex: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-laton-hondo);
}

/* Misma caja, pero apagada: la lleva la pieza que se queda FUERA de la
   promoción. Con el rosa de la promoción parecería que anuncia una
   rebaja, que es justo lo contrario de lo que dice. Va en el gris del
   resto de las notas para que se lea como lo que es —una aclaración
   junto al precio— y no como un cartel. */
.promo-aviso--fuera {
  border-color: var(--c-borde);
  background: var(--c-lino-2);
  color: var(--c-humo);
}

/* ---------- Ahorro, junto al precio de la ficha ---------- */
.pinfo__ahorro {
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3em .7em;
  border-radius: var(--r-full);
  background: var(--c-rosa);
  color: #fff;
}

/* ---------- Precio de lista tachado ----------
   Los sitios donde el precio va en una sola línea —cajón, buscador,
   vitrina, barra de compra móvil— lo tachan con un <s> suelto en vez
   de una clase propia. */
.ficha__precio s,
.buscador__res-precio s,
.linea__meta s,
.hero__foto-pie s,
.vitrina__cara-pie s,
.barra-compra__txt s {
  color: var(--c-humo-claro);
  font-size: .88em;
  text-decoration-thickness: 1px;
}

/* ---------- Resumen: precio de lista y lo que quita ---------- */
.totales__fila--lista { color: var(--c-humo-claro); }
.totales__fila--lista s { font-variant-numeric: tabular-nums; }
.totales__fila--promo { color: var(--c-laton-hondo); }
.totales__fila--promo span:last-child { font-weight: 500; }

/* ---------- Cupones en pausa ---------- */
.cupon-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--c-humo);
}
.cupon-nota b { color: var(--c-tinta-80); font-weight: 500; }
.cupon-nota svg { flex: none; margin-top: 1px; color: var(--c-laton); }

/* ---------- La campaña dentro de la barra de anuncio ---------- */
.anuncio__item--promo { color: var(--c-laton-claro); }