/* Astros Bienestar — portada pública.
 *
 * Dirección: el cielo a las 6 de la mañana. El producto llega al amanecer, así
 * que la página literalmente amanece: arranca en índigo de noche cerrada y
 * termina en ámbar de horizonte. La firma es la efeméride — una tabla de
 * almanaque con los grados reales de hoy, y la animación de los números ES el
 * dato subiendo a su valor verdadero.
 *
 * Nada de librerías. Variables, grid y un canvas.
 */
.sitio-bienestar {
  --noche:   #141830;
  --noche-2: #1C2044;
  --linea:   #2E3468;
  --tinta:   #E9E7F2;
  --tenue:   #8D93B8;
  --alba:    #F0B860;
  --alba-hondo: #D9873B;
  --retro:   #E0705F;

  --display: "Fraunces", ui-serif, Georgia, serif;
  --texto:   "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  margin: 0;
  background: var(--noche);
  color: var(--tinta);
  font: 16px/1.65 var(--texto);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
.sitio-bienestar * { box-sizing: border-box; }

/* el amanecer: una sola capa fija detrás de todo, que cambia con el scroll */
.sitio-bienestar .amanecer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(240,184,96,.30) 0%,
                    rgba(217,135,59,.11) 34%, transparent 66%),
    linear-gradient(180deg, #10142A 0%, var(--noche) 42%, #1A1D3C 100%);
}
.sitio-bienestar #cielo-lienzo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
}
.sitio-bienestar .bn-cabecera,
.sitio-bienestar .bn-main,
.sitio-bienestar .bn-pie { position: relative; z-index: 1; }

.sitio-bienestar .num { font-family: var(--dato); font-variant-numeric: tabular-nums; }
.sitio-bienestar .bn-tenue { color: var(--tenue); }
.sitio-bienestar .bn-small { font-size: 13px; }
.sitio-bienestar .glifo { color: var(--alba); font-style: normal;
  margin-right: .45em; opacity: .9; }
.sitio-bienestar .glifo-grande { font-size: .78em; margin-right: .3em; }
.sitio-bienestar .retro { color: var(--retro); text-decoration: none;
  font-family: var(--dato); font-size: .9em; }

/* --- cabecera --- */
.sitio-bienestar .bn-cabecera {
  max-width: 720px; margin: 0 auto; padding: 20px 22px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sitio-bienestar .bn-marca {
  font: 600 18px/1 var(--display); color: var(--tinta); text-decoration: none;
  letter-spacing: .1px;
}
.sitio-bienestar .bn-marca em { font-style: italic; color: var(--alba); }
.sitio-bienestar .bn-marca-glifo { color: var(--alba); margin-right: 4px; }

/* --- botón --- */
.sitio-bienestar .bn-cta {
  display: inline-block; background: var(--alba); color: #21160A;
  font: 600 15px/1 var(--texto); text-decoration: none;
  padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.sitio-bienestar .bn-cta:hover { background: #F7CB83; transform: translateY(-1px); }
.sitio-bienestar .bn-cta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.sitio-bienestar .bn-cta-chico { padding: 8px 15px; font-size: 13.5px; }
.sitio-bienestar .bn-cta-grande { padding: 16px 30px; font-size: 16.5px; margin-top: 8px; }
.sitio-bienestar .bn-flotante { display: none; }

/* --- estructura --- */
.sitio-bienestar .bn-main { max-width: 720px; margin: 0 auto; padding: 10px 22px 90px; }
.sitio-bienestar .bn-encabezado {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue); margin: 26px 0 14px;
}
.sitio-bienestar h1 {
  font: 700 clamp(32px, 8vw, 52px)/1.08 var(--display);
  margin: 0 0 22px; letter-spacing: -.6px;
}
.sitio-bienestar .bn-realce { color: var(--alba); font-style: italic; font-weight: 400; }
.sitio-bienestar h2 {
  font: 600 clamp(21px, 4.5vw, 27px)/1.2 var(--display);
  margin: 46px 0 14px; letter-spacing: -.2px;
}

/* --- LA FIRMA: la efeméride --- */
.sitio-bienestar .efemeride {
  border: 1px solid var(--linea); border-radius: 14px;
  background: rgba(28,32,68,.62); backdrop-filter: blur(6px);
  padding: 6px 0; margin: 22px 0 20px; overflow: hidden;
}
.sitio-bienestar .efem-cab,
.sitio-bienestar .efem-fila {
  display: grid; grid-template-columns: 1fr auto 1.05fr;
  gap: 12px; align-items: center; padding: 7px 18px; position: relative;
}
.sitio-bienestar .efem-cab {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tenue); border-bottom: 1px solid var(--linea);
  padding-bottom: 9px; margin-bottom: 3px;
}
.sitio-bienestar .efem-cab span:nth-child(2) { text-align: right; }
.sitio-bienestar .efem-fila { font-size: 14.5px; }
.sitio-bienestar .efem-fila + .efem-fila { border-top: 1px solid rgba(46,52,104,.42); }
.sitio-bienestar .efem-cuerpo { white-space: nowrap; }
.sitio-bienestar .efem-grado {
  text-align: right; font-size: 14px; color: var(--alba);
  min-width: 5.6ch;    /* que el conteo no empuje la columna */
}
.sitio-bienestar .efem-signo { color: #C3C7DE; white-space: nowrap; }
/* barra de posición: qué tan avanzado va el cuerpo dentro de su signo.
   Es dato, no adorno — 0° es recién entrado, 29° es a punto de cambiar. */
.sitio-bienestar .efem-barra {
  position: absolute; left: 18px; right: 18px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg,
    var(--alba) 0 calc(var(--fraccion) * 100%),
    transparent calc(var(--fraccion) * 100%));
  opacity: .28;
}
.sitio-bienestar .es-retro .efem-grado { color: var(--retro); }

.sitio-bienestar .bn-fase {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-size: 14px; margin-bottom: 18px;
}
.sitio-bienestar .bn-eventos { list-style: none; margin: 0 0 6px; padding: 0; }
.sitio-bienestar .bn-eventos li {
  padding: 8px 0; border-top: 1px solid var(--linea); font-size: 15px;
}
.sitio-bienestar .bn-eventos b { color: var(--alba); margin-right: 12px; font-weight: 500; }
.sitio-bienestar .bn-lista { list-style: none; margin: 0 0 18px; padding: 0; }
.sitio-bienestar .bn-lista li { padding: 7px 0; border-top: 1px solid var(--linea); }

.sitio-bienestar .bn-tesis {
  font: 400 clamp(17px, 3.6vw, 19.5px)/1.55 var(--display);
  color: #D6D3E6; margin: 34px 0 22px; max-width: 34em;
}
.sitio-bienestar .bn-tesis b { color: var(--tinta); font-weight: 600; }

.sitio-bienestar .bn-aviso {
  border-left: 2px solid var(--alba); padding: 10px 0 10px 16px;
  margin: 20px 0; color: #D6D3E6; font-size: 15px;
}

/* --- prueba instantánea --- */
.sitio-bienestar .bn-prueba {
  border: 1px solid var(--linea); border-radius: 16px;
  background: rgba(28,32,68,.5); padding: 26px 24px; margin: 54px 0 0;
}
.sitio-bienestar .bn-prueba h2 { margin-top: 0; }
.sitio-bienestar .bn-etiqueta {
  display: block; font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tenue); margin: 18px 0 7px;
}
.sitio-bienestar .bn-form-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.sitio-bienestar .bn-form input {
  flex: 1 1 190px; background: var(--noche); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 12px 18px; font-size: 15px; font-family: var(--dato);
}
.sitio-bienestar .bn-form input:focus-visible {
  outline: 2px solid var(--alba); outline-offset: 1px; border-color: var(--alba);
}

