@charset "utf-8";

/* -------------------------------------------- */
/* ------------- GENERALES -------------------- */
/* -------------------------------------------- */

* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;    
    font-family: "Open Sans", sans-serif;
    color: #FFF;
	text-align: center;
	scroll-behavior: smooth;
}

/* COLORS */

:root {
	--rojo: #c34238; /* pagina ejemplo #e02633; */
	--redok: #e53935;
	--red: #cb0d18;
	--rojooscuro: #AE0002;
    --fucsia: #e91e63;
    --amarillo: #fcb900;
    --cyan: #47948e;
	--cyan_boton: #4AA19A;
	--cyanazul: #105463;
	--violeta: #6205C6;
	--lightvioleta: #8a3ffb;
	background-color: #000;
	color: #FFF;
	--maxwidth: 1200px;
}

/* FONTS */

@font-face {
  font-family: 'Perpetua';
  src: url('../fonts/Perpetua.woff2') format('woff2'),
       url('../fonts/Perpetua.woff') format('woff'),
	   url('../fonts/Perpetua.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Perpetua-bold';
  src: url('../fonts/Perpetua-Bold.woff2') format('woff2'),
       url('../fonts/Perpetua-Bold.woff') format('woff'),
	   url('../fonts/Perpetua-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Perpetua-italic';
  src: url('../fonts/Perpetua-Italic.woff2') format('woff2'),
       url('../fonts/Perpetua-Italic.woff') format('woff'),
	   url('../fonts/Perpetua-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'october';
  src: url('../fonts/october-crow.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'haunting';
  src: url('../fonts/haunting-attraction.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* BODY */

.container {
    display: block;
    width: 92%;
    margin: 0 auto;
	position: relative;
	max-width: 1600px;
}

@media screen and (max-width: 500px) {
	.container {
		width: 100%;
/*		padding-inline: 20px;*/
	}
}


.titulo {
	display: block;    
	margin-bottom: 20px;
	margin-top: -8px;
	padding-bottom: 10px;
	color: var(--redok);
	border-bottom: 1px #AE0002 solid;	
	text-wrap: balance;
	font-family: "Perpetua", "Open Sans", sans-serif;
	font-weight: 800;
    font-size: 3em;
}

@media screen and (max-width: 800px) {
	.titulo {
		font-size: 2.6em;
	}
}
  
.redline {
	display: block;    
	width: 100%;
	color: var(--redok);
	border-bottom: 1px #AE0002 solid;		
}

.noscript-warning {
    text-align: center; 
    width: 100%; 
    color: #FFF;
    padding: 15px;    
    background-color: #cb0d18;
    font-size: .9rem;
    font-weight: 500;
}



/* -------------------------------------------- */
/* ------------------- MAIN ------------------- */
/* -------------------------------------------- */

main {
    min-height: 400px;
	color: black;
}