@charset "UTF-8";

@import "header.css";
@import "footer.css";

@import "portada.css";
@import "nosotros.css";
@import "ubicacion.css";
@import "contacto.css";
@import "empresas.css";

@import "form.css";
@import "checkbox.css";

/* fuentes */

@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;500;700&display=swap');

/* CSS Document */

:root {
	--ancho: 95%;
	--anchomax: 1500px;
}

::selection {
	background: #EF4035;

	color: white;
}

body {
	scroll-behavior: smooth;

	margin: 0;
	padding: 0;

	background: white;

	font-family: 'Signika Negative', sans-serif;
	font-size: 16px;
	line-height: 110%;
	font-weight: 300;
	text-align: left;
	color: #58585A;

	hyphens: auto;
	word-break: normal;
}

/* herramientas y comportamientos */

.clear { display: block; clear: both;  }

strong { font-weight: 500; }

hr {
	margin: 50px 0;

	height: 1px;
	
	border: none;
	background: #8fa0ab;
	
	opacity: .5;
}

.separador {
	margin: 20px 0 30px 0;

	background-image: linear-gradient(to right, gainsboro, gainsboro);
	background-size: 100% 1px;
	background-position: 0 60%;
	background-repeat: no-repeat;
}

img { border: 0; }


a { color: inherit; text-decoration: none; }
a:hover { color: #EF4035; text-decoration: none; text-shadow: 0 0 2px #EF4035; }
a:active, a:focus { outline: 0; }

body, img, a, a:hover, button, input, main, header, nav, .animate, .logo, .social, .icon-menu li { transition: .5s; }

/* títulos */

h1 {
	margin: 0;
	padding: 0;

	font-size: 38px;
	line-height: 100%;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #EF4035;
}

h2 {
	margin: 0 0 10px 0;
	padding: 0;

	font-size: 30px;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
}

h3 {
	display: block;

	margin: 0;
	padding: 0;

	font-size: 22px;
	font-weight: 300;
	line-height: 100%;
}

/* main */

section {
	position: relative;
	
	width: 100%;
	min-height: 100vh;
}

.banner { height: 550px; }

.banner img {
    display: block;

    margin: auto;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media screen and (max-width: 768px) {
	.banner { height: 350px; }
}

.regresar {
	display: block;

	margin: 50px auto;
	
	width: var(--ancho); max-width: var(--anchomax);

	letter-spacing: 2px;
	text-transform: uppercase;
}

.regresar::before {
	content: '\00AB';

	margin-right: 5px;

	font-size: 120%;
	color: #EF4035;
}


/* archivos */

.archivos {
	margin: auto;

	width: var(--ancho); max-width: var(--anchomax);

	text-align: center;
}

.archivos article {
	display: grid;
    grid-template-columns: 25% 25% 25% 25%;

	gap: 50px 0;
	margin: 0 0 80px 0;
	padding: 0 0 80px 0;

	border-bottom: 1px dotted gray;

	font-size: 120%;
	font-weight: 500;
	line-height: 110%;
}

@media screen and (max-width: 768px) {
	.archivos article { grid-template-columns: 50% 50%; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.archivos article { grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3) }
}

@media screen and (min-width: 1024px) {
	.archivos article { grid-template-columns: 25% 25% 25% 25%; }
}

.archivos h1 {
	margin: 0 0 80px 0;
}

.archivos h2 {
	margin: 0 auto 80px auto;

	width: 80%; max-width: 300px;

	background-image: linear-gradient(to right, gainsboro, gainsboro);
	background-size: 100% 1px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.archivos h2 span { padding: 0 20px; background-color: white; } 

.archivos article a {
	padding: 80px 0 0 0;

	background-image: url(../img/layout/pdf.png);
	background-size: 60px auto;
	background-position: 50% 10px;
	background-repeat: no-repeat;
}

.archivos article a { background-image: url(../img/layout/pdf.png); }
.boletin-mensual article a { background-image: url(../img/layout/boletin.png); }

.archivos article a:hover { background-position: 50% 0; }