/*
 * =========================================================
 * ALEGSA — CELESTIAL ARCHIVE
 * Estética experimental exclusiva de xx.alegsa.com.ar
 * =========================================================
 *
 * Toda regla está aislada bajo:
 *
 * html[data-site-variant="mystic"]
 *
 * Por lo tanto, esta hoja no modifica el sitio de producción
 * aunque se cargara accidentalmente en otro host.
 * =========================================================
 */


/* =========================================================
   1. Sistema visual
   ========================================================= */

html[data-site-variant="mystic"] {
  color-scheme: light;

  --bg: #eee7db;
  --bg-soft: #fffaf0;
  --card: rgba(255, 250, 240, .88);
  --text: #21172f;
  --muted: #71657d;
  --line: rgba(73, 49, 95, .16);

  --primary: #65449a;
  --primary-2: #9b5db1;
  --accent: #bd8a35;
  --rose: #b54f75;
  --night: #0a0714;
  --danger: #c83f55;

  --mystic-gold: #d7ad53;
  --mystic-gold-light: #f4dc94;
  --mystic-violet: #7552aa;
  --mystic-plum: #392348;
  --mystic-night: #090611;

  --mystic-panel: rgba(255, 250, 240, .82);
  --mystic-panel-strong: #fffaf0;
  --mystic-glow: rgba(126, 82, 176, .18);

  --shadow:
    0 22px 65px rgba(39, 22, 55, .13),
    0 3px 12px rgba(39, 22, 55, .06);

  --radius: 26px;
  --radius-sm: 16px;
  --max: 1260px;

  --font:
    "Avenir Next",
    Avenir,
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --mystic-display:
    "Iowan Old Style",
    "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    Georgia,
    serif;
}

html[data-site-variant="mystic"][data-theme="dark"] {
  color-scheme: dark;

  --bg: #07050e;
  --bg-soft: #100c1d;
  --card: rgba(17, 12, 31, .84);
  --text: #f7f0df;
  --muted: #bcb1ca;
  --line: rgba(234, 203, 130, .18);

  --primary: #a989e7;
  --primary-2: #d188d7;
  --accent: #e8c56d;
  --rose: #ef7da6;
  --night: #05030b;
  --danger: #ff7182;

  --mystic-gold: #e5bf68;
  --mystic-gold-light: #ffe9a6;
  --mystic-violet: #a989e7;
  --mystic-plum: #6e3d79;
  --mystic-night: #05030b;

  --mystic-panel: rgba(17, 12, 31, .78);
  --mystic-panel-strong: #110c20;
  --mystic-glow: rgba(161, 119, 232, .22);

  --shadow:
    0 28px 85px rgba(0, 0, 0, .46),
    0 4px 18px rgba(0, 0, 0, .28);
}


/* =========================================================
   2. Fondo, tipografía y detalles globales
   ========================================================= */

html[data-site-variant="mystic"] {
  background: var(--bg);
}

html[data-site-variant="mystic"] body {
  font-family: var(--font);
  letter-spacing: .003em;
  color: var(--text);
  background:
    radial-gradient(
      circle at 12% -8%,
      color-mix(in srgb, var(--primary) 24%, transparent),
      transparent 31rem
    ),
    radial-gradient(
      circle at 92% 4%,
      color-mix(in srgb, var(--accent) 17%, transparent),
      transparent 29rem
    ),
    radial-gradient(
      circle at 55% 45%,
      color-mix(in srgb, var(--rose) 8%, transparent),
      transparent 42rem
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 96%, #170d2a),
      var(--bg)
    );
}

html[data-site-variant="mystic"] body::before {
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .92) 0 1px, transparent 1.5px),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--mystic-gold) 72%, transparent) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--primary) 65%, transparent) 0 1.2px,
      transparent 1.8px
    );
  background-size:
    89px 89px,
    157px 157px,
    251px 251px;
  background-position:
    13px 19px,
    65px 87px,
    140px 37px;
}

html[data-site-variant="mystic"] body::after {
  opacity: .22;
  background-image:
    linear-gradient(
      25deg,
      transparent 0 49.6%,
      color-mix(in srgb, var(--mystic-gold) 28%, transparent) 50%,
      transparent 50.4%
    ),
    linear-gradient(
      145deg,
      transparent 0 49.6%,
      color-mix(in srgb, var(--primary) 24%, transparent) 50%,
      transparent 50.4%
    ),
    radial-gradient(
      circle at 92% 13%,
      color-mix(in srgb, var(--mystic-gold-light) 85%, transparent) 0 1.8rem,
      transparent 1.86rem
    ),
    radial-gradient(
      circle at calc(92% + .8rem) 12.5%,
      var(--bg) 0 1.8rem,
      transparent 1.86rem
    );
  background-size:
    280px 210px,
    360px 270px,
    100% 100%,
    100% 100%;
  background-position:
    20px 50px,
    160px 110px,
    0 0,
    0 0;
}

html[data-site-variant="mystic"] ::selection {
  color: #160d1d;
  background: var(--mystic-gold-light);
}

html[data-site-variant="mystic"] h1,
html[data-site-variant="mystic"] h2,
html[data-site-variant="mystic"] h3,
html[data-site-variant="mystic"] h4 {
  font-family: var(--mystic-display);
  font-weight: 700;
  letter-spacing: -.035em;
}

html[data-site-variant="mystic"] h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.04;
}

html[data-site-variant="mystic"] h2 {
  font-size: clamp(1.45rem, 3.2vw, 2.25rem);
}

html[data-site-variant="mystic"] h3 {
  letter-spacing: -.02em;
}

html[data-site-variant="mystic"] a {
  text-decoration-color:
    color-mix(in srgb, var(--mystic-gold) 52%, transparent);
}

html[data-site-variant="mystic"] a:hover {
  color: var(--accent);
}

