/* JOSEATEL / Eclipse  —  CSS3, sin imágenes de fondo ni librerías */
:root {
  color-scheme: dark;
  --night: #0b090a;
  --night-warm: #130b0b;
  --white: #fbf5ef;
  --muted: #b3a29d;
  --ember: #f58338;
  --ember-light: #ffb377;
  --border: rgba(222, 133, 88, .18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; }
body {
  min-width: 280px;
  min-height: 100svh;
  margin: 0;
  background: radial-gradient(ellipse 58% 82% at 68% 57%, rgba(66, 19, 13, .12), transparent 73%),
              radial-gradient(ellipse 72% 62% at 10% 110%, rgba(58, 17, 16, .11), transparent 72%),
              var(--night);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #a63f19; color: #fff; }
a { color: inherit; }
.page-shell {
  max-width: 1600px;
  min-height: 100svh;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 112px, 1350px);
  margin: 0 auto;
  padding-top: clamp(27px, 4.4vh, 48px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  text-decoration: none;
  font-size: clamp(25px, 2.6vw, 35px);
  font-weight: 850;
  letter-spacing: -.085em;
  line-height: 1.3;
}
.brand__domain {
  display: inline-block;
  color: var(--ember-light);
  letter-spacing: -.065em;
  transition: opacity .32s ease, transform .32s ease;
}
.brand__domain.is-changing { opacity: 0; transform: translateY(-7px); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: rgba(105, 37, 19, .12);
  border: 1px solid rgba(246, 130, 71, .24);
  border-radius: 100px;
  color: #f1b18c;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  white-space: nowrap;
}
.status__dot {
  width: 7px; height: 7px;
  flex: none;
  background: #f79751;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 102, 32, .75), 0 0 18px rgba(222, 69, 22, .32);
  animation: signal 4s ease-in-out infinite;
}
.hero {
  flex: 1;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(22px, 4vw, 78px);
  width: min(100% - 112px, 1350px);
  margin: auto;
  padding: clamp(34px, 5vh, 64px) 0;
}
.hero__copy { position: relative; z-index: 1; padding-bottom: 18px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 29px;
  color: #e29b71;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
}
.eyebrow__line { width: 22px; height: 1px; background: #dd753b; }
h1 {
  margin: 0;
  font-size: clamp(60px, 6.5vw, 105px);
  line-height: 1.045;
  letter-spacing: -.078em;
  font-weight: 780;
}
h1 em {
  color: #f4a16c;
  font-style: normal;
  background: linear-gradient(112deg, #fff0d9 0%, #ffd7ad 18%, #f9a46a 57%, #c8613c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.beam {
  position: relative;
  width: min(360px, 85%);
  height: 2px;
  margin: clamp(34px, 5vh, 55px) 0 31px;
  background: linear-gradient(90deg, rgba(247, 106, 36, 0), rgba(248, 111, 42, .5) 20%, #ffe2b2 57%, #ed5f21 80%, transparent 100%);
}
.beam::before {
  content: "";
  position: absolute;
  inset: -12px -25px;
  background: radial-gradient(ellipse at 56% 50%, rgba(255, 117, 33, .3), rgba(235, 79, 27, .09) 36%, transparent 75%);
  filter: blur(12px);
  animation: beam-breathe 8s ease-in-out infinite;
}
.beam__core {
  position: absolute;
  width: 62%;
  height: 1px;
  left: 22%;
  top: 0;
  background: linear-gradient(90deg, transparent, #fff5de, transparent);
  opacity: .9;
}
.hero__description {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.38vw, 20px);
  line-height: 1.75;
  letter-spacing: -.015em;
}
.eclipse-scene {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  min-height: min(63vw, 650px);
  padding: 12% 10%;
  pointer-events: none;
}
.eclipse {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.eclipse > div { position: absolute; border-radius: 50%; pointer-events: none; }
/* Amplias capas difuminadas de gases solares, con brillo más intenso a la izquierda. */
.eclipse__ambient {
  z-index: 0;
  inset: -58%;
  background: radial-gradient(circle at 48% 51%,
    transparent 21%,
    rgba(255, 118, 37, .085) 27%,
    rgba(224, 70, 21, .26) 33%,
    rgba(166, 42, 18, .3) 41%,
    rgba(100, 25, 21, .23) 49%,
    rgba(65, 22, 21, .11) 60%,
    transparent 76%);
  filter: blur(35px);
  opacity: .95;
  animation: corona-breathe 9s ease-in-out infinite;
}
.eclipse__left-fire {
  z-index: 1;
  inset: -29%;
  background: radial-gradient(ellipse 44% 53% at 34% 52%,
    rgba(255, 128, 43, .59) 0,
    rgba(247, 77, 20, .53) 22%,
    rgba(201, 50, 18, .26) 54%,
    transparent 88%);
  filter: blur(48px);
  opacity: .95;
  animation: fire-breathe 10s ease-in-out infinite;
}
.eclipse__corona {
  z-index: 2;
  inset: -26%;
  background: conic-gradient(from -32deg,
    rgba(248, 90, 27, .19) 0deg,
    rgba(251, 97, 20, .29) 55deg,
    rgba(218, 50, 19, .21) 105deg,
    rgba(222, 52, 16, .35) 178deg,
    rgba(247, 94, 24, .48) 234deg,
    rgba(255, 136, 38, .72) 267deg,
    rgba(255, 115, 29, .48) 305deg,
    rgba(248, 90, 27, .19) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 35%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.2) 59%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 30%, #000 35%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.2) 59%, transparent 76%);
  filter: blur(27px);
  animation: corona-breathe 11s ease-in-out infinite reverse;
}
/* Rayos muy finos y suavizados: nunca forman una estrella ni un destello geométrico. */
.eclipse__rays {
  z-index: 3;
  inset: -26%;
  background: repeating-conic-gradient(from 8deg,
    rgba(255, 155, 62, .29) 0deg .15deg,
    rgba(238, 87, 28, .045) .3deg .65deg,
    transparent .85deg 2.05deg);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 34%, rgba(0,0,0,.4) 48%, transparent 62%);
  mask-image: radial-gradient(circle, transparent 30%, black 34%, rgba(0,0,0,.4) 48%, transparent 62%);
  filter: blur(4px);
  opacity: .56;
  animation: corona-breathe 12s ease-in-out infinite;
}
.eclipse__haze {
  z-index: 4;
  inset: -7%;
  background: conic-gradient(from 0deg,
    rgba(255, 154, 75, .46) 0deg,
    rgba(255, 123, 40, .35) 83deg,
    rgba(255, 92, 23, .28) 131deg,
    rgba(255, 122, 35, .7) 203deg,
    rgba(255, 160, 66, .9) 268deg,
    rgba(255, 190, 116, .74) 326deg,
    rgba(255, 154, 75, .46) 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent 78%, black 87%, transparent 100%);
  mask-image: radial-gradient(farthest-side, transparent 78%, black 87%, transparent 100%);
  filter: blur(20px);
}
/* Círculo de luz nítido, con halo difuminado detrás; diferente a una sombra dura. */
.eclipse__rim-blur {
  z-index: 5;
  inset: -.75%;
  background: conic-gradient(from 0deg,
    #ffe3ba 0deg, #ffa55c 50deg, #fa8747 109deg, #ffb66b 166deg,
    #fffaf0 198deg, #fff 269deg, #fff8e9 323deg, #ffe3ba 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent 96.5%, #000 99%);
  mask-image: radial-gradient(farthest-side, transparent 96.5%, #000 99%);
  filter: blur(9px);
  opacity: .95;
}
.eclipse__ring {
  z-index: 6;
  inset: 0;
  background: conic-gradient(from 0deg,
    #ffe0b9 0deg,
    #ffc084 49deg,
    #ff8b47 95deg,
    #ffad62 145deg,
    #fffaf1 202deg,
    #fff 265deg,
    #fffaf3 312deg,
    #ffe0b9 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 5.6px), #000 calc(100% - 4.4px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 5.6px), #000 calc(100% - 4.4px));
  filter: drop-shadow(0 0 3px rgba(255, 227, 196, .75));
}
.eclipse__disk {
  z-index: 7;
  inset: 1.05%;
  background: radial-gradient(circle at 11% 53%, #2b1309 0%, #1b0e0a 29%, #100a09 61%, #090808 95%);
  box-shadow: inset 9px 0 28px rgba(86, 26, 10, .12);
}
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 112px, 1350px);
  margin: auto auto 0;
  padding: 23px 0 28px;
  border-top: 1px solid var(--border);
}
.footer__copyright { color: #947d77; font-size: 12px; letter-spacing: .025em; }

@keyframes corona-breathe { 0%,100% { opacity: .82; transform: scale(.995); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes fire-breathe { 0%,100% { opacity: .72; transform: translateX(0) scale(.99); } 50% { opacity: .97; transform: translateX(-1.5%) scale(1.04); } }
@keyframes beam-breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes signal { 0%,100% { opacity: .68; } 50% { opacity: 1; } }
@media (min-width: 1500px) { .eclipse { width: min(100%, 540px); } }
@media (max-width: 1020px) {
  .topbar, .hero, .footer { width: calc(100% - 68px); }
  .hero { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  h1 { font-size: clamp(54px, 7.4vw, 83px); }
  .eclipse-scene { padding: 15% 7%; min-height: 480px; }
}
@media (max-width: 700px) {
  .topbar, .hero, .footer { width: calc(100% - 42px); }
  .topbar { padding-top: 22px; }
  .brand { font-size: 27px; }
  .status { padding: 8px 10px; font-size: 9px; gap: 7px; }
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 18px 0 45px;
  }
  .eclipse-scene {
    grid-row: 1;
    min-height: 0;
    padding: 5% 9% 3%;
    aspect-ratio: 1.07;
  }
  .eclipse { width: min(75vw, 335px); }
  .hero__copy { grid-row: 2; text-align: center; padding-bottom: 0; }
  .eyebrow { justify-content: center; font-size: 10px; margin-bottom: 21px; }
  h1 { font-size: clamp(46px, 10.8vw, 75px); line-height: 1.02; }
  .beam { width: min(270px, 70%); margin: 29px auto 24px; }
  .hero__description { font-size: 15px; line-height: 1.65; }
  .desktop-break { display: none; }
  .footer { padding: 19px 0 21px; }
}
@media (max-width: 375px) {
  .topbar,.hero,.footer { width: calc(100% - 32px); }
  .brand { font-size: 23px; }
  .status { font-size: 8px; padding: 7px 8px; letter-spacing: .04em; }
  .eclipse { width: 77vw; }
  .eyebrow { margin-bottom: 16px; }
  h1 { font-size: clamp(41px, 11.4vw, 50px); }
}
@media (max-height: 660px) and (min-width: 701px) {
  .hero { padding-top: 10px; padding-bottom: 10px; }
  .eclipse-scene { min-height: 440px; padding: 12% 16%; }
  .eyebrow { margin-bottom: 17px; }
  .beam { margin-top: 25px; margin-bottom: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}