/* ==========================================================================
   Hechizopedia — "Hogwarts de Vela"
   Lujo oscuro cinematográfico. Ver /DESIGN.md para la especificación completa.
   Fuentes self-hosted (fonts/), cero Google Fonts CDN.
   ========================================================================== */

/* ---------- 1. Fuentes self-hosted ---------- */
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url('../fonts/cinzel-decorative-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}

/* ---------- 2. Variables del sistema (DESIGN.md, valores exactos) ---------- */
:root{
  /* Paleta oficial DESIGN.md */
  --noche:#060c14;
  --noche-2:#0a1520;
  --oro-vela:#e8b54a;     /* acento principal nuevo: hovers, títulos clave, llama */
  --oro-viejo:#c9a84c;    /* secundario: bordes, líneas, ornamentos */
  --oro-claro:#f0d490;    /* highlights puntuales */
  --pergamino:#e8dfc8;
  --carmesi:#7a1515;
  --plata:#a0a8b0;

  /* Acentos por casa */
  --gryffindor:#ae0001; --gryffindor-2:#d3a625;
  --slytherin:#1a472a;  --slytherin-2:#8fa99a;
  --ravenclaw:#0e1a40;  --ravenclaw-2:#946b2d;
  --hufflepuff:#ecb939; --hufflepuff-2:#372e29;

  /* Derivadas — mismo valor que ya usaba el sitio, decisión propia documentada
     en la bitácora: DESIGN.md no nombra un "oro sombra" para textos-eyebrow
     mudos, así que se conserva el matiz ya probado en vez de inventar uno.
     Se sigue usando tal cual para bordes/líneas/degradados decorativos, PERO
     accessibility-pass encontró que como COLOR DE TEXTO (eyebrows, labels,
     el disclaimer de fans) --oro-sombra y --dim caían muy por debajo de
     WCAG AA (2.0–2.9:1 medido contra --noche). Corregido reasignando esos
     usos de texto a --oro-viejo / --plata — los tokens que el propio
     DESIGN.md ya designa para "bordes/ornamentos" y "metadatos/texto
     secundario" respectivamente (8.5:1 y 8.1:1). Ningún color nuevo: mismo
     sistema, aplicado donde el DESIGN.md ya lo pedía. */
  --oro-sombra:#6e5820;
  --oro-glow:rgba(201,168,76,.22);
  --dim:#454555;

  /* Alias de compatibilidad — el monolito original usa estos nombres de
     variable en cientos de reglas/inline-styles. Apuntan a los MISMOS
     valores exactos de arriba: no son una paleta distinta, es el mismo
     sistema con dos nombres para no arriesgar una re-escritura masiva. */
  --gold:var(--oro-viejo);
  --gold-l:var(--oro-claro);
  --gold-d:var(--oro-sombra);
  --gold-glow:var(--oro-glow);
  --crimson:var(--carmesi);
  --midnight:var(--noche);
  --deep:var(--noche-2);
  --text:var(--pergamino);
  --silver:var(--plata);

  /* Spacing & forma */
  --space:8px;
  --radius-sm:3px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-full:999px;
}

/* ---------- 3. Reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* El nav es fixed (~76px alto) y ninguna section tenía scroll-margin-top:
   todo anchor interno (#cast incluido) aterrizaba con su título tapado por
   el nav — se sentía "roto" aunque el id fuera correcto. Un solo valor
   cubre las 17 secciones ancladas (auditoría cruzada href↔id, 19-jul). */
section{scroll-margin-top:96px}
body{background:var(--noche);color:var(--pergamino);font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:400;font-size:1.06rem;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.font-display{font-family:'Cinzel',serif}
::selection{background:rgba(232,181,74,.28);color:var(--oro-claro)}

/* Foco de teclado — dorado consistente con la paleta (nunca el azul por
   defecto del navegador, que desentonaría con "Hogwarts de Vela"). Cubre
   enlaces/botones nativos y las cartas con role="button" (tests, personajes). */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible{
  outline:2px solid var(--oro-vela);outline-offset:3px;border-radius:var(--radius-sm)
}
.pcard:focus-visible,.qc:focus-visible{outline-offset:-3px}

/* ---------- 4. Encendido de velas — momento coreografiado de entrada ---------- */
#intro-velas{position:fixed;inset:0;background:#000;z-index:9000;pointer-events:none;animation:introFadeOut .6s ease .9s forwards}
.vela-punto{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--oro-vela);opacity:0;box-shadow:0 0 0 rgba(232,181,74,0);animation:velaPrende .6s ease var(--d) forwards}
@keyframes velaPrende{0%{opacity:0;box-shadow:0 0 0 rgba(232,181,74,0)}40%{opacity:1}100%{opacity:.9;box-shadow:0 0 44px 16px rgba(232,181,74,.55)}}
@keyframes introFadeOut{to{opacity:0;visibility:hidden}}

/* ---------- 5. Nav ---------- */
#lang-bar{position:fixed;top:0;right:0;z-index:2000;display:flex;align-items:center;padding:10px 18px;background:rgba(6,12,20,.88);border-bottom-left-radius:var(--radius-md);border:1px solid var(--oro-sombra);border-top:none;border-right:none;backdrop-filter:blur(10px)}
.lb{background:none;border:none;color:var(--plata);font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;cursor:pointer;padding:4px 10px;transition:color .18s}
.lb.active{color:var(--oro-viejo)}.lb:hover{color:var(--oro-vela)}.lsep{color:var(--oro-sombra);font-size:11px}

nav{position:fixed;top:0;left:0;right:0;z-index:1500;padding:18px 40px;display:flex;align-items:center;gap:20px;justify-content:space-between;transition:all .5s}
nav.scrolled{background:rgba(6,12,20,.97);border-bottom:1px solid rgba(201,168,76,.1);backdrop-filter:blur(12px);padding:12px 40px}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-logo{font-family:'Cinzel Decorative',serif;font-size:16px;color:var(--oro-viejo);letter-spacing:2px;white-space:nowrap}
.badge-fan{font-family:'Cinzel',serif;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--noche);background:linear-gradient(135deg,var(--oro-sombra),var(--oro-vela));padding:4px 9px;border-radius:var(--radius-full);white-space:nowrap;font-weight:700}

.nav-links{display:flex;align-items:center;gap:22px;list-style:none;padding-right:136px}
.nav-links a{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:rgba(232,223,200,.55);text-decoration:none;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--oro-vela)}
.nav-links .nav-hot{color:var(--oro-viejo)}

.nav-more{position:relative}
.nav-more>button{background:none;border:none;font:inherit;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:rgba(232,223,200,.55);text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:5px;padding:4px 0}
.nav-more>button:hover,.nav-more.open>button{color:var(--oro-vela)}
.nav-more-panel{display:none;position:absolute;top:100%;right:0;margin-top:16px;background:rgba(6,12,20,.98);border:1px solid rgba(201,168,76,.18);min-width:220px;padding:10px 0;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.nav-more.open .nav-more-panel{display:block}
.nav-more-panel a{display:block;padding:9px 20px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;color:rgba(232,223,200,.6);text-decoration:none;text-transform:uppercase;transition:all .2s}
.nav-more-panel a:hover{color:var(--oro-vela);background:rgba(201,168,76,.06);padding-left:26px}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--oro-viejo);transition:all .3s}

