/* PortSync V2.5 · prototipo «4 · Fusión» · pg-comun.css — lo compartido por las subpáginas del encargo G3: Noticias,
   Preguntas frecuentes, Precios, Guía de navegación y ODS (y la demo de los componentes de Nosotros).
   Orden en el <head>: portsync-tokens.css → tipografia.css → comun.css → pg-tokens.css → pg-comun.css → pg-<página>.css.
   Colores: solo roles (comun-tokens.css, pg-tokens.css, portsync-tokens.css). Letra: Fraunces 500 para títulos y DM Sans
   400 para texto (escala 52 / 34 / 24 / 17 / 13 de tipografia.css). La barra y el pie son los de comun.* (no se tocan). */

:root { --pg-margen: clamp(16px, 4vw, 64px); --pg-radio: 26px; --pg-radio-chico: 16px; --pg-ease: cubic-bezier(.16, 1, .3, 1); }

/* «hidden» manda aunque una clase fije un display */
.pg-pagina [hidden] { display: none !important; }
.pg-pagina main { position: relative; display: block; padding-bottom: clamp(48px, 8vh, 96px); overflow-x: clip; }   /* halos y abanicos no ensanchan la página */

/* ---------- fondo de página: póster del timelapse de Valparaíso, desenfocado y quieto (sin video: no gasta RAM) ----------
   Se extiende a los lados en cualquier ancho; el contenido queda centrado (escritorio a pantalla completa, sin columna). */
.pg-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--c-fondo); }
.pg-fondo::before {
  content: ""; position: absolute; inset: -8%;
  background: url('../inicio-poster.jpg') center 30% / cover no-repeat;
  filter: blur(34px) saturate(1.08); opacity: var(--pg-poster-op); transform: translateZ(0);
}
.pg-fondo::after { content: ""; position: absolute; inset: 0; background: var(--pg-tinte), var(--pg-velo); }

/* ---------- piezas ---------- */
.pg-ancho { width: min(100% - 2 * var(--pg-margen), 1600px); margin-inline: auto; }
.pg-vidrio {
  position: relative;
  background: var(--c-tarjeta);
  border: 1px solid var(--c-tarjeta-borde);
  border-radius: var(--pg-radio);
  box-shadow: inset 0 1px 0 var(--c-tarjeta-filo), var(--c-sombra-chica);
}

/* cabecera de cada página: ceja, título con su palabra en cursiva azul y bajada */
.pg-cabeza { padding-block: clamp(118px, 15vh, 164px) clamp(24px, 4vh, 44px); display: grid; gap: 18px; }
.pg-cabeza--fila { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; column-gap: clamp(24px, 5vw, 96px); }
.pg-titulo { font-size: clamp(42px, 5.2vw, 80px); line-height: 1.02; color: var(--c-tinta); max-width: 16ch; text-wrap: balance; }
.pg-titulo em, .pg-h2 em { font-style: italic; color: var(--accent-ink); }
.pg-lede { max-width: 52ch; font-size: clamp(17px, 1.25vw, 20px); color: var(--c-tinta-2); text-wrap: pretty; }
.pg-h2 { font-size: var(--t-h2); color: var(--c-tinta); text-wrap: balance; }
.pg-h3 { font-size: var(--t-h3); color: var(--c-tinta); }
.pg-texto { color: var(--c-tinta-2); max-width: 64ch; }
.pg-fino { font-size: 14px; line-height: 1.55; color: var(--c-tinta-3); max-width: 78ch; }
.pg-fino strong { color: var(--c-tinta-2); font-weight: 600; }
.pg-seccion { padding-block: clamp(28px, 6vh, 72px); }
.pg-seccion__cabeza { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.6vw, 32px); }

.pg-enlace {
  color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-rapida);
}
.pg-enlace:hover { text-decoration-color: currentColor; }
.pg-enlace--flecha { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.pg-enlace--flecha::after { content: "→"; transition: transform .25s var(--ease-out); }
.pg-enlace--flecha:hover::after { transform: translateX(4px); }
.pg-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* avatar de iniciales sobre un disco de color (sin imágenes) */
.pg-avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pg-avatar-ps); color: var(--pg-avatar-ps-tinta);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blanco) 12%, transparent) inset;
}
.pg-avatar--otro { background: var(--pg-avatar-otro); color: var(--pg-avatar-otro-tinta); }
.pg-avatar--op { background: var(--pg-avatar-op); color: var(--pg-avatar-op-tinta); }
.pg-avatar--ge { background: var(--pg-avatar-ge); color: var(--pg-avatar-ge-tinta); }

