@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0' );

:root{
  --color-uno: #b58dc2;
  --color-dos: #8dc29c;
  --color-tres: #8d9ac2; 
  --color-cuatro: #c2ba8d;
}

body, html {
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "Noto Sans Display", sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  display: flex;
}
.container > .left {
  width: 30%;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

}
.container > .right {
  width: 100%;
  position: relative;
  background-color: white;
  background-repeat: no-repeat;
  background-position: top;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

.container > .right#about {
  align-items: flex-start;
  padding-top: 150px;
}

.container > .right#galeria {
  align-items: flex-start;
  padding-top: 150px;
}



.container > .right#inicio {
  background-image: url(img/portada2025.jpg);

}

.menu input[type=radio],
.menu-toggle {
  display: none;
}
.menu .collapsed-menu {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .1s ease-out,
              opacity 0.1s ease-in;
}
.menu > li > label,
.collapsed-menu li {
  display: block;
  cursor: pointer;
  padding: 0.7em;
}
.collapsed-menu li {
  padding-left: 2em;
}

.menu input[type=radio]:checked ~ .collapsed-menu {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  transition: max-height .35s ease-out,
              opacity 0.1s ease-in 0.2s;
}


/* NUEVAS CLASES */
.logo{
  transform: scale(0.6);
}

.menu{
  z-index: 200;
}

.linea-menu {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

a {
 text-decoration: none;
 color: unset;
}

p {
  color: #000;
  font-size: 16px;
  line-height: 2;
}

.text-container {
  display: grid;
  width: 50%;
  z-index: 200;
  text-align: justify;
}


.galeria{
  width: 50%;
  display: inline;
  margin-top: 30px; 
}

.cronograma{
  width: 100%;
  display: inline;
}

.imagenesgal{
  display: flex;  
  flex-direction: row;
  flex-wrap: wrap;
}

.text-container h3 {
  text-align: left;
  margin-bottom: 50px;
  font-size: 25px;
  color: rgba(255, 255, 255, 0);
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
  transform: skew(0deg, -20deg) translate(0px, -120px);
  letter-spacing: 0.12em;
}

/*
.text-container h3 span {
  font-style: italic;
}
*/
.text-container p span {
  font-weight: bold;
}

.piedeImagen{
  margin-top: 30px;
  margin-bottom: -10px;
}

.columnasTexto{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}

.columnasTexto p {
  width: 50%;
  margin-top: -10px;
  font-size: 18px;
}

/* -- COLORES MENU --*/
.color1::after{
  background: var(--color-uno);
}
.color2::after{
  background: var(--color-dos);
}
.color3::after{
  background: var(--color-tres);
}
.color4::after{
  background: var(--color-cuatro);
}

.linea-menu::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  transition: width .3s;
}

.linea-menu:hover::after {
  width: 100%;
  /*transition: width .3s;*/
}

.background-texture {
  z-index: -1;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0.6;
}

.background-t-fondo {
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0.6;
}

.blob-1,
.blob-2,
.blob-3 {
	position: absolute;
	height: 300px;
	width: 300px;
	border-radius: 100%;
	filter: blur(100px);
}

.blob-1 {
	background-color: var(--color-dos);
  transform: translate(50px, 300px) scaleY(2);
}

.blob-2 {
	background-color: var(--color-tres);
}

.blob-3 {
	background-color: var(--color-uno);
  transform: translate(200px, 500px) scaleY(1.4);
}

/*-----------------TEXTURAS DEL FONDO DERECHO---------------*/

.background-t-fondo .blob-1,
.background-t-fondo .blob-2,
.background-t-fondo .blob-3 {
	position: absolute;
	height: 600px;
	width: 600px;
	border-radius: 100%;
	filter: blur(100px);
}

.background-t-fondo .blob-1 {
	background-color: var(--color-dos);
  animation-name: blob-animation-1;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

.background-t-fondo .blob-2 {
	background-color: var(--color-tres);
  transform: translate(-100px, 600px);
  animation-name: blob-animation-2;
  animation-timing-function: linear;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-direction: alternate;   
}

.background-t-fondo .blob-3 {
	background-color: var(--color-uno);
  transform: scaleY(1.4);
  animation-name: blob-animation-3;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blob-animation-1 {
  0%    { transform: translate(-400px, -600px) scaleY(1);}
  50%   { transform: translate(1000px, 800px) scaleY(0.8);}
  100%  { transform: translate(0px, -600px) scaleY(1.4);}
}

@keyframes blob-animation-2 {
  0%    { transform: translate(400px, 200px) scale(1.8);}
  50%   { transform: translate(-600px, -500px) scale(0.8);}
  100%  { transform: translate(200px, -400px) scaleY(1.4);}
}

@keyframes blob-animation-3 {
  0%    { transform: translate(-400px, 600px) scale(1);}
  50%   { transform: translate(-600px, 0px) scale(1.6);}
  100%  { transform: translate(1000px, 200px) scale(0.8);}
}


@media(max-width: 768px) {
  .container {
    overflow-y: scroll;
    overflow-x: hidden;
    transform: translateX(-300px);
    width: calc(100% + 300px);
    transition: transform 0.2s ease-out;
  }
  .container > .left {
    z-index: 200;
    min-width: 300px;
    align-items: start;
    margin-top: 200px;
  }

  .container > .right {
 
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
    overflow-x: hidden;
  
  } 

  .menu-toggle {
    display: block;
    position: absolute;
    cursor: pointer;
    left: 20px;
    top: 20px;
    transform: translate(0px, 0px);
  }
  .menu-toggle div {
    width: 35px;
    height: 5px;
    background-color: #555;
    margin: 6px 0;
  }

  .logo {
    transform: scale(0.4);
  }

 
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 24;

  color: white;
  font-size: 80px;
}

.text-container{
  align-self: flex-start;
  margin-top: 50px;
  width: 70%;
}


.background-t-fondo{
overflow: hidden;
}

.text-container h3 {
  text-align: left;
  transform: skew(0deg, -20deg);
  margin-bottom: 100px;
}

.imagenesgal{
  flex-direction: column;
}

.galeria{
  width: 100%;
  margin-top: 10px;
}

.container > .right#galeria {
  padding-top: 0px;
}

.piedeImagen{
  margin-bottom: 10px;
}

.columnasTexto{
  flex-direction: column;
  text-align: left;
}

.columnasTexto p {
  font-size: 15px;
}

}