/* ============================================================
   READINGS & HOROSCOPE PAGES
   ============================================================ */

/* --- Spread chooser ------------------------------------------ */

/* No overflow clipping: the hover sparkles are meant to spill past the edge. */
.spread-card {
    position: relative;
    /* Keeps the sparkle layers from being painted over by sibling cards. */
    isolation: isolate;
}

.spread-card__size {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding-inline: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    color: var(--accent-ink);
    background: var(--gold-soft);
    border-radius: var(--radius-pill);
}

/* --- The six spreads ---------------------------------------------
   Six divides as 3 x 2, never as 4. `grid-auto-md` fits four across
   on a wide screen and leaves the last two stranded in a half-empty
   row, which reads as a mistake rather than as a layout.
   ------------------------------------------------------------------ */

.spread-grid {
    grid-template-columns: 1fr;
}

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

@media (min-width: 900px) {
    .spread-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Three columns of a readable width rather than four thin ones. */
        max-width: 68rem;
        margin-inline: auto;
    }
}

/* --- Reading table ------------------------------------------- */

/* Sized so the heading, the table and the button share one screen: having
   to scroll to reach "draw the cards" broke the moment. The card size is
   driven by the space left over, not fixed. */
.reading-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    min-height: calc(100dvh - var(--nav-height) - var(--space-9));
    padding-block: var(--space-3);
}

/* Centred with auto margins rather than `justify-content`, which clips the
   overflow above the container and leaves no way to scroll back to it: on a
   phone the eyebrow and the title disappeared off the top. */
.reading-stage > :first-child {
    margin-block-start: auto;
}

.reading-stage > :last-child {
    margin-block-end: auto;
}

.reading-stage__intro {
    max-width: 52ch;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

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

.reading-stage__summary {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* --- The deal form ------------------------------------------------ */

.reading-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    width: min(100%, 680px);
}

.reading-form__field {
    flex: 1 1 260px;
    min-width: 0;
}

.reading-form .btn {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    /* No forced height on a phone. The content already comes to about 650px
       of an 844px screen, so the minimum only added a dead band of 116px
       between the last link and the disclaimer, and the page scrolled anyway
       because of the footer below it. */
    .reading-stage {
        min-height: 0;
        gap: var(--space-3);
    }

    .reading-stage > :first-child,
    .reading-stage > :last-child {
        margin-block: 0;
    }

    .reading-stage__summary {
        font-size: var(--text-sm);
    }
}

@media (max-width: 559px) {
    .reading-form {
        flex-direction: column;
        align-items: stretch;
    }

    /* `flex: 1 1 260px` is for the row. Turned into a column, the grow
       applies to the height instead and the field swelled to fill the
       screen, pushing the button to the bottom with a void above it. */
    .reading-form__field {
        flex: 0 0 auto;
    }

    .reading-form .btn {
        width: 100%;
    }
}

.reading-stage__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.reading-stage__back:hover {
    color: var(--text-primary);
}

/* One card size for the whole flow: the table and the turned result have to
   match, or the cards appear to grow as they are revealed. */
.reading-cards {
    --card-max: 11rem;
}

.reading-cards .tarot-card {
    max-width: var(--card-max);
    margin-inline: auto;
}

/* On the table the button has to share the screen, so the cards also give way
   to whatever height is left after the text. */
.reading-stage .reading-cards {
    --card-max: min(11rem, 26vh);
}

.reading-stage .card-slot__meaning {
    font-size: var(--text-xs);
}

@media (max-height: 820px) {

    .reading-stage .reading-cards {
        --card-max: min(9rem, 22vh);
    }
}

.reading-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    /* The navbar is sticky, so the first line needs room to clear it. */
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

/* The interpretation is the point of the page, so it gets the width. */
.reading-result .yuna-speech {
    padding: var(--space-5);
}

.reading-result .yuna-speech__text {
    font-size: var(--text-base);
}

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

@media (max-width: 639px) {
    .reading-cards {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }
}

/* ============================================================
   SPREAD LAYOUTS
   The modifier is built from the spread size in the template
   (`reading-cards--{{ spread.size }}`), so three cards sit in a
   row and five keep a balanced 3 + 2 arrangement instead of
   shrinking into a thin strip.
   ============================================================ */

.reading-cards--1 {
    max-width: 18rem;
    margin-inline: auto;
}

.reading-cards--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 42rem;
    margin-inline: auto;
}

.reading-cards--5 {
    grid-template-columns: repeat(6, 1fr);
    max-width: 52rem;
    margin-inline: auto;
}

.reading-cards--5 > :nth-child(1) { grid-column: 1 / span 2; }
.reading-cards--5 > :nth-child(2) { grid-column: 3 / span 2; }
.reading-cards--5 > :nth-child(3) { grid-column: 5 / span 2; }
.reading-cards--5 > :nth-child(4) { grid-column: 2 / span 2; }
.reading-cards--5 > :nth-child(5) { grid-column: 4 / span 2; }

/* On a phone the whole spread goes in one row, however many cards it holds.
   Two per row meant scrolling to see a five-card draw, and a spread you have
   to scroll through is no longer a spread you can read at a glance. At 360px
   that is about 59px a card for five, 101px for three. */
@media (max-width: 767px) {
    .reading-cards--1,
    .reading-cards--3,
    .reading-cards--5 {
        --card-max: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .reading-cards--1 {
        grid-template-columns: 1fr;
        max-width: 11rem;
        margin-inline: auto;
    }

    .reading-cards--3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }

    .reading-cards--5 {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-2);
    }

    .reading-cards--5 > :nth-child(n),
    .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-cards--3 .card-slot__position,
    .reading-cards--5 .card-slot__position {
        font-size: var(--text-2xs);
        letter-spacing: 0;
        line-height: var(--leading-tight);
    }

    /* On the table, at a fifth of a phone, there is no room for the position's
       description under the card. Only on the table: on the result that line
       is the card's meaning, which is the reason the page exists. */
    .reading-stage .reading-cards--5 .card-slot__meaning {
        display: none;
    }
}

