:root {
    --content-width: 850px;
    --font-x-large: 2.25em;
    --font-large: 1.5em;
    --font-small: 0.75em;
}

body {
  /* color: #222; */
  /* line-height: 1.5; */
  font-size: 1.25em;
  margin: 0;
  /* max-width: 768px; */


  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
/*  font-weight: 400; */
  font-style: normal;
}

:link,
:visited {
    color: #000;
    /* background-color: #FF0; */
    text-decoration: none;

    &:hover {
	text-decoration: underline;
    }
}

.portafolio article {
    display: flex;
    justify-content: space-between;
    align-items: center;

    header {
	text-align: center;
	flex-grow: 1;

	h1, h2, h3, h4, h5, h6 {
	    font-family: "Francois One", sans-serif;
	    font-weight: 400;

	    @media (min-width: 650px){
		font-size: 2em;
	    }
	}
    }

    &:nth-child(odd) {
	flex-direction: row-reverse;
    }

    > .thumbnail {
	max-width: 60%;
	> img {
	    display: block;
	}
    }
}

.halfwidth {
    @media (min-width: 650px) {
	max-width: 50%;
    }
}

.f-right {
    @media (min-width: 650px) {
	float: right;
    }
}

/* Página de Inicio */

.home-header {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 100vh;
    justify-content: space-between;
    
    max-width: none;
    margin: 0;
}

.site-brand {
    margin: 0 auto;
    h1 {
	text-align: center;
    }
}

ul.frases {
    list-style: none;
    margin: 0 auto;
    padding: 2em 0;
    text-align: center;
    min-height: 1.5em;

    font-family: "Francois One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;

    li {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
    }
}

.conceptos {
    margin: 2em auto;
}

.conceptos ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1em;
    background-color: #ffff00;
    margin: 0 auto;
    justify-content: center;
    width: fit-content;

    /* @media (min-width: 650px){ */
    /* 	flex-wrap: nowrap; */
    /* } */

    :nth-child(odd) {
	font-family: "Frank Ruhl Libre", serif;
        font-size: 1.1em;
    }
}

.proceso ul {
    list-style: none;
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 600px;
    margin: 0 auto;
    /* background-color: #eee; */


    li {
	width: 50%;
	padding: 1em;
	box-sizing: border-box;

	:link,
	:visited {
	    background-color: transparent;
	}
    
	&:nth-child(odd) {
	    margin-right: calc(50% - 1px);
	    border-right: 2px solid #000;
	    align-self: flex-end;
	    text-align: right;
	    
	    &:hover {
		margin-right: calc(50% - 5px);
		border-right: 10px solid #000;
		padding-right: calc(1em - 4px);
	    }
	}

	&:nth-child(even) {
	    margin-left: calc(50% - 1px);
	    border-left: 2px solid #000;
	    align-self: flex-start;
	    text-align: left;

	    &:hover {
		margin-left: calc(50% - 5px);
		border-left: 10px solid #000;
		padding-left: calc(1em - 4px);
	    }
	}
    }
}

.text-intro {
    max-width: 800px;
    margin: 2em auto;
    gap: 2em;
    padding: 0 1em;

    header {
	text-align: left;

	h1, h2, h3, h4, h5, h6 {
	    font-family: "Francois One", sans-serif;
	    text-transform: uppercase;
	    font-weight: 400;
	    font-style: normal;
	    font-size: 2em;
	}
    }

    @media (min-width: 750px){
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	header {
	    text-align: right;

	    :first-child {
		margin-top: 0;
	    }
	}
	.content :first-child {
	    margin-top: 0;
	}
    }
}

.p-author,
.u-email {    
    font-family: "Frank Ruhl Libre", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: black;
}

.call-to-action {
    max-width: 800px;
    text-align: center;

    strong {
	background-color: #ffff00;
    }

    h2 {
	font-size: 1.5em;

	@media (min-width: 500px){
	    font-size: 2em;
	}
	@media (min-width: 650px){
	    font-size: 2.5em;
	}
    }
}

/* posts */

.post-header {
  border-bottom: 1px solid #CCC;
  margin-bottom: 1rem;
}

.subheader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2em;
}

.subheader > div {
    flex-basis: 50%;
}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

