/* Estilos Generales del Cuerpo */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000;
    color: #f3f4f6;
    overflow-x: hidden;
}

/* Canvas de Fondo para Animación 3D */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Contenedor Principal del Contenido */
.content-wrapper {
    position: relative;
    z-index: 1;
}

/* Secciones de Contenido con Fondo Semi-transparente */
.content-section {
    background-color: #000;
    position: relative;
    z-index: 2;
}

#hero {
    background-color: transparent;
}

@media (max-width: 768px) {
    #hero {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* Barra de Navegación con Efecto de Vidrio */
.glass-nav {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilos de la Terminal Animada */
#terminal {
    font-family: 'Roboto Mono', monospace;
    font-size: 2.5rem;
    color: #00ff99;
    text-shadow: 0 0 8px #00ff99;
}

.hero-text-container {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1));
}

@media (max-width: 768px) {
    #terminal { font-size: 1.5rem; }
    #cursor { height: 1.5rem !important; }
}

#cursor {
    display: inline-block;
    width: 12px;
    height: 2.5rem;
    background-color: #00ff99;
    box-shadow: 0 0 5px #00ff99;
    animation: blink 1s step-end infinite;
    margin-left: 8px;
}

@keyframes blink {
    from, to { background-color: transparent; box-shadow: none; }
    50% { background-color: #00ff99; box-shadow: 0 0 5px #00ff99; }
}

/* Animación de Revelado al Hacer Scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos de la Línea de Tiempo del Resumen */
#resume .timeline-text {
    font-size: 1rem;
}
@media (min-width: 768px) {
     #resume .timeline-text { font-size: 1.25rem; }
}
.timeline-text.typing {
    text-align: left;
}
.timeline-text.typing::after {
    content: '_';
    animation: blink 1s step-end infinite;
    display: inline-block;
    width: 10px;
    height: 1.2rem;
    background-color: #00ff99;
    margin-left: 4px;
}

/* Estilos del Carrusel de Habilidades */
.skills-slider { cursor: grab; }
.skills-slider.grabbing { cursor: grabbing; }

/* Estilos del Modal */
.modal-overlay {
    transition: opacity 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
}
.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.modal-overlay.visible .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* --- ESTILOS PARA BOTONES DE NAVEGACIÓN (Uiverse.io by Galahhad) --- */
.ui-btn {
  --btn-default-bg: rgb(41, 41, 41, 0.5); /* Ligeramente transparente */
  --btn-padding: 10px 15px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #00ff99; /* Color de hover cambiado a verde */
  --default-btn-color: #fff;
  --font-size: 14px;
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
}

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  border-radius: 8px; /* Bordes redondeados */
  text-decoration: none; /* Quitar subrayado de los enlaces */
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% { content: "#"; }
  5% { content: "."; }
  10% { content: "^{"; }
  15% { content: "-!"; }
  20% { content: "#$_"; }
  25% { content: "№:0"; }
  30% { content: "#{+."; }
  35% { content: "@}-?"; }
  40% { content: "?{4@%"; }
  45% { content: "=.,^!"; }
  50% { content: "?2@%"; }
  55% { content: "\;1}]"; }
  60% { content: "?{%:%"; right: 0; }
  65% { content: "|{f[4"; right: 0; }
  70% { content: "{4%0%"; right: 0; }
  75% { content: "'1_0<"; right: 0; }
  80% { content: "{0%"; right: 0; }
  85% { content: "]>'"; right: 0; }
  90% { content: "4"; right: 0; }
  95% { content: "2"; right: 0; }
  100% { content: ""; right: 0; }
}
/* --- FIN DE ESTILOS DE BOTONES DE NAVEGACIÓN --- */


