/* ════════════════════════════════════════════════════════
   PATRONUS — TEST DEL GUARDIÁN MÁGICO
   Potterhead Theme | Hogwarts Legacy Palette
   Plata etérea + azul noche + destellos dorados
   ════════════════════════════════════════════════════════ */

/* ── Variables locales ── */
:root {
  --pat-silver:      #c8e6ff;
  --pat-silver-l:    #e8f4ff;
  --pat-silver-d:    #8ab4d8;
  --pat-silver-glow: rgba(200,230,255,0.22);
  --pat-silver-glow-s: rgba(200,230,255,0.08);
  --pat-ink:         #05080f;
  --pat-card-bg:     rgba(8,13,26,0.88);
  --pat-border:      rgba(200,230,255,0.15);
  --pat-border-s:    rgba(200,230,255,0.40);
  --pat-glow-ring:   0 0 0 2px rgba(200,230,255,0.20);
  --pat-shadow:      0 4px 40px rgba(0,0,0,0.65), 0 1px 0 rgba(200,230,255,0.06) inset;
  --pat-shadow-lift: 0 12px 56px rgba(0,0,0,0.75), 0 2px 0 rgba(200,230,255,0.10) inset;
}

/* ════ MAIN WRAPPER ════ */
.patronus-main {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
}

/* ════ PARTÍCULAS PLATEADAS ════ */
.patronus-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.patronus-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: patronusFloat var(--dur,10s) var(--delay,0s) infinite ease-in-out;
  opacity: 0;
  background: var(--pat-silver);
}

@keyframes patronusFloat {
  0%   { transform: translateY(100vh) translateX(0) scale(0) rotate(0deg); opacity:0; }
  8%   { opacity: var(--op,0.6); }
  80%  { opacity: var(--op,0.6); }
  100% { transform: translateY(-8vh) translateX(var(--drift,40px)) scale(1.4) rotate(360deg); opacity:0; }
}

/* ════ HERO ════ */
.patronus-hero {
  position: relative;
  padding: 5rem 0 3rem;
  text-align: center;
  overflow: hidden;
}

.patronus-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.patronus-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: patronusGlow 7s ease-in-out infinite;
}

.patronus-hero__glow--1 {
  width: 700px; height: 700px;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(200,230,255,0.07) 0%, transparent 65%);
  animation-delay: 0s;
}
.patronus-hero__glow--2 {
  width: 450px; height: 350px;
  left: 15%; top: 20%;
  background: radial-gradient(circle, rgba(138,180,216,0.05) 0%, transparent 70%);
  animation-delay: 2.5s;
}
.patronus-hero__glow--3 {
  width: 350px; height: 450px;
  right: 10%; bottom: -5%;
  background: radial-gradient(circle, rgba(212,168,50,0.06) 0%, transparent 70%);
  animation-delay: 5s;
}

@keyframes patronusGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* Rayos de luz detrás del héroe */
.patronus-hero__rays {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 200deg at 50% 60%,
      transparent 0deg,
      rgba(200,230,255,0.025) 15deg,
      transparent 30deg,
      rgba(200,230,255,0.02) 60deg,
      transparent 75deg,
      rgba(200,230,255,0.025) 110deg,
      transparent 125deg);
  animation: raysRotate 30s linear infinite;
  pointer-events: none;
}

@keyframes raysRotate {
  to { transform: rotate(360deg); }
}

.patronus-hero__content {
  position: relative;
  z-index: 1;
}

/* ── Eyebrow ── */
.patronus-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.patronus-eyebrow__line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pat-silver-d), transparent);
  opacity: 0.4;
}

.patronus-eyebrow__text {
  font-family: var(--font-heading);
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pat-silver-d);
  white-space: nowrap;
}

/* ── Título hero ── */
.patronus-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin: 0 0 1.25rem;
}

.patronus-title__expecto {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  color: var(--pat-silver);
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(200,230,255,0.35), 0 0 80px rgba(200,230,255,0.15);
  animation: silverPulse 4s ease-in-out infinite;
}

.patronus-title__patronum {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  color: var(--gold-300);
  letter-spacing: .06em;
  line-height: 1;
  text-shadow: var(--glow-gold);
}

.patronus-title__sub {
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: .75rem;
}

@keyframes silverPulse {
  0%,100% { text-shadow: 0 0 40px rgba(200,230,255,0.35), 0 0 80px rgba(200,230,255,0.15); }
  50%      { text-shadow: 0 0 60px rgba(200,230,255,0.55), 0 0 120px rgba(200,230,255,0.25); }
}

