:root{
  --venus:#ff6bb5;
  --mint:#b0ffe6;
  --ink:#e9e9ef;
  --bg1:#0b0b16;
  --bg2:#17172b;
}

*{box-sizing:border-box}
html{ background: #0b0b16 }
html,body{ min-height:100vh; min-height:100dvh }
body{
  margin:0; display:flex; align-items:center; justify-content:center;
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, #2a2a55 0%, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2));
  background-repeat: no-repeat;
  overflow-x:hidden; overflow-y:auto;
  -ms-overflow-style: none; /* IE/Edge old */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar{ width:0; height:0 }

/* Estrellitas suaves */
.stars, .stars:after {
  position:fixed; inset:0; content:"";
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9) 40%, transparent 41%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.7) 40%, transparent 41%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.5) 40%, transparent 41%);
  animation: twinkle 6s ease-in-out infinite alternate;
  opacity:.45;
  pointer-events:none;
}
.stars:after{ transform: scale(1.2) rotate(15deg); opacity:.35; }
@keyframes twinkle{ from{ filter:brightness(.8) } to{ filter:brightness(1.2) } }

.container{
  position:relative; z-index:1; width:min(620px, calc(100vw - 36px));
  margin:18px auto 28px; text-align:center; padding:28px 22px 42px; border-radius:20px;
  backdrop-filter: blur(10px); background: rgba(255,255,255,0.04); outline:1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

h1{ font-size: clamp(28px, 6vw, 44px); margin:0 0 10px; letter-spacing:.6px }
.sub{ font-size: clamp(15px, 3.8vw, 18px); opacity:.9; margin:0 auto 22px; line-height:1.45; white-space: pre-line }
.greeting{ font-size:13px; font-style: italic; opacity:.95; margin: -8px 0 16px; padding:10px 12px; border-radius:12px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,.09) }
.greeting .greet-aux{ display:block; font-size:12px; opacity:.92 }

/* Checkbox personalizado para "Soy yo" */
.me-checkbox{ display:flex; align-items:center; gap:6px; margin:6px 2px 0; font-size:13px; opacity:.9; cursor:pointer }
.me-checkbox input[type="checkbox"]{ 
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:14px; height:14px; border-radius:3px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,0.05); cursor:pointer; position:relative;
  transition: all .15s ease;
}
.me-checkbox input[type="checkbox"]:checked{
  background:rgba(176,255,230,0.2); border-color:var(--mint);
}
.me-checkbox input[type="checkbox"]:checked::after{
  content:'✓'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--mint); font-size:9px; font-weight:700;
}

.cta{
  display:block; width:100%; border:0; border-radius:16px; padding:16px 20px; font-size:20px; font-weight:700;
  color:#0b0b16; cursor:pointer; transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  background-image: linear-gradient(135deg, var(--venus), #ffd1e6);
  box-shadow: 0 10px 24px rgba(255,107,181,.35);
}
.cta:active{ transform: translateY(1px) scale(.99); filter:brightness(.98); }
.cta.secondary{
  margin-top:14px; background-image: linear-gradient(135deg, var(--mint), #e7fff8);
  box-shadow: 0 10px 24px rgba(176,255,230,.25);
}
.cta.tertiary{
  margin-top:14px; background-image: linear-gradient(135deg, #9cc7ff, #dde9ff);
  box-shadow: 0 10px 24px rgba(156,199,255,.25);
}
.cta.quaternary{
  margin-top:14px; background-image: linear-gradient(135deg, #ffe7a3, #ffefc2);
  box-shadow: 0 10px 24px rgba(255,231,163,.25);
}
.cta.quaternary:hover{
  filter: brightness(1.03) saturate(1.06);
  box-shadow: 0 10px 28px rgba(255,231,163,.35);
}
.cta.quaternary:focus{ outline:2px solid rgba(255,231,163,.6); outline-offset:2px }
.cta.twoline{ display:grid; grid-template-rows:auto auto; line-height:1.15; padding:15px 18px }
.cta.twoline .line1{ font-size:20px; font-weight:700 }
.cta.twoline .line2{ font-size:14px; font-weight:500; opacity:.8 }
textarea{ width:100%; padding:14px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,0.05); color: var(--ink); outline:none; font-size:16px; resize: vertical; min-height: 120px }
a.cta[disabled], .cta[disabled]{ opacity:.6; cursor:not-allowed; pointer-events:none; filter: grayscale(.1) }
a.cta{ text-decoration:none; text-align:center }
.by{ margin-top:10px; font-size:13px; opacity:.85 }
.footer{ margin-top:20px; font-size:12px; opacity:.6 }

/* Formularios */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
}
.back{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink); opacity:.85; text-decoration:none; font-size:14px;
}