/* Estilos del Botón de Código (Uiverse.io) - MODIFICADO */
.cssbuttons-io {
  position: relative;
  font-family: Menlo,Roboto Mono,monospace; /* Misma fuente que ui-btn */
  font-weight: 600; /* Mismo peso que ui-btn */
  font-size: 14px; /* Mismo tamaño de fuente que ui-btn */
  letter-spacing: 0.1rem; /* Mismo espaciado que ui-btn */
  border-radius: 8px; /* Mismo radio de borde que ui-btn */
  cursor: pointer;
  border: none;
  background: linear-gradient(to right, #0de2a2, #1cce05);
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px; /* Mismo padding que ui-btn */
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}


/* Estilos del Botón de Resumen (Uiverse.io) */
.download-button {
  position: relative;
  border-width: 0;
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  z-index: 1;
}

.download-button .docs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 4px;
  z-index: 1;
  background-color: #353434;
  border: solid 1px #e8e8e82d;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover {
  box-shadow:
    rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px,
    rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px,
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.download {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin: 0 auto;
  z-index: -1;
  border-radius: 4px;
  transform: translateY(0%);
  background-color: #1eca82;
  border: solid 1px #33e0762d;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover .download {
  transform: translateY(100%);
}

.download svg polyline,
.download svg line {
  animation: docs 1s infinite;
}

@keyframes docs {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(-15%);
  }

  100% {
    transform: translateY(0%);
  }
}

/* --- ESTILOS PARA BOTÓN DE LINKEDIN (MODIFICADO) --- */
.LinkedinBtn {
  width: 40px;   /* Tamaño ajustado para armonía visual */
  height: 40px;  /* Tamaño ajustado para armonía visual */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 8px; /* Coincide con el radio de borde de ui-btn */
  cursor: pointer;
  transition: all 0.3s;
}

.LinkedinBtn .svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(41, 41, 41, 0.5); /* Coincide con el fondo de ui-btn */
  backdrop-filter: blur(4px);
  border-radius: 8px; /* Coincide con el radio de borde de ui-btn */
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
  fill: #fff; /* Color del SVG */
}

.LinkedinBtn .BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #1cce05; /* Color cambiado a verde del tema */
  z-index: -1;
  border-radius: 9px;
  pointer-events: none;
  transition: all 0.3s;
}

.LinkedinBtn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.LinkedinBtn:hover .svgContainer {
  background-color: rgba(51, 51, 51, 1); /* Coincide con el hover de ui-btn */
  border-color: rgba(255, 255, 255, 0.2);
}

/* --- ESTILOS PARA BOTÓN DE SONIDO FLOTANTE --- */
#sound-container {
    position: fixed;
    bottom: 1.5rem; /* 24px */
    left: 1.5rem;   /* 24px */
    z-index: 100;
}

.sound-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #a0a0a0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sound-btn:hover {
    background-color: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    color: #00ff99;
}

/* --- ESTILOS PARA TEXTO HACKER/GLITCH --- */
.hacker-text {
    font-family: 'Roboto Mono', monospace;
    position: relative;
    color: #00ff99;
    text-shadow: 0 0 5px #00ff99, 0 0 10px #00ff99;
}

.hacker-text::before,
.hacker-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Match the section background */
    overflow: hidden;
    clip-path: inset(50% 0 50% 0);
}

.hacker-text::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1; /* Magenta/Red glitch */
    animation: glitch-anim-1 2.5s linear infinite alternate-reverse;
}

.hacker-text::after {
    left: -2px;
    text-shadow: -1px 0 #00ffff; /* Cyan glitch */
    animation: glitch-anim-2 2.5s linear infinite alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(45% 0 50% 0); } 20% { clip-path: inset(55% 0 5% 0); } 40% { clip-path: inset(20% 0 25% 0); } 60% { clip-path: inset(80% 0 10% 0); } 80% { clip-path: inset(30% 0 60% 0); } 100% { clip-path: inset(5% 0 90% 0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(15% 0 80% 0); } 20% { clip-path: inset(90% 0 4% 0); } 40% { clip-path: inset(40% 0 42% 0); } 60% { clip-path: inset(20% 0 5% 0); } 80% { clip-path: inset(70% 0 15% 0); } 100% { clip-path: inset(45% 0 50% 0); }
}