/* -----VARIABLES ------------------------------------------------------- */
/* --accent: #5CF64A; verde fuerte*/

:root {
	--measure: 60ch;
	--border-thin: 0.05rem;
	--border-thick: 0.2rem;
	--ratio: 1.5;
	--s-5: calc(var(--s-4) / var(--ratio));
	--s-4: calc(var(--s-3) / var(--ratio));
	--s-3: calc(var(--s-2) / var(--ratio));
	--s-2: calc(var(--s-1) / var(--ratio));
	--s-1: calc(var(--s0) / var(--ratio));
	--s0: 1rem;
	--s1: calc(var(--s0) * var(--ratio));
	--s2: calc(var(--s1) * var(--ratio));
	--s3: calc(var(--s2) * var(--ratio));
	--s4: calc(var(--s3) * var(--ratio));
	--s5: calc(var(--s4) * var(--ratio));
	--space: var(--s1);
	--dark: #02020A;
	--light: #f8f8ff;
	--primary: #1098f7;
	--secondary: #003058;
	--tertiary: #FF7538;
	--quaternary: #fd4d83;
	--accent: #E3F988;
    --link-highlight-color: var(--quaternary);
	--pie-font-color: var(--quaternary);
}
/* ################################################################################ */
/* SELECCION DE FUENTES ··························································· */
@font-face {
	font-family: 'CrimsonPro';
	src: url('../fonts/CrimsonPro-Variable.ttf') format('truetype');
}

@font-face {
	font-family: 'CrimsonPro-Italic';
	src: url('../fonts/CrimsonPro-Italic-Variable.ttf') format('truetype');
}

@font-face {
	font-family: 'AlegreyaSans';
	font-weight: bold;
	src: url('../fonts/AlegreyaSans-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'AlegreyaSans';
	font-weight: normal;
	src: url('../fonts/AlegreyaSans-Medium.ttf') format('truetype');
}
/* ##################################################################################### */
/* RESET rules de https://piccalil.li/blog/a-more-modern-css-reset/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role,
   which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

* {
	max-inline-size: 60ch;
}

html,
body,
div,
header,
nav,
main,
footer {
	max-inline-size: none;
}


/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	min-width: 85px;
	height: auto;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* EVERY LAYOUT ###################################################################### */

/*   THE STACK  ······························································· */

.stack {
/* ↓ The flex context */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * {
/* ↓ Any extant vertical margins are removed */
margin-block: 0;
}
.stack > * + * {
/* ↓ Top margin is only applied to successive elements */
margin-block-start: var(--space, 1.5rem);
}

/*   THE BOX  ······························································· */

.box {
	/* ↓ Padding set to the first point on the modular scale */
	padding: var(--s1);
	/* ↓ Assumes you have a --border-thin var */
	border: var(--border-thin) solid;
	/* ↓ Always apply the transparent outline, for high contrast mode */
	outline: var(--border-thin) transparent;
	outline-offset: calc(var(--border-thin) * -1);
	/* ↓ Color de fondo, modificable via, p.e., style="--box-background: red" */
	--box-background: var(--light);
	--box-color: var(--dark);
	color: var(--box-color);
	background-color: var(--box-background);
}
.box * {
	/* ↓ Force colors to inherit from the parent
and honor inversion (below) */
	color: inherit;
}
.box.invert {
	/* ↓ The color vars inverted */
	color: var(--box-background);
	background-color: var(--box-color);
}

/*   THE CENTER  ······························································· */

.center {
	/* ↓ Remove padding from the width calculation */
	box-sizing: content-box;
	/* ↓ The maximum width is the maximum measure */
	max-inline-size: var(--measure);
	/* ↓ Only affect horizontal margins */
	margin-inline: auto;
	/* ↓ Apply the minimum horizontal space */
	padding-inline-start: var(--s1);
	padding-inline-end: var(--s1);
}

/*   THE CLUSTER  ······························································· */

.cluster {
	/* ↓ Set the Flexbox context */
	display: flex;
	/* ↓ Enable wrapping */
	flex-wrap: wrap;
	/* ↓ Set the space/gap */
	gap: var(--space, 1rem);
	/* ↓ Choose your justification (flex-start is default) */
	justify-content: center;
	/* ↓ Choose your alignment (flex-start is default) */
	align-items: center;
}

/* Anidando el lista-items dentro del espacio-entre se puede construir un menú
   de navegación que eche todos los links debajo del logo */
.cluster.espacio-entre {
	justify-content: space-between;
}

.cluster.lista-items {
	justify-content: flex-start;
	/* ↓ Para apretar los items cuando hacen wrap */
	line-height: 0.5;
}

.cluster.lista-items a {
	/* ↓ Quitar los subrayados de los enlaces */ 
	text-decoration: none;
}

/*   THE GRID  ···································································· */
.grid {
	/* ↓ Establish a grid context */
	display: grid;
	/* ↓ Set a gap between grid items */
	grid-gap: 1rem;
	/* ↓ Set the minimum column width */
	--minimum: calc(var(--measure) / 2);
}
@supports (width: min(var(--minimum), 100%)) {
	.grid {
		/* ↓ Enhance with the min() function into multiple columns */
		grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum), 100%), 1fr));
	}
}

