:root {
  --accent-color: #d6fdff;
  --es-color: #e4fbe1;
  --fr-color: #e7edff;
}

html,
body {
  font-family: "EB Garamond", serif;
  font-family: "Raleway", sans-serif;
}

/* ---------------------------------- FONT ---------------------------------- */

p {
  line-height: 1.3;
}

.text-strong {
  font-size: 550%;
}

.text-strong-s {
  font-size: 400%;
}

.text-large {
  font-size: 300%;
}

.text-middle {
  font-size: 200%;
}
.text-middle-m {
  font-size: 150%;
}

.text-middle-s {
  font-size: 125%;
}

.text-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

@media (max-width: 1200px) {
  .text-strong {
    font-size: 400%;
  }

  .text-strong-s {
    font-size: 300%;
  }

  .text-large {
    font-size: 250%;
  }

  .text-middle {
    font-size: 150%;
  }

  .text-middle-m {
    font-size: 125%;
  }

  .text-middle-s {
    font-size: 100%;
  }
}
@media (max-width: 900px) {
  .text-strong {
    font-size: 300%;
  }

  .text-strong-s {
    font-size: 200%;
  }

  .text-large {
    font-size: 150%;
  }

  .text-middle {
    font-size: 120%;
  }

  .text-middle-m {
    font-size: 100%;
  }
  .text-middle-s {
    font-size: 90%;
  }
}
@media (max-width: 600px) {
  .text-strong {
    font-size: 300%;
  }
}

/* ---------------------------------- FLEX ---------------------------------- */

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  text-align: center;
}

.flex-lineal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: flex-start;
  justify-content: flex-end;
}

@media (max-width: 1300px) {
  .flex-lineal {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------------------------------- WRAP ---------------------------------- */

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.text-wrapper {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 2em;
}

.text-wrapper .title-container {
  margin-bottom: 1.5rem;
}

.container {
  margin-bottom: 15em;
}

@media (max-width: 1500px) {
  .wrapper {
    max-width: 1200px;
  }

  .container {
    margin-bottom: 10em;
  }
}
@media (max-width: 1300px) {
  .wrapper {
    max-width: 1000px;
  }

  .container {
    margin-bottom: 8em;
  }
}
@media (max-width: 1100px) {
  .wrapper {
    max-width: 800px;
  }
}
@media (max-width: 900px) {
  .wrapper {
    padding: 0 2em;
  }

  .container {
    margin-bottom: 5em;
  }
}

/* --------------------------------- BUTTON --------------------------------- */

.btn {
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(248, 248, 248, 0.5);
  border-radius: 8px;
  padding: 0.5em 1em;
  cursor: pointer;
}

.btn img {
  margin-left: 0.4em;
  min-width: 1.2em;
  pointer-events: none;
}

.btn-accent {
  font-size: 150%;
  background-color: var(--accent-color);
}

:is(.btn.btn-video, .btn.btn-audio) img {
  margin-left: 0em;
  min-width: 3.8em;
}

.btn.btn-pdf {
  background: #d6fdff;
}

.btn.btn-pdf img {
  margin-left: 0em;
  min-width: 3em;
}

@media (max-width: 300px) {
  :is(.btn.btn-video, .btn.btn-audio, .btn.btn-pdf img) img {
    min-width: 3.8em;
  }
}

input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 4em;
  height: 2em;
  background: var(--es-color);
  display: block;
  border-radius: 0.4em;
  position: relative;
}

label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.65em;
  height: 1.65em;
  background: #fff;
  border-radius: 0.4em;
  transition: 0.3s;
}

input:checked + label {
  background: var(--fr-color);
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 35px;
}

.btn-swith {
  position: relative;
}

.swith-text {
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 3.9em;
  height: 2em;
  pointer-events: none;
}

.swith-text p {
  font-weight: 700;
}

/* --------------------------------- HEADER --------------------------------- */

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em 1.5em 1em 1.5em;
}

.nav-wrapper li {
  display: flex;
}

.nav-wrapper .brand-logo img {
  width: 12rem;
}

/* ---------------------------------- MAIN ---------------------------------- */
.main-wraper {
  margin: 0 1.5em 10em 1.5em;
  background: linear-gradient(
    180deg,
    #d6fdff 21.88%,
    rgba(214, 253, 255, 0) 100%
  );
  filter: drop-shadow(0px -10px 30px rgba(0, 0, 0, 0.08));
  border-radius: 31px 31px 0px 0px;
}

.main-wraper.presentacion {
  margin-bottom: 3em;
}

.main-wraper.presentacion .main-content {
  min-height: auto;
  height: 8em;
  padding: 1em;
}

.main-wraper.cooming-soon {
  margin: 0 2em;
  margin-top: 2em;
}