/* --- los doce --- */
.sitio-bienestar .bn-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.sitio-bienestar .bn-signo-tarjeta {
  display: flex; align-items: center; gap: 2px; text-decoration: none;
  color: var(--tinta); border: 1px solid var(--linea); border-radius: 10px;
  padding: 11px 13px; font-size: 14px; background: rgba(28,32,68,.4);
  transition: border-color .15s ease, background .15s ease;
}
.sitio-bienestar .bn-signo-tarjeta:hover {
  border-color: var(--alba); background: rgba(240,184,96,.09);
}
.sitio-bienestar .bn-signo-tarjeta.es-actual { border-color: var(--alba); }
.sitio-bienestar .bn-rejilla-chica { margin-top: 34px; }
.sitio-bienestar .bn-rejilla-chica .bn-signo-tarjeta { font-size: 13px; padding: 9px 11px; }

.sitio-bienestar .bn-cierre { margin-top: 62px; }
.sitio-bienestar .bn-cierre p { max-width: 36em; color: #D0CEE2; }
.sitio-bienestar .bn-volver { color: var(--tenue); text-decoration: none; font-size: 14px; }
.sitio-bienestar .bn-volver:hover { color: var(--alba); }

/* --- pie --- */
.sitio-bienestar .bn-pie {
  max-width: 720px; margin: 0 auto; padding: 30px 22px 40px;
  border-top: 1px solid var(--linea); font-size: 14px;
}
.sitio-bienestar .bn-pie a { color: var(--tenue); }
.sitio-bienestar .bn-pie a:hover { color: var(--alba); }

/* --- móvil: el botón se queda a la vista, que es de donde viene el tráfico --- */
@media (max-width: 640px) {
  .sitio-bienestar .bn-cabecera .bn-cta-chico { display: none; }
  .sitio-bienestar .bn-flotante {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 5; text-align: center; box-shadow: 0 6px 26px rgba(0,0,0,.45);
  }
  .sitio-bienestar .bn-main { padding-bottom: 104px; }
  .sitio-bienestar .efem-cab,
  .sitio-bienestar .efem-fila { grid-template-columns: 1fr auto .78fr; padding: 7px 14px; gap: 8px; font-size: 13.5px; }
  .sitio-bienestar .efem-barra { left: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sitio-bienestar * { animation: none !important; transition: none !important; }
  .sitio-bienestar .bn-cta:hover { transform: none; }
}

/* --- páginas legales: prosa larga, misma piel --- */
.sitio-bienestar .bn-legal h2 { margin-top: 38px; }
.sitio-bienestar .bn-legal p { max-width: 36em; color: #D0CEE2; }
.sitio-bienestar .bn-lista-legal { max-width: 36em; padding-left: 20px; color: #D0CEE2; }
.sitio-bienestar .bn-lista-legal li { margin-bottom: 9px; }
.sitio-bienestar .bn-lista-legal b { color: var(--tinta); }