#lang-mini{display:none;background:none;border:1px solid rgba(201,168,76,.35);color:var(--oro-viejo);font-family:'Cinzel',serif;font-size:12px;letter-spacing:1px;padding:6px 12px;margin-right:14px;cursor:pointer;border-radius:var(--radius-sm);min-height:34px}
#lang-mini:active{color:var(--noche);background:var(--oro-viejo)}
@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}
  #lang-mini{display:inline-block}
  /* #lang-bar (fixed top:0 right:0, ~110px) y el hamburger competían por la
     misma esquina superior derecha en mobile — no hay suficiente ancho a
     375px para lograr[logo+badge] + hamburger + reservar espacio del
     lang-bar en la misma fila (responsive-breakpoints lo encontró). En vez
     de apretar el nav, el selector de idioma se muda AL menú móvil (mismo
     onclick="setLang()", ver #mobile-menu) y el widget fijo de esquina se
     oculta con el hamburger activo. */
  #lang-bar{display:none}
}

#mobile-menu{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(6,12,20,.97);z-index:2500;flex-direction:column;
  align-items:center;justify-content:center;gap:0;overflow-y:auto;padding:40px 0;
  backdrop-filter:blur(12px);
}
#mobile-menu.open{display:flex}
.mobile-link{
  font-family:'Cinzel',serif;font-size:15px;letter-spacing:3px;
  color:rgba(232,223,200,.6);text-decoration:none;text-transform:uppercase;
  padding:16px 40px;border-bottom:1px solid rgba(201,168,76,.07);
  width:100%;max-width:420px;text-align:center;transition:all .2s;
}
.mobile-link:hover,.mobile-link:active{color:var(--oro-vela);background:rgba(201,168,76,.05)}
.mobile-link.hot{color:var(--oro-viejo)}
#mobile-close{
  position:absolute;top:20px;right:24px;
  background:none;border:none;color:var(--plata);
  font-size:28px;cursor:pointer;
}
/* Selector de idioma dentro del menú móvil — reemplaza al #lang-bar fijo
   (oculto ≤900px, ver query de nav arriba) para no competir por espacio
   con el hamburger en la esquina superior derecha. */
#mobile-lang{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(201,168,76,.12)}
.mlb{background:none;border:1px solid rgba(201,168,76,.25);color:var(--plata);font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;padding:8px 20px;cursor:pointer;border-radius:var(--radius-sm);transition:all .2s}
.mlb.active{color:var(--noche);background:var(--oro-viejo);border-color:var(--oro-viejo)}
.mlb:hover{border-color:var(--oro-vela)}

/* ---------- 6. Hero ---------- */
#hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('../img/extraidas/hero-bg.webp') center/cover no-repeat;animation:slowZoom 30s ease-in-out infinite alternate}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,12,20,.5) 0%,rgba(6,12,20,.2) 35%,rgba(6,12,20,.65) 70%,rgba(6,12,20,1) 100%)}
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
#pcv{position:absolute;inset:0;pointer-events:none;z-index:5}
.hc{position:relative;z-index:10}
.h-eye{font-family:'Cinzel',serif;font-size:11px;letter-spacing:6px;color:var(--oro-viejo);text-transform:uppercase;margin-bottom:24px;opacity:0;animation:fu 1.2s .4s forwards}
.h-title{font-family:'Cinzel Decorative',serif;font-size:clamp(2.8rem,8vw,5.6rem);font-weight:700;line-height:1.05;color:var(--oro-viejo);text-shadow:0 0 80px rgba(201,168,76,.5),0 4px 30px rgba(0,0,0,.8);opacity:0;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 100%);mask-image:radial-gradient(circle,#000 58%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:0% 0%;mask-size:0% 0%;
  animation:fu 1.2s .7s forwards,mascaraLuz 1s .85s cubic-bezier(.22,.7,.3,1) forwards;
  margin-bottom:20px}
@keyframes mascaraLuz{from{-webkit-mask-size:0% 0%;mask-size:0% 0%}to{-webkit-mask-size:230% 230%;mask-size:230% 230%}}
.h-sub{font-family:'Cinzel',serif;font-size:clamp(.85rem,2.2vw,1.2rem);color:rgba(232,223,200,.7);letter-spacing:3px;opacity:0;animation:fu 1.2s 1s forwards;margin-bottom:16px}
.h-flag{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--oro-vela);margin-top:8px;opacity:0;animation:fu 1.2s 1.1s forwards;display:inline-block;text-decoration:none;border-bottom:1px solid rgba(232,181,74,.35);padding-bottom:2px;cursor:pointer;transition:color .18s,border-color .18s}
.h-flag:hover,.h-flag:focus-visible{color:var(--oro-claro);border-color:var(--oro-claro)}
.h-div{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--oro-viejo),transparent);margin:24px auto;opacity:0;animation:fu 1.2s 1.2s forwards}
.h-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fu 1.2s 1.4s forwards}
.btn-g{background:linear-gradient(135deg,var(--oro-sombra),var(--oro-vela));color:#0a0a0a;font-family:'Cinzel',serif;font-size:12px;letter-spacing:2.5px;font-weight:600;padding:16px 36px;border:none;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:all .25s;text-transform:uppercase}
.btn-g:hover{background:linear-gradient(135deg,var(--oro-vela),var(--oro-claro));box-shadow:0 0 50px rgba(232,181,74,.45);transform:translateY(-3px)}
.btn-o{background:transparent;color:var(--oro-viejo);font-family:'Cinzel',serif;font-size:12px;letter-spacing:2.5px;padding:15px 36px;border:1px solid rgba(201,168,76,.4);cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:all .25s;text-transform:uppercase}
.btn-o:hover{border-color:var(--oro-vela);color:var(--oro-vela);background:var(--oro-glow);transform:translateY(-3px)}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;opacity:0;animation:fu 1s 2.2s forwards;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint span{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--oro-viejo)}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--oro-sombra),transparent);animation:sp 2s infinite}
@keyframes sp{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- 7. Cabeceras de sección (compartido) ---------- */
.s-eye{font-family:'Cinzel',serif;font-size:10px;letter-spacing:5px;color:var(--oro-viejo);text-transform:uppercase;text-align:center;margin-bottom:10px}
.s-title{font-family:'Cinzel Decorative',serif;font-size:clamp(2rem,5vw,3.2rem);color:var(--oro-viejo);text-align:center;margin-bottom:14px;text-shadow:0 0 40px rgba(201,168,76,.25)}
.s-desc{text-align:center;color:var(--plata);font-size:15px;line-height:1.8;max-width:560px;margin:0 auto 52px;font-family:'Newsreader',serif;font-style:italic}
.rule{display:flex;align-items:center;gap:16px;margin:0 auto 52px;max-width:300px}
.rule::before,.rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--oro-sombra))}
.rule-d{width:6px;height:6px;background:var(--oro-viejo);transform:rotate(45deg);flex-shrink:0}
.mw{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---------- 7b. Banners de sección a sangre completa (sustituye el
   medallón .escena-marco/.s-header-flex). Cada sección con lámina G1-G5
   abre con su banner fundido: imagen full-bleed + degradado a --noche
   arriba/abajo + grano, texto de cabecera encima. Rompe el padding lateral
   de 20px que usan las 14 secciones mapeadas (todas comparten ese mismo
   valor exacto, verificado por grep) con margen negativo — no hay dos
   valores de padding distintos que reconciliar. */
.section-banner{position:relative;margin:0 -20px 44px;width:calc(100% + 40px);min-height:clamp(230px,38vw,440px);overflow:hidden;display:flex;align-items:flex-end}
.section-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) brightness(.76)}
/* El texto de cabecera (.sb-content) se ancla abajo (align-items:flex-end),
   así que el degradado se carga más oscuro hacia el 65–100% (donde cae el
   texto) que hacia el centro (donde se deja ver la lámina limpia) — mismo
   principio de "oscurecer donde hay texto, no toda la imagen" que en
   #qmod.qmod--house-result. Combinado con el text-shadow fuerte de
   .sb-content (mismo patrón ya usado en .h-title sobre .hero-bg). */
