/*
  EIRA SEREN visual identity closure.
  Concept: Llum ancestral. This final layer harmonizes the existing theme.
*/

:root {
  --eira-final-night-deep: #030504;
  --eira-final-night-forest: #07130f;
  --eira-final-forest: #10251f;
  --eira-final-emerald: #2e5b4d;
  --eira-final-sage: #7fa36a;
  --eira-final-glow: #b7e36b;
  --eira-final-gold: #c7a96b;
  --eira-final-candle: #e6c26a;
  --eira-final-ivory: #f5f1e8;
  --eira-final-day-ivory: #efe4ce;
  --eira-final-day-sage: #d8e2c8;
  --eira-final-day-wood: #8a6a3f;
  --eira-final-smoke: #d7d3cc;
  --eira-container-final: min(92vw, 1800px);
  --eira-container-final-wide: min(94vw, 1880px);
  --eira-container-final-hero: min(96vw, 1920px);
  --eira-shadow-ritual: 0 28px 70px rgb(3 5 4 / 0.34);
  --eira-shadow-day: 0 28px 72px rgb(33 75 63 / 0.18);
}

[data-theme-mode="night"] {
  --color-bg-main: var(--eira-final-night-forest);
  --color-bg-secondary: var(--eira-final-forest);
  --color-forest: var(--eira-final-night-forest);
  --color-sage: var(--eira-final-sage);
  --color-gold: var(--eira-final-gold);
  --color-text: var(--eira-final-ivory);
  --color-muted: rgb(245 241 232 / 0.7);
  --color-card-bg: rgb(7 19 15 / 0.72);
}

[data-theme-mode="day"] {
  --color-bg-main: var(--eira-final-day-ivory);
  --color-bg-secondary: var(--eira-final-day-sage);
  --color-forest: #214b3f;
  --color-sage: var(--eira-final-sage);
  --color-gold: #b78d3f;
  --color-text: #172622;
  --color-muted: rgb(23 38 34 / 0.72);
  --color-card-bg: rgb(255 249 235 / 0.78);
}

.eira-container {
  width: var(--eira-container-final);
  max-width: 1800px;
}

body {
  background:
    radial-gradient(circle at 13% 0, rgb(183 227 107 / 0.08), transparent 28rem),
    radial-gradient(circle at 87% 6%, rgb(230 194 106 / 0.1), transparent 32rem),
    linear-gradient(180deg, var(--eira-final-night-forest), var(--eira-final-night-deep));
}

