/* ==============================
   VARIABLES GLOBALES
   Paleta extraída del isotipo JD DEV:
   fondo casi negro, azul y verde como duotono de marca.
   Ambos colores se usan juntos (nunca uno "gana" sobre el otro),
   igual que en el isotipo original. El dorado es un acento puntual
   para elementos premium (loader, hovers, texto destacado).
============================== */
:root {
  --fondo: #060a16; /* fondo base, igual al del isotipo */
  --panel: #0d1526; /* tarjetas / paneles */
  --panel-borde: rgba(255, 255, 255, 0.08);

  --azul: #0b7cf7; /* azul de marca */
  --azul-oscuro: #054db0;
  --verde: #2ec250; /* verde de marca */
  --verde-oscuro: #1e9a45;

  --marca: linear-gradient(90deg, var(--verde) 0%, var(--azul) 100%);

  /* Acento dorado — capa premium sobre el duotono azul/verde */
  --dorado: #e5c158;
  --dorado-glow: rgba(229, 193, 88, 0.25);
  --marca-dorada: linear-gradient(
    90deg,
    var(--verde) 0%,
    var(--azul) 55%,
    var(--dorado) 100%
  );

  --blanco: #f5f6fa; /* texto principal */
  --gris: #838b9e; /* texto secundario */

  --radius: 4px;
  --transition-speed: 0.25s;
  --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

/* ==============================
   RESET Y BOX-SIZING
============================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--fondo);
  color: var(--blanco);
  line-height: 1.65;
  scroll-behavior: smooth;
  position: relative;
}

body.loading {
  overflow: hidden;
}

/* halos de marca muy sutiles, azul arriba a la derecha, verde abajo a la izquierda */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse 800px 500px at 95% -5%,
      rgba(11, 124, 247, 0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 700px 450px at -5% 105%,
      rgba(46, 194, 80, 0.08),
      transparent 60%
    );
  pointer-events: none;
  z-index: -1;
}

::selection {
  background: var(--azul);
  color: var(--blanco);
}

/* ==============================
   LOADER
============================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
}

.loader-logo-wrap {
  width: 140px;
  height: 140px;
  position: relative;
  overflow: hidden;
}

#loader-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px var(--dorado-glow));
  clip-path: inset(0 100% 0 0); /* arranca oculto de izq a der */
}

/* ==============================
   TEXTO DESTACADO (utilidad global)
============================== */
.texto-destacado {
  background: var(--marca-dorada);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.6s ease;
}

.texto-destacado:hover {
  background-position: right center;
}

/* ==============================
   HEADER Y NAVEGACIÓN
============================== */
header {
  background: rgba(6, 10, 22, 0.9);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--panel-borde);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

nav {
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  flex-wrap: wrap;
}

/* LOGO — imagen del isotipo + wordmark con el mismo degradé verde -> azul */
.logo-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  background: var(--marca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* MENÚ HAMBURGUESA */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  color: var(--blanco);
  cursor: pointer;
  transition: color var(--transition-speed) ease;
}

.menu-toggle:hover {
  color: var(--azul);
}

/* NAVEGACIÓN */
nav ul {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  transition: max-height 0.3s ease;
}

nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-speed);
}

nav a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: var(--marca);
  transition: width 0.3s ease;
}

nav a:hover {
  color: var(--blanco);
}

nav a:hover::after {
  width: 100%;
}

/* ==============================
   CONTENEDORES
============================== */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 5rem 2rem;
}

h2 {
  font-family: var(--font-display);
  color: var(--blanco);
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: left;
  position: relative;
}

h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background: var(--marca);
  margin: 0.9rem 0 2.5rem;
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--verde);
  display: block;
  margin-bottom: 0.5rem;
}

h2:has(+ .section-subtitle)::after {
  margin-bottom: 0.9rem;
}

.section-subtitle {
  color: var(--gris);
  font-size: 1rem;
  max-width: 60ch;
  margin-bottom: 2.5rem;
}

