/* =====================================================
   GABRIEL HEALTH BEAUTY — CAPA DE DISEÑO "DRAMÁTICO"
   Este archivo SOLO añade estilo visual (gradientes, glow,
   parallax, tilt 3D, partículas). No modifica estructura,
   textos ni lógica del sitio. Se carga DESPUÉS de style.css
   para poder sobrescribir con seguridad.
   ===================================================== */

:root {
  --gd-gold: #E9C179;
  --gd-gold-2: #F4E0AE;
  --gd-rose: #D47B8A;
  --gd-rose-2: #B05A6A;
  --gd-glow: 0 0 40px rgba(233, 193, 121, 0.55);
  --gd-glow-soft: 0 0 24px rgba(233, 193, 121, 0.35);
  --gd-gradient-gold: linear-gradient(120deg, #B05A6A 0%, #D47B8A 35%, #E9C179 70%, #F4E0AE 100%);
  --gd-gradient-gold-anim: linear-gradient(115deg, #B05A6A, #D47B8A, #E9C179, #F4E0AE, #D47B8A, #B05A6A);
  --gd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Entrada general de la página ---------- */
html { scroll-behavior: smooth; }
body {
  opacity: 0;
  animation: gd-page-in 0.7s var(--gd-ease) forwards;
}
@keyframes gd-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Barra de progreso de scroll ---------- */
#gd-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gd-gradient-gold);
  background-size: 300% 100%;
  animation: gd-gradient-shift 6s linear infinite;
  z-index: 9999;
  pointer-events: none;
  transition: width 0.1s ease-out;
}

/* ---------- Glow que sigue el cursor (solo escritorio) ---------- */
#gd-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  margin-top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,193,121,0.14) 0%, rgba(212,123,138,0.08) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate3d(var(--gd-x, -500px), var(--gd-y, -500px), 0);
  transition: transform 0.12s linear, opacity 0.4s ease;
  will-change: transform;
}

@keyframes gd-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Header dinámico ---------- */
.site-header {
  transition: padding 0.35s var(--gd-ease), box-shadow 0.35s var(--gd-ease);
}
.site-header.gd-scrolled { padding: 8px 0; }
.site-header.gd-scrolled .header-bar {
  box-shadow: 0 18px 40px -18px rgba(140,60,80,0.5);
}
.header-bar {
  transition: box-shadow 0.35s var(--gd-ease), transform 0.35s var(--gd-ease);
}
.logo-mark {
  transition: transform 0.5s var(--gd-ease), box-shadow 0.5s var(--gd-ease);
}
.logo-slot:hover .logo-mark {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: inset 0 0 0 1px rgba(233,193,121,0.5), var(--gd-glow-soft);
}

.main-nav a { position: relative; overflow: hidden; }
.main-nav a::before {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: var(--gd-gradient-gold);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--gd-ease);
}
.main-nav a:hover::before,
.main-nav a.active::before { transform: scaleX(1); }

/* ---------- Botones con brillo dorado ---------- */
.btn-pill-primary,
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gd-gradient-gold-anim);
  background-size: 300% 100%;
  animation: gd-gradient-shift 8s ease infinite;
  transition: transform 0.35s var(--gd-ease), box-shadow 0.35s var(--gd-ease);
}
.btn-pill-primary::after,
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-pill-primary:hover::after,
.btn-primary:hover::after { left: 130%; }
.btn-pill-primary:hover,
.btn-primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--gd-glow), 0 18px 30px -10px rgba(176,90,106,0.55);
}
.btn-pill-outline,
.btn-outline {
  transition: transform 0.35s var(--gd-ease), box-shadow 0.35s var(--gd-ease), background 0.35s ease, border-color 0.35s ease;
}
.btn-pill-outline:hover,
.btn-outline:hover { box-shadow: var(--gd-glow-soft); }

/* ---------- Hero: texto con brillo + profundidad ---------- */
.hero-blossom { perspective: 1400px; }
.hero-blossom-title em {
  background: var(--gd-gradient-gold-anim);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gd-gradient-shift 6s ease infinite;
}
.hero-blossom-frame {
  transform-style: preserve-3d;
  transition: transform 0.25s var(--gd-ease), box-shadow 0.4s ease;
  will-change: transform;
}
.hero-blossom-frame::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  padding: 3px;
  background: var(--gd-gradient-gold-anim);
  background-size: 300% 100%;
  animation: gd-gradient-shift 7s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}
