:root {
  --white: #fff;
  --black: #000;
  --black-02: rgba(0, 0, 0, 0.2);
  --black-04: rgba(0, 0, 0, 0.4);
  --gray-1: #2b2b2b;
  --gray-2: #757575;
  --gray-3: #ccc;
  --purple-dark: #5202c5;
  --purple-mid: #8800c4;
  --purple-light: #9c06de;
  --purple-opacity-07: rgb(8 4 38 / 7%);
  --purple-opactiy-12: rgb(8 4 38 / 12%);
  --orange-light: #f991a1;
  --orange-mid: #e78f3c;
  --orange-dark: #fa7109;
  --red: #d63114;
  --blue: #1d4bc9;
  --yellow: #ffd500;
  --yellow-dark: #f8a800;
  --pink: #c91d84;
  --fallback-background-color: #5362ff;

  --background-color: var(--white);
  --light-text-color: var(--white);
  --dark-text-color: var(--black);
  --text-color: var(--gray-1);
  --purple-color: var(--purple-mid);
  --timeline: var(--purple-dark);
  --hover-opacity: var(--purple-opacity-07);
  --selected-opacity: var(--purple-opactiy-12);
  --social-media-hover: var(--black);
  --accent-color: var(--orange-light);
  --python-tag: var(--blue);
  --info-tag: var(--gray-2);
  --highlight-color: var(--yellow);
  --benefit-color: var(--yellow-dark);
  --warning: var(--red);
  --shadow-color: var(--black-02);
  --shadow-color-dark: var(--black-04);
  --purple-gradient: linear-gradient(
    45deg,
    var(--purple-mid),
    var(--purple-light)
  );
  --orange-gradient: linear-gradient(
    135deg,
    var(--orange-dark) 0%,
    var(--red) 100%
  );
  --purple-orange-gradient: linear-gradient(
    135deg,
    var(--purple-mid) 0%,
    var(--orange-dark) 100%
  );
  --yellow-orange-gradient: linear-gradient(
    -45deg,
    var(--yellow),
    var(--orange-mid)
  );
  --blue-pink-gradient: linear-gradient(
    135deg,
    var(--blue) 0%,
    var(--pink) 100%
  );
  --orange-color: #f96f09;
}

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

body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h4 {
  color: var(--accent-color);
}

a {
  text-decoration: none;
  color: var(--purple-color);
  font-weight: bold;
}

h2 {
  color: var(--purple-color);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  font-family: Raleway, Arial, Helvetica, sans-serif;
  color: var(--dark-text-color);
  line-height: 1.5;
}

.highlight {
  color: var(--purple-color);
}

/* HEADER */
.header {
  display: flex;
  flex-direction: column;
  background: var(--blue-pink-gradient);
  color: var(--light-text-color);
}

.header .logo-wrapper {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.header .logo {
  height: 5rem;
}

.header .menu {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.header .menu .menu-link {
  display: flex;
  flex: 1 1 50%;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: normal;
}

.header .menu .menu-link:hover {
  background-color: var(--hover-opacity);
}

.header .menu .menu-link.menu-link-active {
  background-color: var(--selected-opacity);
}

@media (min-width: 30rem) {
  .header .menu .menu-link {
    flex: 1 1 33.333%;
  }
}

@media (min-width: 70rem) {
  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    background: var(--blue-pink-gradient);
    color: var(--light-text-color);
  }

  body:has(pretalx-schedule) .header {
    position: relative;
  }

  .header .logo-wrapper {
    margin: 0;
    padding-left: 0.75rem;
    padding-right: 1.2rem;
  }

  .header .logo-wrapper:hover {
    background-color: var(--hover-opacity);
  }

  .header .menu {
    justify-content: right;
    flex-wrap: nowrap;
  }

  .header .menu .menu-link {
    flex: none;
    padding: 1rem 1.4rem;
  }

  .header .menu .menu-link-tickets {
    border-left: 1px solid var(--shadow-color);
  }
}

@media (min-width: 76rem) {
  .header .menu .menu-link {
    padding: 1rem 1.75rem;
  }
}

/* Estilos del menú burger */
.menu-icon {
  display: none; /* Oculta el ícono del menú en resoluciones grandes */
}

.menu {
  display: none; /* Oculta el menú en resoluciones grandes */
}

#menu-toggle {
display: none;
}