.section-banner::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--noche) 0%,rgba(6,12,20,.12) 20%,rgba(6,12,20,.3) 48%,rgba(6,12,20,.75) 72%,var(--noche) 100%)}
.section-banner::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.sb-content{position:relative;z-index:3;width:100%;padding:0 20px 40px;text-align:center}
.sb-content .s-eye,.sb-content .s-title,.sb-content .s-desc{text-shadow:0 3px 20px rgba(0,0,0,.9),0 0 46px rgba(0,0,0,.55)}
.sb-content .s-desc{margin-bottom:0}
/* Cabecera sin banner (houses/characters — sin lámina propia asignada;
   las 4 salas comunes y las 24 cartas de personaje ya cargan el peso
   visual justo debajo, un banner extra aquí sería redundante). */
.s-header-plain{text-align:center;max-width:640px;margin:0 auto}

/* Fotograma de ambiente en cards de test estrella (patronus / varita / héroe-villano) */
.qc-still{position:relative;margin:-32px -26px 20px;height:110px;overflow:hidden}
.qc.qc--mayor .qc-still{position:relative;margin:0 0 0;height:118px}
.qc-still img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.8)}
.qc-still::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,20,.2) 0%,rgba(10,18,28,.94) 100%)}

/* Enlace "explorar siguiente" entre secciones */
.next-link{text-align:center;padding:16px 20px 0;background:var(--noche)}
.next-link a{display:inline-flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--oro-viejo);text-transform:uppercase;text-decoration:none;border:1px solid rgba(201,168,76,.15);padding:12px 28px;transition:all .25s;border-radius:var(--radius-sm)}
.next-link a:hover{border-color:rgba(201,168,76,.4);color:var(--oro-vela)}

/* ---------- 8. Tests — cards grimorio con jerarquía ---------- */
#quizzes{position:relative;padding:100px 20px;overflow:hidden}
.qbg{position:absolute;inset:0;background:url('../img/extraidas/quiz-bg.webp') center 30%/cover no-repeat;opacity:.12}
.qov{position:absolute;inset:0;background:var(--noche)}
.qov2{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,transparent 20%,var(--noche) 65%)}
/* Jerarquía: casa / patronus / varita = protagonistas (fila propia, cartas
   grandes con doble borde dorado y fotograma superior); el resto = menores
   (grid compacto de 3). Decisión propia siguiendo "tests como cards grimorio
   con jerarquía (casa/patronus/varita protagonistas, el resto menores)" —
   dos grids separados en vez de pelear con spans mixtos en una sola fila. */
.quiz-mayores{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1140px;margin:0 auto 2px}
.quiz-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:1140px;margin:0 auto}
.qc{background:rgba(10,18,28,.92);border:1px solid rgba(201,168,76,.08);border-radius:var(--radius-md);padding:32px 26px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.qc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--oro-glow),transparent 60%);opacity:0;transition:opacity .3s}
.qc:hover{border-color:rgba(232,181,74,.35);transform:translateY(-3px)}.qc:hover::after{opacity:1}
.qc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.qi{font-size:36px;line-height:1}
.qbadge{background:var(--carmesi);color:rgba(240,212,144,.9);font-family:'Cinzel',serif;font-size:8px;letter-spacing:1.5px;padding:4px 10px;text-transform:uppercase;border-radius:var(--radius-full)}
.qn{font-family:'Cinzel',serif;font-size:16px;color:var(--oro-viejo);margin-bottom:10px;font-weight:600;line-height:1.3}
.qd{font-size:13px;color:var(--plata);line-height:1.7;margin-bottom:22px}
.qa{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2.5px;color:var(--oro-viejo);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.qa::after{content:'';flex:1;height:1px;background:var(--oro-sombra);max-width:40px}

.qc.qc--mayor{padding:0 0 36px;position:relative}
.qc.qc--mayor::before{content:'';position:absolute;inset:6px;top:118px;border:1px solid rgba(201,168,76,.14);pointer-events:none}
.qc.qc--mayor .qc-top,.qc.qc--mayor .qn,.qc.qc--mayor .qd,.qc.qc--mayor .qa{padding-left:36px;padding-right:36px}
.qc.qc--mayor .qc-top{margin-top:20px}
.qc.qc--mayor .qi{font-size:48px}
.qc.qc--mayor .qn{font-size:20px}
@media(max-width:900px){
  .quiz-mayores,.quiz-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .quiz-mayores,.quiz-grid{grid-template-columns:1fr}
}

/* ---------- 9. Casas — 4 paneles a sangre con acento ---------- */
#houses{position:relative;padding:100px 20px 0;overflow:hidden}
.hbg{position:absolute;inset:0;background:url('../img/extraidas/houses-bg.webp') center/cover no-repeat}
.hov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,12,20,.85),rgba(6,12,20,.93))}
.houses-panels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px}
/* Cada panel usa la sala común real de su casa (img/escenas/casa-*.webp)
   de fondo, con un overlay permanente del color de casa + fundido a
   --noche hacia abajo — no solo en hover. accessibility-pass: la primera
   versión de este degradado dejaba el tinte de color "puro" demasiado
   tiempo (hasta 68% del panel), justo donde caen hname/hfounder/htraits;
   contra un parche claro de la propia foto detrás, el contraste bajaba de
   4.5:1 en el peor caso. Se adelantó el oscurecimiento fuerte a ~18–45%
   (antes de que aparezca cualquier texto real) — el color de casa sigue
   asomando arriba, detrás del icono, pero el bloque de texto ya cae sobre
   un fondo prácticamente opaco. Verificado con luminancia WCAG contra el
   peor caso (blanco puro detrás): ≥4.5:1 para htraits/hfounder (--plata)
   y ≥4.5:1 para hname (color de casa, aunque solo necesita 3:1 por ser
   texto grande en negritas). El ::before de hover sigue encima para
   intensificar el tinte al pasar el mouse, como ya hacía. */
