/* ============================================================
   Patas Vitales — Web (patasvitales.com)
   custom.css — complementa a Tailwind (CDN). Define lo que utility
   classes no cubren limpiamente: fuentes, acordeón FAQ, header sticky,
   animaciones ligeras y el token de color crudo por si se necesita
   fuera de la config de Tailwind.
   Usar TTL corta (1h) durante desarrollo activo — ver _headers.
   ============================================================ */

:root {
  --color-primary-600: #0d9488;
  --color-primary-700: #0f766e;
  --color-accent-500: #f59e0b;
  --color-neutral-900: #1c1917;

  --font-heading: 'Nunito', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* Header sticky con sombra al hacer scroll */
#pvSiteHeader { transition: box-shadow 0.2s ease, background-color 0.2s ease; }
#pvSiteHeader.is-scrolled { box-shadow: 0 2px 12px rgba(28,25,23,0.08); }

/* Drawer mobile */
#pvMobileDrawer {
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#pvMobileDrawer.is-open { transform: translateX(0); }
#pvMobileOverlay {
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
#pvMobileOverlay.is-open { opacity: 1; pointer-events: auto; }

/* Acordeón FAQ */
.pv-faq-item { border-bottom: 1px solid #e7e5e4; }
.pv-faq-question {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; user-select: none;
}
.pv-faq-icon { transition: transform 0.25s ease; flex-shrink: 0; }
.pv-faq-item.is-open .pv-faq-icon { transform: rotate(45deg); }
.pv-faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.pv-faq-item.is-open .pv-faq-answer { max-height: 600px; }

/* Botón de checkout: leve pulso para llamar la atención sin ser invasivo */
@keyframes pv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
}
.pv-cta-pulse { animation: pv-pulse 2.5s ease-in-out infinite; }

/* Tabla comparativa: encabezado sticky en scroll horizontal mobile */
.pv-compare-table-wrap { -webkit-overflow-scrolling: touch; }

/* Badge de "Sin competencia directa" tipo ribbon */
.pv-ribbon {
  position: absolute; top: 12px; right: -8px;
  background: var(--color-accent-500); color: var(--color-neutral-900);
  font-weight: 700; font-size: 0.75rem; padding: 4px 14px;
  transform: rotate(4deg); border-radius: 4px;
}

/* Scroll offset para anclas bajo el header sticky */
section[id] { scroll-margin-top: 84px; }