/* ═══════════════════════════════════════════════════════════
   RAIAN — Product Pages Design System v2
   Cargado después de los estilos específicos de cada página.
   Mejoras de tipografía, animaciones, botones y cards.
═══════════════════════════════════════════════════════════ */

/* ── Fuente Inter (profesional, consistente en todos los SO) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Eyebrow badges ─────────────────────────────────────── */
.eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}

/* ── Botones — shimmer en hover ─────────────────────────── */
.btn,
.amazon-btn,
.download-btn,
.download-box a,
.review-note {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after,
.amazon-btn::after,
.download-btn::after,
.download-box a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.24) 50%,
    transparent 70%
  );
  translate: -150% 0;
  transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.btn:hover::after,
.amazon-btn:hover::after,
.download-btn:hover::after,
.download-box a:hover::after {
  translate: 150% 0;
}

/* ── Cards — lift + escala en hover ─────────────────────── */
.card,
.ritual-card,
.faq-card,
.benefit-card,
.meaning-card,
.sleep-benefit-card,
.mini-card {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  cursor: default;
}

.card:hover,
.ritual-card:hover,
.faq-card:hover,
.benefit-card:hover,
.meaning-card:hover,
.sleep-benefit-card:hover,
.mini-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ── Hero product image — sin caja blanca, flotando ─────── */
/* Aplica en 7nudos y turmalina donde el hero-card contiene la imagen */
.hero-box .hero-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.hero-box .hero-card img {
  border-radius: 26px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.07),
    0 16px 40px rgba(0, 0, 0, 0.14),
    0 40px 80px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.4s ease;
}

.hero-box .hero-card:hover img {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 24px 56px rgba(0, 0, 0, 0.18),
    0 56px 96px rgba(0, 0, 0, 0.12);
}

/* Flotación animada para la imagen hero en 7nudos y turmalina */
@keyframes raian-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

.hero-box .hero-card {
  animation: raian-float 4.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-box .hero-card { animation: none; }
}

/* ── Hero visual en mixtas (2-col con imagen a la derecha) ─ */
.hero-visual {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.hero-visual img {
  border-radius: 22px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.07),
    0 16px 40px rgba(0, 0, 0, 0.14),
    0 40px 80px rgba(0, 0, 0, 0.1);
}

/* ── Split sections — zoom suave en la imagen al hover ──── */
.split-image {
  overflow: hidden;
}

.split-image img {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-image:hover img {
  transform: scale(1.04);
}

/* ── Touch visual (turmalina) ───────────────────────────── */
.touch-visual {
  overflow: hidden;
}

.touch-visual img {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.touch-visual:hover img {
  transform: scale(1.04);
}

/* ── Video frame — brillo sutil ─────────────────────────── */
.product-video-frame {
  transition: box-shadow 0.3s ease;
}

.product-video-frame:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14) !important;
}

/* ── Download / final dark boxes — más profundidad ─────── */
.download-box,
.final-box {
  position: relative;
  overflow: hidden;
}

.download-box::before,
.final-box::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  left: -200px;
  bottom: -200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* ── Info boxes ─────────────────────────────────────────── */
.info-box {
  transition: transform 0.28s ease;
}

.info-box:hover {
  transform: translateY(-3px);
}

/* ── Related products items ─────────────────────────────── */
.related-item {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-item:hover {
  transform: translateY(-5px);
}

/* ── Nasal feature sections ─────────────────────────────── */
.nasal-feature {
  transition: box-shadow 0.3s ease;
}

/* ── Buy card shimmer ───────────────────────────────────── */
.buy-card,
.combo-explanation {
  position: relative;
  overflow: hidden;
}

.buy-card::after,
.combo-explanation::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ── Mejoras tipográficas globales ──────────────────────── */
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.015em; }

p {
  -webkit-font-smoothing: antialiased;
}

/* ── Scroll smooth en iOS ───────────────────────────────── */
.gallery {
  -webkit-overflow-scrolling: touch;
}

/* ── Focus visible mejorado ─────────────────────────────── */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Hero — glow decorativo detrás de la imagen ────────── */
.hero-box {
  position: relative;
}

.hero-box::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  right: -80px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 155, 60, 0.11) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero-box > * {
  position: relative;
  z-index: 1;
}

/* ── Trust bar — estrellas y opiniones bajo los botones ─── */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  flex-wrap: wrap;
}

.hero-trust__stars {
  color: #ff9900;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.hero-trust__sep {
  opacity: 0.35;
}

/* ── Mobile: hero cards de nasales/bucales más compactas ── */
@media (max-width: 600px) {
  .hero-cards {
    gap: 10px !important;
  }

  .hero-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }
}