html[data-site-variant="mystic"] :focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--mystic-gold) 78%, white);
  outline-offset: 4px;
}


/* =========================================================
   3. Header
   ========================================================= */

html[data-site-variant="mystic"] .site-header {
  min-height: 70px;
  border-bottom:
    1px solid color-mix(in srgb, var(--mystic-gold) 26%, var(--line));
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--mystic-night) 91%, transparent),
      color-mix(in srgb, var(--mystic-plum) 82%, transparent),
      color-mix(in srgb, var(--mystic-night) 91%, transparent)
    );
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .24),
    inset 0 -1px rgba(255, 232, 166, .06);
  backdrop-filter: blur(22px) saturate(1.15);
}

html[data-site-variant="mystic"] .site-header__inner {
  min-height: 70px;
  padding-top: .72rem;
  padding-bottom: .72rem;
}

html[data-site-variant="mystic"] .brand {
  color: #fff8e6;
}

html[data-site-variant="mystic"] .brand:hover {
  color: var(--mystic-gold-light);
}

html[data-site-variant="mystic"] .brand__text {
  font-family: var(--mystic-display);
  font-size: clamp(1.2rem, 2.2vw, 1.62rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

html[data-site-variant="mystic"] .brand__mark {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold-light) 48%, transparent);
  background:
    radial-gradient(
      circle at 34% 28%,
      #fffbe6 0 9%,
      #f2d57e 10% 23%,
      #9c69bc 42%,
      #2a183e 67%,
      #08050e 100%
    );
  box-shadow:
    0 0 0 5px rgba(229, 191, 104, .07),
    0 0 28px rgba(229, 191, 104, .24),
    0 14px 30px rgba(0, 0, 0, .34);
  animation: alegsa-mystic-orb 6s ease-in-out infinite;
}

html[data-site-variant="mystic"] .top-links a {
  position: relative;
  color: rgba(255, 248, 230, .74);
  font-size: .9rem;
  letter-spacing: .01em;
}

html[data-site-variant="mystic"] .top-links a:hover {
  color: var(--mystic-gold-light);
}

html[data-site-variant="mystic"] .top-link-icon {
  color: var(--mystic-gold-light);
  border-color: rgba(240, 209, 128, .24);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .18),
      transparent 36%
    ),
    rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 14px rgba(225, 185, 102, .07);
}

html[data-site-variant="mystic"] .theme-toggle,
html[data-site-variant="mystic"] .menu-open {
  color: #fff8e6;
  border-color: rgba(239, 207, 127, .26);
  background: rgba(255, 255, 255, .065);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    0 10px 24px rgba(0, 0, 0, .2);
}

html[data-site-variant="mystic"] .theme-toggle:hover,
html[data-site-variant="mystic"] .menu-open:hover {
  color: var(--mystic-gold-light);
  border-color: rgba(239, 207, 127, .5);
  background: rgba(255, 255, 255, .11);
}


/* =========================================================
   4. Hero principal y constelación zodiacal
   ========================================================= */

html[data-site-variant="mystic"] .site-hero--zodiac-only {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: min(calc(100% - 2rem), var(--max));
  max-width: var(--max);
  min-height: 0;
  margin: 1.35rem auto 1.65rem;
  padding: clamp(1.35rem, 4vw, 3rem);

  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 35%, var(--line));
  border-radius: 34px;

  background:
    radial-gradient(
      circle at 50% -15%,
      color-mix(in srgb, var(--primary) 37%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 7% 100%,
      color-mix(in srgb, var(--rose) 19%, transparent),
      transparent 19rem
    ),
    radial-gradient(
      circle at 94% 92%,
      color-mix(in srgb, var(--mystic-gold) 16%, transparent),
      transparent 20rem
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--mystic-night) 96%, #31183c),
      color-mix(in srgb, #21102e 92%, var(--mystic-night))
    );

  box-shadow:
    0 32px 90px rgba(9, 5, 17, .34),
    inset 0 1px rgba(255, 238, 192, .11),
    inset 0 0 80px rgba(134, 86, 174, .08);
}

html[data-site-variant="mystic"] .site-hero--zodiac-only::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .47;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #e8c56d 0 1px, transparent 1.7px),
    linear-gradient(
      35deg,
      transparent 0 49.6%,
      rgba(232, 197, 109, .18) 50%,
      transparent 50.4%
    );
  background-size:
    53px 53px,
    97px 97px,
    240px 170px;
  background-position:
    8px 15px,
    42px 63px,
    22px 44px;
}

html[data-site-variant="mystic"] .site-hero--zodiac-only::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -125px;
  right: -105px;
  width: 330px;
  height: 330px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 30%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(229, 191, 104, .025),
    0 0 0 64px rgba(169, 137, 231, .02),
    inset 0 0 70px rgba(229, 191, 104, .05);
}

html[data-site-variant="mystic"] .mystic-home-intro {
  position: relative;
  z-index: 2;
  display: grid !important;
  justify-items: center;
  max-width: 850px;
  margin: 0 auto 1.35rem;
  text-align: center;
}

html[data-site-variant="mystic"] .mystic-home-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
  color: var(--mystic-gold-light);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

html[data-site-variant="mystic"] .mystic-home-intro h1 {
  max-width: 820px;
  margin: 0;
  color: #fff9ea;
  font-size: clamp(2.35rem, 6vw, 5.35rem);
  line-height: .98;
  text-wrap: balance;
  text-shadow:
    0 3px 25px rgba(0, 0, 0, .42),
    0 0 38px rgba(184, 131, 219, .14);
}

html[data-site-variant="mystic"] .mystic-home-intro__description {
  margin: 1rem 0 0;
  color: rgba(255, 248, 230, .7);
  font-size: clamp(.96rem, 2vw, 1.12rem);
  font-weight: 650;
  letter-spacing: .025em;
}

