/* =====================================================================
   Praevia Consulting · portal de clientes
   Misma identidad que la web (PraeviaWeb/assets/css/main.css): marino #172238, acero #1f5f8b, papel #f4f6f9,
   IBM Plex Sans en titulares y Manrope en el resto. Sobrio: filetes y tipografía.
   La pantalla de acceso parte de la que tuvo la web cuando estaba cerrada con contraseña.
   Las fichas de informe copian las de /articulos/.
   ===================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fuentes/ibmplexsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fuentes/ibmplexsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fuentes/manrope-var.woff2) format('woff2');
}

:root {
  --navy: #172238;
  --navy-3: #2a3a5a;
  --navy-line: #35466a;
  --on-navy-2: #d3dce9;
  --on-navy-3: #c5cbd7;
  --steel: #1f5f8b;
  --steel-2: #3d7fb3;
  --steel-3: #8fbbe0;
  --paper: #f4f6f9;
  --white: #ffffff;
  --line: #d5dbe4;
  --line-2: #e3e8ef;
  --text: #1e2838;
  --muted: #4b5563;
  --muted-2: #6b7482;

  --head: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* 1.180 px, como la web. Se probaron el 82 % y el 75 % del ancho de la ventana y quedaban grandes
     en pantallas grandes y en portátiles (30/10/2026). */
  --wrap: 1180px;
  --gutter: 24px;
  --r: 4px;
  --header-h: calc(76px + env(safe-area-inset-top, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--steel); color: #fff; }
:focus-visible { outline: 3px solid var(--steel-2); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
h1, h2 { font-family: var(--head); color: var(--navy); font-weight: 600; }

/* ---------- galería ---------- */
body.galeria { min-height: 100vh; display: flex; flex-direction: column; }
body.galeria main { flex: 1 0 auto; }

.cabecera { height: var(--header-h); padding-top: env(safe-area-inset-top, 0px); background: #fff; box-shadow: 0 1px 0 var(--line-2); position: relative; z-index: 1; }
.cabecera .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: flex; align-items: center; }
.marca img { height: 26px; width: auto; }
/* «Salir» con el mismo botón marino que «Pedir una demo» en la web. */
.salir { display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; line-height: 1.2; color: #fff; background: var(--navy); border: 1.5px solid var(--navy); padding: 10px 18px; border-radius: var(--r); transition: background .2s, border-color .2s; }
.salir:hover { background: var(--navy-3); border-color: var(--navy-3); }

/* Banda: el logo del cliente y «Informes» en la misma línea, separados por un filete fino. */
.banda { background: var(--paper); border-bottom: 1px solid var(--line-2); padding: 30px 0; }
.banda-fila { display: flex; align-items: center; gap: 26px; }
.cliente-logo { height: 32px; width: auto; flex: none; }
.banda-filete { width: 1px; height: 42px; background: var(--line); flex: none; }
.banda h1 { font-size: 36px; line-height: 1; letter-spacing: -.02em; }

/* Márgenes ajustados para que en un portátil (unos 860 px de alto) la página quepa entera, pie incluido. Abajo queda
   sitio para el botón de «Escríbenos», que flota encima de la raya del pie. */
.cuerpo { padding: 44px 0 86px; }
.informes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.informe { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.informe:hover { border-color: var(--steel-3); box-shadow: 0 10px 28px rgba(23, 34, 56, .08); }
.informe:focus-within { outline: 3px solid var(--steel-2); outline-offset: 3px; }
.informe-imagen { aspect-ratio: 16 / 9; background: var(--paper); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.informe-imagen img { width: 100%; height: 100%; object-fit: cover; }
.informe-datos { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.informe h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 8px; text-wrap: balance; }
.informe h2 a { color: var(--navy); transition: color .2s; }
.informe h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.informe h2 a:focus-visible { outline: none; }
.informe:hover h2 a { color: var(--steel); }
.informe-resumen { font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* Informe aún sin enlace («En preparación»): la ficha no se abre, así que no reacciona al ratón. */
.informe--pendiente:hover { border-color: var(--line); box-shadow: none; }

/* «Escríbenos»:
   - Botón redondo con el icono de mensaje, alineado con el borde derecho del contenido. Entra con una animación suave
     y, al pasar el ratón, se despliega hacia la izquierda con «¿Necesitas ayuda?».
   - El carril no ocupa sitio (alto 0): el botón flota a 24 px del borde de abajo de la ventana al bajar por una página
     larga y, al final, a 24 px de la raya del pie. Así la página cabe en un portátil sin tener que bajar.
   - Al pulsarlo sale del propio botón una tarjeta con el formulario, y el botón pasa a ser la X. Sin JavaScript: un
     checkbox oculto abre y cierra, y el botón y una capa transparente que cubre la página (para cerrar pulsando
     fuera) son etiquetas de ese checkbox. */
body.galeria main { display: flex; flex-direction: column; }
.escribenos-carril { position: sticky; bottom: 0; margin-top: auto; height: 0; z-index: 50; pointer-events: none; }
.escribenos-fila { position: relative; height: 0; }
.escribenos-interruptor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* El botón es una caja fija de 54 x 54 con el icono centrado, y lo que crece hacia la izquierda es el fondo, que va
   aparte con el texto dentro. Si el icono va dentro de una caja que crece, el navegador lo redondea al píxel de otra
   manera en cada fotograma y vibra mientras se despliega (medido el 30/10/2026, sobre todo con ventanas de ancho
   impar). Cerrado, el fondo es un círculo de 54 px: 16 de margen izquierdo + 38 a la derecha.
   La entrada va con «backwards» y no con «both»: con «both» el botón se queda en una capa propia después de entrar,
   y esa capa es la que hacía vibrar el icono. */
.escribenos-boton { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; color: #fff; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; pointer-events: auto; animation: escribenos-entra .55s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
.escribenos-fondo { position: absolute; top: 0; right: 0; height: 100%; display: inline-flex; align-items: center; padding: 0 38px 0 16px; border-radius: 27px; background: var(--navy); box-shadow: 0 12px 30px rgba(23, 34, 56, .30), 0 2px 8px rgba(23, 34, 56, .18); transition: background .2s, box-shadow .2s; }
.escribenos-boton:hover .escribenos-fondo { background: var(--navy-3); box-shadow: 0 14px 34px rgba(23, 34, 56, .34), 0 2px 8px rgba(23, 34, 56, .2); }
.escribenos-icono, .escribenos-icono-cerrar { position: absolute; top: 50%; right: 16px; width: 22px; height: 22px; margin-top: -11px; }
.escribenos-rotulo { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s, margin .35s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .escribenos-boton:hover .escribenos-rotulo { max-width: 220px; opacity: 1; margin-right: 10px; }
}
.escribenos-interruptor:focus-visible + .escribenos-boton .escribenos-fondo { outline: 3px solid var(--steel-2); outline-offset: 3px; }
.escribenos-interruptor:focus-visible + .escribenos-boton .escribenos-rotulo { max-width: 220px; opacity: 1; margin-right: 10px; }
@keyframes escribenos-entra { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
/* Abierto, el botón pasa a ser la X. */
.escribenos-icono-cerrar { display: none; }
.escribenos-interruptor:checked + .escribenos-boton .escribenos-icono { display: none; }
.escribenos-interruptor:checked + .escribenos-boton .escribenos-icono-cerrar { display: block; }
.escribenos-interruptor:checked + .escribenos-boton .escribenos-rotulo { display: none; }

/* Tarjeta que sale del propio botón, por encima de él. Su borde derecho sobresale 16 px del de las fichas, para que se
   lea como una capa encima y no como parte de la rejilla, y lleva más sombra. */
.escribenos-velo { position: fixed; inset: 0; z-index: 1; visibility: hidden; pointer-events: auto; }
.escribenos-boton { z-index: 2; }
.escribenos-panel { position: absolute; z-index: 3; right: calc(var(--gutter) - 16px); bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 68px); width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 160px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 70px rgba(23, 34, 56, .30), 0 8px 20px rgba(23, 34, 56, .14); padding: 24px 24px 22px; pointer-events: auto; visibility: hidden; opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s; }
.escribenos-interruptor:checked ~ .escribenos-velo { visibility: visible; }
.escribenos-interruptor:checked ~ .escribenos-panel { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .escribenos-boton { animation: none; }
  .escribenos-rotulo, .escribenos-panel { transition: none; }
}
.escribenos-titulo { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--navy); }
.escribenos-texto { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.escribenos-aviso { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--down, #b23b3b); background: #fbf1f1; font-size: 14px; line-height: 1.45; color: var(--text); }
.escribenos-aviso--bien { border-left-color: var(--steel); background: #e8eff6; }
.escribenos-form { display: grid; gap: 6px; margin-top: 16px; }
.escribenos-form label { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.escribenos-form input[type="email"], .escribenos-form textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); font-size: 15px; line-height: 1.4; padding: 10px 12px; }
.escribenos-form textarea { resize: vertical; min-height: 110px; }
.escribenos-form input[type="email"]:focus, .escribenos-form textarea:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(31, 95, 139, .15); }
/* Informe: botones de selección (radios ocultos con su etiqueta), iguales en Mac, Windows y móvil. */
.escribenos-opciones { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.escribenos-opciones legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.escribenos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.escribenos-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.escribenos-form .escribenos-chips label { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.escribenos-form .escribenos-chips label:hover { border-color: var(--steel-3); }
.escribenos-chips input:checked + label { border-color: var(--navy); background: #e8eff6; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.escribenos-chips input:focus-visible + label { outline: 3px solid var(--steel-2); outline-offset: 2px; }
.escribenos-form button { margin-top: 12px; padding: 13px 18px; border-radius: var(--r); background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; transition: background .2s; }
.escribenos-form button:hover { background: var(--navy-3); }

.pie { border-top: 1px solid var(--line-2); padding: 22px 0 26px; font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }
.pie a { color: var(--steel); }
.pie a:hover { text-decoration: underline; }

/* En escritorio, solo la cabecera llega a los bordes, como la de la web: logo a la izquierda y «Salir» a la derecha.
   El contenido, el pie y «Escríbenos» siguen en los márgenes de 1.180 px. */
@media (min-width: 901px) {
  .cabecera .wrap { max-width: none; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}

@media (max-width: 760px) {
  :root { --header-h: calc(64px + env(safe-area-inset-top, 0px)); --gutter: 20px; }
  .banda { padding: 30px 0; }
  .banda-fila { gap: 18px; }
  .cliente-logo { height: 26px; }
  .banda-filete { height: 34px; }
  .banda h1 { font-size: 29px; }
  .salir { padding: 8px 15px; }
  .escribenos-boton { bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .escribenos-fondo { padding: 0 37px 0 15px; border-radius: 26px; }
  .escribenos-icono, .escribenos-icono-cerrar { right: 15px; }
  .escribenos-panel { right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 64px); width: calc(100vw - 32px); padding: 22px 20px 20px; }
  .cuerpo { padding: 32px 0 88px; }   /* sitio para el botón al final de la página */
  .informes { grid-template-columns: 1fr; gap: 20px; }
  .informe { padding: 20px 20px 18px; }
  .informe-imagen { margin-bottom: 18px; }
}

/* ---------- acceso ---------- */
/* El formulario se centra en el espacio libre y el pie va abajo del todo. Cada casilla lleva su nombre siempre a la
   vista, encima, y la casilla es solo una raya que se ilumina al escribir (opción A, filete, 30/10/2026). */
body.acceso {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0;
}
.acceso-caja { width: 100%; max-width: 380px; margin: auto 0; text-align: center; }
.acceso-logo { width: 250px; max-width: 82%; height: auto; margin: 0 auto 44px; }
.acceso-etiqueta { font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: #8fb3d1; margin: 0 0 20px; }
.acceso-form { display: flex; flex-direction: column; gap: 24px; text-align: left; }
.acceso-form .campo { display: flex; flex-direction: column; gap: 2px; }
.acceso-form .campo label { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--on-navy-3); }
.acceso-form input {
  width: 100%;
  height: 42px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  padding: 0 1px;
  outline: none;
  text-align: left;
  letter-spacing: .02em;
  transition: border-color .2s, box-shadow .2s;
}
.acceso-form input:focus { border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
/* Con el usuario y la contraseña guardados en el navegador, sin el fondo de color que pone al rellenar. */
.acceso-form input:-webkit-autofill,
.acceso-form input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: inset 0 0 0 100px var(--navy);
  transition: background-color 9999s;
}
.acceso-form input:-webkit-autofill:focus { box-shadow: 0 1px 0 #fff, inset 0 0 0 100px var(--navy); }
/* Lo que Chrome y Edge rellenan solos al cargar sale con su propia letra, fija y pequeña, hasta el primer clic. La
   imponen ellos con prioridad máxima y no se puede cambiar desde la página (::first-line probado y descartado, 30/10/2026). */
.acceso-form button { height: 50px; margin-top: 14px; border-radius: var(--r); background: #fff; color: var(--navy); font-weight: 700; font-size: 16px; transition: background .2s; }
.acceso-form button:hover { background: #e9eef5; }
.acceso-form button:focus-visible { outline-color: #8fb3d1; }
.acceso-error { color: #f2a9a9; font-size: 14px; font-weight: 600; line-height: 1.4; min-height: 1.4em; margin: 14px 0 0; }
.acceso-pie { margin: 0; padding: 28px 0 max(30px, env(safe-area-inset-bottom, 0px)); font-size: 12px; color: rgba(255, 255, 255, .45); text-align: center; }

/* ---------- avisos (página que no existe, error) ---------- */
body.aviso-pagina { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); }
.aviso { max-width: 460px; text-align: center; }
.aviso-logo { height: 26px; width: auto; margin: 0 auto 36px; }
.aviso h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.aviso p { color: var(--muted); font-size: 16px; }
.aviso p + p { margin-top: 18px; }
.aviso a { color: var(--steel); font-weight: 600; }
.aviso a:hover { text-decoration: underline; }