/* ============================================================
   Index — hero, ticker y grilla del catálogo
   ============================================================ */

/* ===== HERO ===== */
.hero {
    position: relative;
    padding: 80px 26px 60px;
    overflow: hidden;
}
.hero .inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}
.hero .kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.hero .kicker::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--cyan);
}
.hero h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(44px, 7.2vw, 108px);
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
    color: var(--paper);
}
.hero h1 .line  { display: block; }
.hero h1 .pink  { color: var(--pink); }
.hero h1 .lime  { color: var(--lime); }
.hero h1 .sun   { color: var(--sun); }
.hero h1 .stroke{
    -webkit-text-stroke: 2px var(--paper);
    color: transparent;
}
.hero .lede {
    margin-top: 28px;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(245, 236, 210, .85);
}
.hero .lede b { color: var(--sun); font-weight: 600; }
.hero .lede .pink { color: var(--pink); font-weight: 600; }

/* LOCO — clicable, gira y vuelve */
.hero h1 .loco-spin {
    display: inline-block;
    cursor: pointer;
    transform-origin: 50% 55%;
    user-select: none;
    will-change: transform;
    outline: none;
}
.hero h1 .loco-spin:focus-visible {
    text-decoration: underline wavy currentColor;
    text-underline-offset: 0.12em;
}
.hero h1 .loco-spin.is-spinning {
    animation: loco-spin 900ms cubic-bezier(.3, 1.3, .4, 1);
}
@keyframes loco-spin {
    0%   { transform: scale(1)    rotate(0deg); }
    18%  { transform: scale(1.22) rotate(0deg); }
    85%  { transform: scale(1.22) rotate(720deg); }
    100% { transform: scale(1)    rotate(720deg); }
}

/* Frenesí — 10 clicks en 30s desbloquean este show de 10s */
.hero h1 .loco-spin.is-frenesi {
    animation: loco-frenesi 10s cubic-bezier(.4, .1, .6, .9) forwards;
    pointer-events: none;
    cursor: default;
    position: relative;
    z-index: 999;
}
@keyframes loco-frenesi {
    0%   { transform: scale(1)    rotate(0deg);    filter: drop-shadow(0 0 0 var(--pink)); }
    10%  { transform: scale(1.8)  rotate(720deg);  filter: drop-shadow(0 0 15px var(--pink)); }
    35%  { transform: scale(3.2)  rotate(2520deg); filter: drop-shadow(0 0 25px var(--sun)); }
    60%  { transform: scale(4.6)  rotate(4320deg); filter: drop-shadow(0 0 35px var(--lime)); }
    80%  { transform: scale(5.5)  rotate(5760deg); filter: drop-shadow(0 0 42px var(--cyan)); }
    95%  { transform: scale(3.2)  rotate(6840deg); filter: drop-shadow(0 0 20px var(--lavender)); }
    100% { transform: scale(1)    rotate(7200deg); filter: drop-shadow(0 0 0 var(--pink)); }
}
body.loco-frenesi-activo .hero { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .hero h1 .loco-spin.is-spinning,
    .hero h1 .loco-spin.is-frenesi { animation: none; }
}

/* ===== TICKER ===== */
.ticker-wrap {
    position: relative;
    transform: rotate(-1.2deg);
    margin: -20px -2vw 0;
}
.ticker {
    background: var(--lime);
    color: var(--plum-3);
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 12px 0;
    overflow: hidden;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .2);
}

/* Maceta sobre el ticker — hereda la inclinación del wrapper */
.maceta {
    position: absolute;
    bottom: 100%;
    /* la posición horizontal la setea JS de manera random */
    left: 18%;
    margin-bottom: -4px; /* "apoyada" levemente contra el borde superior */
    width: 60px;
    height: 80px;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35));
}
.ticker .track {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .02em;
    text-transform: uppercase;
    animation: marquee 70s linear infinite;
    padding-left: 100%;
}
.ticker .track .dot { color: var(--pink); margin: 0 18px; }
.ticker .track span { margin-right: 18px; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ===== INDEX section ===== */
.index {
    padding: 80px 26px 60px;
    max-width: 1280px;
    margin: 0 auto;
}
.index-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--paper);
}
.index-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--paper);
    padding-bottom: .12em;
}
.index-head h2 .pink { color: var(--pink); }
.index-head .count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lime);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.index-head .count b {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    color: var(--sun);
    letter-spacing: 0;
}

/* ===== CARDS ===== */
.grid .row { row-gap: 24px; }