.main-wraper.cooming-soon .main-content {
  height: calc(100vh - 2em);
}

.main-content {
  min-height: 30vh;
  height: 30em;
  padding: 1em;
}

@media (max-width: 1500px) {
  .main-wraper {
    margin: 0 1.5em 5em 1.5em;
  }
  .main-content {
    min-height: 30vh;
    height: 25em;
    padding: 1em;
  }
}
@media (max-width: 1000px) {
  .main-wraper {
    margin: 0 1.5em 2em 1.5em;
  }
  .main-content {
    min-height: 50vh;
    height: 20em;
    padding: 1em;
  }
}

@media (max-width: 800px) {
  .main-wraper {
    margin: 0 1.5em 0em 1.5em;
  }
  .main-content {
    min-height: 40vh;
    height: 17em;
    padding: 1em;
  }
  .presentacion .main-content {
    min-height: 25vh;
    height: 15em;
    padding: 1em;
  }

  .main-wraper {
    margin-bottom: 5em;
  }

  .container {
    margin-bottom: 10em;
  }
}

.main-content .sub-title {
  text-transform: uppercase;
  margin-top: 1em;
}

/* ------------------------------ PRESENTACION ------------------------------ */

.card-container {
  gap: 3em;
}

@media (max-width: 1300px) {
  .card-container.flex-lineal {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 1100px) {
  .card-container.flex-lineal {
    justify-content: center;
    align-items: flex-start;
  }
}
@media (max-width: 800px) {
  .card-container.flex-lineal {
    align-items: center;
  }
}

.card {
  border-radius: 8px;
  box-shadow: 4px 4px 20px #ecf5f3;
  padding: 0.7em 1.2em;
  max-width: 22em;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1em;
}

.es-card {
  background: linear-gradient(
    80.95deg,
    #e4fbe1 2.19%,
    rgba(228, 251, 225, 0.31) 94.56%
  );
}

.fr-card {
  background: linear-gradient(
    80.95deg,
    #e7edff 2.19%,
    rgba(231, 237, 255, 0.31) 94.56%
  );
}

.card-text {
  margin-top: 1.2em;
}

.card-text h4 {
  margin-bottom: 0.5em;
}

.tag {
  content: "";
  position: absolute;
  top: 0;
  right: 1.5em;
}

.tag p {
  position: absolute;
  color: white;
  font-size: 90%;
  font-weight: 700;
  left: 4px;
  top: 5px;
}

.presentacion .main-content {
  position: relative;
}

.back-home,
.back-experiencia {
  display: flex;
  cursor: pointer;
  position: absolute;
  top: 2rem;
  left: 1.5em;
}

:is(.back-home, .back-experiencia) img {
  transform: rotate(180deg);
  margin-right: 0.5em;
  pointer-events: none;
}

@media (max-width: 800px) {
  .presentacion .main-content h1 {
    font-size: 200%;
  }

  .back-home {
    top: 1.3em;
    left: 1em;
  }
}

/* --------------------------------- GALLERY -------------------------------- */

.gallery {
  gap: 2em;
}

.gallery-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr 1.2fr 1fr;
  gap: 2em;
  align-items: center;
}

.gallery-img {
  border-radius: 0.5em;
  overflow: hidden;
}
.gallery-img img {
  width: 100%;
  height: fit-content;
  display: flex;
}

.img-contains {
  margin: 1em;
}

.slick-prev .rotate {
  transform: rotate(180deg);
}
.slick-prev:hover .rotate {
  transform: scale(1.2) rotate(180deg);
}

.slick-arrow:hover img {
  transform: scale(1.2);
}

.slick-prev:before,
.slick-next:before {
  font-size: 0 !important;
}

@media (max-width: 700px) {
  .gallery-container {
    grid-auto-columns: 1fr 12em 1fr;
  }
}
@media (max-width: 600px) {
  .gallery-container {
    grid-auto-columns: 1fr 9em 1fr;
  }
}

/* ---------------------------------- VIDEO --------------------------------- */

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 1em;
  overflow: hidden;
  width: 100%;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#full-media {
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

#full-media.visibility {
  opacity: 1;
  visibility: visible;
}

.video-container {
  width: 70%;
}

.video-80 {
  width: 80%;
}

.cross-container {
  position: absolute;
  top: 5vw;
  right: 5vw;
  width: 1.5em;
  cursor: pointer;
}

.cross-container img {
  pointer-events: none;
}

/* ----------------------------------- BG ----------------------------------- */

.bg-gradient {
  background: radial-gradient(
    50% 50% at 50% 50%,
    #f0fff7 0%,
    #f0fff7 34.37%,
    rgba(240, 255, 247, 0) 100%
  );
}