@media (max-width: 380px) {
    .reading-cards--5 {
        gap: var(--space-1);
    }

    .reading-stage .reading-cards--3 .card-slot__meaning {
        display: none;
    }
}

.reading-question {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-secondary);
    background: var(--bg-surface-sunken);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

/* --- 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);
}

/* --- Card labels ---------------------------------------------------
   One rule for every small gold label that heads a card, so the
   horoscope facets and the sign profile cannot drift apart. The icon
   gets a fixed box, which is what lines the labels up across a row.
   -------------------------------------------------------------------- */

.facet__title,
.sign-pole__title,
.aspect__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: var(--space-2);
    /* 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);
    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);
}

.facet__title .material-symbols-rounded,
.sign-pole__title .material-symbols-rounded,
.aspect__title .material-symbols-rounded {
    font-size: 1.05rem;
    width: 1.05rem;
    text-align: center;
    flex-shrink: 0;
}

/* And one reading size, so a paragraph does not change weight between
   one card and the next. */
.facet__text,
.sign-pole__text,
.aspect__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* --- Yuna beside the reading, never over it ------------------- */

/* A line of speech, not a banner. Stretched to full width it left a wide
   empty gap to the right of the text, so it is capped and the two elements
   sit together instead of at opposite ends. */
.reading-host {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: auto;
    max-width: min(100%, 620px);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
    margin-bottom: var(--space-5);
    background: var(--surface-celestial);
    border: var(--border-width) solid var(--border-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}

.reading-host__portrait {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--radius-pill);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold) 32%, transparent));
}

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

@media (max-width: 479px) {
    .reading-host {
        display: flex;
        flex-direction: column;
        text-align: center;
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
}

/* --- Horoscope: Yuna as a secondary illustration -------------- */

/* ============================================================
   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 ------------------------------------------------------ */

.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);
}

/* ============================================================
   THE RESULT ON A PHONE
   Stacked, a card and its panel filled most of the screen and
   the reading took five scrolls to pass. Each card becomes a
   row instead: a thumbnail beside its text. Tapping the
   thumbnail opens it full size.
   ============================================================ */

@media (max-width: 639px) {
    .reading-result .reading-cards,
    .reading-result .reading-cards--1,
    .reading-result .reading-cards--3,
    .reading-result .reading-cards--5 {
        --card-max: 6.5rem;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        max-width: 30rem;
        margin-inline: auto;
    }

    /* The balanced five-card arrangement has no meaning in one column. */
    .reading-result .reading-cards--5 > :nth-child(n),
    .reading-result .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-result .card-slot {
        display: grid;
        grid-template-columns: var(--card-max) 1fr;
        grid-template-areas:
            "card position"
            "card panel";
        align-items: start;
        gap: var(--space-1) var(--space-3);
        text-align: left;
    }

    .reading-result .card-slot__position {
        grid-area: position;
    }

    .reading-result .tarot-card {
        grid-area: card;
    }

    .reading-result .card-slot__panel {
        grid-area: panel;
        /* Fills the column beside the card rather than matching its width:
           the symmetry that rule exists for only applies when they stack. */
        width: auto;
        align-items: flex-start;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================================
   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 READING, IN TWO HALVES
   What fell, and what Yuna makes of it. Stacked on a phone,
   side by side once there is room for both to be read at once.
   ============================================================ */

.reading-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .reading-split {
        /* The cards take what they need; the interpretation takes the rest,
           because it is the longer of the two. */
        grid-template-columns: minmax(22rem, 26rem) 1fr;
        gap: var(--space-6);
    }

    /* The cards stay in view while the interpretation is read, which is the
       reason for splitting them in the first place. */
    .reading-split__cards {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-4));
    }
}

.reading-split__cards,
.reading-split__voice {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.reading-section__title {
    display: flex;
    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);
}

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

/* Three cards across a column this narrow left each meaning about twelve
   characters wide, hyphenated to pieces. In the sidebar they become rows
   instead, the same shape the phone already uses: thumbnail on the left, the
   text beside it with room to be read. */
@media (min-width: 1024px) {
    .reading-split .reading-cards,
    .reading-split .reading-cards--1,
    .reading-split .reading-cards--3,
    .reading-split .reading-cards--5 {
        --card-max: 6.5rem;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        max-width: none;
        margin-inline: 0;
    }

    .reading-split .reading-cards--5 > :nth-child(n),
    .reading-split .reading-cards--3 > :nth-child(n) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }

    .reading-split .card-slot {
        display: grid;
        grid-template-columns: var(--card-max) 1fr;
        grid-template-areas:
            "card position"
            "card panel";
        align-items: start;
        gap: var(--space-1) var(--space-3);
        text-align: left;
    }

    .reading-split .card-slot__position {
        grid-area: position;
    }

    .reading-split .tarot-card {
        grid-area: card;
    }

    .reading-split .card-slot__panel {
        grid-area: panel;
        /* Fills the column beside the card: matching the card's width is for
           when they stack, not when they sit side by side. */
        width: auto;
        align-items: flex-start;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }

    /* Yuna's panel fills its column rather than being capped for a page. */
    .reading-split .yuna-speech {
        width: 100%;
    }
}

/* ============================================================
   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);
    }
}