/* Menú «Herramientas» del encabezado. El panel se abre en escritorio; en celular el enlace va a /herramientas/.
   Nace oculto: tools-menu.js lo muestra solo si /herramientas/ existe en el servidor. */
.tm-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 500; font-size: 15px; color: #fff; padding: 8px 0;
  text-shadow: 0 1px 10px rgba(4, 20, 39, .55);
}
.tm-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--hivis); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.tm-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.tm-abierto .tm-btn::after { transform: scaleX(1); }
.tm-abierto .tm-btn svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .tm-btn:hover::after { transform: scaleX(1); } }

.site-header.tm-abierto { background: var(--night); box-shadow: 0 1px 0 var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none; }

.tm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: linear-gradient(180deg, var(--night) 0, #06192f 100%);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .32s var(--ease-out), visibility 0s .32s;
}
.tm-abierto .tm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tm-velo {
  position: fixed; inset: 0; z-index: 49; background: rgba(4, 20, 39, .55);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
html.tm-velo-on .tm-velo { opacity: 1; visibility: visible; transition-delay: 0s; }

.tm-in {
  display: grid; grid-template-columns: minmax(300px, 4fr) 9fr; gap: clamp(28px, 4vw, 64px);
  padding: 30px max(var(--gutter), env(safe-area-inset-right, 0px)) 34px max(var(--gutter), env(safe-area-inset-left, 0px));
}
.tm-k { margin: 0 0 14px 22px; font-size: 13px; color: var(--zinc-400); }
.tm-lista { position: relative; display: flex; flex-direction: column; }
.tm-rail { position: relative; padding-left: 22px; }
.tm-rail::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
.tm-marca {
  position: absolute; left: 0; top: 0; width: 7px; height: 44px; border-radius: 4px; background: var(--hivis);
  box-shadow: 0 0 14px rgba(255, 125, 0, .55); transition: transform .34s var(--ease-out), height .34s var(--ease-out);
}
.tm-item {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--zinc-300);
  opacity: 0; transform: translateX(-8px); transition: background-color .2s ease, color .2s ease;
}
.tm-abierto .tm-item { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s var(--ease-out), background-color .2s ease, color .2s ease; }
.tm-abierto .tm-item:nth-child(3) { transition-delay: .03s, .03s, 0s, 0s; }
.tm-abierto .tm-item:nth-child(4) { transition-delay: .06s, .06s, 0s, 0s; }
.tm-abierto .tm-item:nth-child(5) { transition-delay: .09s, .09s, 0s, 0s; }
.tm-abierto .tm-item:nth-child(6) { transition-delay: .12s, .12s, 0s, 0s; }
.tm-item b { display: block; font-family: var(--font-display); font-weight: 620; font-size: 18px; line-height: 1.25; color: #fff; }
.tm-item small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--zinc-400); }
.tm-item.is-on { background: rgba(241, 244, 246, .05); }
.tm-item.is-on small { color: var(--zinc-200); }
.tm-todas { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 16px 0 0 34px; color: var(--hivis-soft); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.tm-todas svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tm-todas:hover svg { transform: translateX(3px); } }

.tm-vista { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); gap: 28px; align-items: center; min-width: 0; }
.tm-marco {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: rgba(241, 244, 246, .04); border: 1px solid var(--hair);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .8);
}
.tm-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .3s ease, transform .6s var(--ease-out); }
.tm-marco img.is-on { opacity: 1; transform: none; }
.tm-info { display: none; }
.tm-info.is-on { display: block; animation: tm-sube .34s var(--ease-out); }
.tm-info h3 { margin: 0 0 8px; font-family: var(--font-display); font-stretch: 112%; font-weight: 620; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.tm-info p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--zinc-200); }
.tm-rasgos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.tm-rasgos li { padding: 3px 9px; border: 1px solid var(--hair); border-radius: 99px; font-size: 12.5px; color: var(--zinc-300); }
.tm-info .btn { white-space: nowrap; }
@keyframes tm-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1240px) { .tm-vista { grid-template-columns: 1fr; gap: 16px; } .tm-marco { aspect-ratio: auto; height: 230px; } }
@media (max-width: 1080px) { .tm-panel, .tm-velo { display: none; } }
@media (max-height: 760px) { .tm-in { padding-top: 18px; padding-bottom: 20px; } .tm-item { padding-top: 7px; padding-bottom: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .tm-panel, .tm-item, .tm-marca, .tm-marco img, .tm-velo, .tm-btn svg, .tm-btn::after { transition: none !important; }
  .tm-panel, .tm-item, .tm-marco img { transform: none !important; }
  .tm-info.is-on { animation: none; }
}