/* Amor y Alma — landing · SPDX-License-Identifier: AGPL-3.0-or-later */

:root{
  --ink:#100d1a;
  --ink-2:#191428;
  --ink-3:#211a35;
  --panel:rgba(244,239,228,0.04);
  --panel-strong:rgba(244,239,228,0.07);
  --panel-border:rgba(205,168,118,0.22);
  --gold:#cda876;
  --gold-light:#ecd9b3;
  --rose:#e964a6;
  --amatista:#a084cf;
  --azul:#c7f1fd;
  --cream:#f4efe4;
  --muted:#a79fc0;
  --display:'Playfair Display', serif;
  --body:'Cormorant Garamond', serif;
  --script:'Caveat', cursive;
  --glyph:'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 90% 45% at 50% -8%, #2a2043 0%, transparent 62%),
    radial-gradient(ellipse 70% 40% at 90% 55%, rgba(160,132,207,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 5% 80%, rgba(233,100,166,0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 45%, var(--ink) 100%);
  background-color:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; height:auto;}
a{color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:3px;
}
[hidden]{display:none !important;}

.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--gold-light); color:var(--ink); padding:8px 16px; border-radius:999px; text-decoration:none;}
.skip:focus{left:12px;}

/* ---------- Cielo + grano ---------- */
#sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  width:200%; height:200%;
  opacity:.07;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);}
  25%{transform:translate(-3%,2%);}
  50%{transform:translate(2%,-3%);}
  75%{transform:translate(-2%,-1%);}
  100%{transform:translate(0,0);}
}

.wrap{max-width:1080px; margin:0 auto; padding:0 var(--gutter); position:relative; z-index:2;}
main, footer, .topbar{position:relative; z-index:2;}

/* ---------- Nav ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  max-width:1080px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:36px; width:auto; opacity:.95;}
.brand-name{font-family:var(--display); font-size:18px; letter-spacing:.02em; color:var(--cream);}
.brand-name em{font-family:var(--script); font-style:normal; color:var(--rose); font-size:1.1em;}
.nav-links{display:flex; gap:18px;}
.nav-links a{
  font-size:16px; color:var(--gold-light); text-decoration:none; letter-spacing:.04em;
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.nav-links a:hover{border-color:var(--gold);}

/* ---------- Botones ---------- */
.btn-primary{
  font-family:var(--body);
  font-size:19px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  padding:15px 34px;
  min-height:52px;
  border-radius:999px;
  border:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
  color:#221a10;
  background:linear-gradient(135deg, var(--gold-light) -20%, var(--gold) 45%, #b98f5a 100%);
  box-shadow:0 10px 30px rgba(205,168,118,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .25s var(--ease), box-shadow .25s ease, opacity .25s ease;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(205,168,118,0.38), inset 0 1px 0 rgba(255,255,255,0.35);}
.btn-primary:disabled{opacity:.35; cursor:not-allowed; transform:none; box-shadow:none;}
.btn-block{width:100%;}
.btn-link{
  background:none; border:none; cursor:pointer;
  font-family:var(--body); font-size:18px; color:var(--muted);
  padding:12px 8px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(167,159,192,.4);
}
.btn-link:hover{color:var(--cream);}

/* ---------- Hero ---------- */
.hero{
  min-height:calc(100svh - 70px);
  display:flex; align-items:center;
  padding:24px 0 56px;
  text-align:center;
}
.hero .wrap{width:100%;}
.moon{
  width:min(170px, 42vw); height:min(170px, 42vw);
  margin:0 auto 30px;
  border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 35% 32%, rgba(255,255,255,0.9) 0%, var(--gold-light) 32%, var(--gold) 70%, #a3814f 100%);
  box-shadow:0 0 60px rgba(205,168,118,0.35), 0 0 140px rgba(160,132,207,0.18);
  animation:moon-glow 7s ease-in-out infinite;
}
.moon::after{
  content:""; position:absolute; top:-6%; left:16%; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #1d1730 0%, var(--ink) 70%);
}
@keyframes moon-glow{
  0%,100%{box-shadow:0 0 60px rgba(205,168,118,0.32), 0 0 140px rgba(160,132,207,0.16);}
  50%{box-shadow:0 0 80px rgba(205,168,118,0.45), 0 0 170px rgba(160,132,207,0.24);}
}
.eyebrow, .tag{
  font-style:italic;
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px, 9vw, 64px);
  line-height:1.12;
  margin:0 0 22px;
}
.hero h1 em{
  font-family:var(--script);
  font-style:normal;
  font-weight:600;
  color:var(--rose);
  font-size:1.18em;
  padding:0 .04em;
}
.lede{
  max-width:540px; margin:0 auto 36px;
  font-size:21px; font-style:italic; color:var(--muted);
}
.scroll-hint{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:34px auto 0; width:max-content;
  font-size:16px; font-style:italic; color:var(--muted); text-decoration:none;
}
.scroll-hint svg{animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}

/* ---------- Secciones ---------- */
section{position:relative; padding:72px 0;}
section + section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1080px, 90%); height:1px;
  background:linear-gradient(90deg, transparent, var(--panel-border), transparent);
}
.section-head{text-align:center; max-width:620px; margin:0 auto 44px;}
.section-head h2, .result-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(28px, 7vw, 42px); line-height:1.18;
  margin:0 0 14px;
}
.section-head p:not(.tag){color:var(--muted); font-size:20px; margin:0;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in-view{opacity:1; transform:none;}

/* ---------- Constelación de sesiones ---------- */
.constellation-list{
  position:relative;
  display:flex; flex-direction:column; gap:26px;
  padding-left:34px;
  max-width:880px; margin:0 auto;
}
.constellation-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0;
}
.const-line{fill:none; stroke:var(--gold); stroke-width:1.1; stroke-dasharray:5 7; opacity:.6;}
.service{position:relative; z-index:1;}
.node{
  position:absolute; left:-34px; top:30px;
  width:14px; height:14px; margin-left:-7px;
  display:block;
}
.node::before, .node::after{content:""; position:absolute; inset:0; border-radius:50%;}
.node::before{background:var(--gold-light); transform:scale(.45); box-shadow:0 0 10px 2px rgba(236,217,179,.55);}
.node::after{border:1px solid rgba(236,217,179,.35); transform:scale(1.35); opacity:0;}
.constellation-list.is-drawn .node::before{animation:twinkle 3.6s ease-in-out infinite; animation-delay:var(--d, 0s);}
.constellation-list.is-drawn .node::after{animation:halo 3.6s ease-in-out infinite; animation-delay:var(--d, 0s);}
@keyframes twinkle{
  0%,100%{opacity:.55; transform:scale(.4);}
  50%{opacity:1; transform:scale(.62);}
}
@keyframes halo{
  0%,100%{opacity:0; transform:scale(1);}
  50%{opacity:.8; transform:scale(1.6);}
}
.service .node{opacity:0; transition:opacity .5s ease;}
/* zigzag suave en móvil (el primer hijo es el SVG, así que las sesiones empiezan en nth-child(2)) */
.service:nth-child(odd) .node{left:-20px; top:44px;}
.service.lit .node{opacity:1;}

