/* Perú Pendiente · barra de navegación (web pública)
   Los estilos del componente <pp-nav> que arma nav.js. Va después de tokens.css. Celular primero; desde 1200px se despliega entera
   (más angosto no entran el menú y los dos botones).
   La letra es la de títulos de tokens.css: Graphik si el sitio la tiene. */

.pp-nav {
  position: relative; background: var(--negro); color: #FFFFFF;
  font-family: var(--titulo); font-size: 15px; line-height: 1.2;
}
.pp-nav a { color: inherit; text-decoration: none; }
.pp-nav-in {
  padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
}

/* El logo viene dentro del componente y toma el color del enlace */
/* El relleno de arriba y abajo no se ve: agranda la zona que se puede tocar hasta 44 px */
.pp-nav-logo { flex: none; display: block; box-sizing: content-box; width: 112px; height: 28px; padding-block: 8px; color: #FFFFFF; }
.pp-nav-logo svg { display: block; width: 100%; height: 100%; }

/* Botones: todos en amarillo con texto negro, el color de acción (Jorge, 15 de octubre) */
.pp-nav-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; cursor: pointer;
  min-height: 44px; padding: 0 18px; border: 2px solid var(--amarillo); border-radius: var(--radio);
  background: var(--amarillo); color: var(--negro) !important; font-weight: 700; white-space: nowrap;
}
.pp-nav-cta:hover { filter: brightness(.94); }


.pp-nav-idioma { display: flex; gap: 2px; }
.pp-nav-idioma a { min-width: 40px; min-height: 36px; display: grid; place-items: center; border-radius: var(--radio); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); }
.pp-nav-idioma a[aria-current="true"] { color: #FFFFFF; background: rgba(255,255,255,.16); }

.pp-nav-btn {
  flex: none; order: 3; width: 44px; height: 44px; margin-right: -10px; padding: 0; display: grid; place-items: center;
  color: #FFFFFF; background: none; border: 0; border-radius: var(--radio); cursor: pointer;
}
.pp-nav-btn svg { width: 26px; height: 26px; }
.pp-nav-btn .x, .pp-nav-btn[aria-expanded="true"] .rayas { display: none; }
.pp-nav-btn[aria-expanded="true"] .x { display: block; }

.pp-nav a:focus-visible, .pp-nav-btn:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ── Celular: el logo a la izquierda; «Quiero donar» y el botón del menú a la derecha (QA, 15 de
   octubre); el resto, en el panel ── */

.pp-nav-ayudar, .pp-nav-btn { margin-block: 8px; }
.pp-nav-ayudar { margin-left: auto; }
.pp-nav-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: var(--negro); border-top: 1px solid rgba(255,255,255,.18); padding: 8px 16px 20px;
}
.pp-nav-panel.abierto { display: block; }
.pp-nav-menu { display: flex; flex-direction: column; }
.pp-nav-menu > a {
  display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.pp-nav-menu [aria-current="page"] { color: var(--amarillo); }

/* La campaña activa lleva delante un punto verde que late */
.pp-nav-vivo {
  flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--verde);
  animation: pp-nav-late 1.8s ease-out infinite;
}
@keyframes pp-nav-late {
  0% { box-shadow: 0 0 0 0 rgba(29,186,105,.7); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(29,186,105,0); }
}
@media (prefers-reduced-motion: reduce) { .pp-nav-vivo { animation: none; } }

/* Abierto, el menú ocupa la pantalla entera (QA, 15 de octubre): la barra se fija arriba, el panel
   llena el resto y la página de atrás no se desplaza. Solo en celular: en escritorio no hay botón. */
@media (max-width: 1199px) {
  .pp-nav:has(.pp-nav-panel.abierto) { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; }
  .pp-nav:has(.pp-nav-panel.abierto) .pp-nav-in { flex: 1; align-content: flex-start; }
  .pp-nav-panel.abierto { position: static; order: 4; flex-basis: 100%; margin-inline: -16px; }
  html:has(.pp-nav-panel.abierto) { overflow: hidden; }
}

/* «Necesito ayuda» ocupa todo el ancho; el idioma va en su propia fila, debajo */
.pp-nav-pie { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 16px; }

/* Celulares muy angostos: se encoge el logo y el botón para que sigan en una sola fila */
@media (max-width: 359px) {
  .pp-nav-in { padding: 0 12px; column-gap: 6px; }
  .pp-nav-logo { width: 88px; height: 22px; padding-block: 11px; }
  .pp-nav-ayudar .pp-nav-cta { padding: 0 12px; font-size: 14px; gap: 5px; }
}

/* ── Escritorio: todo a la vista, sin botón de menú ── */

@media (min-width: 1200px) {
  /* La barra acompaña al bajar (Jorge, 15 de octubre). Sticky va en el componente, que es el hijo
     de <body>: en .pp-nav no tendría dónde pegarse */
  pp-nav { position: sticky; top: 0; z-index: 40; }
  .pp-nav { font-size: 14px; }
  /* De borde a borde de la ventana, sin tope de ancho */
  .pp-nav-in { flex-wrap: nowrap; height: 76px; padding: 0 32px; column-gap: 14px; }
  /* La colita del corazón sale del borde izquierdo de la barra, como en la web de hoy */
  .pp-nav-logo { width: 136px; height: 34px; margin-left: -32px; }
  .pp-nav-btn { display: none; }
  .pp-nav-ayudar { margin-block: 0; }
  .pp-nav-panel, .pp-nav-panel.abierto {
    display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; position: static; padding: 0; border: 0; background: none;
  }
  .pp-nav-menu { flex-direction: row; align-items: center; gap: 2px; }
  .pp-nav-menu > a { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radio); font-size: 14px; font-weight: 700; white-space: nowrap; }
  .pp-nav-menu > a:hover { background: rgba(255,255,255,.12); }
  .pp-nav-pie { flex-direction: row; align-items: center; margin: 0 0 0 auto; gap: 12px; }
  .pp-nav-ayudar { order: 5; margin-left: 0; }
}