/* ---- Utilidad accesible: oculta visualmente sin quitar del árbol de
   accesibilidad. astrologia.css no carga css/pages/home.css (donde vive
   el .sr-only del home) — copia local mínima, mismo patrón. ---- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- Hero (handoff "Héroes de Sección") ----
   Rotación: antes 240s/vuelta; bajo el nuevo lenguaje ("instrumento de
   precisión", no adorno) se ralentiza mucho más — 900s/vuelta (15 min)
   es, a efectos prácticos, imperceptible durante una visita normal, sin
   llegar a estar del todo inerte (Fase B2, punto 4: se prefirió la
   opción "B" frente a una rueda estática, para que siga leyéndose como
   un instrumento vivo, no un gráfico apagado — juicio de diseño, no hay
   forma de verificarlo visualmente en este entorno de pruebas). Sigue
   siendo 2D puro (solo rotate), sin perspectiva/tilt/escala. */
@keyframes astroRuedaGira{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.hero-astro{
  position:relative;min-height:min(88vh,720px);overflow:hidden;
  display:flex;align-items:center;padding:150px 32px;box-sizing:border-box;
}
.hero-astro-rueda{
  position:absolute;top:50%;right:-320px;width:820px;height:820px;margin-top:-410px;
  animation:astroRuedaGira 900s linear infinite;pointer-events:none;
}
/* Recoloreado monocromático de la rueda — los círculos/ejes/glifos del
   SVG siguen con sus atributos originales (fill/stroke="rgba(237,237,235,…)")
   en astrologia.html sin tocar el markup: una regla CSS con selector de
   atributo/posición gana sobre el atributo de presentación SVG (misma
   técnica ya usada para el wordmark del footer en Fase A2). Solo aplica
   bajo body.page-veloris — fuera de esa clase, la rueda no existe en
   ninguna otra página. */
body.page-veloris .hero-astro-rueda svg circle:nth-of-type(1){stroke:var(--s4);}
body.page-veloris .hero-astro-rueda svg circle:nth-of-type(2){stroke:var(--s5);}
body.page-veloris .hero-astro-rueda svg circle:nth-of-type(3){stroke:var(--s6);}
body.page-veloris .hero-astro-rueda svg circle:nth-of-type(4){fill:var(--s2);}
body.page-veloris .hero-astro-rueda svg g[stroke]{stroke:var(--s4);}
body.page-veloris .hero-astro-rueda svg g[fill]{fill:var(--s3);}
.hero-astro-rueda svg{width:100%;height:100%;display:block;}
.hero-astro-copy{position:relative;max-width:520px;text-align:left;}
@media (prefers-reduced-motion: reduce){.hero-astro-rueda{animation:none;}}
@media (max-width:900px){
  .hero-astro{text-align:center;}
  .hero-astro-rueda{opacity:0.5;right:-420px;}
  .hero-astro-copy{margin:0 auto;text-align:center;}
}

/* ---- MÓDULO CARTA NATAL ---- */
#carta-natal{
  background:radial-gradient(ellipse 1000px 560px at 50% 0%, rgba(237,237,235,0.1), transparent 65%);
}
body.page-veloris #carta-natal{
  background:radial-gradient(ellipse 1000px 560px at 50% 0%, var(--s6), transparent 65%);
}
.natal-wheel{
  width:110px;height:110px;margin:0 auto 36px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--gold) 0deg 8deg, transparent 8deg 30deg,
    var(--gold) 30deg 38deg, transparent 38deg 60deg,
    var(--gold) 60deg 68deg, transparent 68deg 90deg,
    var(--gold) 90deg 98deg, transparent 98deg 120deg,
    var(--gold) 120deg 128deg, transparent 128deg 150deg,
    var(--gold) 150deg 158deg, transparent 158deg 180deg,
    var(--gold) 180deg 188deg, transparent 188deg 210deg,
    var(--gold) 210deg 218deg, transparent 218deg 240deg,
    var(--gold) 240deg 248deg, transparent 248deg 270deg,
    var(--gold) 270deg 278deg, transparent 278deg 300deg,
    var(--gold) 300deg 308deg, transparent 308deg 330deg,
    var(--gold) 330deg 338deg, transparent 338deg 360deg);
  opacity:0.55;position:relative;
}
.natal-wheel::before{
  content:'';position:absolute;inset:24px;
  border-radius:50%;border:1px solid var(--border);
}
.lead-form{
  max-width:420px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
}
.lead-form .config-input{width:100%;}
.lead-form .config-btn{align-self:center;margin-top:10px;}

.natal-date-group{text-align:left;}
.natal-field-label{
  display:block;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.natal-select-row{display:flex;gap:10px;}
.natal-select-row .config-input{width:auto;flex:1;min-width:0;}
select.config-input{
  appearance:none;-webkit-appearance:none;
  cursor:pointer;color-scheme:light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c7f6b' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
  padding-right:32px;
}
select.config-input option{background:var(--void);color:var(--ink);}
/* Bajo monocromo: el color-scheme fuerza los controles NATIVOS del
   navegador (menú del <select>, etc.) a modo oscuro — y la flecha,
   dibujada a mano como data-URI, llevaba el hex del --muted ANTIGUO
   (#8c7f6b) grabado dentro del SVG: un token no puede tocar eso, hace
   falta otro data-URI con el gris de la nueva escala (--mu, #7A7A80). */
body.page-veloris select.config-input{
  color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A80' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.natal-place-wrap{position:relative;}
.natal-place-suggestions{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;
  background:var(--void);
  border:1px solid var(--border);
  border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
  overflow:hidden;
}
.natal-place-item{
  padding:10px 14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
}
.natal-place-item:first-child{border-top:none;}
.natal-place-item:hover{background:var(--hover-tint);color:var(--ink);}
.natal-place-attrib{
  padding:6px 14px;border-top:1px solid var(--border);
  font-size:10px;color:var(--muted);opacity:0.6;
}
.lead-confirm{max-width:480px;margin:40px auto 0;}
.lead-confirm .panel-frase{border-bottom:none;padding-bottom:0;margin-bottom:0;}

/* .panel-frase — base propia y completa (Fase B2, punto 6). Antes esta
   clase no tenía ninguna definición base cargada en esta página: solo
   existe en css/pages/tarot.css, que astrologia.html no importa, así
   que el texto de interpretación (Sol/Luna/Ascendente/síntesis) se
   renderizaba sin estilo alguno. js/modules/astrologia.js sigue
   inyectando exactamente esta clase por innerHTML, sin cambios — solo
   se completa su CSS. Tono editorial (Fraunces itálica), separación
   fina, sin caja ni sombra: una frase, no una tarjeta. */
.panel-frase{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;
  font-style:italic;font-weight:400;
  color:var(--gold-soft);
  font-size:18px;line-height:1.6;
  text-align:center;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
  padding-bottom:16px;
}

.natal-result{text-align:left;}
.natal-result-item{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);
  margin:28px 0 10px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.natal-result-item:first-child{margin-top:0;padding-top:0;border-top:none;}
.natal-result .panel-frase{
  text-align:left;font-size:16px;
}
.natal-result-note{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:13.5px;color:var(--muted);
  margin:28px 0 10px;
}
.natal-sintesis{
  margin-top:28px;padding-top:20px;
  border-top:1px solid var(--border);
  font-style:italic;color:var(--gold-soft);
}