/* Herramientas gratis (/tools/ y /es/herramientas/) — lenguaje Zephyr del tema sobre el HTML de cada herramienta.
   Todo cuelga de una clase raíz hr-: .hr-titulo (título de página), .hr-herramienta (contenido de cada herramienta),
   .hr-herrs / .hr-estudio / .hr-pasos (centro). La hoja vieja de las herramientas (selectores .lwt …) ya no se carga:
   la quita lwt_hr_filtrar_contenido() (inc/paginas/herramientas.php). Las clases internas (.panel, .field, .lwt-*)
   son las que usan whatsapp.js, checker.js y privacy.js: no se renombran.
   Estados con la tríada de DESIGN.md (fondo tenue + texto + borde); solo se anima transform y opacity. */

/* ==================== Título de página ==================== */
.hr-titulo:has(.hr-migas) { padding-top: 48px; }
.hr-migas { margin-bottom: 42px; }
.hr-migas .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 500 14px/18px var(--archivo); color: var(--gris); }
.hr-migas .crumbs a { color: var(--gris); text-decoration: none; }
.hr-migas .crumbs a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.hr-migas .crumbs i { font-style: normal; opacity: .5; }
.hr-migas .crumbs span { color: var(--tinta); }
.hr-titulo .ptitulo__grande em { display: block; max-width: 640px; margin-top: 16px; font: 500 40px/46px var(--archivo); letter-spacing: -.8px; color: var(--gris); font-style: normal; }
.hr-titulo .ptitulo__texto strong { font-weight: 600; }
.hr-titulo .ptitulo__botones .btn--claro { box-shadow: inset 0 0 0 1px rgba(7, 7, 28, .14); }

.hr-confianza { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hr-confianza li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; background: var(--crema2); font: 500 14px/18px var(--archivo); color: var(--tinta); }
.hr-confianza li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }

