/* ═══════════════════════════════════════════════════════════════
   Sthefy Maquilla — finishing layer
   Soft reveals, gold glints, refined buttons, glass navbar, lightbox.
   Loaded on every public page after the page's own styles.
   Everything is disabled under prefers-reduced-motion.
═══════════════════════════════════════════════════════════════ */
:root {
  --fx-gold: #C8A87C;
  --fx-gold-deep: #A68B5B;
  --fx-gold-light: #E9D6B5;
  --fx-cream: #FFFAF5;
  --fx-ink: #2D2D2D;
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fx-slow: 1.1s;
}

/* ── Page-to-page fade (Chrome, Edge, Safari 18.2+) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-vt-out .35s var(--fx-ease) both; }
::view-transition-new(root) { animation: fx-vt-in .55s var(--fx-ease-out) both; }
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ── Typography polish ── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; font-kerning: normal; }
p { text-wrap: pretty; }
::selection { background: rgba(200, 168, 124, .32); color: inherit; }
:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--fx-gold-light) transparent; scrollbar-width: thin; }

/* ── Scroll progress hairline ── */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001; pointer-events: none;
  background: linear-gradient(90deg, var(--fx-gold-light), var(--fx-gold) 60%, var(--fx-gold-deep));
  transform-origin: 0 50%; transform: scaleX(0);
  opacity: .85;
}

/* ── Reveals: slower, softer, with a breath of blur ── */
.reveal, .reveal-left, .reveal-right, .reveal-stagger > *, .fx-in {
  transition:
    opacity var(--fx-slow) var(--fx-ease),
    transform var(--fx-slow) var(--fx-ease-out),
    filter var(--fx-slow) var(--fx-ease) !important;
}
.reveal { transform: translateY(22px); filter: blur(5px); }
.reveal-left { transform: translateX(-28px); filter: blur(5px); }
.reveal-right { transform: translateX(28px); filter: blur(5px); }
.reveal-stagger > * { transform: translateY(18px) scale(.985); filter: blur(4px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-stagger.visible > * {
  transform: none; filter: none;
}
.fx-in { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.fx-in.fx-shown { opacity: 1; transform: none; filter: none; }

/* ── Hero: slow Ken Burns, long crossfade, word-by-word title ── */
.hero-slide { transition: opacity 1.4s var(--fx-ease) !important; }
.hero-slide img { transform: scale(1.04); transition: transform 7.5s linear; will-change: transform; }
.hero-slide.active img { transform: scale(1.12); }
.fx-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
  animation: fx-word 1.1s var(--fx-ease-out) forwards; }
@keyframes fx-word { to { opacity: 1; transform: none; filter: none; } }
.hero-content h1.fx-split { opacity: 1 !important; transform: none !important; animation: none !important; }
.fx-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.hero-content { z-index: 2; }

/* ── Gold glint on primary buttons ── */
.btn-primary, .nav-cta, .btn-cta, .fx-glint {
  position: relative; overflow: hidden; isolation: isolate;
  background-image: linear-gradient(135deg, #D2B48A 0%, var(--fx-gold) 45%, #B8975F 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px -10px rgba(166,139,91,.55);
  transition: transform .45s var(--fx-ease-out), box-shadow .45s var(--fx-ease), filter .3s !important;
}
.btn-primary::after, .nav-cta::after, .btn-cta::after, .fx-glint::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
  animation: fx-glint 5.5s var(--fx-ease) infinite;
  animation-delay: var(--fx-glint-delay, 1.8s);
  pointer-events: none;
}
@keyframes fx-glint {
  0%, 78% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  80% { opacity: 1; }
  100% { transform: skewX(-18deg) translateX(560%); opacity: 0; }
}
.btn-primary:hover, .nav-cta:hover, .btn-cta:hover, .fx-glint:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -12px rgba(166,139,91,.65);
  filter: saturate(1.05) brightness(1.03);
}
.btn-primary:active, .nav-cta:active, .btn-cta:active { transform: translateY(0) scale(.985); }

.btn-outline { transition: transform .45s var(--fx-ease-out), background-color .45s var(--fx-ease), color .45s, border-color .45s, box-shadow .45s !important; }
.btn-outline:hover { box-shadow: 0 12px 28px -14px rgba(166,139,91,.6); }

/* Ripple left by a tap */
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%) scale(0); animation: fx-ripple .8s var(--fx-ease-out) forwards;
}
@keyframes fx-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* WhatsApp float: a slow breath instead of a pulse */
.whatsapp-float, .wa-float { animation: none !important; transition: transform .45s var(--fx-ease-out), box-shadow .45s !important; }
.whatsapp-float::before, .wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .35);
  animation: fx-breath 4.2s var(--fx-ease) infinite;
}
@keyframes fx-breath {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .32); }
  60%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}
.whatsapp-float:hover, .wa-float:hover { transform: translateY(-3px) scale(1.04); }

/* ── Glass navbar with a gold hairline ── */
.navbar { transition: background-color .6s var(--fx-ease), box-shadow .6s var(--fx-ease), backdrop-filter .6s !important; }
.navbar.scrolled {
  background: rgba(255, 250, 245, .78) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 rgba(200,168,124,.28), 0 10px 30px -18px rgba(45,45,45,.18) !important;
}
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fx-gold), transparent);
  transform: scaleX(0); transition: transform .5s var(--fx-ease-out);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* ── Section labels and dividers ── */
