/* css styles */
.about-link i {
    font-size: 3em; /* Tamaño del ícono */
}


html {
  scroll-behavior: smooth;
} /*Esto para que al hacer click en los links del navbar la página no "salte", sino que se deslice */

/*Backgrounds*/

body {
  background-color: #ffffff;
}

.light-bg{
  background-color: #ffffff;
}

.logos-bg{
  background-color: #E8E8E8;
}

.dark-bg {
  background-color: #212121;
  color: #ffffff;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*-- links hover --*/

a:hover {
  color: #c22828;
}
  

/*-- section style --*/

.section-container {
  padding-left: 1.5em;
  padding-right:  1.5em;
  padding-top: 1em;
  margin-top: 0em;
  max-width: 100%;
  width: 100vw;
}


.section-block {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 1.1em;
  box-sizing: border-box;
}

.post-contents {
	padding-left: 1.5em
	padding-right: 1.5em;
	margin: 1rem;
}



/*margenes y padding*/

#quarto-document-content .column-page{
  padding-top: 0.1em;
  margin-top: 0;
}

#quarto-content {
  padding-top: 0.1em;
  margin-top: 0;
}

/*banner

.column-page .title,
.column-body .title{
  color: #ffffff;
} */

/*nav bar*/

.active{
  color: #ffffff !important;
  font-weight: 400;
  background-color: #ECA0A0;
}

.navbar-logo {
  max-height: 75px;
}

.nav-link:hover {
  color: #ffffff;
  font-weight: 400;
  background-color: #ECA0A0;
}

.bi-github:hover,
.bi-facebook:hover,
.bi-twitter:hover,
.bi-instagram:hover,
.bi-youtube:hover{
  color: #ECA0A0;
}


/* tiles */

.wrap
{
  margin: 20px auto 0 auto;
  width: 80%;
  display:flex;
  align-items:space-around;
  max-width:1500px;
}
.tile
{
  width:380px;
  height:450px;
  margin:10px;
  background-color:#497BBD;
  border-radius:15px;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px #212121;
  overflow:hidden;
  color:white;
  font-family:'Roboto';
  
}
.tile img
{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
  filter: brightness(0.7) blur(1px);
}
.tile .text
{
/*   z-index:99; */
  position:absolute;
  padding:30px;
  font-size: 20px;
  height:calc(100% - 60px);
}
.tile h1
{
 
  font-weight:300;
  margin:0;
  color: white;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2
{
  font-weight:100;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
}
.tile p
{
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
/*   opacity:0; */
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text
{
  opacity:0;
  transition: all 0.6s ease-in-out;
}
.tile:hover
{
/*   background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px #212121;
  transform:scale(1.05);
}
.tile:hover img
{
  opacity: 0.2;
}
.tile:hover .animate-text
{
  transform:translateX(0);
  opacity:1;
}
.dots
{
  position:absolute;
  bottom:20px;
  right:30px;
  margin: 0 auto;
  width:30px;
  height:30px;
  color:currentColor;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  
}

.dots span
{
    width: 5px;
    height:5px;
    background-color: currentColor;
    border-radius: 50%;
    display:block;
  opacity:0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
 
}

.tile:hover span
{
  opacity:1;
  transform:translateY(0px);
}

.dots span:nth-child(1)
{
   transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
   transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
   transition-delay: 0.15s;
}

/* Fuentes */

.red{
  color: #F20505;
}

.disegno{
  color: #A7D0D9;
}

.datos{
  color: #F2BBC9;
}

.repro{
  color: #97F294;
}

.publibres{
  color: #F28705;
}


/* Botones */
.btn-template-primary {
    color: #ECA0A0;
    background-color: white;
    border-color: #ECA0A0 !important;
}

.btn-template-primary:hover,
.btn-template-primary:focus,
.btn-template-primary:active,
.btn-template-primary.active,
.open > .dropdown-toggle.btn-template-primary {
  color: #ffffff;
  background-color: #ECA0A0;
  border-color: #c22828;
}

/* Código */

p code{
  color: #c22828;
  background-color: #ECA0A0;
}

h2 code,
h3 code,
strong code
{
  color: #c22828;
  background-color: #ECA0A0;
}

.listing-box-calendar {
  color: #ECA0A0;
}

/* Menu de Navegación*/

.dropdown-item:hover{
  background-color:#ECA0A0;
}

/* demobox ipo */

#demobox {
  background-color: #ddd ;
  font-family: monospace;
  padding: 10px ;
  border: 1px solid grey ;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-family: monospace;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}