.service-card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:18px;
  padding:24px 22px;
  backdrop-filter:blur(2px);
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .3s ease, background .3s ease;
}
.service.lit .service-card{opacity:1; transform:none;}
.service-card:hover{border-color:var(--gold); background:rgba(205,168,118,0.055);}
.service-icon{width:36px; height:36px; color:var(--gold-light); margin-bottom:12px;}
.service-card h3{font-family:var(--display); font-weight:600; font-size:22px; margin:0 0 8px;}
.service-card p{margin:0; color:var(--muted); font-size:18px; line-height:1.55;}

/* ---------- Reserva ---------- */
.booking{
  max-width:640px; margin:56px auto 0;
  text-align:center;
  background:linear-gradient(160deg, rgba(205,168,118,0.09), rgba(160,132,207,0.06));
  border:1px solid var(--panel-border);
  border-radius:24px;
  padding:36px 22px;
}
.duration{font-family:var(--script); font-size:34px; color:var(--rose); margin:0; line-height:1.1;}
.duration-label{font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 0 26px;}
.prices{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px;}
.price{border:1px solid var(--panel-border); border-radius:16px; padding:18px 10px; background:var(--panel);}
.price-name{font-family:var(--display); font-size:15px; color:var(--gold-light); margin:0 0 6px;}
.price-value{margin:0; font-family:var(--display); line-height:1.1;}
.price-value s{font-size:17px; color:var(--muted); text-decoration-color:rgba(167,159,192,.6); margin-right:4px;}
.price-value strong{font-size:34px; font-weight:700; color:var(--gold-light);}
.price-eur{margin:6px 0 0; font-size:15px; font-style:italic; color:var(--azul); line-height:1.35;}
.how{list-style:none; padding:0; margin:0 0 28px; text-align:left; display:grid; gap:12px;}
.how li{display:flex; gap:14px; align-items:flex-start; font-size:18px; color:var(--cream); line-height:1.45;}
.how span{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:14px;
  background:var(--gold-light); color:var(--ink);
}