html[data-site-variant="mystic"] .mystic-home-intro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-top: 1.3rem;
}

html[data-site-variant="mystic"] .mystic-home-intro__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 44px;
  padding: .72rem 1rem;

  border: 1px solid rgba(242, 213, 139, .25);
  border-radius: 999px;

  color: #fff6df;
  background: rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .09),
    0 12px 30px rgba(0, 0, 0, .18);

  font-size: .9rem;
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(12px);
}

html[data-site-variant="mystic"] .mystic-home-intro__action:hover {
  color: #fffaf0;
  border-color: rgba(242, 213, 139, .52);
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

html[data-site-variant="mystic"] .mystic-home-intro__action--primary {
  color: #1b1020;
  border-color: rgba(255, 236, 177, .72);
  background:
    linear-gradient(
      135deg,
      var(--mystic-gold-light),
      var(--mystic-gold)
    );
  box-shadow:
    0 15px 34px rgba(218, 169, 75, .24),
    inset 0 1px rgba(255, 255, 255, .45);
}

html[data-site-variant="mystic"] .mystic-home-intro__action--primary:hover {
  color: #160d1d;
  background:
    linear-gradient(
      135deg,
      #fff0b2,
      #e5b957
    );
}

html[data-site-variant="mystic"] .zodiac-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .68rem;

  width: 100%;
  min-height: 0;
  margin: 0;
  padding: .65rem;

  overflow: visible;
  border:
    1px solid rgba(242, 213, 139, .13);
  border-radius: 26px;
  background: rgba(4, 2, 10, .28);
  backdrop-filter: blur(14px);
}

html[data-site-variant="mystic"] .zodiac-strip__item {
  min-width: 0;
  min-height: 108px;
  padding: .7rem .4rem;

  border: 1px solid transparent;
  border-radius: 20px;

  color: rgba(255, 248, 230, .72);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .045),
      rgba(255, 255, 255, .015)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

html[data-site-variant="mystic"] .zodiac-strip__item:hover {
  color: #fff9e8;
  border-color: rgba(232, 197, 109, .34);
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(169, 137, 231, .22),
      transparent 75%
    ),
    rgba(255, 255, 255, .07);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .25),
    inset 0 1px rgba(255, 255, 255, .1);
  transform: translateY(-4px);
}

html[data-site-variant="mystic"] .zodiac-strip__item picture,
html[data-site-variant="mystic"] .zodiac-strip__item > img,
html[data-site-variant="mystic"] .zodiac-strip__symbol {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 4px;
  overflow: hidden;
  border:
    1px solid rgba(239, 208, 128, .27);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 26%,
      rgba(255, 255, 255, .28),
      transparent 34%
    ),
    rgba(255, 255, 255, .055);
  box-shadow:
    0 0 0 5px rgba(232, 197, 109, .035),
    0 12px 25px rgba(0, 0, 0, .24);
}

html[data-site-variant="mystic"] .zodiac-strip__item picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-site-variant="mystic"] .zodiac-strip__item span:last-child {
  font-family: var(--mystic-display);
  font-size: .94rem;
  font-weight: 700;
}


/* =========================================================
   5. Estructura, tarjetas y jerarquía
   ========================================================= */

html[data-site-variant="mystic"] .layout-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1.45rem;
}

html[data-site-variant="mystic"] .panel,
html[data-site-variant="mystic"] .content-card,
html[data-site-variant="mystic"] .side-card,
html[data-site-variant="mystic"] .subscribe-card,
html[data-site-variant="mystic"] .article-list {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 20%, var(--line));
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--mystic-panel) 96%, white),
      color-mix(in srgb, var(--mystic-panel) 98%, transparent)
    );
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.05);
}

html[data-site-variant="mystic"][data-theme="dark"] .panel,
html[data-site-variant="mystic"][data-theme="dark"] .content-card,
html[data-site-variant="mystic"][data-theme="dark"] .side-card,
html[data-site-variant="mystic"][data-theme="dark"] .subscribe-card,
html[data-site-variant="mystic"][data-theme="dark"] .article-list {
  background:
    radial-gradient(
      circle at 10% 0,
      rgba(151, 100, 197, .08),
      transparent 16rem
    ),
    linear-gradient(
      155deg,
      rgba(22, 15, 39, .91),
      rgba(12, 8, 23, .88)
    );
}

html[data-site-variant="mystic"] .content-card,
html[data-site-variant="mystic"] .panel {
  padding: clamp(1.15rem, 2.7vw, 1.75rem);
  border-radius: 28px;
}

html[data-site-variant="mystic"] .content-card::after,
html[data-site-variant="mystic"] .panel::after,
html[data-site-variant="mystic"] .side-card::after,
html[data-site-variant="mystic"] .subscribe-card::after {
  width: 2.8rem;
  height: 2.8rem;
  opacity: .4;
  filter:
    drop-shadow(
      0 0 10px
      color-mix(in srgb, var(--mystic-gold) 30%, transparent)
    );
}

html[data-site-variant="mystic"] .content-card > h1:first-of-type {
  position: relative;
  padding-bottom: .8rem;
}

html[data-site-variant="mystic"] .content-card > h1:first-of-type::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin-top: .72rem;
  background:
    linear-gradient(
      90deg,
      var(--mystic-gold),
      color-mix(in srgb, var(--primary) 55%, transparent),
      transparent
    );
}

html[data-site-variant="mystic"] .lead {
  max-width: 780px;
  color: var(--muted);
  font-size: clamp(1.03rem, 2vw, 1.19rem);
  line-height: 1.78;
}

html[data-site-variant="mystic"] .home-featured {
  overflow: hidden;
  border-color:
    color-mix(in srgb, var(--mystic-gold) 28%, var(--line));
  background:
    radial-gradient(
      circle at 4% 0,
      color-mix(in srgb, var(--primary) 17%, transparent),
      transparent 18rem
    ),
    radial-gradient(
      circle at 96% 100%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 19rem
    ),
    var(--mystic-panel);
}