/* Formulario del revisor dentro del título: campo claro con el botón adentro, como el boletín del pie. */
.hr-titulo .hform { position: relative; margin-top: 28px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 18px; border: 1px solid #c9c3b1; border-radius: 16px; background: var(--claro); }
.hr-titulo .hform:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(8, 8, 80, .12); }
.hr-titulo .hform label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hr-titulo .hform input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; outline: 0; font: 500 16px/22px var(--archivo); color: var(--tinta); }
.hr-titulo .hform input::placeholder { color: #8b8678; }
.hr-titulo .hform .btn { flex: none; justify-content: center; padding: 14px 20px; border: 0; border-radius: 12px; background: var(--negro); color: #fff; font: 500 15px/18px var(--archivo); cursor: pointer; }
.hr-titulo .hform .btn[disabled] { opacity: .6; cursor: progress; }
.hr-titulo .hnote { margin-top: 12px; font: 500 14px/20px var(--switzer); color: var(--gris); }

/* ==================== Herramienta ==================== */
.hr-herramienta {
	--ok: #0b7a4b; --ok-f: #e6f5ed; --ok-b: #c2e4d2;
	--warn: #8f5200; --warn-f: #fcf2e3; --warn-b: #f1dcb8;
	--bad: #c0243a; --bad-f: #fcecee; --bad-b: #f4ccd3;
	--neutro: #5b5869; --neutro-f: #efeef4; --neutro-b: #e1dfea;
	--apag: #595959; --tinta2: #34344a; --hr-linea: rgba(7, 7, 28, .14);
}
.hr-herramienta .lwt { font: 500 16px/22px var(--switzer); color: var(--tinta); }
.hr-herramienta [hidden] { display: none !important; }
.hr-herramienta :focus-visible { outline-color: var(--azul); }
.hr-herramienta .w { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 40px; }
.hr-herramienta :is(.app, .sec, .puente, .proc, .faq, .cierre) { padding: 140px 0 0; }
.hr-herramienta .app { padding-top: 100px; }
.hr-herramienta :is(p, li, small, .a) > a:not(.btn) { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.hr-herramienta .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hr-herramienta .lwt code { padding: 1px 6px; border-radius: 6px; background: rgba(7, 7, 28, .06); font: 500 .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: inherit; }

/* Títulos de sección del contenido: punto + etiqueta (como .sub) y el H2 grande. */
.hr-herramienta .eyb { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 500 18px/20px var(--archivo); color: var(--tinta); }
.hr-herramienta .eyb::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: none; }
.hr-herramienta :is(.shead, .psticky, .fgrid, .cwrap) h2 { font: 500 52px/58px var(--archivo); letter-spacing: -1.2px; color: var(--tinta); }
.hr-herramienta p.sub { display: block; max-width: 560px; margin-top: 16px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.hr-herramienta .shead { max-width: 920px; margin-bottom: 64px; }
.hr-herramienta h3 { font: 600 20px/24px var(--archivo); letter-spacing: -.2px; color: var(--tinta); }

/* Botones del contenido (píldora del tema; el de WhatsApp conserva su verde). */
.hr-herramienta :is(.app, .cierre) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px; border: 0; border-radius: 100px; background: var(--negro); color: #fff; font: 500 16px/20px var(--archivo); text-decoration: none; cursor: pointer; transition: transform .15s var(--oc), opacity .2s var(--oc); }
.hr-herramienta :is(.app, .cierre) .btn.sm { min-height: 40px; padding: 10px 16px; font-size: 14px; line-height: 18px; }
.hr-herramienta :is(.app, .cierre) .btn.sec { background: var(--claro); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--hr-linea); }
.hr-herramienta :is(.app, .cierre) .btn.b3 { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--hr-linea); }
.hr-herramienta :is(.app, .cierre) .btn.wa { background: #25d366; color: #05301a; }
.hr-herramienta :is(.app, .cierre) .btn[disabled] { opacity: .55; cursor: progress; }
.hr-herramienta :is(.app, .cierre) .btn:active { transform: scale(.97); }
.hr-herramienta .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hr-herramienta .btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- La herramienta: entrada clara, resultado oscuro ---------- */
.hr-herramienta .agrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.hr-herramienta .agrid.uno { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hr-herramienta .panel { position: relative; padding: 32px; border-radius: 16px; background: var(--crema2); }
.hr-herramienta .panel.res { position: sticky; top: 24px; background: var(--negro); color: var(--claro); }
.hr-herramienta .panel.res :focus-visible { outline-color: var(--cian); }
.hr-herramienta .ptitle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 28px; }
.hr-herramienta .ptitle h3 { font: 600 22px/26px var(--archivo); letter-spacing: -.3px; }
.hr-herramienta .pill { flex: none; padding: 5px 10px; border-radius: 100px; background: var(--azul); color: #fff; font: 500 12px/14px var(--archivo); white-space: nowrap; }
.hr-herramienta .panel.res .ptitle h3 { color: var(--claro); }
.hr-herramienta .panel.res .pill { background: rgba(0, 244, 236, .12); color: var(--cian); }
.hr-herramienta .panel.res .btn { background: var(--claro); color: var(--tinta); }
.hr-herramienta .panel.res .btn.sec { background: transparent; color: var(--claro); box-shadow: inset 0 0 0 1px rgba(247, 247, 247, .3); }
.hr-herramienta .panel.res .btn.wa { background: #25d366; color: #05301a; }
.hr-herramienta .panel.res .link-out .btn { background: var(--negro); color: #fff; }

/* Pasos numerados del formulario. */
.hr-herramienta .step { display: flex; align-items: center; gap: 12px; margin: 40px 0 20px; font: 600 18px/22px var(--archivo); color: var(--tinta); }
.hr-herramienta :is(.ptitle + .step, form > .step:first-child) { margin-top: 0; }
.hr-herramienta .step b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font: 500 12px/1 var(--archivo); }

/* Campos con línea inferior (como el formulario de contacto de Zephyr). */
.hr-herramienta .field { margin: 0 0 24px; }
.hr-herramienta .field > label, .hr-herramienta .lwt-report label { display: block; margin-bottom: 4px; font: 500 14px/18px var(--archivo); color: var(--gris); }
.hr-herramienta .field small { display: block; margin-top: 8px; font: 500 13px/18px var(--switzer); color: var(--gris); }
.hr-herramienta .app :is(input[type=text], input[type=url], input[type=email], input[type=tel], select, textarea) {
	width: 100%; padding: 8px 0 10px; border: 0; border-bottom: 1px solid rgba(7, 7, 28, .32); border-radius: 0; background: transparent;
	font: 500 16px/22px var(--archivo); color: var(--tinta); outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.hr-herramienta .app :is(input, select, textarea):focus { border-bottom-color: var(--azul); box-shadow: 0 1px 0 0 var(--azul); }
.hr-herramienta .app :is(input, textarea)::placeholder { color: #8b8678; }
.hr-herramienta .app textarea { min-height: 96px; resize: vertical; }
.hr-herramienta .app select { padding-right: 28px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 14px; }
.hr-herramienta .app input[type=color] { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--hr-linea); border-radius: 12px; background: var(--crema); cursor: pointer; }
.hr-herramienta .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.hr-herramienta .row-num { display: grid; grid-template-columns: minmax(150px, 42%) minmax(0, 1fr); gap: 16px; }

/* Opciones en píldora: la elegida, oscura. */
.hr-herramienta .radios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hr-herramienta .radios label { position: relative; flex: 1; min-width: 120px; min-height: 44px; display: grid; place-items: center; padding: 10px 14px; border-radius: 100px; background: var(--crema); box-shadow: inset 0 0 0 1px var(--hr-linea); font: 500 15px/18px var(--archivo); color: var(--tinta); text-align: center; cursor: pointer; }
.hr-herramienta .radios input { position: absolute; opacity: 0; pointer-events: none; }
.hr-herramienta .chk { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-herramienta .chk label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 8px 14px; border-radius: 100px; background: var(--crema); box-shadow: inset 0 0 0 1px var(--hr-linea); font: 500 14px/18px var(--archivo); color: var(--tinta); cursor: pointer; }
.hr-herramienta .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); }
.hr-herramienta :is(.radios, .chk) label:has(input:checked) { background: var(--negro); color: #fff; box-shadow: none; }
.hr-herramienta .chk label:has(input:checked) input { accent-color: var(--cian); }
.hr-herramienta :is(.radios, .chk) label:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Resultado (panel oscuro). */
.hr-herramienta .rh { display: flex; align-items: center; gap: 8px; margin: 32px 0 12px; font: 500 14px/18px var(--archivo); color: var(--gris2); }
.hr-herramienta .rh::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cian); flex: none; }
.hr-herramienta .ptitle + .rh { margin-top: 0; }
.hr-herramienta .link-out { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--crema); font: 500 15px/20px var(--archivo); color: var(--tinta); }
.hr-herramienta .link-out a { flex: 1; min-width: 0; color: var(--azul); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; word-break: break-all; }
.hr-herramienta .link-out a:not([href]) { color: var(--gris); }
.hr-herramienta .qrrow { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--crema); }
.hr-herramienta #wa-qr { width: 164px; min-height: 164px; padding: 8px; border-radius: 8px; display: grid; place-items: center; background: #fff; }
.hr-herramienta #wa-qr:empty { background: rgba(7, 7, 28, .05); }
.hr-herramienta #wa-qr :is(img, canvas) { max-width: 100%; height: auto; }
.hr-herramienta .qrrow p { font: 500 14px/20px var(--switzer); color: var(--gris); }
.hr-herramienta .lwt-prev { position: relative; height: 260px; overflow: hidden; border-radius: 12px; background: var(--crema); }
.hr-herramienta .lwt-prev .fake { padding: 20px; }
.hr-herramienta .lwt-prev .fake i { display: block; height: 10px; margin: 0 0 12px; border-radius: 6px; background: rgba(7, 7, 28, .09); }
.hr-herramienta .lwt-prev .fake i:nth-child(1) { width: 38%; height: 16px; margin-bottom: 18px; }
.hr-herramienta .lwt-prev .fake i:nth-child(2) { width: 82%; }
.hr-herramienta .lwt-prev .fake i:nth-child(3) { width: 64%; }
.hr-herramienta .lwt-prev .fake i:nth-child(4) { width: 72%; }
.hr-herramienta .lwt-prev .lw-wa { position: absolute; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 100px; color: #fff; font: 600 15px/1 var(--archivo); text-decoration: none; box-shadow: 0 8px 22px rgba(5, 5, 26, .22); }
.hr-herramienta .lwt-prev .lw-wa svg { width: 26px; height: 26px; flex: none; }
.hr-herramienta .out { position: relative; max-height: 340px; overflow: auto; margin-top: 12px; padding: 54px 16px 16px; border: 1px solid rgba(247, 247, 247, .1); border-radius: 12px; background: #0e0e2c; color: #d6dae3; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.hr-herramienta .out code { padding: 0; background: none; font: inherit; }
.hr-herramienta .out .copy { position: absolute; top: 10px; right: 10px; }
.hr-herramienta .note { margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--azul); border-radius: 0 10px 10px 0; background: var(--crema); font: 500 14px/20px var(--switzer); color: var(--tinta2); }
.hr-herramienta .panel.res .note { background: rgba(247, 247, 247, .05); border-left-color: var(--cian); color: #c9c9d6; }
.hr-herramienta .panel.res .note code { background: rgba(247, 247, 247, .1); }
.hr-herramienta .warnbox { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--warn-b); border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; background: var(--warn-f); font: 500 14px/20px var(--switzer); color: var(--warn); }
.hr-herramienta .panel.res .warnbox { background: rgba(241, 220, 184, .08); border-color: rgba(241, 220, 184, .26); border-left-color: var(--warn-b); color: var(--warn-b); }
.hr-herramienta .only-m { display: none; }

/* Revisor: estado vacío, carga (esqueleto con la forma del resultado, no un spinner) y resultado. */
.hr-herramienta .lwt-empty { padding: 36px 12px; text-align: center; color: var(--gris2); }
.hr-herramienta .lwt-empty svg { width: 56px; height: 56px; margin: 0 auto 14px; opacity: .6; }
.hr-herramienta .lwt-empty p { max-width: 36ch; margin: 0 auto; font: 500 15px/22px var(--switzer); }
.hr-herramienta .lwt-spin { display: grid; gap: 12px; animation: hr-pulso 1s var(--oqd) infinite alternate; }
.hr-herramienta .lwt-spin::before, .hr-herramienta .lwt-spin::after { content: ''; display: block; border-radius: 12px; }
.hr-herramienta .lwt-spin::before { height: 168px; background: radial-gradient(circle at 84px 50%, rgba(247, 247, 247, .13) 0 54px, transparent 55px), linear-gradient(rgba(247, 247, 247, .11), rgba(247, 247, 247, .11)) 172px 60px / 42% 14px no-repeat, linear-gradient(rgba(247, 247, 247, .08), rgba(247, 247, 247, .08)) 172px 90px / 28% 12px no-repeat, rgba(247, 247, 247, .05); }
.hr-herramienta .lwt-spin::after { height: 268px; background: repeating-linear-gradient(180deg, rgba(247, 247, 247, .06) 0 52px, transparent 52px 64px); }
@keyframes hr-pulso { from { opacity: .45; } to { opacity: 1; } }
.hr-herramienta .lwt-score { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 12px; padding: 18px; border-radius: 12px; background: var(--crema); color: var(--tinta); }
.hr-herramienta .lwt-ring { --p: 0; position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c, var(--ok)) calc(var(--p) * 1%), rgba(7, 7, 28, .1) 0); }
.hr-herramienta .lwt-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--crema); }
.hr-herramienta .lwt-ring b { position: relative; font: 600 34px/1 var(--archivo); letter-spacing: -1px; color: var(--tinta); }
.hr-herramienta .lwt-ring b small { font: 500 14px/1 var(--archivo); letter-spacing: 0; color: var(--gris); }
.hr-herramienta .lwt-score h3 { font: 600 18px/22px var(--archivo); color: var(--tinta); word-break: break-all; }
.hr-herramienta .lwt-meta { font: 500 14px/20px var(--switzer); color: var(--gris); }
.hr-herramienta .lwt-meta b { font-weight: 600; color: var(--tinta); }
.hr-herramienta .lwt-groups { display: grid; gap: 12px; }
.hr-herramienta .lwt-score + .warnbox { margin: 0 0 12px; }
.hr-herramienta .lwt-group { padding: 16px 18px; border-radius: 12px; background: var(--crema); color: var(--tinta); }
.hr-herramienta .lwt-group h4 { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 16px/20px var(--archivo); color: var(--tinta); }
.hr-herramienta .lwt-group h4 span { padding: 4px 10px; border-radius: 100px; background: var(--crema2); font: 500 12px/14px var(--archivo); color: var(--gris); }
.hr-herramienta .lwt-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid rgba(7, 7, 28, .08); font: 500 14px/20px var(--switzer); }
.hr-herramienta .lwt-item:first-of-type { border-top: 0; }
.hr-herramienta .lwt-item i { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: normal 700 11px/1 var(--archivo); }
.hr-herramienta .lwt-item.ok i { background: var(--ok-f); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-b); }
.hr-herramienta .lwt-item.bad i { background: var(--bad-f); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-b); }
.hr-herramienta .lwt-item.na i { background: var(--neutro-f); color: var(--neutro); box-shadow: inset 0 0 0 1px var(--neutro-b); }
.hr-herramienta .lwt-item b { font: 600 15px/20px var(--archivo); color: var(--tinta); }
.hr-herramienta .lwt-item small { display: block; margin-top: 2px; font: 500 13px/19px var(--switzer); color: var(--gris); }
.hr-herramienta .lwt-report .row2 { align-items: end; }