/* ==============================
   SOBRE MÍ
============================== */
.about-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.about-text {
  flex: 1;
  min-width: 280px;
  max-width: 640px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.about-text p {
  color: var(--gris);
  font-size: 1.05rem;
  max-width: 55ch;
}

.about-photo {
  flex: 1;
  min-width: 240px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.about-photo img {
  width: 100%;
  max-width: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-borde);
  padding: 4px;
  transition: border-color 0.5s ease;
}

.about-photo img:hover {
  border-color: var(--azul);
}

.social-icons {
  margin-top: 1.75rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.social-icons a {
  font-size: 1.4rem;
  margin-right: 1.25rem;
  color: var(--gris);
  transition: color var(--transition-speed) ease;
}

.social-icons a:hover {
  color: var(--azul);
}

/* ==============================
   PROYECTOS
============================== */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.proyecto {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-top: 2px solid transparent;
  padding: 1.5rem;
  border-radius: var(--radius);
  transition:
    border-color 0.35s ease,
    transform 0.35s ease;
  opacity: 0;
  transform: translateY(40px);

  /* Alinear contenido verticalmente */
  display: flex;
  flex-direction: column;
}
.proyecto:hover {
  transform: translateY(-4px);
  border-color: var(--panel-borde);
  border-top-color: var(--azul);
}

.link-proyecto {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* TITULOS DE PROYECTOS */
.titulo-proyecto {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.1rem;
  color: var(--blanco);
}

.logo-proyecto {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 2px;
}

.logo-proyecto-icon {
  font-size: 1.15rem;
  color: var(--verde);
}

.proyecto p {
  margin-top: 0.6rem;
  color: var(--gris);
  font-size: 0.95rem;
}

.proyecto .email-button {
  margin-top: auto;
  width: 100%;
}

/* Slider: contenedor con perspectiva para el tilt 3D en desktop */
.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  border: 1px solid var(--panel-borde);
  background: #000;
  perspective: 900px;
}

.proyecto.tilt-active .slider {
  box-shadow:
    0 0 0 1px var(--dorado-glow),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

.slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(6, 10, 22, 0.8);
  border: 1px solid var(--panel-borde);
  color: var(--blanco);
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--transition-speed) ease;
  z-index: 2;
}

.prev:hover,
.next:hover {
  background: var(--verde);
  color: var(--fondo);
  border-color: var(--verde);
}

.prev {
  left: 10px;
}
.next {
  right: 10px;
}

/* ==============================
   SKILLS — estilo ledger / planilla
============================== */
.skills-list {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: block;
  border-top: 1px solid var(--panel-borde);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.skills-list li {
  position: relative;
  padding: 0.85rem 0.25rem 0.85rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gris);
  border-bottom: 1px solid var(--panel-borde);
  transition: color var(--transition-speed) ease;
}

.skills-list li:hover {
  color: var(--blanco);
}

.skills-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--verde);
}

.skills-list li:nth-child(even)::before {
  color: var(--azul);
}

.core-values li strong {
  font-family: var(--font-body);
  color: var(--blanco);
  font-weight: 600;
}

/* ECOSISTEMA TECNOLÓGICO — tarjetas de categoría */
.skills-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.skill-category {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-top: 2px solid transparent;
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color var(--transition-speed) ease;
}

.skill-category:hover {
  border-top-color: var(--verde);
}

.skill-category:nth-child(even):hover {
  border-top-color: var(--azul);
}

.skill-category h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blanco);
  margin-bottom: 0.6rem;
}

.skill-category p {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gris);
  line-height: 1.6;
}

/* ==============================
   CONTACTO
============================== */
.contact .container {
  text-align: left;
}

.contact p {
  color: var(--gris);
  margin-bottom: 1.75rem;
}

.email-link {
  color: var(--blanco);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--azul);
  transition: color var(--transition-speed);
}

.email-link:hover {
  color: var(--azul);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-actions .email-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--marca);
  color: var(--fondo);
  border: none;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.contact-actions .email-button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.contact-actions .email-button i {
  margin-right: 0.6rem;
}

/* variante outline — para acciones secundarias de contacto (WhatsApp, Instagram) */
.email-button--outline {
  background: transparent;
  color: var(--blanco);
  border: 1px solid var(--panel-borde);
}

.email-button--outline:hover {
  border-color: var(--azul);
  color: var(--azul);
  filter: none;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid var(--panel-borde);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gris);
  background: rgba(6, 10, 22, 0.9);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate:first-of-type {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
    animation: none;
  }
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 992px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
    margin-bottom: 0.5rem;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
  }

  nav ul.active {
    max-height: 500px;
  }

  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    order: 2;
  }

  .about-text p {
    max-width: 100%;
  }

  .about-photo {
    order: 1;
  }
}

@media (max-width: 576px) {
  h2 {
    font-size: 1.7rem;
  }

  .titulo-proyecto {
    font-size: 1.05rem;
  }

  .social-icons a {
    font-size: 1.3rem;
  }

  .prev,
  .next {
    display: none; /* en móvil se navega con swipe, no con flechas */
  }
}