@charset "UTF-8";
body {
  background-color: #0d0d0d;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  margin-bottom: 1rem;
  color: #ffffff;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

a {
  color: rgba(0, 255, 251, 0.8431372549);
  transition: color 0.3s ease-in-out;
}
a:hover {
  color: rgba(0, 204, 204, 0.8431372549);
}

section {
  padding: 4rem 5rem;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(0, 255, 252, 0.3);
  /* ===================== NAVBAR ===================== */
  /* ===================== MENÚ MÓVIL ===================== */
  /* ===================== MEDIA QUERIES ===================== */
}
.header .navbar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 1.7rem;
  position: relative;
  /* -------- Logo Desktop -------- */
  /* -------- Logo Mobile -------- */
  /* -------- Menú Desktop -------- */
  /* -------- Botón Hamburguesa -------- */
}
.header .navbar .logo-desktop img {
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 255, 251, 0.8431372549)) drop-shadow(0 0 20px rgba(0, 255, 251, 0.8431372549));
  transition: transform 0.3s;
}
.header .navbar .logo-desktop img:hover {
  transform: scale(1.05) rotate(-2deg);
}
.header .navbar .logo-mobile {
  display: none;
}
@media (max-width: 768px) {
  .header .navbar .logo-mobile {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 0.5rem;
  }
  .header .navbar .logo-mobile img {
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 251, 0.8431372549));
  }
}
.header .navbar .nav-links {
  display: flex;
  gap: 4rem;
  list-style: none;
}
.header .navbar .nav-links li a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  position: relative;
  padding: 1rem 2rem;
  transition: color 0.3s, text-shadow 0.3s;
}
.header .navbar .nav-links li a:hover {
  color: rgba(0, 255, 251, 0.8431372549);
  text-shadow: 0 0 5px rgba(0, 255, 251, 0.8431372549), 0 0 10px rgba(0, 255, 251, 0.8431372549);
}
.header .navbar .nav-links li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: rgba(0, 255, 251, 0.8431372549);
  transition: width 0.3s;
}
.header .navbar .nav-links li a:hover::after {
  width: 100%;
}
.header .navbar .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1200;
}
.header .navbar .nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.4s;
}
.header .mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  padding: 2rem;
  transition: right 0.4s ease-in-out;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.header .mobile-menu .mobile-content {
  color: #fff;
}
.header .mobile-menu .mobile-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.header .mobile-menu .mobile-content ul a {
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0, 255, 251, 0.8431372549);
}
.header .mobile-menu .mobile-content ul a:hover {
  color: rgba(0, 255, 251, 0.8431372549);
  text-shadow: 0 0 8px rgba(0, 255, 251, 0.8431372549), 0 0 16px rgba(0, 255, 251, 0.8431372549);
}
.header .mobile-menu .mobile-content .mobile-extra p {
  margin-bottom: 0.5rem;
}
.header .mobile-menu .mobile-content .mobile-extra .social-icons {
  display: flex;
  gap: 1rem;
}
.header .mobile-menu .mobile-content .mobile-extra .social-icons a {
  color: rgba(0, 255, 251, 0.8431372549);
  font-size: 1.3rem;
  transition: transform 0.3s, text-shadow 0.3s;
}
.header .mobile-menu .mobile-content .mobile-extra .social-icons a:hover {
  transform: scale(1.2);
  text-shadow: 0 0 5px rgba(0, 255, 251, 0.8431372549), 0 0 15px rgba(0, 255, 251, 0.8431372549);
}
.header .mobile-menu.active {
  right: 0;
}
@media (max-width: 768px) {
  .header {
    /* Animación de X para hamburguesa */
  }
  .header .navbar .nav-links {
    display: none;
  }
  .header .navbar .nav-toggle {
    width: 35px;
    height: 25px;
    display: flex;
  }
  .header .logo-desktop {
    display: none;
  }
  .header .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .header .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .header .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

.footer {
  /* -------------------- Fondo y texto -------------------- */
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 2rem 0;
  text-align: center;
  /* -------------------- Contenedor interno -------------------- */
  /* -------------------- Texto del footer -------------------- */
  /* -------------------- Iconos sociales -------------------- */
}
.footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  margin: 0;
}
.footer .footer-social {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .footer-social li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease-in-out ease-in-out;
}
.footer .footer-social li a:hover, .footer .footer-social li a:focus-visible {
  background-color: rgba(0, 255, 251, 0.8431372549);
  color: #1a1a1a;
}
.footer .footer-social li a i {
  font-size: 1.2rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  .footer-container {
    gap: 0.5rem;
  }
  .footer-social li a {
    width: 2rem;
    height: 2rem;
  }
  .footer-social li a i {
    font-size: 1rem;
  }
}
/* ===================== MIXINS ===================== */
/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem;
  color: #ffffff;
  background: url("") center/cover no-repeat fixed;
  /* -------------------- Overlay -------------------- */
  /* -------------------- Fireflies / puntos animados -------------------- */
  /* -------------------- Contenido central -------------------- */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}
