/* ============================================================
   FARMACIA VERDE — style-upgrade.css
   Luxury layer · carga DESPUÉS de style.css
   ============================================================ */

/* ── VARIABLES PREMIUM ───────────────────────────────────────── */
:root {
  --ease:       cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --space-section: clamp(6rem, 12vh, 9rem);
  --shadow-lift: 0 20px 50px -12px rgba(26, 107, 74, 0.18);
  --shadow-lift-lg: 0 28px 60px -14px rgba(26, 107, 74, 0.22);
}

/* ── TIPOGRAFÍA — smoothing ──────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────────── */
#scrollProgress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--green), var(--green-light)) !important;
  transition: width 0.06s linear !important;
  z-index: 99999 !important;
}

/* ── REVEALS PREMIUM — override del reveal base ─────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── NAV — BLUR + TRANSICIÓN SUAVE ──────────────────────────── */
.nav {
  transition:
    background 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s;
}
.nav--scrolled {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__link {
  transition: color 0.25s var(--ease);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--green);
  transform: translateX(-50%);
  transition: width 0.35s var(--ease);
}
.nav__link:hover::after { width: 100%; }

/* ── BOTONES — FILL SLIDE-IN ─────────────────────────────────── */
.btn {
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    transform 0.25s var(--ease) !important;
}
.btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-101%) !important;
  transition: transform 0.38s var(--ease) !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}
.btn:hover::after { transform: translateX(0) !important; }
.btn:active { transform: translateY(1px) scale(0.99) !important; transition-duration: 0.08s !important; }

/* Primary */
.btn--primary::after { background: var(--green-mid) !important; }
.btn--primary:hover  { box-shadow: 0 8px 24px rgba(26,107,74,.2) !important; }

/* Ghost */
.btn--ghost::after   { background: var(--green) !important; }
.btn--ghost:hover    { color: #fff !important; border-color: var(--green) !important; }

/* Outline */
.btn--outline::after { background: var(--green) !important; }
.btn--outline:hover  { color: #fff !important; border-color: var(--green) !important; }

/* ── CARDS — WILL-CHANGE + TRANSITION BASE ───────────────────── */
.cat-card,
.srv-card,
.team-card,
.prod-card {
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.4s;
}

/* Cat-card: línea de acento arriba */
.cat-card {
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

/* Hover CSS — sólo puntero fino */
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: var(--shadow-lift);
    border-color: var(--green-pale-2);
  }
  .cat-card:hover::before { transform: scaleX(1); }

  .srv-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: var(--shadow-lift), 0 0 0 1px var(--green-pale-2);
  }

  .team-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-lift);
  }

  .prod-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
}

/* ── TILT 3D — preparar transform-style ─────────────────────── */
.cat-card,
.srv-card,
.team-card {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
}

/* ── FOOTER — SEPARADOR DECORATIVO ──────────────────────────── */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem; right: 2rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--green-pale-2) 20%,
    var(--border) 50%,
    var(--green-pale-2) 80%,
    transparent 100%
  );
}

/* ── STATS — números con easing premium ─────────────────────── */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* ── HERO CARDS — lift suave ─────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .hero__card {
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .hero__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
}

/* ── CURSOR CUSTOM ───────────────────────────────────────────── */
@media (pointer: fine) {
  body { cursor: none !important; }
  a, button, [role="button"], .cat-card, .srv-card, .team-card,
  .prod-card, label, .btn { cursor: none !important; }
}

#cursor {
  position: fixed;
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, width 0.22s var(--ease), height 0.22s var(--ease), background 0.22s;
}
#cursor.cursor-hover {
  width: 12px;
  height: 12px;
  background: var(--green-mid);
}
#cursor.cursor-click {
  width: 16px;
  height: 16px;
  opacity: 0.5 !important;
}

#cursorRing {
  position: fixed;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(26, 107, 74, 0.35);
  pointer-events: none;
  z-index: 999998;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  transition:
    opacity 0.3s,
    width 0.4s var(--ease-soft),
    height 0.4s var(--ease-soft),
    border-color 0.3s;
}
#cursorRing.cursor-hover {
  width: 52px;
  height: 52px;
  border-color: rgba(26, 107, 74, 0.6);
  background: rgba(26, 107, 74, 0.03);
}
#cursorLabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* ── MAGNETIC BUTTONS ────────────────────────────────────────── */
[data-magnetic] { will-change: transform; }

/* ── SECTION LABEL — línea decorativa ───────────────────────── */
.label {
  position: relative;
  padding-bottom: 0.5rem;
  display: inline-block;
}
.label::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1.5px;
  width: 2rem;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.1s;
}
.revealed .label::after,
.label.revealed::after,
.section-header.revealed .label::after { transform: scaleX(1); }