form{
  margin-top:8px; text-align:left;
}
label{ display:block; font-size:14px; opacity:.9; margin:14px 2px 6px }
input, select{
  width:100%; padding:14px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,0.05); color: var(--ink); outline:none; font-size:16px;
}
input::placeholder{ color: rgba(233,233,239,.65) }
.code2{ width:110px }
.error{ color:#ff8fa3; font-size:13px; margin:6px 2px 0 }
.error.global{ margin:0 0 8px }
.invalid{ border:1px solid rgba(255,143,163,.9) !important; box-shadow: 0 0 0 2px rgba(255,143,163,.12) inset }

.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.muted{ opacity:.8; font-size:13px; margin-top:6px }
.result{ margin-top:18px; padding:16px; border-radius:14px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,.08) }
.result h3{ margin:0 0 8px; font-size:18px }
.result .score{ font-weight:800; font-size:28px; color:var(--mint) }
.charts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.charts img{ width:min(300px, 46vw); height:auto; aspect-ratio: 1 / 1; border-radius:12px; outline:1px solid rgba(255,255,255,.1); box-shadow:0 10px 24px rgba(0,0,0,.35) }

/* Carta 2.5D */
.tilt-wrap{ perspective: 1000px; margin: 12px auto 20px; width: 100% }
.tilt-card{
  position:relative; margin:0 auto; width:min(420px, 86%); height:180px;
  border-radius:20px; background: radial-gradient(220px 140px at 30% 10%, rgba(255,255,255,.12), transparent 60%), linear-gradient(135deg, #252544, #17172b);
  outline:1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transform-style: preserve-3d; will-change: transform, filter;
}
.tilt-card .title{
  position:absolute; left:18px; top:16px; font-weight:700; font-size:14px; opacity:.9
}
.tilt-card .orb{
  position:absolute; right:18px; bottom:16px; width:64px; height:64px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--venus), #ffd1e6 60%, rgba(255,255,255,.85));
  filter: blur(.2px); box-shadow: 0 0 40px rgba(255,107,181,.35);
  transform: translateZ(30px);
}
.tilt-card:after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(200px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.15), transparent 60%);
  pointer-events:none; mix-blend-mode: screen;
}

/* Helpers */
.hide{ display:none !important }

/* Animaciones de página y revelado secuencial */
.page-anim{ opacity:0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease }
.page-anim.ready{ opacity:1; transform:none }
.page-anim.leaving{ opacity:0; transform: translateY(6px) }
.reveal{ opacity:0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease }
.reveal.show{ opacity:1; transform:none }
/* Asegurar que reveal funcione con elementos disabled */
a.cta.reveal[disabled]{ opacity:0; }
a.cta.reveal.show[disabled]{ opacity:.6; }

/* En páginas largas, alinear arriba */
body.scrollable{ align-items:flex-start; padding-bottom: 56px }

/* Loader orbital */
.loader{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  min-height: 260px;
}
.orbit{
  position:relative; width: 160px; height: 160px;
}
.orbit .sun{
  position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd27a, #ff9b00);
  box-shadow: 0 0 30px rgba(255,155,0,.5);
}
.orbit .venus{
  position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--venus), #ffd1e6);
  box-shadow: 0 0 24px rgba(255,107,181,.45);
  animation: orbit 3.8s linear infinite;
  transform-origin: -60px -0px;
}
@keyframes orbit{
  from{ transform: rotate(0deg) translateX(60px) }
  to{ transform: rotate(360deg) translateX(60px) }
}
.loader .msg{ text-align:center; opacity:.9 }
.loader .msg strong{ color: var(--mint) }

/* Resultado extenso */
.reading{
  line-height:1.6; font-size:16px;
}
.reading-title{ font-weight:800; margin: 14px 2px 8px }
.reading-title-md{ font-size: clamp(16px, 4.2vw, 18px) }
.reading-title-lg{ font-size: clamp(20px, 5vw, 22px) }
.fade-anim{ transition: opacity .28s ease }
.reading p{ margin:10px 2px }
.sep{ height:1px; background: rgba(255,255,255,.12); margin:10px 0 }
.signature{ opacity:.9; font-style: italic; margin:8px 2px 2px }


/* --- Mini logo orbital en home --- */
.logo-home{ display:flex; align-items:center; justify-content:center; margin: 20px 0 40px }
.orbit-sm{ width: 88px; height: 88px; margin: 6px auto 30px }
.orbit-sm .sun{ width:16px; height:16px; margin:-8px 0 0 -8px; box-shadow: 0 0 18px rgba(255,155,0,.45) }
/* Venus más pequeña y más cerca del Sol */
.orbit-sm .venus{ width:8px; height:8px; margin:-4px 0 0 -4px; box-shadow: 0 0 12px rgba(255,107,181,.5); transform-origin: -26px 0; animation: orbit-sm 3.8s linear infinite }
@keyframes orbit-sm{ from{ transform: rotate(0deg) translateX(28px) } to{ transform: rotate(360deg) translateX(28px) } }
/* chispitas mágicas alrededor de Venus */
.spark{ position:absolute; display:block; width:6px; height:6px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.6)); box-shadow:0 0 10px rgba(255,255,255,.6) }
.orbit-sm .spark{ width:4px; height:4px; box-shadow:0 0 8px rgba(255,255,255,.6) }
.s1{ animation: spark-orbit-1 2.6s ease-in-out infinite }
.s2{ animation: spark-orbit-2 3.2s ease-in-out infinite }
.s3{ animation: spark-orbit-3 2.8s ease-in-out infinite }
@keyframes spark-orbit-1{ 0%{ transform: translate(12px,-4px)} 50%{ transform: translate(18px,2px)} 100%{ transform: translate(12px,-4px)} }
@keyframes spark-orbit-2{ 0%{ transform: translate(-10px,6px)} 50%{ transform: translate(-16px,0px)} 100%{ transform: translate(-10px,6px)} }
@keyframes spark-orbit-3{ 0%{ transform: translate(2px,14px)} 50%{ transform: translate(-4px,18px)} 100%{ transform: translate(2px,14px)} }

