/* ============================================================
   LUMINIA SPA — Design tokens & Layout Multi-Servicio
   ============================================================ */
:root{
  --paper:#f4f3ee;
  --paper-2:#ebe9e2;
  --ink:#15161a;
  --ink-soft:#55555c;
  --line:rgba(21,22,26,.15);
  --line-strong:rgba(21,22,26,.4);
  --rose:#c0355f;
  --rose-deep:#8f2247;
  --plum:#180d14;
  --plum-2:#241220;
  --gold:#d9a600;
  --gold-glow:#f3c94a;
  --cream-text:#f2e6d3;
  --muted-dark:#c9b3bd;
  --green:#25d366;
  --green-2:#1ab855;
  --radius-sharp:6px;
  --radius-card:10px;
  --shadow:0 20px 50px rgba(21,22,26,.1);
  --shadow-dark:0 24px 60px rgba(0,0,0,.45);
  --font-display:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;background:none;border:none;color:inherit}

.wrap{width:min(1140px,92%);margin:auto;position:relative;z-index:1}

/* ============================================================
   REVEAL BASICS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px)}
.reveal.show{opacity:1;transform:translateY(0);transition:opacity .8s ease, transform .8s ease}
.no-gsap .reveal{opacity:1;transform:none}

/* ============================================================
   TYPOGRAPHY & GLOBAL STYLES
   ============================================================ */
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12}
h3{font-size:19px;font-weight:700}

.tag-mono{
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:1.5px;
  color:var(--rose-deep);margin-bottom:14px;text-transform:uppercase;
}
.tag-mono-light{color:var(--gold-glow)}
.s-head{max-width:640px;margin:0 auto 48px;text-align:center}
.s-desc{color:var(--ink-soft);font-size:16.5px;margin-top:14px;line-height:1.75}

section{padding:96px 0}
.section-paper{background:var(--paper)}
.section-line{background:var(--paper-2)}
.section-dark{background:var(--plum);position:relative;overflow:hidden}
.background-white { background: #ffffff; }
.background-dark { background: var(--plum); }
.color-cream { color: var(--cream-text); }
.color-muted { color: var(--muted-dark); }
.text-center { text-align: center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--radius-sharp);font-weight:600;font-size:14.5px;
  transition:box-shadow .25s ease, background .25s ease, transform .2s ease;white-space:nowrap;
}
.btn-wa{
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:white;box-shadow:0 14px 34px rgba(37,211,102,.28);border-radius:999px;
}
.btn-wa:hover{box-shadow:0 20px 44px rgba(37,211,102,.4)}
.btn-gold{
  background:var(--gold);color:#1c1204;box-shadow:0 14px 34px rgba(217,166,0,.32);
}
.btn-line-dark{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-line-dark:hover{background:var(--ink);color:var(--paper)}
.btn-line-light{border:1.5px solid var(--gold-glow);color:var(--gold-glow);background:transparent}
.btn-line-light:hover{background:var(--gold-glow);color:var(--plum)}
.btn-lg{padding:18px 34px;font-size:15.5px}
.btn-sm{padding:10px 20px;font-size:13.5px}
.btn-block{width:100%}
.ico-wa{width:20px;height:20px;fill:currentColor}
.magnetic{will-change:transform}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  background:rgba(244,243,238,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{height:44px;width:auto}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--ink)}
.nav-links a{position:relative;padding-bottom:4px}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--rose);transition:width .3s ease;
}
.nav-links a.active, .nav-links a:hover{color:var(--rose-deep)}
.nav-links a.active::after, .nav-links a:hover::after{width:100%}

.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px}
.mobile-menu{
  display:none;flex-direction:column;gap:2px;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:8px 5% 20px;
}
.mobile-menu a{padding:12px 0;font-size:15px;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:14px}
.mobile-menu.open{display:flex}

@media(max-width:860px){
  .nav-links, .nav-cta{display:none}
  .menu-toggle{display:flex}
}

/* ============================================================
   NUEVO HERO CLEAN SELECTION
   ============================================================ */