html[data-site-variant="mystic"] .article-card {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 16%, var(--line));
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--bg-soft) 92%, transparent),
      color-mix(in srgb, var(--card) 97%, transparent)
    );
}

html[data-site-variant="mystic"] .article-card:hover {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 47%, var(--line));
  box-shadow:
    0 24px 55px rgba(34, 17, 48, .18),
    0 0 0 1px
      color-mix(in srgb, var(--mystic-gold) 10%, transparent);
}

html[data-site-variant="mystic"] .article-card__img {
  position: relative;
  overflow: hidden;
}

html[data-site-variant="mystic"] .article-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(8, 4, 14, .18)
    );
}

html[data-site-variant="mystic"] .article-card__img img {
  transition:
    transform .4s ease,
    filter .4s ease;
}

html[data-site-variant="mystic"] .article-card:hover .article-card__img img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.025);
}

html[data-site-variant="mystic"] .article-card h3 {
  font-family: var(--mystic-display);
  line-height: 1.18;
}

html[data-site-variant="mystic"] .article-card p {
  line-height: 1.6;
}

html[data-site-variant="mystic"] .home-featured
.article-card:first-child .article-card__body::before {
  content: "✦ Featured in the stars";
  display: inline-flex;
  width: fit-content;
  margin-bottom: .65rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-site-variant="mystic"] .home-featured
.article-card:first-child h3 {
  font-size: clamp(1.5rem, 3.6vw, 2.45rem);
}

html[data-site-variant="mystic"] .home-section {
  border-top:
    3px solid color-mix(in srgb, var(--mystic-gold) 72%, var(--primary));
}

html[data-site-variant="mystic"] .home-section__head {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

html[data-site-variant="mystic"] .home-section__head img {
  border-radius: 50%;
  border-color:
    color-mix(in srgb, var(--mystic-gold) 35%, var(--line));
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .28),
      transparent 34%
    ),
    color-mix(in srgb, var(--primary) 10%, var(--bg-soft));
  box-shadow:
    0 0 0 5px
      color-mix(in srgb, var(--mystic-gold) 6%, transparent);
}


/* =========================================================
   6. Artículos y horóscopos diarios
   ========================================================= */

html[data-site-variant="mystic"] .breadcrumbs {
  font-size: .82rem;
  letter-spacing: .035em;
}

html[data-site-variant="mystic"] .breadcrumbs li + li::before {
  content: "✦";
  color: var(--accent);
  font-size: .62rem;
}

html[data-site-variant="mystic"] .meta-row {
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    color-mix(in srgb, var(--bg-soft) 70%, transparent);
}

html[data-site-variant="mystic"] .hero-image,
html[data-site-variant="mystic"] .chinese-hero-visual,
html[data-site-variant="mystic"] .tag-hero__media,
html[data-site-variant="mystic"] .love-tool-hero__image {
  padding: 7px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 42%, var(--line));
  border-radius: 30px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mystic-gold) 26%, var(--bg-soft)),
      color-mix(in srgb, var(--primary) 14%, var(--bg-soft))
    );
  box-shadow:
    0 24px 65px rgba(24, 12, 37, .22),
    0 0 0 1px
      color-mix(in srgb, var(--mystic-gold) 10%, transparent);
}

html[data-site-variant="mystic"] .hero-image {
  border-radius: 30px;
}

html[data-site-variant="mystic"] .rich-text {
  font-size: clamp(1rem, 1.5vw, 1.075rem);
  line-height: 1.84;
}

html[data-site-variant="mystic"] .rich-text h2,
html[data-site-variant="mystic"] .article-body h2 {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text);
}

html[data-site-variant="mystic"] .rich-text h2::before,
html[data-site-variant="mystic"] .article-body h2::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: .16em;
  color: var(--accent);
  font-family: var(--font);
  font-size: .72em;
}

html[data-site-variant="mystic"] .rich-text blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--mystic-gold);
  border-radius: 0 18px 18px 0;
  color: var(--muted);
  background:
    color-mix(in srgb, var(--primary) 8%, var(--bg-soft));
}

html[data-site-variant="mystic"] .toc-box,
html[data-site-variant="mystic"] .horoscope-quick-nav,
html[data-site-variant="mystic"] .chinese-day-nav {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 27%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--primary) 13%, transparent),
      transparent 13rem
    ),
    color-mix(in srgb, var(--bg-soft) 77%, transparent);
}

html[data-site-variant="mystic"] .toc-box h2,
html[data-site-variant="mystic"] .horoscope-quick-nav__title,
html[data-site-variant="mystic"] .chinese-day-nav__title {
  font-family: var(--mystic-display);
}

html[data-site-variant="mystic"] .score-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-site-variant="mystic"] .score-card {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 22%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--mystic-gold) 12%, transparent),
      transparent 10rem
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-soft) 91%, transparent),
      color-mix(in srgb, var(--card) 96%, transparent)
    );
  box-shadow:
    0 16px 36px rgba(30, 16, 42, .1);
}

html[data-site-variant="mystic"] .score-card__head strong {
  font-family: var(--mystic-display);
  font-size: 1.12rem;
}

html[data-site-variant="mystic"] .score-card__text {
  color: var(--muted);
}

html[data-site-variant="mystic"] .star--filled {
  color: var(--mystic-gold);
  text-shadow: 0 0 12px rgba(229, 191, 104, .32);
}

html[data-site-variant="mystic"] .star--empty {
  color: color-mix(in srgb, var(--muted) 28%, transparent);
}


/* =========================================================
   7. Botones, chips y formularios
   ========================================================= */