.patronus-hero__desc {
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.patronus-hero__attr {
  font-size: 1rem;
  color: var(--text-faint);
  font-style: normal;
}

.patronus-hero__has-result {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: rgba(200,230,255,0.06);
  border: 1px solid var(--pat-border-s);
  border-radius: var(--r-lg);
  padding: .75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: .9rem;
  color: var(--pat-silver);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.patronus-hero__has-icon {
  font-size: 1.6rem;
}

/* ════ BOTONES ════ */
.btn-silver {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, rgba(200,230,255,0.18) 0%, rgba(138,180,216,0.12) 100%);
  border: 1px solid var(--pat-border-s);
  border-radius: var(--r-md);
  padding: .85rem 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--pat-silver-l);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .18s, box-shadow .25s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-silver:hover {
  background: linear-gradient(135deg, rgba(200,230,255,0.28) 0%, rgba(138,180,216,0.22) 100%);
  border-color: var(--pat-silver);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(200,230,255,0.18);
}

.btn-outline-silver {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: transparent;
  border: 1px solid var(--pat-border);
  border-radius: var(--r-md);
  padding: .7rem 1.6rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .25s, color .25s, transform .18s;
}

.btn-outline-silver:hover {
  border-color: var(--pat-silver-d);
  color: var(--pat-silver);
  transform: translateY(-1px);
}

/* ════ CONTENEDOR PRINCIPAL ════ */
.patronus-container {
  padding-bottom: 6rem;
  position: relative;
  z-index: 1;
}

/* ════ INTRO ════ */
.patronus-intro {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
  padding: 4rem 3rem;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-border);
  border-radius: var(--r-lg);
  box-shadow: var(--pat-shadow);
  backdrop-filter: blur(8px);
}

.patronus-intro__rune {
  font-size: 4.5rem;
  color: var(--pat-silver);
  opacity: .4;
  line-height: 1;
  margin-bottom: .75rem;
  filter: drop-shadow(0 0 12px rgba(200,230,255,0.3));
  animation: runeFloat 5s ease-in-out infinite;
}

@keyframes runeFloat {
  0%,100% { transform: translateY(0); opacity:.4; }
  50%      { transform: translateY(-6px); opacity:.6; }
}

.patronus-intro__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--pat-silver-l);
  margin: 0 0 1.25rem;
  text-shadow: 0 0 20px rgba(200,230,255,0.3);
}

.patronus-intro__text {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 2.5rem;
}

.patronus-intro__stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.patronus-intro__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.patronus-intro__stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--pat-silver);
  text-shadow: 0 0 12px rgba(200,230,255,0.4);
}

.patronus-intro__stat-label {
  font-family: var(--font-heading);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Botón de inicio especial ── */
.btn-patronus-start {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: linear-gradient(135deg, rgba(200,230,255,0.14) 0%, rgba(100,150,210,0.10) 100%);
  border: 1px solid rgba(200,230,255,0.45);
  border-radius: var(--r-md);
  padding: 1.2rem 3rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: var(--pat-silver-l);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .25s, border-color .25s;
}

.btn-patronus-start__glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(200,230,255,0.12) 0%, transparent 65%);
  animation: btnGlowSpin 4s linear infinite;
  pointer-events: none;
}

@keyframes btnGlowSpin {
  to { transform: rotate(360deg); }
}

.btn-patronus-start:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(200,230,255,0.25);
  border-color: var(--pat-silver);
}

/* ════ BARRA DE PROGRESO ════ */
.patronus-progress {
  max-width: 860px;
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.patronus-progress__bar {
  height: 5px;
  background: rgba(200,230,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.patronus-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pat-silver-d), var(--pat-silver));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(200,230,255,0.5);
}

.patronus-progress__label {
  font-family: var(--font-heading);
  font-size: .9rem;
  letter-spacing: .1em;
  color: var(--text-faint);
  text-align: right;
}

/* ════ PREGUNTA ════ */
.patronus-question-area {
  max-width: 860px;
  margin: 0 auto;
}

