/* Pandín · navegación de referencia para iOS y navegadores móviles. */
:root{
  --pnd-bg: var(--color-paper-warm, #FFFAF4);
  --pnd-tinta: var(--color-ink, #2B2724);
  --pnd-tinta-suave: var(--color-ink-soft, #6B625B);
  --pnd-linea: var(--color-rule, #E7DED2);
  --pnd-acento: var(--color-accent-deep, #3F6B5C);
  --pnd-acento-texto: #FFFFFF;
  --pnd-alto-cabecera: 64px;
  --pnd-radio: var(--radius-md, 10px);
  --pnd-toque-min: 44px;
}

*,*::before,*::after{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--pnd-bg);
  color: var(--pnd-tinta);
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  line-height:1.5;
  -webkit-text-size-adjust: 100%;
}

.pnd-salto{
  position:absolute; left:-9999px; top:0;
  background: var(--pnd-acento); color: var(--pnd-acento-texto);
  padding:12px 16px; z-index:1000; border-radius:0 0 var(--pnd-radio) 0;
}
.pnd-salto:focus{ left:0; }

.pnd-cabecera{
  position: sticky; top:0; z-index:2000;
  background: var(--pnd-bg);
  border-bottom:1px solid var(--pnd-linea);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.pnd-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height: var(--pnd-alto-cabecera);
  max-width:1200px; margin:0 auto; padding:8px 16px;
}
.pnd-marca{
  font-weight:700; font-size:1.15rem; letter-spacing:.01em;
  color: var(--pnd-tinta); text-decoration:none;
  display:inline-flex; align-items:center; min-height: var(--pnd-toque-min);
}

.pnd-alternar{
  position:relative; z-index:2201;
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width: var(--pnd-toque-min); min-height: var(--pnd-toque-min);
  padding:8px 12px;
  background: transparent; color: var(--pnd-tinta);
  border:1px solid var(--pnd-linea); border-radius: var(--pnd-radio);
  font: inherit; font-size:.95rem; font-weight:600;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
  touch-action: manipulation;
}
.pnd-alternar:focus-visible,
.pnd-submenu-boton:focus-visible,
.pnd-panel a:focus-visible,
.pnd-cerrar:focus-visible{
  outline:3px solid var(--pnd-acento); outline-offset:2px;
}
.pnd-icono{ width:20px; height:14px; position:relative; display:block; }
.pnd-icono span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.pnd-icono span:nth-child(1){ top:0; }
.pnd-icono span:nth-child(2){ top:6px; }
.pnd-icono span:nth-child(3){ top:12px; }
.pnd-alternar[aria-expanded="true"] .pnd-icono span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.pnd-alternar[aria-expanded="true"] .pnd-icono span:nth-child(2){ opacity:0; }
.pnd-alternar[aria-expanded="true"] .pnd-icono span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.pnd-velo{
  position: fixed; top:0; right:0; bottom:0; left:0; inset:0;
  background: rgba(43,39,36,.45);
  opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease;
  pointer-events:none; z-index:2100;
}
.pnd-velo.pnd-abierto{ opacity:1; visibility:visible; pointer-events:auto; }

.pnd-panel{
  position: fixed; top:0; right:0; z-index:2200;
  width:88vw; max-width:380px;
  width: min(88vw, 380px);
  height: 100vh;
  height: 100dvh;
  background: var(--pnd-bg);
  border-left:1px solid var(--pnd-linea);
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  transition: transform .25s ease;
  visibility:hidden; pointer-events:none; will-change:transform;
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-right: env(safe-area-inset-right);
}
.pnd-panel.pnd-abierto{
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  visibility:visible; pointer-events:auto;
}

.pnd-panel-cabecera{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--pnd-linea);
  position: sticky; top:0; background: var(--pnd-bg);
}
.pnd-cerrar{
  -webkit-appearance:none; appearance:none;
  min-width: var(--pnd-toque-min); min-height: var(--pnd-toque-min);
  background:transparent; border:1px solid var(--pnd-linea);
  border-radius: var(--pnd-radio); color: var(--pnd-tinta);
  font: inherit; font-size:1.25rem; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.08); touch-action: manipulation;
}

.pnd-lista{ list-style:none; margin:0; padding:8px 0 24px; }
.pnd-lista > li{ border-bottom:1px solid var(--pnd-linea); }
.pnd-lista a{
  display:flex; align-items:center; min-height: var(--pnd-toque-min);
  padding:12px 16px; color: var(--pnd-tinta); text-decoration:none;
  -webkit-tap-highlight-color: rgba(0,0,0,.06);
}
.pnd-lista a.pnd-activo{
  color: var(--pnd-acento);
  font-weight:800;
}

.pnd-submenu-boton{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-height: var(--pnd-toque-min); padding:12px 16px;
  background:transparent; border:0; color: var(--pnd-tinta);
  font: inherit; font-weight:600; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.06); touch-action: manipulation;
}
.pnd-flecha{ transition: transform .2s ease; flex:0 0 auto; }
.pnd-submenu-boton[aria-expanded="true"] .pnd-flecha{ transform: rotate(180deg); }

.pnd-submenu{ list-style:none; margin:0; padding:0 0 8px; display:none; }
.pnd-submenu.pnd-abierto{ display:block; }
.pnd-submenu a{ padding-left:32px; color: var(--pnd-tinta-suave); }

.pnd-acciones{ display:grid; gap:8px; padding:16px; }
.pnd-btn{
  display:flex; align-items:center; justify-content:center;
  min-height: var(--pnd-toque-min); padding:12px 16px;
  border-radius: var(--pnd-radio); text-decoration:none; font-weight:600;
  touch-action: manipulation;
}
.pnd-btn-primario{ background: var(--pnd-acento); color: var(--pnd-acento-texto); }
.pnd-btn-secundario{ border:1px solid var(--pnd-acento); color: var(--pnd-acento); }

body.pnd-bloqueado{
  position: fixed; left:0; right:0; width:100%; overflow: hidden;
}

@media (min-width: 900px){
  .pnd-alternar{ display:none; }
  .pnd-velo{ display:none; }
  .pnd-panel{
    position: static; transform:none; width:auto; height:auto;
    border:0; background:transparent; flex-direction:row; align-items:center;
    max-width:none; overflow:visible; padding:0;
    visibility:visible; pointer-events:auto; will-change:auto;
  }
  .pnd-panel-cabecera{ display:none; }
  .pnd-lista{ display:flex; align-items:center; padding:0; gap:4px; }
  .pnd-lista > li{ border:0; position:relative; }
  .pnd-submenu{
    position:absolute; top:100%; left:0; min-width:230px;
    background: var(--pnd-bg); border:1px solid var(--pnd-linea);
    border-radius: var(--pnd-radio); box-shadow:0 8px 24px rgba(43,39,36,.10);
    padding:6px 0; z-index:130;
  }
  .pnd-submenu a{ padding-left:16px; }
  .pnd-acciones{ display:flex; padding:0 0 0 12px; }
}

@media (prefers-reduced-motion: reduce){
  .pnd-panel, .pnd-velo, .pnd-icono span, .pnd-flecha{ transition:none !important; }
}

.pnd-sinjs .pnd-panel{
  position: static; transform:none; width:auto; height:auto;
  max-width:none; border:0; border-bottom:1px solid var(--pnd-linea); overflow:visible;
  visibility:visible; pointer-events:auto;
}
.pnd-sinjs .pnd-alternar,
.pnd-sinjs .pnd-panel-cabecera{ display:none; }
.pnd-sinjs .pnd-submenu{ display:block; }
.pnd-sinjs .pnd-submenu-boton{ cursor:default; }