html[data-site-variant="mystic"] .btn,
html[data-site-variant="mystic"] .newsletter-cta__button,
html[data-site-variant="mystic"] .chinese-sign-card__cta {
  min-height: 44px;
  letter-spacing: .015em;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

html[data-site-variant="mystic"] .btn--primary,
html[data-site-variant="mystic"] .newsletter-cta__button,
html[data-site-variant="mystic"] .chinese-sign-card__cta {
  color: #1b1020;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold-light) 76%, transparent);
  background:
    linear-gradient(
      135deg,
      var(--mystic-gold-light),
      var(--mystic-gold)
    );
  box-shadow:
    0 14px 30px rgba(199, 151, 60, .22),
    inset 0 1px rgba(255, 255, 255, .5);
}

html[data-site-variant="mystic"] .btn--primary:hover,
html[data-site-variant="mystic"] .btn--primary:focus-visible,
html[data-site-variant="mystic"] .newsletter-cta__button:hover,
html[data-site-variant="mystic"] .newsletter-cta__button:focus-visible {
  color: #160c1c;
  filter: brightness(1.045) saturate(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(199, 151, 60, .29),
    inset 0 1px rgba(255, 255, 255, .58);
}

html[data-site-variant="mystic"] .btn--ghost {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 24%, var(--line));
  background:
    color-mix(in srgb, var(--bg-soft) 74%, transparent);
}

html[data-site-variant="mystic"] .btn--ghost:hover {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 52%, var(--line));
  background:
    color-mix(in srgb, var(--mystic-gold) 10%, var(--bg-soft));
}

html[data-site-variant="mystic"] .tag-cloud {
  gap: .55rem;
}

html[data-site-variant="mystic"] .tag-chip {
  min-height: 37px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 20%, var(--line));
  background:
    color-mix(in srgb, var(--primary) 8%, var(--bg-soft));
  font-size: .86rem;
  font-weight: 780;
}

html[data-site-variant="mystic"] .tag-chip:hover {
  color: var(--text);
  border-color:
    color-mix(in srgb, var(--mystic-gold) 47%, var(--line));
  background:
    color-mix(in srgb, var(--mystic-gold) 12%, var(--bg-soft));
  transform: translateY(-1px);
}

html[data-site-variant="mystic"] .tag-chip.is-active,
html[data-site-variant="mystic"] .tag-chip[aria-current="page"] {
  color: #1a1020;
  border-color: var(--mystic-gold-light);
  background:
    linear-gradient(
      135deg,
      var(--mystic-gold-light),
      var(--mystic-gold)
    );
  box-shadow:
    0 12px 25px rgba(203, 158, 68, .22);
}

html[data-site-variant="mystic"] .input {
  min-height: 48px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 18%, var(--line));
  border-radius: 16px;
  background:
    color-mix(in srgb, var(--bg-soft) 83%, transparent);
  box-shadow:
    inset 0 1px 3px rgba(16, 8, 24, .06);
}

html[data-site-variant="mystic"] .input:hover {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 35%, var(--line));
}

html[data-site-variant="mystic"] .input:focus {
  outline:
    3px solid color-mix(in srgb, var(--mystic-gold) 18%, transparent);
  border-color:
    color-mix(in srgb, var(--mystic-gold) 67%, var(--line));
}

html[data-site-variant="mystic"] .input::placeholder {
  color:
    color-mix(in srgb, var(--muted) 76%, transparent);
}

html[data-site-variant="mystic"] select.input option {
  color: var(--text);
  background: var(--bg-soft);
}


/* =========================================================
   8. Sidebar
   ========================================================= */

html[data-site-variant="mystic"] .layout-sidebar {
  position: relative;
}

html[data-site-variant="mystic"] .side-card,
html[data-site-variant="mystic"] .subscribe-card {
  padding: 1.05rem;
  border-radius: 22px;
}

html[data-site-variant="mystic"] .side-title {
  font-family: var(--mystic-display);
  font-size: 1.16rem;
}

html[data-site-variant="mystic"] .author-box .side-title::before,
html[data-site-variant="mystic"] #suscription_snip .side-title::before,
html[data-site-variant="mystic"] .side-fixed-card .side-title::before,
html[data-site-variant="mystic"] .side-related-card .side-title::before,
html[data-site-variant="mystic"] .side-tags-card .side-title::before {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 28%, var(--line));
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .28),
      transparent 34%
    ),
    color-mix(in srgb, var(--mystic-gold) 12%, var(--bg-soft));
}

html[data-site-variant="mystic"] .mini-card {
  border-radius: 16px;
  transition:
    background .18s ease,
    transform .18s ease;
}

html[data-site-variant="mystic"] .mini-card:hover {
  color: var(--text);
  background:
    color-mix(in srgb, var(--mystic-gold) 8%, transparent);
  transform: translateX(3px);
}

html[data-site-variant="mystic"] .mini-card img,
html[data-site-variant="mystic"] .mini-card__emoji {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 22%, var(--line));
  box-shadow:
    0 10px 24px rgba(26, 13, 38, .12);
}

html[data-site-variant="mystic"] hr.soft-sep {
  opacity: .55;
  border-top-color:
    color-mix(in srgb, var(--mystic-gold) 26%, var(--line));
}


/* =========================================================
   9. Patricia AI
   ========================================================= */

html[data-site-variant="mystic"] .assistant-card {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 38%, var(--line));
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 12% 5%,
      color-mix(in srgb, var(--primary) 27%, transparent),
      transparent 18rem
    ),
    radial-gradient(
      circle at 92% 5%,
      color-mix(in srgb, var(--mystic-gold) 18%, transparent),
      transparent 16rem
    ),
    radial-gradient(
      circle at 85% 100%,
      color-mix(in srgb, var(--rose) 14%, transparent),
      transparent 17rem
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--card) 96%, transparent),
      color-mix(in srgb, var(--bg-soft) 84%, transparent)
    );
  box-shadow:
    0 30px 80px rgba(61, 35, 88, .2),
    inset 0 1px rgba(255, 238, 192, .1);
}

