/* =====================================================================
   PortSync 2.2 — componentes compartidos
   Marca (logo + "PortSync"), barra superior, menú móvil, pie de página
   y velo negro entre páginas. Requiere portsync-tokens.css.
   Prefijo ps- para no chocar con las clases propias de cada página.
   ===================================================================== */

::selection{background:var(--accent-fill);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- marca: el mismo lockup en todas las páginas ---------- */
.ps-marca{display:inline-flex;align-items:center;gap:var(--marca-gap);color:inherit;text-decoration:none;white-space:nowrap;
  font-family:var(--font-sans);font-size:var(--marca-texto);line-height:1;font-weight:var(--peso-semi);letter-spacing:-.025em}
.ps-marca img{display:block;height:var(--marca-logo);width:auto;flex:none}
/* con tema claro/oscuro (panel): dos imágenes y el token decide cuál se ve */
.ps-marca .ps-logo-azul{display:var(--logo-azul)}
.ps-marca .ps-logo-blanco{display:var(--logo-blanco)}
@media (max-width:767px){
  .ps-marca{gap:8px;font-size:var(--marca-texto-sm)}
  .ps-marca img{height:var(--marca-logo-sm)}
}

/* ---------- vidrio líquido (barra, menú y botones de INICIO) ---------- */
.ps-glass{position:relative;overflow:hidden;border:none;background:var(--negro-40);background-blend-mode:luminosity;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 0 1px 1px var(--blanco-10)}
.ps-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,var(--blanco-30) 0%,var(--blanco-10) 20%,transparent 40%,transparent 60%,var(--blanco-10) 80%,var(--blanco-30) 100%);
  -webkit-mask:linear-gradient(var(--blanco) 0 0) content-box,linear-gradient(var(--blanco) 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ps-glass-borde{border:1px solid var(--blanco-20)}

/* ---------- barra superior de INICIO (una sola página: Inicio · Precios · Nosotros · Redes + Panel) ----------
   Fija arriba mientras se baja. Sobre el hero es el vidrio liviano original; cuando el contenido pasa por debajo
   (.is-sobre-contenido, la pone index.js) el vidrio se vuelve más denso para que el texto de abajo no se cruce.
   La cabecera no captura clics fuera de la barra y del menú (el margen de 24 px sigue siendo página). */
.ps-cabecera{--ps-pad:24px;position:fixed;top:0;left:0;right:0;z-index:30;padding:max(24px,env(safe-area-inset-top)) var(--ps-pad) 0;
  color:var(--blanco);font-family:var(--font-sans);pointer-events:none}
.ps-barra,.ps-menu{pointer-events:auto}
.ps-barra{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-radius:var(--r-md);
  transition:background-color var(--dur-media) var(--ease-out),-webkit-backdrop-filter var(--dur-media) var(--ease-out),backdrop-filter var(--dur-media) var(--ease-out)}
.ps-cabecera.is-sobre-contenido .ps-barra{background-color:var(--vidrio-barra);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
/* sobre el contenido, el texto que sube se desvanece en el margen de arriba en vez de asomarse sobre la barra */
.ps-cabecera::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-20px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0,var(--bg) 28%,var(--vidrio-denso) 55%,transparent 100%);
  opacity:0;transition:opacity var(--dur-media) var(--ease-out)}
.ps-cabecera.is-sobre-contenido::before{opacity:1}
.ps-enlaces{display:none;align-items:center;gap:32px;margin:0;padding:0;list-style:none;font-size:14px;line-height:20px}
.ps-enlaces a{position:relative;display:block;color:var(--blanco);text-decoration:none;transition:color var(--dur-rapida) var(--ease-out)}
.ps-enlaces a:hover{color:var(--neutro-300)}
/* sección activa (aria-current, lo mueve index.js al bajar): la línea crece desde el centro */
.ps-enlaces a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);
  opacity:0;transform:scaleX(0);transition:opacity var(--dur-media) var(--ease-out),transform var(--dur-media) var(--ease-out)}
.ps-enlaces a[aria-current]::after{opacity:1;transform:scaleX(1)}
.ps-acciones{display:flex;align-items:center;gap:8px}
.ps-btn-panel{display:inline-flex;align-items:center;gap:6px;padding:8px 24px;border-radius:var(--r-sm);white-space:nowrap;text-decoration:none;
  background:var(--blanco);color:var(--azul-950);font-size:14px;line-height:20px;font-weight:var(--peso-medio);
  transition:background-color var(--dur-rapida) var(--ease-out)}
