:root {
  --font: "Titillium Web", sans-serif;
  --azul-oscuro: #006996;
  --azul-claro: #009ee2;
  --gris-texto: #555;
  --header-height: 70px;

  --img-width: 35%;      /* 🔥 opción C */
  --img-max-width: 300px;
  --shadow: 0 4px 8px rgba(0,0,0,0.5);

}


/* =====================================================
   BOTÓN UNIVERSAL (VOLVER, NAVEGACIÓN DE MÉTODOS…)
===================================================== */

.btn {
  background: var(--azul-claro);
  color: #fff;
  font-weight: bold;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.1rem;
  display: inline-block;
  text-align: center;

  box-shadow: var(--shadow);
  transition: 0.25s ease;
}




.btn:hover {
  background: var(--azul-oscuro);
  transform: translateY(-2px);
}

/* Contenedor centrado para botones */
.centrado {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

h2{
  margin-top: 50px;
}

ul {
  margin-left: 50px;
  margin-top: 50px;
}

.titulo{
  font-size: 2rem;
}

/* Estilos para documentos legales */
.document p {
  text-align: justify;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Texto */
.descripcion {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: 1.5rem;
  line-height: 1.45;
  color: #333;
  text-align: justify;

  animation: fadeUp 0.7s ease-out;
}

@media (max-width: 900px) {
    .centrado {
        text-align: justify !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .document h1,
    .document h2,
    .document h3 {
        text-align: center !important;
        width: 100%;
    }
    .document p{
      text-align: justify;
    }
}

/* Contenedor para textos legales (70% de ancho) */
.legal-container {
  width: 70%;
  margin: 0 auto;
  animation: fadeUp 0.7s ease-out;
}

@media (max-width: 900px) {
  .legal-container {
    width: 95%;
  }
}