html[data-site-variant="mystic"] .assistant-card::before {
  opacity: .32;
  background-size:
    39px 39px,
    71px 71px;
}

html[data-site-variant="mystic"] .assistant-orb {
  width: 66px;
  height: 66px;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold-light) 56%, transparent);
  background:
    radial-gradient(
      circle at 34% 28%,
      #fffbe7 0 8%,
      #f0d275 18%,
      #a969c2 49%,
      #51316f 68%,
      #110a1d 100%
    );
  box-shadow:
    0 0 0 8px
      color-mix(in srgb, var(--mystic-gold) 7%, transparent),
    0 0 36px rgba(183, 121, 212, .25),
    0 18px 40px rgba(24, 10, 38, .28);
  animation: alegsa-mystic-orb 5.5s ease-in-out infinite;
}

html[data-site-variant="mystic"] .assistant-card__titleline h2 {
  color: var(--text);
  font-size: clamp(1.65rem, 3.8vw, 2.5rem);
}

html[data-site-variant="mystic"] .assistant-title-icons {
  color: var(--mystic-gold);
}

html[data-site-variant="mystic"] .assistant-answer,
html[data-site-variant="mystic"] .assistant-faq__item {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 22%, var(--line));
  background:
    color-mix(in srgb, var(--bg-soft) 78%, transparent);
}


/* =========================================================
   10. Newsletter, modal y compartir
   ========================================================= */

html[data-site-variant="mystic"] .newsletter-cta {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 36%, var(--line));
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 5% 0,
      color-mix(in srgb, var(--primary) 20%, transparent),
      transparent 14rem
    ),
    radial-gradient(
      circle at 96% 100%,
      color-mix(in srgb, var(--mystic-gold) 18%, transparent),
      transparent 13rem
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--card) 97%, transparent),
      color-mix(in srgb, var(--bg-soft) 87%, transparent)
    );
}

html[data-site-variant="mystic"] .newsletter-cta__icon,
html[data-site-variant="mystic"] .subscribe-modal__orb {
  color: #1b1020;
  background:
    radial-gradient(
      circle at 35% 25%,
      #fff8d6,
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--mystic-gold-light),
      var(--mystic-gold)
    );
  box-shadow:
    0 15px 32px rgba(202, 154, 64, .25);
}

html[data-site-variant="mystic"] .subscribe-modal__dialog {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 42%, var(--line));
  background:
    radial-gradient(
      circle at 8% 0,
      color-mix(in srgb, var(--primary) 22%, transparent),
      transparent 17rem
    ),
    radial-gradient(
      circle at 95% 5%,
      color-mix(in srgb, var(--mystic-gold) 18%, transparent),
      transparent 14rem
    ),
    var(--bg-soft);
}

html[data-site-variant="mystic"] .share-widget {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 25%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--primary) 13%, transparent),
      transparent 12rem
    ),
    color-mix(in srgb, var(--card) 91%, transparent);
}


/* =========================================================
   11. Compatibilidad amorosa
   ========================================================= */

html[data-site-variant="mystic"] .love-tool-page {
  border-color:
    color-mix(in srgb, var(--rose) 42%, var(--mystic-gold));
  background:
    radial-gradient(
      circle at 7% 0,
      color-mix(in srgb, var(--rose) 23%, transparent),
      transparent 17rem
    ),
    radial-gradient(
      circle at 94% 5%,
      color-mix(in srgb, var(--primary) 22%, transparent),
      transparent 18rem
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--card) 96%, transparent),
      color-mix(in srgb, var(--bg-soft) 86%, transparent)
    );
}

html[data-site-variant="mystic"] .love-tool-hero__kicker,
html[data-site-variant="mystic"] .love-result-card__eyebrow {
  color: var(--rose);
  border-color:
    color-mix(in srgb, var(--rose) 34%, var(--line));
  background:
    color-mix(in srgb, var(--rose) 11%, var(--bg-soft));
}

html[data-site-variant="mystic"] .love-form-card {
  border:
    1px solid color-mix(in srgb, var(--rose) 30%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--rose) 9%, transparent),
      transparent 12rem
    ),
    color-mix(in srgb, var(--bg-soft) 78%, transparent);
}

html[data-site-variant="mystic"] .love-result-card {
  border:
    1px solid color-mix(in srgb, var(--rose) 40%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--rose) 18%, transparent),
      transparent 15rem
    ),
    radial-gradient(
      circle at 100% 100%,
      color-mix(in srgb, var(--mystic-gold) 13%, transparent),
      transparent 14rem
    ),
    color-mix(in srgb, var(--card) 94%, transparent);
}

html[data-site-variant="mystic"] .love-result-card__score {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 34%, var(--line));
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, .045),
    0 15px 35px rgba(48, 19, 49, .15);
}

html[data-site-variant="mystic"] .love-result-card__score strong {
  font-family: var(--mystic-display);
}

html[data-site-variant="mystic"] .love-result-article {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 20%, var(--line));
  background:
    color-mix(in srgb, var(--bg-soft) 78%, transparent);
}


/* =========================================================
   12. Horóscopo chino
   ========================================================= */

html[data-site-variant="mystic"] .chinese-sign-card {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 30%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--mystic-gold) 18%, transparent),
      transparent 15rem
    ),
    radial-gradient(
      circle at 100% 100%,
      color-mix(in srgb, var(--primary) 15%, transparent),
      transparent 16rem
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--card) 96%, transparent),
      color-mix(in srgb, var(--bg-soft) 85%, transparent)
    );
}

html[data-site-variant="mystic"] .chinese-sign-card:hover {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 62%, var(--line));
  box-shadow:
    0 27px 60px rgba(37, 18, 50, .19),
    0 0 0 1px
      color-mix(in srgb, var(--mystic-gold) 10%, transparent);
}

