/* Portada · teléfono y tablet (r9): menú ☰ por debajo de 760 px, cabecera que cabe de 760 a 1024 px
   y zonas táctiles de 44 px sin cambiar el tamaño visible (área invisible con ::after). Se carga el último. */

/* Botón ☰: solo en el teléfono */
header#top .nav-toggle { display: none; }

/* Tablet y portátil pequeño (760–1024 px): la píldora no se desborda y el botón principal se ve entero. */
@media (min-width: 761px) and (max-width: 1024px) {
  header#top .wrap { gap: 8px; padding: 0 8px 0 14px; width: calc(100% - 24px); }
  header#top .logo { font-size: 17px; flex-shrink: 0; }
  header#top nav { gap: 0; min-width: 0; flex: 1 1 auto; justify-content: center; }
  header#top nav a { padding: 8px 9px !important; font-size: 13.5px !important; white-space: nowrap; }
  header#top .hide-sm { display: none !important; }
  header#top .btn.primary { flex-shrink: 0; white-space: nowrap; padding: 0 16px !important; }
}
@media (min-width: 761px) and (max-width: 860px) {
  header#top nav a[href="#nuevo"] { display: none; }
}

/* Teléfono (≤ 760 px): botón ☰ que abre el menú como una hoja bajo la cabecera. */
@media (max-width: 760px) {
  header#top .wrap { position: relative; }
  header#top .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; flex-shrink: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--v2-text, #f4f4f5); cursor: pointer;
  }
  header#top .nav-toggle:hover { background: rgba(255, 255, 255, .08); }
  header#top .nav-toggle:focus-visible, header#top nav a:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
  header#top .nav-toggle + .btn { margin-left: 4px; }
  html body header#top nav { display: none; }
  html body header#top nav.open {
    display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0;
    padding: 8px; border-radius: 22px; z-index: 60;
    background: rgba(12, 12, 20, .96) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .8) !important;
  }
  html body header#top nav.open a { display: flex; align-items: center; min-height: 48px; padding: 0 16px !important; font-size: 16px !important; color: #f4f4f5 !important; border-radius: 14px; }
  html body header#top nav.open a:hover, html body header#top nav.open a:focus-visible { background: rgba(255, 255, 255, .08) !important; }
}

/* Zonas táctiles de al menos 44 px en teléfono y tablet: el área se amplía con un ::after invisible. */
@media (max-width: 1024px), (pointer: coarse) {
  header#top .logo, header#top nav a, header#top .btn, .btn, .chip, .cb-install,
  #funciones .filters button, #funciones [role="tab"], .filter, .seg button, .tabs button, .wx-tabs button,
  footer a, .fbase a, .faq-item summary, .toc a, .composer .send, a.pill, .fb-chips button { position: relative; }
  header#top .logo::after, header#top nav a::after, .btn::after, .chip::after,
  #funciones .filters button::after, #funciones [role="tab"]::after, .filter::after, .seg button::after, .tabs button::after, .wx-tabs button::after,
  footer a::after, .fbase a::after, .toc a::after, .composer .send::after, a.pill::after, .fb-chips button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* r10 (ELISA web-2): globo del mascota legible en tema oscuro y títulos de sección sin tapar por la cabecera fija */
#bubble.bubble { background: rgba(24, 26, 36, .92) !important; color: #f4f4f5 !important; border: 1px solid rgba(255, 255, 255, .18) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important; }
section.block[id] { scroll-margin-top: 84px; }