/* Política generada: una hoja clara sobre el panel oscuro. */
.hr-herramienta .lwt-doc { max-height: 600px; overflow: auto; padding: 28px 30px; border-radius: 12px; background: var(--crema); font: 500 15px/23px var(--switzer); color: var(--tinta2); }
.hr-herramienta .lwt-doc h2 { margin: 0 0 6px; font: 600 22px/26px var(--archivo); letter-spacing: -.3px; color: var(--tinta); }
.hr-herramienta .lwt-doc h3 { margin: 22px 0 6px; font: 600 16px/20px var(--archivo); color: var(--tinta); }
.hr-herramienta .lwt-doc p { margin: 0 0 10px; }
.hr-herramienta .lwt-doc ul { margin: 0 0 10px; padding-left: 20px; }
.hr-herramienta .lwt-doc li { margin: 3px 0; }
.hr-herramienta .lwt-doc em { color: var(--gris); }

/* ---------- Secciones bajo la herramienta ---------- */
.hr-herramienta .dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hr-herramienta .card { position: relative; padding: 28px; border-radius: 16px; background: var(--crema2); }
.hr-herramienta .dol { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.hr-herramienta .bi { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--azul); color: var(--cian); }
.hr-herramienta .dol p { max-width: 560px; margin-top: 10px; font: 500 16px/22px var(--switzer); color: var(--gris); }
@media (hover: hover) and (pointer: fine) {
	.hr-herramienta .card.lift { transition: transform .3s var(--oc); }
	.hr-herramienta .card.lift:hover { transform: translateY(-3px); }
	.hr-herramienta :is(.app, .cierre) .btn:hover { opacity: .86; }
}

