/* =====================================================================
   Just Péptidos — Sistema visual (fiel al brandbook)
   Paleta: Azul metálico #3E6EA8 · Lila #A688C0 · Ciruela #402C57
           Lavanda #CDB4E2 · Carbón #241B2E
   ===================================================================== */

:root {
  --azul:    #3E6EA8;
  --lila:    #A688C0;
  --ciruela: #402C57;
  --lavanda: #CDB4E2;
  --carbon:  #241B2E;
  --bg:      #F4F0F9;   /* fondo lavanda muy claro, aire editorial */
  --bg-soft: #EEE8F5;
  --ink:     #241B2E;   /* texto principal (carbón) */
  --muted:   #6B6478;   /* texto secundario */
  --line:    #E4DCEE;   /* separadores */
  --grad:    linear-gradient(120deg, #3E6EA8 0%, #6C63C0 45%, #A688C0 100%);
  --grad-soft: linear-gradient(120deg, #CDB4E2 0%, #A688C0 55%, #8FA6D8 100%);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); }

::selection { background: rgba(166,136,192,.35); color: var(--ciruela); }

/* Tipografía de display */
.font-display { font-family: 'Sora', system-ui, sans-serif; }
.font-body    { font-family: 'Inter', system-ui, sans-serif; }

/* Wordmark del logo: "just" en itálica ligera */
.logo-just { font-style: italic; font-weight: 600; }
.logo-pep  { font-weight: 500; }

/* ---- Gradientes de marca como texto/fondos ---- */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-grad      { background: var(--grad); }
.bg-grad-soft { background: var(--grad-soft); }

/* ---- Formas metálicas fluidas (decorativas, sin imágenes) ---- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.blob-a { background: radial-gradient(circle at 30% 30%, #8FA6D8, #3E6EA8 70%); }
.blob-b { background: radial-gradient(circle at 60% 40%, #C4A6DE, #A688C0 70%); }
.blob-c { background: radial-gradient(circle at 40% 60%, #6C63C0, #402C57 75%); }

/* Orbe metálico grande para el hero (evoca las formas fluidas del brandbook) */
.metal-orb {
  background:
    radial-gradient(closest-side at 32% 28%, #ffffff 0%, rgba(255,255,255,0) 42%),
    conic-gradient(from 210deg at 50% 50%,
      #8FA6D8, #A688C0, #6C63C0, #3E6EA8, #C4A6DE, #402C57, #8FA6D8);
  filter: saturate(1.05) contrast(1.02);
  box-shadow:
    inset 0 20px 60px rgba(255,255,255,.35),
    inset 0 -30px 70px rgba(64,44,87,.55),
    0 40px 90px -30px rgba(64,44,87,.45);
}

/* ---- Frascos flotantes del hero ----
   La rotación va en el contenedor padre y la animación en la imagen,
   así no compiten por la propiedad transform. */
@keyframes jpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
.float-vial {
  animation: jpFloat 6s ease-in-out infinite;
  will-change: transform;
}
/* Sombra que sigue la silueta del frasco recortado (no una caja) */
.vial-shadow  { filter: drop-shadow(0 24px 26px rgba(64,44,87,.32)); }
.vial-shadow-lg { filter: drop-shadow(0 34px 36px rgba(64,44,87,.42)); }

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .float-vial { animation: none; }
}

/* Tarjetas */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(64,44,87,.45);
  border-color: #D8C9EA;
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; border-radius: 999px; transition: all .2s ease;
  padding: .8rem 1.5rem; line-height: 1;
}
.btn-primary { background: var(--ciruela); color: #fff; }
.btn-primary:hover { background: #55396f; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(64,44,87,.6); }
.btn-grad { background: var(--grad); color: #fff; }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(108,99,192,.6); }
.btn-wa { background: #25D366; color: #0b2e18; }
.btn-wa:hover { background: #1fbe5a; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(37,211,102,.55); }
.btn-ghost { background: transparent; color: var(--ciruela); border: 1.5px solid #D8C9EA; }
.btn-ghost:hover { border-color: var(--lila); background: rgba(166,136,192,.08); }

/* Chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: .35rem .75rem; border-radius: 999px;
  background: rgba(166,136,192,.14); color: var(--ciruela);
}
/* Chip sobre fondos oscuros o con gradiente (debe ir DESPUÉS de .chip) */
.chip-light {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Encabezado sección */
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }

/* Enlaces del nav con subrayado animado */
.nav-link { position: relative; color: var(--ink); font-weight: 500; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--grad); transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Drawer del carrito */
[x-cloak] { display: none !important; }

/* Barra de aviso research-use-only */
.ruo-bar { background: var(--carbon); color: #E9E3F1; }

/* Detalle: línea divisoria fina de marca */
.hr-brand { height: 3px; width: 64px; border: 0; border-radius: 999px; background: var(--grad); }

/* Accesibilidad foco */
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(108,99,192,.5); outline-offset: 2px; border-radius: 8px;
}