/* =========================================================================
   FLOWSTORE · Estilo neón (basado en el logotipo)
   Azul eléctrico del "Flow", rosa de la gorra y verde de "store"
   sobre muro de ladrillo oscuro.
   ========================================================================= */
:root {
  --bg: #07080c;
  --brick: #141c1e;
  --surface: #11161a;
  --surface-2: #182026;
  --line: #26313a;
  --text: #f4f7fb;
  --muted: #9aa8b5;

  --blue: #2e8bff;        /* glow del "Flow" */
  --blue-deep: #1e74b9;   /* tono medido en el logo */
  --pink: #ff2e9a;        /* gorra */
  --pink-deep: #c8127a;
  --green: #2ee68c;       /* "store" */
  --green-deep: #2b9d68;
  --amber: #ffc24b;       /* solo para estados "pendiente" */
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Muro de ladrillo ---------- */
.brick {
  background-color: var(--brick);
  background-image:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(7, 8, 12, .55) 65%, rgba(7, 8, 12, .95) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23141c1e'/%3E%3Cg fill='%23182124'%3E%3Crect x='3' y='3' width='54' height='24' rx='2'/%3E%3Crect x='63' y='3' width='54' height='24' rx='2'/%3E%3Crect x='-27' y='33' width='54' height='24' rx='2'/%3E%3Crect x='33' y='33' width='54' height='24' rx='2'/%3E%3Crect x='93' y='33' width='54' height='24' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Tipografía neón ---------- */
.font-script { font-family: 'Great Vibes', cursive; font-weight: 400; }
.font-neon { font-family: 'Tilt Neon', 'Outfit', sans-serif; }

.glow-blue { color: #fff; text-shadow: 0 0 2px #fff, 0 0 8px var(--blue), 0 0 18px var(--blue), 0 0 36px var(--blue-deep); }
.glow-pink { color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 18px var(--pink-deep); }
.glow-green { color: var(--green); text-shadow: 0 0 6px var(--green), 0 0 16px var(--green-deep); }
.neon-icon-blue { color: var(--blue); filter: drop-shadow(0 0 4px var(--blue)) drop-shadow(0 0 10px var(--blue-deep)); }
.neon-icon-pink { color: var(--pink); filter: drop-shadow(0 0 4px var(--pink)) drop-shadow(0 0 10px var(--pink-deep)); }
.neon-icon-green { color: var(--green); filter: drop-shadow(0 0 4px var(--green)) drop-shadow(0 0 10px var(--green-deep)); }

/* ---------- Wordmark (réplica en CSS del logo) ---------- */
.wordmark { display: inline-flex; align-items: flex-end; position: relative; line-height: 1; text-decoration: none; }
.wordmark .wm-flow { font-family: 'Great Vibes', cursive; font-size: 2.6rem; padding-right: .2rem; }
.wordmark .wm-cap { width: 1.55rem; height: 1.55rem; position: absolute; right: -.35rem; top: -.45rem; }
.wordmark .wm-store { font-family: 'Tilt Neon', sans-serif; font-size: .85rem; letter-spacing: .06em; margin-left: .1rem; margin-bottom: .2rem; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .9rem; font-weight: 600;
  padding: .8rem 1.2rem; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-buy { background: var(--blue); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 18px rgba(46,139,255,.45); }
.btn-buy:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 0 28px rgba(46,139,255,.75); }
.btn-offer { background: rgba(255,46,154,.08); color: #fff; border: 1.5px solid var(--pink);
  box-shadow: 0 0 14px rgba(255,46,154,.35), 0 0 6px rgba(255,46,154,.4) inset; }
.btn-offer:hover { background: rgba(255,46,154,.18); box-shadow: 0 0 24px rgba(255,46,154,.6), 0 0 8px rgba(255,46,154,.5) inset; }
.btn-ghost { border: 1px solid var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--blue); }
.btn-ok { background: var(--green); color: #04150d; }
.btn-ok:hover { box-shadow: 0 0 22px rgba(46,230,140,.55); }
.btn-no { border: 1.5px solid var(--pink); color: #fff; background: transparent; }
.btn-no:hover { background: rgba(255,46,154,.15); }

/* ---------- Badges de origen y estado ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-local { color: var(--green); background: rgba(46,230,140,.1); border: 1px solid rgba(46,230,140,.55); box-shadow: 0 0 10px rgba(46,230,140,.25); }
.badge-intl { color: #8fc2ff; background: rgba(46,139,255,.12); border: 1px solid rgba(46,139,255,.6); box-shadow: 0 0 10px rgba(46,139,255,.3); }
.badge-punto { color: var(--pink); background: rgba(255,46,154,.1); border: 1px solid rgba(255,46,154,.55); box-shadow: 0 0 10px rgba(255,46,154,.25); }
.badge-demo { color: var(--muted); border: 1px dashed var(--line); }
.st-pendiente { color: var(--amber); background: rgba(255,194,75,.1); border: 1px solid rgba(255,194,75,.5); }
.st-aceptada, .st-usada, .st-pagado { color: var(--green); background: rgba(46,230,140,.1); border: 1px solid rgba(46,230,140,.5); }
.st-rechazada, .st-auto_rechazada { color: var(--pink); background: rgba(255,46,154,.1); border: 1px solid rgba(255,46,154,.5); }
.st-expirada, .st-vencida { color: var(--muted); background: rgba(154,168,181,.08); border: 1px solid var(--line); }

/* ---------- Tarjetas ---------- */
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: 1.25rem; }
.product-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); border-color: rgba(46,139,255,.6); box-shadow: 0 10px 40px -12px rgba(46,139,255,.45); }
.product-art { position: relative; aspect-ratio: 4 / 5; border-radius: 1rem; overflow: hidden; display: grid; place-items: center; }
.product-art svg { width: 46%; height: 46%; }
.product-art img { width: 100%; height: 100%; object-fit: cover; }
.product-art.grande img { object-fit: contain; } /* en el detalle se ve la foto completa */
/* Galería de la página del artículo: flechas sobre la foto y miniaturas abajo */
.galeria-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1; color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); }
.galeria-flecha:hover { background: rgba(0,0,0,.7); }
.galeria-mini { flex: 0 0 auto; width: 4.25rem; aspect-ratio: 4 / 5; border-radius: .65rem; overflow: hidden; border: 2px solid transparent; opacity: .6; background: #0d1117; transition: opacity .15s; }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria-mini:hover { opacity: .9; }
.galeria-mini.activa { border-color: var(--blue); opacity: 1; }

/* Mensaje de tiempos de entrega */
.alerta-local { border-left: 3px solid var(--green); background: rgba(46,230,140,.07); }
.alerta-intl { border-left: 3px solid var(--blue); background: rgba(46,139,255,.08); }

/* ---------- Formularios ---------- */
.input { width: 100%; background: #0b0f12; border: 1px solid var(--line); border-radius: .75rem; padding: .7rem .9rem; color: var(--text); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,139,255,.25); }
.input::placeholder { color: #5f6d79; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.opcion { border: 1px solid var(--line); border-radius: .9rem; cursor: pointer; transition: border-color .15s, background .15s; }
.opcion:hover { border-color: #3a4855; }
.opcion:has(input:checked) { border-color: var(--blue); background: rgba(46,139,255,.08); box-shadow: 0 0 14px rgba(46,139,255,.2); }
.opcion input { accent-color: var(--blue); }

/* ---------- Modal y toast ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(3,4,6,.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60; }
.modal-caja { width: 100%; max-width: 30rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.toast-zona { position: fixed; bottom: 1rem; right: 1rem; left: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; z-index: 70; pointer-events: none; }
.toast { pointer-events: auto; max-width: 24rem; animation: entra .25s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Parpadeo de letrero neón (respeta "reducir movimiento") */
@media (prefers-reduced-motion: no-preference) {
  .flicker { animation: flicker 6s infinite; }
  @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
}

.chip { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font-size: .85rem; color: var(--muted); transition: all .15s; }
.chip:hover { color: var(--text); border-color: #3a4855; }
.chip[aria-pressed="true"] { color: #fff; border-color: var(--blue); background: rgba(46,139,255,.15); box-shadow: 0 0 12px rgba(46,139,255,.3); }

/* ---------- Páginas legales ---------- */
.legal { color: #d5dde6; line-height: 1.7; }
.legal h2 { color: #fff; font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .6rem; }
.legal p, .legal li { font-size: .95rem; }
.legal p + p { margin-top: .6rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.legal li + li { margin-top: .3rem; }
.legal a { color: var(--blue); text-decoration: underline; }
.dato-pendiente { color: var(--amber); background: rgba(255,194,75,.12); border-radius: .3rem; padding: 0 .25rem; }

.scroll-x { scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; }