/* Fuente del PSD. Esta ruta versionada evita el CSS de fuentes que pudo quedar en caché. */
@font-face {
  font-family: "Univers LT 47 Luna Sangre";
  src: url("/assets/fonts/UniversLTStd-LightCn-Luna-v2.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Luna Sangre Preview y Manual. El sitio existente conserva sus estilos. */
html:has(body.page-luna-preview),
html:has(body.page-lunar-editorial),
html:has(body.page-lunar-construction) { background: #000; }

body:is(.page-luna-preview,.page-lunar-editorial,.page-lunar-construction) {
  min-width: 280px;
  background: #000;
  color: #fff;
  font-family: "Univers Condensed WV", "Arial Narrow", Arial, sans-serif;
  letter-spacing: normal;
}

body:is(.page-luna-preview,.page-lunar-editorial,.page-lunar-construction)::after { display: none; }

.lunar-sparks {
  position: fixed;
  z-index: 2;
  inset: 0;
  background: url("/assets/portal-blood-tears.webp") center top / cover no-repeat;
  opacity: .33;
  pointer-events: none;
}

.lunar-site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: auto;
  left: 50%;
  display: block;
  width: min(100vw, 153.3546svh, 1920px);
  height: 9cqw;
  min-height: 0;
  padding: 0;
  transform: translateX(-50%);
  container-type: inline-size;
  pointer-events: none;
}

.lunar-site-header .header-left { display: contents; }
.lunar-site-header :is(.rating-link,.powered-link,.header-logo-link,.lunar-sign-in) {
  position: absolute;
  display: block;
  pointer-events: auto;
}
.lunar-site-header .rating-link { top: 2.96875cqw; left: 2.76042cqw; width: 10.9375cqw; }
.lunar-site-header .powered-link { top: 4.94792cqw; left: 16.09375cqw; width: 21.14583cqw; }
.lunar-site-header .header-logo-link { top: 2.5cqw; right: 1.61458cqw; width: 11.19792cqw; }
.lunar-site-header :is(.rating-mark,.powered-mark,.header-logo) {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  filter: none;
}
.lunar-site-header .lunar-sign-in {
  top: 4.73958cqw;
  right: 14.63542cqw;
  color: #fff;
  font: 300 clamp(9px,.94cqw,17px)/1 "Bank Gothic WV", sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}
.lunar-site-header a:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

.preview-stage {
  position: relative;
  width: min(100%,1920px);
  min-height: 100svh;
  aspect-ratio: 1920 / 1252;
  margin: 0 auto;
  background: #000;
}
.preview-art { position: absolute; inset: 0; }
.preview-art img { position: absolute; display: block; height: auto; }
.preview-moon { top: 36.42%; left: 42.55%; width: 20.16%; }
.preview-wordmark {
  top: 59.03%;
  left: 36.72%;
  width: 30.47%;
  clip-path: polygon(0 0,100% 0,100% 100%,6% 100%,6% 94%,0 94%);
}
.preview-wv-mark { top: 77.56%; left: 45.05%; width: 13.39%; }
.preview-powered {
  position: absolute;
  top: 86.26%;
  left: 33.5%;
  width: 33%;
  margin: 0;
  color: #fff;
  font: 300 clamp(8px,.62vw,12px)/1.2 "Bank Gothic WV", sans-serif;
  letter-spacing: .31em;
  text-align: center;
  white-space: nowrap;
}
.preview-fineprint {
  position: absolute;
  top: 89.7%;
  left: 39.2%;
  width: 24%;
  color: rgba(255,255,255,.52);
  font: 400 clamp(6px,.4vw,8px)/1.15 "Univers Condensed WV", sans-serif;
  text-align: center;
}
.preview-links {
  position: absolute;
  z-index: 5;
  top: 72.68%;
  left: 67.45%;
  display: grid;
  gap: clamp(8px,1vw,18px);
  justify-items: start;
}
.preview-links a {
  color: #fff;
  font: 300 clamp(12px,.8vw,16px)/1 "Bank Gothic WV", sans-serif;
  letter-spacing: .1em;
  white-space: nowrap;
  animation: lunar-strobe 5.6s steps(1,end) infinite;
}
.preview-links a:nth-child(2) { animation-delay: -1.75s; }
.preview-links a:nth-child(3) { animation-delay: -3.5s; }
.preview-links a:is(:hover,:focus-visible) { animation: none; color: #fff; outline: 1px solid #fff; outline-offset: 5px; }
@keyframes lunar-strobe { 0%,8%,11%,100% { color:#fff; } 9%,10% { color:#000; } }

.lunar-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: clamp(28px,3vw,58px);
  align-items: start;
  width: min(100%,1920px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(150px,12.8vw,250px) clamp(28px,6.93vw,133px) 70px;
}
.lunar-media { display: flex; justify-content: center; min-width: 0; }
.lunar-media img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.lunar-media--scanner img { width: min(100%,640px); }
.lunar-media--phase img { width: min(100%,720px); }
.lunar-copy {
  width: 100%;
  min-width: 0;
  max-width: 650px;
  max-height: min(850px,calc(100svh - 270px));
  padding-right: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.13) transparent;
}
.lunar-copy::-webkit-scrollbar { width: 3px; }
.lunar-copy::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); }
.lunar-copy::-webkit-scrollbar-track { background: transparent; }
.lunar-copy h1,
.lunar-accordion summary,
.lunar-acquire,
.page-lunar-construction h1 {
  color: #ff0000;
  font-family: "Bank Gothic WV", sans-serif;
  font-weight: 300;
  letter-spacing: .14em;
}
.lunar-copy h1 { margin: 0 0 24px; font-size: clamp(18px,1.35vw,26px); line-height: 1.2; }
.lunar-copy p {
  margin: 0 0 1em;
  color: #fff;
  font: 400 clamp(15px,.91vw,18px)/1.42 "Univers Condensed WV", "Arial Narrow", Arial, sans-serif;
  letter-spacing: normal;
  overflow-wrap: break-word;
}
.manual-fixed { max-width: 610px; }
.lunar-warning { margin-top: clamp(18px,2vw,35px); }
.lunar-warning p { margin-bottom: 0; }
.lunar-accordion { margin-top: clamp(28px,3vw,54px); }
.lunar-accordion + .lunar-accordion { margin-top: 22px; }
.lunar-accordion summary {
  display: flex;
  gap: 12px;
  align-items: baseline;
  list-style: none;
  cursor: pointer;
  font-size: clamp(14px,1.03vw,20px);
  line-height: 1.35;
}
.lunar-accordion summary::-webkit-details-marker { display: none; }
.lunar-accordion summary:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }
.lunar-toggle { flex: 0 0 14px; }
.lunar-toggle::before { content: "+"; }
.lunar-accordion[open] .lunar-toggle::before { content: "−"; color: #fff; }
.lunar-accordion-content { padding: 18px 0 0 26px; }
.manual-phase-links {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(8px,1.8vw,35px);
  align-items: center;
  margin-top: 20px;
}
.manual-phase-links a { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; min-width: 0; color: #fff; font-size: 14px; }
.manual-phase-links img { width: 100%; max-width: 133px; height: auto; object-fit: contain; }
.manual-phase-links a:focus-visible { outline: 1px solid #fff; }
.manual-espejo-example { display: block; width: min(100%,376px); height: auto; margin: 20px 0 0; }
.page-lunar-phase .lunar-copy { padding-top: clamp(100px,16.5vw,310px); }
.page-lunar-phase .lunar-warning { margin-top: clamp(20px,2.5vw,42px); }
.lunar-acquire {
  display: block;
  width: fit-content;
  margin: clamp(24px,3.6vw,64px) 0 0 auto;
  font-size: clamp(13px,.95vw,18px);
  line-height: 1.2;
}
.lunar-acquire:is(:hover,:focus-visible) { color: #fff; outline: none; text-decoration: underline; text-underline-offset: 5px; }
.page-lunar-construction main { display: grid; min-height: 100svh; padding: 140px 20px 35px; place-items: center; }
.page-lunar-construction h1 { margin: 0; font-size: clamp(20px,2vw,38px); text-align: center; }

@media (max-width: 900px) {
  .lunar-sheet { grid-template-columns: 1fr; gap: 32px; padding: 140px clamp(20px,5vw,48px) 60px; }
  .lunar-media--scanner img { width: min(100%,560px); }
  .lunar-media--phase img { width: min(100%,560px); }
  .lunar-copy { max-width: 720px; max-height: none; padding-right: 0; margin: 0 auto; overflow: visible; }
  .page-lunar-phase .lunar-copy { padding-top: 0; }
}

@media (max-width: 720px) {
  .lunar-site-header { left: 0; width: 100%; height: 108px; transform: none; }
  .lunar-site-header .rating-link { top: 17px; left: 15px; width: 92px; }
  .lunar-site-header .powered-link { top: 51px; left: 119px; width: min(40vw,164px); }
  .lunar-site-header .header-logo-link { top: 16px; right: 13px; width: 93px; }
  .lunar-site-header .lunar-sign-in { top: 82px; right: 14px; font-size: 8px; }
  .preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100svh;
    aspect-ratio: auto;
    padding: 134px 18px 40px;
  }
  .preview-art { position: relative; inset: auto; flex: none; width: min(100%,480px); aspect-ratio: 1 / 1.22; }
  .preview-moon { top: 1%; left: 26%; width: 48%; }
  .preview-wordmark { top: 42%; left: 8%; width: 84%; }
  .preview-wv-mark { top: 75%; left: 34%; width: 32%; }
  .preview-powered { top: 89%; left: 5%; width: 90%; font-size: clamp(7px,2.1vw,10px); letter-spacing: .19em; }
  .preview-fineprint { top: 94%; left: 16%; width: 68%; font-size: 6px; }
  .preview-links { position: relative; top: auto; left: auto; gap: 17px; align-self: flex-end; margin: 24px 9% 0 0; }
  .preview-links a { font-size: 15px; }
  .lunar-sheet { padding-top: 136px; }
  .lunar-media--scanner img { width: min(100%,390px); }
  .lunar-media--phase img { width: min(100%,440px); }
  .lunar-copy h1 { font-size: 20px; }
  .lunar-copy p { font-size: 16px; line-height: 1.5; }
  .lunar-accordion summary { font-size: 16px; }
  .manual-phase-links a { grid-template-columns: 1fr; justify-items: center; gap: 4px; font-size: 13px; }
  .manual-phase-links img { width: min(100%,115px); }
}

@media (max-width: 360px) {
  .lunar-site-header .rating-link { width: 78px; }
  .lunar-site-header .powered-link { top: 43px; left: 106px; width: min(128px, calc(100vw - 199px)); }
  .lunar-site-header .header-logo-link { width: 80px; }
  .preview-links { margin-right: 4%; }
  .manual-phase-links { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-links a { animation: none; }
}

/* Ajustes de la segunda ronda a partir del PSD actualizado. */
body:is(.page-luna-preview,.page-lunar-editorial,.page-lunar-construction) {
  font-family: "Univers LT 47 Luna Sangre", "Univers LT 47 WV", "Univers Condensed WV", sans-serif;
}

.lunar-sparks {
  background-image: url("/assets/lunar-tears-global.webp");
  background-position: center top;
  background-size: cover;
  opacity: 1;
}
.page-luna-preview .preview-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/lunar-tears-preview.webp") center center / 100% 100% no-repeat;
  pointer-events: none;
}
.preview-art { z-index: 1; }
.preview-powered {
  top: 86.26%;
  left: 35.78%;
  width: 33.02%;
  max-width: none;
  height: auto;
  transform: none;
}
.preview-fineprint {
  top: 88.58%;
  left: 40.52%;
  width: 22.24%;
  max-width: none;
  height: auto;
  mix-blend-mode: screen;
}
.preview-links a {
  font-family: "Bank Gothic Light User", "Bank Gothic WV", sans-serif;
  font-weight: 300;
  animation: luna-flash-info .58s steps(1,end) infinite;
}
.preview-links a:nth-child(2) { animation: luna-flash-acquire .71s steps(1,end) -.27s infinite; }
.preview-links a:nth-child(3) { animation: luna-flash-activate .49s steps(1,end) -.18s infinite; }
@keyframes luna-flash-info {
  0%,11%,16%,47%,53%,100% { color:#fff; }
  12%,15%,48%,52% { color:#000; }
}
@keyframes luna-flash-acquire {
  0%,19%,23%,65%,70%,100% { color:#fff; }
  20%,22%,66%,69% { color:#000; }
}
@keyframes luna-flash-activate {
  0%,7%,12%,56%,61%,100% { color:#fff; }
  8%,11%,57%,60% { color:#000; }
}

.lunar-copy p {
  font-family: "Univers LT 47 Luna Sangre", "Univers LT 47 WV", "Univers Condensed WV", sans-serif;
  font-weight: 400;
}
.lunar-copy p strong,
.lunar-warning p { font-weight: 700; font-synthesis: weight; }
.lunar-copy p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.lunar-copy p a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.lunar-copy :is(h1,.lunar-accordion summary,.lunar-acquire,.lunar-back) {
  font-family: "Bank Gothic Light User", "Bank Gothic WV", sans-serif;
  font-weight: 300;
}
.manual-phase-links a { display: block; }
.manual-phase-links img { width: 100%; }
.lunar-media--phase img { width: min(100%,893px); }
.page-lunar-phase .lunar-copy { max-height: min(850px,calc(100svh - 155px)); }
.lunar-back {
  display: block;
  width: fit-content;
  margin: 5px 0 0 auto;
  color: rgba(255,255,255,.25);
  font-size: clamp(13px,.95vw,18px);
  line-height: 1.2;
  letter-spacing: .14em;
}
.lunar-back:is(:hover,:focus-visible) { color: #fff; outline: none; text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .lunar-media--phase img { width: min(100%,560px); }
  .page-lunar-phase .lunar-copy { max-height: none; }
}
@media (max-width: 720px) {
  .page-luna-preview .preview-stage::before { background-size: cover; }
  .preview-powered { top: 88.5%; left: 0; width: 100%; }
  .preview-fineprint { top: 93%; left: 16%; width: 68%; }
  .preview-links {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: min(100%,480px);
    gap: 8px;
    margin: 10px auto 0;
  }
  .preview-links a { font-size: clamp(8px,2.8vw,13px); letter-spacing: .04em; }
  .lunar-media--phase img { width: min(100%,440px); }
  .lunar-copy p { font-size: 16px; }
}
@media (max-width: 360px) {
  .preview-links { margin-right: auto; }
  .preview-links a { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-links a,
  .preview-links a:nth-child(2),
  .preview-links a:nth-child(3) { animation: none; }
}