/* microson.net: plantilla nueva (microson/web#3).
   La paleta y las tipografías son las de alkar (harroin/alkar_marca):
   Inter para los textos, Outfit 600 para los titulares, noche para el texto,
   azul para titulares y enlaces, niebla para los fondos de bloque. */

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/outfit.woff2') format('woff2');
}

:root {
  --cian: #13B5EA;
  --azul: #2E3192;
  --noche: #0C1C34;
  --cielo: #3FA9F5;
  --gris: #55657D;
  --niebla: #EEF4F9;
  --blanco: #FFFFFF;
  --rojo-microson: #CF102D;

  --texto: var(--noche);
  --texto-secundario: var(--gris);
  --enlace: var(--azul);
  --fondo: var(--blanco);
  --fondo-bloque: var(--niebla);

  --letra: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letra-titulos: 'Outfit', var(--letra);
  --ancho: 72rem;
  --hueco: clamp(1rem, 4vw, 2rem);
  --radio: 0.5rem;
}

/* --- Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}

h1, h2, h3 {
  font-family: var(--letra-titulos);
  font-weight: 600;
  line-height: 1.2;
  color: var(--azul);
  margin: 0 0 0.75rem;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--noche); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.25rem; }

p, ul, ol { margin: 0 0 1rem; }

a { color: var(--enlace); text-underline-offset: 0.15em; }
a:hover { color: var(--noche); }

:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }

img, svg { max-width: 100%; height: auto; }

address { font-style: normal; }

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--hueco);
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: var(--hueco);
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--blanco);
}

/* --- Cabecera y menú -------------------------------------------------- */

.cabecera {
  border-bottom: 1px solid var(--niebla);
  background: var(--blanco);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1rem;
}
.cabecera__marca { display: block; line-height: 0; }
.cabecera__marca img { width: 212px; }

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu a {
  display: block;
  padding-block: 0.25rem;
  color: var(--noche);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--azul); }
.menu a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--cian); }

.cabecera__boton {
  display: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gris);
  border-radius: var(--radio);
  background: none;
  color: var(--noche);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* En móvil, con JS (sitio.js), el menú se pliega tras el botón. Sin JS se ve
   siempre: nadie se queda sin navegación. */
@media (max-width: 52rem) {
  .js .cabecera__boton { display: block; }
  .js .menu { flex-basis: 100%; }
  .js .menu:not(.menu--abierto) { display: none; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu a { padding-block: 0.75rem; border-bottom: 1px solid var(--niebla); }
}

/* --- Bloques de página ------------------------------------------------ */

.entrada {
  padding-block: clamp(3rem, 8vw, 5rem);
  background: var(--fondo-bloque);
}
.entrada p {
  max-width: 44rem;
  font-size: 1.1875rem;
  color: var(--texto-secundario);
}
.entrada__etiqueta {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul);
}

.bloque { padding-block: clamp(2.5rem, 6vw, 4rem); }
.bloque--niebla { background: var(--fondo-bloque); }
.bloque__intro { max-width: 44rem; color: var(--texto-secundario); }

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ficha {
  padding: 1.5rem;
  border: 1px solid var(--niebla);
  border-top: 3px solid var(--cian);
  border-radius: var(--radio);
  background: var(--blanco);
}
.ficha h3 { margin-bottom: 0.5rem; }
.ficha p { margin: 0; color: var(--texto-secundario); }
.ficha__para {
  margin-bottom: 0.5rem !important;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gris);
}

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--letra-titulos);
  font-weight: 600;
}
.pasos h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.pasos p { margin: 0; color: var(--texto-secundario); }

.llamada {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--azul);
  color: var(--blanco);
}
.llamada h2 { color: var(--blanco); }
.llamada p { max-width: 40rem; }

.boton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}
.boton:hover { background: var(--niebla); color: var(--noche); }

/* --- Pie -------------------------------------------------------------- */

.pie {
  padding-top: 3rem;
  background: var(--noche);
  color: var(--niebla);
  font-size: 0.9375rem;
}
.pie h2 {
  font-size: 1rem;
  color: var(--blanco);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pie a { color: var(--blanco); }
.pie a:hover { color: var(--cielo); }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { margin-bottom: 0.25rem; }

.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
}
.pie__final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  /* La raya, del ancho del texto y no del de la envoltura con su relleno. */
  background: linear-gradient(rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.15))
              top center / calc(100% - 2 * var(--hueco)) 1px no-repeat;
}
.pie__final p { margin: 0; }
.pie__firma { width: 180px; }

/* --- Portada ---------------------------------------------------------- */

/* Kit Digital, en segundo plano: una línea pequeña bajo la entrada. */
.entrada .entrada__nota {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
}

/* Fichas que llevan a una página: el titular es el enlace. */
.ficha h3 a { color: inherit; text-decoration: none; }
.ficha h3 a:hover { text-decoration: underline; }
.ficha h4 {
  margin: 0 0 0.5rem;
  font-family: var(--letra-titulos);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--azul);
}

/* Equipo: monogramas en lugar de fotos. */
.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.persona__avatar {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--letra-titulos);
  font-size: 1.5rem;
  font-weight: 600;
}
.persona h3 { margin-bottom: 0.25rem; }
.persona p { margin: 0; color: var(--texto-secundario); }
.equipo__subtitulo { margin-top: 3rem; }

/* Seis fichas: tres por fila en escritorio, en vez de cuatro y dos. */
.fichas--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* --- Kit Digital ------------------------------------------------------ */

/* Los logos de la financiación llevan fondo blanco: van en su recuadro. */
.entrada__logos {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: var(--radio);
  background: var(--blanco);
}

/* --- Textos legales (docs/legal/, layouts/legal.erb) ------------------ */

.texto-legal { max-width: 48rem; }
.texto-legal h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: 2rem; }
.texto-legal h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.texto-legal h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.texto-legal h4 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.texto-legal li { margin-bottom: 0.5rem; }
.texto-legal a { overflow-wrap: anywhere; }
.texto-legal table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.texto-legal th, .texto-legal td { padding: 0.5rem; border: 1px solid var(--niebla); text-align: left; vertical-align: top; }