/* ---------- Wizard ---------- */
.wizard{
  position:relative;
  max-width:520px; margin:0 auto;
  background:linear-gradient(165deg, rgba(33,26,53,0.85), rgba(16,13,26,0.75));
  border:1px solid var(--panel-border);
  border-radius:26px;
  padding:26px 20px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  overflow:hidden;
}
.progress{padding:0 4px;}
.progress-bar{display:block; height:2px; border-radius:2px; background:rgba(205,168,118,.16); overflow:hidden;}
.progress-fill{display:block; height:100%; width:33.33%; background:linear-gradient(90deg, var(--gold), var(--gold-light)); transition:width .6s var(--ease);}
.step-count{margin:10px 0 0; text-align:center; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

.steps{position:relative; margin:0;}
.step{border:none; margin:0; padding:0; min-width:0; display:none;}
.step.is-active{display:block; animation:step-in .55s var(--ease) both;}
.step.is-leaving{display:block; animation:step-out .3s ease both;}
.step.from-left.is-active{animation-name:step-in-left;}
@keyframes step-in{from{opacity:0; transform:translateX(28px);} to{opacity:1; transform:none;}}
@keyframes step-in-left{from{opacity:0; transform:translateX(-28px);} to{opacity:1; transform:none;}}
@keyframes step-out{to{opacity:0; transform:translateY(-8px);}}
.step legend{
  display:block; width:100%; padding:0; text-align:center;
  font-family:var(--display); font-weight:600; font-size:28px;
  margin:18px 0 4px;
}
.step-hint{text-align:center; color:var(--muted); font-size:18px; font-style:italic; margin:0 0 20px;}
.step-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px;}
.step-actions .btn-primary{flex:1; max-width:300px;}

