/* ==========================================================================
   Barra de familia v1 (12/10/2026)
   Misma barra en el hub, el blog y las 20 herramientas: mismos enlaces y la
   misma regla de anchura. «Sugerir herramienta» va dentro de la lista de
   enlaces (antes estaba en otro contenedor, sin separación: 0 px frente a
   los 32 px del resto). Se carga la última para ganar a hub/brand.css.
   ========================================================================== */
.hm-nav-links{gap:32px;margin-right:32px;} /* 32 px también hasta el botón o el indicador de la derecha */
.hm-nav-links .hm-nav-suggest{padding:0;font:inherit;color:inherit;}
@media (hover: hover) and (pointer: fine) {
  .hm-nav-links .hm-nav-suggest:hover{color:var(--accent);}}
.hm-btn-short{display:none;}
.hm-nav-left{padding-right:24px;}  /* calle entre el logotipo/miga y el primer enlace */

/* Menú completo solo desde 1440 px (medido: 7 enlaces + botón o indicador
   necesitan ~1330 px de los 1344 útiles a 1440). Por debajo, menú compacto
   con TODOS los enlaces dentro del panel. */
@media (max-width:1439px){
  .hm-nav-links{display:none;}
  .hm-nav-hamburger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);flex-shrink:0;
  }
  .hm-nav-right{gap:8px;}
  .hm-nav-right .hm-btn-ink{padding:10px 16px;font-size:14px;}
  .hm-btn-full{display:none;}
  .hm-btn-short{display:inline;}
  .hm-mobile-panel.is-open{display:block !important;}
}
/* 1440–1599 px: botón corto («Abrir») para que quepa la calle de 32 px. */
@media (min-width:1440px) and (max-width:1599px){
  .hm-btn-full{display:none;}
  .hm-btn-short{display:inline;}
  /* herramientas: el indicador «Sin conexión al servidor» se reduce a su punto (con aria-label) */
  .hm-server-pill{padding:0;width:22px;height:22px;border-radius:50%;justify-content:center;flex-shrink:0;}
  .hm-server-pill-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}
@media (min-width:1440px){
  .hm-nav-hamburger{display:none;}
  .hm-mobile-panel{display:none !important;}
}
/* Páginas con miga (blog y herramientas): entre 1440 y 1679 px la miga no
   cabe junto al menú completo, así que se oculta; el h1 de la página ya
   dice dónde estás. */
@media (min-width:1440px) and (max-width:1679px){
  .hm-crumb-sep,.hm-crumb-current{display:none;}
}

/* ---- Fase 3 (12/10/2026): aparición del mega-menú y del panel móvil -----------------------------
   Propuestas 2 y 3 aprobadas. Entrada con la curva fuerte, salida más corta.
   Si el navegador no entiende @starting-style o allow-discrete, el panel aparece al instante como antes. */
:root{--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);}
.hm-nav-links .caret{transition:transform 160ms var(--ease-out);}

.hm-megamenu{
  opacity:0;transform:translateY(-6px);
  transition:opacity 100ms ease-out,transform 100ms ease-out,display 100ms allow-discrete;
}
.hm-megamenu.is-open{
  opacity:1;transform:none;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),display 160ms allow-discrete;
}
@starting-style{.hm-megamenu.is-open{opacity:0;transform:translateY(-6px);}}

.hm-mobile-panel{
  opacity:0;transform:translateY(-12px);
  transition:opacity 140ms ease-out,transform 140ms ease-out,display 140ms allow-discrete;
}
.hm-mobile-panel.is-open{
  opacity:1;transform:none;
  transition:opacity 240ms var(--ease-drawer),transform 240ms var(--ease-drawer),display 240ms allow-discrete;
}
@starting-style{.hm-mobile-panel.is-open{opacity:0;transform:translateY(-12px);}}

@media (prefers-reduced-motion:reduce){
  .hm-megamenu,.hm-megamenu.is-open,.hm-mobile-panel,.hm-mobile-panel.is-open{transform:none;}
  .hm-nav-links .caret{transition:none;}
  @starting-style{.hm-megamenu.is-open,.hm-mobile-panel.is-open{transform:none;}}
}

/* Cabecera de herramienta: isotipo propio en lugar de la H */
.hm-logo svg{display:block;flex-shrink:0;}

/* ==========================================================================
   Correcciones transversales (13/10/2026)
   1) Desborde a 390 px: la columna 1fr de la herramienta no bajaba de su
      contenido mínimo (387 px en 390) y desbordaba 17 px (despido 49, sancion 24).
   2) Zonas pulsables ≥ 24 px (WCAG 2.2, 2.5.8 AA) sin mover la maqueta.
   3) Texto no menor de 12 px.
   4) Niveles de título: se sustituyen h4 por h3 en pie y tarjetas; se copian
      aquí sus estilos para no tocar tres hojas heredadas.
   ========================================================================== */
.hm-tool-layout{grid-template-columns:minmax(0,1fr) 340px;}
@media (max-width:1023px){
  .hm-tool-layout{grid-template-columns:minmax(0,1fr);}
}
.campos{min-width:0;}
.campo,.campo>*{min-width:0;max-width:100%;}

/* 2) Pulsables */
.hm-footer-col a{display:inline-block;}                       /* 19 → 27 px de alto sin cambiar el espaciado (line-height 1.8) */
.hm-nav-links>a,.hm-nav-links>button,.hm-nav-links .hm-nav-suggest,.hm-nav-links [data-mega-trigger]{padding-block:6px;margin-block:-6px;}  /* 15 → 27 px de zona, sin mover nada */
@media (pointer:coarse){
  .hm-footer-col ul{gap:0;}
  .hm-footer-col a{padding-block:8px;}                         /* ≈ 43 px por enlace; sustituye al hueco de 12 px */
}

/* 3) Texto mínimo 12 px */
/* (solo las clases medidas por debajo de 12 px; se comprobó que ninguna otra página las usa más grandes) */
.r-tag.r-tag.r-tag,.badge-privacy.badge-privacy.badge-privacy,.limits,.drop-hint,.tag,.ad-slot-label,.hm-mock-label,.piloto-pill{font-size:12px;}
.hm-nav-links .caret{font-size:12px;}
.campo small{font-size:12px;opacity:.72;}
.campo>span em{opacity:.75;}

/* 4) Títulos de pie y tarjetas (antes h4) */
.hm-footer-col h3{font:600 13px/1 var(--font);color:var(--ink);margin-bottom:16px;}
.hm-side-card h3{font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.hm-mini-card h3{font:600 15.5px/1.3 var(--font);margin-bottom:8px;}
.hm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}