/* Plantilla 35 · Órbita. Espacio profundo: azul noche, letra espacial en mayúsculas, el logo como planeta con anillos
   y las fotos de los productos girando a su alrededor como lunas (siempre derechas). Un solo movimiento dominante: la órbita. */
:root {
  --sheet: #0f1430; --r-card: 20px; --r-field: 12px; --r-sheet: 24px; --top-h: 62px;
  --ink: #eef0ff; --ink-2: #c3c8ec; --muted: #a6acd8; --line: rgb(190 200 255 / .15);
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* El carro de las lunas gira entero: su caja girada no debe abrir un desplazamiento hacia los lados */
main { max-width: 1200px; margin: 0 auto; padding: 0 16px; overflow-x: clip; }
.top { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom-color: var(--line); }
.top-brand { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
.btn { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.btn-main { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, #fff), 0 12px 32px -10px var(--glow); }
.btn-ghost { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--line); }

/* Portada: el sistema orbital. Las lunas van sobre un plano inclinado (achatado a la mitad); cada luna se endereza
   girando al revés del carro y deshaciendo el achatado, así la foto siempre se ve derecha y redonda. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; padding: 22px 0 6px; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 16px; }
.orbit { --R: min(150px, 40vw); position: relative; width: calc(var(--R) * 2); aspect-ratio: 1; display: grid; place-items: center; }
.orbit-plane { position: absolute; inset: 0; transform: rotate(-18deg) scaleY(.5); pointer-events: none; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(200 210 255 / .3); }
.ring-2 { inset: -8%; border-width: 1px; border-color: rgb(200 210 255 / .14); }
.carrier { position: absolute; inset: 0; animation: orbit 40s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.moon { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; transform: rotate(var(--a)) translateY(calc(var(--R) * -1)); }
.moon-in { display: block; width: 100%; height: 100%; transform: rotate(calc(var(--a) * -1)) scale(1, 2) rotate(18deg); animation: upright 40s linear infinite; }
@keyframes upright {
  from { transform: rotate(calc(var(--a) * -1)) scale(1, 2) rotate(18deg); }
  to { transform: rotate(calc(var(--a) * -1 - 360deg)) scale(1, 2) rotate(18deg); }
}
.moon-img, .moon .img-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: .8rem; box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 8px 18px -6px rgb(0 0 0 / .7); }
.orbit .hero-logo, .planet { position: relative; z-index: 2; }
.orbit .hero-logo .logo-img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: var(--sheet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, #fff), 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 46px -2px var(--glow); }
.planet { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent) 30%, #fff), var(--accent) 52%, color-mix(in srgb, var(--accent) 45%, #000));
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 46px -2px var(--glow); }
/* La letra espacial es muy ancha: los nombres largos se achican menos que en las demás (si una palabra no cabe, store.js la ajusta) */
.hero-name[data-len="medio"] { --ns: .94; } .hero-name[data-len="largo"] { --ns: .86; }
.hero-name[data-word="largo"] { --ws: .9; } .hero-name[data-word="muy-largo"] { --ws: .8; }
.hero-name { font-weight: 800; text-transform: uppercase; font-size: calc(clamp(2.1rem, 10.2vw, 5rem) * min(var(--ns, 1), var(--ws, 1))); line-height: 1.06; letter-spacing: .02em; max-width: 100%;
  text-shadow: 0 0 26px var(--glow); }
.hero-slogan { color: var(--ink-2); font-size: clamp(1rem, 4vw, 1.2rem); max-width: 32ch; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* Entrada: el sistema aparece y se asienta; luego el nombre y lo demás, uno tras otro */
.js .hero > .orbit { animation: orbit-in 1s var(--ease-out) both; }
.js .hero-copy > * { animation: lift .8s var(--ease-out) .12s both; }
.js .hero-copy > :nth-child(2) { animation-delay: .2s; } .js .hero-copy > :nth-child(3) { animation-delay: .28s; }
@keyframes orbit-in { from { opacity: 0; transform: scale(.9); } }
@keyframes lift { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.cf-card { border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 24px 50px -18px rgb(0 0 0 / .8), 0 0 40px -14px var(--glow); }
.cf-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; }
.cf-nav .btn-icon { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--line); }

/* Catálogo: vidrio oscuro, borde de luz al pasar; las tarjetas entran acercándose */
.shop { margin-top: 40px; }
.shop-title { font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 7vw, 2.6rem); letter-spacing: .05em; }
.tabs { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.tab { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.tab-ind { height: 3px; box-shadow: 0 0 12px var(--glow); }
.grid { gap: 12px; }
.card-hit { background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) { .card-hit:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 32px -10px var(--glow); } }
.card-media { margin: 6px 6px 0; border-radius: 15px; }
.card-name { font-weight: 600; }
.js .card.reveal { transform: translateY(16px) scale(.96); }
.js .card.reveal.is-in { transform: none; }
.extra { background: rgb(255 255 255 / .04); }
.foot { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.foot-name { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }

@media (min-width: 900px) {
  :root { --top-h: 68px; }
  main { padding: 0 32px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 40px; min-height: calc(88dvh - var(--top-h)); padding-top: 0; }
  .hero-copy { justify-items: start; text-align: left; }
  .orbit { --R: min(220px, 18vw); order: 2; }
  .moon { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .hero-cta { justify-content: flex-start; }
  .cf-wrap { --cf-card: clamp(220px, 20vw, 290px); }
  .tabs { margin: 0 -32px; padding: 10px 32px; }
  .cartbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .carrier, .moon-in { animation: none; } .js .card.reveal { transform: none; } }