/* ==========================================================================
   Titan Nutrition — estilos globales
   Reproduce fielmente la especificación visual aprobada (handoff Designe).
   Los estilos de layout se aplican inline en el markup (valores exactos);
   aquí van reset, tokens, y los estados :hover / :focus que el prototipo
   expresaba con atributos style-hover / style-focus.
   ========================================================================== */

:root {
  --bg: #0A0A0B;
  --surface-1: #0C0C0E;
  --surface-2: #101013;
  --surface-3: #0C0C0F;
  --surface-hover: #141418;
  --red: #E11D22;
  --red-hover: #FF2A31;
  --fg: #F4F3F1;
  --fg-muted: #A9A9B1;
  --fg-dim: #84848C;
  --fg-faint: #7A7A82;
  --fg-ghost: #55555E;
  --border: #1F1F25;
  --border-strong: #26262C;
  --divider: #1A1A1F;
  --green: #3FB950;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0A0A0B; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; }
a { color: #F4F3F1; text-decoration: none; }
a:hover { color: #E11D22; }
img { max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }
button { font-family: inherit; }
::selection { background: #E11D22; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2A2A31; }
::-webkit-scrollbar-track { background: transparent; }

/* Scroll horizontal sin barra visible (chips de categoría, carruseles) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Animaciones del prototipo */
@keyframes tn-in-right { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes tn-in-up { from { transform: translateY(28px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes tn-fade { from { opacity: 0 } to { opacity: 1 } }

/* ==== Estados hover / focus (antes: style-hover / style-focus) ============ */

/* Navegación */
.nav-link:hover { color: #fff !important; }

/* Botón carrito del header */
.cart-btn:hover { border-color: #4A4A54 !important; background: #141418 !important; }

/* Botones rojos (WhatsApp / CTA) */
.btn-red:hover { background: #FF2A31 !important; color: #fff !important; }
.btn-red-lift:hover { background: #FF2A31 !important; color: #fff !important; transform: translateY(-2px); }

/* Botón secundario (borde) */
.btn-ghost:hover { border-color: #F4F3F1 !important; background: #121216 !important; color: #F4F3F1 !important; }
.btn-outline:hover { border-color: #F4F3F1 !important; color: #F4F3F1 !important; }

/* Card de producto */
.pcard { transition: border-color .2s ease, transform .2s ease; }
.pcard:hover { border-color: #3A3A44 !important; transform: translateY(-3px); }
.pcard-flat:hover { border-color: #3A3A44 !important; }
.pcard:hover .pphoto, .pcard-flat:hover .pphoto { transform: scale(1.05); }
.plink:hover { color: #E11D22 !important; }
.add-btn:hover:not([disabled]) { filter: brightness(1.12); }

/* Card de categoría */
.cat-card:hover { border-color: #E11D22 !important; background: #141419 !important; color: #F4F3F1 !important; }

/* Filtros sidebar */
.filter-item:hover { color: #fff !important; }

/* Chips (filtros / categorías) */
.chip:hover { border-color: #E11D22 !important; }

/* Opción del cuestionario */
.wiz-opt:hover { border-color: #E11D22 !important; }

/* Pestañas PDP */
.tab-btn:hover { color: #fff !important; }

/* Campos de formulario */
.field:focus { border-color: #E11D22 !important; }

/* Enlaces sutiles */
.link-red:hover { color: #E11D22 !important; }
.link-dim:hover { color: #6E6E78 !important; }

/* Filas del panel admin */
.adm-row:hover { background: #131317 !important; }

/* Accesibilidad: foco por teclado visible */
:focus-visible { outline: 2px solid #E11D22; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}