.hpanel{padding:56px 30px 64px;border-left:1px solid rgba(201,168,76,.08);transition:background .4s;position:relative;overflow:hidden;min-height:420px;background-size:cover;background-position:center}
.hpanel:first-child{border-left:none}
.hpanel.g{background-image:linear-gradient(180deg,rgba(174,0,1,.28) 0%,rgba(6,12,20,.65) 18%,rgba(6,12,20,.9) 45%,var(--noche) 100%),url('../img/escenas/casa-gryffindor.webp')}
.hpanel.s{background-image:linear-gradient(180deg,rgba(26,71,42,.34) 0%,rgba(6,12,20,.65) 18%,rgba(6,12,20,.9) 45%,var(--noche) 100%),url('../img/escenas/casa-slytherin.webp')}
.hpanel.r{background-image:linear-gradient(180deg,rgba(14,26,64,.4) 0%,rgba(6,12,20,.65) 18%,rgba(6,12,20,.9) 45%,var(--noche) 100%),url('../img/escenas/casa-ravenclaw.webp')}
.hpanel.h{background-image:linear-gradient(180deg,rgba(236,185,57,.22) 0%,rgba(6,12,20,.65) 18%,rgba(6,12,20,.9) 45%,var(--noche) 100%),url('../img/escenas/casa-hufflepuff.webp')}
.hpanel::before{content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s;pointer-events:none}
.hpanel:hover::before{opacity:1}
.hpanel.g::before{background:linear-gradient(to bottom,rgba(174,0,1,.3),transparent 60%)}
.hpanel.s::before{background:linear-gradient(to bottom,rgba(26,71,42,.36),transparent 60%)}
.hpanel.r::before{background:linear-gradient(to bottom,rgba(14,26,64,.4),transparent 60%)}
.hpanel.h::before{background:linear-gradient(to bottom,rgba(236,185,57,.24),transparent 60%)}
.hpanel:hover{transform:translateY(-4px)}
.hcrest{font-size:52px;display:block;margin-bottom:20px;position:relative;z-index:2;transition:filter .3s}
.hpanel:hover .hcrest{filter:drop-shadow(0 0 22px currentColor)}
.hname{font-family:'Cinzel Decorative',serif;font-size:1.3rem;margin-bottom:6px;font-weight:700;position:relative;z-index:2}
.hpanel.g .hname,.hpanel.g .hcrest{color:var(--gryffindor-2)}
.hpanel.s .hname,.hpanel.s .hcrest{color:#5fbf8f}
.hpanel.r .hname,.hpanel.r .hcrest{color:#7d9fd0}
.hpanel.h .hname,.hpanel.h .hcrest{color:var(--hufflepuff)}
.hfounder{font-size:10px;letter-spacing:2px;color:var(--plata);font-family:'Cinzel',serif;margin-bottom:14px;text-transform:uppercase;position:relative;z-index:2}
.htraits{font-size:13px;color:rgba(160,168,176,.85);line-height:1.8;position:relative;z-index:2}
.htable{margin-top:18px;border-top:1px solid rgba(201,168,76,.12);padding-top:14px;position:relative;z-index:2}
.htrow{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}
.htlabel{color:var(--plata);font-family:'Cinzel',serif;letter-spacing:1px;text-transform:uppercase}.htval{color:var(--plata)}
@media(max-width:900px){
  .houses-panels{grid-template-columns:repeat(2,1fr)}
  .hpanel{border-left:none;border-top:1px solid rgba(201,168,76,.08)}
  .hpanel:first-child{border-top:none}
}
@media(max-width:560px){
  .houses-panels{grid-template-columns:1fr}
}

/* ---------- 10. Personajes — cartas cinematográficas 9:16 ---------- */
#characters{position:relative;padding:100px 20px;background:var(--noche-2)}
/* Tamaño tope conservador: la galería mezcla retratos a 244×433 (8) y a
   120×213 (16, vienen de una cuadrícula de menor resolución). En vez de dos
   tamaños de carta distintos (rompería la sensación de galería uniforme),
   se topa TODO el grid a 140–160px de imagen renderizada — suficientemente
   chico para que ninguna de las dos fuentes se vea estirada, y el
   grano+viñeta de abajo hace el resto para unificar la percepción. */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;max-width:1180px;margin:0 auto;justify-content:center}
.pcard{position:relative;aspect-ratio:9/16;width:100%;max-width:160px;background:var(--noche);border:1px solid rgba(201,168,76,.14);cursor:pointer;overflow:hidden;transition:transform .18s,border-color .18s;border-radius:var(--radius-sm);margin:0 auto}
.pcard::before{content:'';position:absolute;inset:3px;border:1px solid rgba(201,168,76,.12);pointer-events:none;z-index:5;transition:border-color .18s}
/* Viñeta cinematográfica uniforme (::after, no requiere tocar el HTML de
   cada carta): oscurece los bordes en TODAS las cartas por igual,
   disimulando el escalado más fuerte de los retratos de 120×213 sin crear
   una diferencia visible entre los dos grupos de resolución. */
.pcard::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 78% 68% at 50% 36%,transparent 55%,rgba(6,12,20,.5) 100%)}
.pcard:hover{transform:translateY(-5px);border-color:var(--pcard-glow,var(--oro-vela))}
.pcard:hover::before{border-color:var(--pcard-glow,var(--oro-vela))}
.pcard:hover{box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 26px var(--pcard-glow-soft,rgba(232,181,74,.25))}
.pcard-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,var(--pcard-tint,rgba(201,168,76,.12)),var(--noche) 75%);transition:opacity .5s ease;z-index:1}
.pcard-fallback span{font-size:2.6rem;filter:drop-shadow(0 0 14px var(--pcard-glow-soft,rgba(232,181,74,.35)))}
.pcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;animation:kenBurns 14s ease-in-out infinite alternate;animation-play-state:paused;z-index:2}
.pcard.con-retrato .pcard-img{opacity:1;animation-play-state:running}
.pcard.con-retrato .pcard-fallback{opacity:0}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}
/* Grano fino sobre el retrato — misma textura que .escena-grano, matiza la
   baja resolución nativa (244×433) sin depender solo del tope de 220px. */
.pcard-grano{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:110px 110px}
.pcard-info{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:14px 12px 12px;background:linear-gradient(to top,rgba(6,12,20,.94) 10%,rgba(6,12,20,.55) 55%,transparent 100%)}
.pcard-name{font-family:'Cinzel',serif;font-size:12.5px;color:var(--pergamino);font-weight:600;line-height:1.25;margin-bottom:2px}
.pcard-house{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-family:'Cinzel',serif;color:var(--pcard-glow,var(--oro-sombra))}

