/* UNIVERSAL */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
	background-color: #FFCC99;
}

/* ROOT FONT STYLES */
* {font-family: Helvetica, sans-serif;}

/* TYPOGRAPHY */
h1 {font-size: 2rem; text-align: center;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.3rem;}
h4 {font-size: 1.1rem;}
h5 {font-size: 1rem; margin: 0;}
h6 {font-size: 0.875rem;}
p {font-size: 1.125rem;font-weight: 300;line-height: 1.3;}

.font-light {font-weight: 300;}
.font-regular {font-weight: 400;}
.font-heavy {font-weight: 700;}
a:visited {color: red;}
a:link {color:rgb(2, 2, 155) ;}

/* POSITIONING */
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;margin-left: auto;margin-right: auto;}
.justify {text-align: justify;}

.temas {display:flex;flex-direction: column; /* Apila las imágenes verticalmente */}
.temas{margin-bottom: 8px;padding-bottom:5px; padding-left: 1px; border: 1px solid #a76f03;}
.temas h3 {margin-top: 0px;font-size: 1em;background-color: #a76f03;}
.temas p {text-align:left;margin-left:2px;margin-right:2px; margin-top: 2px;margin-bottom: 5px;font-size: 1em;line-height: 1.1em;}
.temas a:link,a:visited {font-size: 1em;line-height: 1.1em;text-indent: 0px;}
.temas i {line-height: 1.1em;}
/* ==== GRID SYSTEM ==== */
.jumbotron {height: auto;width: 100%;z-index: 100 !important;}
.jumbotron img {max-width: 100%;height: auto;}
.col-2 img {max-width: 100%;height: auto;}
.img {max-width: 100%;height: auto;}
.container {width: 90%;margin-left: auto;margin-right: auto;}
.row {position: relative;width: 100%;}
.row [class^="col"] {float: left;margin: 0.5rem 1%;min-height: 0.125rem;}
.tamimg img {max-width: 100%;height: auto;vertical-align: bottom;}
.tamimg {width: 90%;max-width: 80em;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width: 96%;}
.col-7 img {max-width: 100%;}
.col-7 li {font-size: 1.1rem;font-weight: 300;line-height: 1.5em;}
.row::after {content: "";	display: table;clear: both;}

/**********************************************/
@media only screen and (min-width: 540px) {  /* 540px */
  .container {width: 80%;}
}
/**********************************************************/
@media only screen and (min-width: 768px) {  
  .jumbotron {height: auto;}
  .col-1 {width: 4.33%;}
  .col-2 {width: 13%;}
  .col-3 {width: 21%;}
  .col-4 {width: 29.33%;}
  .col-5 {width: 37.66%;}
  .col-6 {width: 45%;}
  .col-7 {width: 58%;}
  .col-8 {width: 68%;}
  .col-9 {width: 71%;}
  .col-10 {width: 79.33%;}
  .col-11 {width: 87.66%;}
  .col-12 {width: 96%;}
}
/***********************************************************/
@media only screen and (min-width: 960px) { /* 960px */
  .container {width: 90%;max-width: 80em;}
}

nav {
  background-color: #a76f03;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Alinea los elementos al centro horizontalmente */
  padding: 10px;
}
nav.center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79%;
  max-width: 1220px;
  z-index: 100;
}
nav ul {display: flex;align-items: center;text-align: center;}
.menu {list-style: none; display:flex;  margin: 0; padding: 0; z-index: 100 !important;}
.menu li {padding: 15px;}
.menu li ul li {padding: 5px;}
.menu a {color: #fff;text-decoration: none;}
.menu .dropdown {position: relative;}
.menu .submenu {
  display: none;
  position: absolute;
  background-color: #6e078d;
  padding: 0;
  margin: 0;
  list-style: none;
  top: 100%;
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Centrar horizontalmente */
  z-index: 100 !important;
}
.menu .dropdown:hover .submenu {display: block !important;}

/* Estilos para el menú responsive */
#toggle {display: none;}
label[for="toggle"] {display: none;cursor: pointer;font-size: 24px;}


nav {
    background-color: #a76f03;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinea los elementos al centro horizontalmente */
    padding: 10px;
}
nav.center {display: flex;align-items: center;justify-content: center;width: 79%;max-width: 1220px;z-index: 100;}
nav ul {display: flex;align-items: center;text-align: center;}
.menu {list-style: none; display:flex; margin: 0;padding: 0;z-index: 100 !important;}
.menu li {padding: 15px;}
.menu li ul li {padding: 5px;min-width: 120px;}
.menu a {color: #fff;text-decoration: none;}
.menu .dropdown {position: relative;}
.menu .submenu {
    display: none;
    position: absolute;
    background-color: #a76f03;;
    padding: 0;
    margin: 0;
    list-style: none;
    top: 100%;
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Centrar horizontalmente */
    z-index: 100 !important;
}
.menu .dropdown:hover .submenu {display: block !important;}

/* Estilos para el menú responsive */
#toggle {display: none;}
label[for="toggle"] {display: none;cursor: pointer;font-size: 24px;}

/****************************************/
@media screen and (max-width: 1300px) {
  nav.center {width: 100%;}
  .menu li {padding: 0.65rem;}
  .tamimg{width: 100%;}
  .col-6{width: 96%;}
  }

/****************************************/
@media only screen and (max-width: 970px) {
  #col3 {float:none;  width: 66%; margin-left:17%; margin-right: 17%;}
  #col3 img{max-width:70%; height: auto;}
  .col-2 {width: 100%; height: auto;}
  .col-7 {width: 100%;}
  #col8 {float:none;  width: 66%; margin-left:17%; margin-right: 17%;}
}

@media screen and (max-width: 768px) {
    label[for="toggle"] {display: block;}

/* Mostrar el menú cuando el checkbox está marcado */
#toggle:checked + .menu-container .menu {
    display: flex;
    flex-direction: column;
    width: 70%;
    max-width: 300px;
    position: absolute;
    top: 100%;
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center;
    background-color: #6e078d;
    margin: 0 auto;
    padding: 0;
}
.menu {
      display: none;
      flex-direction: column;
      width: 50%;
      max-width: 200px;
      position: absolute;
      top: 90%;
      text-align: center;
      background-color: #a76f03 /* Cambia el color de fondo para que sea consistente con el menú */
    }
.menu li {padding: 10px;text-align: center;border-bottom: 1px solid #fff;}
.menu .dropdown:focus-within .submenu {display: block;}
.submenu {width: 90%;min-width: 170px;}
#toggle:checked + .menu {display: flex;}
.nomostrar {display: none;}
}