.hero-blossom-visual:hover .hero-blossom-frame::before { opacity: 1; }
.hero-blossom-visual:hover .hero-blossom-frame { box-shadow: 0 40px 70px -20px rgba(140,60,80,0.5), var(--gd-glow-soft); }

.hero-blossom-sparkle {
  animation: gd-sparkle-spin 5s ease-in-out infinite;
}
@keyframes gd-sparkle-spin {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(233,193,121,0)); }
  50% { transform: scale(1.35) rotate(20deg); filter: drop-shadow(0 0 10px rgba(233,193,121,0.8)); }
}

.stat-chip {
  transition: transform 0.4s var(--gd-ease), box-shadow 0.4s var(--gd-ease);
}
.stat-chip:hover { transform: translateY(-4px); box-shadow: var(--gd-glow-soft); }

/* ---------- Partículas doradas flotantes (inyectadas por JS) ---------- */
.gd-particle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.gd-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,224,174,0.95) 0%, rgba(233,193,121,0.5) 55%, transparent 75%);
  opacity: 0;
  animation-name: gd-float-up;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes gd-float-up {
  0%   { transform: translate3d(0, 20px, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translate3d(var(--gd-drift, 12px), -60px, 0) scale(1); opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { transform: translate3d(calc(var(--gd-drift, 12px) * -1), -130px, 0) scale(0.5); opacity: 0; }
}

/* ---------- Tarjetas: solo elevación suave + brillo (sin inclinación 3D) ---------- */
.card-package,
.gallery-grid .g-item,
.testimonial-card {
  transition: transform 0.35s var(--gd-ease), box-shadow 0.35s var(--gd-ease);
}
.card-package:hover,
.gallery-grid .g-item:hover {
  box-shadow: 0 30px 50px -18px rgba(62,42,48,0.28), var(--gd-glow-soft);
}
.gallery-grid .g-item { position: relative; }
.gallery-grid .g-item img {
  transition: transform 0.6s var(--gd-ease), filter 0.6s ease;
}
.gallery-grid .g-item:hover img { transform: scale(1.12); filter: saturate(1.15) brightness(1.03); }
.gallery-grid .g-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(233,193,121,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.gallery-grid .g-item:hover::after { opacity: 1; }

.testimonial-card:hover {
  box-shadow: 0 26px 46px -18px rgba(0,0,0,0.35), var(--gd-glow-soft);
}

/* ---------- Fondos animados en secciones oscuras / CTA ---------- */
.section-dark,
.home-cta .cta-band {
  background-size: 200% 200% !important;
}
.section-dark::before,
.home-cta .cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(233,193,121,0.10), transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(212,123,138,0.14), transparent 45%);
  animation: gd-bg-drift 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.home-testimonials-band .wrap,
.home-cta-copy,
.home-cta-actions { position: relative; z-index: 2; }

@keyframes gd-bg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -3%) scale(1.05); }
}

.home-cta-btn { position: relative; z-index: 2; }

/* ---------- Reveal dramático (sobrescribe el reveal base) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(46px) scale(0.94) rotateX(6deg);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--gd-ease),
    transform 0.9s var(--gd-ease),
    filter 0.9s var(--gd-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0);
}

/* Escalonado (stagger) dentro de grillas de tarjetas */
.grid-3 .reveal:nth-child(1), .gallery-grid .reveal:nth-child(1), .testimonial-track .reveal:nth-child(1) { transition-delay: 0s; }
.grid-3 .reveal:nth-child(2), .gallery-grid .reveal:nth-child(2), .testimonial-track .reveal:nth-child(2) { transition-delay: 0.12s; }
.grid-3 .reveal:nth-child(3), .gallery-grid .reveal:nth-child(3), .testimonial-track .reveal:nth-child(3) { transition-delay: 0.24s; }
.grid-3 .reveal:nth-child(4), .gallery-grid .reveal:nth-child(4) { transition-delay: 0.36s; }
.grid-3 .reveal:nth-child(5), .gallery-grid .reveal:nth-child(5) { transition-delay: 0.48s; }