.pcard--g{--pcard-glow:#d3555a;--pcard-glow-soft:rgba(174,0,1,.35);--pcard-tint:rgba(174,0,1,.16)}
.pcard--s{--pcard-glow:#5fbf8f;--pcard-glow-soft:rgba(26,71,42,.35);--pcard-tint:rgba(26,71,42,.18)}
.pcard--r{--pcard-glow:#7d9fd0;--pcard-glow-soft:rgba(14,26,64,.4);--pcard-tint:rgba(14,26,64,.2)}
.pcard--h{--pcard-glow:#ecb939;--pcard-glow-soft:rgba(236,185,57,.3);--pcard-tint:rgba(236,185,57,.14)}
.pcard--otro{--pcard-glow:var(--oro-vela);--pcard-glow-soft:rgba(232,181,74,.3);--pcard-tint:rgba(232,181,74,.14)}

@media(max-width:560px){
  .pcards{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ---------- Miniaturas de items — regla "nada sin ilustración" (DESIGN.md,
   cola de ejecución, punto 3). Imagen chica con marco fino doble dorado,
   parte de la anatomía de cada card (arriba del ícono en grids de columna,
   a la izquierda en filas) — nunca una estampita suelta. Fallback: onerror
   la quita del DOM (this.remove()) y queda el emoji/texto que ya estaba
   debajo, mismo espíritu que el fallback de .pcard-img pero sin necesitar
   una capa de cross-fade (aquí la miniatura es un elemento adicional, no un
   reemplazo del ícono). ---------- */
.itm-thumb{display:block;width:84px;height:84px;object-fit:cover;border-radius:var(--radius-sm);margin:0 0 10px;border:1px solid var(--oro-viejo);box-shadow:0 0 0 3px var(--noche),0 0 0 4px rgba(201,168,76,.35);background:var(--noche-2)}
.itm-thumb--sc{width:48px;height:48px;margin:0 0 6px;box-shadow:0 0 0 2px var(--noche),0 0 0 3px rgba(201,168,76,.35)}
.itm-thumb--rc{width:88px;height:88px}
.itm-thumb--scc{width:72px;height:72px}
.itm-thumb--faction{width:72px;height:72px}
.itm-thumb--tl{width:84px;height:84px;margin:0 0 12px}

/* ---------- 11. Criaturas / Hechizos / Reliquias / Horrocruxes / Escuelas
   (grids existentes — mismo patrón, nueva piel tipográfica y de color) ---------- */
#creatures{position:relative;padding:100px 20px;background:var(--noche)}
.creatures-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1140px;margin:0 auto}
.crc{background:rgba(10,18,28,.9);border:1px solid rgba(201,168,76,.1);border-radius:var(--radius-md);padding:32px 28px;transition:all .3s}
.crc:hover{border-color:rgba(232,181,74,.3);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.crc-icon{font-size:40px;margin-bottom:14px;display:block}
.crc-name{font-family:'Cinzel',serif;font-size:15px;color:var(--oro-viejo);margin-bottom:4px;font-weight:600}
.crc-class{font-size:9px;letter-spacing:2px;color:var(--oro-viejo);font-family:'Cinzel',serif;text-transform:uppercase;margin-bottom:12px}
.crc-desc{font-size:13px;color:rgba(160,168,176,.85);line-height:1.7;font-family:'Newsreader',serif}
.danger-bar{margin-top:14px;display:flex;align-items:center;gap:10px}
.danger-label{font-size:9px;letter-spacing:2px;color:var(--plata);font-family:'Cinzel',serif;text-transform:uppercase;white-space:nowrap}
.danger-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:var(--radius-full)}
.danger-fill{height:100%;border-radius:var(--radius-full)}

#spells{position:relative;padding:100px 20px;overflow:hidden}
.sbg{position:absolute;inset:0;background:url('../img/extraidas/corridor-bg.webp') center/cover no-repeat;opacity:.18}
.sov2{position:absolute;inset:0;background:linear-gradient(to bottom,var(--noche),rgba(6,12,20,.9),var(--noche))}
.spells-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:rgba(201,168,76,.05);max-width:1140px;margin:0 auto}
.sc{background:rgba(6,12,20,.95);padding:26px 28px;display:flex;gap:18px;transition:all .25s;position:relative}
.sc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--oro-sombra);transform:scaleY(0);transition:transform .4s;transform-origin:bottom}
.sc:hover::before{transform:scaleY(1);background:var(--oro-vela)}.sc:hover{background:rgba(12,22,36,.95)}
.sc-icon{font-size:26px;flex-shrink:0;margin-top:2px}
.sc-inc{font-family:'Cinzel',serif;font-size:15px;color:var(--oro-viejo);margin-bottom:4px;font-weight:600;font-style:italic;transition:text-shadow .3s}
.sc:hover .sc-inc{text-shadow:0 0 20px rgba(232,181,74,.6)}
.sc-type{font-size:9px;color:var(--oro-viejo);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;font-family:'Cinzel',serif}
.sc-eff{font-size:12px;color:rgba(160,168,176,.85);line-height:1.6;font-family:'Newsreader',serif}

#relics{position:relative;padding:100px 20px;background:var(--noche-2)}
/* 340px mínimo desbordaba 5px a 375px de viewport (335px de área útil tras
   el padding de .mw) — bajado a 300px, mismo valor que ya usan otros grids
   de 3 columnas del sitio (creatures/objects), responsive-breakpoints. */
.relics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1140px;margin:0 auto}
.rc{background:rgba(6,12,20,.95);border:1px solid rgba(201,168,76,.1);padding:36px;transition:all .3s;position:relative;border-radius:var(--radius-md)}
.rc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--oro-sombra),transparent);transform:scaleX(0);transition:transform .5s}
.rc:hover{border-color:rgba(201,168,76,.3)}.rc:hover::after{transform:scaleX(1)}
.rc-icon{font-size:44px;display:block;margin-bottom:18px}
.rc-name{font-family:'Cinzel Decorative',serif;font-size:1.15rem;color:var(--oro-viejo);margin-bottom:6px}
.rc-sub{font-size:10px;letter-spacing:2px;color:var(--oro-viejo);font-family:'Cinzel',serif;text-transform:uppercase;margin-bottom:14px}
.rc-desc{font-size:13px;color:rgba(160,168,176,.85);line-height:1.75;font-family:'Newsreader',serif}

#horcruxes{position:relative;padding:100px 20px;background:var(--noche)}
.hx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px;background:rgba(201,168,76,.05);max-width:1140px;margin:0 auto}
.hxc{background:rgba(8,14,22,.95);padding:32px 28px;border:1px solid rgba(139,20,20,.2);transition:all .3s;position:relative;overflow:hidden}
.hxc::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(100,0,0,.15),transparent 70%);opacity:0;transition:opacity .4s}
.hxc:hover::before{opacity:1}.hxc:hover{border-color:rgba(174,0,1,.5)}
.hxc-icon{font-size:40px;margin-bottom:14px;display:block}
.hxc-name{font-family:'Cinzel',serif;font-size:15px;color:#d3555a;margin-bottom:4px;font-weight:600}
.hxc-owner{font-size:10px;letter-spacing:2px;color:var(--plata);font-family:'Cinzel',serif;margin-bottom:12px;text-transform:uppercase}
.hxc-desc{font-size:12px;color:rgba(160,168,176,.8);line-height:1.65;font-family:'Newsreader',serif}

#schools{position:relative;padding:100px 20px;overflow:hidden}
.sclbg{position:absolute;inset:0;background:url('../img/extraidas/parchment-bg.webp') center/cover fixed;opacity:.07}
.sclov{position:absolute;inset:0;background:var(--noche)}
.schools-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;max-width:1140px;margin:0 auto}
.scc{background:rgba(10,18,28,.92);border:1px solid rgba(201,168,76,.09);border-radius:var(--radius-md);padding:34px;transition:all .3s}
.scc:hover{border-color:rgba(232,181,74,.28);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.scc-flag{font-size:34px;margin-bottom:16px;display:block}
.scc-name{font-family:'Cinzel Decorative',serif;font-size:1.1rem;color:var(--oro-viejo);margin-bottom:5px}
.scc-country{font-size:10px;letter-spacing:2.5px;color:var(--plata);font-family:'Cinzel',serif;margin-bottom:13px;text-transform:uppercase}
.scc-desc{font-size:13px;color:rgba(160,168,176,.85);line-height:1.75;font-family:'Newsreader',serif}

/* Facciones (inline-styled en el HTML, solo hover compartido) */
.faction-card{border-radius:var(--radius-md)}
.faction-card:hover{transform:translateY(-4px)}

/* Objetos / Lugares / Mundo Mágico / Materias / Quidditch — cards obj-card */
.obj-card{background:rgba(10,18,28,.9);border:1px solid rgba(201,168,76,.08);border-radius:var(--radius-md);padding:28px;transition:all .3s;position:relative;overflow:hidden}
.obj-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--oro-sombra),transparent);transform:scaleX(0);transition:transform .4s}
.obj-card:hover{border-color:rgba(232,181,74,.25);transform:translateY(-4px)}.obj-card:hover::before{transform:scaleX(1)}
.obj-icon{font-size:36px;margin-bottom:14px}
.obj-name{font-family:'Cinzel',serif;font-size:15px;color:var(--oro-viejo);margin-bottom:10px;font-weight:600}
.obj-desc{font-size:13px;color:rgba(160,168,176,.85);line-height:1.7;font-family:'Newsreader',serif}

