/* ══════════════════════════════════════════════════════════════════
   EL MENÚ ANTIGUO («megabar»), sacado de styles.css
   Rafael lo prefería al menú simple de las páginas nuevas. Vive
   aquí para poder usarlo en inicio.html sin cargar toda la hoja
   vieja, que chocaría con los estilos nuevos.

   NO se edita a mano: se regenera con
       python herramientas/extraer-megabar.py
   ══════════════════════════════════════════════════════════════════ */

/* Colores y medidas que el menú necesita, copiados del
   :root de styles.css y encerrados aquí dentro. */
.megabar {
  --accent: #5B2FD6;
  --accent-ink: #4423A8;
  --container: 1180px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gradient-brand: linear-gradient(135deg, #4B31D3 0%, #952AC5 40%, #D43B8D 70%, #C14851 100%);
  --ink: #141A26;
  --line: #E4E4F0;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(20, 26, 38, 0.05), 0 8px 24px rgba(20, 26, 38, 0.08);
  --status-rechazado-ink: #A8453B;
  --surface: #FFFFFF;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radius-s); font-weight: 700;
  font-size: .95rem; transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
  white-space: nowrap;
}

.btn-primary { background: var(--accent); color: #FBF3EF; }

.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.btn-ghost:hover { border-color: var(--accent); }

.btn-block { width: 100%; }

/* Botón de descarga. Antes era "ghost" (transparente con borde fino) y en el
   apartado del QR parecía apagado: está justo debajo del bloque de
   personalización, que en el plan gratis SÍ se atenúa, y el ojo lo leía como
   otra cosa bloqueada. Descargar el QR se puede siempre, con cualquier plan,
   así que el botón tiene que verse activo. Sólido y en color tinta: destaca
   sin competir con el morado de "Guardar", que es el que sí es de pago. */
.btn-descarga { background: var(--ink); color: var(--surface); border: 1px solid var(--ink); box-shadow: var(--shadow); }

.btn-descarga:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20, 26, 38, .22); }

.btn-descarga:active { transform: translateY(0); }

.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.btn-danger { background: var(--status-rechazado-ink); color: #FBF3EF; }

.btn-danger:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

.btn-link:hover { color: var(--accent); }

/* Botón del aviso de estreno: sólido, para que se vea que se puede pulsar.
   En hueco se confundía con el fondo amarillo y no invitaba a nada. */
/* Mismo degradado que el botón "Tu plan" del menú, y a propósito: este botón
   es el que LLEVA a Tu plan, así que compartir decoración le dice al ojo
   adónde va. Se probó antes poner el degradado solo en la palabra "Pro": no
   vale, porque el degradado arranca en el mismo morado del botón y la palabra
   desaparecía. Va sin el brillo que sí lleva "Tu plan": aquel es un botón del
   menú que se mira de reojo, y este está encima de la lista de reseñas, donde
   algo parpadeando acaba molestando mientras se trabaja. */
.al-caja.al-pronto .btn-estreno {
  background: var(--gradient-brand); color: #FFFFFF; border: 1px solid transparent;
  box-shadow: 0 3px 12px rgba(75, 49, 211, .3);
}

.al-caja.al-pronto .btn-estreno:hover { transform: translateY(-1px); filter: brightness(1.07); }

.logo-img { height: 1.9rem; width: auto; display: block; }

.pr-barra .btn { flex: 0 0 auto; }

/* En lista se dejan a la vista las acciones que se usan al moderar deprisa. El
   resto no desaparece: está en el botón «⋯ Más» de aquí abajo. Antes esto se
   hacía con una lista de excepciones, que además se dejaba fuera el enlace
   «Ver captura» por ser un <a> y no un <button>. */
[data-lista-testimonios][data-modo="lista"] .testimonio-acciones .btn { padding: .3rem .6rem; font-size: .78rem; }

[data-lista-testimonios][data-modo="lista"] .btn-mas { display: inline-flex; }

[data-lista-testimonios][data-modo="lista"] .acciones-extra.abierta .btn {
  justify-content: flex-start;
  width: 100%; text-align: left; padding: .45rem .6rem; white-space: nowrap;
}

.btn-mas { display: none; }

.btn-sm { padding: .45rem .8rem; font-size: .82rem; }

/* =============================================================
   8b. Megabar — mega-menu de navegación (cabecera oscura tipo Senja)
   ============================================================= */
.megabar {
  --mb-bg: #100E22;
  --mb-surface: #17142E;
  --mb-line: rgba(255,255,255,.09);
  --mb-ink: #F4F2FB;
  --mb-muted: #9C97BE;
  --mb-accent: #B49CFF;
  --mb-soon-ink: #706C90;
  position: sticky; top: 0; z-index: 300;
  background: var(--mb-bg);
  color: var(--mb-ink);
}

.megabar-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: .8rem; }

