/* -------- PALETA RESET Y TIPOGRAFÍA BASE -------- */
:root {
  --negro: #000;
  --azul-oscuro: #1e2333;
  --azul-medio: #4f5879;
  --azul-claro: #8597d8;
  --casi-blanco: #fff;
  --bg-card: rgba(22, 22, 22, 0.9);
  --border-card: 1px solid rgba(255, 255, 255, 0.06);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --section-width: 75%;
  --grid-width: 90%;

  /* Nuevas Variables Consolidadas */
  --bg-boton-hover: rgb(212, 229, 245);
  --bg-flip-back: aliceblue;
  --shadow-glow: rgba(255, 255, 255, 0.45);
  --color-etiqueta-borde: #333;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  background-color: #020111; /* Fallback oscuro */
}

body {
  height: 100%;
  scrollbar-width: none;
  background-color: transparent;
  /* isolation removed */
}
html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  color: var(--casi-blanco);
  line-height: 1.6;
  background-color: transparent; /* Transparente para ver el canvas */
  position: relative;
}

/* Ensure all content sits above the canvas */
body > *:not(#fondo-interactivo) {
  position: relative;
  z-index: 1;
}

/* Configuracion del Canvas de Fondo */
#fondo-interactivo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #010105 40%,
    #020210 100%
  ); /* Degradado Espacio Profundo */
}

h1,
h2,
h3 {
  color: var(--casi-blanco);
  font-weight: 750;
}

.titulo {
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.titulo-mediano {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.subtitulo {
  color: var(--casi-blanco);
}
.acento {
  color: var(--azul-claro);
}

/* -------- LAYOUT GENERAL Y CONTENEDORES -------- */
.envoltorio {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.columnas-2 {
  grid-template-columns: 1fr 1fr;
}
.columnas-3 {
  grid-template-columns: repeat(3, 1fr);
}

.etiquetas {
  margin-top: 1.5rem;
}

.etiqueta {
  margin-top: 1rem;
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-size: clamp(1.2rem, 4vw, 2rem);
  border-right: 2px solid var(--color-etiqueta-borde);
  padding-right: 6px;
  padding-right: 6px;
  animation: blink 0.7s steps(1) infinite;
  white-space: nowrap;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.redes {
  display: flex;
  gap: 20px;
  margin-top: 2.4rem;
}

.redes a svg {
  width: 29px;
  height: 29px;
  transition: transform 0.25s ease, fill 0.25s ease, opacity 0.25s ease;
}

.redes a:hover svg {
  transform: scale(1.12);
  fill: var(--azul-claro);
  opacity: 0.95;
}

/* -------- SECCIÓN SOBRE MÍ -------- */
#sobreMi {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 48px 0;
}

#sobreMi .sobre-grid {
  width: 1400px;
  height: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 60px;
  align-items: center;
}

#sobreMi .contenedor {
  height: 480px;
  padding: 20px 50px;
  background-color: rgba(22, 22, 22, 0.9);
  border-radius: var(--radius-xl);
  max-width: 1200px;
}

#sobreMi .subtitulo {
  font-weight: 600;
  margin-top: 10px;
  font-style: italic;
}

.flip-container {
  perspective: 1000px;
  width: 480px;
  height: 480px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flipLoop 8s infinite ease-in-out;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: var(--bg-flip-back);
  border-radius: 50%;
  box-shadow: 0 0 50px 10px rgba(255, 255, 255, 0.35);
}

.flip-card-front img,
.flip-card-back img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.flip-card-back {
  transform: rotateY(180deg);
}

@keyframes flipLoop {
  0% {
    transform: rotateY(0deg);
  }
  35.7% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  85.7% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* -------- SKILLS LENGUAJES Y HERRAMIENTAS -------- */
:is(#lenguajes, #proyectos, #contacto) {
  width: var(--section-width);
  margin: auto;
  padding: 64px 0;
}

.lista-herramientas {
  margin: auto;
  display: grid;
  width: var(--grid-width);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.categoria {
  background: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: 18px 18px 14px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.categoria:hover {
  box-shadow: 0 0 25px rgba(135, 149, 201, 0.45);
}

.categoria h3 {
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.logos {
  display: grid;
  gap: 10px 5px;
  grid-template-columns: repeat(2, 1fr);
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: transform 0.18s ease, background-color 0.18s ease;
  will-change: transform;
}

.item:hover {
  transform: scale(1.08);
  background: rgba(98, 98, 100, 0.233);
}

.item svg,
.item img {
  width: 45px;
  height: 45px;
  display: block;
}

/* -------- PROYECTOS TARJETAS Y TECNOLOGÍAS -------- */
.proyectos-card {
  margin: auto;
  display: grid;
  width: var(--grid-width);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  margin-top: 24px;
}

.proyecto.tarjeta {
  background: var(--bg-card);
  border: 0 dashed rgba(255, 255, 255, 0.699);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 530px;
}

.proyecto.tarjeta:hover {
  box-shadow: 0 0 25px var(--shadow-glow);
}

.proyecto .miniatura {
  height: 200px;
  border-radius: var(--radius-sm);
  background: url("./Imagenes/image.png") no-repeat center/cover;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 12px;
}

.proyecto .cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.proyecto .cuerpo h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 2px;
}

.lista-en-linea {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.itemPro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 35%;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.itemPro:hover {
  transform: scale(1.09);
  background-color: rgba(133, 133, 133, 0.685);
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.685);
}

.itemPro svg {
  height: 30px;
  width: 30px;
  display: block;
}

.boton {
  color: #cecece;
  appearance: none;
  border: none;
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  background-color: rgb(50, 66, 97);
  transition: background 0.2s ease, transform 0.05s ease;
}

.boton:hover {
  color: var(--negro);
  background-color: var(--bg-boton-hover);
  transform: scale(1.03);
}

.proyecto .boton {
  margin-top: auto;
}

/* -------- CONTACTO Y FORMULARIO -------- */
.contenido {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

#contacto .subtitulo {
  font-weight: 600;
  margin-top: 10px;
  font-style: italic;
}

#contacto form {
  width: 75%;
  min-height: 500px;
  background: rgba(22, 22, 22, 0.9);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  margin-left: 100px;
}

.entrada {
  width: 100%;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: var(--casi-blanco);
  font-size: 1rem;
  outline: none;
}

.entrada:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(135, 149, 201, 0.5); /* Aumentado contraste */
  outline: 2px solid transparent; /* Asegura visibilidad en modo alto contraste */
}

textarea.entrada {
  resize: none;
  height: 200px;
  overflow-y: auto;
  scrollbar-width: none;
}
textarea.entrada::-webkit-scrollbar {
  display: none;
}

#contacto .boton {
  background: var(--azul-claro);
  color: var(--negro);
  animation: latido 2.2s ease-in-out infinite;
  margin-top: auto;
}

#contacto .boton:hover {
  background: var(--casi-blanco);
}

@keyframes latido {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* -------- FOOTER -------- */
footer {
  margin-top: 5rem;
  height: 4rem;
  background-color: rgba(46, 46, 46, 0.479);
  color: var(--casi-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
}

footer p {
  font-weight: 600;
}

/* -------- ANIMACIONES (Anime.js Hooks) -------- */
.oculto {
  opacity: 0;
  /* El resto lo maneja Anime.js */
}

/* Preferencias de Movimiento Reducido */
@media (prefers-reduced-motion: reduce) {
  .etiqueta,
  #contacto .boton,
  .redes a:hover svg,
  .item:hover,
  .itemPro:hover,
  .boton:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}