.ren-oracle {
  --ren-bg: #0c1018;
  --ren-panel: #111826;
  --ren-panel-2: #182234;
  --ren-ink: #f8f3e8;
  --ren-muted: #b9bdc7;
  --ren-accent: #e2ba69;
  --ren-accent-rgb: 226, 186, 105;
  --ren-deep: #070a10;
  --ren-line: rgba(255,255,255,.11);
  position: relative;
  isolation: isolate;
  width: min(100%, 1120px);
  margin: 1.4rem auto 2.4rem;
  color: var(--ren-ink);
  border: 1px solid rgba(var(--ren-accent-rgb), .28);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 9%, rgba(var(--ren-accent-rgb), .12), transparent 27rem),
    linear-gradient(145deg, var(--ren-bg), var(--ren-deep));
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
  font-family: Georgia, 'Times New Roman', serif;
}

.ren-oracle *, .ren-oracle *::before, .ren-oracle *::after { box-sizing: border-box; }
.ren-oracle button { font: inherit; }
.ren-oracle button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ren-oracle [hidden] { display: none !important; }

.ren-wicca {
  --ren-bg: #0c1712;
  --ren-panel: #12231a;
  --ren-panel-2: #193224;
  --ren-accent: #d5bd72;
  --ren-accent-rgb: 213, 189, 114;
  --ren-deep: #06100b;
}
.ren-piedras {
  --ren-bg: #10141a;
  --ren-panel: #151d24;
  --ren-panel-2: #1c2932;
  --ren-accent: #93d7d5;
  --ren-accent-rgb: 147, 215, 213;
  --ren-deep: #080c10;
}
.ren-simbolos {
  --ren-bg: #101113;
  --ren-panel: #191a1d;
  --ren-panel-2: #232328;
  --ren-accent: #d7b77c;
  --ren-accent-rgb: 215, 183, 124;
  --ren-deep: #08090a;
}