.card {
    --c1: var(--pink);
    --c2: var(--plum-3);
    display: block;
    text-decoration: none;
    color: var(--c2);
    background: var(--c1);
    border: 2.5px solid #000;
    border-radius: 18px;
    padding: 20px;
    height: 100%;
    box-shadow: 6px 6px 0 #000;
    position: relative;
    transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), box-shadow .18s ease;
}
.card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #000;
    color: var(--c2);
}
.card:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 #000;
}

/* per-card colors (cycle) */
.grid > .row > [data-i="1"]  .card { --c1: var(--pink); }
.grid > .row > [data-i="2"]  .card { --c1: var(--cyan); }
.grid > .row > [data-i="3"]  .card { --c1: var(--sun); }
.grid > .row > [data-i="4"]  .card { --c1: var(--lime); }
.grid > .row > [data-i="5"]  .card { --c1: var(--lavender); }
.grid > .row > [data-i="6"]  .card { --c1: var(--coral); }
.grid > .row > [data-i="7"]  .card { --c1: var(--sun); }
.grid > .row > [data-i="8"]  .card { --c1: var(--pink); }
.grid > .row > [data-i="9"]  .card { --c1: var(--cyan); }
.grid > .row > [data-i="10"] .card { --c1: var(--lime); }
.grid > .row > [data-i="11"] .card { --c1: var(--lavender); --c2: var(--plum-3); opacity: .82; }
.grid > .row > [data-i="12"] .card { --c1: var(--coral);    --c2: var(--plum-3); opacity: .82; }

.card .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}
.card .num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 44px;
    line-height: .85;
    color: var(--c2);
    letter-spacing: -.02em;
}
.card .badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--c2);
    color: var(--c1);
    border-radius: 999px;
    border: 2px solid var(--c2);
}
.card .art {
    aspect-ratio: 5 / 3;
    width: 100%;
    border: 2.5px solid var(--c2);
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .55), transparent 55%),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(0, 0, 0, .06) 8px 9px),
        var(--c1);
    position: relative;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c2);
    line-height: 1.4;
}
.card .art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.4px);
    background-size: 5px 5px;
    mix-blend-mode: multiply;
    opacity: .35;
}
.card .art .art-inner { position: relative; z-index: 1; opacity: .55; }
.card .art .art-inner b {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .02em;
    margin-bottom: 4px;
}

.card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    line-height: .9;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--c2);
}
.card .desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--c2);
    text-wrap: pretty;
    opacity: .85;
}
.card .foot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px dashed var(--c2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c2);
}
.card .open {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .18s ease;
}
.card:hover .open { gap: 10px; }

/* sticker en algunas tarjetas */
.card .sticker {
    position: absolute;
    top: -12px;
    right: -10px;
    font-family: var(--font-script);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    background: var(--plum-3);
    color: var(--sun);
    padding: 6px 12px;
    border: 2.5px solid #000;
    border-radius: 999px;
    transform: rotate(8deg);
    box-shadow: 3px 3px 0 #000;
    z-index: 5;
}

/* tarjetas "en cocina" */
.card.cooking .art {
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, .1) 0 12px, transparent 12px 24px),
        var(--c1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 22px;
    color: var(--c2);
    text-align: center;
    padding: 18px;
    line-height: .95;
}
.card.cooking { cursor: default; }

/* empty state */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: rgba(245, 236, 210, .65);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; opacity: .8; }

@media (max-width: 720px) {
    .hero  { padding: 50px 20px 40px; }
    .index { padding: 50px 20px 40px; }
}

/* ============================================================
   Topbar — botón galaxia
   ============================================================ */