.hero-clean {
  padding: 150px 0 90px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.split-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px; opacity:.4;
}
.hero-clean-content {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hero-main-title {
  font-size: clamp(38px, 4.8vw, 62px); line-height: 1.1; margin-bottom: 20px;
}
.hero-main-title span { color: var(--rose-deep); }
.hero-main-desc {
  font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-soft);
  max-width: 700px; margin-bottom: 44px; line-height: 1.6;
}
.hero-selection-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 100%; max-width: 860px;
}
.service-selector-card {
  background: white; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--line); text-align: left;
}
.service-selector-card:hover {
  transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.12);
}
.selector-image { width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.selector-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-selector-card:hover .selector-image img { transform: scale(1.04); }
.selector-info { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.selector-info p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.selector-reiki .selector-info { background: var(--plum); color: var(--cream-text); }
.selector-reiki .selector-info p { color: var(--muted-dark); }
.selector-reiki h3 { color: var(--cream-text); }
.selector-btn { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--rose); margin-top: auto; padding-top: 12px;}
.selector-reiki .selector-btn { color: var(--gold-glow); }

.hero-anim{opacity:0;transform:translateY(24px)}
.no-gsap .hero-anim{opacity:1;transform:none}

/* ============================================================
   BLOQUES DE SERVICIO INDEPENDIENTES
   ============================================================ */
.section-services-block { padding: 100px 0; position: relative; overflow: hidden; }
.block-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.block-grid-reverse .block-copy { order: 2; }
.block-grid-reverse .block-visual { order: 1; }
.block-copy { display: flex; flex-direction: column; align-items: flex-start; }
.price-box-inline { display: flex; gap: 24px; margin: 24px 0 14px; flex-wrap: wrap; }
.price-item-mini, .price-item-mini-light { display: flex; flex-direction: column; border-left: 3px solid var(--rose); padding-left: 14px; }
.price-item-mini-light { border-left-color: var(--gold); }
.price-val { font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1; }
.price-lbl { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.price-item-mini-light .price-lbl { color: var(--muted-dark); }
.split-rays{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-conic-gradient(from 0deg at 100% 50%, rgba(217,166,0,.06) 0deg 1.5deg, transparent 1.5deg 10deg);
}
.benefits-mini-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 30px; }
.benefits-mini-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.check { color: var(--rose); font-weight: 700; }
.background-dark .check { color: var(--gold); }
.img-reveal { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1.5px solid var(--line-strong); }
.img-reveal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ============================================================
   GRID DE PRECIOS FIJO
   ============================================================ */
.pricing-container-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.price-card{
  border-radius:var(--radius-card);padding:32px 26px;display:flex;flex-direction:column;gap:14px;
  position:relative;transform-style:preserve-3d;will-change:transform;background: white;
}
.card-precision{border:1.5px solid var(--line-strong);box-shadow:var(--shadow)}
.card-energy{background:var(--plum);border:1.5px solid rgba(217,166,0,.3);box-shadow:var(--shadow-dark)}
.card-hybrid{
  background:var(--plum-2); border:1.5px solid var(--gold);box-shadow:var(--shadow-dark);color:var(--cream-text);
}
.corner-mark{position:absolute;width:14px;height:14px;pointer-events:none}
.corner-mark.tl{top:10px;left:10px;border-top:1.5px solid var(--rose);border-left:1.5px solid var(--rose)}
.corner-mark.br{bottom:10px;right:10px;border-bottom:1.5px solid var(--rose);border-right:1.5px solid var(--rose)}

.price-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#1c1204;font-size:11px;font-weight:700;padding:6px 16px;border-radius:999px;font-family:var(--font-mono);
}
.price-card-head h3{font-size:19px;line-height:1.3}
.card-energy h3, .card-hybrid h3 { color: var(--cream-text); }
.price-tag{font-family:var(--font-mono);font-size:34px;font-weight:700;color:var(--ink)}
.price-tag-light{color:var(--gold-glow)}
.price-tag .cur{font-size:20px;vertical-align:top;margin-right:2px}
.price-tag .per{font-family:var(--font-body);font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-left:4px}
.per-light{color:var(--muted-dark)}
.price-note{font-size:13px;font-weight:600;color:var(--gold);font-family:var(--font-mono)}
.price-desc{color:var(--ink-soft);font-size:14px;line-height:1.65;flex-grow:1}
.price-desc-light{color:var(--muted-dark)}

.shimmer{overflow:hidden}
.shimmer::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(217,166,0,.2), transparent);
  animation:shimmerSweep 4.5s ease-in-out infinite;
}
@keyframes shimmerSweep{0%{left:-60%}50%{left:120%}100%{left:120%}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--plum); overflow:hidden; padding:16px 0;
  border-top:1px solid rgba(217,166,0,.25); border-bottom:1px solid rgba(217,166,0,.25);
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.marquee-track{ display:flex; width:max-content; min-width:100vw; will-change:transform; animation:marqueeScroll var(--marquee-duration, 18s) linear infinite; }
.marquee-set{display:flex;gap:28px;padding-right:28px;flex:0 0 auto}
.marquee-track span{ font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:1.5px;color:var(--gold-glow);white-space:nowrap; }
.marquee-track .dot{color:var(--gold);opacity:.6}
@keyframes marqueeScroll{ from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--marquee-distance, 50%)))} }

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps-line{position:absolute;top:26px;left:0;width:100%;height:4px;z-index:0;overflow:visible}
.step-item{
  background:rgba(255,255,255,.04);border:1px solid rgba(217,166,0,.22);
  border-radius:var(--radius-sharp);padding:30px 24px;position:relative;z-index:1;
}
.step-num{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--gold);margin-bottom:10px}
.step-item h3{color:var(--cream-text);font-size:18px;margin-bottom:8px}
.step-item p{color:var(--muted-dark);font-size:14px;line-height:1.65}