/* control segmentado (filtros, mensual/anual, pilotes/sitios): botones con aria-pressed */
.pg-segmento {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: var(--c-tarjeta); border: 1px solid var(--c-tarjeta-borde);
}
.pg-segmento button {
  min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer;
  color: var(--c-tinta-2); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.pg-segmento button:hover { color: var(--c-tinta); background: var(--c-activo); }
.pg-segmento button[aria-pressed="true"] { background: var(--c-boton); color: var(--c-boton-tinta); }

/* botón redondo (anterior, siguiente, pausa) */
.pg-redondo {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--c-linea-fuerte); background: var(--c-tarjeta); color: var(--c-tinta);
  transition: background-color var(--dur-rapida), border-color var(--dur-rapida), transform .25s var(--ease-out);
}
.pg-redondo:hover { border-color: var(--accent); background: var(--c-tarjeta-hover); }
.pg-redondo:active { transform: scale(.94); }
.pg-redondo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-pausa { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--c-linea-fuerte); background: var(--c-tarjeta); color: var(--c-tinta); font-size: 14px; font-weight: 500; cursor: pointer; }
.pg-pausa:hover { border-color: var(--accent); }
.pg-pausa svg { width: 14px; height: 14px; fill: currentColor; }
.pg-pausa .pg-pausa__play { display: none; }
.pg-pausa[aria-pressed="true"] .pg-pausa__ii { display: none; }
.pg-pausa[aria-pressed="true"] .pg-pausa__play { display: inline; }

/* «supuesto» y «fuente»: el rótulo de cada valor del simulador y de lo que no es una medición */
.pg-marca-dato {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill);
  font-family: var(--f-texto); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap;
  vertical-align: middle; border: 1px dashed var(--pg-supuesto-borde); background: var(--pg-supuesto); color: var(--c-tinta);
}
.pg-marca-dato--fuente { border-style: solid; border-color: var(--c-linea-fuerte); background: var(--pg-fuente); }

/* ---------- texto con brillo que barre (ShinyText, ref. 05 n.º 6) ----------
   Degradado recortado al texto: tinta, luz azul al 50 % y tinta; el fondo mide el doble y se corre de 150 % a −50 %. El último
   tramo de la animación es la pausa con el brillo fuera (el «delay» del prompt). Corre solo cuando su bloque está en pantalla
   (pg-comun.js pone .pg-en-vista) y se detiene al pasar el puntero. Movimiento reducido: tinta lisa, sin degradado. */
.pg-brillo {
  background-image: linear-gradient(var(--pg-brillo-angulo, 120deg), var(--pg-brillo-base) 0%, var(--pg-brillo-base) 35%,
    var(--pg-brillo-luz) 50%, var(--pg-brillo-base) 65%, var(--pg-brillo-base) 100%);
  background-size: 200% auto; background-position: 150% center;   /* con repetición: el degradado siempre cubre el texto */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--pg-brillo-base);
  animation: pg-brillo var(--pg-brillo-dur, 3.6s) linear infinite var(--pg-brillo-retraso, 0s) paused;
}
.pg-en-vista .pg-brillo { animation-play-state: running; }
.pg-en-vista .pg-brillo:hover { animation-play-state: paused; }
@keyframes pg-brillo { 0% { background-position: 150% center; } 64%, 100% { background-position: -50% center; } }

/* teléfono */
@media (max-width: 899px) {
  .pg-cabeza--fila { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
}
@media (max-width: 560px) {
  :root { --pg-radio: 22px; }
  .pg-cabeza { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-enlace--flecha::after, .pg-redondo, .pg-segmento button { transition: none; }
  .pg-brillo { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--pg-brillo-base); }
}
@media (forced-colors: active) {
  .pg-segmento button[aria-pressed="true"] { outline: 2px solid CanvasText; }
}