/* Calendario */
.cal{border:1px solid var(--panel-border); border-radius:18px; padding:12px; background:rgba(16,13,26,.45);}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.cal-nav{
  width:44px; height:44px; border-radius:50%;
  border:1px solid transparent; background:none; color:var(--gold-light); cursor:pointer;
  display:grid; place-items:center; transition:border-color .2s ease, background .2s ease;
}
.cal-nav:hover{border-color:var(--panel-border); background:var(--panel);}
.cal-nav:disabled{opacity:.25; cursor:default; background:none; border-color:transparent;}
.cal-title{
  background:none; border:none; cursor:pointer;
  font-family:var(--display); font-size:19px; color:var(--cream);
  padding:8px 14px; border-radius:999px;
}
.cal-title:hover{background:var(--panel);}
.cal-title:disabled{cursor:default; background:none;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:13px; letter-spacing:.08em; color:var(--muted); margin-bottom:2px;}
.cal-weekdays:empty{display:none;}
.cal-grid{display:grid; gap:4px; animation:fade .35s ease;}
.cal-grid.days{grid-template-columns:repeat(7,1fr);}
.cal-grid.months{grid-template-columns:repeat(3,1fr); gap:8px;}
.cal-grid.years{grid-template-columns:repeat(4,1fr); gap:8px;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
.cal-cell{
  font-family:var(--body); font-size:18px; color:var(--cream);
  min-height:42px; border-radius:12px;
  background:none; border:1px solid transparent; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.cal-grid.days .cal-cell{aspect-ratio:1; min-height:0; border-radius:50%; font-size:17px;}
.cal-cell:hover{border-color:var(--panel-border); background:var(--panel);}
.cal-cell.is-selected{background:var(--gold-light); color:var(--ink); font-weight:600; border-color:var(--gold-light); box-shadow:0 0 16px rgba(236,217,179,.35);}
.cal-cell:disabled{opacity:.2; cursor:default; background:none; border-color:transparent;}
.cal-cell.is-blank{visibility:hidden;}
.chosen{min-height:30px; text-align:center; margin:14px 0 14px; font-family:var(--script); font-size:26px; color:var(--rose);}

/* Hora */
.sky-arc{position:relative; max-width:300px; margin:0 auto 6px;}
.sky-arc svg{display:block; width:100%; height:auto; overflow:visible;}
.arc-line{fill:none; stroke:var(--gold); stroke-width:1; stroke-dasharray:3 6; opacity:.6;}
.arc-horizon{stroke:var(--panel-border); stroke-width:1;}
.arc-body circle{fill:var(--gold-light); filter:drop-shadow(0 0 8px rgba(236,217,179,.7)); transition:fill .6s ease;}
.arc-body.is-night circle{fill:var(--azul); filter:drop-shadow(0 0 8px rgba(199,241,253,.6));}
.arc-body{transition:transform .5s var(--ease);}
.arc-label{position:absolute; left:0; right:0; bottom:-4px; margin:0; text-align:center; font-family:var(--script); font-size:22px; color:var(--gold-light);}

.time-picker{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:18px auto 8px; max-width:260px;
}
.time-picker::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:48px; transform:translateY(-50%);
  border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
  background:rgba(205,168,118,.06); border-radius:12px; pointer-events:none;
}
.wheel{
  position:relative;
  width:92px; height:240px;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  overscroll-behavior:contain;
  border-radius:12px;
}
.wheel::-webkit-scrollbar{display:none;}
.wheel-pad{height:96px;}
.wheel-item{
  height:48px; display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center;
  font-family:var(--display); font-size:26px; color:var(--muted);
  transition:color .2s ease, transform .2s ease;
  cursor:pointer; user-select:none;
}
.wheel-item.is-current{color:var(--cream); transform:scale(1.12);}
.time-sep{font-family:var(--display); font-size:28px; color:var(--gold-light); z-index:1;}
.time-picker.is-disabled{opacity:.3; pointer-events:none;}
.unknown{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; font-size:18px; color:var(--muted); cursor:pointer;}
.unknown input{width:20px; height:20px; accent-color:var(--gold);}
.unknown-note{font-size:16px; text-align:center; color:var(--azul); font-style:italic; margin:8px 0 0;}

/* Lugar */
.place{position:relative;}
.place-icon{position:absolute; left:16px; top:17px; color:var(--gold-light); pointer-events:none;}
.place input{
  width:100%; min-height:56px;
  padding:14px 18px 14px 46px;
  font-family:var(--body); font-size:20px; color:var(--cream);
  background:rgba(16,13,26,.6);
  border:1px solid var(--panel-border); border-radius:16px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.place input::placeholder{color:rgba(167,159,192,.7); font-style:italic;}
.place input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(205,168,118,.15);}
.place-list{
  list-style:none; margin:8px 0 0; padding:6px;
  background:#1a1529; border:1px solid var(--panel-border); border-radius:16px;
  max-height:260px; overflow-y:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  animation:fade .25s ease;
}
.place-list li{
  padding:10px 12px; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; line-height:1.3;
}
.place-list li strong{font-weight:600; font-size:19px; color:var(--cream);}
.place-list li span{font-size:15px; color:var(--muted);}
.place-list li[aria-selected="true"], .place-list li:hover{background:rgba(205,168,118,.12);}
.place-status{min-height:26px; margin:10px 0 0; text-align:center; font-size:16px; font-style:italic; color:var(--muted);}
.place-status.is-ok{color:var(--gold-light);}
.place-status.is-error{color:var(--rose);}
.btn-reveal{font-size:18px; padding-left:22px; padding-right:22px;}

/* Carga */
.loading{padding:30px 0 14px; text-align:center; animation:fade .4s ease;}
.loading-const{width:min(260px, 80%); height:auto; overflow:visible;}
.lc-line{fill:none; stroke:var(--gold); stroke-width:1.2; stroke-dasharray:4 6; opacity:.75;}
.lc-stars circle{fill:var(--gold-light); opacity:0; transform-box:fill-box; transform-origin:center;
  animation:lc-star 2.4s ease-in-out infinite;}
@keyframes lc-star{
  0%{opacity:0; transform:scale(.3);}
  25%{opacity:1; transform:scale(1.25);}
  60%,100%{opacity:.85; transform:scale(1);}
}
.loading-text{font-family:var(--script); font-size:26px; color:var(--gold-light); margin:18px 0 0; min-height:40px; transition:opacity .4s ease;}

/* ---------- Resultado ---------- */
.result{max-width:760px; margin:0 auto; animation:fade .8s ease;}
.result-head{text-align:center; margin-bottom:24px;}
.result-meta{color:var(--muted); font-style:italic; font-size:18px; margin:0;}
.big3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 auto 18px; max-width:520px;}
.big3 .b3{
  text-align:center; border:1px solid var(--panel-border); border-radius:16px; padding:14px 6px;
  background:var(--panel);
  opacity:0; transform:translateY(12px); animation:rise .7s var(--ease) forwards;
}
.big3 .b3:nth-child(2){animation-delay:.12s;}
.big3 .b3:nth-child(3){animation-delay:.24s;}
@keyframes rise{to{opacity:1; transform:none;}}
.b3-label{display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.b3-glyph{display:block; font-family:var(--glyph); font-size:26px; color:var(--gold-light); line-height:1.4;}
.b3-sign{display:block; font-family:var(--display); font-size:18px;}
.b3-deg{display:block; font-size:15px; color:var(--muted);}

.wheel-wrap{margin:0 calc(8px - var(--gutter)); max-width:none;}
@media (min-width:640px){.wheel-wrap{margin:0 auto; max-width:620px;}}
.chart{display:block; width:100%; height:auto; overflow:visible;}
.legend{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:6px; font-size:15px; color:var(--muted);}
.lg{display:inline-block; width:26px; height:0; margin-right:8px; vertical-align:middle; border-top:1.5px dashed var(--gold);}
.lg-hard{border-top:1.5px dotted var(--gold); opacity:.9;}

/* Rueda (SVG) */
.ch-ring{fill:none; stroke:var(--gold); stroke-width:1; opacity:.55;}
.ch-ring-soft{fill:none; stroke:var(--panel-border); stroke-width:1;}
.ch-zodiac-band{fill:rgba(205,168,118,.05);}
.ch-tick{stroke:var(--gold); stroke-width:.8; opacity:.35;}
.ch-sign-div{stroke:var(--gold); stroke-width:1; opacity:.5;}
.ch-sign{font-family:var(--glyph); font-size:23px; fill:var(--gold-light); text-anchor:middle; dominant-baseline:central;}
.ch-sign.el-fuego{fill:var(--rose);}
.ch-sign.el-tierra{fill:var(--gold-light);}
.ch-sign.el-aire{fill:var(--azul);}
.ch-sign.el-agua{fill:var(--amatista);}
.ch-cusp{stroke:var(--muted); stroke-width:.8; stroke-dasharray:2 5; opacity:.7;}
.ch-axis{stroke:var(--gold-light); stroke-width:1.3; opacity:.9;}
.ch-house-num{font-family:var(--display); font-size:14px; fill:var(--muted); text-anchor:middle; dominant-baseline:central;}
.ch-axis-label{font-family:var(--display); font-size:16px; font-weight:600; fill:var(--gold-light); text-anchor:middle; dominant-baseline:central; letter-spacing:.04em;}
.ch-planet{font-family:var(--glyph); font-size:24px; fill:var(--cream); text-anchor:middle; dominant-baseline:central;}
.ch-planet-bg{fill:var(--ink-2); stroke:rgba(205,168,118,.35); stroke-width:.8;}
.ch-planet-deg{font-family:var(--body); font-size:14px; font-weight:600; fill:var(--muted); text-anchor:middle; dominant-baseline:central;}
.ch-pointer{stroke:var(--gold-light); stroke-width:.8; opacity:.6;}
.ch-dot{fill:var(--gold-light);}
.ch-aspect{fill:none; stroke:var(--gold); stroke-width:1.1; opacity:.8;}
.ch-aspect.soft{stroke-dasharray:6 5;}
.ch-aspect.hard{stroke-dasharray:1.5 4; stroke-linecap:round; stroke-width:1.6;}
.ch-center{fill:rgba(16,13,26,.55);}

/* animación de aparición de la rueda */
.chart .draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.6s var(--ease) forwards; animation-delay:var(--delay, 0s);}
@keyframes draw{to{stroke-dashoffset:0;}}
.chart .pop{opacity:0; animation:pop .6s var(--ease) forwards; animation-delay:var(--delay, 0s); transform-box:fill-box; transform-origin:center;}
@keyframes pop{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;}}
.chart .fade-in{opacity:0; animation:fade .8s ease forwards; animation-delay:var(--delay, 0s);}
.chart .spin-in{transform-origin:300px 300px; animation:spin-in 1.8s var(--ease) both;}
@keyframes spin-in{from{transform:rotate(-40deg); opacity:0;} to{transform:none; opacity:1;}}