.ps-btn-panel:hover{background:var(--azul-50)}
.ps-btn-panel svg{width:16px;height:16px;flex-shrink:0}
.ps-menu-boton{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--blanco-20);
  color:var(--blanco);font:inherit;font-size:14px;font-weight:var(--peso-medio);cursor:pointer}
.ps-menu{position:absolute;right:var(--ps-pad);top:calc(100% + 8px);min-width:200px;padding:6px;border-radius:var(--r-md);
  display:flex;flex-direction:column;
  /* el menú puede abrirse sobre el texto de una sección: siempre con el vidrio denso */
  background-color:var(--vidrio-barra);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.ps-menu[hidden]{display:none}
.ps-menu a{padding:12px 14px;border-radius:var(--r-sm);font-size:15px;line-height:20px;color:var(--blanco);text-decoration:none;
  transition:background-color var(--dur-rapida) var(--ease-out)}
.ps-menu a:hover,.ps-menu a[aria-current]{background:var(--blanco-10)}
@media (min-width:768px){
  .ps-cabecera{--ps-pad:48px}
  .ps-enlaces{display:flex}
  .ps-menu-boton,.ps-menu{display:none!important}
}
@media (min-width:1024px){
  .ps-cabecera{--ps-pad:64px}
}
@media (max-width:767px){
  /* logo + Menú + Panel tienen que caber desde 360 px */
  .ps-barra{padding:8px 10px 8px 12px}
  .ps-acciones{gap:6px}
  .ps-btn-panel{padding:8px 14px}
  .ps-menu-boton{padding:0 12px}
}
@media (max-width:374px){
  .ps-btn-panel svg{display:none}
}

/* ---------- pie de página (INICIO, al final de Historia) ---------- */
.ps-pie{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-soft);padding-top:28px;padding-bottom:max(32px,env(safe-area-inset-bottom));
  color:var(--ink-3);font-family:var(--font-sans);font-size:14px}
.ps-pie .ps-marca{--marca-logo:22px;--marca-logo-sm:22px;--marca-texto:16px;--marca-texto-sm:16px;gap:8px;color:var(--ink)}
.ps-pie nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ps-pie a{color:inherit;text-decoration:none;transition:color var(--dur-rapida) var(--ease-out)}
.ps-pie nav a:hover{color:var(--ink)}
@media (max-width:767px){
  .ps-pie{flex-direction:column;align-items:flex-start}
}

/* ---------- velo negro entre páginas ----------
   Al salir: .ps-saliendo en <html> lo cubre todo (portsync-sitio.js).
   Al llegar desde otra página del sitio: .ps-entrada (puesta por portsync-entrada.js en <head>) lo desvanece. */
.ps-velo{position:fixed;inset:0;z-index:1000;background:var(--negro);opacity:0;pointer-events:none;
  transition:opacity var(--dur-pagina) var(--ease-out)}
.ps-entrada .ps-velo{animation:ps-velo-sale var(--dur-pagina) var(--ease-out) both}
.ps-saliendo .ps-velo{opacity:1;pointer-events:auto}
@keyframes ps-velo-sale{from{opacity:1}to{opacity:0}}

/* ---------- zoom de entrada a panel (zoom-panel.js) ----------
   Lienzo sobre la página y bajo el velo: dibuja la ventana que se expande y, mientras dura, absorbe los clics. */
.ps-zoom{position:fixed;inset:0;z-index:999;display:block;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .ps-velo{display:none}
  .ps-enlaces a,.ps-enlaces a::after,.ps-barra,.ps-cabecera::before,.ps-btn-panel,.ps-menu a,.ps-pie a{transition:none}
}

/* V2.3: enlace «Saltar al contenido», visible solo al recibir el foco con el teclado */
.saltar{position:fixed;left:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:var(--r-md,10px);background:var(--blanco);color:var(--azul-950);font-weight:600;font-size:14px;text-decoration:none;transition:top var(--dur-rapida) var(--ease-out)}
.saltar:focus{top:16px;outline:2px solid var(--focus);outline-offset:2px}