.nav-icon-btn {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    color: rgba(245, 236, 210, .7);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color .15s ease, transform .2s ease;
}
.nav-icon-btn:hover { color: var(--sun); transform: rotate(-12deg); }
.nav-icon-btn:focus-visible { outline: 2px dashed var(--lime); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Modal galaxia
   ============================================================ */
.modal-galaxia {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
.modal-galaxia.is-open { opacity: 1; pointer-events: auto; }
.modal-galaxia-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(6, 32, 26, .82), rgba(0, 0, 0, .96));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-galaxia-inner {
    position: relative;
    width: min(90vmin, 90vw, 720px);
    aspect-ratio: 1;
    transform: scale(.92);
    transition: transform .28s cubic-bezier(.2, 1.2, .4, 1);
}
.modal-galaxia.is-open .modal-galaxia-inner { transform: scale(1); }
.modal-cerrar {
    position: absolute;
    top: -42px;
    right: 0;
    background: var(--paper);
    color: var(--plum-3);
    border: 2.5px solid #000;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-cerrar:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; background: var(--sun); }
.modal-cerrar:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* ============================================================
   Sistema solar — usado dentro del modal
   Períodos orbitales reales (relativos a Tierra=12s)
   ============================================================ */
.sistema-solar {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.sistema-solar .sol {
    position: absolute;
    left: 50%; top: 50%;
    width: clamp(36px, 6.5%, 56px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff5b5 0%, #ffd76b 45%, #ff8b00 80%, #c44a00 100%);
    box-shadow:
        0 0 30px rgba(255, 200, 70, .65),
        0 0 70px rgba(255, 160, 50, .35),
        0 0 120px rgba(255, 130, 40, .18);
    z-index: 2;
}

.sistema-solar .orbita {
    position: absolute;
    left: 50%; top: 50%;
    border: 1px dashed rgba(245, 236, 210, .10);
    border-radius: 50%;
    animation-name: orbita-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes orbita-spin {
    from { transform: translate(-50%, -50%) rotate(0deg);   }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.sistema-solar .planeta {
    position: absolute;
    left: 50%; top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, .35);
}

/* Mercurio — 88 d → 2.89 s */
.orbita.mercurio { width: 14%; height: 14%; animation-duration: 2.89s; }
.orbita.mercurio .planeta { width: 6px; height: 6px;
    background: radial-gradient(circle at 30% 30%, #d8c3a8, #8a7458); }

/* Venus — 225 d → 7.40 s */
.orbita.venus    { width: 21%; height: 21%; animation-duration: 7.40s; }
.orbita.venus    .planeta { width: 10px; height: 10px;
    background: radial-gradient(circle at 30% 30%, #f5d28e, #b48235); }

/* Tierra — 365 d → 12 s (referencia) */
.orbita.tierra   { width: 28%; height: 28%; animation-duration: 12s; }
.orbita.tierra   .planeta { width: 11px; height: 11px;
    background: radial-gradient(circle at 30% 30%, #6aa7f0 0%, #2b5b9e 65%, #1a3d6f 100%); }

/* Marte — 687 d → 22.59 s */
.orbita.marte    { width: 36%; height: 36%; animation-duration: 22.59s; }
.orbita.marte    .planeta { width: 8px; height: 8px;
    background: radial-gradient(circle at 30% 30%, #e3795f, #8b2e1f); }

/* Júpiter — 4333 d → 142.4 s */
.orbita.jupiter  { width: 48%; height: 48%; animation-duration: 142.4s; }
.orbita.jupiter  .planeta {
    width: 24px; height: 24px;
    background:
        repeating-linear-gradient(180deg,
            rgba(160, 110, 60, .55) 0 2px,
            transparent 2px 4px),
        radial-gradient(circle at 30% 30%, #e8c79a, #a76b34 70%, #6e3f15);
}

/* Saturno — 10759 d → 353.6 s, con anillos */
.orbita.saturno  { width: 60%; height: 60%; animation-duration: 353.6s; }
.orbita.saturno  .planeta {
    width: 18px; height: 18px;
    background: radial-gradient(circle at 30% 30%, #f1d398, #a6772d);
    animation: orbita-contra 353.6s linear infinite;
}
.orbita.saturno  .planeta::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 40px; height: 10px;
    transform: translate(-50%, -50%) rotate(-18deg);
    border: 1.5px solid rgba(230, 200, 145, .75);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(230, 200, 145, .35);
    pointer-events: none;
}
@keyframes orbita-contra {
    from { transform: translate(-50%, -50%) rotate(0deg);    }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Urano — 30688 d → 1008 s */
.orbita.urano    { width: 73%; height: 73%; animation-duration: 1008s; }
.orbita.urano    .planeta { width: 13px; height: 13px;
    background: radial-gradient(circle at 30% 30%, #c8ecf0, #5a9aa6); }

/* Neptuno — 60182 d → 1980 s */
.orbita.neptuno  { width: 86%; height: 86%; animation-duration: 1980s; }
.orbita.neptuno  .planeta { width: 13px; height: 13px;
    background: radial-gradient(circle at 30% 30%, #6e95e0, #1f3f8f); }

@media (max-width: 600px) {
    .modal-galaxia-inner { width: 92vw; }
    .orbita.jupiter .planeta { width: 18px; height: 18px; }
    .orbita.saturno .planeta { width: 14px; height: 14px; }
    .orbita.saturno .planeta::after { width: 32px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sistema-solar .orbita,
    .sistema-solar .saturno .planeta { animation: none; }
}