/* ── STAGGER CSS — grids ─────────────────────────────────────── */
.cat-grid .cat-card.reveal-up:nth-child(1) { transition-delay: 0s; }
.cat-grid .cat-card.reveal-up:nth-child(2) { transition-delay: 0.07s; }
.cat-grid .cat-card.reveal-up:nth-child(3) { transition-delay: 0.14s; }
.cat-grid .cat-card.reveal-up:nth-child(4) { transition-delay: 0.21s; }
.cat-grid .cat-card.reveal-up:nth-child(5) { transition-delay: 0.07s; }
.cat-grid .cat-card.reveal-up:nth-child(6) { transition-delay: 0.14s; }
.cat-grid .cat-card.reveal-up:nth-child(7) { transition-delay: 0.21s; }
.cat-grid .cat-card.reveal-up:nth-child(8) { transition-delay: 0.28s; }

.srv-grid .srv-card.reveal-up:nth-child(1) { transition-delay: 0s; }
.srv-grid .srv-card.reveal-up:nth-child(2) { transition-delay: 0.07s; }
.srv-grid .srv-card.reveal-up:nth-child(3) { transition-delay: 0.14s; }
.srv-grid .srv-card.reveal-up:nth-child(4) { transition-delay: 0.07s; }
.srv-grid .srv-card.reveal-up:nth-child(5) { transition-delay: 0.14s; }
.srv-grid .srv-card.reveal-up:nth-child(6) { transition-delay: 0.21s; }

/* ── WHATSAPP BTN — pulse premium ────────────────────────────── */
@keyframes waPulse {
  0%   { box-shadow: 0 4px 18px rgba(37,211,102,.25), 0 0 0 0   rgba(37,211,102,0); }
  35%  { box-shadow: 0 4px 18px rgba(37,211,102,.25), 0 0 0 8px rgba(37,211,102,.14); }
  70%  { box-shadow: 0 4px 18px rgba(37,211,102,.25), 0 0 0 18px rgba(37,211,102,.05); }
  100% { box-shadow: 0 4px 18px rgba(37,211,102,.25), 0 0 0 24px rgba(37,211,102,0); }
}
.whatsapp-btn {
  animation: waPulse 3.5s cubic-bezier(0.23,1,0.32,1) infinite !important;
  transition: transform 0.22s var(--ease), box-shadow 0.22s !important;
}
.whatsapp-btn:hover {
  animation-play-state: paused !important;
  transform: scale(1.1) translateY(-3px) !important;
}

/* ── MOBILE — desactivar tilt + will-change ──────────────────── */
@media (max-width: 860px) {
  .cat-card, .srv-card, .team-card {
    will-change: auto;
    transform-style: flat;
  }
  /* Reveals más rápidos en mobile */
  .reveal-up, .reveal-left, .reveal-right {
    transform: translateY(18px) !important;
    transition:
      opacity 0.55s var(--ease),
      transform 0.55s var(--ease) !important;
  }
  .reveal-left  { transform: translateX(-14px) !important; }
  .reveal-right { transform: translateX(14px) !important; }
}

/* ── HERO LINE REVEAL — blur premium ────────────────────────── */
/* Override de reveal-up específicamente en el hero */
.hero__title .reveal-up,
.hero__sub.reveal-up,
.hero__badge.reveal-up {
  filter: blur(8px);
  transition:
    opacity  1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__title .reveal-up.revealed,
.hero__sub.reveal-up.revealed,
.hero__badge.reveal-up.revealed {
  filter: blur(0) !important;
}

/* Mobile — sin blur (performance) */
@media (max-width: 860px) {
  .hero__title .reveal-up,
  .hero__sub.reveal-up,
  .hero__badge.reveal-up {
    filter: none;
    transition:
      opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── WORD SPLIT — hero h1 (inyectado por luxury.js) ─────────── */
.word-split {
  display: inline-block;
  opacity: 0;
  transform: translateY(52px);
  filter: blur(5px);
  animation: wordReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.15s + var(--wi, 0) * 0.085s);
}
@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Mobile — desactivado */
@media (max-width: 860px) {
  .word-split {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── FOOTER COL LINKS — letter-spacing hover ─────────────────── */
.footer-col a {
  transition: color 0.25s var(--ease), letter-spacing 0.35s var(--ease);
  letter-spacing: 0em;
}
.footer-col a:hover { letter-spacing: 0.015em; }

/* ── MOBILE — tap highlight + touch reset ───────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* ── PREFERS REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero__title .reveal-up,
  .hero__sub.reveal-up {
    filter: none !important;
  }
  .word-split {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .whatsapp-btn { animation: none !important; }
  .cat-card, .srv-card, .team-card { transform: none !important; }
}