.loc-card{padding:32px 28px;transition:all .3s;position:relative;overflow:hidden;background:rgba(6,12,20,.95)}
.loc-card:hover{transform:scale(1.02)}
.loc-icon{font-size:40px;margin-bottom:14px;display:block}
.loc-name{font-family:'Cinzel',serif;font-size:15px;margin-bottom:10px;font-weight:600}
.loc-desc{font-size:12px;color:rgba(160,168,176,.85);line-height:1.7;font-family:'Newsreader',serif}
.loc-g .loc-name{color:#d3555a}.loc-s .loc-name{color:#5fbf8f}.loc-r .loc-name{color:#7d9fd0}.loc-h .loc-name{color:var(--hufflepuff)}
.loc-g{border:1px solid rgba(174,0,1,.2)}.loc-s{border:1px solid rgba(26,71,42,.2)}.loc-r{border:1px solid rgba(14,26,64,.3)}.loc-h{border:1px solid rgba(236,185,57,.2)}
.loc-g:hover{background:rgba(100,10,10,.15)}.loc-s:hover{background:rgba(10,60,30,.15)}.loc-r:hover{background:rgba(10,30,80,.15)}.loc-h:hover{background:rgba(80,55,5,.15)}

/* Cast (HBO) */
.cast-card{background:rgba(10,18,28,.92);border:1px solid rgba(201,168,76,.1);border-radius:var(--radius-md);padding:24px;transition:all .3s}
.cast-card:hover{border-color:rgba(232,181,74,.3);transform:translateY(-2px)}
.cast-char{font-family:'Cinzel',serif;font-size:14px;color:var(--oro-viejo);font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(201,168,76,.1)}
.cast-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:8px}
.cast-era{font-size:10px;letter-spacing:1px;color:var(--plata);font-family:'Cinzel',serif;flex-shrink:0}
.cast-era.new{color:var(--oro-viejo)}
.cast-actor{font-size:13px;color:var(--pergamino);text-align:right;font-family:'Newsreader',serif}
.cast-actor.new{color:var(--oro-viejo);font-weight:600}
.cast-note{font-size:11px;color:rgba(160,168,176,.85);line-height:1.65;margin-top:12px;padding-top:10px;border-top:1px solid rgba(201,168,76,.06);font-family:'Newsreader',serif}

/* ---------- 12. Timeline — hilo vertical iluminado ---------- */
#timeline{position:relative;padding:100px 20px;background:var(--noche);overflow:hidden}
.tl-thread-wrap{position:relative;max-width:640px;margin:0 auto}
.tl-thread{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,rgba(201,168,76,.35) 6%,rgba(201,168,76,.35) 94%,transparent);z-index:0}
.tl-item{display:flex;align-items:flex-start;gap:24px;margin-bottom:56px;position:relative;z-index:1}
.tl-left{flex-direction:row-reverse;text-align:right}
.tl-right{flex-direction:row;text-align:left}
.tl-node{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:6px;position:relative;background:radial-gradient(circle at 35% 30%,var(--oro-claro),var(--oro-viejo) 60%,var(--oro-sombra) 100%);box-shadow:0 0 0 3px var(--noche),0 0 18px 3px rgba(232,181,74,.45)}
.tl-node::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(201,168,76,.3);animation:tlPulso 3.4s ease-in-out infinite}
@keyframes tlPulso{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.25);opacity:0}}
.tl-card{background:rgba(10,18,28,.92);border:1px solid rgba(201,168,76,.12);padding:22px 26px;max-width:380px;transition:all .25s;position:relative;border-radius:var(--radius-md)}
.tl-card::before,.tl-card::after{content:'';position:absolute;inset:0;border-radius:var(--radius-md);pointer-events:none}
.tl-card::before{border:1px solid rgba(201,168,76,.18)}
.tl-card::after{inset:4px;border:1px solid rgba(201,168,76,.08)}
.tl-card:hover{border-color:rgba(232,181,74,.35);transform:translateY(-2px)}
.tl-year{font-family:'Cinzel',serif;font-size:11px;color:var(--oro-viejo);letter-spacing:2px;margin-bottom:6px;text-transform:uppercase}
.tl-event{font-family:'Cinzel',serif;font-size:15px;color:var(--oro-viejo);margin-bottom:8px;font-weight:600}
.tl-desc{font-size:12px;color:rgba(160,168,176,.85);line-height:1.7;font-family:'Newsreader',serif}
@media(max-width:680px){
  .tl-thread{left:6px}
  .tl-item,.tl-left,.tl-right{flex-direction:row!important;text-align:left!important}
  .tl-card{max-width:100%}
}

/* ---------- 13. Footer ---------- */
footer{background:#03080f;border-top:1px solid rgba(201,168,76,.07);padding:56px 20px 40px;text-align:center}
.flogo{font-family:'Cinzel Decorative',serif;font-size:1.4rem;color:var(--oro-viejo);margin-bottom:6px;letter-spacing:2px}
.ftag{font-family:'Cinzel',serif;font-size:10px;letter-spacing:4px;color:var(--plata);margin-bottom:14px;text-transform:uppercase}
.f-badge{margin-bottom:22px}
.fline{width:80px;height:1px;background:var(--oro-sombra);margin:0 auto 28px}
.fdisc{font-size:11.5px;color:var(--plata);line-height:1.85;max-width:600px;margin:0 auto 24px;font-family:'Newsreader',serif}
.gallery-link{display:inline-flex;min-height:44px;align-items:center;justify-content:center;margin:0 auto 24px;padding:10px 18px;border:1px solid var(--oro-viejo);color:var(--oro-claro);font-family:'Cinzel',serif;font-size:12px;letter-spacing:.06em;text-decoration:none}
.gallery-link:hover{background:rgba(232,181,74,.1);border-color:var(--oro-vela)}
.gallery-link:focus-visible{outline:2px solid var(--oro-claro);outline-offset:4px}
.fcopy{font-size:10px;color:#202030;letter-spacing:1px}

/* Síguenos — link real a TikTok si TIKTOK_URL ya existe; si sigue en '#'
   (cuenta todavía no creada), se renderiza como texto "(próximamente)" en
   vez de un link que no lleva a ningún lado — honestidad en UI, no un botón
   muerto disfrazado de vivo. Ver renderFollow() en app.js. */
.f-follow{margin:0 0 28px}
.f-follow-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;background:linear-gradient(135deg,var(--oro-sombra),var(--oro-vela));padding:12px 26px;border-radius:var(--radius-sm);text-decoration:none;font-weight:700;transition:transform .2s}
.f-follow-btn:hover,.f-follow-btn:focus-visible{transform:translateY(-2px)}
.f-follow-soon{display:inline-flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--plata);border:1px solid rgba(201,168,76,.2);padding:11px 22px;border-radius:var(--radius-sm);opacity:.8}

/* El Universo — franja de autopromoción cruzada de los 7 canales del
   imperio (mismo patrón que sitios/testiq/index.html .universe-strip,
   repintado con la paleta de este sitio). Cero ads externos: el contenido
   se jala entre sí. */
.universe-strip{margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(201,168,76,.08);max-width:640px}
.universe-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--plata);text-transform:uppercase;text-align:center;margin-bottom:14px;opacity:.85}
.universe-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.universe-chip{display:inline-flex;align-items:center;font-family:'Newsreader',serif;font-size:11px;color:var(--plata);text-decoration:none;padding:8px 14px;border:1px solid rgba(201,168,76,.15);border-radius:var(--radius-full);transition:color .2s,border-color .2s}
.universe-chip:hover,.universe-chip:focus-visible{color:var(--oro-vela);border-color:rgba(232,181,74,.4)}
.universe-chip--soon{opacity:.5;cursor:default}
.universe-chip--soon:hover{color:var(--plata);border-color:rgba(201,168,76,.15)}

/* Cross-promo tras el resultado de un test (equivalente a "Tu mente pide
   más" de TestIQ) — discreta, dentro de #qres, nunca interrumpe el test. */
