/* publico.css · lo que las páginas públicas suman a la v5: menú del celular, Descargar, 404 y el pie con enlaces.
   Se carga después de site.css y gana sobre él en la cabecera (Producto y Descargar desde 700 px; antes, el menú). */

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ── cabecera: de 700 px, la barra; menos, «Menú» ── */
.cab__menu { display: none; position: relative; margin-left: auto; }
.cab__menu > summary { padding-inline: 14px; }
.cab__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-cab);
  display: flex; flex-direction: column; gap: 4px; width: min(280px, calc(100vw - 2 * var(--margen)));
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-hoja); background: var(--bg);
}
.cab__panel > a:not(.btn), .cab__panel > .btn-icono--menu {
  display: flex; align-items: center; min-height: 48px; padding-inline: 12px; border-radius: var(--r-campo);
  font-size: var(--fs-ui); font-weight: var(--fw-medio); color: var(--text); width: 100%; justify-content: flex-start; gap: 12px;
}
.cab__panel > .btn-icono--menu { height: auto; border-radius: var(--r-campo); }
.cab__panel > .btn { margin-top: 4px; min-height: 48px; }
@media (hover: hover) { .cab__panel > a:not(.btn):hover, .cab__panel > .btn-icono--menu:hover { background: var(--control); color: var(--text); } }
.cab__menu[open] > summary { background: var(--control); }

@media (max-width: 699.98px) {
  .cab__nav { display: none; }
  .cab__menu { display: block; position: static; }
  /* El panel se alinea con la cabecera: el botón Menú deja a su derecha el acceso a la cuenta. */
  .cab__panel { right: var(--margen); }
  .cab__fin { margin-left: 0; }
  .cab__fin > [data-theme-toggle], .cab__demo { display: none !important; }
}
@media (min-width: 700px) {
  .cab__nav { display: flex; }
  .cab__nav a { font-size: var(--fs-ui); }
  .cab__fin { margin-left: 0; }
  .cab__menu { display: none; }
}
.cab .btn { font-size: var(--fs-ui); }

/* ── pie ── */
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 20px; }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); font-weight: var(--fw-medio); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .pie__nav a:hover { text-decoration-thickness: 2px; } }

/* un desplegable cerrado no deja su contenido en el árbol (igual que se ve): así no cuenta como contenido visible ni como foco */
details:not([open]) > :not(summary) { display: none; }

/* tema dentro del menú del celular: una fila con su ícono y su texto */
html[data-tema-vivo] .cab__panel > .btn-icono--menu, .cab__panel > .btn-icono--menu { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-height: 48px; padding-inline: 12px; border-radius: var(--r-campo); }
.btn-icono--menu span { font-size: var(--fs-ui); font-weight: var(--fw-medio); }

/* enlaces del pie: objetivo de 44 px en los dos sentidos */
.pie__nav { margin-inline: -4px; }   /* el relleno de 4 px da el objetivo de 44 px; el margen deja el texto en el borde de la columna */
.pie__nav a { min-width: 44px; padding-inline: 4px; }

/* en el celular la portada sí lleva su botón: la cabecera ya no trae «Pedir una demo» (está dentro de «Menú») */
@media (max-width: 699.98px) {
  .inicio__cta { display: flex; margin-top: 24px; }
  .inicio__cta .btn { width: auto; }
}

/* «Entrar» y «Mi cuenta» miden lo mismo: al cambiar el texto (si hay sesión) nada se corre */
.cab__fin [data-cuenta] { min-width: 96px; }