/* ============================================================
   HOROSCOPE — the daily page, the sign finder and the sky

   Split out of readings.css, which had grown to hold both. Every
   block here is about the horoscope; the spreads stay there.
   ============================================================ */

/* --- Horoscope ------------------------------------------------ */

/* Twelve signs, so the columns are always a divisor of twelve: 8 + 4 left a
   ragged second row that read as a mistake. */
.sign-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
    .sign-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .sign-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1100px) {
    .sign-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.sign-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2);
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold);
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.sign-card:hover,
.sign-card.is-active {
    color: inherit;
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-card);
}

.sign-card__symbol {
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--accent-ink);
}

.sign-card__name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    /* `Capricornio` is one word and cannot wrap: without this it spills out
       of the card once the reader's root font size passes about 22px. */
    max-width: 100%;
    overflow-wrap: break-word;
}

.sign-card__dates {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.sign-card__element {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.horoscope-facets {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
}

.facet {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-gold);
}

/* ============================================================
   HOROSCOPE DETAIL

   The page was a stack of equal-weight boxes with no rhythm:
   header, text and panels all pressed together, and the advice
   sat in a heavy cream slab. It now reads top to bottom with
   one clear focal point.
   ============================================================ */

.horoscope {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* The navbar is sticky, so the first line needs room to clear it. */
    padding-top: var(--space-2);
}

/* --- Header --------------------------------------------------- */

.horoscope-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
}

.horoscope-header__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--secondary-contrast);
    background: linear-gradient(140deg, var(--accent-soft), var(--secondary-soft));
    border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: var(--glow-moon);
}

.horoscope-header__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.horoscope-header__name {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2.75rem);
    line-height: 1.1;
}

.horoscope-header__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.horoscope-header__portrait {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: var(--radius-pill);
    opacity: 0.95;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--secondary) 35%, transparent));
}

@media (max-width: 767px) {
    .horoscope-header {
        grid-template-columns: auto 1fr;
    }

    .horoscope-header__portrait {
        display: none;
    }
}

.horoscope-intro {
    margin: 0;
    max-width: 62ch;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* --- Today ----------------------------------------------------- */

.horoscope-today {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--surface-celestial-strong);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.horoscope-today__voice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}

.horoscope-today__avatar {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 30%, transparent));
}

.horoscope-today__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.horoscope-today__title .material-symbols-rounded {
    color: var(--accent-ink);
    font-size: 1.15rem;
}

.horoscope-today__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.horoscope-today__notice {
    margin: 0;
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--text-muted);
}