.tables{max-width:560px; margin:26px auto 0; display:grid; gap:10px;}
.detail{border:1px solid var(--panel-border); border-radius:16px; background:var(--panel); overflow:hidden;}
.detail summary{
  cursor:pointer; list-style:none; padding:14px 18px;
  font-family:var(--display); font-size:18px; color:var(--gold-light);
  display:flex; justify-content:space-between; align-items:center;
}
.detail summary::-webkit-details-marker{display:none;}
.detail summary::after{content:"+"; font-family:var(--body); font-size:22px; color:var(--muted); transition:transform .3s ease;}
.detail[open] summary::after{transform:rotate(45deg);}
.ptable{width:100%; border-collapse:collapse; font-size:17px;}
.ptable td{padding:8px 18px; border-top:1px solid rgba(205,168,118,.1);}
.ptable td:first-child{white-space:nowrap;}
.ptable td:last-child{text-align:right; color:var(--muted);}
.ptable .g{font-family:var(--glyph); color:var(--gold-light); width:1.6em; display:inline-block;}
.ptable .rx{color:var(--rose); font-size:14px; margin-left:4px;}
.alist{list-style:none; margin:0; padding:0 18px 12px; font-size:17px;}
.alist li{padding:6px 0; border-top:1px solid rgba(205,168,118,.1); display:flex; justify-content:space-between; gap:10px;}
.alist .g{font-family:var(--glyph); color:var(--gold-light);}
.alist .orb{color:var(--muted); white-space:nowrap;}