.patronus-question {
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-border);
  border-radius: var(--r-lg);
  padding: 3.5rem 3rem 3rem;
  box-shadow: var(--pat-shadow);
  backdrop-filter: blur(8px);
  animation: questionAppear .4s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes questionAppear {
  from { opacity:0; transform: translateY(16px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.patronus-question__num {
  font-family: var(--font-heading);
  font-size: .9rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pat-silver-d);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.patronus-question__num::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--pat-silver-d);
  opacity: .5;
}

.patronus-question__text {
  font-family: var(--font-body);
  font-size: 1.65rem;
  color: var(--text-bright);
  line-height: 1.55;
  margin: 0 0 2.5rem;
}

.patronus-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.patronus-option {
  position: relative;
}

.patronus-option__btn {
  width: 100%;
  text-align: left;
  background: rgba(200,230,255,0.04);
  border: 1px solid var(--pat-border);
  border-radius: var(--r-md);
  padding: 1.3rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  line-height: 1.5;
}

.patronus-option__btn:hover {
  background: rgba(200,230,255,0.09);
  border-color: rgba(200,230,255,0.35);
  transform: translateX(4px);
  box-shadow: inset 3px 0 0 rgba(200,230,255,0.35);
}

.patronus-option__btn.is-selected {
  background: rgba(200,230,255,0.13);
  border-color: var(--pat-silver);
  color: var(--pat-silver-l);
  box-shadow: inset 3px 0 0 var(--pat-silver), 0 0 16px rgba(200,230,255,0.12);
}

.patronus-option__letter {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--pat-border-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .8rem;
  color: var(--pat-silver-d);
  transition: background .2s, border-color .2s;
  margin-top: .1rem;
}

.patronus-option__btn.is-selected .patronus-option__letter {
  background: var(--pat-silver);
  border-color: var(--pat-silver);
  color: var(--pat-ink);
}

/* ════ RESULTADO INLINE ════ */
.patronus-inline-result {
  max-width: 860px;
  margin: 0 auto;
}

/* ════ RESULT CARD (página & inline) ════ */
.patronus-result-card {
  position: relative;
  background: var(--pat-card-bg);
  border: 1px solid rgba(200,230,255,0.18);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--pat-shadow-lift);
  backdrop-filter: blur(12px);
  animation: resultReveal .6s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes resultReveal {
  from { opacity:0; transform: scale(.95) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.patronus-result-card__light {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--p-color, rgba(200,230,255,0.12)) 0%, transparent 60%);
  opacity: .18;
  pointer-events: none;
  animation: resultLight 4s ease-in-out infinite;
}

@keyframes resultLight {
  0%,100% { opacity:.18; transform: translateX(-50%) scale(1); }
  50%      { opacity:.28; transform: translateX(-50%) scale(1.1); }
}

.patronus-result-card__inner {
  position: relative;
  z-index: 1;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
}

.patronus-result-card__header { margin-bottom: 2rem; }

.patronus-result-card__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pat-silver-d);
  border: 1px solid var(--pat-border);
  border-radius: 99px;
  padding: .25rem .9rem;
  margin-bottom: 1.5rem;
}

.patronus-result-card__emoji {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px var(--p-color, rgba(200,230,255,0.4)));
  animation: emojiPulse 3s ease-in-out infinite;
}

@keyframes emojiPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--p-color,rgba(200,230,255,0.4))); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 32px var(--p-color,rgba(200,230,255,0.6))); }
}

.patronus-result-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--pat-silver-l);
  margin: 0 0 .4rem;
  text-shadow: 0 0 30px rgba(200,230,255,0.3);
}

.patronus-result-card__latin {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

.patronus-result-card__desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.75;
  margin: 0 0 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.patronus-result-card__trait,
.patronus-result-card__house {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  background: rgba(200,230,255,0.05);
  border: 1px solid var(--pat-border);
  border-radius: var(--r-md);
  padding: .75rem 1.5rem;
  margin: .4rem;
}

.patronus-result-card__trait-label,
.patronus-result-card__house-label {
  font-family: var(--font-heading);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.patronus-result-card__trait-val,
.patronus-result-card__house-val {
  font-family: var(--font-heading);
  font-size: .92rem;
  color: var(--pat-silver);
}

.patronus-result-card__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ════ RETAKE SECTION ════ */
.patronus-retake-section {
  text-align: center;
  padding: 3rem 1rem;
  max-width: 560px;
  margin: 0 auto;
}

.patronus-retake-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-bright);
  margin: 0 0 .75rem;
}

.patronus-retake-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* ════ QUIZ OCULTO ════ */
.patronus-quiz--hidden { display: none; }
.patronus-quiz-hidden  { display: none; }

/* ════ TOAST ════ */
.patronus-share-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: rgba(8,13,26,0.95);
  border: 1px solid var(--pat-border-s);
  border-radius: var(--r-md);
  padding: .7rem 1.4rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  color: var(--pat-silver-l);
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 9999;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity: 0;
}

.patronus-share-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 600px) {
  .patronus-hero { padding: 5rem 0 3rem; }
  .patronus-intro { padding: 2.5rem 1.5rem; }
  .patronus-question { padding: 1.75rem 1.25rem 1.5rem; }
  .patronus-result-card__inner { padding: 2.5rem 1.5rem 2rem; }
  .patronus-intro__stats { gap: 1.5rem; }
  .patronus-eyebrow__line { display: none; }
}