/* ---------- Scrollbar personalizada ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt, #FDF0EC); }
::-webkit-scrollbar-thumb {
  background: var(--gd-gradient-gold);
  border-radius: 10px;
}
html { scrollbar-color: var(--gd-gold) var(--color-bg-alt, #FDF0EC); }

/* ---------- Footer con detalle dorado ---------- */
.footer-wave svg path { fill: var(--color-plum, #3E2A30); }
.footer-brand-mark {
  transition: transform 0.5s var(--gd-ease);
}
.footer-brand-blossom:hover .footer-brand-mark { transform: rotate(8deg) scale(1.06); }
.footer-social a {
  transition: transform 0.35s var(--gd-ease), box-shadow 0.35s var(--gd-ease), color 0.3s ease;
}
.footer-social a:hover {
  transform: translateY(-4px);
  color: var(--gd-gold);
  box-shadow: var(--gd-glow-soft);
}

/* ---------- Accesibilidad: respetar "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn-pill-primary, .btn-primary,
  .hero-blossom-title em,
  #gd-progress { animation: none; }
  #gd-cursor-glow, .gd-particle-field { display: none; }
  .hero-blossom-frame, .card-package, .gallery-grid .g-item, .testimonial-card {
    transition: none;
  }
}

/* En móvil / pantallas táctiles bajamos el costo: sin glow de cursor ni tilt 3D */
@media (hover: none), (pointer: coarse) {
  #gd-cursor-glow { display: none; }
  .card-package, .gallery-grid .g-item, .testimonial-card, .hero-blossom-frame {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .gd-particle-field { display: none; }
}

/* =====================================================
   HERO INICIO — nubes flotantes + color más vivo
   Todo limitado a .hero-blossom (solo existe en index.php),
   no afecta ninguna otra página del sitio.
   ===================================================== */

/* ---------- Nubes flotantes (solo decorativas) ---------- */
.hero-cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
  animation: gd-cloud-drift 9s ease-in-out infinite;
}
.hero-cloud::before,
.hero-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.hero-cloud--1 { width: 150px; height: 70px; top: 8%; left: 5%; }
.hero-cloud--1::before { width: 80px; height: 80px; top: -42px; left: 16px; }
.hero-cloud--1::after  { width: 60px; height: 60px; top: -28px; left: 78px; }

.hero-cloud--2 { width: 110px; height: 55px; top: 58%; left: 2%; background: #FDE0EC; animation-delay: 1.4s; }
.hero-cloud--2::before { width: 62px; height: 62px; top: -32px; left: 12px; }

.hero-cloud--3 { width: 120px; height: 58px; top: 10%; right: 6%; animation-delay: 0.7s; }
.hero-cloud--3::before { width: 66px; height: 66px; top: -32px; left: 10px; }

@keyframes gd-cloud-drift {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-14px) translateX(6px); }
}

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

@media (max-width: 760px) {
  .hero-cloud--1 { width: 100px; height: 48px; }
  .hero-cloud--1::before { width: 56px; height: 56px; top: -30px; left: 10px; }
  .hero-cloud--1::after  { width: 42px; height: 42px; top: -20px; left: 54px; }
  .hero-cloud--2 { display: none; }
  .hero-cloud--3 { width: 80px; height: 40px; }
  .hero-cloud--3::before { width: 46px; height: 46px; top: -22px; left: 8px; }
}

/* ---------- Color más vivo (solo dentro del hero del inicio) ---------- */
.hero-blossom-title em {
  background: linear-gradient(100deg, #C21F63, #E9578F, #E9C179, #E9578F, #C21F63);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-blossom-copy .eyebrow,
.hero-blossom-copy .eyebrow-flor {
  color: #C21F63;
}
.hero-blossom-copy .eyebrow::before {
  background: #C21F63;
}
.hero-blossom-actions .btn-pill-primary {
  background: linear-gradient(135deg, #E9578F 0%, #C21F63 100%);
  background-size: 100% 100%;
  animation: none;
  box-shadow: 0 16px 30px -12px rgba(194,31,99,0.55);
}
.hero-blossom-actions .btn-pill-primary:hover {
  box-shadow: 0 16px 30px -12px rgba(194,31,99,0.7);
}