/* ============================================================
   RXVET — Sitio público
   Paleta de marca (alineada con /app)
   Primario azul:    #3577ab  / oscuro #2a5f8f
   Secundario verde: #739d48  / oscuro #5e8038
   ============================================================ */

:root {
  --c-primary:        #3577ab;
  --c-primary-dark:   #2a5f8f;
  --c-primary-deep:   #1f4a73;
  --c-secondary:      #739d48;
  --c-secondary-dark: #5e8038;
  --c-ink:            #0f2740;
  --c-ink-soft:       #2c3e55;
  --c-muted:          #6b7a8c;
  --c-bg:             #f5f7fb;
  --c-surface:        #ffffff;
  --c-line:           #e2e8f0;

  --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* ── Tipografía ─────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: -.03em; }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

/* Subrayado decorativo bajo títulos */
.title-mark {
  position: relative;
  display: inline-block;
}
.title-mark::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -.12em;
  height: .35em;
  background: linear-gradient(90deg, transparent 0%, rgba(115,157,72,.35) 30%, rgba(115,157,72,.55) 70%, transparent 100%);
  z-index: -1;
  border-radius: 999px;
}

/* ── Utilidades de marca ────────────────────────────────── */
.bg-brand        { background-color: var(--c-primary); }
.bg-brand-dark   { background-color: var(--c-primary-dark); }
.bg-brand-deep   { background-color: var(--c-primary-deep); }
.bg-accent       { background-color: var(--c-secondary); }
.bg-ink          { background-color: var(--c-ink); }
.bg-surface      { background-color: var(--c-surface); }
.text-brand      { color: var(--c-primary); }
.text-accent     { color: var(--c-secondary); }
.text-ink        { color: var(--c-ink); }
.text-ink-soft   { color: var(--c-ink-soft); }
.text-muted      { color: var(--c-muted); }
.border-brand    { border-color: var(--c-primary); }
.border-ink      { border-color: var(--c-ink); }
.ring-brand      { --tw-ring-color: var(--c-primary); }

/* Sin sombras ni resplandor en botones DaisyUI */
.btn, .badge {
  box-shadow: none !important;
  --btn-focus-shadow: none !important;
  --btn-shadow: none !important;
}

/* DaisyUI overrides para que primary/success/secondary usen marca */
.btn-primary:not(:disabled):not(.btn-disabled) {
  background-color: var(--c-primary) !important;
  border-color:    var(--c-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--c-primary-dark) !important;
  border-color:    var(--c-primary-dark) !important;
}
.btn-secondary:not(:disabled):not(.btn-disabled) {
  background-color: var(--c-secondary) !important;
  border-color:    var(--c-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--c-secondary-dark) !important;
  border-color:    var(--c-secondary-dark) !important;
}
.btn-outline-brand {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}
.btn-outline-brand:hover {
  background: var(--c-primary);
  color: #fff;
}
.badge-brand {
  background-color: rgba(53,119,171,.10);
  color: var(--c-primary);
  border: 1px solid rgba(53,119,171,.18);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.badge-accent {
  background-color: rgba(115,157,72,.12);
  color: var(--c-secondary-dark);
  border: 1px solid rgba(115,157,72,.22);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero-gradient {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(115,157,72,.22), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(53,119,171,.30), transparent 60%),
    linear-gradient(180deg, #0b1d33 0%, #133657 55%, #1a4673 100%);
}
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  pointer-events: none;
}
.hero-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Marquee  */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 3rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  animation: marquee 35s linear infinite;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Tarjeta vidrio */
.glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ── Stat box */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-primary);
}

/* ── Animaciones entrada */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0,28px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}
.rise   { animation: rise .9s cubic-bezier(.2,.65,.2,1) both; }
.rise-d1 { animation-delay: .12s; }
.rise-d2 { animation-delay: .24s; }
.rise-d3 { animation-delay: .38s; }
.rise-d4 { animation-delay: .52s; }
.rise-d5 { animation-delay: .68s; }

/* Reveal on scroll (Alpine x-intersect agrega .in-view) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.65,.2,1), transform .9s cubic-bezier(.2,.65,.2,1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Si el usuario prefiere menos animación, mostrar todo */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
/* Fallback noscript */
.no-js .reveal { opacity: 1; transform: none; }

/* ── Líneas y dividers */
.divider-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}

/* ── Cards de feature */
.feature-card {
  position: relative;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 1.6rem;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(53,119,171,.4);
  box-shadow: 0 18px 40px -22px rgba(15,39,64,.25);
}
.feature-card .icon-wrap {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(53,119,171,.10), rgba(115,157,72,.12));
  color: var(--c-primary);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

/* ── Decoración SVG ondulada */
.wave-divider svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ── Chip de "código" / "rx" */
.chip-mono {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.14);
  padding: .35rem .65rem;
  border-radius: 6px;
}

/* ── Pleca cinta */
.ribbon-bg {
  background:
    linear-gradient(135deg, #1a4673 0%, #2a5f8f 100%);
  color: #fff;
}

/* ── Glow ring (botón principal hero) */
.glow-btn {
  position: relative;
  isolation: isolate;
}
.glow-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--c-secondary), var(--c-primary), var(--c-secondary));
  background-size: 200% 200%;
  filter: blur(14px);
  opacity: .55;
  z-index: -1;
  animation: glowmove 6s ease-in-out infinite;
}
@keyframes glowmove {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ── Imagen con marco recortado */
.frame-cut {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(15,39,64,.55),
    0 8px 24px -10px rgba(15,39,64,.25);
}
.frame-cut::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: inherit;
  pointer-events: none;
}

/* ── Patrón ECG */
.ecg-line {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'><path d='M0 30 L120 30 L135 30 L142 12 L150 48 L160 22 L170 30 L300 30 L315 30 L322 8 L332 52 L342 22 L352 30 L600 30' fill='none' stroke='%23739d48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='.6'/></svg>");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 600px 60px;
}

/* ── Responsive tweaks */
@media (max-width: 768px) {
  .hero-h {
    font-size: clamp(2.2rem, 8vw, 3.4rem) !important;
  }
}

/* Navbar glassmorphism */
.nav-blur {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(15, 39, 64, 0.82);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Al hacer scroll: aún más opaco */
.nav-blur.scrolled {
  background: rgba(15, 39, 64, 0.92);
  border-bottom: 1px solid rgba(255,255,255,.12);
}