/* =========================================================
   HOCICOS DULCES · Ficha de raza (raza/<id>.html)
   A juego con la portada: héroe oscuro y cálido con la foto
   de la raza desenfocada de fondo, el nombre que sube palabra
   a palabra, cifras que cuentan y la foto en pila. El
   movimiento lo pone assets/js/pagina-raza.js; sin JS o con
   movimiento reducido todo se ve completo y quieto.
   Clonado del de Michipedia y recoloreado al naranja de casa.
   ========================================================= */

/* ---------- héroe ---------- */
.rh{position:relative;overflow:hidden;isolation:isolate;color:#fdf4ea;
  padding:calc(var(--nav-h) + 22px) 0 34px;margin-bottom:10px;
  background:radial-gradient(120% 90% at 70% 30%,#2a1c10 0%,#1a110a 55%,#0d0906 100%)}
.rh-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* la propia foto, muy desenfocada: cada raza tiñe su héroe de su color */
.rh-luz{position:absolute;inset:-12%;background-size:cover;background-position:center;
  filter:blur(60px) saturate(1.3);opacity:.4;transform:scale(1.1);transition:background-image .8s}
.rh-luz::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,9,6,.92) 0%,rgba(13,9,6,.55) 55%,rgba(13,9,6,.32) 100%)}
.rh-aurora i{position:absolute;border-radius:50%;will-change:transform}
.rh-aurora i:nth-child(1){width:60vmax;height:60vmax;left:-22vmax;top:-26vmax;
  background:radial-gradient(closest-side,rgba(239,108,31,.42),transparent);animation:rhA1 20s ease-in-out infinite alternate}
.rh-aurora i:nth-child(2){width:50vmax;height:50vmax;right:-18vmax;bottom:-28vmax;
  background:radial-gradient(closest-side,rgba(255,162,61,.28),transparent);animation:rhA2 24s ease-in-out infinite alternate}
@keyframes rhA1{to{transform:translate(16vmax,12vmax) scale(1.15)}}
@keyframes rhA2{to{transform:translate(-14vmax,-10vmax) scale(1.2)}}
.rh-grano{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* el nombre gigante en hueco, que pasa despacio por detrás */
.rh-eco{position:absolute;left:0;bottom:118px;z-index:-1;display:flex;width:max-content;pointer-events:none;
  font:800 clamp(5rem,15vw,13rem)/1 var(--head);letter-spacing:-.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,200,150,.07);animation:rhEco 60s linear infinite}
.rh-eco span{padding-right:.3em}
@keyframes rhEco{to{transform:translateX(-50%)}}

.rh-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;
  width:min(1280px,94vw)}

