body {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/*---variables---*/
:root {
  --primario: rgb(231, 175, 66);
  --secundario: #eae9e9;
  --terciario: #9e9e9e;
  --clave: #7C4784;
  --footer: black;
  font-size: 17px;
}

/*-----layout----*/
section {
  padding: 50px 0;
}

.primario {
  background-color: var(--primario);
}

.secundario {
  background-color: var(--secundario);
}

.terciario {
  background-color: var(--terciario);
}

.clave {
  background-color: var(--clave);
}

.footer {
  background-color: var(--footer);
}


img {
  max-width: 100%;
  height: max-content;
}

.container-iframe {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

[class^="col"] {
  padding-top: 5rem;
  padding-bottom: 5rem;

}
table{
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 15px;
}


/*---media queries---*/


@media screen and (min-width: 576px) {

  .container,
  .container-sm {
    max-width: 540px;
  }
}

@media screen and (min-width: 768px) {

  .container,
  .container-md,
  .container-sm {
    max-width: 720px;
  }
}

@media screen and (min-width: 800px) {
  .container {
    background-color: #eae9e9;
  }
}

@media screen and (min-width: 992px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 960px;
  }
}

@media screen and (min-width: 1200px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1140px;
  }
}

@media screen and (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}

header {
  padding: 100px 0 50px;
  background-image: url(img/estilo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 56%;
}

header .col-12 {
  flex: 0 0 auto;
  width: 100%;
  background-color: #0000007d;
}

#titulo {
  background-color: #00000085;
}

h1 {
  font-size: 3.294rem;
  color: rgb(255, 255, 255);
}

h2 {
  font-size: 2.706rem;
  color: #eae9e9;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}


h3 {
  font-size: 3.1rem;
  font-weight: 151;
  letter-spacing: 0.085em;
  font-style: normal;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;

}

h3::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #f60404;

}

h4 {
  font-size: 1.176rem;
  display: flex 0 0 auto;
}


h1 span {
  font-size: 2rem;
  font-style: italic;
  display: block;
  font-weight: normal;
  color: rgb(231, 175, 66);
}
h2 span{
  color: black;
}

header button.btn {
  background-color: #7C4784;
  border: 0;
}

button.btn {
  background-color: #7C4784;
  border: 0;
}

p {
  color: black;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
ul, li, a{
  color:var(--primario)
}

/* GAMA DE COLORES
  #3C2240 rgba[60,34,64,0.5]
  #F2A444 rgb[242,164,68]
  #E8003A rgb[232,0,58]
  #120A07 rgb[18,10,7] */