/* Cifras del estudio: columnas con filete, como las del Estudio del inicio (no tarjetas). */
.hr-herramienta .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.hr-herramienta .stat { display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid var(--hr-linea); }
.hr-herramienta .stat small { order: -1; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font: 500 14px/18px var(--archivo); color: var(--tinta); }
.hr-herramienta .stat small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }
.hr-herramienta .stat b { font: 500 74px/80px var(--archivo); letter-spacing: -1.5px; color: var(--tinta); }
.hr-herramienta .stat b em { font-style: normal; color: var(--gris); }
.hr-herramienta .stat span { max-width: 360px; margin-top: 12px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.hr-herramienta .fuente { max-width: 760px; margin-top: 36px; font: 500 14px/20px var(--switzer); color: var(--gris); }

/* Pasos: las tarjetas oscuras del Proceso del inicio (resplandor y giro de sitio.js vía data-paso). */
.hr-herramienta .pgrid { display: block; }
.hr-herramienta .psticky { max-width: 920px; margin-bottom: 64px; }
.hr-herramienta .pgrid > div:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; perspective: 1200px; }
.hr-herramienta .paso { min-height: 340px; gap: 72px; }
.hr-herramienta .paso .n { position: relative; z-index: 1; font: 500 24px/28px var(--archivo); color: #fff; }
.hr-herramienta .paso > div:not(.n) { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hr-herramienta .paso h3 { font: 600 20px/22px var(--archivo); letter-spacing: 0; color: #fff; }
.hr-herramienta .paso p { font: 500 16px/22px var(--switzer); color: #fff; }
.hr-herramienta .paso p > a:not(.btn), .hr-pasos .paso__texto a { color: var(--cian); text-decoration: underline; text-underline-offset: 3px; }
.hr-herramienta .paso .dur, .hr-dur { align-self: flex-start; padding: 6px 12px; border-radius: 100px; background: rgba(0, 244, 236, .1); font: 500 13px/16px var(--archivo); color: var(--cian); }

/* Preguntas: el acordeón del tema sobre <details> (sin JS). */
.hr-herramienta .fgrid { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.hr-herramienta .fgrid > div:first-child { max-width: 420px; }
.hr-herramienta .fgrid h2 { font-size: 64px; line-height: 70px; letter-spacing: -1.5px; }
.hr-herramienta .fgrid > div:last-child { width: 100%; max-width: 780px; display: flex; flex-direction: column; gap: 12px; counter-reset: hr-faq; }
.hr-herramienta .qa { border-radius: 12px; background: var(--crema2); }
.hr-herramienta .qa summary { display: flex; align-items: center; gap: 20px; padding: 22px; list-style: none; cursor: pointer; font: 600 18px/20px var(--archivo); letter-spacing: -.2px; color: var(--tinta); counter-increment: hr-faq; }
.hr-herramienta .qa summary::-webkit-details-marker { display: none; }
.hr-herramienta .qa summary::before { content: counter(hr-faq); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font: 400 12px/12px var(--archivo); }
.hr-herramienta .qa summary::after { content: ''; flex: none; width: 40px; height: 40px; margin-left: auto; background: linear-gradient(var(--tinta), var(--tinta)) center / 20px 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 20px no-repeat; transition: transform .3s var(--oc); }
.hr-herramienta .qa[open] summary::after { background: linear-gradient(var(--tinta), var(--tinta)) center / 20px 2px no-repeat; transform: rotate(180deg); }
.hr-herramienta .qa .a { padding: 0 22px 22px 62px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.hr-herramienta .qa .a p { max-width: 680px; }
.hr-herramienta .qa[open] .a { animation: hr-aparece .3s var(--oc); }
@keyframes hr-aparece { from { opacity: 0; transform: translateY(-4px); } }

/* Cierre: caja crema (el pie ya es la caja oscura) con la lista de otras herramientas en filas con flecha. */
.hr-herramienta .cierre { padding: 140px 12px 140px; }
.hr-herramienta .cierre > .w { max-width: none; padding: 90px 40px; border-radius: 24px; background: var(--crema2); }
.hr-herramienta .cwrap { max-width: 1620px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; align-items: center; }
.hr-herramienta .cwrap h2 { max-width: 660px; }
.hr-herramienta .cwrap .lead { max-width: 560px; font: 500 20px/28px var(--switzer); color: var(--gris); }
.hr-herramienta .otras { list-style: none; margin: 0; padding: 0; }
.hr-herramienta .otras a { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 40px 18px 0; border-bottom: 1px solid var(--hr-linea); color: var(--tinta); text-decoration: none; }
.hr-herramienta .otras a::after { content: ''; position: absolute; top: 50%; right: 4px; width: 15px; height: 15px; margin-top: -7px; background: currentColor; transition: transform .4s var(--oc);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M11 5L4 12' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.333 4.125s5.365-.452 6.18.362c.814.814.361 6.18.361 6.18' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M11 5L4 12' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.333 4.125s5.365-.452 6.18.362c.814.814.361 6.18.361 6.18' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hr-herramienta .otras .bi { width: 40px; height: 40px; border-radius: 10px; }
.hr-herramienta .otras .bi .ic { width: 20px; height: 20px; }
.hr-herramienta .otras b { display: block; font: 600 16px/20px var(--archivo); }
.hr-herramienta .otras em { display: block; margin-top: 4px; font: normal 500 14px/18px var(--switzer); color: var(--gris); }
@media (hover: hover) and (pointer: fine) { .hr-herramienta .otras a:hover::after { transform: translate(3px, -3px); } }

/* ==================== Centro /tools/ ==================== */
.hr-herrs { padding: 140px 0 0; }
.hr-herrs__rejilla { margin-top: 100px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; }
.hr-herr { display: flex; flex-direction: column; padding: 6px; border-radius: 16px; background: var(--crema2); color: var(--tinta); text-decoration: none; }
.hr-herr--revisor { grid-row: span 2; }
.hr-herr--whatsapp, .hr-herr--privacidad { flex-direction: row; }
.hr-herr__vista { position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(120% 90% at 18% 0%, rgba(36, 36, 159, .9), rgba(8, 8, 80, .45) 46%, rgba(5, 5, 26, 0) 72%), var(--negro); }
.hr-herr--revisor .hr-herr__vista { flex: 1; min-height: 380px; }
.hr-herr--whatsapp .hr-herr__vista, .hr-herr--privacidad .hr-herr__vista { flex: 0 0 42%; min-height: 300px; }
.hr-herr__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 18px 18px; }
.hr-herr__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hr-herr__icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--azul); color: var(--cian); }
.hr-icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hr-herr__gratis { padding: 4px 9px; border-radius: 100px; background: var(--azul); color: #fff; font: 500 12px/14px var(--archivo); }
.hr-herr__nombre { font: 600 24px/28px var(--archivo); letter-spacing: -.4px; }
.hr-herr__texto { max-width: 520px; font: 500 16px/22px var(--switzer); color: var(--gris); }
.hr-herr__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hr-herr__lista li { display: flex; align-items: baseline; gap: 8px; font: 500 15px/20px var(--archivo); }
.hr-herr__lista li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); transform: translateY(-2px); }
.hr-herr__cta { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 10px; font: 500 16px/20px var(--archivo); }
.hr-herr__cta-txt { position: relative; display: block; height: 20px; overflow: hidden; }
.hr-herr__cta-txt > span { display: block; transition: transform .4s var(--oc); }
.hr-herr__cta-txt > span + span { position: absolute; left: 0; top: 100%; }
.hr-herr__cta svg { transition: transform .4s var(--oc); }
.hr-ui { transition: transform .5s var(--oc); }
@media (hover: hover) and (pointer: fine) {
	.hr-herr:hover .hr-herr__cta-txt > span { transform: translateY(-100%); }
	.hr-herr:hover .hr-herr__cta svg { transform: translate(2px, -2px); }
	.hr-herr:hover .hr-ui { transform: scale(1.04); }
}

/* Vistas en miniatura (lo que entrega cada herramienta). */
.hr-ui--revisor { display: flex; align-items: center; gap: 28px; padding: 24px; }
.hr-ui-anillo { position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; }
.hr-ui-anillo::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(var(--cian) 0 23.5%, transparent 0 25%, rgba(0, 244, 236, .7) 0 48.5%, transparent 0 50%, rgba(0, 244, 236, .45) 0 73.5%, transparent 0 75%, rgba(0, 244, 236, .25) 0 98.5%, transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #fff calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #fff calc(100% - 11px)); }
.hr-ui-anillo b { position: relative; font: 600 48px/1 var(--archivo); letter-spacing: -1px; color: #fff; }
.hr-ui-anillo small { position: relative; display: block; margin-top: 4px; font: 500 13px/16px var(--archivo); color: var(--gris2); }
.hr-ui-grupos { display: flex; flex-direction: column; gap: 12px; }
.hr-ui-grupo { display: flex; align-items: center; gap: 10px; font: 500 15px/18px var(--archivo); color: var(--claro); }
.hr-ui-ok { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 244, 236, .14); }
.hr-ui-ok::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--cian); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hr-ui--whatsapp, .hr-ui--privacidad { width: 100%; display: grid; place-items: center; padding: 22px; }
.hr-ui-pagina { position: relative; width: 100%; max-width: 280px; height: 196px; padding: 18px; border-radius: 10px; background: var(--crema); box-shadow: 0 22px 44px -20px rgba(5, 5, 26, .7); }
.hr-ui-pagina i { display: block; height: 8px; margin-bottom: 10px; border-radius: 5px; background: rgba(7, 7, 28, .1); }
.hr-ui-pagina i:nth-child(1) { width: 42%; height: 12px; margin-bottom: 16px; }
.hr-ui-pagina i:nth-child(2) { width: 86%; }
.hr-ui-pagina i:nth-child(3) { width: 68%; }
.hr-ui-pagina i:nth-child(4) { width: 78%; }
.hr-ui-wa { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 9px; border-radius: 100px; background: #25d366; color: #fff; font: 600 13px/1 var(--archivo); box-shadow: 0 8px 18px rgba(5, 5, 26, .25); }
.hr-ui-wa svg { width: 20px; height: 20px; flex: none; }
.hr-ui-doc { width: 100%; max-width: 250px; display: flex; flex-direction: column; padding: 18px 18px 10px; border-radius: 8px; background: var(--crema); box-shadow: 0 22px 44px -20px rgba(5, 5, 26, .7); }
.hr-ui-doc b { margin-bottom: 8px; font: 600 14px/18px var(--archivo); color: var(--tinta); }
.hr-ui-doc__h { margin: 6px 0 5px; font: 600 10px/13px var(--archivo); color: var(--tinta); }
.hr-ui-doc i { display: block; height: 5px; margin-bottom: 5px; border-radius: 3px; background: rgba(7, 7, 28, .12); }
.hr-ui-doc i:nth-of-type(2n) { width: 72%; }

/* Cifras del estudio en el centro. */
.hr-estudio .estudio__der { gap: 36px; }
.hr-estudio__nota { max-width: 640px; font: 500 18px/26px var(--switzer); color: var(--gris); }
.hr-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hr-cifra { padding-top: 22px; border-top: 1px solid rgba(7, 7, 28, .14); }
.hr-cifra__lugar { display: flex; align-items: center; gap: 8px; font: 500 14px/18px var(--archivo); color: var(--tinta); }
.hr-cifra__lugar::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }
.hr-cifra__n { margin-top: 16px; font: 500 52px/58px var(--archivo); letter-spacing: -1px; color: var(--tinta); }
.hr-cifra__t { margin-top: 8px; font: 500 15px/21px var(--switzer); color: var(--gris); }
.hr-fuente { font: 500 14px/20px var(--switzer); color: var(--gris); }
.hr-fuente a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }
.hr-pasos .paso__abajo { gap: 16px; }

/* ==================== Tableta (≤ 991) ==================== */
@media (max-width: 991px) {
	.hr-titulo .ptitulo__grande em { font-size: 32px; line-height: 38px; }
	.hr-herramienta .w { padding: 0 30px; }
	.hr-herramienta .agrid, .hr-herramienta .agrid.uno { grid-template-columns: minmax(0, 1fr); }
	.hr-herramienta .panel.res { position: static; }
	.hr-herramienta .only-m { display: block; }
	.hr-herramienta :is(.shead, .psticky, .cwrap) h2 { font-size: 44px; line-height: 50px; letter-spacing: -1px; }
	.hr-herramienta :is(.shead, .psticky) { margin-bottom: 48px; }
	.hr-herramienta .stat b { font-size: 60px; line-height: 66px; }
	.hr-herramienta .pgrid > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-herramienta .fgrid { flex-direction: column; gap: 40px; }
	.hr-herramienta .fgrid > div:first-child { max-width: none; }
	.hr-herramienta .cwrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.hr-herramienta .cierre { padding: 140px 10px 120px; }
	.hr-herramienta .cierre > .w { padding: 70px 30px; }
	.hr-herrs__rejilla { margin-top: 70px; grid-template-columns: minmax(0, 1fr); }
	.hr-herr--revisor { grid-row: auto; }
	.hr-herr--whatsapp, .hr-herr--privacidad { flex-direction: column; }
	.hr-herr .hr-herr__vista { flex: none; min-height: 280px; }
	.hr-cifras { gap: 24px; }
}

/* ==================== Celular (≤ 767) ==================== */
@media (max-width: 767px) {
	.hr-titulo:has(.hr-migas) { padding-top: 28px; }
	.hr-migas { margin-bottom: 26px; }
	.hr-titulo .ptitulo__grande { font-size: 46px; line-height: 52px; letter-spacing: -.5px; }
	.hr-titulo .ptitulo__grande em { margin-top: 12px; font-size: 24px; line-height: 30px; letter-spacing: -.3px; }
	.hr-titulo .ptitulo__texto { font-size: 18px; line-height: 26px; }
	.hr-confianza { margin-top: 22px; }
	.hr-confianza li { padding: 6px 12px; font-size: 13px; line-height: 16px; }
	.hr-titulo .hform { margin-top: 22px; }
	.hr-herramienta .w { padding: 0 18px; }
	.hr-herramienta :is(.app, .sec, .puente, .proc, .faq) { padding-top: 80px; }
	.hr-herramienta .app { padding-top: 56px; }
	.hr-herramienta :is(.shead, .psticky, .cwrap, .fgrid) h2 { font-size: 34px; line-height: 40px; letter-spacing: -.5px; }
	.hr-herramienta :is(.shead, .psticky) { margin-bottom: 36px; }
	.hr-herramienta .eyb { gap: 8px; font-size: 16px; }
	.hr-herramienta .panel { padding: 22px 18px; border-radius: 12px; }
	.hr-herramienta .step { margin-top: 32px; }
	.hr-herramienta .row2, .hr-herramienta .row-num { grid-template-columns: minmax(0, 1fr); }
	.hr-herramienta .link-out { flex-direction: column; align-items: stretch; padding: 12px; }
	.hr-herramienta .link-out .btn, .hr-herramienta .btnrow .btn { flex: 1 1 auto; }
	.hr-herramienta .qrrow { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.hr-herramienta .lwt-prev { height: 230px; }
	.hr-herramienta .lwt-score { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.hr-herramienta .lwt-doc { max-height: 480px; padding: 22px 18px; }
	.hr-herramienta .dgrid { grid-template-columns: minmax(0, 1fr); }
	.hr-herramienta .card { padding: 22px; border-radius: 12px; }
	.hr-herramienta .dol { gap: 36px; }
	.hr-herramienta .stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.hr-herramienta .stat b { font-size: 56px; line-height: 62px; }
	.hr-herramienta .pgrid > div:last-child { grid-template-columns: minmax(0, 1fr); }
	.hr-herramienta .paso { min-height: 280px; gap: 48px; }
	.hr-herramienta .fgrid { gap: 30px; }
	.hr-herramienta .qa summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: 11px; font-size: 16px; line-height: 20px; }
	.hr-herramienta .qa summary::before { grid-column: 1; grid-row: 1; }
	.hr-herramienta .qa summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
	.hr-herramienta .qa .a { padding: 0 22px 22px; }
	.hr-herramienta .cierre { padding: 80px 7px 80px; }
	.hr-herramienta .cierre > .w { padding: 50px 18px; border-radius: 14px; }
	.hr-herramienta .cwrap .lead { font-size: 18px; line-height: 26px; }
	.hr-herrs { padding-top: 80px; }
	.hr-herrs__rejilla { margin-top: 50px; }
	.hr-herr .hr-herr__vista { min-height: 240px; }
	.hr-herr { border-radius: 12px; }
	.hr-herr__nombre { font-size: 22px; line-height: 26px; }
	.hr-ui--revisor { gap: 18px; padding: 18px; }
	.hr-ui-anillo { width: 120px; height: 120px; }
	.hr-ui-anillo b { font-size: 36px; }
	.hr-ui-anillo small { font-size: 10px; line-height: 12px; letter-spacing: -.1px; }
	.hr-ui-grupo { gap: 8px; font-size: 13px; line-height: 16px; }
	.hr-estudio__nota { font-size: 16px; line-height: 23px; }
	.hr-cifras { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.hr-cifra__n { font-size: 44px; line-height: 50px; }
}

@media (max-width: 479px) {
	.hr-titulo .hform { flex-direction: column; align-items: stretch; padding: 6px; }
	.hr-titulo .hform input { padding: 0 12px; }
	.hr-titulo .hform .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.hr-herramienta .lwt-spin { animation-duration: 2s; }
	.hr-herramienta .qa[open] .a { animation: none; }
	.hr-ui, .hr-herr__cta svg, .hr-herr__cta-txt > span, .hr-herramienta .otras a::after { transition: none; }
}

/* Al imprimir la política queda solo el documento generado. */
@media print {
	.hr-herramienta :is(.hr-titulo, .panel.form, .sec, .puente, .proc, .faq, .cierre) { display: none; }
	.hr-herramienta .panel.res { position: static; background: none; color: inherit; }
	.hr-herramienta .lwt-doc { max-height: none; overflow: visible; }
}