.hero {
    width: 100%;
    max-width: 100%;
    background-color: #DDEEFF;
    padding: 2em;
    box-sizing: border-box;
    min-height: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    background-size: cover;

}

.hero > .logo {
    width: 800px;
    max-width: 100%;
}

main > * {
    max-width: var(--content-width);
    margin: 4em auto;
    display: block;
    padding: 0 1rem;
}

main > script {
    display: none;
}

main img {
    max-width: 100%
}

section object {
    max-width: 100%;
}		  

blockquote {
    font-size: 1.5em;
}

main > .wide {
    max-width: 100%;
    text-align: center;
}

main > .post-header {
    max-width: none;
    margin: 0;

    .inner {
	margin: 0 auto;
	max-width: var(--content-width);
    }

    h1 {
	font-size: 3.5em;
	font-weight: 500;
	margin-bottom: 1rem;
	margin-top: -1rem;
    }

    .pre {
	margin-bottom: 0;
	font-size: smaller;
    }
}

.text-x-large {
    font-size: var(--font-x-large);
}

.text-large {
    font-size: var(--font-large);
}

.text-small {
    font-size: var(--font-small);
}

a {
  color: #00e;
  text-decoration: none;
}

/* Proceso */

.speech {
    gap: 2em;
    max-width: 850px;
    margin: 0 auto;
    padding: 4em 0;

    
    @media (min-width: 750px){
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;

	> .heading {
	    flex: 2;
	    position: sticky;
	    font-size: large;
	    top: 0;
	    text-align: right;
	}
    }
}

.speech > .heading {

    h1, h2, h3, h4, h5, h6 {
	font-family: "Francois One", sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	font-style: normal;
    }
}

.speech .content {
    flex: 3;
    font-family: "Manrope", sans-serif;
    line-height: 1.25em;
}


/* proyectos */

header.v2 {
    text-align: center;
}

h3, h4, h5, h6 {
    font-weight: 400;
}

h3 {
    font-size: 1.65em;
}
h4 {
    font-size: 1.35em;
}
h5 {
    font-size: 1.15em;
}
h6 {
    font-size: 1em;
}

body.querendona {
    background-color: #b1ed54;
    background-image: url("portafolio/la-querendona/7querendona.svg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 900px;
}

.round-corners {
    border-radius: 2em;
}

.large-text {
    font-size: 1.5em;
}

/* section { */
/*     overflow: auto; */
/* } */

section.cols {
    display: flex;
    flex-direction: row;
}

body.cheese {
    background-color: #000;
    color: white;
}

body.cheese .yellow {
    
    background: 
	rgba(256, 185, 16, 0.6)
	       	url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

    backdrop-filter: contrast(2.5);
    background-blend-mode: color-burn;
    border-radius: 2em;
    padding: 2em;
    box-sizing: border-box;

}

body.papamex {
    background-color: #e6257e;
    background-image: url("portafolio/papamex/fondo.svg");

    color: white;

        @media (min-width: 600px){

	    .grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2em;
		color: white;
		justify-content: space-evenly;

		& > * {
		    flex-basis: calc(50% - 2em);
		    box-sizing: border-box;
		    flex-shrink: 1;
		    flex-grow: 1;
		}
	    }
	}
}


.cols-fix {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1em;
    justify-content: space-between;
    padding: 0.5em;
}

.sm-text {
    font-size: 14px;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
    margin-bottom: 1em;
}

@media (min-width: 550px){
    .two-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;

	& > * {
	    flex-basis: calc(50% - 0.5em);
	    flex-shrink: 1;
	    flex-grow: 0;
	}
    }
}

/* Estilos Team */

body.team main {
    
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;

    & > * {
	max-width: none;
    }

    & > header {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 25%;
	padding: 0 2em;
	
	h1, h2, h3, h4, h5, h6 {
	    font-family: "Francois One", sans-serif;
	    font-weight: 400;
	    font-style: normal;
	}
	& ::first-line {
	    background-color: #FFFF00;
	}
    }
    & > .content {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 75%;
    }
}

.team-fotos {
    max-height: 1060px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    margin: 0;
}

.team-fotos-horizontal {
    gap: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    margin: 0;

}

.team-fotos-masonry {
    gap: 10px;
    display: masonry;
    grid-template-columns: repeat(auto-fit, 200px);
    justify-content: center;
    margin: 0;
}