/*   THE FRAME  ··································································· */
.frame {
	--n: 16; /* numerator */
	--d: 9; /* denominator */
	aspect-ratio: var(--n) / var(--d);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frame > img,
.frame > video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*   THE ICON  ···································································· */
.icon {
	height: 1.25em;
	/* ↓ Override the em value with `1cap`
	   where `cap` is supported */
	height: 1.6666cap;
	width: 1.25em;
	width: 1.6666cap;
}

.bigicon {
	height: 2em;
	/* ↓ Override the em value with `1cap`
	   where `cap` is supported */
	height: 2.6666cap;
	width: 2em;
	width: 2.6666cap;
}

.with-icon {
	/* ↓ Set the `inline-flex` context,
	   which eliminates the word space */
	display: inline-flex;
	align-items: center;
}
.with-icon .icon {
	/* ↓ Use the logical margin property
	   and a --space variable with a fallback */
	margin-inline-end: var(--space, 0.5em);
}

.with-icon .bigicon {
	/* ↓ Use the logical margin property
	   and a --space variable with a fallback */
	margin-inline-end: var(--space, 0.5em);
}

/* THE WRAPPER  ····································································
 * Sets a max width, adds a consisten gutter and horizontally
 * centers the contents
 */
.wrapper {
  max-width: 70rem;
  padding: 0 get-size('500');
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* ################################################################################ */
/* ESTILOS PROPIOS ································································ */

body {
	font-family: 'CrimsonPro', serif;
	font-weight: 400;
	font-size: 24px;
	background: var(--light);
	color: var(--dark);
}

em {
	font-family: 'CrimsonPro-Italic', serif;
	font-weight: 400;
}

strong {
	font-family: 'CrimsonPro', serif;
	font-weight: 800;
}

h1, h2, h3, h4 {
	font-family: 'AlegreyaSans', sans-serif;
	font-weight: bold;
	color: var(--primary);
}

.radius {
  border-radius: 0.35rem;
}

.sombra {
	border-width: 0;
	border-color: transparent;
    box-shadow: 0 0 var(--s-5) var(--s-5) lightgrey;
}

.sin-borde {
	border-width: 0;
	border-color: transparent;
}

.box-bglight {
	--box-color: var(--dark);
	--box-background: var(--light);
}

.enlace-texto {
	color: currentcolor;
	text-decoration: underline var(--link-highlight-color) solid;
}

.enlace-texto:hover {
	color: var(--link-highlight-color);
}

.enlace-titular {
	color: currentcolor;
	text-decoration: none;
}

.enlace-titular h2:hover {
	color: var(--link-highlight-color);
/*	text-decoration: underline var(--link-highlight-color) solid; */
}

.enlace-promo {
	font-family: 'AlegreyaSans', sans-serif;
	font-weight: bold;
	font-size: 1.875rem;
	color: var(--quaternary);
	text-decoration: underline var(--quaternary) solid;
	/* margin-top: 0rem; */
}

.enlace-promo:hover {
	color: var(--primary);
}

.enlace-promo-alt {
	font-family: 'AlegreyaSans', sans-serif;
	font-weight: bold;
	font-size: 1.875rem;
	color: var(--primary);
	text-decoration: underline var(--primary) solid;
	/* margin-top: 0rem; */
}

.enlace-promo-alt:hover {
	color: var(--quaternary);
}

.font-subr {
	text-decoration: underline var(--link-highlight-color) solid;
}

.boton {
	--box-color: var(--quaternary);
	--box-background: var(--secondary);
	text-decoration: none;
	border: var(--border-thick) solid;
	font-weight: bold;
	padding: var(--s0);
}

.boton:hover {
	--box-background: var(--accent);
	--box-color: var(--secondary);
}

.about-font {
	color: var(--primary);	
}

.titular {
	font-size: var(--s3);
	padding-bottom: var(--s3);
}

.pagination-font {
	font-family: 'AlegreyaSans', sans-serif;
	font-size: var(--s2);
}

.pagination-font a {
	text-decoration: none;
}

.pagination-font a:hover {
	text-decoration: underline var(--link-highlight-color) solid;
}

.bg-image {
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	/* ↓ Do not resize to smaller than this. */ 
	min-width: 350px; 
	min-height: 261px;
}

.post-teaser {
	text-decoration: none;
	color: white;
	text-shadow: 0px 0px var(--s-1) black;
}

.video-responsive {
  position: relative;
  /* ↓ Proporción de aspecto 16:9 */
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* NAVEGACIÓN SUPERIOR ####################################################### */

.top-nav {
	font-family: 'AlegreyaSans', sans-serif;
	font-weight: bold;
}

.top-nav a {
	text-decoration: none;
	display: block;
	position: relative;
	color: var(--quaternary);
}

.top-nav a:hover {
	color: var(--accent);
}

.top-nav a[aria-current='active'],
.top-nav a[aria-current='page'] {
	color: var(--accent)
}

.top-nav a[aria-current='active']::before,
.top-nav a[aria-current='page']::before {
	content: '';
	display: block;
	width: 100%;
	height: 0.25rem;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.25rem;
	background: var(--accent);
}

/* PIE DE PAGINA ############################################# */

nav ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
	justify-content: center;
	align-items: center;
}

nav li a {
	padding: var(--s-2, 1.5em) var(--s0, 1.5em);
}

nav .logo {
	max-width: 15%;
}

.piepag {
	padding: var(--s0);
	background-color: var(--secondary);
	font-family: 'AlegreyaSans', sans-serif;
	font-weight: bold;
}

.pie-accent-color {
	color: var(--accent);
}

.pie-font-color {
	color: var(--pie-font-color);
}

/* ################################################################################ */
/* HERO IMG LAYOUT */
/* **
   Create three grid areas (boxes) that overlap each other, essentially creating three layers.
   Grid box 1 (layer 1): Image
   Grid box 2 (layer 2): Gradient overlay
   Grid box 3 (layer 3): Call to action text/content
*/

.top-banner-section {
  display: grid;
  grid-template-columns: 1fr; // stretch to the full frame
  grid-template-rows: 350px; // 350 pixels tall
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  align-content: center;
  justify-content: center;
}
.top-banner-section .banner-image-div {
    grid-area: 1 / 1 / 2 / 2;
} 
.top-banner-section .banner-overlay-div {
    grid-area: 1 / 1 / 2 / 2;
} 
.top-banner-section .banner-text-div {
    grid-area: 1 / 1 / 2 / 2;
} 

/* Banner image (layer 1) */
.banner-image {
	display: grid;
	/* ↓ Do not resize to smaller than this. */ 
	min-width: 350px; 
	width: 100%;
	height: 100%;
	/* ↓ Using this so the image can be any size and still look halfway decent. */ 
	object-fit: cover; 
}

/* Gradient overlay (layer 2)
   gradient overlay going from black to transparent.
   note: search for a gradient overlay generator to make this easier.
*/
.banner-overlay-div {
  display: grid;
  max-width: 100%;
  /* ↓ Elimino la capa degradada porque oscurece mucho y en las
   *   fotos en las que se utiliza no hace falta */
  /* background: transparent; */
  
  background: black;
  background: linear-gradient(
    60deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  /* Start at black at the bottom left'ish and goes at a 60% angle.
     This will make the white easy to read with nearly any image. */
}

/* Banner html components (layer 3)
   banner text
*/
.banner-text-div {
  display: grid;
  align-items: center;
  margin-left: 15px;
  margin-right: 15px;
}

/* Typograhy */
.banner-h1-text {
  font-family: 'AlegreyaSans', sans-serif;
  font-weight: bold;	
  /* ↓  font can get larger, but no smaller than 10 points. */ 
  /* font-size: calc(10pt + 0.15vw); */
  font-size: var(--s3);
  line-height: 1.1;
  color: white;
}

.banner-body-text {
  font-family: 'AlegreyaSans', sans-serif;
  font-weight: bold;	
  /* ↓  font can get larger, but no smaller than 10 points.
  font-size: calc(10pt + 0.15vw);
  */
  font-size: var(--s1);
  margin-top: 0.5em;
  color: white;
  text-decoration: none;
}
.banner-body-text:hover {
    color: white;
}
.banner-body-text:visited {
    color: white;
}
.banner-body-text:active {
    color: white;
}
.banner-btn {
  margin-top: 1em;
}
.banner-btn-item {
	/* ↓ responsive size, but keep a minimum. */ 
  font-size: calc(8pt + 0.15vw); 
  padding-top: calc(0.5em + 0.08vw);
  padding-bottom: calc(0.5em + 0.08vw);
  padding-left: calc(0.5em + 0.08vw);
  padding-right: calc(0.5em + 0.08vw);
  color: blue;
  background-color: white;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid white;
}
.banner-btn-item:link {
    text-decoration: none;
}
.banner-btn-item:visited {
    text-decoration: none;
}