/* INDEX
-----Variables-----
-----Layout-----
-----Media-----
-----Tipografia-----
-----Tablas-----
-----Formulario & botones-----
-----Footer-----
-----Media Queries-----
*/
/* -----Variables----- */
:root {
    --primario: #F2A444;
    --secundario: #3C2240;
    --terciario: #ECEAEA;
    --acento: #E8003A;
    --texto: #120A07;
    --blanco: #ffffff;
    font-size: 17px;
}

/* -----Layout----- */
section,
footer {
    padding: 50px 0;
}

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

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

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

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

.texto {
    background-color: var(--texto);
    color: var(--blanco);
}

a {
    color: var(--acento);
    font-weight: 600;
    text-decoration: none;
    transition: all .5s;
}
a:hover{
    color: var(--secundario)
}
.secundario a {
    color: var(--primario);
}
.secundario a:hover {
    color: var(--acento);
}
img {
    max-width: 100%;
    height: auto;
}

h3 img {
    max-width: 80%;
}

p img {
    max-width: 50%;
}

.imagen-inicio-articulo {
    border-radius: 12px;
}

/* [class^="col"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(112, 44, 249, 0.15);
    border: 1px solid rgba(112, 44, 249, 0.3);
} */
#titulo {
    padding: 100px 0 50px;
    background-image: url(img/header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 40%;
    background-attachment: fixed;
}
/* -----Media----- */
.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%;
  }
/* -----Tipografia----- */
body {
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--texto);
}

h1 {
    font-size: 3.294rem;
}

h2 {
    font-size: 3.8rem;
    font-weight: 200;
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2::after {
    content: "";
    width: 150px;
    height: 5px;
    background-color: var(--acento);
}
.primario h2::after{
    background-color: var(--secundario);
}
h3 {
    font-size: 1.647rem;
    text-align: center;
}

h4 {
    font-size: 1.176rem;
}

h1 span {
    font-size: 2rem;
    font-style: italic;
    display: block;
    font-weight: normal;
}

h3 span {
    display: block;
    color: var(--acento);
    font-weight: 300;
    font-size: 2.059rem;
}
.text-right {
    text-align: right;
    border-right: 1px solid var(--blanco);
}
/* -----Tablas----- */
table {
    width: 100%;
    margin-bottom: 30px;
}
td {
	background-color: #F785A2;
	color: var(--texto);
	font-weight: 600;
}
th{
    font-weight: 300;
    font-style: italic;
}
th,td{
    border: 2px solid var(--acento);
    padding: 5px 10px;
}
#datos-generico td {
    background-color: #C77ED3;
    border: 2px solid var(--secundario);
}
#datos-sselective th{
    background-color: var(--acento);
}
#datos-generico th{
    background-color: var(--secundario);
    border: 2px solid var(--secundario);
}
th .encabezado, td .encabezado{
    border: var(--blanco) 1px solid;
}
.nota{
    font-size: 0.824rem;
}
/* -----Formulario & botones----- */
.btn-primary{
    background-color: var(--acento);
    border-color: var(--acento);
}
.btn-primary:hover{
    background-color: var(--primario);
    border-color: var(--primario);
    color: var(--secundario);
}
/* -----Footer----- */
footer.row div{
    padding: 0 50px;
}
footer ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
footer a{
    font-weight: 300;
    color: var(--blanco);
}
/* -----Media Queries----- */
/* movil grande */
@media screen and (min-width: 576px) {

}

/* tablet */
@media screen and (min-width: 768px) {
    /* iframe{
        height: 200px;
    } */
}

/* tablet horizontal */
@media screen and (min-width: 992px) {
    /* iframe{
        height: 280px;
    } */
}

/* laptop */
@media screen and (min-width: 1200px) {
    /* iframe{
        height: 350px;
    } */
}

/* desktop */
@media screen and (min-width: 1400px) {
    /* iframe{
        height: 370px;
    } */
}