/* ============================================================
   catalogo.css — Estilos compartidos de los catálogos Lyra
   Usado por: carteras.html y las próximas secciones
   (sublimados, promos, hebillas, tinturas).
   Extraído tal cual del <style> embebido de carteras, sin
   cambios visuales. Editar acá afecta a TODOS los catálogos.
   ============================================================ */

:root {
  --heading: #12497d;
  --first-color: #75aadb;
  --first-color-hover: #608bc7;
  --second-color: #3f464f;
  --bg-main: #f5f5f2;
  --bg-card: #eeffff;
  --bg-hero: #3f464f;
  --text-primary: #22303a;
  --text-secondary: #6b7680;
  --text-light: #9aa2a9;
  --accent: #75aadb;
  --accent-hover: #608bc7;
  --accent-soft: #e8f1fa;
  --border: #dfe6e6;
  --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 8px 30px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 20px 60px rgba(26, 26, 26, 0.12);
  --radius: 12px;
  --font-body: "DM Sans", -apple-system, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === HEADER (same as /libreria/) === */
header {
  background: var(--bg-hero);
  color: #eef;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 12px;
}
.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #eef;
}
.logo-img {
  width: 36px;
  height: 36px;
  filter: invert(1);
}
.logo-text {
  font-family: "Aclonica", sans-serif;
  font-size: 22px;
  color: #eef;
  letter-spacing: 0.5px;
}
.header-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-right a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.header-right a:hover {
  color: #eef;
}
.back-link {
  font-size: 12px;
}
.wa-btn {
  background: #2cab5b;
  color: #eef !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
}
.wa-btn:hover {
  background: #20bd5a;
}

/* === FILTERS === */
.filters-bar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.filters-bar h2 {
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
}
.filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #eef;
}

/* === GRID === */
.catalog-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* === SECTION HEADERS === */
.section-header {
  grid-column: 1 / -1;
  padding: 2.5rem 0 0.5rem;
  border-bottom: 2px solid var(--text-primary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.section-header h3 {
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-header .count {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 400;
}

/* === PRODUCT CARD === */
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  animation: fadeUp 0.5s ease both;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.product-card[data-hidden="true"] {
  display: none;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f0ebe5;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .card-image img {
  transform: scale(1.05);
}
.card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--accent);
  color: #eef;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
}

.card-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-name {
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.card-desc {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}
.card-colors {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.color-tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.card-price small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-light);
  letter-spacing: 0;
}

/* === VARIANT SELECTOR === */
.variant-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--bg-main);
  margin-bottom: 0.8rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B6560' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* === ADD BUTTON === */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: var(--heading);
  color: var(--bg-card);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}
.btn-add:hover {
  background: var(--bg-hero);
}
.btn-add:active {
  transform: scale(0.96);
}
.btn-add svg {
  width: 16px;
  height: 16px;
}
.btn-add.added {
  background: #4a9 !important;
  pointer-events: none;
}

/* === FOOTER === */
.site-footer {
  background: var(--bg-hero);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.82rem;
}
.site-footer a {
  color: var(--accent);
  text-decoration: none;
}
.site-footer .footer-brand {
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.2rem;
  color: #eef;
  margin-bottom: 0.5rem;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
  .header-subtitle {
    display: none;
  }
}
@media (max-width: 480px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* === CART WIDGET HOOK (matches lyra-cart-widget.js) === */
#lyra-cart-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
}

/* ── Texto libre opcional (ej. "Diseño a elección") ──────────
   Control nuevo, estilado igual que .variant-select para
   mantener coherencia visual con el resto de la tarjeta. */
.free-text-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.8rem;
}
.free-text-input {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--bg-main);
}
.free-text-input:focus {
  outline: none;
  border-color: var(--accent);
}


/* ── Bloque visor de PDF (carta de tinturas / catálogo sublimados) ── */
.pdf-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  text-align: center;
}
.pdf-title {
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pdf-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 600px;
  margin: 0 auto 1.2rem;
}
.pdf-viewer {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: #f0ebe5;
}
.pdf-viewer iframe {
  width: 100%;
  height: 60vh;
  min-height: 380px;
  border: none;
  display: block;
}
.pdf-viewer.pdf-tall iframe {
  height: 80vh;
  min-height: 500px;
}
.pdf-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pdf-btn {
  padding: 0.6rem 1.3rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pdf-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* ── Preview de PDF en móvil ── */
.pdf-preview-mobile {
  display: none; /* oculto en desktop */
}
@media (max-width: 768px) {
  .pdf-viewer { display: none; }      /* el iframe no anda en celular */
  .pdf-preview-mobile {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    text-decoration: none;
  }
  .pdf-preview-mobile img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: block;
  }
  .pdf-preview-hint {
    display: block;
    margin-top: 0.6rem;
    text-align: center;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
  }

  .pdf-desc-desktop { display: none; }
}

/* ============================================================
   CATÁLOGO DE FÁBRICA — sección aparte dentro de /carteras/
   Usa las mismas variables de color del sitio (var(--accent),
   var(--bg-hero), etc.) para seguir cualquier cambio de paleta
   que hagas más adelante, sin quedar con colores fijos.
   ============================================================ */

/* Acceso rápido desde el header (siempre visible, sticky) */
.fabrica-link {
  background: var(--accent);
  color: #eef !important;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.fabrica-link:hover {
  background: var(--accent-hover);
}

.fabrica-section {
  margin-top: 3rem;
  border-top: 3px solid var(--text-primary);
  padding-top: 2.5rem;
  scroll-margin-top: 70px; /* que el ancla no quede tapada por el header sticky */
}

.fabrica-banner {
  max-width: 1400px;
  margin: 0 auto 1rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.fabrica-banner-inner {
  background: var(--bg-hero);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  color: #eef;
  box-shadow: var(--shadow-md);
}
.fabrica-banner-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Instrument Sans", var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.fabrica-banner-title .emoji {
  font-size: 1.35rem;
}
.fabrica-banner-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
  max-width: 720px;
}
.fabrica-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.fabrica-chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--accent);
  color: #eef;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  white-space: nowrap;
}
.fabrica-counter {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}
.fabrica-counter strong {
  color: #eef;
}
.fabrica-counter.ok {
  color: #8fd4a8;
}
.fabrica-counter.ok strong {
  color: #8fd4a8;
}

/* En mobile: el botón de "Catálogo de fábrica" se queda (es importante
   para explicarle a las clientas por WhatsApp cómo llegar a esa sección),
   pero con texto corto para que entre bien. Lo que se saca en mobile es
   el botón de WhatsApp del header, porque ya se puede hablar por WhatsApp
   desde el menú de la página principal. */
.fabrica-link-short {
  display: none;
}
@media (max-width: 600px) {
  .fabrica-banner-inner {
    padding: 1.4rem;
  }
  .header-right .wa-btn {
    display: none;
  }
  .fabrica-link-full {
    display: none;
  }
  .fabrica-link-short {
    display: inline;
  }
}