.ren-hero { position: relative; min-height: clamp(420px, 57vw, 630px); display: flex; align-items: flex-end; }
.ren-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ren-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,7,12,.93) 0%, rgba(4,7,12,.68) 37%, rgba(4,7,12,.16) 70%),
    linear-gradient(0deg, var(--ren-bg) 0%, transparent 52%);
}
.ren-hero-copy { position: relative; z-index: 1; width: min(650px, 72%); padding: clamp(2rem, 5.5vw, 4.6rem); text-shadow: 0 2px 18px rgba(0,0,0,.72); }
.ren-kicker, .ren-eyebrow {
  display: block; color: var(--ren-accent); font-family: Arial, Helvetica, sans-serif; font-size: .72rem;
  font-weight: 800; letter-spacing: .2em; line-height: 1.3; text-transform: uppercase;
}
.ren-hero h2 { margin: .65rem 0 .8rem; color: #fff; font-size: clamp(2.45rem, 6.1vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: .93; }
.ren-hero-copy > p { max-width: 37rem; margin: 0; color: rgba(255,255,255,.86); font-family: Arial, Helvetica, sans-serif; font-size: clamp(.98rem, 1.7vw, 1.15rem); line-height: 1.65; }
.ren-stats { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.ren-stats span { padding: .45rem .72rem; border: 1px solid rgba(var(--ren-accent-rgb), .4); border-radius: 99px; background: rgba(4,7,12,.58); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .05em; backdrop-filter: blur(7px); }

.ren-stage { padding: clamp(1.25rem, 4vw, 3.5rem); }
.ren-start, .ren-result { animation: ren-arrive .7s cubic-bezier(.2,.75,.2,1) both; }
@keyframes ren-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ren-step-head { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: start; max-width: 770px; margin: 0 auto 1.25rem; }
.ren-step-choice { margin-top: 2.7rem; }
.ren-step-no { display: grid; place-items: center; width: 3.1rem; aspect-ratio: 1; border: 1px solid rgba(var(--ren-accent-rgb), .48); border-radius: 50%; color: var(--ren-accent); font-family: Arial, Helvetica, sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .12em; box-shadow: inset 0 0 24px rgba(var(--ren-accent-rgb), .08); }
.ren-step-head h3, .ren-result-head h3 { margin: .28rem 0 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.ren-step-head p { margin: .55rem 0 0; color: var(--ren-muted); font-family: Arial, Helvetica, sans-serif; font-size: .95rem; line-height: 1.6; }

.ren-focuses { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 770px; margin: 0 auto; }
.ren-focus { display: flex; gap: .58rem; align-items: center; justify-content: center; min-height: 48px; padding: .7rem .8rem; border: 1px solid var(--ren-line); border-radius: 13px; background: rgba(255,255,255,.035); color: var(--ren-muted); cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: .85rem; font-weight: 750; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.ren-focus span { color: var(--ren-accent); font-size: 1.05rem; }
.ren-focus:hover { transform: translateY(-2px); border-color: rgba(var(--ren-accent-rgb), .45); color: #fff; }
.ren-focus.is-active { border-color: rgba(var(--ren-accent-rgb), .72); background: rgba(var(--ren-accent-rgb), .14); color: #fff; box-shadow: 0 0 0 1px rgba(var(--ren-accent-rgb), .14), inset 0 1px rgba(255,255,255,.07); }

.ren-progress { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 2rem; margin: .4rem 0 1rem; color: var(--ren-muted); font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .05em; }
.ren-progress-dots { display: flex; gap: .36rem; }
.ren-progress-dots i { width: .48rem; height: .48rem; border: 1px solid rgba(var(--ren-accent-rgb), .55); border-radius: 50%; background: transparent; }
.ren-progress-dots i.is-filled { background: var(--ren-accent); box-shadow: 0 0 12px rgba(var(--ren-accent-rgb), .7); }

.ren-choices { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(.42rem, 1.4vw, .85rem); max-width: 970px; margin: 0 auto; padding: 1.2rem .5rem 1.7rem; perspective: 900px; }
.ren-choice { position: relative; width: clamp(72px, 9vw, 104px); aspect-ratio: .64; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg)); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ren-choice::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(var(--ren-accent-rgb), .64); border-radius: inherit; background:
    radial-gradient(circle at 50% 42%, rgba(var(--ren-accent-rgb), .22), transparent 31%),
    repeating-radial-gradient(circle at 50% 43%, transparent 0 13px, rgba(var(--ren-accent-rgb), .16) 14px 15px),
    linear-gradient(145deg, var(--ren-panel-2), var(--ren-deep));
  box-shadow: 0 13px 24px rgba(0,0,0,.34), inset 0 0 0 5px var(--ren-deep), inset 0 0 0 6px rgba(var(--ren-accent-rgb), .28);
}
.ren-choice::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ren-accent); font-size: clamp(1.25rem, 2.8vw, 2rem); filter: drop-shadow(0 0 8px rgba(var(--ren-accent-rgb), .5)); }
.ren-choice:hover { --lift: -9px; z-index: 2; }
.ren-choice.is-chosen { --lift: -16px; transform: translateY(var(--lift)) rotateY(180deg) scale(1.03); pointer-events: none; }
.ren-choice.is-spent { opacity: .22; transform: translateY(14px) scale(.93); pointer-events: none; }

.ren-choices-wicca { gap: clamp(.7rem, 2vw, 1.25rem); }
.ren-wicca .ren-choice { width: clamp(84px, 11vw, 122px); border-radius: 50% 50% 11px 11px; }
.ren-wicca .ren-choice::before { background:
  linear-gradient(rgba(8,18,12,.34), rgba(8,18,12,.65)),
  url('wicca-hero.webp') center/auto 205% no-repeat; border-color: rgba(213,189,114,.6); }
.ren-wicca .ren-choice::after { content: '☽'; font-size: 2.1rem; }

.ren-choices-piedras { gap: clamp(.8rem, 2vw, 1.45rem); padding-block: 1.8rem 2.4rem; }
.ren-piedras .ren-choice { --stone: #b9e4df; width: clamp(68px, 9vw, 100px); aspect-ratio: 1.12; border-radius: 47% 53% 52% 48% / 58% 43% 57% 42%; filter: drop-shadow(0 14px 12px rgba(0,0,0,.35)); }
.ren-piedras .ren-choice::before { border: 1px solid rgba(255,255,255,.32); border-radius: inherit; background:
  radial-gradient(circle at 32% 22%, rgba(255,255,255,.85), transparent 8%),
  radial-gradient(circle at 42% 30%, rgba(255,255,255,.22), transparent 28%),
  repeating-linear-gradient(118deg, transparent 0 12px, rgba(255,255,255,.1) 13px 15px),
  var(--stone); box-shadow: inset -13px -17px 25px rgba(0,0,0,.38), inset 11px 9px 20px rgba(255,255,255,.18); }
.ren-piedras .ren-choice::after { content: ''; }
.ren-piedras .ren-choice:nth-child(1) { --stone:#d9e6df; }
.ren-piedras .ren-choice:nth-child(2) { --stone:#8c65a7; }
.ren-piedras .ren-choice:nth-child(3) { --stone:#d99eaa; }
.ren-piedras .ren-choice:nth-child(4) { --stone:#a96b25; }
.ren-piedras .ren-choice:nth-child(5) { --stone:#6ba882; }
.ren-piedras .ren-choice:nth-child(6) { --stone:#31558d; }
.ren-piedras .ren-choice:nth-child(7) { --stone:#181d26; }
.ren-piedras .ren-choice:hover { --lift: -12px; filter: drop-shadow(0 21px 16px rgba(0,0,0,.46)) brightness(1.08); }

.ren-choices-simbolos { display: grid; grid-template-columns: repeat(9, minmax(64px, 90px)); }
.ren-simbolos .ren-choice { width: 100%; aspect-ratio: .78; border-radius: 4px; }
.ren-simbolos .ren-choice::before { border-radius: 4px; background:
  linear-gradient(135deg, transparent 47%, rgba(var(--ren-accent-rgb),.15) 48% 52%, transparent 53%),
  linear-gradient(45deg, transparent 47%, rgba(var(--ren-accent-rgb),.1) 48% 52%, transparent 53%),
  linear-gradient(145deg,#24262b,#0d0f12); background-size: 100% 100%,100% 100%,100% 100%; }
.ren-simbolos .ren-choice::after { content: '◇'; }

.ren-result-head { max-width: 720px; margin: 0 auto 1.65rem; text-align: center; }
.ren-result-focus { margin: .7rem 0 0; color: var(--ren-muted); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; }
.ren-result-cards { display: grid; grid-template-columns: repeat(var(--result-cols, 1), minmax(0, 1fr)); gap: 1rem; max-width: 980px; margin: 0 auto; }
.ren-result-card { position: relative; min-width: 0; padding: clamp(1.15rem, 2.5vw, 1.8rem); border: 1px solid rgba(var(--ren-accent-rgb), .32); border-radius: 20px; overflow: hidden; background:
  linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%),
  linear-gradient(160deg, var(--ren-panel-2), var(--ren-deep));
  box-shadow: 0 18px 34px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
  animation: ren-card-in .62s cubic-bezier(.16,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * .12s);
}
@keyframes ren-card-in { from { opacity: 0; transform: translateY(20px) rotateX(9deg); } to { opacity: 1; transform: none; } }
.ren-card-position { display: block; margin-bottom: .8rem; color: var(--ren-accent); font-family: Arial, Helvetica, sans-serif; font-size: .67rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.ren-card-visual { display: grid; place-items: center; width: min(100%, 190px); aspect-ratio: .72; margin: 0 auto 1.15rem; border: 1px solid rgba(var(--ren-accent-rgb), .48); border-radius: 12px; background:
  radial-gradient(circle, rgba(var(--ren-accent-rgb), .19), transparent 34%),
  repeating-radial-gradient(circle, transparent 0 22px, rgba(var(--ren-accent-rgb), .12) 23px 24px),
  linear-gradient(155deg, var(--ren-panel), var(--ren-deep));
  box-shadow: inset 0 0 0 6px var(--ren-deep), inset 0 0 0 7px rgba(var(--ren-accent-rgb),.23);
}
.ren-card-glyph { color: var(--ren-accent); font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1; text-shadow: 0 0 24px rgba(var(--ren-accent-rgb), .35); }
.ren-card-group, .ren-card-key { display: block; color: var(--ren-accent); font-family: Arial, Helvetica, sans-serif; font-size: .67rem; font-weight: 800; letter-spacing: .15em; line-height: 1.35; text-transform: uppercase; }
.ren-result-card h4 { margin: .45rem 0 .25rem; color: #fff; font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 500; line-height: 1.05; }
.ren-card-key { margin-bottom: .9rem; color: rgba(255,255,255,.58); }
.ren-card-message, .ren-card-advice { margin: 0; color: #e2e3e7; font-family: Arial, Helvetica, sans-serif; font-size: .93rem; line-height: 1.62; }
.ren-card-advice { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--ren-line); color: var(--ren-muted); }
.ren-card-advice strong { color: var(--ren-accent); }

.ren-piedras .ren-card-visual { aspect-ratio: 1; border-radius: 50%; background:
  radial-gradient(circle at 35% 24%, rgba(255,255,255,.86), transparent 6%),
  radial-gradient(circle at 43% 37%, rgba(255,255,255,.22), transparent 27%),
  repeating-linear-gradient(118deg, transparent 0 16px, rgba(255,255,255,.09) 17px 19px),
  var(--card-color, #79aeb3); box-shadow: inset -28px -30px 40px rgba(0,0,0,.42), inset 20px 18px 30px rgba(255,255,255,.15), 0 14px 35px rgba(0,0,0,.34); }
.ren-piedras .ren-card-glyph { font-size: 2.3rem; color: rgba(255,255,255,.88); }
.ren-wicca .ren-card-visual { border-radius: 50% 50% 12px 12px; background: linear-gradient(rgba(8,18,12,.18),rgba(8,18,12,.75)), url('wicca-hero.webp') center/auto 100% no-repeat; }
.ren-simbolos .ren-card-visual { border-radius: 6px; }

.ren-synthesis { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; max-width: 820px; margin: 1.25rem auto 0; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid rgba(var(--ren-accent-rgb), .28); border-radius: 20px; background: rgba(var(--ren-accent-rgb), .075); }
.ren-synthesis-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(var(--ren-accent-rgb), .45); border-radius: 50%; color: var(--ren-accent); box-shadow: 0 0 22px rgba(var(--ren-accent-rgb), .1); }
.ren-synthesis h4 { margin: .35rem 0 .55rem; color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 500; }
.ren-synthesis p { margin: 0; color: #e4e4e5; font-family: Arial, Helvetica, sans-serif; font-size: .96rem; line-height: 1.68; }
.ren-synthesis .ren-synthesis-action { margin-top: .85rem; color: var(--ren-accent); font-weight: 700; }
.ren-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.3rem; }
.ren-primary, .ren-secondary { min-height: 48px; padding: .78rem 1.15rem; border-radius: 999px; cursor: pointer; font-family: Arial, Helvetica, sans-serif !important; font-size: .86rem !important; font-weight: 800 !important; transition: transform .2s, box-shadow .2s, background .2s; }
.ren-primary { border: 1px solid var(--ren-accent); background: var(--ren-accent); color: #111 !important; box-shadow: 0 9px 22px rgba(var(--ren-accent-rgb), .17); }
.ren-secondary { border: 1px solid rgba(var(--ren-accent-rgb), .4); background: transparent; color: var(--ren-ink) !important; }
.ren-primary span, .ren-secondary span { margin-right: .5rem; }
.ren-primary:hover, .ren-secondary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.ren-share-status { min-height: 1.4rem; margin: .65rem 0 0; color: var(--ren-muted); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; text-align: center; }

@media (max-width: 760px) {
  .ren-oracle { margin-inline: 0; border-radius: 22px; }
  .ren-hero { min-height: 510px; }
  .ren-hero > img { object-position: 58% center; }
  .ren-hero-shade { background: linear-gradient(0deg,var(--ren-bg) 0%,rgba(4,7,12,.55) 57%,rgba(4,7,12,.2) 100%); }
  .ren-hero-copy { width: 100%; padding: 1.45rem; }
  .ren-hero h2 { font-size: clamp(2.35rem, 13vw, 4rem); }
  .ren-stats span { font-size: .67rem; }
  .ren-stage { padding: 1.25rem .8rem 1.5rem; }
  .ren-step-head { grid-template-columns: 2.7rem 1fr; gap: .7rem; }
  .ren-step-no { width: 2.55rem; }
  .ren-focuses { grid-template-columns: repeat(2,1fr); gap: .55rem; }
  .ren-focus { justify-content: flex-start; min-height: 46px; padding-inline: .75rem; }
  .ren-choices { gap: .44rem; padding-inline: 0; }
  .ren-choice { width: clamp(62px, 19vw, 85px); }
  .ren-choices-simbolos { grid-template-columns: repeat(5,minmax(48px,1fr)); gap: .42rem; }
  .ren-simbolos .ren-choice { width: 100%; }
  .ren-result-cards { grid-template-columns: 1fr; max-width: 460px; }
  .ren-result-card { display: grid; grid-template-columns: 112px 1fr; column-gap: 1rem; align-items: start; }
  .ren-card-position { grid-column: 1 / -1; }
  .ren-card-visual { grid-row: 2 / span 5; width: 112px; margin: 0; }
  .ren-card-group, .ren-result-card h4, .ren-card-key, .ren-card-message, .ren-card-advice { grid-column: 2; }
  .ren-card-advice { margin-top: .65rem; padding-top: .65rem; }
  .ren-synthesis { grid-template-columns: 1fr; }
  .ren-synthesis-mark { width: 2.55rem; height: 2.55rem; }
}

@media (max-width: 440px) {
  .ren-hero { min-height: 485px; }
  .ren-hero-copy { padding: 1.1rem; }
  .ren-hero-copy > p { font-size: .92rem; line-height: 1.53; }
  .ren-result-card { display: block; }
  .ren-card-visual { width: 138px; margin: 0 auto 1rem; }
  .ren-card-group, .ren-result-card h4, .ren-card-key, .ren-card-message, .ren-card-advice { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-oracle *, .ren-oracle *::before, .ren-oracle *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}