/* ===========================================================
   astralpaper.com — estilos del sitio (Fase 1)
   Identidad del plan maestro: azul noche + oro + Fraunces/Karla
   =========================================================== */
:root{
  --tinta:#131A2E; --tinta-80:#313952; --tinta-55:#5E6580;
  --papel:#ECEEF3; --papel-alto:#F5F6F9; --carta:#FFFFFF;
  --brasa:#B0492E; --verde:#2F7D5E; --oro:#B08628; --oro-claro:#D9B65E; --azul:#3560A0;
  --linea:rgba(19,26,46,.13); --linea-fuerte:rgba(19,26,46,.30);
  --display:"Fraunces",Georgia,serif; --texto:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --max:1080px;
}
*{box-sizing:border-box}
html{background:var(--papel);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:16.5px;line-height:1.6;overflow-x:hidden}
.env{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:var(--azul)}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{max-width:100%;display:block}
@media(max-width:720px){
  .env{padding:0 18px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} /* hueco para la barra tipo app */
}

/* Marca */
.brand{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em;color:#fff;display:inline-flex;align-items:center;gap:.5rem}
.brand em{font-style:italic;color:var(--oro-claro)}
.brand .star{width:20px;height:20px}

/* Nav */
.nav{background:var(--tinta);color:#fff;position:sticky;top:0;z-index:90;box-shadow:0 2px 14px rgba(6,9,20,.28)}
.nav .env{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav a.brand{text-decoration:none}
.nav .links{display:flex;gap:1.4rem;align-items:center;align-self:stretch}
.nav .links a{color:#C4CADD;text-decoration:none;font-size:.92rem}
.nav .links a:hover{color:#fff}
/* La pestaña de la página en la que estás. No se quita del menú —el menú es
   idéntico en todas partes— sino que se marca, para que sepas dónde estás. */
.nav .links a.is-active{color:#fff}
.nav .links a.is-active:not(.cta):not(.entrar){box-shadow:inset 0 -2px 0 var(--oro)}
.nav .links a.entrar.is-active{border-color:var(--oro);color:#fff}
.nav .cta{font-family:var(--texto);font-weight:700;font-size:.85rem;background:#8F6B1D;color:#fff;border:none;border-radius:8px;padding:.55rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}

/* ── Desplegable de "Calculadoras gratis" ──────────────────────────────
   Solo de escritorio: por debajo de 720px el menú de arriba ni se ve —ahí
   manda la .appbar— así que no hay versión móvil que mantener.

   Se abre con el ratón y con el teclado sin depender del JavaScript: al
   enfocar la pestaña, :focus-within abre el panel y sus enlaces pasan a ser
   tabulables. Por eso el panel se esconde con visibility y no con display:
   lo que está en display:none no puede recibir el foco nunca.

   El envoltorio ocupa toda la altura de la barra —no solo la del texto— para
   que el panel cuelgue por debajo de ella en vez de montársele encima. */
.nav .has-sub{position:relative;display:flex;align-items:center;align-self:stretch}
.nav .links .sub-trigger{display:inline-flex;align-items:center;gap:.34rem}
/* El iconito de cada pestaña con panel. El SVG pinta con currentColor, así
   que basta con darle color aquí: se queda en oro aunque el texto de al
   lado pase a blanco al posar el ratón — es un acento, no parte del texto. */
.nav .ico-nav{width:15px;height:15px;flex:0 0 auto;color:var(--oro-claro)}
/* La flechita, que gira al abrir: dice que ahí debajo hay algo más. */
.nav .links .sub-trigger::after{content:'';width:0;height:0;margin-left:.1rem;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px);transition:transform .16s ease}
.nav .has-sub:hover .sub-trigger::after,
.nav .has-sub:focus-within .sub-trigger::after{transform:translateY(2px) rotate(180deg)}

.nav .links .submenu{
  position:absolute;top:100%;left:-.55rem;z-index:90;min-width:238px;margin-top:6px;padding:.4rem;
  visibility:hidden;opacity:0;transform:translateY(-5px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;
  background:var(--carta);border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 14px 34px rgba(19,26,46,.26);
}
/* El puente. Entre la pestaña y el panel hay un hueco de unos milímetros; sin
   esto, cruzarlo con el ratón cierra el menú y hay que empezar de nuevo. */
.nav .links .submenu::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .has-sub:hover .submenu,
.nav .has-sub:focus-within .submenu{visibility:visible;opacity:1;transform:translateY(0);transition-delay:0s}

.nav .links .submenu a{display:block;padding:.5rem .7rem;border-radius:7px;color:var(--tinta);font-size:.9rem;line-height:1.35}
.nav .links .submenu a:hover,
.nav .links .submenu a:focus-visible{background:rgba(176,134,40,.11);color:var(--oro)}
/* La calculadora en la que estás, marcada también dentro del panel. */
.nav .links .submenu a[aria-current="page"]{color:var(--oro);font-weight:600;background:rgba(176,134,40,.11)}

.nav .entrar{border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:.5rem .9rem}
/* Botón de menú móvil (se inyecta desde oraculo.js; el markup del nav es idéntico en todas las páginas) */
.nav-burger{display:none;flex:0 0 auto;width:44px;height:44px;margin-left:.4rem;background:transparent;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:10px}
.nav-burger span{display:block;width:22px;height:2px;background:#E7EAF3;border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-locked{overflow:hidden}

@media(max-width:720px){
  .nav .env{height:58px}
  .nav-burger{display:inline-flex}
  .nav .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--tinta);border-top:1px solid rgba(255,255,255,.10);box-shadow:0 20px 40px rgba(6,9,20,.45);padding:.3rem 0 1rem;max-height:calc(100dvh - 58px);overflow-y:auto;display:none}
  .nav.nav-open .links{display:flex}
  .nav .links>a,.nav .links .sub-trigger{display:block;width:100%;color:#DCE0EC;font-size:1rem;padding:.85rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav .has-sub{display:block;position:static;align-self:stretch}
  .nav .links .sub-trigger::after{display:none}
  .nav .links .submenu{position:static;visibility:visible;opacity:1;transform:none;min-width:0;margin:0;padding:0 0 .4rem;background:transparent;border:0;box-shadow:none}
  .nav .links .submenu a{color:#AEB6CE;font-size:.94rem;padding:.6rem 1.15rem .6rem 2rem;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav .links .submenu a:hover,.nav .links .submenu a:focus-visible{background:rgba(255,255,255,.05);color:#fff}
  .nav .nav-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;padding:1rem 1.15rem 0}
  .nav .cta{display:inline-flex}
  .nav .entrar{display:inline-flex;min-height:38px;align-items:center}
}

/* ── Barra inferior tipo app (solo móvil) ── */
.appbar{display:none}
@media(max-width:720px){
  .appbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(19,26,46,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .ab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;text-decoration:none;color:#AEB6CE;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:10px}
  .ab-item .ab-ico{font-size:19px;line-height:1}
  .ab-item:active{background:rgba(255,255,255,.08)}
  .ab-main{color:var(--oro-claro)}
}

/* Cielo estrellado (fondo oscuro) */
.sky{background:var(--tinta);color:#fff;position:relative;overflow:hidden}
.sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1.2px 1.2px at 70% 20%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1.6px 1.6px at 85% 60%,rgba(255,255,255,.45) 50%,transparent 50%),radial-gradient(1px 1px at 40% 75%,rgba(255,255,255,.35) 50%,transparent 50%),radial-gradient(1.3px 1.3px at 55% 45%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1.1px 1.1px at 12% 62%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 92% 32%,rgba(255,255,255,.4) 50%,transparent 50%);pointer-events:none}
.sky .env{position:relative;z-index:1}

/* ── Selector de idioma (pill estilo iOS, como Creactivas) ── */
.lang-toggle{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:5.4rem;height:2rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);cursor:pointer;text-decoration:none;flex:0 0 auto;transition:opacity .15s}
.lang-toggle:hover{opacity:.85}
.lang-toggle .knob{position:absolute;top:2px;left:2px;width:calc(50% - 4px);height:calc(100% - 4px);background:#fff;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .22s ease;pointer-events:none}
.lang-toggle.is-en .knob{transform:translateX(calc(100% + 4px))}
.lang-toggle .lt{position:relative;z-index:1;flex:1;text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.75);line-height:1}
.lang-toggle.is-es .lt-es,.lang-toggle.is-en .lt-en{color:var(--tinta)}
/* variante sobre fondo claro (páginas legales/curso usan nav oscuro igualmente) */

/* ── Hero a pantalla completa en móvil + indicador de scroll ── */
.scroll-cue{display:none}
@media(max-width:720px){
  #heroSky{display:flex;flex-direction:column;min-height:calc(100svh - 58px)}
  #heroSky .env.hero{margin:auto 0;padding-top:8vh;padding-bottom:14vh}
  .scroll-cue{display:flex;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:2;width:40px;height:40px;align-items:center;justify-content:center;color:var(--oro-claro);animation:cue 1.6s ease-in-out infinite;text-decoration:none}
  .scroll-cue svg{width:26px;height:26px}
}
@keyframes cue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.9}50%{transform:translateX(-50%) translateY(9px);opacity:.5}}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}}

/* ── Botón "subir arriba" ── */
.totop{position:fixed;right:14px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:85;width:46px;height:46px;border-radius:50%;background:var(--oro);color:#fff;border:none;box-shadow:0 6px 20px rgba(0,0,0,.3);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s}
.totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(min-width:721px){.totop{bottom:24px}}

/* ── Curso en móvil: temario vertical desplegable (los chips se ocultan) ── */
@media(max-width:720px){.cchips{display:none !important}}
.clist{display:none}
@media(max-width:720px){
  .clist{display:block;margin-top:10px;border:1px solid var(--linea);border-radius:10px;background:var(--papel-alto)}
  .clist summary{list-style:none;cursor:pointer;padding:.7rem .9rem;font-size:14px;font-weight:700;color:var(--tinta);display:flex;justify-content:space-between;align-items:center}
  .clist summary::after{content:"▾";color:var(--oro);transition:transform .2s}
  .clist[open] summary::after{transform:rotate(180deg)}
  .clist .lv{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);padding:.5rem .9rem .1rem}
  .clist a{display:block;padding:.5rem .9rem .5rem 1.4rem;font-size:14px;color:var(--tinta-80);text-decoration:none;border-top:1px solid var(--linea)}
  .clist a.act{color:var(--tinta);font-weight:700;background:#fff}
}

/* Vídeo tenue de fondo en bloques oscuros */
video.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;pointer-events:none}
#aprende-banner{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){video.bgvid{display:none}}

/* Fondo de vídeo del hero (con fundido entre clips) */
#heroSky .hero-bg{position:absolute;inset:0;overflow:hidden}
#heroSky .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.2s ease}
#heroSky .hero-bg video.on{opacity:1}
#heroSky .hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,26,46,.80) 0%,rgba(19,26,46,.62) 45%,#131A2E 98%)}
@media(prefers-reduced-motion:reduce){#heroSky .hero-bg video{display:none}}

/* Hero — OJO: solo padding vertical, para no pisar el margen lateral del .env */
.hero{padding-top:64px;padding-bottom:56px}
@media(max-width:720px){
  .hero{padding-top:44px;padding-bottom:40px}
  .sky .env{padding-left:26px;padding-right:26px}  /* aire lateral en el banner oscuro */
  .hero h1{font-size:clamp(32px,8.5vw,44px)}
  .hero .lede{font-size:16.5px;margin:16px 0 24px}
}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-claro);margin:0 0 18px}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(38px,7vw,72px);line-height:1;letter-spacing:-.025em;margin:0}
.hero h1 em{font-style:italic;font-weight:500;color:#F0D89A}
.hero .lede{font-size:19px;color:#C4CADD;max-width:50ch;margin:20px 0 28px;font-weight:300}
.btn{font-family:var(--texto);font-weight:700;font-size:1rem;background:#8F6B1D;color:#fff;border:none;border-radius:10px;padding:.9rem 1.6rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;transition:background .15s,transform .15s}
.btn:hover{background:#96711f;transform:translateY(-1px)}
/* Hueco de un botón de compra que aún no se puede pulsar. Ocupa lo mismo que
   el botón para que la parrilla de precios no se descuadre. */
.soon{font-family:var(--texto);font-weight:700;font-size:.85rem;background:transparent;color:var(--tinta-55);
  border:1px dashed var(--linea-fuerte);border-radius:8px;padding:.55rem 1rem;display:inline-flex;
  align-items:center;justify-content:center;min-height:48px;cursor:default;user-select:none}
.card .soon,.pcta .soon{width:100%;margin-top:auto}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}
.btn.dark{background:var(--tinta)}

/* Formulario de nacimiento */
.form-card{background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:26px;max-width:560px;margin:0 auto}
@media(max-width:520px){.form-card{padding:20px 16px;border-radius:12px}}
.form-card h2{font-family:var(--display);font-weight:500;font-size:24px;margin:0 0 4px;color:var(--tinta)}
.form-card p.sub{color:var(--tinta-55);font-size:14.5px;margin:0 0 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:12px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--tinta-80);margin-bottom:5px}
.field input:not([type=checkbox]),.field select{width:100%;min-width:0;max-width:100%;background:#fff;border:1px solid var(--linea-fuerte);border-radius:8px;padding:.7rem .8rem;font:inherit;font-size:16px;min-height:48px;color:var(--tinta)} /* 16px evita el auto-zoom de iOS */

/* Campos de fecha/hora: que no se desborden */
input[type="date"],input[type="time"]{width:100%;min-width:0;max-width:100%}
.grid2>.field{min-width:0}
/* Solo iOS/Safari móvil: quitar el estilo nativo que descuadra y centra el texto */
@supports (-webkit-touch-callout: none){
  input[type="date"],input[type="time"]{-webkit-appearance:none;appearance:none;display:block;background:#fff;text-align:left}
  input::-webkit-date-and-time-value{text-align:left}
}

/* Checkboxes: tamaño normal SIEMPRE (que no hereden el 100%/48px de los campos) */
input[type=checkbox]{width:18px !important;height:18px !important;min-height:0 !important;min-width:0 !important;flex:0 0 auto;margin:0;accent-color:var(--oro)}
.check{align-items:center}
.field input:focus,.field select:focus{outline:none;border-color:var(--oro)}
.field .hint{font-size:.75rem;color:var(--tinta-55);margin-top:4px}
.check{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--tinta-55);margin:6px 0 14px}

/* Sección genérica */
.band{padding:56px 0;border-top:1px solid var(--linea);background:var(--papel)}
.band:nth-of-type(even){background:var(--papel-alto)}
@media(max-width:720px){.band{padding:38px 0}}
.band.cielos{background:linear-gradient(180deg,#F4EFE0,#FAF6EC);border-top:1px solid #E6DCC1}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#856318;margin:0 0 10px}
h1.sec,h2.sec{font-family:var(--display);font-weight:500;font-size:clamp(26px,4vw,38px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;max-width:22ch}
.sec-sub{font-size:17px;color:var(--tinta-55);max-width:60ch}

/* Ejemplos de dosier / cards de precio */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
.card{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px;display:flex;flex-direction:column}
.card .btn{margin-top:auto !important}
@media(min-width:721px){.card .pname{min-height:2.9em;line-height:1.45}}
@media(max-width:720px){.cards{gap:10px;margin-top:20px}.card{padding:18px}.card .price{font-size:26px}}
.card .btn{width:100%}
.card .pname{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#856318;margin:0 0 10px}
.card .price{font-family:var(--display);font-size:30px;font-weight:500;margin:0 0 6px}
.card .price small{font-size:14px;color:var(--tinta-55)}
.card p{font-size:14px;color:var(--tinta-80);margin:0}

/* ── Resultado: la rueda + panel ── */
#resultado{display:none;padding-top:0;scroll-margin-top:12px}
#resultado.show{display:block}
.chart-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) 1fr;gap:32px;align-items:start}
@media(max-width:860px){.chart-wrap{grid-template-columns:1fr;gap:20px}}
.wheel-box{background:var(--tinta);border-radius:16px;padding:18px;position:relative;overflow:hidden}
@media(max-width:720px){.wheel-box{padding:10px;border-radius:14px}}
.wheel-box::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 15% 20%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1.3px 1.3px at 80% 70%,rgba(255,255,255,.35) 50%,transparent 50%),radial-gradient(1px 1px at 60% 30%,rgba(255,255,255,.3) 50%,transparent 50%);pointer-events:none}
.wheel-box svg{position:relative;z-index:1;width:100%;height:auto}
.chart-side h2{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 4px}
.chart-side .who{color:var(--tinta-55);font-size:14px;margin:0 0 18px}
.bigthree{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.bt{background:var(--carta);border:1px solid var(--linea);border-radius:10px;padding:12px;text-align:center}
.bt .g{font-size:22px;color:var(--oro)}
.bt .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-55);margin-top:4px}
.bt .s{font-family:var(--display);font-size:15px;margin-top:2px}
.postable{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:8px}
.postable td{padding:5px 6px;border-top:1px solid var(--linea)}
.postable td:first-child{color:var(--oro);width:26px;font-size:16px}
.postable td:last-child{text-align:right;font-family:var(--mono);font-size:12px;color:var(--tinta-55)}
.unlock{background:var(--tinta);color:#fff;border-radius:14px;padding:22px;margin-top:8px;position:relative;overflow:hidden}
@media(max-width:720px){.unlock{padding:18px}.unlock .btn{width:100%}}
.unlock h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0 0 6px}
.unlock p{color:#C4CADD;font-size:14px;margin:0 0 14px;max-width:44ch}

/* Callout */
.callout{border-left:3px solid var(--oro);background:var(--papel-alto);padding:14px 18px;margin:18px 0;border-radius:0 8px 8px 0;font-size:14.5px;color:var(--tinta-80)}
.callout .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#856318;margin-bottom:5px}

/* Footer */
footer{background:var(--tinta);color:#AEB6CE;padding:44px 0 40px}
@media(max-width:720px){footer{padding:34px 0 26px}}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
@media(max-width:640px){footer .cols{grid-template-columns:1fr}}
footer h4,footer .fh4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin:0 0 12px}
footer a{color:#C4CADD;text-decoration:none;display:block;margin-bottom:7px;font-size:.9rem}
footer a:hover{color:#fff}
footer .tag{font-family:var(--display);font-size:1.05rem;color:#C4CADD;max-width:26ch;margin:10px 0 0}
footer .nota{font-size:12.5px;color:#8A92AC;border-top:1px solid rgba(255,255,255,.16);padding-top:16px;margin-top:26px;max-width:80ch}
.spin{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* Buscador de ciudades (geocode) */
.geo-results{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--linea-fuerte);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 12px 30px rgba(19,26,46,.14);max-height:260px;overflow:auto}
.geo-item{padding:.85rem .9rem;font-size:.95rem;cursor:pointer;border-top:1px solid var(--linea);min-height:46px;display:flex;align-items:center}
.geo-item:first-child{border-top:none}
.geo-item:hover{background:var(--papel-alto)}

/* Modal de checkout */
.ck-modal{position:fixed;inset:0;z-index:100;background:rgba(11,15,28,.72);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.ck-card{background:var(--carta);border-radius:16px;padding:26px;width:100%;max-width:420px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4)}
@media(max-width:600px){ /* en móvil, hoja a pantalla completa desde abajo, tipo app */
  .ck-modal{align-items:flex-end;padding:0}
  .ck-card{max-width:100%;border-radius:18px 18px 0 0;max-height:92dvh;overflow:auto;padding:22px 18px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
}
.ck-card h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 4px;color:var(--tinta)}
.ck-sub{color:var(--tinta-55);font-size:14px;margin:0 0 16px}
.ck-l{display:block;font-size:.8rem;font-weight:700;color:var(--tinta-80);margin:0 0 5px}
.ck-card input:not([type=checkbox]),.ck-card textarea{width:100%;min-width:0;max-width:100%;background:#fff;border:1px solid var(--linea-fuerte);border-radius:8px;padding:.7rem .8rem;font:inherit;font-size:16px;min-height:48px;color:var(--tinta)}
.ck-card input:focus,.ck-card textarea:focus{outline:none;border-color:var(--oro)}
.ck-card textarea{min-height:60px;resize:vertical}
.ck-card label.ck-l input{width:auto;margin-right:6px}
.ck-x{position:absolute;top:10px;right:10px;background:none;border:none;font-size:26px;line-height:1;color:var(--tinta-55);cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.ck-note{font-size:12.5px;color:var(--tinta-55);margin:10px 0 0}
.ck-legal{font-size:11.5px;color:var(--tinta-55);text-align:center;margin:12px 0 0}
.ck-subj{border:1px solid var(--linea);border-radius:10px;padding:14px;margin:0 0 10px;background:var(--papel-alto)}
.ck-subj h4{font-family:var(--display);font-weight:500;font-size:15px;margin:0 0 8px;color:var(--tinta)}
.ck-subj .grid2{gap:8px}
.ck-subj .geo-results{max-height:180px}

/* Páginas legales */
.legal{padding:52px 0 60px;background:var(--papel)}
.legal .env{max-width:760px}
.legal h1{font-family:var(--display);font-weight:500;font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;margin:0 0 6px;color:var(--tinta)}
.legal .updated{font-family:var(--mono);font-size:12px;color:var(--tinta-55);margin:0 0 28px}
.legal h2{font-family:var(--display);font-weight:500;font-size:20px;margin:30px 0 8px;color:var(--tinta)}
.legal p,.legal li{font-size:15.5px;color:var(--tinta-80);line-height:1.7}
.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}
.legal .box{border-left:3px solid var(--oro);background:var(--papel-alto);padding:14px 18px;border-radius:0 8px 8px 0;margin:18px 0}
.legal a{color:var(--azul)}

/* Banner de cookies */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:520px;margin:0 auto;background:var(--tinta);color:#E7EAF2;border-radius:14px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.4);display:none}
@media(max-width:720px){.cookie{bottom:calc(72px + env(safe-area-inset-bottom))}} /* por encima de la barra tipo app */
.cookie button{min-height:44px}
.cookie.show{display:block}
.cookie p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#C4CADD}
.cookie a{color:var(--oro-claro)}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap}
.cookie button{font-family:var(--texto);font-weight:700;font-size:.85rem;border:none;border-radius:8px;padding:.55rem 1rem;cursor:pointer}
.cookie .acc{background:#8F6B1D;color:#fff}
.cookie .rej{background:transparent;color:#C4CADD;border:1px solid rgba(255,255,255,.25)}


/* ── Fase 4: herramientas de la rueda gratis (interruptores + PNG) y balance ── */
.wheel-tools{position:relative;z-index:1;margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.wheel-toggles{display:flex;flex-wrap:wrap;gap:6px}
.wt{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#AEB6CE;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:5px 12px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.wt.is-on{color:var(--tinta);background:var(--oro-claro);border-color:var(--oro-claro)}
.wt:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}
.wheel-tools .wt-png{padding:.45rem .9rem;font-size:13px;min-height:0}
#wheel.off-aspectos .ap-capa-aspectos,
#wheel.off-casas .ap-capa-casas,
#wheel.off-grados .ap-capa-grados,
#wheel.off-signos .ap-capa-signos{display:none}
.balance{margin:2px 0 18px}
.balance .brow{margin-bottom:10px}
.balance .btitle{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-55);margin:0 0 5px}
.balance .bbar{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--linea)}
.balance .bseg{height:100%}
.balance .blegend{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:5px;font-size:12.5px;color:var(--tinta-55)}
.balance .blegend b{color:var(--tinta);font-weight:600}
.balance .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* ── Bloque EXCLUSIVO de mascotas: identidad propia, cálida y con gracia ─── */
.band.mascotas{background:radial-gradient(130% 120% at 88% -10%,#ECE6FA 0%,#F2ECF7 42%,#FBF6EC 100%);border-top:1px solid #E3D9EC;position:relative;overflow:hidden}
.band.mascotas::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.6px 1.6px at 12% 22%,rgba(110,79,166,.30) 50%,transparent 50%),radial-gradient(1.3px 1.3px at 89% 16%,rgba(176,134,40,.32) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 80% 72%,rgba(110,79,166,.22) 50%,transparent 50%),radial-gradient(1.2px 1.2px at 28% 84%,rgba(176,134,40,.24) 50%,transparent 50%),radial-gradient(1.1px 1.1px at 55% 40%,rgba(110,79,166,.18) 50%,transparent 50%)}
.band.mascotas .env{position:relative;z-index:1}
.band.mascotas .kicker{color:#6E4FA6}
.band.mascotas h1.sec,h2.sec{max-width:26ch}
.band.mascotas h1.sec,h2.sec em{font-style:italic;color:#6E4FA6}
.pet-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6E4FA6;background:rgba(110,79,166,.10);border:1px solid rgba(110,79,166,.28);border-radius:999px;padding:.38rem .8rem;margin:0 0 16px}
.pet-badge svg{width:14px;height:14px;flex:0 0 auto}
.pet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.pet-card{background:var(--carta);border:1px solid rgba(110,79,166,.18);border-radius:14px;padding:24px;display:flex;flex-direction:column;position:relative;box-shadow:0 3px 16px rgba(110,79,166,.07)}
.pet-card .paw{position:absolute;top:18px;right:18px;width:28px;height:28px;color:rgba(110,79,166,.24)}
.pet-card .pname{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6E4FA6;margin:0 0 10px}
.pet-card .price{font-family:var(--display);font-size:30px;font-weight:500;margin:0 0 8px}
.pet-card .pdesc{color:var(--tinta-80);font-size:15px;line-height:1.5;margin:0 0 16px;flex:1}
.pet-card .btn{margin-top:auto;background:#6E4FA6}
.pet-card .btn:hover{background:#5f4494}
.pet-soon{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E4FA6;text-align:center;opacity:.85}
.pet-note{margin-top:18px;font-size:13.5px;color:var(--tinta-55);max-width:60ch}
@media(max-width:720px){.pet-card{padding:20px}.pet-cards{gap:12px;margin-top:22px}}

/* ── Huellas de mascotas: se van estampando como si el animal caminara,
   se quedan un buen rato y se borran muy tenuemente. Tres animales, tres caminos. ── */
@media(min-width:721px){ .band.mascotas{ min-height:100vh; display:flex; align-items:center } }

.pet-paws{position:absolute;inset:0;z-index:0;pointer-events:none}
.pet-paws .pw{position:absolute;width:44px;height:44px;color:rgba(110,79,166,.42);opacity:0;
  animation-name:pawStamp;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.pet-paws .pw svg{width:100%;height:100%;display:block}
/* aparece rápido (pisada), se mantiene un buen rato, y se desvanece muy suave; luego un hueco antes de repetir */
@keyframes pawStamp{
  0%{opacity:0}
  2%{opacity:.46}
  48%{opacity:.46}
  74%{opacity:0}
  100%{opacity:0}
}
/* cada animal, su propio ritmo (duración distinta para que no vayan sincronizados) */
.pet-paws .trailA{animation-duration:30s}
.pet-paws .trailB{animation-duration:34s}
.pet-paws .trailC{animation-duration:27s}
@media(max-width:720px){
  .pet-paws .pw{width:30px;height:30px}
  .pet-paws .trailC{display:none}   /* en móvil, dos animales bastan */
}
@media (prefers-reduced-motion: reduce){ .pet-paws .pw{animation:none;opacity:.18} }
/* ── Capa opcional de planetas ilustrados en la rueda ── */
.ap-capa-planetas{display:none}
#wheel:not(.off-planetas) .ap-capa-planetas{display:block}
#wheel:not(.off-planetas) .ap-capa-glifos{display:none}

/* ── Banner superior: anuncio del horóscopo diario ── */
.topbar{position:relative;display:block;overflow:hidden;text-decoration:none;line-height:1.3;
  background:linear-gradient(90deg,#241E48 0%,#3B2F6E 46%,#6E4FA6 100%);color:#F6F1FF;padding:10px 16px}
.topbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 40%,rgba(255,255,255,.75) 50%,transparent 50%),radial-gradient(1.2px 1.2px at 80% 28%,rgba(233,217,160,.85) 50%,transparent 50%),radial-gradient(1.3px 1.3px at 60% 72%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1.1px 1.1px at 34% 64%,rgba(201,183,240,.75) 50%,transparent 50%),radial-gradient(1.1px 1.1px at 92% 60%,rgba(255,255,255,.6) 50%,transparent 50%);
  animation:tbTwinkle 3s ease-in-out infinite alternate}
.topbar::after{content:"";position:absolute;top:0;left:-45%;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transform:skewX(-18deg);
  animation:tbShine 6s ease-in-out infinite}
@keyframes tbTwinkle{from{opacity:.5}to{opacity:1}}
@keyframes tbShine{0%{left:-45%}60%{left:125%}100%{left:125%}}
.tb-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.tb-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#E9D9A0;border:1px solid rgba(233,217,160,.45);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.tb-txt{font-size:15px;font-weight:500;letter-spacing:.01em}
.tb-txt b{font-weight:700;color:#fff}
.tb-cta{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;font-weight:700;color:#241E48;background:linear-gradient(180deg,#F1E0A2,#D9B65E);border-radius:999px;padding:.34rem .85rem;box-shadow:0 1px 6px rgba(0,0,0,.22);white-space:nowrap}
.tb-cta .arw{font-weight:700}
.topbar:hover{filter:brightness(1.06)}
.topbar:hover .tb-cta{filter:brightness(1.06)}
@media(max-width:600px){.tb-badge{display:none}.tb-txt{font-size:13.5px}.tb-cta{font-size:12px;padding:.3rem .7rem}.tb-in{gap:9px}}
@media(prefers-reduced-motion:reduce){.topbar::before,.topbar::after{animation:none}}

/* ── Nav ordenado: enlaces de contenido a la izquierda, acciones a la derecha ── */
.nav .links{flex:1;margin-left:2.2rem}
.nav .nav-actions{margin-left:auto;display:flex;align-items:center;gap:1.1rem;align-self:stretch}
.nav .links a{white-space:nowrap}
@media(max-width:900px){.nav .links{margin-left:1.4rem;gap:1.1rem}}

/* Rueda a pantalla completa (carta gratis) */
#apZoom{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;background:rgba(10,12,20,.9);backdrop-filter:blur(3px);padding:14px}
#apZoom.light{background:rgba(244,239,228,.95)}
#apZoom .apz-bar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:6px;flex:0 0 auto}
#apZoom .apz-close,#apZoom .apz-mode{font-family:inherit;font-size:13px;font-weight:600;border-radius:999px;border:1px solid rgba(217,182,94,.6);background:transparent;color:#F4EFE4;padding:.42rem .85rem;cursor:pointer}
#apZoom.light .apz-close,#apZoom.light .apz-mode{color:#1d2438;border-color:rgba(176,134,40,.5)}
#apZoom .apz-stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;overflow:auto}
#apZoom .wt-zoom{display:none}
.wheel-box.apw-zoom{width:auto;margin:0}
.wheel-box.apw-zoom #wheel{width:min(88vw,78vh);margin:0 auto}
.wheel-box.apw-zoom #wheel svg,.wheel-box.apw-zoom .ap-rueda{width:min(88vw,78vh);height:auto;display:block;margin:0 auto}
.wheel-box.apw-zoom .wheel-tools{margin-top:14px;display:block}
#apZoom.light .ap-rueda{filter:invert(1) hue-rotate(180deg)}
@media print{#apZoom{display:none!important}}

/* Segunda fila de herramientas de la rueda + fondo claro en la vista pequeña */
.wheel-tools .wheel-toggles{flex:1 1 100%}
.wheel-actions{flex:1 1 100%;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wa-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wheel-actions .wt-png{margin-left:auto}
.wheel-box.wb-light{background:#ECE6FA}
.wheel-box.wb-light::after{opacity:.18}
.wheel-box.wb-light .ap-rueda{filter:invert(1) hue-rotate(180deg)}
.wheel-box.wb-light .wt{color:#3a4157;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.15)}
.wheel-box.wb-light .wt.is-on{color:var(--tinta);background:var(--oro-claro);border-color:var(--oro-claro)}
.wheel-box.wb-light .wt-png{color:#3a4157;border-color:rgba(0,0,0,.28)}

/* ── Muestra del dosier ("Mira cómo es tu interpretación") ── */
.muestra .muestra-hojas{display:flex;gap:18px;overflow-x:auto;padding:8px 2px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.muestra .muestra-hojas figure{flex:0 0 auto;width:232px;margin:0;scroll-snap-align:center}
.muestra .muestra-hojas img{width:100%;height:auto;border-radius:10px;box-shadow:0 14px 34px rgba(19,26,46,.22);border:1px solid var(--linea);display:block}
.muestra .muestra-hojas figcaption{margin-top:10px;font-size:13px;color:var(--tinta-55);text-align:center}
.muestra .muestra-nota{text-align:center;color:var(--tinta-80);font-size:14px;margin:8px 0 0}
@media(min-width:721px){.muestra .muestra-hojas{flex-wrap:wrap;justify-content:center;overflow:visible}}

/* Banner superior rotativo */
.topbar .tb-in{transition:opacity .45s ease}
.topbar.tb-fade .tb-in{opacity:0}

/* Índice de capítulos del dosier de muestra */
.muestra .muestra-idx-t{text-align:center;color:var(--tinta-55);font-size:13px;letter-spacing:.03em;margin:20px 0 12px;text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
.muestra .muestra-indice{list-style:none;padding:0;margin:0 auto;max-width:780px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 30px}
.muestra .muestra-indice li{display:flex;gap:11px;align-items:baseline;font-size:14.5px;color:var(--tinta-80);border-bottom:1px solid var(--linea);padding:9px 2px}
.muestra .muestra-indice li b{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--oro);font-weight:500;flex:0 0 auto}
@media(max-width:600px){.muestra .muestra-indice{grid-template-columns:1fr;gap:0}}