.xpromo{margin:26px 0 4px;padding-top:20px;border-top:1px solid rgba(201,168,76,.12);text-align:left}
.xpromo-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--plata);text-transform:uppercase;margin-bottom:10px;text-align:center}
.xpromo-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(10,18,28,.9);border:1px solid rgba(201,168,76,.15);border-radius:var(--radius-md);text-decoration:none;transition:border-color .2s,transform .2s}
.xpromo-card:hover,.xpromo-card:focus-visible{border-color:rgba(232,181,74,.4);transform:translateY(-2px)}
.xpromo-mark{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:50%;border:1px solid var(--oro-viejo);background:var(--noche-2)}
.xpromo-body{flex:1;min-width:0}
.xpromo-name{font-family:'Cinzel',serif;font-size:13px;color:var(--oro-viejo);font-weight:600}
.xpromo-desc{font-family:'Newsreader',serif;font-size:12px;color:var(--plata);margin-top:2px;line-height:1.4;font-style:italic}
.xpromo-cta{font-family:'Cinzel',serif;font-size:10px;color:var(--oro-vela);letter-spacing:1px;flex-shrink:0;margin-left:8px;white-space:nowrap}

/* Puerta de personalización — nombre opcional antes de cada test. */
#qname{display:none;text-align:center;padding:10px 0;animation:fu .8s forwards}
.qname-eye{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--oro-viejo);text-transform:uppercase;margin-bottom:16px}
#qname-label{font-family:'Cinzel',serif;font-size:16px;color:var(--pergamino);margin-bottom:18px;line-height:1.5}
#qname-input{display:block;width:100%;max-width:320px;margin:0 auto 22px;background:var(--noche-2);border:1px solid var(--oro-viejo);border-radius:var(--radius-sm);color:var(--pergamino);font-family:'Newsreader',serif;font-size:15px;padding:12px 16px;text-align:center}
#qname-input::placeholder{color:rgba(160,168,176,.5)}
#qname-input:focus{outline:none;border-color:var(--oro-vela);box-shadow:0 0 0 3px rgba(232,181,74,.15)}
#qname-cta{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:12px 30px;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--oro-sombra),var(--oro-vela));color:#0a0a0a;font-weight:700;cursor:pointer;transition:transform .2s}
#qname-cta:hover,#qname-cta:focus-visible{transform:translateY(-2px)}

/* ---------- 14. Modales (tests + personaje) ---------- */
#qov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:3000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(14px)}
#qov.open{display:flex}
#qmod{background:var(--noche-2);border:1px solid rgba(201,168,76,.18);max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:52px 44px;position:relative;border-radius:var(--radius-lg)}
#qmod::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--oro-viejo),transparent)}
#qclose{position:absolute;top:18px;right:22px;background:none;border:none;color:var(--plata);font-size:20px;cursor:pointer;font-family:'Cinzel',serif;transition:color .2s}
#qclose:hover{color:var(--oro-vela)}
#qstep{font-size:10px;color:var(--oro-viejo);letter-spacing:3px;font-family:'Cinzel',serif;margin-bottom:10px}
#qtitle{font-family:'Cinzel Decorative',serif;font-size:1.35rem;color:var(--oro-viejo);margin-bottom:6px;line-height:1.3}
#qbar{width:100%;height:1px;background:rgba(201,168,76,.1);margin:22px 0}
#qfill{height:100%;background:var(--oro-vela);transition:width .5s cubic-bezier(.4,0,.2,1)}
#qq{font-family:'Cinzel',serif;font-size:1rem;color:var(--pergamino);line-height:1.6;margin-bottom:28px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{background:rgba(255,255,255,.02);border:1px solid rgba(201,168,76,.1);padding:15px 20px;cursor:pointer;font-size:14px;color:var(--plata);transition:all .2s;text-align:left;font-family:'Newsreader',serif;line-height:1.5;border-radius:var(--radius-sm)}
.qopt:hover{border-color:rgba(232,181,74,.4);background:var(--oro-glow);color:var(--oro-claro);transform:translateX(4px)}
#qres{display:none;text-align:center;animation:fu .8s forwards;padding:10px 0}
#ricon{font-size:70px;display:block;margin-bottom:14px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#rname{font-family:'Cinzel Decorative',serif;font-size:2rem;margin-bottom:14px}
#rdesc{color:var(--plata);line-height:1.8;margin-bottom:28px;font-size:14px;font-family:'Newsreader',serif;font-style:italic}
#result-badge{display:inline-block;padding:6px 20px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;border:1px solid currentColor;color:var(--oro-viejo);border-radius:var(--radius-full)}
.result-divider{width:60px;height:1px;background:var(--oro-sombra);margin:20px auto}
.ract{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ract button{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;padding:12px 26px;cursor:pointer;text-transform:uppercase;border:none;transition:all .25s;border-radius:var(--radius-sm)}
#rshare{background:linear-gradient(135deg,var(--oro-sombra),var(--oro-vela));color:#0a0a0a;font-weight:700}
#rshare:hover{transform:translateY(-2px)}
#rretry{background:transparent;border:1px solid var(--oro-sombra)!important;color:var(--oro-viejo)}
#rretry:hover{border-color:var(--oro-vela)!important;color:var(--oro-vela);background:var(--oro-glow)}

/* Revelación del test de casas — el emblema heráldico real
   (img/escenas/resultado-<casa>.webp) como fondo del panel de resultado,
   nombre en Cinzel gigante encima: la imagen que la gente captura y
   comparte. Solo se activa en #qmod vía clase (showRes en app.js);
   background-attachment por defecto ("scroll") ya deja la imagen fija
   respecto a la caja del modal aunque su contenido haga scroll interno.
   accessibility-pass: el degradado solo (::after) no basta — #rname usa
   el color de casa (p.ej. #e05555 en Gryffindor) y esa zona del emblema
   puede tener parches claros/cálidos del propio dibujo detrás, hundiendo
   el contraste en el peor caso. En vez de oscurecer TODA la lámina
   (perdería el punto de mostrarla), #qres lleva su propio panel
   semitransparente oscuro SOLO detrás del texto; el resto de la imagen se
   ve limpia alrededor. Verificado con la fórmula de luminancia WCAG contra
   el peor caso posible (un píxel blanco puro detrás del panel): al .85 de
   opacidad el fondo resultante da ≈5.5:1 para #rdesc/--plata (texto normal,
   requiere 4.5:1) y ≥3.5:1 para los 4 colores de casa en #rname (texto
   grande ≥24px, requiere 3:1 — Ravenclaw #5580e0 es el más ajustado, 3.5:1). */
#qmod.qmod--house-result{background-size:cover;background-position:center}
#qmod.qmod--house-result::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(6,12,20,.28) 0%,rgba(6,12,20,.12) 30%,rgba(6,12,20,.3) 60%,rgba(6,12,20,.92) 100%)}
#qmod.qmod--house-result #qres{position:relative;z-index:2;background:rgba(6,12,20,.85);border-radius:var(--radius-md);padding:30px 24px;margin-top:6px}
#qmod.qmod--house-result #ricon{display:none}
#qmod.qmod--house-result #rname{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(2.3rem,6vw,3.6rem);letter-spacing:1px;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.7),0 0 50px currentColor;margin:0 0 18px;line-height:1.05}

#char-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:3500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(14px)}
#char-overlay.open{display:flex}
#char-modal{background:var(--noche-2);border:1px solid rgba(201,168,76,.2);max-width:720px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 120px rgba(0,0,0,.9);border-radius:var(--radius-lg)}
#char-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--oro-viejo),transparent)}
.cm-header{padding:40px 40px 24px;display:flex;gap:28px;align-items:flex-start;border-bottom:1px solid rgba(201,168,76,.1)}
.cm-avatar{width:96px;height:96px;flex-shrink:0;border:2px solid;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:48px;border-radius:var(--radius-md)}
.cm-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.cm-name{font-family:'Cinzel Decorative',serif;font-size:1.6rem;color:var(--oro-viejo);margin-bottom:6px;line-height:1.2}
.cm-house-badge{display:inline-block;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border:1px solid;margin-bottom:10px;border-radius:var(--radius-full)}
.cm-tagline{font-family:'Newsreader',serif;font-size:13px;color:var(--plata);font-style:italic;line-height:1.6}
.cm-body{padding:28px 40px 40px}
.cm-section{margin-bottom:24px}
.cm-section-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--oro-viejo);text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(201,168,76,.1)}
.cm-text{font-size:13px;color:rgba(160,168,176,.9);line-height:1.8;font-family:'Newsreader',serif}
.cm-text p{margin-bottom:12px}
.cm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.cm-stat{background:rgba(255,255,255,.02);border:1px solid rgba(201,168,76,.08);padding:12px 16px;border-radius:var(--radius-sm)}
.cm-stat-label{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--oro-viejo);text-transform:uppercase;margin-bottom:4px}
.cm-stat-val{font-size:13px;color:var(--pergamino);font-family:'Newsreader',serif}
.cm-quote{border-left:2px solid var(--oro-sombra);padding:12px 20px;margin:20px 0;font-style:italic;color:var(--plata);font-size:14px;line-height:1.7;background:rgba(201,168,76,.03);font-family:'Newsreader',serif}
#char-close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--plata);font-size:20px;cursor:pointer;font-family:'Cinzel',serif;transition:color .2s;z-index:10}
#char-close:hover{color:var(--oro-vela)}
@media(max-width:600px){
  .cm-header{flex-direction:column;padding:28px 24px 20px}
  .cm-body{padding:20px 24px 32px}
  .cm-stats{grid-template-columns:1fr}
  .cm-name{font-size:1.3rem}
}