html[data-site-variant="mystic"] .chinese-sign-card__visual {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 38%, var(--line));
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .3),
      transparent 34%
    ),
    color-mix(in srgb, var(--mystic-gold) 13%, var(--bg-soft));
  box-shadow:
    0 18px 40px rgba(34, 17, 46, .16);
}

html[data-site-variant="mystic"] .chinese-sign-card__name {
  font-family: var(--mystic-display);
}

html[data-site-variant="mystic"] .chinese-year-pill {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 21%, var(--line));
  background:
    color-mix(in srgb, var(--mystic-gold) 8%, var(--bg-soft));
}

html[data-site-variant="mystic"] .chinese-birth-reminder,
html[data-site-variant="mystic"] .chinese-birth-result {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 38%, var(--line));
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--mystic-gold) 15%, transparent),
      transparent 13rem
    ),
    color-mix(in srgb, var(--bg-soft) 79%, transparent);
}

html[data-site-variant="mystic"] .chinese-birth-modal__dialog {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 45%, var(--line));
}


/* =========================================================
   13. Tags y CTAs
   ========================================================= */

html[data-site-variant="mystic"] .tag-hero {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 37%, var(--line));
  background:
    radial-gradient(
      circle at 7% 0,
      color-mix(in srgb, var(--primary) 21%, transparent),
      transparent 18rem
    ),
    radial-gradient(
      circle at 95% 7%,
      color-mix(in srgb, var(--mystic-gold) 17%, transparent),
      transparent 17rem
    ),
    radial-gradient(
      circle at 75% 100%,
      color-mix(in srgb, var(--rose) 12%, transparent),
      transparent 16rem
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--card) 96%, transparent),
      color-mix(in srgb, var(--bg-soft) 85%, transparent)
    );
}

html[data-site-variant="mystic"] .zodiac-today-cta,
html[data-site-variant="mystic"] .compat-tool-cta {
  border:
    1px solid color-mix(in srgb, var(--mystic-gold) 28%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--primary) 14%, transparent),
      transparent 13rem
    ),
    color-mix(in srgb, var(--bg-soft) 77%, transparent);
}

html[data-site-variant="mystic"] .compat-tool-cta {
  border-color:
    color-mix(in srgb, var(--rose) 36%, var(--line));
}


/* =========================================================
   14. Menú móvil
   ========================================================= */

html[data-site-variant="mystic"] .side-menu__panel {
  border-right:
    1px solid color-mix(in srgb, var(--mystic-gold) 30%, var(--line));
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb, var(--primary) 20%, transparent),
      transparent 17rem
    ),
    var(--bg-soft);
}

html[data-site-variant="mystic"] .side-menu__head {
  border-bottom-color:
    color-mix(in srgb, var(--mystic-gold) 25%, var(--line));
  background:
    color-mix(in srgb, var(--bg-soft) 91%, transparent);
  backdrop-filter: blur(18px);
}

html[data-site-variant="mystic"] .menu-icon {
  border-color:
    color-mix(in srgb, var(--mystic-gold) 25%, var(--line));
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, .26),
      transparent 34%
    ),
    color-mix(in srgb, var(--mystic-gold) 9%, var(--bg-soft));
}

html[data-site-variant="mystic"] .floating-menu {
  color: #1b1020;
  border:
    1px solid color-mix(in srgb, var(--mystic-gold-light) 72%, transparent);
  background:
    linear-gradient(
      135deg,
      var(--mystic-gold-light),
      var(--mystic-gold)
    );
  box-shadow:
    0 18px 45px rgba(26, 12, 37, .3);
}


/* =========================================================
   15. Publicidad y footer
   ========================================================= */

html[data-site-variant="mystic"] .ad-box--reserved {
  border:
    1px dashed color-mix(in srgb, var(--mystic-gold) 17%, var(--line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-soft) 42%, transparent),
      color-mix(in srgb, var(--bg-soft) 18%, transparent)
    );
}

html[data-site-variant="mystic"] .site-footer {
  border-top:
    1px solid color-mix(in srgb, var(--mystic-gold) 24%, var(--line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--mystic-night) 86%, transparent),
      var(--mystic-night)
    );
}

html[data-site-variant="mystic"] .site-footer__inner {
  color: rgba(255, 248, 230, .65);
}

html[data-site-variant="mystic"] .site-footer a {
  color: var(--mystic-gold-light);
}


/* =========================================================
   16. Animaciones
   ========================================================= */

@keyframes alegsa-mystic-orb {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-3px) rotate(2deg);
    filter: brightness(1.06);
  }
}


/* =========================================================
   17. Responsive
   ========================================================= */