/* texto */
.rh-migas{font-size:.84rem;color:rgba(253,244,234,.62);margin-bottom:18px}
.rh-migas a{color:rgba(253,244,234,.82);text-decoration:none}
.rh-migas a:hover{color:#fff;text-decoration:underline}
.rh-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:7px 15px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:.82rem;font-weight:700;color:#ffd9b8;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rh-kicker::before{content:"";width:7px;height:7px;border-radius:99px;background:#ff9a4d;box-shadow:0 0 0 0 rgba(255,154,77,.7);animation:rhPing 2.2s infinite}
@keyframes rhPing{70%{box-shadow:0 0 0 9px rgba(255,154,77,0)}100%{box-shadow:0 0 0 0 rgba(255,154,77,0)}}
.rh-h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:0 0 12px;color:#fff}
.rh-p{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.rh-p > span{display:inline-block}
.rh-p:last-child > span{background:linear-gradient(100deg,#ff8a3d 0%,#ffb066 30%,#ffe0c0 55%,#ff8a3d 80%,#ffb066 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rhFlujo 9s linear infinite}
.rh-p:only-child > span{background:none;color:#fff;-webkit-background-clip:border-box;background-clip:border-box;animation:none}
@keyframes rhFlujo{to{background-position:-250% 0}}
.rh-apod{margin:0 0 14px;font:600 italic clamp(1.05rem,1.8vw,1.3rem)/1.3 var(--body);color:#ffcf9b}
.rh-alt{margin:0 0 20px;font-size:.9rem;color:#d9c3ad;max-width:560px}
.rh-alt b{color:#f2e4d5}
.rh-acc{margin:0}
.rh .btn-ghost{background:rgba(255,255,255,.08);color:#f7ece2;border-color:rgba(255,255,255,.22)}
.rh .btn-ghost:hover{background:#f7ece2;color:#2a1808;border-color:#f7ece2}

/* foto: se ve entera, sin recortar, con dos fotos más en pila detrás */
.rh-media{display:flex;flex-direction:column;align-items:center;min-width:0}
.rh-marco{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:clamp(260px,46vh,500px)}
.rh-foto{position:relative;z-index:2;margin:0;border-radius:var(--r-xl);overflow:hidden;max-width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);background:#2a1c10}
.rh-foto img{display:block;width:auto;height:auto;max-width:100%;max-height:min(56vh,520px);
  transition:opacity .45s var(--ease),scale 7s linear}
.rh-foto img.vivo{scale:1.05}
.rh-foto img.cambia{opacity:0}
.rh-carta{position:absolute;z-index:1;width:62%;aspect-ratio:4/5;border-radius:var(--r-xl);
  background-size:cover;background-position:center;opacity:.55;filter:saturate(.8) brightness(.7);
  box-shadow:0 20px 50px rgba(0,0,0,.45);transition:transform .8s var(--ease)}
.rh-carta-1{transform:translate(-30%,4%) rotate(-9deg)}
.rh-carta-2{transform:translate(30%,-3%) rotate(8deg)}
.rh-marco:hover .rh-carta-1{transform:translate(-38%,4%) rotate(-13deg)}
.rh-marco:hover .rh-carta-2{transform:translate(38%,-3%) rotate(12deg)}

.rh .gal{display:flex;flex-wrap:wrap;justify-content:center;padding:18px 0 0;max-width:100%;gap:8px}
.rh .gal img{width:64px;height:48px;object-fit:cover;border-radius:12px;border:2px solid transparent;opacity:.6;
  cursor:pointer;transition:opacity .25s,border-color .25s,transform .25s var(--ease)}
.rh .gal img:hover{opacity:1;transform:translateY(-2px)}
.rh .gal img.on{opacity:1;border-color:#ff9a4d}
.rh .foto-cred{margin:10px 0 0;text-align:center;font-size:.7rem;color:rgba(253,244,234,.55);max-width:520px}
.rh .foto-cred a{color:rgba(253,244,234,.75)}
.rh .foto-cred a:hover{color:#fff}

/* cuatro cifras: tarjetas de cristal al pie del héroe */
.rh-cifras.ficha-top{position:relative;z-index:3;display:grid;width:min(1280px,94vw);margin:34px auto 0;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rh-cifras .fx{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:var(--r-l);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:4px;transition:border-color .3s,background .3s,box-shadow .35s var(--ease)}
.rh-cifras .fx:hover{border-color:#ff9a4d;background:rgba(239,108,31,.1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.rh-cifras .fx b{color:#fff;font-size:clamp(1.35rem,2.4vw,1.9rem);font-variant-numeric:tabular-nums;line-height:1.05}
.rh-cifras .fx i{color:#ffcf9b;font-style:normal;font-size:.82rem}
.rh-cifras .fx-ic{color:#ffb877;opacity:.7}
.rh-cifras .fx-ic svg{width:24px;height:24px}

/* entrada del héroe: solo si el script de la sección puso .anim */
.rh.anim .rh-p > span{transform:translateY(112%) rotate(6deg);transform-origin:0 100%;
  transition:transform 1s var(--ease) calc(.12s + var(--i) * .1s)}
.rh.anim.listo .rh-p > span{transform:none}
.rh.anim .rh-migas,.rh.anim .rh-kicker,.rh.anim .rh-apod,.rh.anim .rh-alt,.rh.anim .rh-acc,.rh.anim .rh-cifras .fx{
  opacity:0;translate:0 20px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.rh.anim .rh-apod{transition-delay:.45s}
.rh.anim .rh-alt{transition-delay:.55s}
.rh.anim .rh-acc{transition-delay:.65s}
.rh.anim .rh-cifras .fx{transition-delay:calc(.7s + var(--i) * .08s)}
.rh.anim.listo .rh-migas,.rh.anim.listo .rh-kicker,.rh.anim.listo .rh-apod,.rh.anim.listo .rh-alt,
.rh.anim.listo .rh-acc,.rh.anim.listo .rh-cifras .fx{opacity:1;translate:0 0}
.rh.anim .rh-media{opacity:0;scale:.92;transition:opacity 1.3s var(--ease) .2s,scale 1.5s var(--ease) .2s}
.rh.anim.listo .rh-media{opacity:1;scale:1}
/* dentro del héroe las cifras las manda .listo, no el .rv de app.js */
.rh-cifras .rv{opacity:1;translate:0 0}

/* ---------- cuerpo de la ficha ---------- */
/* números de sección delante de cada título */
.pag-raza .rz-cont{counter-reset:sec}
.pag-raza .rz-cont h2[id^="s-"]{counter-increment:sec;position:relative;font-size:clamp(1.45rem,2.6vw,1.9rem);letter-spacing:-.03em}
.pag-raza .rz-cont h2[id^="s-"]::before{content:counter(sec,decimal-leading-zero);display:block;width:max-content;margin-bottom:8px;
  padding:3px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand-txt);
  font:800 .74rem/1.4 var(--head);letter-spacing:.04em}

/* ---------- tablet y móvil ---------- */
@media(max-width:899px){
  .rh{padding:calc(var(--nav-h) + 14px) 0 26px}
  .rh-wrap{grid-template-columns:minmax(0,1fr);gap:22px}
  .rh-marco{min-height:0}
  .rh-foto img{max-height:min(52vh,440px)}
  .rh-carta{width:56%}
  .rh-cifras.ficha-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
  .rh-eco{bottom:auto;top:46%}
}
@media(max-width:560px){
  .rh-h1{font-size:clamp(2.2rem,11vw,3rem)}
  .rh-kicker{font-size:.74rem;padding:6px 12px}
  .rh-alt{font-size:.84rem}
  .rh-acc .btn{padding:10px 16px;font-size:.88rem}
  .rh-cifras .fx{padding:14px 14px 12px}
  .rh-cifras .fx b{font-size:1.15rem}
  .rh-cifras .fx-ic svg{width:20px;height:20px}
  .rh .gal img{width:52px;height:40px}
}

/* ---------- movimiento reducido: todo quieto y visible ---------- */
@media(prefers-reduced-motion:reduce){
  .rh-aurora i,.rh-eco,.rh-kicker::before,.rh-p:last-child > span{animation:none}
  .rh-foto img,.rh-foto img.vivo{transition:none;scale:1}
  .rh-carta{transition:none}
}

/* nombres largos y paréntesis del nombre */
.rh-h1.largo{font-size:clamp(2.2rem,5.2vw,4.4rem)}
.rh-par{display:block;margin-top:8px;font:700 clamp(1.1rem,2.2vw,1.7rem)/1.2 var(--head);letter-spacing:-.02em;color:#d9c3ad}
.rh.anim .rh-par{opacity:0;translate:0 14px;transition:opacity .9s var(--ease) .4s,translate .9s var(--ease) .4s}
.rh.anim.listo .rh-par{opacity:1;translate:0 0}
@media(max-width:560px){.rh-h1.largo{font-size:clamp(1.9rem,9vw,2.5rem)}}
@media(prefers-reduced-motion:reduce){.rh.anim .rh-par{opacity:1;translate:0 0;transition:none}}

/* botón de Pinterest dentro del héroe oscuro (lo mete tools/inyectar-pines.js) */
.rh-acc .pin-guardar{background:rgba(255,255,255,.07);color:#f7ece2;border:1px solid rgba(255,255,255,.18)}
.rh-acc .pin-guardar:hover{background:#e60023;border-color:#e60023;color:#fff}