.hero::after {
  content: ".";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 5vmin;
  color: transparent;
  text-shadow: 0.8158536084em 1.0754138661em 7px hsla(229.9670966789, 100%, 50%, 0.9), 0.2718207606em 0.7002520181em 7px hsla(339.8907221715, 100%, 50%, 0.9), 0.6526626317em 1.1593915144em 7px hsla(175.1924584825, 100%, 50%, 0.9), 0.7280699467em -0.7226856339em 7px hsla(56.8568585241, 100%, 50%, 0.9), 0.5590860027em -1.1806734993em 7px hsla(55.7361134221, 100%, 50%, 0.9), 0.5985226252em 0.2793660211em 7px hsla(106.0423752117, 100%, 50%, 0.9), -0.8202227707em 0.3201402121em 7px hsla(221.2700658349, 100%, 50%, 0.9), -0.7535286335em 0.0194796816em 7px hsla(161.9961891783, 100%, 50%, 0.9), 0.7904180986em -0.0242983806em 7px hsla(262.2713334314, 100%, 50%, 0.9), -0.1116501003em 0.602062046em 7px hsla(101.314053343, 100%, 50%, 0.9), 1.477061756em 1.2644256473em 7px hsla(4.0243473801, 100%, 50%, 0.9), -0.0296829059em -0.8742276577em 7px hsla(161.152148523, 100%, 50%, 0.9), 0.7748242103em 0.7758920603em 7px hsla(185.5701762959, 100%, 50%, 0.9), -0.2115003445em 0.3265111901em 7px hsla(136.8412653056, 100%, 50%, 0.9), -0.8221075191em 0.9406151299em 7px hsla(301.2301933202, 100%, 50%, 0.9), -0.7962186711em -1.1246424472em 7px hsla(221.4952040451, 100%, 50%, 0.9), 0.3950734804em 0.6127097129em 7px hsla(179.95654453, 100%, 50%, 0.9), 0.0404581848em 0.2147696375em 7px hsla(53.1549542459, 100%, 50%, 0.9), -0.2473633772em 0.88373155em 7px hsla(43.3597217891, 100%, 50%, 0.9), -1.2446416312em -1.2263931833em 7px hsla(105.1376273267, 100%, 50%, 0.9), 0.0171056496em 1.3026838814em 7px hsla(32.4869788338, 100%, 50%, 0.9), -0.8924021256em 1.2828028636em 7px hsla(261.9816710792, 100%, 50%, 0.9), -0.28200703em -1.2107849945em 7px hsla(191.4608416435, 100%, 50%, 0.9), 0.9040898201em 0.5386619246em 7px hsla(142.6748952785, 100%, 50%, 0.9), -1.1736292271em 1.3538891857em 7px hsla(293.4424734265, 100%, 50%, 0.9), -0.8866370589em 0.0247079379em 7px hsla(343.8833682422, 100%, 50%, 0.9), -0.1464017559em -1.235306894em 7px hsla(58.2063516986, 100%, 50%, 0.9), 0.7593144168em 0.9852212338em 7px hsla(194.158270751, 100%, 50%, 0.9), 0.5219989827em -0.6658671921em 7px hsla(348.6596250268, 100%, 50%, 0.9), -1.2759759521em 0.5998797451em 7px hsla(13.9352415495, 100%, 50%, 0.9), -0.0038739069em -0.4444054938em 7px hsla(335.0542887263, 100%, 50%, 0.9), -1.2278320891em -0.0450770184em 7px hsla(196.4178175901, 100%, 50%, 0.9), -1.1744435109em 0.3221819556em 7px hsla(150.05126585, 100%, 50%, 0.9), -0.1248362596em 0.0349150706em 7px hsla(333.9249417476, 100%, 50%, 0.9), -0.2680724768em -1.1964127009em 7px hsla(277.5394839567, 100%, 50%, 0.9), 0.0101199249em 0.8791925514em 7px hsla(142.6291973229, 100%, 50%, 0.9), 0.5974882048em -0.0365647067em 7px hsla(286.3240966524, 100%, 50%, 0.9), 0.8158255333em -1.4508525401em 7px hsla(237.2821316466, 100%, 50%, 0.9), 0.1755252366em -1.0149160412em 7px hsla(93.4176019852, 100%, 50%, 0.9), 0.9638713803em -0.7241010115em 7px hsla(64.7422489966, 100%, 50%, 0.9);
  animation: move 44s infinite ease-in-out alternate;
  mix-blend-mode: screen;
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* -------- Título principal -------- */
  /* -------- Subtítulo -------- */
  /* -------- Botón -------- */
}
.hero .hero-content h1 {
  font-family: "Tektur", sans-serif;
  font-size: 3rem;
  line-height: 1.2;
  /* Subrayado animado */
}
.hero .hero-content h1 .highlight {
  color: rgba(0, 255, 251, 0.8431372549);
}
.hero .hero-content h1.hover-underline {
  position: relative;
  display: inline-block;
}
.hero .hero-content h1.hover-underline::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, rgba(0, 255, 251, 0.8431372549));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
.hero .hero-content h1.hover-underline:hover::after {
  transform: scaleX(1);
}
.hero .hero-content h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: #bbbbbb;
}
.hero .hero-content .btn {
  display: inline-block;
  background-color: rgba(0, 255, 251, 0.8431372549);
  color: #ffffff;
  padding: 1rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out ease-in-out;
}
.hero .hero-content .btn:hover {
  background-color: rgba(0, 204, 204, 0.8431372549);
}