@media (max-width: 1080px) {
  html[data-site-variant="mystic"] .top-links {
    gap: .55rem;
  }

  html[data-site-variant="mystic"] .top-links a {
    font-size: .82rem;
  }

  html[data-site-variant="mystic"] .layout-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

@media (max-width: 900px) {
  html[data-site-variant="mystic"] .layout-grid {
    grid-template-columns: 1fr;
  }

  html[data-site-variant="mystic"] .zodiac-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[data-site-variant="mystic"] .score-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  html[data-site-variant="mystic"] .site-hero--zodiac-only {
    width: calc(100% - 1.1rem);
    margin-top: .75rem;
    padding: 1.15rem .75rem;
    border-radius: 24px;
  }

  html[data-site-variant="mystic"] .mystic-home-intro {
    margin-bottom: 1rem;
  }

  html[data-site-variant="mystic"] .mystic-home-intro h1 {
    font-size: clamp(2.1rem, 12vw, 3.35rem);
  }

  html[data-site-variant="mystic"] .mystic-home-intro__description {
    line-height: 1.5;
  }

  html[data-site-variant="mystic"] .mystic-home-intro__actions {
    display: grid;
    width: 100%;
  }

  html[data-site-variant="mystic"] .mystic-home-intro__action {
    width: 100%;
  }

  html[data-site-variant="mystic"] .zodiac-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .5rem;
    border-radius: 20px;
  }

  html[data-site-variant="mystic"] .zodiac-strip__item {
    min-height: 100px;
    padding: .55rem .2rem;
    border-radius: 16px;
  }

  html[data-site-variant="mystic"] .zodiac-strip__item picture,
  html[data-site-variant="mystic"] .zodiac-strip__item > img,
  html[data-site-variant="mystic"] .zodiac-strip__symbol {
    width: 54px;
    height: 54px;
  }

  html[data-site-variant="mystic"] .zodiac-strip__item span:last-child {
    font-size: .84rem;
  }

  html[data-site-variant="mystic"] .content-card,
  html[data-site-variant="mystic"] .panel {
    border-radius: 20px;
  }

  html[data-site-variant="mystic"] .article-card {
    border-radius: 18px;
  }

  html[data-site-variant="mystic"] .hero-image,
  html[data-site-variant="mystic"] .chinese-hero-visual,
  html[data-site-variant="mystic"] .tag-hero__media,
  html[data-site-variant="mystic"] .love-tool-hero__image {
    padding: 5px;
    border-radius: 21px;
  }

  html[data-site-variant="mystic"] .assistant-card {
    border-radius: 22px;
  }

  html[data-site-variant="mystic"] .assistant-orb {
    width: 54px;
    height: 54px;
  }

  html[data-site-variant="mystic"] .newsletter-cta {
    border-radius: 20px;
  }

  html[data-site-variant="mystic"] .love-result-card {
    border-radius: 21px;
  }
}

@media (max-width: 380px) {
  html[data-site-variant="mystic"] .zodiac-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-variant="mystic"] .brand__mark,
  html[data-site-variant="mystic"] .assistant-orb {
    animation: none !important;
  }

  html[data-site-variant="mystic"] .article-card__img img,
  html[data-site-variant="mystic"] .zodiac-strip__item,
  html[data-site-variant="mystic"] .mystic-home-intro__action {
    transition: none !important;
  }
}

/* =========================================================
   Tipografías específicas por sistema de escritura
   ========================================================= */

/*
 * Japonés
 *
 * Cuerpo:
 *   preferimos una sans japonesa legible.
 *
 * Títulos:
 *   preferimos una Mincho, equivalente funcional
 *   a una serif editorial.
 */
html[data-site-variant="mystic"][lang="ja"] {
  --font:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    YuGothic,
    Meiryo,
    "Noto Sans CJK JP",
    "Noto Sans JP",
    system-ui,
    sans-serif;

  --mystic-display:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    YuMincho,
    "Noto Serif CJK JP",
    "Noto Serif JP",
    serif;
}


/*
 * Chino simplificado.
 *
 * html_lang_attr() devuelve zh-Hans, por eso utilizamos lang^="zh".
 */
html[data-site-variant="mystic"][lang^="zh"] {
  --font:
    "PingFang SC",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Source Han Sans SC",
    system-ui,
    sans-serif;

  --mystic-display:
    "Songti SC",
    STSong,
    SimSun,
    "Noto Serif CJK SC",
    "Source Han Serif SC",
    serif;
}


/*
 * Coreano
 */
html[data-site-variant="mystic"][lang="ko"] {
  --font:
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    "Noto Sans CJK KR",
    "Noto Sans KR",
    system-ui,
    sans-serif;

  --mystic-display:
    AppleMyungjo,
    Batang,
    "Noto Serif CJK KR",
    "Noto Serif KR",
    serif;
}


/*
 * Cirílico y griego.
 *
 * Segoe UI y Times New Roman suelen ofrecer una cobertura
 * más uniforme para estos alfabetos que algunas variantes
 * locales de Palatino.
 */
html[data-site-variant="mystic"][lang="ru"],
html[data-site-variant="mystic"][lang="bg"],
html[data-site-variant="mystic"][lang="uk"],
html[data-site-variant="mystic"][lang="el"] {
  --font:
    "Segoe UI",
    Arial,
    system-ui,
    sans-serif;

  --mystic-display:
    Georgia,
    "Times New Roman",
    serif;
}


/*
 * Los sistemas CJK necesitan un poco más de altura de línea
 * y no se benefician de un tracking negativo tan pronunciado.
 */
html[data-site-variant="mystic"][lang="ja"] body,
html[data-site-variant="mystic"][lang^="zh"] body,
html[data-site-variant="mystic"][lang="ko"] body {
  letter-spacing: 0;
}

html[data-site-variant="mystic"][lang="ja"] h1,
html[data-site-variant="mystic"][lang="ja"] h2,
html[data-site-variant="mystic"][lang="ja"] h3,
html[data-site-variant="mystic"][lang="ja"] h4,
html[data-site-variant="mystic"][lang^="zh"] h1,
html[data-site-variant="mystic"][lang^="zh"] h2,
html[data-site-variant="mystic"][lang^="zh"] h3,
html[data-site-variant="mystic"][lang^="zh"] h4,
html[data-site-variant="mystic"][lang="ko"] h1,
html[data-site-variant="mystic"][lang="ko"] h2,
html[data-site-variant="mystic"][lang="ko"] h3,
html[data-site-variant="mystic"][lang="ko"] h4 {
  line-height: 1.22;
  letter-spacing: -.012em;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[data-site-variant="mystic"][lang="ja"]
.mystic-home-intro h1,
html[data-site-variant="mystic"][lang^="zh"]
.mystic-home-intro h1,
html[data-site-variant="mystic"][lang="ko"]
.mystic-home-intro h1 {
  line-height: 1.15;
}