/* --- Carta astral flotante automática con 2.5D suave --- */
.chart-float{ position:relative; display:inline-block; perspective: 1000px; margin:6px; overflow:visible }
.chart-float .card3d{
  display:block; transform-style:preserve-3d; will-change: transform, filter;
  animation: float-tilt 7s ease-in-out infinite;
}
.chart-float:after{
  content:""; position:absolute; inset:-8px; border-radius:14px; pointer-events:none;
  background: radial-gradient(220px 140px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);
}
.chart-float img{
  display:block; border-radius:12px; outline:1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
@keyframes float-tilt{
  0%{ transform: translateY(0) rotateX(0deg) rotateY(0deg) }
  20%{ transform: translateY(-10px) rotateX(10deg) rotateY(-8deg) }
  50%{ transform: translateY(0px) rotateX(0deg) rotateY(0deg) }
  80%{ transform: translateY(-14px) rotateX(-10deg) rotateY(10deg) }
  100%{ transform: translateY(0) rotateX(0deg) rotateY(0deg) }
}


/* Partículas sutiles alrededor de la carta */
.chart-float .particle{ position:absolute; width:2px; height:2px; border-radius:50%; background: currentColor; 
  box-shadow: 0 0 2px rgba(255,255,255,.8), 0 0 8px currentColor; 
  mix-blend-mode: screen; opacity:.9; filter: brightness(1.25) }
.chart-float .particle.glow{ 
  box-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 10px rgba(255,223,140,.95),
    0 0 20px rgba(255,223,140,.9),
    0 0 36px rgba(255,223,140,.8),
    0 0 56px rgba(255,223,140,.65),
    0 0 84px rgba(255,223,140,.5),
    0 0 120px rgba(255,255,255,.35),
    0 0 18px currentColor;
  opacity:.95; filter: brightness(1.4) saturate(1.35) }
.chart-float .particle{ animation: drift var(--dur, 2s) ease-in-out var(--delay, 0s) infinite }
@keyframes drift{ 0%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.25) } 100%{ transform: translate(0,0) scale(1) } }

/* Nube mágica alrededor de Venus (home) */
.logo-home .dust-cloud{ position:absolute; left:50%; top:50%; width:1px; height:1px; pointer-events:none }
.logo-home .dust-pill{ position:absolute; left:0; top:0 }
.logo-home .dust-dot{ position:absolute; width:2px; height:2px; border-radius:50%; background: currentColor; box-shadow: 0 0 6px currentColor; opacity:.78; animation: drift var(--dur, 3s) ease-in-out var(--delay, 0s) infinite }

/* Versión genérica de nubecita de polvo para reutilizar (p.ej. alrededor de cartas) */
.dust-cloud{ position:absolute; pointer-events:none }
.dust-pill{ position:absolute; left:0; top:0 }
.dust-dot{ position:absolute; width:2px; height:2px; border-radius:50%; background: currentColor; box-shadow: 0 0 6px currentColor; opacity:.78; animation: drift var(--dur, 3s) ease-in-out var(--delay, 0s) infinite }

/* Halo centrado para cartas */
.chart-halo{ left:50%; top:50%; width:1px; height:1px }
.chart-halo .dust-dot{ width:2px; height:2px; box-shadow: 0 0 2px rgba(255,255,255,.8), 0 0 8px currentColor; mix-blend-mode: screen; opacity:.9 }
.chart-halo .dust-dot.glow{ 
  box-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 10px rgba(255,223,140,.95),
    0 0 20px rgba(255,223,140,.9),
    0 0 36px rgba(255,223,140,.8),
    0 0 56px rgba(255,223,140,.65),
    0 0 84px rgba(255,223,140,.5),
    0 0 120px rgba(255,255,255,.35),
    0 0 18px currentColor;
  opacity:.95 }

/* Canvas de enlace gravitatorio Sol↔Venus */
.orbit .link-canvas{ position:absolute; pointer-events:none }

/* Selector de idioma pequeño */
#locale-selector{
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
}