[data-theme-mode="day"] body {
  background:
    radial-gradient(circle at 16% 0, rgb(244 217 141 / 0.34), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgb(127 163 106 / 0.22), transparent 34rem),
    linear-gradient(180deg, #eadfc8 0%, #efe4ce 36%, #dbe4ce 74%, #cbd9bf 100%);
}

.eira-site-header {
  background:
    radial-gradient(circle at 10% 45%, rgb(183 227 107 / 0.08), transparent 16rem),
    linear-gradient(180deg, rgb(3 8 7 / 0.94), rgb(7 19 15 / 0.9));
  backdrop-filter: blur(18px);
  border-bottom-color: rgb(199 169 107 / 0.28);
}

[data-theme-mode="day"] .eira-site-header {
  background:
    radial-gradient(circle at 10% 45%, rgb(183 227 107 / 0.15), transparent 18rem),
    linear-gradient(180deg, rgb(25 57 48 / 0.92), rgb(48 84 70 / 0.84));
  color: var(--eira-final-ivory);
}

.eira-site-header__topbar {
  min-height: 2.15rem;
  border-bottom: 1px solid rgb(199 169 107 / 0.2);
}

.eira-site-header__inner {
  width: var(--eira-container-final-wide);
  max-width: 1880px;
  min-height: clamp(104px, 7vw, 138px);
}

.eira-site-header__brand {
  width: clamp(150px, 10.5vw, 210px);
  isolation: isolate;
}

.eira-site-header__brand::before {
  inset: -10% -18% -4%;
  opacity: 0.9;
  background:
    radial-gradient(circle, rgb(183 227 107 / 0.22), transparent 56%),
    radial-gradient(circle, rgb(199 169 107 / 0.18), transparent 70%);
}

.eira-site-header__logo img,
.eira-footer__logo img,
.eira-hero__logo img {
  mix-blend-mode: screen;
  filter:
    saturate(1.18)
    contrast(1.04)
    drop-shadow(0 0 18px rgb(183 227 107 / 0.28))
    drop-shadow(0 10px 18px rgb(3 5 4 / 0.34));
}

.eira-site-header__nav {
  justify-content: center;
  gap: clamp(1.25rem, 2.2vw, 3.5rem);
}

.eira-site-header__nav a,
.eira-site-header__actions a {
  color: rgb(245 241 232 / 0.9);
  text-shadow: 0 0 14px rgb(3 5 4 / 0.28);
}

.eira-site-header__nav a:hover,
.eira-site-header__nav a:focus-visible,
.eira-site-header__actions a:hover,
.eira-site-header__actions a:focus-visible {
  color: var(--eira-final-candle);
  text-shadow: 0 0 18px rgb(230 194 106 / 0.28);
}

.eira-hero {
  min-height: clamp(650px, 73vh, 880px);
  background: var(--eira-final-night-forest);
}

.eira-hero__grid {
  width: var(--eira-container-final-hero);
  max-width: 1920px;
  min-height: clamp(650px, 73vh, 880px);
  grid-template-columns: minmax(31rem, 0.4fr) minmax(0, 0.6fr);
  align-items: center;
}

.eira-hero__content {
  max-width: min(44vw, 790px);
  padding-left: clamp(1rem, 2vw, 2.4rem);
}

.eira-hero h1 {
  max-width: 10.8ch;
  font-size: clamp(4.4rem, 6.1vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.eira-hero__claim {
  max-width: min(44vw, 720px);
  letter-spacing: 0.18em;
}

.eira-hero::before {
  background:
    linear-gradient(90deg, rgb(3 8 7 / 0.9) 0%, rgb(7 19 15 / 0.74) 32%, rgb(16 37 31 / 0.2) 59%, rgb(3 5 4 / 0.38) 100%),
    radial-gradient(circle at 69% 17%, rgb(230 194 106 / 0.25), transparent 24rem),
    radial-gradient(ellipse at 24% 50%, rgb(7 19 15 / 0.66), transparent 38rem);
}

[data-theme-mode="day"] .eira-hero::before {
  background:
    linear-gradient(90deg, rgb(12 34 27 / 0.76) 0%, rgb(33 75 63 / 0.5) 34%, rgb(244 217 141 / 0.11) 58%, rgb(33 75 63 / 0.16) 100%),
    radial-gradient(circle at 71% 14%, rgb(244 217 141 / 0.56), transparent 26rem),
    radial-gradient(circle at 48% 35%, rgb(183 227 107 / 0.18), transparent 34rem),
    linear-gradient(180deg, transparent 62%, rgb(18 41 34 / 0.32));
}

[data-theme-mode="day"] .eira-hero__image img {
  filter: saturate(1.13) contrast(1.07) brightness(1.1) sepia(0.03);
}

[data-theme-mode="day"] .eira-hero h1 {
  color: #fff6e0;
  text-shadow: 0 4px 18px rgb(3 5 4 / 0.48), 0 0 32px rgb(244 217 141 / 0.18);
}

[data-theme-mode="day"] .eira-hero h1 span {
  color: #bfe67c;
}

[data-theme-mode="day"] .eira-hero__claim,
[data-theme-mode="day"] .eira-hero__story {
  color: rgb(255 246 224 / 0.9);
}

.eira-benefits {
  border-block: 1px solid rgb(199 169 107 / 0.24);
  background:
    radial-gradient(circle at 8% 50%, rgb(183 227 107 / 0.08), transparent 18rem),
    linear-gradient(180deg, #07110f, #050807);
}

[data-theme-mode="day"] .eira-benefits {
  background:
    radial-gradient(circle at 10% 10%, rgb(244 217 141 / 0.2), transparent 24rem),
    linear-gradient(180deg, #214b3f, #17372f);
}

.eira-benefits .eira-container {
  width: var(--eira-container-final-wide);
  max-width: 1880px;
}

.eira-benefits__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.eira-benefit {
  min-height: clamp(6.5rem, 7vw, 8.5rem);
  padding: clamp(1rem, 1.7vw, 1.8rem) clamp(1rem, 2vw, 2.4rem);
  border-color: rgb(199 169 107 / 0.22);
}

.eira-benefit__icon {
  border: 1px solid rgb(199 169 107 / 0.36);
  box-shadow: 0 0 26px rgb(183 227 107 / 0.14);
}

.eira-worlds,
.eira-products,
.eira-tarot,
.eira-events,
.eira-blog {
  background:
    radial-gradient(circle at 13% 4%, rgb(183 227 107 / 0.08), transparent 26rem),
    radial-gradient(circle at 88% 0, rgb(199 169 107 / 0.08), transparent 30rem),
    linear-gradient(180deg, #050807, #07130f 46%, #030504);
}

[data-theme-mode="day"] .eira-worlds,
[data-theme-mode="day"] .eira-products,
[data-theme-mode="day"] .eira-tarot,
[data-theme-mode="day"] .eira-events,
[data-theme-mode="day"] .eira-blog {
  background:
    radial-gradient(circle at 12% 5%, rgb(244 217 141 / 0.28), transparent 28rem),
    radial-gradient(circle at 86% 3%, rgb(127 163 106 / 0.18), transparent 32rem),
    linear-gradient(180deg, #efe4ce 0%, #e4ddcb 42%, #d8e2c8 100%);
}

.eira-worlds > .eira-container {
  width: var(--eira-container-final-wide);
  max-width: 1880px;
}

.eira-worlds__grid {
  gap: clamp(1rem, 1.45vw, 2rem);
}

.eira-world-card__link {
  min-height: clamp(23rem, 31vw, 34rem);
  border: 1px solid rgb(199 169 107 / 0.66);
  border-radius: 0;
  box-shadow: var(--eira-shadow-ritual);
}

.eira-world-card__media img {
  filter: saturate(1.08) contrast(1.05) brightness(0.88);
  transition: transform 700ms ease, filter 700ms ease;
}

.eira-world-card__media::before {
  background:
    radial-gradient(circle at 50% 16%, rgb(230 194 106 / 0.18), transparent 24%),
    linear-gradient(180deg, rgb(3 5 4 / 0.08), rgb(7 19 15 / 0.26) 42%, rgb(3 5 4 / 0.86));
}

.eira-world-card__link:hover .eira-world-card__media img {
  transform: scale(1.06);
  filter: saturate(1.15) contrast(1.07) brightness(0.98);
}

.eira-world-card__title {
  font-size: clamp(1.55rem, 2vw, 2.25rem);
}

.eira-newsletter--premium {
  padding-block: clamp(5rem, 8vw, 8rem);
}

.eira-newsletter__panel--centered {
  width: min(92vw, 1100px);
  max-width: 1100px;
}

[data-theme-mode="night"] .eira-newsletter__panel--centered {
  background:
    radial-gradient(circle at 50% 0, rgb(183 227 107 / 0.1), transparent 24rem),
    linear-gradient(180deg, rgb(7 19 15 / 0.86), rgb(3 5 4 / 0.9));
  color: var(--eira-final-ivory);
}

.eira-newsletter__panel--centered .eira-newsletter-form {
  align-items: stretch;
}

.eira-newsletter__panel--centered [data-eira-newsletter-guest-note] {
  grid-column: 1 / -1;
  max-width: 42rem;
  margin: 0;
  line-height: 1.55;
}

.eira-newsletter__panel--centered .eira-newsletter-segments,
.eira-newsletter__panel--centered .eira-newsletter-consent {
  min-width: 0;
}

.eira-newsletter__panel--centered .eira-newsletter-segments label,
.eira-newsletter__panel--centered .eira-newsletter-consent label {
  min-width: 0;
  line-height: 1.35;
}

.eira-newsletter__panel--centered .eira-newsletter-segments input,
.eira-newsletter__panel--centered .eira-newsletter-consent input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 1.15rem;
  padding: 0;
}

@media (max-width: 749px) {
  .eira-newsletter--premium {
    padding-block: clamp(3.5rem, 12vw, 5rem);
  }

  .eira-newsletter__panel--centered {
    width: min(100% - 0.75rem, 1100px);
    padding: clamp(1.15rem, 5vw, 1.55rem);
  }

  .eira-newsletter__panel--centered .eira-newsletter-form,
  .eira-newsletter__panel--centered .eira-newsletter-form__fields,
  .eira-newsletter__panel--centered .eira-newsletter-segments,
  .eira-newsletter__panel--centered .eira-newsletter-consent {
    gap: 0.78rem;
  }

  .eira-newsletter__panel--centered .eira-newsletter-form__fields {
    grid-template-columns: 1fr !important;
  }

  .eira-newsletter__panel--centered .eira-newsletter-segments {
    grid-template-columns: 1fr !important;
    padding: 1rem;
  }

  .eira-newsletter__panel--centered .eira-newsletter-segments label,
  .eira-newsletter__panel--centered .eira-newsletter-consent label {
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    font-size: 0.92rem;
  }

  .eira-newsletter__panel--centered .eira-newsletter__form .eira-button,
  .eira-newsletter__panel--centered .eira-newsletter-form .eira-button {
    width: 100%;
    min-width: 0;
  }
}

.eira-footer {
  background:
    radial-gradient(circle at 16% 16%, rgb(183 227 107 / 0.12), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgb(199 169 107 / 0.12), transparent 26rem),
    linear-gradient(180deg, #07130f, #030504);
}

.eira-footer .eira-container {
  width: var(--eira-container-final-wide);
  max-width: 1880px;
}

.eira-audio {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2147483000;
  max-width: min(100% - 2rem, 318px);
}

.eira-audio__inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.42rem 0.6rem;
  padding: 0.58rem;
  border-radius: 1.15rem;
}

.eira-audio__toggle {
  width: 42px;
  height: 42px;
}

.eira-audio__transport button {
  width: 28px;
  height: 28px;
}

.eira-audio__label {
  font-size: 0.88rem;
}

.eira-audio__status {
  font-size: 0.64rem;
}

.eira-audio__volume {
  grid-column: 2 / 4;
}

.eira-audio__track {
  display: none !important;
}

.eira-chatbot {
  --eira-chatbot-bottom: max(8.5rem, calc(env(safe-area-inset-bottom) + 8.5rem));
}

@media (min-width: 1600px) {
  .eira-worlds__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 989px) {
  .eira-site-header__inner {
    min-height: 104px;
  }

  .eira-hero {
    min-height: auto;
  }

  .eira-hero__grid {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .eira-hero__content {
    max-width: min(92vw, 720px);
    padding: 4rem 0 2rem;
    margin-inline: auto;
  }

  .eira-hero h1,
  .eira-hero__claim {
    max-width: none;
  }

  .eira-benefits__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 749px) {
  .eira-site-header__brand {
    width: clamp(126px, 38vw, 158px);
  }

  .eira-site-header__nav {
    background: rgb(3 8 7 / 0.96);
  }

  .eira-hero__content {
    padding-block: 3.5rem 1.65rem;
  }

  .eira-hero h1 {
    font-size: clamp(3.35rem, 17vw, 4.75rem);
  }

  .eira-world-card__link {
    min-height: 22rem;
  }

  .eira-audio {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    max-width: min(100% - 1.5rem, 300px);
  }

  .eira-audio__inner {
    width: 56px;
    min-height: 56px;
  }

  .eira-audio:focus-within .eira-audio__inner,
  .eira-audio:hover .eira-audio__inner,
  .eira-audio[data-eira-audio-state="playing"] .eira-audio__inner {
    width: min(calc(100vw - 1.5rem), 300px);
  }

  .eira-chatbot {
    --eira-chatbot-bottom: max(5.45rem, calc(env(safe-area-inset-bottom) + 5.45rem));
  }
}

.eira-benefits .eira-container {
  max-width: min(100% - 2rem, 1320px);
  width: 100%;
}

.eira-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  margin-inline: auto;
}

.eira-benefit {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: clamp(0.85rem, 1.4vw, 1.35rem);
  grid-template-columns: clamp(2.8rem, 3.4vw, 3.4rem) minmax(0, 1fr);
  min-height: clamp(7rem, 7.2vw, 8.25rem);
  width: 100%;
}

.eira-benefit__content {
  align-self: center;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.eira-benefit strong,
.eira-benefit span span {
  display: block;
}

.eira-world-card__symbol {
  display: none !important;
}

.eira-world-card__link {
  display: grid;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.eira-world-card__media {
  grid-area: 1 / 1;
  min-height: 100%;
}

.eira-world-card__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.eira-world-card__content {
  align-content: stretch;
  align-self: stretch;
  box-sizing: border-box;
  display: grid;
  gap: clamp(0.35rem, 0.75vw, 0.55rem);
  grid-area: 1 / 1;
  grid-template-rows: minmax(0, 47%) minmax(2.35em, auto) minmax(2.8em, auto) minmax(0, 1fr);
  justify-items: center;
  min-height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 2rem);
  position: relative;
  text-align: center;
  z-index: 2;
}

.eira-world-card__title {
  align-self: start;
  grid-row: 2;
  line-height: 1.05;
  margin: 0;
  max-width: 12ch;
  text-align: center;
}

.eira-world-card__text {
  align-self: start;
  color: var(--color-ivory);
  grid-row: 3;
  line-height: 1.35;
  margin: 0;
  max-width: 28ch;
  min-height: 2.7em;
  text-align: center;
}

.eira-world-card__title,
.eira-world-card__text {
  justify-self: center;
  text-wrap: balance;
}

.eira-world-card__title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.2em;
}

.eira-world-card__text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

[data-theme-mode="day"] .eira-world-card__text {
  color: #fff7e6;
}

.eira-world-card__cta {
  display: none !important;
}

.eira-story__mark {
  aspect-ratio: 4 / 3;
  background-image: url("TiendaPNG.png");
  background-position: center center;
  background-size: cover;
  min-height: 0;
  overflow: hidden;
}

.eira-story__image {
  display: block;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.eira-events > .eira-container > .eira-section__header > div > p {
  display: none;
}

@media (max-width: 1180px) {
  .eira-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 990px) and (max-width: 1279px) {
  .eira-worlds__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.55vw, 1.25rem);
  }

  .eira-world-card__link {
    min-height: clamp(272px, 30vw, 308px);
  }

  .eira-world-card__content {
    gap: 0.38rem;
    grid-template-rows: minmax(0, 1fr) minmax(2.3em, auto) minmax(2.85em, auto) minmax(0, 1fr);
    padding: 1.3rem 0.72rem;
  }

  .eira-world-card__title {
    font-size: clamp(1.15rem, 2.05vw, 1.42rem);
    line-height: 1.02;
    max-width: 11ch;
    min-height: 2.3em;
  }

  .eira-world-card__text {
    font-size: clamp(0.72rem, 1.05vw, 0.82rem);
    line-height: 1.22;
    max-width: 18ch;
    min-height: 2.85em;
  }
}

@media (max-width: 749px) {
  .eira-benefits .eira-container {
    max-width: min(100% - 1rem, 420px);
  }

  .eira-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .eira-benefit {
    gap: 1rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    min-height: 104px;
    padding-inline: 1rem;
  }

  .eira-benefit__content {
    justify-content: center;
  }

  .eira-world-card__link {
    min-height: clamp(18.5rem, 92vw, 23rem);
  }

  .eira-world-card__content {
    padding: clamp(1.35rem, 7vw, 2.4rem) 1rem;
  }

  .eira-world-card__title {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  .eira-world-card__text {
    color: var(--color-ivory);
    max-width: 24ch;
  }

  .eira-story__mark {
    aspect-ratio: 4 / 3;
    width: 100%;
  }
}