@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Regular Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Medium Italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Bold Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik Pro Black Italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Pressura Mono';
  src: url('../fonts/GT Pressura Mono Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teodor';
  src: url('../fonts/te') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teodor';
  src: url('../fonts/Teodor TRIAL SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.font-aeonik-bold {
  font-family: 'Aeonik', 'Inter', serif!important;
  font-weight: 700!important;
  font-style: normal !important;
}

.font-teodor {
  font-family: 'Teodor', serif;
  font-weight: 700!important;
  font-style: normal !important;
}

.font-mono {
  font-family: 'GT Pressura Mono', monospace!important;
}

#text-lema {
  color: #05BFE0;
}

.text-lema-claro {
  color: #05BFE0!important;
}

body {
  font-family: 'Aeonik', sans-serif;
}

.values {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.sponsors-section {
  background-image: url('../img/tertiary_horizontal.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .sponsors-section {
    background-image: url('../img/tertiary_vertical.png');
    background-attachment: scroll;
  }
}

.volunteers-section {
  background-image: url('../img/secondary_horizontal.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .volunteers-section {
    background-image: url('../img/secondary_vertical.png');
    background-attachment: scroll;
  }
}

.volunteer-items span{

    text-align: left;
}

:where([class^="ri-"])::before { content: "\f3c2"; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Aeonik', 'Inter', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, #200F3B 0%, #05BFE0 50%, #FF610F 100%);
position: relative;
overflow: hidden;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="0.5" fill="white" opacity="0.1"/><circle cx="75" cy="25" r="0.3" fill="white" opacity="0.08"/><circle cx="50" cy="50" r="0.4" fill="white" opacity="0.12"/><circle cx="25" cy="75" r="0.2" fill="white" opacity="0.06"/><circle cx="75" cy="75" r="0.6" fill="white" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.2;
}
.geometric-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.shape-1 {
position: absolute;
top: -10%;
right: -5%;
width: 40%;
height: 60%;
background: linear-gradient(45deg, rgba(255, 105, 0, 0.3), rgba(89, 37, 220, 0.2));
transform: rotate(15deg);
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 80%);
}
.shape-2 {
position: absolute;
bottom: -15%;
left: -10%;
width: 50%;
height: 50%;
background: linear-gradient(-45deg, rgba(255, 105, 0, 0.4), rgba(89, 37, 220, 0.1));
transform: rotate(-20deg);
clip-path: polygon(20% 0%, 100% 20%, 100% 100%, 0% 100%);
}
.grain-texture {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><defs><pattern id="grain2" width="200" height="200" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.8" fill="black" opacity="0.02"/><circle cx="150" cy="50" r="0.6" fill="black" opacity="0.015"/><circle cx="100" cy="100" r="0.7" fill="black" opacity="0.025"/><circle cx="50" cy="150" r="0.4" fill="black" opacity="0.01"/><circle cx="150" cy="150" r="0.9" fill="black" opacity="0.03"/></pattern></defs><rect width="200" height="200" fill="url(%23grain2)"/></svg>');
background-color: #F7F4EF;
}
.floating-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.floating-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(89, 37, 220, 0.15);
}
.speaker-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.speaker-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.pricing-card.featured {
background: linear-gradient(135deg, #371075 0%, #D5340B 100%);
color: white;
transform: scale(1.05);
position: relative;
z-index: 10;
}
.pricing-card.featured::before {
content: 'RECOMENDADO';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #D5340B;
color: white;
padding: 4px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}

/* Si estás escribiendo clases personalizadas */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}


@keyframes shine {
  0% {
    background-position: 110% 0%, 0 0;
  }
  100% {
    background-position: -10% 0%, 0 0;
  }
}

.metallic-gold {
  position: relative;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ac733c;
}

.metallic-platinum {
  position: relative;
  font-size: 3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfd8dc; /* fallback */
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .metallic-gold {
    color: transparent;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 45%,
        white 50%,
        transparent 55%,
        transparent 100%
      ),
      linear-gradient(
        90deg,
        #c78c48,
        #cf9147 9.4%,
        #cf9348 9.4%,
        #b2763e 33.6%,
        #ad743c 35.7%,
        #ac723d 46.9%,
        #b0773d 51.7%,
        #b0793e 52.1%,
        #c4914c 64.6%,
        #c99750 68.5%,
        #ce9e54 73.2%,
        #f4d188
      );
    background-position: 110% 0%, 0 0;
    background-size: 200% auto, auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 2s ease-in-out 2 alternate 2s;
  }

  .metallic-gold::before {
    content: attr(data-gold);
    color: #f0d8a9;
    position: absolute;
    z-index: -1;
    top: -0.1em;
    left: 0;
    text-shadow: rgba(0, 0, 0, 1) 0px 1px 12px;
  }

  .metallic-gold::after {
    content: attr(data-gold);
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 48%,
      rgba(98, 16, 0, 0.5) 50%,
      transparent 75%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Silver version */
.metallic-silver {
  position: relative;
  font-size: 3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #858585;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .metallic-silver {
    color: transparent;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 45%,
        white 50%,
        transparent 55%,
        transparent 100%
      ),
      linear-gradient(
        270deg,
        #8c8c8c 1.3%,
        #999 15%,
        #868686 29.6%,
        #828282 29.6%,
        #7d7d7d 31.8%,
        #797979 31.8%,
        #6a6a6a 38.9%,
        #d3d3d3
      );
    background-position: 110% 0%, 0 0;
    background-size: 200% auto, auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 2s ease-in-out 2 alternate-reverse 2s;
  }

  .metallic-silver::before {
    content: attr(data-silver);
    color: #fff;
    position: absolute;
    z-index: -1;
    top: -0.1em;
    left: 0;
    text-shadow: rgba(0, 0, 0, 1) 0px 1px 12px;
  }

  .metallic-silver::after {
    content: attr(data-silver);
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 48%,
      rgba(17, 17, 17, 0.5) 50%,
      transparent 75%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Platinum version */

  .metallic-platinum {
    color: transparent;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 45%,
        white 50%,
        transparent 55%,
        transparent 100%
      ),
      linear-gradient(
        90deg,
        #f0f0f0,
        #dcdcdc 10%,
        #cccccc 20%,
        #e0e0e0 35%,
        #ffffff 50%,
        #dcdcdc 65%,
        #bbbbbb 80%,
        #eeeeee 100%
      );
    background-position: 110% 0%, 0 0;
    background-size: 200% auto, auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 2.5s ease-in-out infinite alternate;
  }

  .metallic-platinum::before {
    content: attr(data-platinum);
    color: #ffffff;
    position: absolute;
    z-index: -1;
    top: -0.1em;
    left: 0;
    text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
  }

  .metallic-platinum::after {
    content: attr(data-platinum);
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 48%,
      rgba(120, 120, 120, 0.4) 50%,
      transparent 75%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}


.platinum-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 1rem;

  border: 1px solid #cccccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-card {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease;
}

.photo-card.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}