.doubts{
  text-align:center; margin:44px auto 0; max-width:520px;
  padding:32px 22px; border-radius:24px;
  border:1px solid var(--panel-border);
  background:linear-gradient(160deg, rgba(233,100,166,0.08), rgba(160,132,207,0.07));
}
.doubts h3{font-family:var(--display); font-weight:600; font-size:26px; margin:0 0 8px;}
.doubts p{color:var(--muted); font-size:19px; margin:0 0 22px;}
.doubts .btn-link{display:block; margin:14px auto 0;}
.calc-error{text-align:center; color:var(--rose); font-size:18px; margin:18px 0 0;}

/* ---------- Footer ---------- */
.footer{padding:56px var(--gutter) 100px; text-align:center; border-top:1px solid var(--panel-border); margin-top:30px;}
.footer img{width:220px; height:auto; margin:0 auto 14px; display:block; opacity:.9;}
.foot-tag{font-family:var(--script); font-size:24px; color:var(--rose); margin:0 0 16px;}
.foot-social{font-size:17px; color:var(--gold-light); margin:0 0 10px;}
.foot-social a{text-decoration:none;}
.foot-social a:hover{text-decoration:underline; text-underline-offset:3px;}
.foot-note{font-size:15px; color:var(--muted); margin:0 0 6px;}
.foot-legal{font-size:13px; color:rgba(167,159,192,.75); margin:0; line-height:1.5;}
.foot-legal a{color:inherit;}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:50;
  width:54px; height:54px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.55);
  text-decoration:none;
  animation:wa-pulse 2.6s ease-out infinite;
  transition:transform .2s ease;
}
.whatsapp-float svg{width:28px; height:28px;}
.whatsapp-float:hover{transform:scale(1.06);}
@keyframes wa-pulse{
  0%{box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.55);}
  70%{box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0);}
}

/* ---------- Pantallas grandes ---------- */
@media (min-width:720px){
  :root{--gutter:28px;}
  .topbar{padding:24px var(--gutter);}
  .brand img{height:40px;}
  .moon{width:210px; height:210px; margin-bottom:38px;}
  section{padding:100px 0;}
  .section-head{margin-bottom:60px;}

  /* constelación en zigzag: tarjetas alternas a cada lado de la línea */
  .constellation-list{padding-left:0; gap:0;}
  .service{width:calc(50% - 70px);}
  .service + .service{margin-top:-96px;} /* tarjetas intercaladas a cada lado */
  .service:nth-child(even){align-self:flex-start;}
  .service:nth-child(odd){align-self:flex-end;}
  .service:nth-child(even) .node{left:auto; right:-34px; top:40px; margin-left:0; margin-right:-7px;}
  .service:nth-child(odd) .node{left:-34px; top:58px;}
  .service-card{padding:28px 26px;}

  .booking{padding:44px 44px;}
  .price-value strong{font-size:42px;}
  .wizard{padding:34px 36px 36px;}
  .whatsapp-float{right:24px; bottom:24px; width:58px; height:58px;}
  .whatsapp-float svg{width:30px; height:30px;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
  .grain{animation:none;}
  .reveal, .service-card{opacity:1; transform:none;}
  .service .node{opacity:1;}
  html{scroll-behavior:auto;}
}