@media (max-width: 479px) {
    .horoscope-today__voice {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* --- Facets ------------------------------------------------------ */

/* ============================================================
   EL DIA PERSONAL
   ============================================================ */

.personal-day {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-block: var(--space-5);
    padding: var(--space-5);
    scroll-margin-top: calc(var(--nav-height-mobile) + var(--space-4));
}

.personal-day__number {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    color: var(--secondary-contrast);
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
    border-radius: 50%;
}

.personal-day__number--empty {
    color: var(--text-secondary);
}

.personal-day__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.personal-day__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.personal-day__note {
    margin: 0;
    color: var(--text-primary);
    text-wrap: pretty;
}


.personal-day__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.personal-day__form .input {
    flex: 1 1 10rem;
    min-width: 0;
}

.personal-day__forget {
    margin: 0;
}

@media (max-width: 479px) {
    .personal-day {
        flex-direction: column;
    }
}

/* ============================================================
   LAS BARRAS
   ============================================================ */

.meter {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    margin-block: var(--space-2) var(--space-3);
}

.meter__bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.meter__step {
    height: 8px;
    background: color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 999px;
}

.meter__step.is-on {
    background: var(--secondary);
}

/* La misma barra, pequena, para la tabla de la semana. */
.meter__bar--compact {
    width: 3.5rem;
    gap: 2px;
}

.meter__bar--compact .meter__step {
    height: 5px;
}

/* Un 5 se distingue de un 4 de un vistazo, que es lo que se busca. */
.meter[data-value="5"] .meter__step.is-on {
    background: linear-gradient(90deg, var(--secondary), var(--accent, var(--secondary)));
    box-shadow: 0 0 6px color-mix(in srgb, var(--secondary) 55%, transparent);
}

.meter__value {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.meter__reason {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.meter__arrow {
    font-size: 1em;
    color: var(--secondary-contrast);
}

.meter[data-value="1"] .meter__arrow,
.meter[data-value="2"] .meter__arrow {
    color: var(--text-secondary);
}

.facet--energy {
    /* One word, so it never needs a full column of height. */
    align-items: flex-start;
}

.facet__badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: var(--space-1) var(--space-4);
    /* Sans, no la serif de titulares.
     *
     * La serif es para nombrar: una carta, un signo, Yuna. Un dato no se
     * nombra, se lee —«Aire», «Urano», «Luna creciente»— y puesto en
     * serif junto a su etiqueta en sans el panel suena a dos voces y
     * parece pegado de otra pagina.
     *
     * Es el mismo criterio que ya se aplico a la cita de Yuna cuando la
     * serif a --text-lg hacia que la lectura conjunta no pareciera del
     * mismo sitio que los parrafos de al lado. */
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    min-height: 36px;
    color: var(--secondary-contrast);
    background: linear-gradient(140deg, var(--accent-soft), var(--secondary-soft));
    border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
    border-radius: var(--radius-pill);
    text-transform: capitalize;
    /* Two-word energies (`En movimiento`) must stay inside the card. */
    max-width: 100%;
    text-align: center;
}

/* --- Other signs -------------------------------------------------- */

.horoscope-others {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.horoscope-others__title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* The same rule as above: divisors of twelve, one step denser. */
/* El modificador vive junto al componente, no en home.css.
   Estuvo alli y no se aplicaba: `.sign-grid` y `.sign-grid--home` tienen
   la misma especificidad, y readings.css se carga despues, asi que la
   regla general ganaba y los doce signos salian de seis en seis. */
/* Doce signos: cuatro por fila reparten en 4+4+4, que es lo unico que
   divide doce sin dejar una fila coja. En pantallas medias, tres; en el
   movil, dos. Nunca cinco, que daria 5+5+2. */
.sign-grid--home {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 600px) {
    .sign-grid--home {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .sign-grid--home {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sign-grid--compact {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

@media (min-width: 480px) {
    .sign-grid--compact {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .sign-grid--compact {
        grid-template-columns: repeat(6, 1fr);
    }
}

.sign-card--compact {
    padding: var(--space-3) var(--space-2);
    gap: 2px;
}

.sign-card--compact .sign-card__symbol {
    font-size: var(--text-2xl);
}

.sign-card--compact .sign-card__name {
    font-size: var(--text-sm);
}

/* ============================================================
   SIGN FINDER
   A birthday goes in, a whole astrological profile comes out.
   ============================================================ */

.sign-finder {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.sign-finder__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
    text-align: center;
}

.sign-finder__title {
    margin: 0;
    font-size: clamp(1.45rem, 5.5vw, 2.75rem);
    line-height: 1.1;
}

.sign-finder__lead {
    max-width: 54ch;
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.sign-finder__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    justify-content: center;
}

.sign-finder__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

@media (max-width: 479px) {
    .sign-finder__form,
    .sign-finder__field {
        width: 100%;
    }

    .sign-finder__form .btn {
        width: 100%;
    }
}

/* --- Yuna names the sign ------------------------------------------ */

.sign-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    text-align: center;
    background: var(--surface-celestial-strong);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

.sign-reveal__voice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.sign-reveal__avatar {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(var(--glow-moon));
}

.sign-reveal__line {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 4vw, 2rem);
    color: var(--text-primary);
}

.sign-reveal__line strong {
    color: var(--secondary-contrast);
}

.sign-reveal__symbol {
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--accent-ink);
}

.sign-reveal__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.sign-reveal__summary {
    max-width: 54ch;
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* --- Sections ------------------------------------------------------ */

.sign-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sign-section__title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* --- Correspondences ----------------------------------------------- */

.trait-grid {
    display: grid;
    gap: var(--space-3);
    /* Twelve traits, so the columns stay divisors of twelve. */
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
    .trait-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .trait-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-gold);
}

.trait__icon {
    font-size: 1.25rem;
    color: var(--secondary-contrast);
}

.trait__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.trait__value {
    /* Sans, no la serif de titulares.
     *
     * La serif es para nombrar: una carta, un signo, Yuna. Un dato no se
     * nombra, se lee —«Aire», «Urano», «Luna creciente»— y puesto en
     * serif junto a su etiqueta en sans el panel suena a dos voces y
     * parece pegado de otra pagina.
     *
     * Es el mismo criterio que ya se aplico a la cita de Yuna cuando la
     * serif a --text-lg hacia que la lectura conjunta no pareciera del
     * mismo sitio que los parrafos de al lado. */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-wrap: balance;
}

/* --- Light and shadow ---------------------------------------------- */

.sign-poles {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .sign-poles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sign-pole {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-gold);
}

/* The two poles are told apart by their leading edge, not by colour
   alone: a border is readable without relying on hue. */
.sign-pole--light {
    border-left: 3px solid var(--gold);
}

.sign-pole--shadow {
    border-left: 3px solid var(--secondary);
}

/* --- Every part of life -------------------------------------------- */

.aspect-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .aspect-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .aspect-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.aspect {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-gold);
}

/* The way into the sign finder, under the twelve cards. */
.sign-finder__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.sign-finder__cta-line {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* --- The day's small signs ------------------------------------------ */

.day-signs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.day-signs__title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* Four tiles, so they divide evenly rather than leaving one stranded. */
/* Las senales del dia no son un numero fijo: color, numero, piedra y planta
   siempre; los dos signos del dia solo si la IA los devolvio. Son seis, o
   cuatro.

   Por eso la rejilla las cuenta. Con cuatro columnas fijas, seis fichas
   dejaban una segunda fila a medias con un hueco a la derecha. Repartirlas
   con `flex-grow` era peor: las dos de abajo salian al doble de anchas. Y
   bajar a tres columnas sin mas rompia el caso de cuatro, que se parte en
   3+1.

   `:has()` resuelve el unico dato que falta —cuantas hay— en el sitio donde
   se decide la forma, sin pasarlo desde la plantilla. */
.trait-grid--day {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .trait-grid--day {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Cinco o mas: tres por fila. Seis quedan en 3+3, que es el caso normal. */
    .trait-grid--day:has(> :nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The two that name a sign lead somewhere, so they answer to the cursor. */
/* Todas responden al puntero; solo las que llevan a algun sitio se
   levantan.
 *
 * Elevar una ficha que no se puede pulsar promete un clic que no existe,
 * y quien lo intenta se queda esperando. Asi que lo que comparten es
 * estar vivas —el borde se enciende y el icono se aclara— y lo que las
 * distingue es el salto, que es la senal de «esto lleva a otro sitio».
 */
.trait {
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.trait:hover {
    border-color: var(--border-accent);
    box-shadow: var(--ring-gold-strong), var(--shadow-sm);
}

.trait:hover .trait__icon {
    color: var(--gold-bright);
    transform: scale(1.12);
}

.trait__icon {
    transition: color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.trait--link {
    text-decoration: none;
    color: inherit;
}

/* El salto, solo para las que de verdad llevan a otra pagina. */
.trait--link:hover,
.trait--link:focus-visible {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .trait--link:hover,
    .trait--link:focus-visible,
    .trait:hover .trait__icon {
        transform: none;
    }
}

/* ============================================================
   CARD OF THE DAY
   The artwork beside its reading, which is what ties the
   horoscope to the deck rather than leaving them as two apps.
   ============================================================ */

.day-card {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    text-align: center;
    background: var(--surface-celestial-strong);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

@media (min-width: 720px) {
    .day-card {
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        gap: var(--space-5);
        text-align: left;
    }
}

.day-card__art {
    display: block;
    flex-shrink: 0;
    width: 9rem;
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.day-card__art:hover,
.day-card__art:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--glow-moon);
}

/* The lean towards the pointer keeps the hover lift, so moving onto the card
   does not undo the rise it just made. */
.day-card__art.is-tilting,
.day-card__art.is-tilting:hover {
    /* Follows the pointer frame by frame; only the return is eased. */
    transition: box-shadow var(--duration-base) var(--ease-out);
    transform: perspective(900px)
               translateY(-3px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg));
}

/* --- Turning over ------------------------------------------------
   The same flip the spread uses, reusing its keyframes: one
   gesture, learnt once. The resting state is face up, so a
   visitor without scripting sees the card and nothing else. The
   `.js` class is what puts it face down in the first place.
   ----------------------------------------------------------------- */

.day-card__flip {
    position: relative;
    display: block;
    width: 100%;
    /* Rider-Waite proportions, as on the table. */
    aspect-ratio: 300 / 512;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

html.js .day-card__art:not(.is-revealed) .day-card__flip {
    transform: rotateY(0);
}

html.js .day-card__art.is-revealed .day-card__flip {
    animation: card-flip var(--duration-reveal) var(--ease-in-out) forwards;
}

.day-card__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: var(--border-width) solid var(--border-accent);
    box-shadow: var(--shadow-md);
}

.day-card__face--back {
    background: var(--yuna-indigo-900);
}

.day-card__face--front {
    transform: rotateY(180deg);
}

html.js .day-card__art.is-revealed .day-card__face--front {
    animation: card-flare var(--duration-reveal) var(--ease-out) forwards;
}

/* `contain` for the same reason as on the table: a card's border and its
   title are part of the artwork and must not be cropped. */
.day-card__face img,
.day-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--yuna-indigo-900);
}

/* Turned, exactly as it was drawn. */
.day-card__image.is-reversed {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    html.js .day-card__art.is-revealed .day-card__flip {
        animation: none;
        transform: rotateY(180deg);
    }

    html.js .day-card__art.is-revealed .day-card__face--front {
        animation: none;
    }

    .day-card__art.is-tilting,
    .day-card__art.is-tilting:hover {
        transform: none;
    }
}

.day-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

@media (min-width: 720px) {
    .day-card__body {
        align-items: flex-start;
    }
}

.day-card__name {
    margin: 0;
    font-size: clamp(1.25rem, 4vw, 2rem);
    line-height: var(--leading-tight);
}

.day-card__text {
    margin: 0;
    max-width: 60ch;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.day-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--secondary-contrast);
}

.day-card__link .material-symbols-rounded {
    font-size: 1rem;
    color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
    .day-card__art:hover,
    .day-card__art:focus-visible {
        transform: none;
    }
}

/* ============================================================
   THE SKY TODAY
   The word, the moon and the day's planet. The moon is drawn
   with a gradient rather than an image, so it shows the real
   illumination for the date.
   ============================================================ */

.sky-today {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    background: var(--surface-celestial-strong);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

@media (min-width: 720px) {
    .sky-today {
        grid-template-columns: auto 1fr;
        gap: var(--space-6);
    }
}

.sky-today__word {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.sky-today__keyword {
    margin: 0;
    /* Serif, y aqui si.
     *
     * Se paso a sans tratandola como un dato, junto a la fase lunar y el
     * planeta. Era un error de criterio: esto no es un dato, es una
     * palabra de titular a 44px. A ese tamano la sans parece una etiqueta
     * de interfaz y la serif parece una carta, que es lo que se busca.
     *
     * Lo que separa una fuente de la otra no es «dato o titulo» sino el
     * tamano. Por debajo de unos 16px la serif de alto contraste pierde
     * los trazos finos y ensucia; por encima de 24 es justo donde luce.
     * Entre medias manda el papel que cumple el texto. */
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.75rem);
    line-height: 1;
    color: var(--text-primary);
    text-wrap: balance;
}

.sky-today__facts {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .sky-today__facts {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}

/* --- The moon ----------------------------------------------------- */

.moon {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "disc name" "disc pct";
    align-items: center;
    gap: 0 var(--space-3);
}

/* The lit fraction is a gradient stop, so the disc matches the date — lit
   from the right-hand limb and feathered, exactly as the moon in the sky
   behind it. The two are the same computation and must not disagree. */
.moon__disc {
    grid-area: disc;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--secondary) 30%, transparent)
            0 calc(100% - var(--lit, 50%) - 5%),
        var(--gold-bright) calc(100% - var(--lit, 50%) + 5%) 100%
    );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
                0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* Waning light sits on the other limb, and one gradient cannot do both. */
.moon[data-phase^="waning"] .moon__disc,
.moon[data-phase="last_quarter"] .moon__disc {
    transform: scaleX(-1);
}

.moon__name {
    grid-area: name;
    /* Sans, no la serif de titulares.
     *
     * La serif es para nombrar: una carta, un signo, Yuna. Un dato no se
     * nombra, se lee —«Aire», «Urano», «Luna creciente»— y puesto en
     * serif junto a su etiqueta en sans el panel suena a dos voces y
     * parece pegado de otra pagina.
     *
     * Es el mismo criterio que ya se aplico a la cita de Yuna cuando la
     * serif a --text-lg hacia que la lectura conjunta no pareciera del
     * mismo sitio que los parrafos de al lado. */
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.moon__pct {
    grid-area: pct;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    color: var(--accent-ink);
}

/* --- The planet and the hours ------------------------------------- */

.planet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.planet__name {
    /* Sans, no la serif de titulares.
     *
     * La serif es para nombrar: una carta, un signo, Yuna. Un dato no se
     * nombra, se lee —«Aire», «Urano», «Luna creciente»— y puesto en
     * serif junto a su etiqueta en sans el panel suena a dos voces y
     * parece pegado de otra pagina.
     *
     * Es el mismo criterio que ya se aplico a la cita de Yuna cuando la
     * serif a --text-lg hacia que la lectura conjunta no pareciera del
     * mismo sitio que los parrafos de al lado. */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--secondary-contrast);
}

.planet__note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* ============================================================
   WHAT OPENS, WHAT CLOSES
   ============================================================ */

.gates {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .gates {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gate {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--ring-gold);
}

/* Each one leads with its own edge, so the three read apart at a glance. */
.gate--opens  { border-left: 3px solid var(--success); }
.gate--closes { border-left: 3px solid var(--secondary); }
.gate--avoid  { border-left: 3px solid var(--gold); }

.gate__title {
    display: flex;
    /* Sans, aunque sea un `<h3>`.
     *
     * Esto no es un titulo: es un rotulo. Mide 12px, va en mayusculas y
     * con 1.68px de espaciado, exactamente el mismo papel que
     * `.trait__label`, que va en Inter. Lo que lo diferenciaba era
     * heredar la serif de la regla `h1..h4` de base.css por estar
     * marcado como encabezado.
     *
     * Y a ese tamano se nota: Cormorant es una serif de alto contraste
     * cuyos trazos finos desaparecen a 12px, y las mayusculas con
     * espaciado le quitan las formas de caja baja que la hacen legible.
     * El resultado era una etiqueta de aspecto sucio al lado de otras
     * limpias haciendo lo mismo. */
    font-family: var(--font-sans);
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}

.gate__title .material-symbols-rounded {
    font-size: 1.05rem;
    width: 1.05rem;
    text-align: center;
    flex-shrink: 0;
}

.gate__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* ============================================================
   LA HORA Y EL LUGAR

   Van plegados dentro del formulario, que es un flex en fila: el
   `<details>` necesita ocupar el ancho entero o se mete de lado
   junto al campo de la fecha y rompe la fila.
   ============================================================ */

.sign-finder__more {
    flex-basis: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

.sign-finder__more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--secondary-contrast);
    border-radius: var(--radius-pill);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.sign-finder__more > summary:hover {
    background: var(--gold-soft);
}

.sign-finder__more > summary .material-symbols-rounded {
    font-size: 1.1rem;
}

.sign-finder__more-hint {
    /* La razon para abrirlo, en el propio resumen: sin esto el desplegable
       pide dos datos mas sin decir para que. */
    font-weight: var(--weight-normal);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.sign-finder__pair {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    margin-top: var(--space-3);
}

.sign-finder__more-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    text-wrap: pretty;
}

/* ============================================================
   LA CARTA

   Tres tarjetas: ascendente, Luna y ano personal. La del
   ascendente es mas grande cuando esta porque es el dato que no
   comparte con nadie; cuando falta se queda como aviso de que
   falta, sin tamano extra.
   ============================================================ */

.chart {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.chart__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold), var(--shadow-sm);
}

.chart__card--lead {
    background: var(--surface-celestial-strong);
    border-color: var(--border-accent);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

.chart__card--empty {
    /* Discontinuo: dice que aqui falta algo sin que parezca un error. */
    background: none;
    border-style: dashed;
    box-shadow: none;
}

.chart__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.chart__label .material-symbols-rounded {
    font-size: 1.1rem;
}

.chart__value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    /* Serif: es la palabra grande de la tarjeta, y por encima de 24px es
       justo donde la display luce. Por debajo ensucia, y por eso las
       etiquetas y los detalles de abajo van en sans. */
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

.chart__number {
    /* El numero del ano personal: es la cifra del dato, no decoracion. */
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--secondary-contrast);
}

.chart__detail {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.chart__note {
    margin: var(--space-2) 0 0;
    line-height: var(--leading-normal);
    color: var(--text-primary);
    text-wrap: pretty;
}

.chart__warn {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--gold-soft);
    border-left: 3px solid var(--secondary);
    border-radius: var(--radius-sm);
    text-wrap: pretty;
}

/* ============================================================
   LOS RETROGRADOS
   ============================================================ */

.retro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold), var(--shadow-sm);
}

.retro__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-xl);
}

.retro__title .material-symbols-rounded {
    color: var(--secondary-contrast);
}

.retro__lead,
.retro__none {
    max-width: 62ch;
    margin: 0;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.retro__list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.retro__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}

.retro__planet {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.retro__theme {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.retro__until {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--accent-ink);
}

/* ============================================================
   LA LUNA EN LOS PROXIMOS DIAS
   ============================================================ */

.moon-month__lead {
    max-width: 62ch;
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.moon-month {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.moon-month__span {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}

.moon-month__span.is-own {
    /* Los dias en que la Luna pasa por tu signo: lo unico de la lista que
       no es igual para todo el mundo. */
    background: var(--surface-celestial-strong);
    border-color: var(--border-accent);
    box-shadow: var(--ring-gold);
}

.moon-month__span.is-today {
    /* Donde esta uno ahora. Una marca al margen y no un color de fondo,
       para que pueda coincidir con `is-own` sin pelearse con ella. */
    border-left: 3px solid var(--secondary);
}

.moon-month__dates {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--secondary-contrast);
    white-space: nowrap;
}

.moon-month__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.moon-month__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.moon-month__icon {
    font-size: 1.1rem;
    color: var(--accent-ink);
}

.moon-month__title {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.moon-month__flag {
    font-size: var(--text-2xs);
}

.moon-month__note {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

@media (max-width: 479px) {
    .moon-month__span {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* ============================================================
   CUMPLEAÑOS Y MERCURIO
   Avisos de arriba del horoscopo: salen pocas veces, asi que
   cuando salen van destacados.
   ============================================================ */

.birthday,
.mercury {
    margin-block: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.birthday {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.birthday__icon {
    font-size: 2.25rem;
    color: var(--secondary-contrast);
}

.birthday__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.birthday__note {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
}

.mercury__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-weight: var(--weight-bold, 600);
    color: var(--text-primary);
}

.mercury__tips {
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ============================================================
   CARTAS PERSONALES
   ============================================================ */

.personal-day__extra {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.personal-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border);
}

/* Las cartas van centradas, y su etiqueta y el boton de compartir con
   ellas: una etiqueta a la izquierda sobre una carta centrada descuadra. */
.personal-cards__item {
    margin: 0;
    text-align: center;
}

.personal-cards .share {
    align-self: center;
}

.personal-cards__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.moon-you__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

/* ============================================================
   LA SEMANA
   ============================================================ */

.week {
    margin-block: var(--space-5);
    padding: var(--space-5);
}

.week__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.week__best {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.week__best li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.week__best .material-symbols-rounded {
    font-size: 1.1em;
    color: var(--secondary-contrast);
}

.week__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.week__table th,
.week__table td {
    padding: var(--space-2) var(--space-1);
    text-align: left;
    border-top: var(--border-width) solid var(--border);
}

.week__table thead th {
    border-top: 0;
    font-size: var(--text-xs);
    font-weight: normal;
    color: var(--text-secondary);
}

.week__table tbody th {
    font-weight: normal;
    white-space: nowrap;
}


/* ============================================================
   LA RACHA
   ============================================================ */

.streak {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--ring-gold);
}

.streak__flame {
    font-size: 1.15rem;
    color: var(--accent-ink);
}

.streak__count {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.streak__best {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

/* Solo en los hitos, y solo el dia que se alcanzan: una celebracion que
   salta en cada recarga deja de celebrar nada. */
.streak.is-milestone {
    animation: streak-celebrate 1.1s var(--ease-out) 2;
}

.streak.is-milestone .streak__flame {
    color: var(--gold-bright);
}

@keyframes streak-celebrate {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--ring-gold);
    }
    40% {
        transform: scale(1.06);
        box-shadow: var(--ring-gold-strong),
                    0 0 26px color-mix(in srgb, var(--gold) 45%, transparent);
    }
}

/* ============================================================
   EL GESTO DEL DIA
   ============================================================ */

.ritual {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block: var(--space-5);
    padding: var(--space-5);
}

.ritual__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
    color: var(--secondary-contrast);
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
    border-radius: 50%;
}

.ritual__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.ritual__text {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    text-wrap: pretty;
}

/* ============================================================
   LA LUNA Y TU
   ============================================================ */

.moon-you {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block: var(--space-5);
}

/* La frase para salir de casa va primero y grande: es lo que se recuerda
   del horoscopo cuando ya se ha cerrado la pagina. */
.moon-you__reminder {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    text-wrap: pretty;
}

.moon-you__reminder-icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    color: var(--secondary-contrast);
}

.moon-you__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
}

.moon-you__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
}

.moon-you__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.moon-you__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.moon-you__note {
    margin: var(--space-2) 0 0;
    color: var(--text-primary);
    text-wrap: pretty;
}

.moon-you__card--full {
    border-color: color-mix(in srgb, var(--secondary) 45%, var(--border));
}

/* ============================================================
   LOS NUMEROS
   ============================================================ */

.lotto {
    margin-block: var(--space-5);
    padding: var(--space-5);
    text-align: center;
    background: var(--surface-celestial-strong);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
}

.lotto__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.lotto__title .material-symbols-rounded {
    color: var(--accent-ink);
}

.lotto__balls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lotto__ball {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    /* Cifras tabulares: sin ellas, un 11 y un 48 ocupan distinto y las
       bolas dejan de verse alineadas. */
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--text-on-accent);
    background: linear-gradient(145deg, var(--accent), var(--secondary));
    box-shadow:
        inset 0 2px 0 0 color-mix(in srgb, var(--gold-bright) 45%, transparent),
        0 6px 16px color-mix(in srgb, var(--secondary) 40%, transparent);
    /* Caen una detras de otra, como salen de un bombo. */
    animation: lotto-drop 620ms var(--ease-out) both;
    animation-delay: calc(var(--ball-index, 0) * 110ms);
}

@keyframes lotto-drop {
    from {
        opacity: 0;
        transform: translateY(-26px) scale(0.6) rotate(-18deg);
    }
    60% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@media (max-width: 559px) {
    .lotto__ball {
        width: 2.75rem;
        height: 2.75rem;
        font-size: var(--text-base);
    }

    .lotto__balls {
        gap: var(--space-2);
    }
}


/* --- El transito ------------------------------------------------- */

.planet__degrees {
    margin-left: var(--space-1);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
    .streak.is-milestone,
    .lotto__ball {
        animation: none;
    }
}

.lotto__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.sign-reveal__next {
    margin-top: var(--space-4);
}

.sign-reveal__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.day-signs__card {
    margin-top: var(--space-4);
    text-align: center;
}


/* ============================================================
   BIORRITMOS
   Barras que salen del centro: fase alta a la derecha, baja a la
   izquierda. `--value` va de -100 a 100.
   ============================================================ */

.biorhythm {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

/* Nombre y estado en una linea, la barra debajo a todo el ancho: cabe
   igual en una tarjeta estrecha que en el bloque personal. */
.biorhythm__cycle {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label state"
        "track track";
    align-items: center;
    gap: var(--space-1) var(--space-3);
}

.biorhythm__track {
    grid-area: track;
}

.biorhythm__label {
    grid-area: label;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.biorhythm__label .material-symbols-rounded {
    font-size: 1.1em;
    color: var(--secondary-contrast);
}

.biorhythm__track {
    position: relative;
    height: 8px;
    background: color-mix(in srgb, var(--text-secondary) 22%, transparent);
    border-radius: 999px;
}

/* El centro de la pista es el cero. */
.biorhythm__track::after {
    content: "";
    position: absolute;
    inset: -3px auto -3px 50%;
    width: 1px;
    background: var(--text-secondary);
}

.biorhythm__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + min(0, var(--value)) * 0.5%);
    width: calc(max(var(--value), -1 * var(--value)) * 0.5%);
    background: var(--secondary);
    border-radius: 999px;
}

.biorhythm__state {
    grid-area: state;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: right;
}

.biorhythm__cycle--critical .biorhythm__state {
    color: var(--secondary-contrast);
    font-weight: var(--weight-semibold);
}