:root {
  --color1: #213448;
  --color2: #547792;
  --color3: #94B4C1;
  --color4: #ECEFCA;
  --color5: rgb(245, 245, 245);
  --blanco: white;
  --coazul: rgb(0, 68, 102);
  --colrazul: rgb(52 152 219);
  --colorAnima: rgb(255, 195, 0);
  --colorAnim2: #dccc4f;
  --colorAnim3: #fcdb63;
  --colorGris: rgb(54, 54, 52);
  --colorBoton: rgb(1, 1, 11)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: var(--colorRojo);
  color: var(--color1);
  padding: 1rem;
}
#contenedor_mayor{
  background-color: #fcdb63;
  margin: 0 auto;
  background: var(--color4);
  padding: 25px;
  width: 1100px;
  box-shadow: 0 4px 15px var(--colorGris);
  border-radius: 13px;

}
#titulo {
  font-weight: bold;
  font-size: xx-large;

}

.logo {
  height: 40px;
}

/* Cabecera */
header {
  background-color: var(--color1);
  color: var(--color4);
  padding: 2rem 1rem;
  border-bottom: 3px solid var(--color3);
  border-radius: 20px;
  margin-bottom: 20px;
  text-align: center;
}

header h1 {
  font-size: 1.5rem;
}

input,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--color2);
  border-radius: 5px;
}

.sin-raya {
  text-decoration: none;
  color: var(--color1);
}

.logo {
  max-height: 70%;
}

.fa-solid {
  color: var(--colorAnima);
}

.fa-solid:hover {
  transform: scale(2.5);
  box-shadow: 0 0 50px var(--colorAnima);

}

/* <!-- Encabezado de dos columnas --> */
/* <!-- Columna 1: Imagen --> */
.image-column img {
  width: 30%;
  height: auto;
  border-left: 540%;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
  /* Esto centra la imagen horizontalmente */

}

/* <!-- Columna 2: Texto --> */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 50px;
}

.text-column h2 {
  font-size: 2.5em;
  margin-top: 0;
  color: var(--colorGris);
}

.text-column p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--colorGris);
}

.section {
  background-color: var(--color4);
  padding: 50px;
}

.formulario {
  margin: 0 auto;
  background: var(--color4);
  padding: 25px;
  width: 880px;
  box-shadow: 0 4px 15px var(--colorGris);
  border-radius: 13px;
}

.acerca_de_1 {
  margin: 0 auto;
  background: var(--color4);
  padding: 55px;
  width: 580%;
  box-shadow: 0 4px 15px var(--colorGris);
  border-radius: 10px;
  margin-bottom: 20px;
  /* Añade un margen inferior */
}

.Acerca_de_1 h2 {
  background-color: var(--color3);
  color: var(--color1);
  text-align: right;
  width: 599%;
  padding: 5px;
  margin: 10px auto;
  border-radius: 80px 0 0 80px;
}

.recta h2 {
  background-color: var(--color3);
  color: var(--color1);
  text-align: right;
  width: 28vw;
  padding: 5px;
  margin: 10px auto;
  border-radius: 80px 0 0 80px;
}

.contenedor_formulario {
  margin: 0 auto;
  background: var(--color4);
  padding: 55px;
  width: 1000px;
  box-shadow: 0 4px 15px var(--colorGris);
  border-radius: 13px;
  margin-bottom: 40px;
  /* Añade un margen inferior */


}
.text {
  color: var(--colorAnima);
}

.text2 {
  color: var(--blanco);
  font-size: large;
}

/* Clases bootstrap */
.form-check-input:checked {
  background-color: var(--colorAnima) !important;
  border: 0;
}


h2 {
  color: var(--coazul);

}

.cta-container_1 {
  margin-top: 20px;
}

.cta-button {
  background-color: var(--colorAnima);
  color: var(--blanco);
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
}

.cta-button:hover {
  background-color: var(--colrazul);
}
.main {
  position: relative;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background-color: var(--color2);

}

/* CABECERA */
header {
  background-color: var(--color1);
  color: var(--color4);
  padding: 2rem 1rem;
  border-bottom: 3px solid var(--color3);
  border-radius: 20px;
  margin-bottom: 20px;
  /* Añade un margen inferior */

}

header h1 {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 2rem;
  color: var(--color4);
}
main h2 {
  background-color: var(--color3);
  color: var(--color1);
  text-align: right;
  width: 13vw;
  padding: 5px;
  margin: 10px auto;
  border-radius: 80px 0 0 80px;
}

/* Listado dentro de main */
main ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 44vw;
  box-shadow: none;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.75);
}

