@font-face {
    font-family: 'robotoregular';
    src: url('Typo/roboto-variablefont_wdthwght-webfont.woff2') format('woff2'),
         url('Typo/roboto-variablefont_wdthwght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: 'robotoregular';
  line-height: 1.6; /* Altura de línea para mejorar la lectura */
  color: #000b31; /* Color del texto principal */
  background: #d9fffc; /* Fondo blanco para toda la página */
  overflow-x: hidden; /* Evita que se pueda deslizar horizontalmente */
}

img {
  max-width: 100%; /* Se ajustan al ancho disponible */
  display: block; /* Elimina espacios en línea debajo de la imagen */
}

/* Enlaces sin subrayado por defecto */
a {
  text-decoration: none; /* Quita el subrayado */
  color: inherit; /* Hereda el color del elemento padre */
}
.container {
  width: 90%;              /* El contenido ocupa el 90% del ancho de la pantalla */
  max-width: 1100px;       /* Pero nunca supera los 1100px para mantener legibilidad */
  margin: auto;            /* Centra el contenedor horizontalmente */
  position: relative; 
}

.content-page {
  padding: 1rem 0; /* Añade espacio arriba y abajo para que la página respire */
}

/* Título principal de la página */
.content-page h1 {
  text-align: center; /* Centra el título */
  font-size: 2.2rem; /* Tamaño grande para jerarquía visual */
  margin-bottom: 2.5rem; /* Espacio inferior amplio */
  color: #000b31; /* Color morado corporativo */
}

.cards-grid {
  display: grid;                       /* Activa grid layout */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
  gap: 2rem;                           /* Separación entre tarjetas */
  margin-top: 2rem;                    /* Espacio superior */
}

@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
  }
}

@media (max-width: 600px) {
  .cards-grid {
    grid-template-columns: 1fr;        /* Una columna */
  }
}

/* Tarjeta individual */
.card {
  background: #c4f0ff;                 /* Fondo gris claro */
  padding: 1.5rem;                     /* Espaciado interno */
  border-radius: 10px;                 /* Bordes redondeados */
  border: 1px solid #335b68;              /* Borde suave */
  transition: 0.2s;                    /* Suaviza hover */
  position: relative; 
  z-index: 2; /* Por encima del enlace */ 
  pointer-events: auto; /* Asegura que el contenido no se vuelva clickeable */
}

.card h2 {
  text-align: center; /* Centra el título */
  font-size: 1.2rem; /* Tamaño grande para jerarquía visual */
  margin-bottom: 2.5rem; /* Espacio inferior amplio */
  color: #000b31; /* Color morado corporativo */
}
/* Efecto hover */
.card:hover {
  transform: translateY(-5px);         /* Se eleva ligeramente */
}

.h1_inv {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.site-footer {
  background: #c4f0ff;                 /* Fondo gris claro */
  padding: 1rem 0;                     /* Espaciado vertical */
  margin-top: 2rem;                    /* Separación del contenido */
  text-align: center;                  /* Centra el texto */
  font-size: 0.9rem;                   /* Tamaño ligeramente reducido */
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Enlaces del footer */
.site-footer a {
  color: #ffffff;                      /* Morado corporativo */
  font-weight: 600;                    /* Negrita */
}