.section-label { letter-spacing: .28em; }
.section-divider {
  position: relative; overflow: hidden; height: 1px !important; width: 72px !important;
  background: linear-gradient(90deg, transparent, var(--fx-gold), transparent) !important;
  transition: transform 1.2s var(--fx-ease-out) .25s !important;
}
.section-divider::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translateX(-120%);
}
.visible .section-divider::after { animation: fx-line-glint 1.6s var(--fx-ease) 1.2s 1 both; }
@keyframes fx-line-glint { to { transform: translateX(320%); } }

/* ── Cards: gentle lift ── */
.novia-card, .service-card, .otro-card, .alianza-card, .blog-card, .related-card, .blog-preview-card, .review-card, .faq-item {
  transition: transform .6s var(--fx-ease-out), box-shadow .6s var(--fx-ease), border-color .5s !important;
}
@media (hover: hover) {
  .novia-card:hover, .service-card:hover, .otro-card:hover, .alianza-card:hover,
  .blog-card:hover, .related-card:hover, .blog-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -28px rgba(166,139,91,.55), 0 2px 8px -4px rgba(45,45,45,.06) !important;
  }
  .review-card:hover { transform: translateY(-3px); }
}
/* Featured pack: a slow gold halo traced around the border */
.fx-halo { position: relative; }
.fx-halo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--fx-angle, 0deg), transparent 0deg, rgba(200,168,124,.0) 40deg, var(--fx-gold) 90deg, #F3E3C7 120deg, rgba(200,168,124,0) 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 9s linear infinite;
}
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* ── Images: settle in softly once loaded ── */
img.fx-img { opacity: 0; transform: scale(1.015); transition: opacity 1s var(--fx-ease), transform 1.4s var(--fx-ease-out); }
img.fx-img.fx-loaded { opacity: 1; transform: none; }

/* ── Gallery ── */
.gallery-item { cursor: zoom-in; }
.gallery-item img { transition: transform 1.6s var(--fx-ease-out), filter 1s var(--fx-ease) !important; }
@media (hover: hover) {
  .gallery-item:hover img { transform: scale(1.06) !important; filter: saturate(1.06); }
}
.gallery-item-overlay { transition: opacity .8s var(--fx-ease) !important; }

/* ── Review stars: a glint passes now and then ── */
.fx-stars { background: linear-gradient(100deg, #F2B705 0%, #FBBC04 40%, #FFF2C2 50%, #FBBC04 60%, #F2B705 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: fx-stars 6s var(--fx-ease) 2s infinite; }
@keyframes fx-stars { 0%, 70% { background-position: 100% 0; } 100% { background-position: -60% 0; } }

/* ── Lightbox ── */
.fx-lb { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: rgba(20, 17, 15, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--fx-ease), visibility 0s .6s; touch-action: pan-y; }
.fx-lb.open { opacity: 1; visibility: visible; transition: opacity .6s var(--fx-ease); }
.fx-lb figure { margin: 0; max-width: min(92vw, 1100px); max-height: 86vh; display: grid; gap: 14px; justify-items: center; }
.fx-lb img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  transform: scale(.965); opacity: 0; transition: transform .7s var(--fx-ease-out), opacity .5s var(--fx-ease); }
.fx-lb.open img.ready { transform: none; opacity: 1; }
.fx-lb figcaption { color: rgba(255,250,245,.78); font-size: .85rem; letter-spacing: .04em; text-align: center; max-width: 60ch; }
.fx-lb-count { color: var(--fx-gold-light); font-size: .72rem; letter-spacing: .3em; }
.fx-lb button { position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(233,214,181,.35); color: var(--fx-cream);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px;
  transition: background-color .4s var(--fx-ease), transform .4s var(--fx-ease-out), border-color .4s; }
.fx-lb button:hover { background: rgba(200,168,124,.25); border-color: var(--fx-gold); transform: scale(1.06); }
.fx-lb .fx-lb-close { top: max(18px, env(safe-area-inset-top)); right: 18px; }
.fx-lb .fx-lb-prev { left: 18px; top: 50%; margin-top: -24px; }
.fx-lb .fx-lb-next { right: 18px; top: 50%; margin-top: -24px; }
@media (max-width: 640px) { .fx-lb .fx-lb-prev, .fx-lb .fx-lb-next { top: auto; bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; } }
.lightbox { display: none !important; }

/* ── Reduced motion: everything still, everything visible ── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .reveal, .reveal-left, .reveal-right, .reveal-stagger > *, .fx-in, img.fx-img, .fx-word {
    opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important;
  }
  .hero-slide img { transform: none !important; transition: none !important; }
  .btn-primary::after, .nav-cta::after, .btn-cta::after, .fx-glint::after, .fx-halo::before,
  .whatsapp-float::before, .wa-float::before, .section-divider::after, .fx-stars { animation: none !important; }
  .fx-sparkles, .fx-progress { display: none !important; }
}