/* ── ROOT VARIABLES ───────────────────────────────────── */
:root {
  --green: #00ff41;
  --green-dim: #00c030;
  --green-glow: 0 0 8px #00ff41aa;
  --black: #000;
  --sky: #cce9f9;
  --sky-dark: #93c5fd;
  --sky-deep: #1e3a5f;
  --white: #f0f0f0;
  --card-bg: #ffffffcc;
  --mono: 'Share Tech Mono', monospace;
  --display: 'Orbitron', sans-serif;
  --body: 'Rajdhani', sans-serif;
}
/* ── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  overflow-x: hidden;
  background: var(--black);
}
/* ── CUSTOM SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: var(--green-dim);
  border-radius: 3px;
}
/* ══════════════════════════════════════════════════════
    NAVIGATION
══════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 0.35rem 2rem;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #00ff4130;
}
/* Logo */
.contenedor-logo-navegacion {
  width: 74px;
  height: 74px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-navegacion {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--green);
  box-shadow: var(--green-glow);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform .3s;
}
.logo-navegacion:hover {
  transform: rotate(10deg) scale(1.08);
}
.logo-navegacion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.texto-logo-navegacion {
  font-size: .85rem;
  letter-spacing: .05em;
}
.texto-circular {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  animation: circularSpin 20s linear infinite;
}
.texto-circular:hover {
  animation-duration: 5s;
}
.texto-circular span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-family: var(--mono);
  font-size: .48rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 5px #00ff4199;
}
/* Links */
.enlaces-navegacion {
  --nav-indicator-start: .35rem;
  --nav-indicator-width: 0px;
  --nav-indicator-offset: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  list-style: none;
  width: min(620px, calc(100vw - 190px));
  max-width: none;
  padding: .35rem;
  border: 1px solid #303039;
  border-radius: 12px;
  background: #17171d;
  box-shadow: 0 8px 25px #00000066;
  isolation: isolate;
}
.enlaces-navegacion::before {
  position: absolute;
  z-index: -1;
  top: .35rem;
  bottom: .35rem;
  left: var(--nav-indicator-start);
  width: var(--nav-indicator-width);
  border-radius: 8px;
  background: var(--green);
  box-shadow: 0 2px 10px #00ff4140;
  content: "";
  transform: translateX(var(--nav-indicator-offset));
  transition: width .28s cubic-bezier(.23, 1, .32, 1), transform .32s cubic-bezier(.23, 1, .32, 1);
}
.elemento-navegacion {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.elemento-navegacion a {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 .45rem;
  border-radius: 8px;
  color: #c6c6ce;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
  transition: color .2s ease;
}
.elemento-navegacion a:hover, .elemento-navegacion a:focus-visible {
  color: var(--green);
}
.elemento-navegacion.activo a {
  color: #071008;
}
.elemento-navegacion a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.elemento-navegacion.activo a:focus-visible {
  outline-color: var(--white);
}
/* Hamburger */
.menu-hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.menu-hamburguesa span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--green);
  transition: all .3s;
}
.menu-hamburguesa.abierto span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-hamburguesa.abierto span:nth-child(2) {
  opacity: 0;
}
.menu-hamburguesa.abierto span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* Mobile menu */
.menu-movil {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.97);
  border-bottom: 1px solid #00ff4130;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 999;
}
.menu-movil.abierto {
  display: flex;
}
.menu-movil a {
  font-family: var(--mono);
  font-size: 1rem;
  color: #aaa;
  text-decoration: none;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #111;
  transition: color .2s, background .2s;
}
.menu-movil a:hover {
  color: var(--green);
  background: #00ff4108;
}
/* ══════════════════════════════════════════════════════
   HERO — BIENVENIDA
══════════════════════════════════════════════════════ */
#inicio {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
}
#lienzo-matriz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
  pointer-events: none;
}
.contenido-portada {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
}
.insignia-portada {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--green);
  letter-spacing: .3em;
  text-transform: uppercase;
  border: 1px solid #00ff4140;
  padding: .35rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 2px;
  animation: badgeFade 1s ease forwards;
}
.titulo-portada {
  font-family: var(--display);
  font-size: clamp(2.8rem, 8vw, 6rem);
  color: var(--green);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 30px #00ff4166, 0 0 60px #00ff4133;
  letter-spacing: .04em;
  animation: glitchIn 1s ease .3s both;
}
.titulo-portada span {
  display: block;
}
.texto-distorsionado {
  display: block;
  max-width: 90vw;
  height: auto;
}
.solo-lectores-pantalla {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.subtitulo-portada {
  font-family: var(--mono);
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #00c030;
  margin-top: 1rem;
  letter-spacing: .1em;
  animation: typeIn 2s steps(28) 1.2s both;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--green);
}
.acciones-portada {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp .6s ease 2.5s both;
}
.boton {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .7rem 1.8rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all .25s;
}
.boton-principal {
  background: var(--green);
  color: #000;
  border: 2px solid var(--green);
}
.boton-principal:hover {
  background: transparent;
  color: var(--green);
  box-shadow: var(--green-glow);
}
.boton-contorno {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green-dim);
}
.boton-contorno:hover {
  background: #00ff4115;
  box-shadow: var(--green-glow);
}
/* Scroll indicator */
.indicador-desplazamiento {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  animation: bounce 2s infinite;
  z-index: 2;
}
.indicador-desplazamiento span {
  font-family: var(--mono);
  font-size: .65rem;
  color: #00ff4180;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.flecha-desplazamiento {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}
/* ══════════════════════════════════════════════════════
   SKILLS
══════════════════════════════════════════════════════ */
#habilidades {
  background: #0a0a0a;
  padding: 6rem 2rem;
  border-top: 1px solid #00ff4120;
}
.titulo-seccion {
  font-family: var(--display);
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
}
.titulo-seccion h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: .08em;
}
.titulo-seccion .linea {
  display: block;
  width: 60px;
  height: 3px;
  margin: .8rem auto 0;
  border-radius: 2px;
}
#habilidades .titulo-seccion h2 {
  color: var(--green);
}
#habilidades .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
.bucle-habilidades {
  position: relative;
  width: 100%;
  max-width: 1150px;
  height: 132px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid #00ff4130;
  border-bottom: 1px solid #00ff4130;
  background: #050b08cc;
}
.bucle-habilidades::before, .bucle-habilidades::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(35px, 10%, 130px);
  z-index: 2;
  pointer-events: none;
}
.bucle-habilidades::before {
  left: 0;
  background: linear-gradient(90deg, #0a0a0a, transparent);
}
.bucle-habilidades::after {
  right: 0;
  background: linear-gradient(-90deg, #0a0a0a, transparent);
}
.pista-bucle-logos {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.lista-bucle-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0 1.5rem;
  margin: 0;
  width: max-content;
}
.elemento-bucle-habilidades {
  flex: 0 0 auto;
  min-width: 170px;
  height: 78px;
  padding: .8rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid #00ff4135;
  border-radius: 8px;
  background: #111;
  color: var(--green);
  font-family: var(--display);
  font-size: .78rem;
  white-space: nowrap;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.elemento-bucle-habilidades:hover {
  transform: scale(1.08);
  border-color: var(--green);
  box-shadow: 0 0 20px #00ff4138;
}
.elemento-bucle-habilidades i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #00ff4145;
  border-radius: 7px;
  background: #00ff4112;
  font-size: 1.15rem;
}
/* ══════════════════════════════════════════════════════
   PORTFOLIO
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   DESARROLLO WEB
══════════════════════════════════════════════════════ */
#desarrollo-web {
  background: #050505;
  padding: 6rem 2rem;
  border-top: 1px solid #00ff4118;
}
#desarrollo-web .titulo-seccion h2 {
  color: var(--green);
}
#desarrollo-web .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
.categorias-desarrollo {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
/* CATEGORIAS DE DESARROLLO: agrupa cada servicio y destaca su encabezado. */
.categoria-desarrollo {
  background: #0c0c0c;
  border: 1px solid #1c1c1c;
  border-radius: 14px;
  padding: 1.8rem;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.categoria-desarrollo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green-dim), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.categoria-desarrollo:hover {
  border-color: #00ff4128;
}
.categoria-desarrollo:hover::before {
  opacity: 1;
}
/* Category header */
.encabezado-categoria {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.icono-categoria {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #00ff4110;
  border: 1px solid #00ff4128;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--green);
}
.encabezado-categoria h3 {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--green);
  letter-spacing: .06em;
  font-weight: 700;
}
.encabezado-categoria p {
  font-family: var(--mono);
  font-size: .72rem;
  color: #555;
  letter-spacing: .05em;
  margin-top: .15rem;
}
/* 3-col card grid */
.cuadricula-desarrollo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .cuadricula-desarrollo {
    grid-template-columns: 1fr;
  }
}
/* Each visible card */
.tarjeta-desarrollo {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .25s, border-color .3s, box-shadow .3s;
}
.tarjeta-desarrollo:hover {
  transform: translateY(-5px);
  border-color: #00ff4135;
  box-shadow: 0 8px 25px #00ff4115;
}
.icono-tarjeta-desarrollo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #00ff4108;
  border: 1px solid #00ff4120;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--green-dim);
}
.tarjeta-desarrollo strong {
  font-family: var(--display);
  font-size: .8rem;
  color: #e0e0e0;
  letter-spacing: .04em;
}
.tarjeta-desarrollo p {
  font-family: var(--body);
  font-size: .88rem;
  color: #777;
  line-height: 1.5;
}
/* Hidden extra cards */
.contenido-extra-desarrollo {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .contenido-extra-desarrollo {
    grid-template-columns: 1fr;
  }
}
.contenido-extra-desarrollo.visible {
  display: grid;
}
/* Ver más button row */
.acciones-desarrollo {
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
}
.boton-ver-mas {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .5rem 1.5rem;
  border-radius: 4px;
  background: transparent;
  color: var(--green-dim);
  border: 1px solid #00ff4130;
  transition: all .25s;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.boton-ver-mas:hover {
  background: #00ff4110;
  border-color: var(--green-dim);
  color: var(--green);
  box-shadow: 0 0 12px #00ff4120;
}
.boton-ver-mas .flecha {
  display: inline-block;
  transition: transform .3s;
}
.boton-ver-mas.abierto .flecha {
  transform: rotate(180deg);
}
/* Dev CTA Button */
.contenedor-accion-desarrollo {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  animation: fadeUp .6s ease 0.5s both;
}
.boton-accion-desarrollo {
  font-size: .9rem;
  padding: .85rem 2.5rem !important;
  background: var(--green) !important;
  color: #000 !important;
  border: 2px solid var(--green) !important;
  text-shadow: none;
  box-shadow: 0 0 20px #00ff4160 !important;
}
.boton-accion-desarrollo:hover {
  background: transparent !important;
  color: var(--green) !important;
  box-shadow: var(--green-glow) !important;
}
#portafolio {
  background: #06100d;
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}
#portafolio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #02050533 55%, #020505dd 100%);
  pointer-events: none;
}
#fibras-fantasma-portafolio {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .9;
  pointer-events: none;
}
#portafolio .titulo-seccion h2 {
  color: var(--green);
  text-shadow: 0 0 14px #00ff4166;
}
#portafolio .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
#sobre-nosotros {
  background: #050d0b;
  padding: 6rem 2rem;
  border-top: 1px solid #00ff4115;
}
#sobre-nosotros .titulo-seccion h2 {
  color: var(--green);
  text-shadow: 0 0 14px #00ff4166;
}
#sobre-nosotros .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
.contenido-acerca-de {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(9, 22, 19, 0.88);
  border: 1px solid #00ff4128;
  border-radius: 18px;
  padding: 2rem 2.2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.contenido-acerca-de h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2vw, 2.5rem);
  color: #d9ffe5;
  margin-bottom: 1.25rem;
  text-align: center;
}
.contenido-acerca-de p,
.contenido-acerca-de li {
  font-family: var(--body);
  color: #cfe7da;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.lista-acerca-de {
  margin: 1.2rem 0 1.5rem;
  padding-left: 1.4rem;
}
.lista-acerca-de li {
  margin-bottom: .9rem;
}
.lista-acerca-de strong {
  color: var(--green);
  font-weight: 700;
}
.cuadricula-portafolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem;
  max-width: 1150px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.tarjeta-proyecto {
  background: #081712ee;
  border: 1px solid #00ff4128;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px #00000066;
  transition: transform .35s, box-shadow .35s;
}
.tarjeta-proyecto:hover {
  transform: translateY(-8px);
  border-color: #00ff4180;
  box-shadow: 0 16px 40px #00ff4126;
}
.miniatura-proyecto {
  height: 180px;
  background: var(--sky-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.miniatura-proyecto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.icono-miniatura-proyecto {
  font-size: 3.5rem;
  color: #ffffff40;
  z-index: 1;
  mix-blend-mode: difference;
}
.capa-miniatura-proyecto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: #00000070;
  transition: opacity .3s;
}
.tarjeta-proyecto:hover .capa-miniatura-proyecto {
  opacity: 1;
}
.capa-miniatura-proyecto a {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #fff;
  padding: .5rem 1.2rem;
  border-radius: 3px;
  transition: background .2s;
}
.capa-miniatura-proyecto a:hover {
  background: #ffffff30;
}
.cuerpo-proyecto {
  padding: 1.3rem;
}
.tipo-proyecto {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  background: #00ff4115;
  border-radius: 2px;
  padding: .2rem .6rem;
  display: inline-block;
  margin-bottom: .6rem;
}
.titulo-proyecto {
  font-family: var(--display);
  font-size: 1.05rem;
  color: #d9ffe5;
  font-weight: 700;
  margin-bottom: .5rem;
  letter-spacing: .02em;
}
.descripcion-proyecto {
  font-family: var(--body);
  font-size: .95rem;
  color: #b2c8bb;
  line-height: 1.55;
}
.tecnologias-proyecto {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;
}
.etiqueta-tecnologia {
  font-family: var(--mono);
  font-size: .65rem;
  background: #073d25;
  color: #baffca;
  border-radius: 3px;
  padding: .2rem .55rem;
}
/* thumb color variants */
.miniatura-v1 {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}
.miniatura-v2 {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}
.miniatura-v3 {
  background: linear-gradient(135deg, #1e3a5f, #2e86ab, #1e3a5f);
}
.miniatura-v4 {
  background: linear-gradient(135deg, #0a3622, #1a5c3a, #0f4c2a);
}
.miniatura-v5 {
  background: linear-gradient(135deg, #3d0c02, #6b1a0d, #3d0c02);
}
.miniatura-v6 {
  background: linear-gradient(135deg, #2d0057, #4a0080, #2d0057);
}
.miniatura-v7 {
  background: linear-gradient(135deg, #123b4a, #167b8f, #0c2733);
}
/* ══════════════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════════════ */
#contacto {
  background: #050505;
  padding: 6rem 2rem;
  border-top: 1px solid #00ff4115;
}
#contacto .titulo-seccion h2 {
  color: var(--green);
}
#contacto .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
.cuadricula-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.2rem;
  max-width: 900px;
  margin: 0 auto;
}
.tarjeta-contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.6rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  background: #0e0e0e;
  border: 1px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.tarjeta-contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
}
.tarjeta-contacto:hover {
  transform: translateY(-6px);
}
/* Per-platform color theming */
.color-contacto-whatsapp {
  --c: #25d366;
}
.color-contacto-instagram {
  --c: #e1306c;
}
.color-contacto-tiktok {
  --c: #ff0050;
}
.color-contacto-facebook {
  --c: #1877f2;
}
.color-contacto-gmail {
  --c: #ea4335;
}
.color-contacto-github {
  --c: #e0e0e0;
}
.color-contacto-linkedin {
  --c: #0a66c2;
}
.tarjeta-contacto:hover {
  border-color: var(--c);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--c) 25%, transparent);
}
.tarjeta-contacto::before {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%);
}
.tarjeta-contacto:hover::before {
  opacity: 1;
}
.tarjeta-contacto i {
  font-size: 2rem;
  color: var(--c);
  position: relative;
  z-index: 1;
  transition: transform .3s;
}
.tarjeta-contacto:hover i {
  transform: scale(1.15);
}
.tarjeta-contacto span {
  font-family: var(--mono);
  font-size: .75rem;
  color: #777;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
#preguntas-frecuentes {
  background: #050505;
  padding: 6rem 2rem;
  border-top: 1px solid #00ff4115;
}
#preguntas-frecuentes .titulo-seccion h2 {
  color: var(--green);
}
#preguntas-frecuentes .titulo-seccion .linea {
  background: var(--green);
  box-shadow: var(--green-glow);
}
.lista-preguntas {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.elemento-pregunta {
  background: #0b1210;
  border: 1px solid #00ff4120;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.elemento-pregunta.abierto {
  border-color: #00ff4180;
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.12);
}
.pregunta-frecuente {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: transparent;
  border: none;
  color: #d9ffe5;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
}
.texto-pregunta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.texto-pregunta strong {
  font-weight: 700;
}
.texto-pregunta small {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.pregunta-frecuente i {
  min-width: 20px;
  color: var(--green);
  transition: transform .25s ease;
}
.elemento-pregunta.abierto .pregunta-frecuente i {
  transform: rotate(45deg);
}
.respuesta-pregunta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
  padding: 0 1.4rem;
}
.elemento-pregunta.abierto .respuesta-pregunta {
  max-height: 500px;
  padding: 0 1.4rem 1.3rem;
}
.respuesta-pregunta p {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.8;
  color: #cfe7da;
}
.respuesta-pregunta ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  color: #cfe7da;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.8;
}
.respuesta-pregunta a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.respuesta-pregunta a:hover {
  color: #b8ffc7;
}
.tarjeta-contacto:hover span {
  color: #aaa;
}
/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer {
  background: #000;
  border-top: 1px solid #0a0a0a;
  padding: 1.5rem 2rem;
  text-align: center;
}
footer p {
  font-family: var(--mono);
  font-size: .7rem;
  color: #333;
  letter-spacing: .15em;
}
footer span {
  color: var(--green);
}
.pagina-legal {
  max-width: 820px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.enlace-volver-legal {
  display: inline-block;
  margin-bottom: 3rem;
  color: var(--green);
  font-family: var(--mono);
  font-size: .8rem;
}
.pagina-legal h1 {
  margin-bottom: 1.5rem;
  color: var(--green);
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}
.pagina-legal p {
  max-width: 70ch;
  margin-bottom: 1rem;
  color: #cfe7da;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.8;
}
.pagina-legal p a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.seccion-tienda-oculta {
  display: none;
}
.whatsapp-flotante {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 1100;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #25d366;
  border-radius: 50%;
  background: #25d366;
  color: #041b0d;
  font-size: 1.8rem;
  text-decoration: none;
  box-shadow: 0 5px 20px #25d36666, 0 0 0 0 #25d36666;
  animation: whatsappPulse 2.2s infinite;
  transition: transform .25s, background .25s, color .25s;
}
.whatsapp-flotante:hover, .whatsapp-flotante:focus-visible {
  transform: scale(1.1);
  background: #128c4a;
  color: #fff;
  outline: none;
}
@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 5px 20px #25d36666, 0 0 0 0 #25d36655;
  }
  60% {
    box-shadow: 0 5px 20px #25d36666, 0 0 0 13px transparent;
  }
}
/* ══════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes glitchIn {
  0% {
    opacity: 0;
    transform: skewX(-8deg) scale(.95);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: skewX(2deg) scale(1.01);
    filter: blur(0);
  }
  100% {
    transform: skewX(0) scale(1);
  }
}
@keyframes typeIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes badgeFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}
@keyframes blink {
  0%, 100% {
    border-color: var(--green);
  }
  50% {
    border-color: transparent;
  }
}
@keyframes circularSpin {
  to {
    transform: rotate(360deg);
  }
}
/* Scroll-reveal utility */
.revelar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delays */
.revelar-retardo-1 {
  transition-delay: .1s;
}
.revelar-retardo-2 {
  transition-delay: .2s;
}
.revelar-retardo-3 {
  transition-delay: .3s;
}
.revelar-retardo-4 {
  transition-delay: .4s;
}
.revelar-retardo-5 {
  transition-delay: .5s;
}
.revelar-retardo-6 {
  transition-delay: .6s;
}
.subtitulo-portada {
  animation: typeIn 2s steps(28) 1.2s both, blink .7s step-end 3.2s 6;
}
/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav {
    min-height: 72px;
    padding: .35rem .75rem;
  }
  .enlaces-navegacion {
    left: 78px;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: auto;
    max-width: none;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .enlaces-navegacion::-webkit-scrollbar {
    display: none;
  }
  .elemento-navegacion {
    flex: 0 0 auto;
  }
  .elemento-navegacion a {
    min-height: 42px;
    padding: 0 .6rem;
    font-size: .65rem;
  }
  .menu-hamburguesa {
    display: flex;
  }
  .subtitulo-portada {
    font-size: clamp(.8rem, 3.5vw, 1.1rem);
  }
  .contenedor-logo-navegacion {
    width: 66px;
    height: 66px;
  }
  .texto-circular span {
    font-size: .42rem;
  }
  .cuadricula-portafolio {
    grid-template-columns: 1fr;
  }
  .bucle-habilidades {
    height: 116px;
  }
  .elemento-bucle-habilidades {
    min-width: 145px;
    height: 68px;
    padding: .65rem .8rem;
    font-size: .68rem;
  }
  .elemento-bucle-habilidades i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: .95rem;
  }
  .cuadricula-contacto {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 400px) {
  .cuadricula-contacto {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .whatsapp-flotante {
    right: 1rem;
    bottom: 1rem;
    width: 52px;
    height: 52px;
    font-size: 1.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .elemento-bucle-habilidades {
    transition: none;
  }
  .enlaces-navegacion::before {
    transition: none;
  }
}