/* ============================================================================
   HYRIS — AJUSTES POR PÁGINA
   Sólo lo que no puede resolverse con un componente del sistema.
   ========================================================================== */

/* ==========================================================================
   FONDO DE TODA LA WEB  ·  opcional, lo elige ella en /_escenas.html
   --------------------------------------------------------------------------
   Sólo aparece si hay una imagen elegida. Reglas:
   · `background-size: auto` — a tamaño real, nunca ampliada (misma regla que
     el resto de escenas: ampliar es lo que las vuelve pastosas).
   · `fixed` — se queda quieta al hacer scroll, como un decorado.
   · los bordes se funden en el color del fondo, así una captura que no llega a
     llenar la pantalla no deja un corte, sino una escena que se apaga.
   · va por DEBAJO de todo (`z-index: -3`) y con opacidad baja: el contenido
     manda siempre.
   ========================================================================== */
.fondo-web {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: none;
  /* `cover` cuando la captura da para llenar la pantalla, `auto` cuando no
     (lo decide el build midiendo la imagen: ver `fondoDeLaWeb`). */
  background-size: var(--fondo-tamano, auto);
  /* Una captura pequeña se repite (papel de pared) en vez de quedarse como un
     parche en medio: así llena la pantalla sin ampliarse. */
  background-repeat: var(--fondo-repite, no-repeat);
  background-position: var(--fondo-encuadre, center);
  background-attachment: fixed;
  opacity: 0.7;
  /* Se apaga hacia abajo, pero tarde: tiene que leerse como un FONDO, no como
     una franja arriba. Del todo visible en la primera pantalla y apagado al
     final del primer scroll. */
  -webkit-mask-image: linear-gradient(180deg, var(--mascara-solida) 0%, var(--mascara-solida) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, var(--mascara-solida) 0%, var(--mascara-solida) 78%, transparent 100%);
  pointer-events: none;
}

/* NOTA: probé a estrechar la columna (1440 → 1180) cuando hay fondo, para que
   se viera a los dos lados. Cambiaba las proporciones de toda la web y ella lo
   rechazó: la web mantiene su ancho de siempre, con fondo o sin él. */

/* LA COLUMNA DEL PERFIL, CENTRADA.
   --------------------------------------------------------------------------
   El perfil tenía dos columnas: los paneles a la izquierda y la sala destacada
   a la derecha. Al quitar la sala, la rejilla seguía reservando el hueco del
   raíl y el perfil quedaba pegado a la izquierda con un vacío al lado.

   Los paneles NO cambian de tamaño: el ancho es LA MISMA CUENTA que hacía la
   rejilla —el ancho entero menos el raíl y su hueco—, así que miden exactamente
   lo que medían. Lo único que cambia es que el grupo se centra.

   Se escribe con la cuenta y no con un número fijo a propósito: `--rail-w` y
   `--grid-gap` cambian en pantallas medianas, y un 1021px escrito a mano se
   habría separado de la rejilla del resto de la web al primer ajuste. */
.perfil-columna {
  width: calc(100% - var(--rail-w) - var(--grid-gap));
  max-width: 100%;
  margin-inline: auto;
}

/* Por debajo de 1000 px la web entera pasa a una columna a ancho completo
   (misma medida que usa `.split`): aquí también. */
@media (max-width: 1000px) {
  .perfil-columna {
    width: 100%;
  }
}

/* Perfil: la escena NO va a sangre por toda la página. Va dentro de la tarjeta
   de identidad, en su mitad derecha y a tamaño real (`.perfil-foto`), que es la
   composición de HabHub. Una captura suelta de fondo, con el ancho que tenga,
   dejaba un corte vertical en mitad de la página y parecía un descuido. */
.perfil-fondo {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--s-10);
}

/* La tarjeta de identidad recorta su escena y el texto vive a la izquierda. */
.perfil-tarjeta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* La tarjeta es más estrecha que una cabecera: la franja se ajusta para que el
   nombre, la misión y los botones no se monten nunca sobre la escena. */
.perfil-tarjeta {
  /* La misma cuenta para la banda y para el hueco que se le reserva al texto. */
  --banda-ancho: min(calc(38% * var(--foto-escala, 1)), calc(100% - 380px));
}

.perfil-tarjeta .perfil-foto {
  width: var(--banda-ancho);
}

.perfil-tarjeta .profile-card {
  padding-right: max(var(--s-6), calc(var(--banda-ancho) + var(--s-5)));
}

@media (max-width: 900px) {
  /* Sin sitio para la franja lateral, la escena baja al pie de la tarjeta: una
     franja ancha y baja, que es donde una escena de holo se lee bien. */
  .perfil-tarjeta .profile-card {
    padding-right: var(--s-6);
    padding-bottom: 168px;
  }

  .perfil-tarjeta .perfil-foto {
    inset: auto 0 0 0;
    width: 100%;
    height: 148px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Modo de accesibilidad: sube contraste, quita fondos QUE ESTORBAN y engorda
   los focos. Se activa con el botón flotante.
   OJO: las escenas de las cabeceras NO se quitan. Ya no hay texto encima de
   ellas (viven en su propia mitad), así que esconderlas sólo dejaba la web sin
   una sola imagen — y quien lo activa sin querer cree que se ha roto algo. */
:root[data-a11y="true"] .hero__scene {
  display: none;
}

/* El fondo NO se esconde en modo accesibilidad: se baja. Escondiéndolo, quien
   tuviera el botón puesto no veía NINGÚN fondo por más que lo cambiara en el
   editor —y no hay forma de adivinar por qué—. El texto nunca va encima suyo
   (vive en paneles opacos), así que basta con apagarlo. */
:root[data-a11y="true"] .fondo-web {
  opacity: 0.18;
}

:root[data-a11y="true"] {
  --text-muted: var(--text);
  --text-dim: var(--text);
  --border: var(--border-strong);
}

:root[data-a11y="true"] body {
  background-image: none;
}

:root[data-a11y="true"] :focus-visible {
  outline-width: 4px;
}