/* Estilos específicos de página que no son componentes reutilizables genéricos */

.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  justify-content: center;
  padding-block: var(--space-8);
  background: var(--color-neutral-50);
  border-block: 1px solid var(--color-border);
}
.trust-strip__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); font-weight: 600; color: var(--color-neutral-700); }
.trust-strip__item svg { color: var(--color-primary-600); flex-shrink: 0; }

.steps { display: grid; gap: var(--space-12); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
/* padding-top = altura real de la burbuja (40px) + un espacio de aire propio,
   para que el número nunca se superponga al texto (antes había 8px de solape). */
.steps__item { position: relative; padding-top: calc(40px + var(--space-4)); }
.steps__item::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-primary-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}

.page-hero {
  background: linear-gradient(180deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
  color: #fff;
  padding-block: var(--space-12) var(--space-8);
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 60ch; margin-top: var(--space-3); font-size: var(--fs-body-lg); }

.contact-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* Título de la ficha individual de producto — el h1 general del sitio
   (clamp 2rem–3rem) queda demasiado grande acá; achicado solo en esta
   vista puntual, sin tocar el h1 de otras secciones ni el título de las
   tarjetas de tienda/categoría (.product-card__title, sin cambios). */
[data-pdp-name] { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); }

.pdp-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); }
.pdp-gallery__main { grid-column: 1 / -1; aspect-ratio: 1/1; background: var(--color-neutral-50); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border); }
.pdp-gallery__main img { max-height: 92%; object-fit: contain; }
.pdp-gallery__thumb { aspect-ratio: 1/1; border-radius: var(--radius-sm); border: 1px solid var(--color-border); overflow: hidden; background: var(--color-neutral-50); cursor: pointer; }
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-gallery__thumb.is-active { border-color: var(--color-primary-500); box-shadow: 0 0 0 2px var(--color-primary-100); }

.pdp-gallery__videos { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.pdp-gallery__videos video { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #0b1220; display: block; }

.pdp-price-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-neutral-50); }
.pdp-price-ars { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 800; color: var(--color-neutral-900); }
.pdp-price-usdt { color: var(--color-text-muted); font-size: var(--fs-body); margin-top: var(--space-1); display: flex; align-items: center; gap: 6px; }
.pdp-price-note { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: var(--space-3); }

.spec-list { display: grid; gap: var(--space-2) var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-3); }
@media (min-width: 640px) { .spec-list { grid-template-columns: 1fr 1fr; } }
.spec-list li { display: flex; gap: var(--space-2); font-size: var(--fs-body-sm); padding-block: var(--space-2); border-bottom: 1px dashed var(--color-border); }
.spec-list li svg { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

.faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq-item summary { cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.faq-item p { margin-top: var(--space-3); color: var(--color-text-muted); }