.megabar-logo { display: flex; align-items: center; }

.megabar-logo .logo-img { height: 1.9rem; width: auto; display: block; }

.megabar-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; border-radius: 8px; flex-shrink: 0;
}

.megabar-burger:hover { background: rgba(255,255,255,.06); }

.megabar-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--mb-ink); transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }

.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(2) { opacity: 0; }

.megabar[data-mobile-open="true"] .megabar-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.megabar-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 250;
  background: var(--mb-surface); max-height: 85vh; overflow-y: auto; padding: .5rem 1.1rem 2rem;
  border-top: 1px solid var(--mb-line);
}

.megabar[data-mobile-open="true"] .megabar-nav { display: block; }

.megabar-toplink {
  display: block; padding: .85rem .3rem; font-weight: 600; font-size: .98rem; color: var(--mb-ink);
  border-bottom: 1px solid var(--mb-line);
}

.megabar-item { border-bottom: 1px solid var(--mb-line); }

.megabar-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .85rem .3rem; background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .98rem; color: var(--mb-ink); text-align: left;
}

.megabar-chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--mb-muted); transition: transform .2s var(--ease-out); }

.megabar-trigger[aria-expanded="true"] .megabar-chev { transform: rotate(180deg); }

.megabar-panel {
  max-height: 0; overflow: hidden; transition: max-height .25s var(--ease-out);
}

.megabar-item[data-open="true"] .megabar-panel { max-height: 2000px; }

.megabar-panel-inner { padding: .2rem .3rem 1.1rem; display: flex; flex-direction: column; gap: 1.3rem; }

/* ══════════════════════════════════════════════════════════════════
   LOS TÍTULOS QUE MANDAN SOBRE CADA COLUMNA (16/09/2026)

   Rafael: «que se note que dentro de ese título están las demás pestañas».
   Tenía razón y el motivo era medible: el título iba a .88rem/700 y sus
   enlaces a .87rem/600 — prácticamente el mismo peso—, así que la columna
   se leía como una lista suelta con una frase encima, no como un grupo.

   Cuatro cosas, y ninguna grita:
     · el título, más grande, más blanco y más apretado de letra;
     · la chapa del icono se tiñe del morado de la marca en vez de gris;
     · una rayita cierra la cabecera por debajo, como el techo del grupo;
     · y la lista cuelga de un raíl vertical y va metida hacia dentro, que
       es lo que de verdad dice «esto de aquí abajo es suyo».
   Los enlaces bajan un punto de blanco para que el título mande. Como
   todo esto vive en el CSS, cambia en las 30 y pico páginas a la vez.
   ══════════════════════════════════════════════════════════════════ */
/* Cada grupo, dentro de su propia caja (16/09/2026, segundo intento).
   El primero fue una rayita debajo del título y un raíl al lado de la lista,
   y Rafael lo cazó enseguida: «parecen títulos aislados y los botones de
   abajo no pertenecen a su título». Tenía razón, y el motivo es de manual —
   una línea DEBAJO de un título no lo une a lo que viene después: lo corta.
   Lo que une es meterlo todo en la misma caja. */
.megabar-panel--wide .megabar-col {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 14px;
  padding: .85rem .6rem .95rem;
}

.megabar-group-head {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-bottom: .5rem;
}

.megabar-group-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, rgba(180,156,255,.28), rgba(180,156,255,.08));
  border: 1px solid rgba(180,156,255,.24);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mb-accent);
}

.megabar-group-icon svg { width: 18px; height: 18px; }

.megabar-group-title {
  font-weight: 800; font-size: 1rem; line-height: 1.22;
  letter-spacing: -.015em; color: #FFFFFF;
}

.megabar-group-desc { font-size: .76rem; color: var(--mb-muted); margin-top: .22rem; line-height: 1.4; }

.megabar-sublist { display: flex; flex-direction: column; gap: .1rem; }

.megabar-sublink, .megabar-soon {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .4rem; border-radius: 9px;
  font-size: .87rem; font-weight: 600;
}

.megabar-sublink { color: #DAD6EF; }

.megabar-sublink:hover { background: rgba(255,255,255,.07); color: var(--mb-accent); }

.megabar-soon { color: var(--mb-soon-ink); cursor: default; }

.megabar-sub-icon {
  width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit;
}

.megabar-sub-icon svg { width: 14px; height: 14px; }

.megabar-soon-tag {
  margin-left: auto; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.06); color: var(--mb-soon-ink); padding: .18rem .42rem; border-radius: 99px;
  white-space: nowrap;
}