/* Sombrero Seleccionador — pedido explícito de Rodrigo (19-jul): la escena
   sombrero-seleccionador.webp pasa de retrato chico a FONDO DE PANTALLA
   COMPLETA con viñeta, y el sombrero (la imagen misma, no un elemento
   aparte) BAILA — se mece/inclina/brinca. Un solo keyframe en loop de
   1.8s, exactamente el intervalo al que cambian las frases (showNextPhrase
   en app.js), así el vaivén queda audible/visible al ritmo del texto sin
   depender de disparar la animación por JS en cada frase. Imagen sobre-
   dimensionada (112%/-6%) para que rotate/scale nunca revele un borde
   vacío. Solo transform/opacity — el guard de prefers-reduced-motion ya
   existente en showHatThinking() salta directo al resultado y ni siquiera
   crea este overlay. */
#hat-thinking{position:fixed;inset:0;background:#000;z-index:4000;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;animation:fadeIn .5s forwards}
.hat-fullbg-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.hat-fullbg{position:absolute;top:-6%;left:-6%;width:112%;height:112%;object-fit:cover;filter:saturate(1.05) brightness(.8);transform-origin:50% 80%;animation:sombreroBaila 1.8s ease-in-out infinite}
@keyframes sombreroBaila{
  0%{transform:rotate(0deg) translateY(0) scale(1,1)}
  15%{transform:rotate(-7deg) translateY(-16px) scale(.97,1.04)}
  35%{transform:rotate(4deg) translateY(6px) scale(1.03,.96)}
  50%{transform:rotate(-8deg) translateY(-20px) scale(.96,1.05)}
  68%{transform:rotate(6deg) translateY(5px) scale(1.02,.97)}
  85%{transform:rotate(-3deg) translateY(-8px) scale(.99,1.01)}
  100%{transform:rotate(0deg) translateY(0) scale(1,1)}
}
.hat-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 28%,rgba(6,12,20,.55) 72%,rgba(6,12,20,.94) 100%)}
.hat-emoji{font-size:min(34vw,220px);display:flex;align-items:center;justify-content:center;height:100%;width:100%;animation:hatBob 1s ease-in-out infinite}
.hat-box{position:relative;z-index:2;text-align:center;max-width:560px;padding:0 30px 64px}
.hat-phrase{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--oro-claro);min-height:64px;line-height:1.6;letter-spacing:1px;opacity:0;transition:opacity .5s;text-shadow:0 3px 20px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.8)}
.hat-rule{margin-top:26px;width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--oro-viejo),transparent);margin-left:auto;margin-right:auto}
@keyframes hatBob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(5deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 15. Utilidades UI ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--oro-sombra),var(--oro-viejo),var(--oro-claro));z-index:9999;transition:width .1s}
#back-top{position:fixed;bottom:84px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(10,18,28,.9);border:1px solid rgba(201,168,76,.3);color:var(--oro-viejo);font-size:18px;cursor:pointer;z-index:2000;display:none;align-items:center;justify-content:center;transition:all .25s;backdrop-filter:blur(8px)}
#back-top:hover{border-color:var(--oro-vela);color:var(--oro-vela);background:var(--oro-glow);transform:translateY(-3px)}
#back-top.visible{display:flex}
#music-controls{position:fixed;bottom:24px;right:24px;z-index:2000}
#music-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--oro-sombra),var(--oro-viejo));border:none;cursor:pointer;font-size:20px;box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 20px rgba(201,168,76,.2);transition:all .25s;display:flex;align-items:center;justify-content:center}
#music-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 28px rgba(232,181,74,.35)}

/* Toast de compartir — reemplaza alert() pelón. Solo transform/opacity
   (motion-performance), aria-live para lectores de pantalla. */
.share-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);opacity:0;
  background:rgba(10,18,28,.97);border:1px solid var(--oro-viejo);
  color:var(--pergamino);font-family:'Newsreader',serif;font-size:15px;line-height:1.5;
  padding:14px 24px;border-radius:var(--radius-md);max-width:min(88vw,440px);
  text-align:center;z-index:6000;box-shadow:0 12px 40px rgba(0,0,0,.55);
  transition:opacity .25s ease,transform .25s ease;
}
.share-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 16. Reveal por scroll (stagger refinado, 60ms) ---------- */
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(1){transition-delay:0s}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.reveal:nth-child(6){transition-delay:.3s}
.reveal:nth-child(n+7){transition-delay:.36s}

/* ---------- 17. Responsive general ---------- */
@media(max-width:480px){
  .h-title{font-size:2.4rem!important}
  #qmod{padding:32px 20px}
  .spells-grid{grid-template-columns:1fr}
  nav{padding:14px 20px}
  nav.scrolled{padding:10px 20px}
  section{scroll-margin-top:76px}
}

/* Nav en DOS barras en móviles chicos (pedido de Rodrigo): fila 1 = marca,
   fila 2 = idioma + menú. Así ningún botón se encima ni se pierde. */
@media(max-width:480px){
  nav{flex-wrap:wrap;row-gap:8px;padding:10px 16px 8px}
  .nav-brand{width:100%;justify-content:center}
  #lang-mini{margin-left:auto;margin-right:10px}
  .hamburger{margin-right:2px}
  section{scroll-margin-top:118px}
}
@media(max-width:768px){
  section{padding:70px 16px}
}

/* ---------- 18. Accesibilidad — prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #intro-velas{display:none!important}
  .h-eye,.h-title,.h-sub,.h-flag,.h-div,.h-cta,.scroll-hint{opacity:1!important;transform:none!important}
  .h-title{-webkit-mask-image:none!important;mask-image:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .pcard-img{opacity:0}
  .pcard.con-retrato .pcard-img{opacity:1}
}