@media(max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}.steps-line{display:none}}
@media(max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* ============================================================
   CARRUSEL DE TESTIMONIOS
   ============================================================ */
.carousel-wrap{position:relative}
.carousel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,85%);
  gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;cursor:grab;
}
.carousel-track::-webkit-scrollbar{display:none}
.testi-card{
  background:white;border:1.5px solid var(--line-strong);
  border-radius:var(--radius-card);padding:28px 24px;box-shadow:var(--shadow);scroll-snap-align:start;
}
.testi-quote{font-size:16px;font-style:italic;color:var(--ink);line-height:1.55;margin-bottom:16px}
.testi-name{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--rose-deep);letter-spacing:.4px}
.carousel-controls{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:20px}
.carousel-btn{
  width:40px;height:40px;border-radius:var(--radius-sharp);border:1.5px solid var(--line-strong);
  color:var(--ink);font-size:19px;display:flex;align-items:center;justify-content:center;background:white;
}
.carousel-dots{display:flex;gap:8px}
.carousel-dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:all .25s ease}
.carousel-dot.active{background:var(--rose);transform:scale(1.3)}

@media(min-width:901px){
  .carousel-track{grid-auto-columns:1fr;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1.5px solid var(--line-strong);border-radius:var(--radius-sharp);background:white;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-size:15.5px;font-weight:600;color:var(--ink);text-align:left}
.faq-arrow{font-size:20px;color:var(--rose);transition:transform .3s ease;}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-a{height:0;overflow:hidden}
.faq-a-inner{padding:0 24px 22px;color:var(--ink-soft);font-size:14.5px;line-height:1.7}

/* ============================================================
   CTA FINAL & FOOTER
   ============================================================ */
.final-split{background:var(--plum-2);text-align:center;padding:80px 0}
.final-split-center{max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.final-split-center h2{color:var(--cream-text)}
.final-cta-body{color:var(--muted-dark);font-size:16px;line-height:1.7;}

footer{background:var(--plum-2);padding:56px 0 40px;text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-logo{height:46px;filter:brightness(0) invert(1) opacity(.9);margin-bottom:6px}
footer p{color:var(--muted-dark);font-size:14px}
footer a{color:var(--gold-glow);font-weight:600}
.footer-fine{font-size:12px;opacity:.6;margin-top:10px}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;align-items:center;gap:10px}
.wa-float-bubble{
  background:var(--plum);color:var(--gold-glow);font-size:12.5px;font-weight:600;
  padding:9px 16px;border-radius:999px;box-shadow:var(--shadow-dark);white-space:nowrap;opacity:0;transform:translateX(8px);transition:all .3s ease;
}
.wa-float:hover .wa-float-bubble{opacity:1;transform:translateX(0)}
.wa-btn{
  position:relative;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(37,211,102,.4);
}
.wa-btn svg{width:30px;height:30px;fill:white;z-index:2}
.wa-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ============================================================
   PRELOADER & PROGRESS
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:all .6s ease;
}
.preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
.preloader-flower{width:140px;height:140px}
.preloader-label{font-family:var(--font-mono);font-size:14px;letter-spacing:5px;color:var(--rose-deep);opacity:0;animation:plLabel .6s ease forwards;animation-delay:1.3s}
@keyframes plLabel{to{opacity:1}}
.pl-petal{transform:rotate(var(--rot));transform-origin:0 0}
.pl-petal path{
  fill:#e6a6bb;stroke:var(--gold);stroke-width:1.2;opacity:0;transform:scale(.25);transform-origin:0 0;
  animation:plBloom .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--d) * 110ms);
}
.pl-petal:nth-child(even) path{fill:#c97b95}
.pl-petal-gold path{fill:var(--gold) !important}
@keyframes plBloom{to{opacity:1;transform:scale(1)}}

.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:250;
  background:linear-gradient(90deg,var(--rose),var(--gold));
}

/* ============================================================
   RESPONSIVO GENERAL UX MÓVIL
   ============================================================ */
@media(max-width:900px){
  section{padding:58px 0}
  .hero-clean{padding-top:100px}
  .hero-selection-cards { grid-template-columns: 1fr; gap: 20px; }
  .block-grid { grid-template-columns: 1fr; gap: 32px; }
  .block-grid-reverse .block-copy { order: unset; }
  .block-grid-reverse .block-visual { order: unset; }
  .pricing-container-grid { grid-template-columns: 1fr; gap: 16px; }
  .nav{height:70px}
  .brand-logo{height:38px}
  .wa-float-bubble{display:none}
  .wa-btn{width:52px;height:52px}
  .wa-btn svg{width:26px;height:26px}
}