/* CSS personalizado para sobrescribir las reglas de AOS que ocultan el contenido */

/* Hacer visible todo el contenido con animaciones AOS */
html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
    opacity: 1 !important;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
}

html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1 !important;
    -webkit-transform: none;
    transform: none;
}

/* Hacer visible las animaciones de zoom */
html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
    opacity: 1 !important;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
}

html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1 !important;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
}

/* Hacer visible las animaciones de slide */
html:not(.no-js) [data-aos^=slide][data-aos^=slide] {
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    visibility: visible !important;
}

html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate {
    visibility: visible !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Hacer visible las animaciones de flip */
html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    opacity: 1 !important;
}

/* Asegurar que todos los elementos con data-aos sean visibles */
[data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mantener las transiciones pero sin ocultar el contenido */
[data-aos].aos-animate {
    opacity: 1 !important;
    visibility: visible !important;
}

/*--------------------------------------------------------------
# Principal Section (reemplaza Hero Section)
--------------------------------------------------------------*/
.principal {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.principal img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.principal:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 75%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.principal .container {
  position: relative;
  z-index: 3;
}

.principal h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}

.principal p {
  margin: 5px 0 0 0;
  font-size: 26px;
}

.principal p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}

.principal .social-links {
  margin-top: 25px;
}

.principal .social-links a {
  font-size: 24px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

.principal .social-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .principal h2 {
    font-size: 32px;
  }

  .principal p {
    font-size: 20px;
  }
}