/* ===================== ANIMACIONES ===================== */
@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}
.about {
  /* -------------------- Fondo y colores -------------------- */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.05));
  color: #ffffff;
  padding: 4rem 0;
  position: relative;
  /* -------------------- Título -------------------- */
  /* -------------------- Contenedor principal -------------------- */
  /* -------------------- Responsive -------------------- */
}
.about h2 {
  font-family: "Tektur", sans-serif;
  font-size: 3rem;
  color: rgba(0, 255, 251, 0.8431372549);
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.about .about-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  /* -------- Texto -------- */
  /* -------- Imagen -------- */
}
.about .about-container .about-text {
  flex: 1;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* -------- Skills como badges -------- */
}
.about .about-container .about-text .highlight {
  color: rgba(0, 255, 251, 0.8431372549);
  font-weight: bold;
}
.about .about-container .about-text p + p {
  margin-top: 1rem;
}
.about .about-container .about-text .about-skills {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.about .about-container .about-text .about-skills .skill-badge {
  background: rgba(0, 255, 252, 0.1);
  color: rgba(0, 255, 251, 0.8431372549);
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.about .about-container .about-text .about-skills .skill-badge:hover {
  transform: translateY(-3px);
  background: rgba(0, 255, 251, 0.8431372549);
  color: #0d0d0d;
}
.about .about-container .about-image {
  flex: 1;
  display: flex;
  justify-content: center;
}
.about .about-container .about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
}
.about .about-container .about-image:hover img {
  transform: scale(1.05) rotate(-1deg);
}
@media (max-width: 768px) {
  .about .about-container {
    flex-direction: column;
    text-align: center;
  }
  .about .about-container .about-image {
    margin-top: 2rem;
  }
  .about .about-container .about-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .about .about-container .about-text .about-skills {
    justify-content: center;
  }
}

/* ===================== GRUPO DE CARDS ===================== */
.card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
}

/* ===================== TÍTULO DE PROYECTOS ===================== */
.projects-title {
  font-family: "Tektur", sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 50px;
  margin-bottom: 30px;
  color: rgba(0, 255, 251, 0.8431372549);
  font-optical-sizing: auto;
}

/* ===================== CARD INDIVIDUAL ===================== */
.card-autoslide {
  position: relative;
  width: 300px;
  height: 450px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background-color: #000;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Título interno opcional */
  /* ===================== CARRUSEL ===================== */
  /* ===================== LAYER / INFO SUPERIOR ===================== */
  /* ===================== HOVER EFECTO ===================== */
}
.card-autoslide h3.card-title {
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 5;
  color: rgba(0, 255, 251, 0.8431372549);
  font-size: 18px;
  margin: 0;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}
.card-autoslide .carousel-inner {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.card-autoslide .carousel-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, filter 0.3s ease, transform 0.3s ease;
}
.card-autoslide .carousel-inner img.active {
  opacity: 1;
}
.card-autoslide .layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-autoslide .layer .info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #fff;
}
.card-autoslide .layer .info p {
  font-size: 14px;
  margin: 0;
}
.card-autoslide .layer .info .btn {
  align-self: center;
  padding: 8px 15px;
  background-color: rgba(0, 255, 251, 0.8431372549);
  color: #000;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.card-autoslide .layer .info .btn:hover {
  background-color: #000;
  color: rgba(0, 255, 251, 0.8431372549);
}
.card-autoslide:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.card-autoslide:hover .carousel-inner img.active {
  filter: brightness(0.6);
  transform: scale(1.05);
}
.card-autoslide:hover .layer {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .card-autoslide {
    width: 45%;
    height: 350px;
  }
}
@media (max-width: 600px) {
  .card-autoslide {
    width: 90%;
    height: 300px;
  }
}
/* ===================== SECCIÓN HABILIDADES ===================== */
.skills {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 4rem 0;
  text-align: center;
  /* ===== TÍTULO DE HABILIDADES ===== */
  /* ===== GRID DE SKILLS ===== */
}
.skills .skills-title {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  margin-bottom: 4rem;
}
.skills .skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
  justify-items: center;
  align-items: center;
  /* ===== ITEM INDIVIDUAL ===== */
}
.skills .skills-grid .skill-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  cursor: default;
  /* ===== HOVER ===== */
}
.skills .skills-grid .skill-item i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: rgba(0, 255, 251, 0.8431372549);
}
.skills .skills-grid .skill-item span {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  text-align: center;
}
.skills .skills-grid .skill-item:hover {
  transform: translateY(-5px) scale(1.05);
  background: rgba(0, 255, 251, 0.8431372549);
  color: #1a1a1a;
}
.skills .skills-grid .skill-item:hover i {
  color: #1a1a1a;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

/*# sourceMappingURL=styles.css.map */