.megabar-panel-footer { padding-top: .2rem; }

.megabar-panel-footer .megabar-sublink { font-weight: 700; }

.megabar-mobile-cta { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.2rem; }

.megabar-mobile-cta .btn { width: 100%; }

/* Es un ENLACE a la página de entrar (antes era un botón que no hacía nada
   en casi ninguna página: ver herramientas/arreglar-boton-entrar.py). Estas
   tres líneas son para que el enlace se vea exactamente igual que se veía el
   botón: sin subrayado, centrado y en bloque. */
.megabar-login {
  background: none; border: 1px solid var(--mb-line); color: var(--mb-ink); font-weight: 700;
  font-size: .92rem; cursor: pointer; padding: .75rem 1rem; border-radius: var(--radius-s);
  display: inline-block; text-align: center; text-decoration: none;
}

.megabar-cta { display: none; align-items: center; gap: .6rem; }

.megabar-cta .megabar-login { padding: .6rem .85rem; border: none; }

.megabar-cta .megabar-login:hover { background: rgba(255,255,255,.07); }

.megabar-cta .btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: none; }

.megabar-cta .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(75,49,211,.35); }

@media (min-width: 960px) {
  .megabar-burger { display: none; }
  .megabar-cta { display: flex; }
  .megabar-mobile-cta { display: none; }
  .megabar-nav {
    display: flex; position: static; inset: auto; align-items: center; gap: .1rem;
    background: none; border-top: none; overflow: visible; padding: 0; flex: 1; justify-content: center;
  }
  .megabar-toplink { border-bottom: none; padding: .6rem .8rem; border-radius: 8px; }
  .megabar-toplink:hover { background: rgba(255,255,255,.07); }
  .megabar-item { position: relative; border-bottom: none; }
  .megabar-trigger { padding: .6rem .8rem; border-radius: 8px; width: auto; }
  .megabar-trigger:hover, .megabar-trigger[aria-expanded="true"] { background: rgba(255,255,255,.07); }
  .megabar-panel {
    position: absolute; top: calc(100% + .8rem); left: 0; width: 300px;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    max-height: none; overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
  }
  .megabar-item[data-open="true"] .megabar-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .megabar-item--right .megabar-panel { left: auto; right: 0; }
  .megabar-panel--wide { width: 700px; }
  .megabar-panel-inner { padding: 1.3rem; flex-direction: row; gap: 0; }
  .megabar-panel--wide .megabar-panel-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

  /* Las tres cabeceras, a la misma altura (16/09/2026). Los títulos ocupan
     una línea o dos y las descripciones dos o tres, así que las rayitas de
     debajo salían a tres alturas distintas y el menú se veía desigual. Con
     subgrid, las tres columnas comparten las mismas filas: manda la
     cabecera más alta y las otras dos se estiran hasta ella. Sin números
     mágicos que se rompan el día que alguien cambie una frase. */
  /* Sin hueco entre la fila del título y la de su lista: ese hueco caía
     DENTRO de la caja de cada grupo y volvía a separar lo que se acaba de
     juntar. El aire entre columnas se queda como estaba. */
  .megabar-panel--wide .megabar-panel-inner { grid-template-rows: auto 1fr auto; column-gap: 1.5rem; row-gap: 0; }
  .megabar-panel--wide .megabar-col {
    display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start;
  }
  .megabar-panel--wide .megabar-group-head { align-items: flex-start; }
  /* El raíl acaba donde acaba el último enlace: si la lista se estira hasta
     abajo, una columna corta se queda con un palo colgando en el vacío. */
  .megabar-panel--wide .megabar-sublist { align-self: start; }
  .megabar-panel:not(.megabar-panel--wide) .megabar-panel-inner { flex-direction: column; gap: 0; }
  .megabar-panel-footer { border-top: 1px solid var(--mb-line); margin-top: 1.2rem; padding-top: .9rem; grid-column: 1 / -1; grid-row: 3; }
}

.sidebar-pie-fila img.logo-img { height:20px; }

.panel-contenido .container { max-width:960px; }

.pn-seccion > .container { position: relative; z-index: 1; }

/* El subrayado de los enlaces, quitado. Esta regla vive suelta en
   styles.css (`a { text-decoration: none }`) y no se venía sola. */
.megabar a, .megabar a:hover, .megabar a:focus { text-decoration: none; }