.bg-gradient.blue {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(214, 253, 255, 0.6) 0%,
    rgba(240, 255, 247, 0.6) 34.37%,
    rgba(240, 255, 247, 0) 100%
  );
  width: 95vw;
  height: 45vw;
  z-index: -1;
  position: absolute;
  left: 0;
}

/* -------------------------------------------------------------------------- */
/*                                LA EXPERINCIA                               */
/* -------------------------------------------------------------------------- */

.main-wraper.es-expericicia {
  background: linear-gradient(180deg, #f2fdf0 0%, rgba(228, 251, 225, 0) 100%);
  margin-bottom: 5em;
}

@media (max-width: 800px) {
  .main-wraper.es-expericicia {
    margin-bottom: 0;
  }
}

.es-expericicia .main-content {
  min-height: 35vh;
  height: 15em;
  position: relative;
}
.es-expericicia .flex-center {
  flex-direction: row;
}

#experiencia .btn-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1em;
}
#experiencia .card-text {
  width: 100%;
}
#experiencia .card {
  justify-content: space-between;
}

.grid-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em 4em;
  width: 60%;
}

.card-experiencia .title-section {
  width: 30%;
  margin-bottom: 3em;
}

@media (max-width: 1300px) {
  .grid-card {
    width: auto;
  }
  .card-experiencia .title-section {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 800px) {
  .grid-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 350px) {
  #experiencia .btn-container {
    flex-direction: column;
    align-items: center;
  }
}

.es-expericicia .btn {
  gap: 0.8em;
  display: flex;
  text-align: left;
  padding: 1em 1.2em;
  font-size: 180%;
  line-height: 1.5;
}

.es-expericicia .fr-btn {
  margin-left: 4em;
  background: linear-gradient(
    80.95deg,
    rgba(231, 237, 255, 0.97) 80%,
    rgba(231, 237, 255, 0.31) 100%,
    #e7edff 94.56%
  );
}
.card-experiencia .card {
  padding: 1em 2em;
  gap: 1.5em;
}

.card-experiencia .card h3 {
  margin-bottom: 0.6em;
}

#experiencia .card-experiencia .card h3 {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/*                                   DETAIL                                   */
/* -------------------------------------------------------------------------- */

.text-detail,
.special-text {
  text-align: justify;
  margin-bottom: 1em;
  line-height: 1.4;
}

@media (max-width: 800px) {
  .text-detail,
  .special-text {
    text-align: left;
  }
}

:is(.text-detail, .special-text) em {
  font-style: italic;
}

.left-11-5 {
  padding-left: 11.5em;
}
.left-16 {
  padding-left: 16em;
}
.left-22-5 {
  padding-left: 22.5em;
}

.indent-20 {
  text-indent: 20em;
}

.text-top {
  margin-top: 2em;
}
.text-top-extra {
  margin-top: 10em;
}

.line-2 {
  line-height: 2.5;
}

/* ------------------------------ PARTICIPANTES ----------------------------- */

.grid-cards {
  display: grid;
  grid-template-columns: 35em 1fr;
}

@media (max-width: 1500px) {
  .grid-cards {
    grid-template-columns: 17em 1fr;
  }
}

@media (max-width: 1300px) {
  .grid-cards {
    grid-template-columns: 1fr 3fr;
    gap: 3em;
  }
}
@media (max-width: 1100px) {
  .grid-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 3em;
  }

  .grid-cards .title-section h3 {
    text-align: center;
  }
}

.cards-participantes .card {
  width: 50%;
  justify-content: center;
  align-items: center;
  padding: 3em;
}

@media (max-width: 800px) {
  .grid-cards .card-container {
    flex-flow: column;
  }

  .cards-participantes .card {
    width: 100%;
  }
}
.cards-participantes .card .card-text {
  margin-top: 0;
  font-size: 120%;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/*                                   FOOTER                                   */
/* -------------------------------------------------------------------------- */

footer {
  border-top: 2px solid black;
}

footer ul {
  display: flex;
  align-items: center;
  margin: 2em 0;
  width: 100%;
  justify-content: space-between;
}

footer li {
  width: 15%;
  min-width: 5em;
}

@media (max-width: 1100px) {
  footer ul {
    flex-wrap: wrap;
  }
  footer li {
    width: 10em;
    min-width: 5em;
  }
}

@media (max-width: 800px) {
  footer ul {
    justify-content: center;
    gap: 1em;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   GALLERY                                  */
/* -------------------------------------------------------------------------- */

.mansory {
  position: relative;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 100px 2vw;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post {
  position: relative;
  overflow: hidden;
  display: flex;
}
.post img {
  cursor: pointer;
}

.post img:hover {
  transform: scale(1.05);
  transition: 1s all ease;
}

.img-full-container img {
  max-width: 80vh;
  max-height: 80vh;
  object-fit: contain;
}

.img-contains {
  max-height: 400px;
  overflow: hidden;
}