main li {
  font-size: 1.2em;
  border-bottom: 1px solid var(--color1);
  padding: 8px 20px;
  background-color: var(--blanco);
  border-radius: 10px;
  margin: 10px auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Color para elementos impares */
main li:nth-child(odd) {
  background-color: var(--color5);
}

/* Hover para lista */
main li:hover {
  background-color: var(--color3);
}

/* Enlaces dentro de lista */
main li a {
  margin-top: 25px;
  display: none;
  color: var(--color1);
  text-decoration: none;
  display: inline-block;
  width: 50%;
  text-align: center;
  align-items: center;
  height: 5px;
  line-height: normal;

}


main li:hover a {
  color: var(--colorNegro);
}

/* Alinear a la derecha el segundo enlace en cada línea */
main li a:nth-child(2) {
  text-align: right;
  padding-right: 50px;
}
h1 {
  color: var(--color1);
}

label {
  display: block;
  margin: 10px 0 5px;
}

input,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--color2);
  border-radius: 5px;
}
/* container */
.article-container__1 {

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: fit-content;
  min-width: 290px;
  resize: horizontal;
  /* Permite probar container queries */
  overflow: hidden;
  /* Oculta todo lo que desborde */
  margin: 1rem auto;
  background: none;
  /* Sin fondo extra */
  container-type: inline-size;
  /*le damos nombre  */
  container-name: card;
}

.opcion-content {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label+.opcion-content {
  display: block;
}

label {
  display: block;
  margin-top: 0.5rem;
  cursor: pointer;
}

.article__text {

  text-align: center;
  background: none;

}

.article__text h2 {

  font-size: 1.5rem;
  color: var(--color1);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.article__text p {
  font-size: 1rem;
  color: var(--color1);
  margin-bottom: 1rem;
}



.content_2 ol {
  padding-left: 20px;
}

.content_2 li {
  margin-bottom: 15px;
}

/* Enlaces circulares centrados */
.article__links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}


.article__links a {
  width: 100px;
  height: 100px;
  background-color: var(--color2);
  color: var(--blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.article__links a:hover {
  background-color: var(--color5);
}

/* CONTAINER QUERIES */
@container card (min-width: 490px) {

  /* tarjeta en fila */
  .article {
    padding-top: 0%;
    flex-direction: row;
    align-items: stretch;
  }

  /* Imagen ocupa mitad del ancho y tiene fondo */
  .article__img {
    width: 50%;
    padding-top: 0px;
    object-position: top center;
    background-color: var(--color1);
  }

  /* Texto ocupa mitad del ancho, con fondo */
  .article__tex {
    width: 50%;
    padding: 1.5rem;
    text-align: left;
    background-color: var(--color2);
  }

  /* Botones bajan y se centran */
  .article__links {
    margin-top: 2rem;
    justify-content: center;
  }

}

/* CQ PARA CONTENEDOR MUY ANCHO */
@container card (min-width: 800px) {
  .article__tex h2 {
    font-size: 1rem;
  }

  .article__tex p {
    font-size: 1.2rem;
  }

  .article__links a {
    width: 80px;
    height: 800px;
  }
}


details {
  background-color: var(--color3);
  border: 1px solid var(--color1);
  border-radius: 8px;
  padding: 2px;
  margin: 30px;
  transition: background-color 0.3s ease;
}

details[open] {
  background-color: var(--color2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--coazul);
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  list-style: none;
  position: relative;
  padding-left: 20px;
  /* Agrega espacio interno a la izquierda */
}

summary::before {
  content: "►";
  /* Carácter de flecha */
  position: absolute;
  /* respecto al summary */
  left: 7px;
  /* separación hacia la izquierda */
  transition: transform 0.3s ease;
  /* Transición suave al girar */
  color: var(--color5);
  /* Color blanco para mejor contraste */
}

/* Rota la flecha al abrir el <details> */
details[open] summary::before {
  transform: rotate(90deg);
  /* Flecha apuntando hacia abajo */
}

summary:hover {
  background-color: var(--color3);
}

.descargar {

  width: 20px;
  height: 20px;
  margin: 0px;
}

.archivo-titulo a {
  text-decoration: none;
  /* Quitar subrayado del enlace */
  color: var(--color1)
    /* Cambiar color del texto */
}

.caja {
  margin-left: 59;
  background-color: var(--color2);
  color: var(--color4);
  padding: 0.px8rem 1rem;
  border-radius: 8px;
  flex: 1 1 150px;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  min-height: 20px;
  margin-right: 10px;
  /* Espacio entre los elementos */

}

.caja img {
  margin-right: 0.5rem;
  height: 20px;
}

.credit {
  display: inline-block;
  flex: 1 1 100%;
  justify-content: space-evenly;
  /* Espaciado uniforme entre los dos enlaces */
  margin-top: 1rem;
  font-size: 0.9rem;
}

.credit a {
  background-color: var(--color2);
  color: var(--blanco);
  padding: 1rem 1rem;
  /* Espaciado interno */
  border-radius: 6px;
  text-decoration: none;
  /* Sin subrayado */
}