/* Páginas de cada herramienta (carpeta utilidades/): la herramienta ocupa su propia pantalla */
.hp-h{padding-top:clamp(24px,3.5vw,48px)}
.hp-t{font-size:clamp(32px,6vw,76px);margin-top:clamp(18px,2.6vw,32px);overflow-wrap:anywhere;hyphens:auto}
.hp-h .lead{margin:clamp(12px,1.6vw,20px) 0 0;max-width:60ch}
/* mismo panel azul que antes, pero fijo en la página (sin cabecera ni botón de cerrar) */
.md.md-pg{margin-top:clamp(22px,3vw,36px)}
.md-pg .md-b{padding-top:clamp(18px,2.4vw,28px);border-radius:27px}
@media(max-width:600px){.md-pg .md-b{border-radius:21px}}
/* salida a las otras herramientas */
.hp-otras{margin-top:clamp(22px,3vw,36px)}
.hp-otras p{margin:0 0 12px;font:900 italic clamp(16px,1.5vw,19px)/1.1 var(--fh)}
.hp-otras div{display:flex;flex-wrap:wrap;gap:10px}
.hp-otras a{display:inline-block;padding:10px 18px;border-radius:99px;border:1px solid var(--v-borde,rgba(255,255,255,.5));background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:900 italic 15px/1.1 var(--fh);text-decoration:none;transition:background .25s,color .25s,transform .25s}
.hp-otras a:hover,.hp-otras a:focus-visible{background:#fff;color:var(--azul-f);transform:translateY(-3px)}
.hp-otras a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hp-otras a{transition:none}.hp-otras a:hover{transform:none}}
.md-pg .br{border-top:0;padding-top:0}

/* volver: "Volver a" + sticker "herramientas" (el mismo recurso que usa el menú), igual que en Jueguitos */
.hp-vol{padding:clamp(16px,2.4vw,26px) 0 0}
.hp-vol .volver{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font-family:var(--fh);font-weight:900;font-style:italic;font-size:clamp(14px,1.2vw,16px);line-height:1;color:#fff}
.hp-vol .volver:hover{background:none;color:#fff}
.hp-vol .volver img{display:block;width:clamp(123px,12.2vw,150px);height:auto;filter:var(--st-sombra);transition:rotate .25s ease,scale .25s ease}
.hp-vol .volver:hover img,.hp-vol .volver:focus-visible img{rotate:-4deg;scale:1.1}
.hp-vol .volver:active img{scale:.95}
.hp-vol .volver:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:10px}
.hp-vol+.hp-h{padding-top:clamp(10px,1.6vw,20px)}
@media(prefers-reduced-motion:reduce){.hp-vol .volver img{transition:none}}