@media only screen and (max-width: 768px) {
  .menu-icon {
    display: inline-block;
    cursor: pointer;
    font-size: 20px;
    padding: 10px;
  }

  .header .menu {
    display: none;
  }
  .menu {
    display: none;
  }

  #menu-toggle:checked ~ .menu {
    display: block;
  }

  .menu ul {
    display: block;
  }

  .menu li {
    display: block;
  }

  .menu li a {
    padding: 10px 20px;
  }
}


/* MAIN */
.subtitle {
  color: var(--dark-text-color);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.news-box {
  background: var(--orange-gradient);
  color: var(--light-text-color);
  padding: 2rem;
  margin-bottom: 1.8rem;
  border-radius: 10px;
}
.news-title {
  font-weight: bold;
  margin-bottom: 1.1rem;
}

.news-box .news-content {
  margin-bottom: 0;
}

/* General card */
.card {
  padding: 10px;
  border: 1px solid var(--gray-3);
  overflow: hidden;
  text-align: center;
  transition: all 0.2s ease-in-out;
  display: grid;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color: var(--background-color);
}

.card:hover {
  box-shadow: 0 8px 16px 0 var(--shadow-color);
}

.card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.container {
  padding: 2px 16px;
}

.caption {
  font-size: 1.8rem;
  text-align: center;
  line-height: 2em;
}

@media (min-width: 22.5rem) {
  .caption {
    font-size: 0.8rem;
  }
}

/* CONTENT */
.content-wrapper {
  display: flex;
  flex: 1;
  justify-content: center;
}

.content-wrapper .content {
  padding: 1.8rem 1.2rem 2.6rem 1.2rem;
  width: 100%;
  max-width: 70rem;
}

@media (min-width: 40rem) {
  .content-wrapper .content {
    padding: 1.5rem 2rem 2.3rem 2rem;
  }
}

.content-wrapper h1 {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.content-wrapper p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.button {
  background: var(--purple-gradient);
  border: none;
  color: var(--light-text-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  padding: 1rem 2.7rem;
  border-radius: 2px;
}
.button:hover,
.button:focus {
  opacity: 0.9;
}

.center {
  margin: auto;
  width: 50%;
  text-align: center;
}

.center-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-becas {
  padding: 10px 20px;
  margin: 5px;
  background-color: #9524dc;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

section.center {
  width: 100vw;
}

section > iframe {
  width: 100vw;
}

.important-title {
  background-color: #f6e7ae;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 80%;
}

.box-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem 3rem 2rem;
  margin-top: 0.5rem;
  margin-bottom: 3.5rem;
  color: var(--light-text-color);
  font-weight: 600;
  border-radius: 10px;
  background-color: var(--fallback-background-color);
  background-image: url("../images/fondo_expo.png");
  background-repeat: no-repeat;
  background-position: 80% 10%;
  background-size: cover;
}

.box-intro > h1 {
  margin-bottom: 0;
}

.box-intro > h1 > img {
  width: 12.5rem;
}

.box-intro > .intro > .big-text {
  font-size: 1.8rem;
  display: block;
  text-align: center;
  margin-top: 1.5rem;
}

@media (min-width: 55rem) {
  .box-intro {
    padding: 4rem 3rem;
    gap: 1.6rem;
    flex-direction: row;
  }

  .box-intro > h1 > img {
    width: 17rem;
  }

  .box-intro > .intro > .big-text {
    text-align: left;
  }
}

@media (min-width: 70rem) {
  .box-intro > h1 > img {
    width: 19rem;
  }
}

/* FOOTER */
.footer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer .footer-section {
  padding: 1rem;
}

.footer .links {
  display: flex;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer .links .li {
  padding: 0.5rem 1rem;
}
.footer .links .li:hover {
  color: var(--dark-text-color);
}

.footer .social {
  text-align: center;
  padding-bottom: 1.5rem;
}

.footer .social .social-link {
  padding: 0 0.5rem;
  color: var(--white)
}

.social-link:hover {
  color: var(--social-media-hover);
}

@media (min-width: 22.5rem) {
  .footer {
    flex-direction: row;
    align-items: center;
    background: var(--purple-orange-gradient);
    color: var(--light-text-color);
  }

  .footer .footer-section {
    padding: 1.3rem 1.5rem;
  }

  .footer .links {
    flex: 1;
    justify-content: left;
  }

  .footer .social {
    display: flex;
    align-items: flex-end;
    justify-content: right;
    font-size: 0.8rem;
  }
}
/*
Código de conducta
*/
.examples {
  font-size: 16px;
  color: var(--warning);
}

.text-white {
  color: white;
}

/*
Ediciones Anteriores
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.card__image-container {
  position: relative;
  padding-top: 100%; /* sets the height of the container equal to its width */
  overflow: hidden;
}

.card__image-container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__content {
  padding: 10px;
}

@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}

/*
Gradiente para menú ticket
*/
.menu-link-tickets:hover {
  background: var(--blue-pink-gradient);
  background-size: 100% 100%;
  animation: gradient 15s ease infinite;
  color: var(--light-text-color);
}

/*
Background image
*/

.highlight-box {
  display: inline-block;
}
.highlight-box:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: var(--highlight-color);
  transform: rotate(3deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

.brochure {
  width: 500px;
}
/*
Sección de fotos polaroid
*/

.polaroid {
  background: var(--background-color);
  padding: 1rem;
  width: 200px;
  box-shadow: 0 0.2rem 1.2rem var(--shadow-color);
}

.polaroid > img {
  max-width: 100%;
  height: auto;
}

.item {
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.item .polaroid:before {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n + 1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n + 1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem var(--shadow-color-dark);
}
.item:nth-of-type(4n + 2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n + 2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem var(--shadow-color-dark);
}
.item:nth-of-type(4n + 4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n + 4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem var(--shadow-color);
}
.item:nth-of-type(4n + 3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n + 3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem var(--shadow-color);
}
.item:hover {
  filter: none;
  transform: scale(2.8, 2.8) rotate(0deg) !important;
  transition: all 0.35s;
  position: relative;
  z-index: 1;
}
.item:hover .polaroid:before {
  content: "";
  z-index: -1;
  position: absolute;

  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem var(--shadow-color);
  transition: all 0.35s;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

.linea-tiempo {
  position: relative;
  width: 500px;
  max-width: 100%;
  font-family: Arial;
}

.linea-tiempo::before {
  content: "";
  position: absolute;
  width: 3px;
  background-color: var(--timeline);
  left: 50%;
  height: 100%;
  border-radius: 10px;
}

.momento {
  position: relative;
  width: 45%;
  box-sizing: border-box;
}

.momento:nth-child(even) {
  left: 55%;
}

.momento::after {
  content: "";
  position: absolute;
  top: calc(50% + 10px);
  right: calc(-11.11% - 11.5px);
  height: 20px;
  width: 20px;
  background-color: var(--timeline);
  border-radius: 50%;
}

.momento:nth-child(even)::after {
  left: calc(-11.11% - 8.5px);
}

.momento h3 {
  font-size: 14px;
  text-align: center;
  color: var(--dark-text-color);
}

.momento .descripcion {
  background-color: var(--accent-color);
  border-radius: 10px;
  padding: 10px;
  line-height: 22px;
  color: var(--dark-text-color);
  font-size: 14px;
}

.momento .descripcion::after {
  content: "";
  position: absolute;
  right: -10px;
  top: calc(50% + 10px);
  height: 0;
  width: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid var(--accent-color);
}

.momento:nth-child(even) .descripcion {
  background-color: var(--accent-color);
  color: var(--dark-text-color);
}

.momento:nth-child(even) .descripcion::after {
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid var(--accent-color);
  border-left: none;
}

/* Patrocinios */
.plans-table-scroller {
  overflow-x: auto;
}

.plans-table {
  background-color: var(--background-color);
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1px;
  border-collapse: collapse;
}

.plans-table th,
.plans-table td {
  padding: 0.7rem 0.5rem;
}

.plans-table thead tr {
  background-color: var(--purple-color);
  border: 1px solid var(--purple-color);
  color: var(--light-text-color);
  font-weight: bold;
}
.plans-table thead tr th .plan-image {
  display: none;
}

.plans-table tbody tr {
  border: 1px solid #161c3d69;
}
.plans-table tbody tr td.benefit-title {
  text-align: left;
  min-width: 8rem;
}
.plans-table tbody tr td.discount {
  background-color: var(--accent-color);
}
.plans-table tbody tr td.has-benefit {
  background-color: var(--benefit-color);
}

@media screen and (min-width: 32rem) {
  .plans-table {
    font-size: 0.9rem;
  }
}

@media screen and (min-width: 50rem) {
  .plans-table {
    font-size: 1rem;
  }

  .plans-table th,
  .plans-table td {
    padding: 0.7rem 0.9rem;
  }

  .plans-table thead tr th .plan-image {
    display: inline-block;
    width: 7rem;
  }
  .plans-table thead tr th .plan-title {
    display: none;
  }
}

/* Patrocinios - add-ons */
.box-addons {
  border-radius: 10px;
  background-color: var(--background-color);
}

.box-addons > h2 {
  justify-content: center;
  text-align: center;
  padding-top: 3%;
}

.box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
  padding: 0.8rem;
  border-radius: 10px;
  background-color: var(--background-color);
}

.box-content .addon-image {
  margin-top: 1.5rem;
}

.box-content .addon-image img {
  width: 12.5rem;
}

@media (min-width: 63rem) {
  .box-content {
    flex-direction: row;
  }

  .box-content .addon-image img {
    width: 9.3rem;
  }
}

/* Organización*/
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 190px);
  grid-gap: 1rem;
  margin: 1rem 0;
  justify-content: center;
}

.partners-grid .organizer-figure {
  margin: 5px;
  height: 100px;
}

.list-item {
  flex-wrap: nowrap !important;
  padding: 1.5rem !important;
}

.list-item-image {
  margin-left: 0.5rem;
  margin-right: 2rem;
}

.list-item-image .image {
  margin: 0;
  height: 4rem;
  width: 4rem;
}

.image img {
  display: block;
  height: auto;
  width: 100%;
}

.image img.is-rounded {
  border-radius: 99999px;
}

.list-item-content {
  flex-direction: column;
  gap: 1rem;
  line-height: 0.8;
  padding: 0;
}

.list-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.list-item-description {
  font-size: 0.9rem;
  color: var(--dark-text-color);
}

.social-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.social-button {
  background-color: var(--purple-color);
  color: var(--light-text-color);
  border-color: 1px solid var(--gray-1);
  border-radius: 4px;
  box-shadow: none;
  display: inline-flex;
  border-width: 1px;
  cursor: pointer;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0.8em 1em 0.8em 1em;
}

.tag {
  display: inline-block;
  background-color: var(--python-tag);
  border-radius: 5px;
  padding: 0.4rem;
  margin-bottom: 0.3rem;
  color: var(--light-text-color);
}

.org-is-info {
  background-color: var(--info-tag);
}

.job-is-info {
  background-color: var(--python-tag);
}

.job-button {
  padding: 0.5rem;
}

.job-tag {
  color: #4a4a4a;
  background-color: whitesmoke;
}

@media screen and (min-width: 40rem) {
  .list-item-content {
    flex-direction: row;
    gap: 2rem;
  }
}

/* Viaje */

img.logo-agencia-viajes {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

a.boton-reserva {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.languages {
  font-size: 1.1rem;
}

.languages ul > li {
  display: inline;
  float: right;
  margin-right: 20px;
}

.languages ul > li > a {
  color: gray;
}


.languages ul > li.lang-active > a {
  color: var(--orange-color);
}


/* For the FAQ section */
details[open] summary ~ * {
  animation: open 0.2s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid var(--purple-color);
  position: relative;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 300;
  list-style: none;
}

details summary:after {
  content: "+";
  color: black;
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 300;
  transform-origin: center;
  transition: 200ms linear;
  color: var(--purple-color);
}

details[open] summary:after {
  transform: rotate(45deg);
  font-size: 2rem;
}

details summary {
  outline: 0;
  font-weight: 400;
}

details p {
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
}


/* Sponsors */
.sponsors-grid {
  display: grid;
  grid-gap: 1.5rem;
  align-items: center;
  margin: 1rem 0;
}

/* sponsor special */
.special-grid {
  grid-template-columns: repeat(6, 1fr);
}

/* Timanfaya */
.timanfaya-grid {
  grid-template-columns: repeat(6, 1fr);
}

/* Teneguía */
.teneguia-grid {
  grid-template-columns: repeat(5, 1fr);
}

/* Tamadaba */
.tamadaba-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Teide */
.teide-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 910px) {
  .special-grid { grid-template-columns: repeat(5, 1fr); }
  .timanfaya-grid { grid-template-columns: repeat(5, 1fr); }
  .teneguia-grid { grid-template-columns: repeat(4, 1fr); }
  .tamadaba-grid { grid-template-columns: repeat(3, 1fr); }
  .teide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .special-grid { grid-template-columns: repeat(2, 1fr); }
  .timanfaya-grid { grid-template-columns: repeat(2, 1fr); }
  .teneguia-grid { grid-template-columns: repeat(2, 1fr); }
  .tamadaba-grid { grid-template-columns: repeat(1, 1fr); }
  .teide-grid { grid-template-columns: repeat(1, 1fr); }
}

.title-badge {
  font-size: 1.5rem;
  margin-top: 2rem;
}

.title-badge img {
  vertical-align: middle;
  width: 5.5rem;
}

.sponsor-figure {
  margin: 5px;
}

.special {
  margin: 0;
}

/* Keynoter */
.keynoter {
  display: flex;
  flex-direction: row;
  color: var(--white);
  word-spacing: 1px;
  margin-bottom: 2rem;
  padding: 2rem;
  gap: 2rem;
  border-radius: 10px;
  background-color: #561bc8;
  background-repeat: no-repeat;
  background-image:
    url("../images/linea1_landing.png"),
    url("../images/linea8_landing.png"),
    url("../images/burbuja2_landing_opacity.png"),
    url("../images/estrella_landing.png"),
    radial-gradient(circle, rgba(102,35,214,1) 0%, rgba(86,27,200,1) 60%);
  background-position:
    0 calc(100% - 130px),
    -30px calc(100% + 150px),
    calc(100% + 30px) calc(100% + 80px),
    23% calc(100% + 70px),
    0 0;
  background-size:
    100%,
    calc(105% + 30px),
    180px,
    200px,
    100%;
}

.keynoter__img {
  height: 170px;
  width: 170px;
  flex: 0 0 170px;
  border-radius: 50%;
}

.keynoter__img>img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  border: 4px solid #1dbbc0;
}

.keynoter__content>h2 {
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--white);
}

.keynoter .keynoter__content>p {
  margin-top: 0.6rem;
}

.keynoter .social {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.2rem;
}

.keynoter .social>a {
  font-size: 1.3rem;
  color: var(--white);
}

@media(max-width: 850px) {
  .keynoter {
    background-position:
      0 calc(100% - 250px),
      -30px calc(100% + 30px),
      calc(100% + 30px) calc(100% + 80px),
      35% calc(100% + 10px),
      0 0;
  }

  .keynoter__img {
    height: 140px;
    width: 140px;
    flex: 0 0 140px; 
  }
}

@media(max-width: 650px) {
  .keynoter {
    flex-direction: column;
    gap: 0.6rem;
    padding: 2.5rem 2rem;
    background-position:
      50% -70px,
      -70px 80%,
      calc(100% + 30px) calc(100% + 80px),
      20px 50%,
      0 0;
    background-size: 
      700px,
      800px,
      180px,
      200px,
      100%;
  }

  .keynoter__img {
    align-self: center;
  }

  .keynoter .keynoter__content>p {
    margin-top: 1rem;
    text-align: center;
  }

  .keynoter__content > h2 {
    text-align: center;
  }

  .keynoter .social {
    justify-content: center;
    gap: 1.4rem;
  }
}

.agotado {
  background-color: gray !important;
}