/* =====================================================================
   TECH KAWAII ROSA  ·  capa de estilo (se carga DESPUÉS de style.css)
   - No cambia el HTML ni los colores base: usa tus variables
     (--rosa-brillante, --rosa-suave, --card-bg, etc.)
   - Modo claro y oscuro: todo sale de las variables --tk-* de abajo
   ===================================================================== */

:root {
  --tk-mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, "DejaVu Sans Mono", monospace;
  --tk-line: rgba(236, 72, 153, 0.38);
  --tk-glow: rgba(236, 72, 153, 0.45);
  --tk-surface: rgba(255, 255, 255, 0.88);
  --tk-bar: linear-gradient(135deg, #fff0f7, #fbcfe8);
  --tk-mut: #b07a98;
  --tk-dot2: #f9a8d4;
  --tk-dot3: #fbcfe8;
  --tk-media-bg: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

[data-theme="dark"] {
  --tk-line: rgba(244, 114, 182, 0.4);
  --tk-glow: rgba(244, 114, 182, 0.5);
  --tk-surface: rgba(26, 16, 23, 0.9);
  --tk-bar: linear-gradient(135deg, #2a1622, #3a1d2e);
  --tk-mut: #9b6f87;
  --tk-dot2: #9d4a78;
  --tk-dot3: #5a2c46;
  --tk-media-bg: linear-gradient(135deg, #2a1622, #3a1d2e);
}

/* ============ NAV: botones sueltos tipo archivo ============ */

body .sticky-nav-wrapper .sticky-nav {
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .sticky-nav-wrapper .sticky-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 13px;
  font-family: var(--tk-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-secundario);
  background: var(--tk-surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tk-line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/* número 01…05 */
body .sticky-nav a::before {
  font-size: 10px;
  font-weight: 800;
  color: var(--rosa-brillante);
}
body .sticky-nav a:nth-child(1)::before { content: "01"; }
body .sticky-nav a:nth-child(2)::before { content: "02"; }
body .sticky-nav a:nth-child(3)::before { content: "03"; }
body .sticky-nav a:nth-child(4)::before { content: "04"; }
body .sticky-nav a:nth-child(5)::before { content: "05"; }

/* extensión de archivo (solo decorativa, el texto sigue traduciéndose igual) */
body .sticky-nav a::after {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.55;
}
body .sticky-nav a[href="#sobre-mi"]::after { content: ".md"; }
body .sticky-nav a[href="#tecnologias"]::after { content: ".js"; }
body .sticky-nav a[href="#github-actividad"]::after { content: ".json"; }
body .sticky-nav a[href="#proyectos"]::after { content: ".jsx"; }
body .sticky-nav a[href="#contacto"]::after { content: ".html"; }

@media (hover: hover) and (pointer: fine) {
  body .sticky-nav-wrapper .sticky-nav a:hover {
    color: var(--rosa-brillante);
    transform: translateY(-2px);
    box-shadow: 0 0 14px var(--tk-glow);
  }
}

body .sticky-nav-wrapper .sticky-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, #ec4899, #db2777);
  border-color: var(--rosa-brillante);
  box-shadow: 0 0 16px var(--tk-glow);
}
body .sticky-nav a.is-active::before { color: #fff; }
body .sticky-nav a.is-active::after { opacity: 0.8; }

/* lectura "▰▰▰▱▱ 40%" (la agrega el JS) */
.tk-readout {
  align-self: center;
  padding: 7px 10px;
  font-family: var(--tk-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--rosa-brillante);
  white-space: nowrap;
  background: var(--tk-surface);
  border: 1px dashed var(--tk-line);
  border-radius: 10px;
}

/* barrita fina de scroll arriba de todo */
.tk-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1004;
  pointer-events: none;
}
.tk-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f9a8d4, var(--rosa-brillante));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px var(--tk-glow);
  transition: width 0.12s linear;
}

/* ============ TÍTULOS DE SECCIÓN ============ */

body section > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tk-mono);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--texto-oscuro);
  border-left: 0;
  padding-left: 0;
  margin-bottom: 25px;
}
.tk-ready body section > h2,
html.tk-ready body section > h2 { margin-bottom: 6px; }

body section > h2 i { color: var(--rosa-brillante); font-size: 0.8em; }

body section > h2::before {
  font-size: 12px;
  font-weight: 800;
  color: var(--rosa-brillante);
  padding: 3px 8px;
  background: var(--rosa-suave);
  border: 1px solid var(--tk-line);
  border-radius: 8px;
}
body #sobre-mi > h2::before { content: "01 //"; }
body #tecnologias > h2::before { content: "02 //"; }
body #github-actividad > h2::before { content: "03 //"; }
body #proyectos > h2::before { content: "04 //"; }
body #contacto > h2::before { content: "05 //"; }

/* cursor parpadeando */
body section > h2::after {
  content: "";
  width: 9px;
  height: 0.95em;
  background: var(--rosa-brillante);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--tk-glow);
  animation: tkBlink 1.1s steps(1) infinite;
}
@keyframes tkBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* línea de estado de carga (decorativa, la crea el JS) */
.tk-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
  font-family: var(--tk-mono);
  font-size: 12px;
  color: var(--tk-mut);
  min-height: 18px;
}
.tk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rosa-brillante);
  box-shadow: 0 0 8px var(--rosa-brillante);
  animation: tkPulse 1.6s ease-in-out infinite;
}
.tk-status.is-done .tk-msg { color: var(--rosa-brillante); font-weight: 700; }
.tk-status.is-done .tk-dot { animation: none; }
@keyframes tkPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } }

/* subtítulos de grupo: "// Destacados" */
body .project-group .tech-title {
  font-family: var(--tk-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--rosa-oscuro);
}
body .project-group .tech-title i { color: var(--rosa-brillante); }
body .project-group .tech-title::before { content: "// "; color: var(--tk-mut); font-weight: 500; }

/* ============ FILTROS: > react (3) ============ */

body .project-filters { gap: 8px; }

body .project-filters .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-family: var(--tk-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-secundario);
  background: var(--card-bg);
  border: 1px solid var(--tk-line);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.08);
}
body .project-filters .filter-btn::before {
  content: ">";
  font-weight: 800;
  color: var(--rosa-brillante);
}
body .project-filters .filter-btn::after {
  content: attr(data-count);
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--rosa-oscuro);
  background: var(--rosa-suave);
  border-radius: 6px;
}
body .project-filters .filter-btn:not([data-count])::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  body .project-filters .filter-btn:hover {
    color: var(--rosa-brillante);
    background: var(--card-bg);
    border-color: var(--rosa-brillante);
    transform: translateY(-2px);
    box-shadow: 0 0 14px var(--tk-glow);
  }
}
body .project-filters .filter-btn.active,
body .project-filters .filter-btn.active:hover {
  color: #fff;
  background: linear-gradient(135deg, #ec4899, #db2777);
  border-color: var(--rosa-brillante);
  box-shadow: 0 0 16px var(--tk-glow);
}
body .project-filters .filter-btn.active::before { color: #fff; }
body .project-filters .filter-btn.active::after { color: #fff; background: rgba(255, 255, 255, 0.25); }

/* ============ TARJETAS DE PROYECTO ============ */

body .projects-grid { gap: 26px; }

body .project-group[data-group] .projects-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
}

body .projects-grid > .card {
  --cp: 24px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--cp);
  text-align: left;
  border: 1px solid var(--tk-line);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.1);
}
@media (hover: hover) and (pointer: fine) {
  body .projects-grid > .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--tk-line), 0 14px 38px var(--tk-glow);
  }
}

/* barra de ventana: ● ● ●  archivo.js ♡ */
body .projects-grid > .card::before {
  content: "archivo.js  ♡";
  display: flex;
  align-items: center;
  height: 36px;
  margin: calc(var(--cp) * -1) calc(var(--cp) * -1) 20px;
  padding: 0 16px 0 72px;
  font-family: var(--tk-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tk-mut);
  background: var(--tk-bar);
  border-bottom: 1px solid var(--tk-line);
}
body .projects-grid > .card::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rosa-brillante);
  box-shadow: 16px 0 0 var(--tk-dot2), 32px 0 0 var(--tk-dot3);
}

body .projects-grid > .card[data-project="cuotanube"]::before { content: "cuota-nube.js  ♡"; }
body .projects-grid > .card[data-project="mensuales"]::before { content: "mensuales.js  ♡"; }
body .projects-grid > .card[data-project="nekojobs"]::before { content: "neko-jobs.py  ♡"; }
body .projects-grid > .card[data-project="cxmacros"]::before { content: "cx-macros.jsx  ♡"; }
body .projects-grid > .card[data-project="csat"]::before { content: "calculadora-csat.js  ♡"; }
body .projects-grid > .card[data-project="plantita"]::before { content: "plantita.js  ♡"; }
body .projects-grid > .card[data-project="bitacorajob"]::before { content: "bitacora-jobs.js  ♡"; }
body .projects-grid > .card[data-project="honeymoon"]::before { content: "honeymoon.scss  ♡"; }
body .projects-grid > .card[data-project="crud"]::before { content: "gestor-productos.php  ♡"; }
body .projects-grid > .card[data-project="sqlstudio"]::before { content: "sql-studio.sql  ♡"; }

/* contenido alineado a la izquierda */
body .projects-grid > .card h3 {
  justify-content: flex-start;
  margin-bottom: 14px;
  font-size: 19px;
}
body .projects-grid > .card h3 i { color: var(--rosa-brillante); }
body .projects-grid > .card .featured-badge { align-self: flex-start; justify-self: start; margin-bottom: 10px; }
body .projects-grid > .card .media-container {
  margin-bottom: 16px;
  border: 1px solid var(--tk-line);
  border-radius: 12px;
  background: var(--tk-media-bg);
}
body .projects-grid > .card .project-type {
  margin-bottom: 12px;
  text-align: left;
  font-family: var(--tk-mono);
  font-size: 12px;
  color: var(--tk-mut);
}
body .projects-grid > .card > p:not(.project-type) { font-size: 14.5px; }

body .projects-grid > .card .project-tags {
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  gap: 7px;
  margin: 6px 0 18px;
}
body .projects-grid > .card .project-tags span {
  padding: 4px 9px;
  font-family: var(--tk-mono);
  font-size: 11px;
  text-transform: none;
  border: 1px solid var(--tk-line);
  border-radius: 7px;
}
body .projects-grid > .card .project-tags span::before { content: "#"; opacity: 0.55; margin-right: 1px; }

body .projects-grid > .card .buttons {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
body .projects-grid > .card .buttons .button {
  padding: 9px 16px;
  font-family: var(--tk-mono);
  font-size: 12.5px;
  border-radius: 10px;
}

/* ============ MARCO TECH DEL GIF: corchetes + etiqueta + brillo ============ */

body .projects-grid > .card .media-container {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  body .projects-grid > .card:hover .media-container {
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 18px var(--tk-glow);
  }
}

/* corchetes en las 4 esquinas (no tapan ni bloquean nada) */
body .projects-grid > .card .media-container::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  --b: var(--rosa-brillante);
  background:
    linear-gradient(var(--b), var(--b)) top left / 14px 2px,
    linear-gradient(var(--b), var(--b)) top left / 2px 14px,
    linear-gradient(var(--b), var(--b)) top right / 14px 2px,
    linear-gradient(var(--b), var(--b)) top right / 2px 14px,
    linear-gradient(var(--b), var(--b)) bottom left / 14px 2px,
    linear-gradient(var(--b), var(--b)) bottom left / 2px 14px,
    linear-gradient(var(--b), var(--b)) bottom right / 14px 2px,
    linear-gradient(var(--b), var(--b)) bottom right / 2px 14px;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* etiqueta "● demo.gif" arriba a la izquierda */
body .projects-grid > .card .media-container::before {
  content: "demo.gif";
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 3;
  pointer-events: none;
  padding: 2px 7px 2px 16px;
  font-family: var(--tk-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--rosa-oscuro);
  background:
    radial-gradient(circle at 8px 50%, var(--rosa-brillante) 0 2.5px, transparent 3px),
    var(--tk-surface);
  border: 1px solid var(--tk-line);
  border-radius: 7px;
  animation: tkRec 1.8s ease-in-out infinite;
}
body .projects-grid > .card .media-container.is-paused::before {
  content: "❚❚ demo.gif";
  padding-left: 7px;
  background: var(--tk-surface);
  animation: none;
}
@keyframes tkRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (max-width: 720px) {
  body .projects-grid > .card .media-container::before {
    top: 10px;
    left: 12px;
    font-size: 7.5px;
    padding: 1px 5px 1px 12px;
    border-radius: 5px;
    background:
      radial-gradient(circle at 6px 50%, var(--rosa-brillante) 0 2px, transparent 2.5px),
      var(--tk-surface);
  }
  body .projects-grid > .card .media-container.is-paused::before {
    padding-left: 5px;
    background: var(--tk-surface);
  }
  body .projects-grid > .card .media-container::after { inset: 5px; opacity: 0.7; }
}

/* Todas las tarjetas (destacadas o no) usan el mismo formato vertical, de a dos. */

/* ============ Filtro "Destacados" activo: de a uno por fila, GIF al costado ============
   (con "Todos" u otros filtros, Destacados usa la grilla normal de a 2) */

body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid { grid-template-columns: 1fr !important; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured {
  --cp: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas:
    "bar    bar"
    "media  badge"
    "media  title"
    "media  type"
    "media  text"
    "media  tags"
    "media  buttons";
  grid-template-rows: auto auto auto auto auto auto 1fr;
  column-gap: 30px;
  row-gap: 0;
}
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas:
    "bar     bar"
    "badge   media"
    "title   media"
    "type    media"
    "text    media"
    "tags    media"
    "buttons media";
}
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured::before { grid-area: bar; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .featured-badge { grid-area: badge; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured h3 { grid-area: title; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .media-container { grid-area: media; align-self: center; margin-bottom: 0; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .project-type { grid-area: type; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured > p:not(.project-type) { grid-area: text; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .project-tags { grid-area: tags; align-self: start; align-content: flex-start; margin: 6px 0 18px; }
body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .buttons { grid-area: buttons; align-self: start; margin-top: 0; }

/* ============ Filtro "Todos": todas las tarjetas fluyen juntas, SIEMPRE de a dos ============
   Los grupos dejan de ser cajas separadas (display: contents) para que no queden
   tarjetas solas con un hueco al lado (Neko Jobs + CX Macros comparten fila). */

body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 26px;
}
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > *:not(.project-group) { grid-column: 1 / -1; }
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group { display: contents !important; }
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group .projects-grid { display: contents !important; }
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group > .tech-title { grid-column: 1 / -1; margin: 14px 0 0; }
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group > .group-sub { grid-column: 1 / -1; margin: -14px 0 0; }
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group[data-group="react"] > .tech-title,
body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos > .project-group[data-group="react"] > .group-sub { display: none; }
@media (max-width: 600px) {
  body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos { column-gap: 10px; row-gap: 10px; }
}

/* ---- arreglo: mismo tamaño y interlineado de texto en todas las tarjetas ---- */
body .projects-grid > .card > p:not(.project-type) {
  font-size: 14.5px;
  line-height: 1.65;
}

/* ============ OTROS DETALLES (mismo estilo en todas las secciones) ============ */

body .tech-stack-general span,
body .skills-summary-pillbox .summary-pill {
  font-family: var(--tk-mono);
  font-size: 13px;
  border: 1px solid var(--tk-line);
  border-radius: 10px;
}

/* ============ CONTACTO: misma tipografía tech que el resto ============
   Los controles (botones, solapa del acordeón, campos del formulario) usan la
   misma mono que "Ver demo" y los filtros; los textos corridos quedan con la
   letra de siempre, igual que las descripciones de las tarjetas. */

body .contact-item,
body #copy-email-btn,
body .contact-accordion summary,
body .contact-btn,
body .contact-body input,
body .contact-body textarea {
  font-family: var(--tk-mono);
}
body .contact-item,
body #copy-email-btn { font-size: 14px; font-weight: 600; }
/* el botón "Copiar email" traía font-family/size "inherit" en el HTML: esto lo fuerza a la mono */
body #copy-email-btn,
body #copy-email-btn #copy-label { font-family: var(--tk-mono) !important; }
body #copy-email-btn { font-size: 14px !important; font-weight: 600; }
@media (max-width: 480px) { body #copy-email-btn { font-size: 12.5px !important; } }
body .contact-accordion summary { font-weight: 700; }
body .contact-body input,
body .contact-body textarea { font-size: 13.5px; }
body .contact-body input::placeholder,
body .contact-body textarea::placeholder { font-family: var(--tk-mono); font-size: 13px; }
body .contact-btn { font-size: 13.5px; font-weight: 700; }

/* ============ ENCABEZADO: etiqueta y links chicos en letra tech ============
   El nombre y la frase de presentación se quedan con la letra de siempre. */

body .availability,
body .header-socials a,
body .header-socials button,
body .header-socials span {
  font-family: var(--tk-mono);
}
body .availability { font-size: 13px; font-weight: 600; }
body .header-socials .cv-label,
body .header-socials button,
body .header-socials a > span { font-size: 13px; font-weight: 700; }

/* ============ VISORES (CV, dossier y PDF del portfolio · español e inglés) ============
   Todo el texto del visor va en la misma letra tech que el resto de la página:
   pantalla de "Generando / Descargando…", título, subtítulos, nombre del archivo,
   "Descargar PDF", "Volver", mensajes y pie de página. Los íconos no se tocan.
   Solo cambia la tipografía: tamaños, colores y animaciones siguen igual. */

:root .dv { --dv-mono: var(--tk-mono); }

.dv,
.dv :not(i):not(svg):not(canvas):not(iframe) {
  font-family: var(--tk-mono) !important;
}

/* ============ SUBTÍTULOS en letra tech ============
   "Soporte & CX", "Desarrollo", "Herramientas de trabajo" (Tecnologías) y los
   títulos de las ventanitas de Reconocimiento / Impacto. Solo cambia la
   tipografía; el color y el tamaño siguen siendo los de siempre. */

body #tecnologias .tech-title,
body .kawaii-modal-content > h3 {
  font-family: var(--tk-mono);
  font-weight: 800;
}

/* ============ NEÓN EN CELULAR: se prende solo mientras apoyás el dedo ============
   En pantallas táctiles el :hover queda pegado, así que el neón va con :active
   (dedo apoyado) y se apaga al soltar. En PC sigue con el mouse como siempre. */
@media (hover: none), (pointer: coarse) {
  body .sticky-nav-wrapper .sticky-nav a:active {
    color: var(--rosa-brillante);
    transform: translateY(-2px);
    box-shadow: 0 0 14px var(--tk-glow);
  }
  body .sticky-nav-wrapper .sticky-nav a.is-active:active { color: #fff; }
  body .project-filters .filter-btn:active {
    color: var(--rosa-brillante);
    background: var(--card-bg);
    border-color: var(--rosa-brillante);
    transform: translateY(-2px);
    box-shadow: 0 0 14px var(--tk-glow);
  }
  body .project-filters .filter-btn.active:active { color: #fff; background: linear-gradient(135deg, #ec4899, #db2777); }
  body .projects-grid > .card:active {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--tk-line), 0 14px 38px var(--tk-glow);
  }
  body .projects-grid > .card:active .media-container {
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 18px var(--tk-glow);
  }
}

/* ============ LETRA TECH EN EL RESTO ============
   Todo lleva la mono menos tu nombre (h1 y logo) y los textos largos de párrafo.
   Los íconos (<i>, <svg>) no se tocan. */

/* botones flotantes: EN, tema, pausa y la solapa de controles */
body .float-btn,
body #panel-toggle {
  font-family: var(--tk-mono);
  font-weight: 800;
}

/* frase de presentación bajo el nombre */
body .subtitle {
  font-family: var(--tk-mono);
  font-size: 0.92em;
  line-height: 1.6;
}

/* títulos de los proyectos */
body .projects-grid > .card h3 {
  font-family: var(--tk-mono);
  font-weight: 800;
  font-size: 17.5px;
  letter-spacing: -0.2px;
}

/* banner del juego */
body .game-banner,
body .game-banner *:not(i):not(svg):not(svg *) {
  font-family: var(--tk-mono);
}

/* actividad de GitHub: días, meses, números y leyenda */
body #github-actividad,
body #github-actividad *:not(i):not(svg):not(svg *) {
  font-family: var(--tk-mono);
}

/* texto y mail dentro de "¿Tenés alguna consulta?" */
body .contact-body,
body .contact-body *:not(i):not(svg):not(svg *) {
  font-family: var(--tk-mono);
}
body .contact-mail { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  body .subtitle { font-size: 0.86em; }
  body .projects-grid > .card h3 { font-size: 16px; }
}

/* ============ MODO OSCURO: textos que no se leían ============
   - Las etiquetas de tecnologías quedaban BLANCAS con letra rosa pálido.
   - Los botones de contacto (Email, Copiar email, LinkedIn, GitHub) tenían letra
     marrón oscura sobre fondo oscuro.
   - "Enviar consulta", "Ver demo" y "JUGAR": letra blanca sobre rosa claro. */

[data-theme="dark"] body .tech-stack-general:not(.highlight) span {
  background: var(--card-bg, #1a1017);
  color: #f4b6d4;
  border-color: rgba(244, 114, 182, 0.45);
  box-shadow: 0 4px 14px rgba(244, 114, 182, 0.1);
}
[data-theme="dark"] body .tech-stack-general:not(.highlight) span i { color: var(--rosa-brillante); }

[data-theme="dark"] body .contact-item,
[data-theme="dark"] body #copy-email-btn {
  color: #f4b6d4 !important;
  border-color: rgba(244, 114, 182, 0.45);
}
[data-theme="dark"] body .contact-item i { color: var(--rosa-brillante); }

[data-theme="dark"] body .contact-btn { color: #2d1222; }
[data-theme="dark"] body .buttons .button:not(.secondary) { background: #db2777 !important; border-color: #db2777 !important; }
[data-theme="dark"] body .game-banner .gb-go { color: #2d1222; }

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] body .tech-stack-general:not(.highlight) span:hover {
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 14px var(--tk-glow);
  }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .tk-readout { display: none; }
}

@media (max-width: 820px) {
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured,
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured:nth-child(even) {
    display: flex;
    flex-direction: column;
  }
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .media-container { margin-bottom: 16px; }
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .project-tags { margin: 6px 0 18px; }
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid > .card.featured .buttons { margin-top: auto; }
}

@media (max-width: 600px) {
  body .sticky-nav-wrapper .sticky-nav a { padding: 7px 10px; font-size: 11.5px; }
  body .sticky-nav a::after { display: none; }
  body section > h2 { font-size: 19px; gap: 8px; }
  body section > h2::before { font-size: 11px; padding: 2px 6px; }
  body .projects-grid > .card,
  body .projects-grid > .card.featured { --cp: 18px; }
  body .projects-grid > .card::before { padding-left: 66px; }
  body .projects-grid > .card .buttons { flex-direction: row; flex-wrap: wrap; }
  body .projects-grid > .card .buttons .button { width: auto; flex: 1 1 140px; justify-content: center; }
  .tk-status { font-size: 11px; }
}

/* ============ Pantallas chicas: SIEMPRE de a dos, tarjetas compactas ============ */
@media (max-width: 600px) {
  body .projects-grid { gap: 10px; }
  body .projects-grid > .card { --cp: 10px; border-radius: 12px; }
  body .projects-grid > .card::before { font-size: 9px; padding: 6px 8px 6px 46px; }
  body .projects-grid > .card h3 { font-size: 13px; }
  body .projects-grid > .card .project-type { font-size: 9.5px; }
  body .projects-grid > .card > p:not(.project-type) { font-size: 11.5px; line-height: 1.5; }
  body .projects-grid > .card .project-tags { gap: 4px; }
  body .projects-grid > .card .project-tags span { font-size: 9px; padding: 2px 6px; }
  body .projects-grid > .card .featured-badge { font-size: 10px; padding: 2px 8px; }
  body .projects-grid > .card .buttons { flex-direction: column; gap: 6px; }
  body .projects-grid > .card .buttons .button { width: 100%; flex: 0 0 auto; font-size: 11px; padding: 6px 8px; }
  body .projects-grid > .card .media-container::before { transform: scale(0.7); }
}

/* ============ Alineación entre tarjetas de la misma fila ============
   Las dos tarjetas de una fila comparten las mismas "líneas": el título, el GIF, el tipo,
   el texto, los tags y los botones quedan a la misma altura en las dos.
   (No aplica al filtro "Destacados", que mantiene su formato ancho.) */

@supports (grid-template-rows: subgrid) {
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0;
  }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .project-tags { align-self: start; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .buttons { align-self: end; margin-top: 0; }
}

/* tags prolijos y parejos */
body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .project-tags { gap: 6px; }
body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .project-tags span {
  line-height: 1.2;
  padding: 4px 8px;
  white-space: nowrap;
}

/* botones un poco más compactos para que 3 entren en una sola línea (ej. Cuota Nube) */
@media (min-width: 601px) {
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .buttons { gap: 8px; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card .buttons .button {
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ============ Solapita "Ver más": expande el texto de cada proyecto ============
   Solo en el modo de tarjetas de a dos. En el filtro "Destacados" (formato ancho) no se usa. */

.tk-more { display: none; }
@media (max-width: 820px) {
body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp .tk-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: -2px 0 14px;
  padding: 3px 11px 3px 12px;
  font-family: var(--tk-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--rosa-oscuro);
  background: var(--rosa-suave);
  border: 1px solid var(--rosa-brillante);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.3;
}
body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.is-open .tk-more { display: inline-flex; }
}

.tk-more:hover { background: var(--rosa-brillante); color: #fff; }
.tk-more:focus-visible { outline: 2px solid var(--rosa-brillante); outline-offset: 2px; }
.tk-chev {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.is-open > .tk-more .tk-chev { transform: translateY(1px) rotate(-135deg); }

/* texto recortado a 3 líneas (4 en celular) hasta que se expande */
@media (max-width: 820px) {
body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp:not(.is-open) > p:not(.project-type) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
}
@media (max-width: 600px) {
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp:not(.is-open) > p:not(.project-type) { -webkit-line-clamp: 4; line-clamp: 4; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp .tk-more { font-size: 10px; padding: 2px 9px; margin-bottom: 10px; }
}

@media (max-width: 820px) {
  @supports (grid-template-rows: subgrid) {
    body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp > p:not(.project-type),
    body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.is-open > p:not(.project-type) { margin-bottom: 40px; }
  }
}

/* con filas compartidas: la solapita va en la misma fila que el texto, en el espacio reservado debajo */
@supports (grid-template-rows: subgrid) {
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card::before { grid-row: 1; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > h3 { grid-row: 2; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > .media-container { grid-row: 3; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > .project-type { grid-row: 4; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > p:not(.project-type) { grid-row: 5; grid-column: 1; align-self: start; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > .tk-more { grid-row: 5; grid-column: 1; align-self: end; justify-self: start; margin: 0 0 14px; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > .project-tags { grid-row: 6; }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card > .buttons { grid-row: 7; }
}

/* ============ Etiqueta "Destacado": dentro de la barra de la ventana (arriba a la derecha) ============
   No ocupa una fila propia, así las tarjetas destacadas no quedan más altas que las demás.
   Con el filtro "Destacados" activo se mantiene el formato ancho de antes. */

body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.featured .featured-badge {
  position: absolute;
  top: 6px;
  right: 14px;
  height: 24px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  z-index: 2;
}
@media (max-width: 600px) {
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.featured .featured-badge {
    font-size: 0; gap: 0; height: 20px; top: 8px; right: 8px; padding: 0 7px;
  }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.featured .featured-badge i { font-size: 11px; }
}

/* ============ ACCESIBILIDAD: sin movimiento ============ */

.reduce-motion body section > h2::after { animation: none; opacity: 1; }
.reduce-motion .tk-dot { animation: none; }
.reduce-motion body .projects-grid > .card .media-container::before { animation: none; }
.reduce-motion .tk-progress i { transition: none; }
@media (prefers-reduced-motion: reduce) {
  body section > h2::after,
  body .projects-grid > .card .media-container::before,
  .tk-dot { animation: none; }
}

/* ============ RESPONSIVE: letra tech en celular ============
   - Los campos del formulario van a 16px en pantallas chicas: con menos, el iPhone
     hace zoom solo al tocar un campo.
   - Botones de contacto un poco más compactos para que entren bien. */
@media (max-width: 820px) {
  body .contact-body input,
  body .contact-body textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  body .contact-item,
  body #copy-email-btn { font-size: 12.5px; }
  body .contact-accordion summary { font-size: 14px; }
  body .availability { font-size: 12px; }
}

/* ============ CELULAR: tarjetas de a UNA (una abajo de la otra), tamaño cómodo ============
   Reemplaza el modo "siempre de a dos" en pantallas chicas: en el celular se veían muy chicas.
   Va al final del archivo a propósito, para ganarle a las reglas compactas de arriba. */
@media (max-width: 600px) {
  body .project-group[data-group] .projects-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body:has(.project-filters .filter-btn[data-filter="all"].active) #proyectos {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 22px;
  }
  body .projects-grid { gap: 22px; }

  body .projects-grid > .card { --cp: 18px; border-radius: 16px; }
  body .projects-grid > .card::before { font-size: 11.5px; padding: 0 16px 0 66px; }
  body .projects-grid > .card h3 { font-size: 17px; }
  body .projects-grid > .card .project-type { font-size: 12px; }
  body .projects-grid > .card > p:not(.project-type) { font-size: 14.5px; line-height: 1.65; }
  body .projects-grid > .card .project-tags { gap: 6px; }
  body .projects-grid > .card .project-tags span { font-size: 11px; padding: 4px 8px; }
  body .projects-grid > .card .featured-badge { font-size: 12px; padding: 4px 12px; }
  body .projects-grid > .card .buttons { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  body .projects-grid > .card .buttons .button { width: auto; flex: 1 1 140px; font-size: 12.5px; padding: 9px 14px; justify-content: center; }
  body .projects-grid > .card .media-container::before { transform: none; }

  /* "Destacado": otra vez con texto, ahora que la tarjeta es ancha */
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.featured .featured-badge {
    font-size: 11px; gap: 6px; height: 24px; top: 6px; right: 12px; padding: 0 10px;
  }
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.featured .featured-badge i { font-size: 11px; }

  /* solapita "Ver más" */
  body:not(:has(.project-filters .filter-btn[data-filter="featured"].active)) .projects-grid > .card.tk-clamp .tk-more { font-size: 11px; padding: 3px 11px 3px 12px; margin-bottom: 14px; }
}

/* ============ Destacados en celular/tablet: la tarjeta no se pasa del ancho de la pantalla ============
   La columna era "1fr" (crece con el contenido); con minmax(0, 1fr) se queda del ancho de la pantalla. */
@media (max-width: 820px) {
  body:has(.project-filters .filter-btn[data-filter="featured"].active) .project-group[data-group="featured"] .projects-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body .projects-grid > .card { box-sizing: border-box; min-width: 0; max-width: 100%; }
  body .projects-grid > .card > * { min-width: 0; max-width: 100%; }
}

/* ============ Tags: que bajen de renglón en vez de salirse de la tarjeta ============
   El contenedor era un bloque sin espacios entre los tags, por eso no podían cortar línea
   (con 12 tags se pasaban del borde). Ahora es flex con wrap; el espacio entre tags ya estaba definido arriba. */
body .projects-grid > .card .project-tags { display: flex; flex-wrap: wrap; }

/* ============ GIFs: etiqueta "demo.gif", esquinas y botones más chicos y casi invisibles ============
   Antes tapaban parte de la demo. Ahora son chiquitos y transparentes, y se ven un poco más
   al pasar el mouse (en celular quedan siempre discretos, pero se pueden tocar igual). */
body .projects-grid > .card .media-container::before {
  top: 5px;
  left: 17px;   /* al lado del corchete, sin pisarlo */
  padding: 1px 4px 1px 9px;
  font-size: 6.5px;
  border-radius: 4px;
  opacity: 0.4;
  animation: tkDemoBlink 2.8s ease-in-out infinite;   /* titila mientras no pasás el mouse */
  background:
    radial-gradient(circle at 5px 50%, var(--rosa-brillante) 0 1.6px, transparent 2px),
    var(--tk-surface);
  transform: none;
}
body .projects-grid > .card .media-container.is-paused::before {
  padding-left: 4px;
  background: var(--tk-surface);
  animation: none;
}
/* casi invisible -> vuelve a su color normal -> casi invisible */
@keyframes tkDemoBlink {
  0%, 100% { opacity: 0.08; }
  45%, 60% { opacity: 1; }
}
body .projects-grid > .card .media-container::after {
  inset: 5px;
  opacity: 0.3;
  background-size: 8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px, 8px 1.5px, 1.5px 8px;
}
@media (hover: hover) and (pointer: fine) {
  body .projects-grid > .card .media-container:hover::before { animation: none; opacity: 1; }
}

/* botón de pausa (mientras reproduce): chiquito y transparente */
body .media-container:not(.is-paused) .gif-toggle-btn {
  width: 24px;
  height: 24px;
  font-size: 9px;
  bottom: 8px;
  right: 8px;
  border-width: 1px;
  opacity: 0.4;
  box-shadow: none;
}
body .media-container:not(.is-paused) .gif-toggle-btn:hover,
body .media-container:not(.is-paused) .gif-toggle-btn:focus-visible { opacity: 1; }

/* lupa: lo mismo */
body .media-container .gif-zoom-btn {
  width: 24px;
  height: 24px;
  font-size: 9px;
  top: 8px;
  right: 8px;
  border-width: 1px;
  box-shadow: none;
}
body .media-container:not(.is-paused) .gif-zoom-btn:not(:hover):not(:focus-visible) { opacity: 0.4; }

/* botón de reproducir (cuando está en pausa): un poco más chico, sigue bien visible para tocarlo */
body .media-container.is-paused .gif-toggle-btn {
  width: 40px;
  height: 40px;
  font-size: 15px;
  opacity: 0.85;
}

/* sin movimiento (botón de la página o preferencia del sistema): etiqueta quieta y suave */
.reduce-motion body .projects-grid > .card .media-container::before { animation: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  body .projects-grid > .card .media-container::before { animation: none; opacity: 0.5; }
}

/* ============ "¡Copiado!": brillitos kawaii en vez del emoji del celular ============
   El emoji ✨ se veía distinto en cada teléfono. Ahora es un dibujo propio (SVG) rosa,
   que aparece solo cuando el botón de copiar email muestra el tilde. */
#copy-icon.fa-check ~ #copy-label::after {
  content: "";
  display: inline-block;
  width: 1.35em;    /* en em: crece o se achica junto con la letra del botón */
  height: 1.2em;
  margin: -0.3em 0 -0.3em 0.4em;   /* no agranda la altura del botón */
  vertical-align: -0.28em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'><path d='M17 3 C18.2 13 21 16 31 17.5 C21 19 18.2 22 17 32 C15.8 22 13 19 3 17.5 C13 16 15.8 13 17 3Z' fill='%23ec4899' stroke='%23be185d' stroke-width='1.6' stroke-linejoin='round'/><path d='M17 9 C17.6 13.4 19 14.8 23 15.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.85'/><path d='M34 20 C34.6 25 36 26.6 41 27.4 C36 28.2 34.6 29.8 34 35 C33.4 29.8 32 28.2 27 27.4 C32 26.6 33.4 25 34 20Z' fill='%23f9a8d4' stroke='%23ec4899' stroke-width='1.3' stroke-linejoin='round'/><circle cx='36' cy='6' r='2.4' fill='%23f9a8d4' stroke='%23ec4899' stroke-width='1.2'/></svg>") center / contain no-repeat;
  animation: tkPop 0.45s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes tkPop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.reduce-motion #copy-icon.fa-check ~ #copy-label::after { animation: none; }
@media (prefers-reduced-motion: reduce) { #copy-icon.fa-check ~ #copy-label::after { animation: none; } }

/* ============ CONTACTO · versión tech ============
   Los botones pasan de "píldora blanca" a la misma pastilla que los filtros y la nav
   (borde fino rosa, esquinas de 10px, brillo al pasar el mouse) con una etiqueta
   chiquita a la derecha, como las extensiones de la nav. El acordeón queda como una
   mini terminal: prompt ">" rosa, cursor parpadeante y flechita en chip.
   Todo es solo estilo: el HTML, los textos y el formulario no cambian. */
@media screen {

  body #contacto .contact-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }

  body #contacto .contact-item,
  body #contacto #copy-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--texto-secundario);
    background: var(--card-bg);
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(236, 72, 153, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  body #contacto .contact-item i { color: var(--rosa-brillante); }

  /* etiqueta decorativa a la derecha (misma idea que ".md / .jsx" en la nav) */
  body #contacto .contact-item::after {
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--rosa-oscuro);
    background: var(--rosa-suave);
    border-radius: 6px;
    opacity: 0.9;
  }
  body #contacto .contact-grid > .contact-item:nth-child(1)::after { content: "mailto"; }
  body #contacto .contact-grid > .contact-item:nth-child(2)::after { content: "⌘C"; }
  body #contacto .contact-grid > .contact-item:nth-child(3)::after { content: "/in"; }
  body #contacto .contact-grid > .contact-item:nth-child(4)::after { content: "git"; }

  @media (hover: hover) and (pointer: fine) {
    body #contacto .contact-item:hover,
    body #contacto #copy-email-btn:hover {
      color: var(--rosa-brillante) !important;
      border-color: var(--rosa-brillante);
      transform: translateY(-2px);
      box-shadow: 0 0 14px var(--tk-glow);
    }
  }
  body #contacto .contact-item:active,
  body #contacto #copy-email-btn:active {
    color: var(--rosa-brillante) !important;
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 14px var(--tk-glow);
  }
  body #contacto .contact-item:focus-visible,
  body #contacto .contact-accordion summary:focus-visible {
    outline: 2px dashed var(--rosa-brillante);
    outline-offset: 3px;
  }

  /* ---------- acordeón "¿Tenés alguna consulta?" ---------- */
  body #contacto .contact-accordion {
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--tk-line);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(236, 72, 153, 0.1);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    body #contacto .contact-accordion:hover {
      border-color: var(--rosa-brillante);
      box-shadow: 0 0 0 1px var(--tk-line), 0 10px 30px var(--tk-glow);
    }
  }
  body #contacto .contact-accordion[open] {
    border-color: var(--rosa-brillante);
  }

  body #contacto .contact-accordion summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 15px;
    color: var(--rosa-brillante);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    list-style: none;
  }
  body #contacto .contact-accordion summary::-webkit-details-marker { display: none; }

  /* prompt ">" y cursor "_" parpadeando */
  body #contacto .contact-accordion summary::before {
    content: ">";
    font-weight: 800;
    color: var(--rosa-brillante);
  }
  body #contacto .contact-accordion summary [data-k="title"]::after {
    content: "_";
    margin-left: 2px;
    font-weight: 800;
    animation: tkBlink 1.1s steps(1) infinite;
  }
  @keyframes tkBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

  /* flechita en chip (como los contadores de los filtros) */
  body #contacto .contact-accordion summary .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--rosa-oscuro);
    background: var(--rosa-suave);
    border-radius: 6px;
  }

  /* al abrir: la solapa queda como barra de ventana */
  body #contacto .contact-accordion[open] summary {
    background: var(--tk-bar);
    border-bottom: 1px solid var(--tk-line);
  }

  body #contacto .contact-body {
    padding: 20px 22px 22px;
  }
  body #contacto .contact-intro {
    margin-bottom: 14px;
    color: var(--tk-mut);
  }
  body #contacto .contact-intro::before {
    content: "// ";
    font-weight: 700;
    color: var(--rosa-brillante);
  }

  /* ---------- campos del formulario ---------- */
  body #contacto .contact-body input:not([type="hidden"]),
  body #contacto .contact-body textarea {
    color: var(--texto-oscuro);
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  body #contacto .contact-body input:focus,
  body #contacto .contact-body textarea:focus {
    outline: none;
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 0 3px var(--rosa-suave), 0 0 14px var(--tk-glow);
  }
  body #contacto .contact-body ::placeholder { color: var(--tk-mut); opacity: 1; }

  /* botón enviar: mismo degradé que el filtro / la nav activa */
  body #contacto .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: 1px solid var(--rosa-brillante);
    border-radius: 10px;
    box-shadow: 0 0 16px var(--tk-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  body #contacto #sendBtn::before { content: "▶"; font-size: 0.8em; }
  @media (hover: hover) and (pointer: fine) {
    body #contacto .contact-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 22px var(--tk-glow);
    }
  }
  [data-theme="dark"] body #contacto .contact-btn { color: #fff; }

  body #contacto .contact-mail { color: var(--tk-mut); }
  body #contacto .contact-mail a { color: var(--rosa-brillante); }
}

/* sin movimiento: el cursor queda fijo */
:root.reduce-motion body #contacto .contact-accordion summary [data-k="title"]::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  body #contacto .contact-accordion summary [data-k="title"]::after { animation: none; }
}

/* los 4 botones SIEMPRE en una sola fila: en pantallas chicas se achican y pierden la etiqueta */
@media screen and (max-width: 700px) {
  body #contacto .contact-item::after { display: none; }
  body #contacto .contact-grid > .contact-item { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
}

/* ============ CONTACTO · ajustes de modo oscuro y responsive ============ */
@media screen {

  /* ---------- MODO OSCURO ---------- */
  [data-theme="dark"] body #contacto .contact-item,
  [data-theme="dark"] body #contacto #copy-email-btn {
    background: var(--card-bg);
    box-shadow: 0 3px 12px rgba(244, 114, 182, 0.1);
  }
  [data-theme="dark"] body #contacto .contact-item::after {
    color: #f4b6d4;
    background: rgba(244, 114, 182, 0.16);
  }
  [data-theme="dark"] body #contacto .contact-item:hover,
  [data-theme="dark"] body #contacto #copy-email-btn:hover {
    color: var(--rosa-brillante) !important;
  }
  [data-theme="dark"] body #contacto .contact-accordion {
    background: var(--card-bg);
    box-shadow: 0 6px 22px rgba(244, 114, 182, 0.12);
  }
  [data-theme="dark"] body #contacto .contact-accordion summary .arrow {
    color: #f4b6d4;
    background: rgba(244, 114, 182, 0.16);
  }
  [data-theme="dark"] body #contacto .contact-body input:not([type="hidden"]),
  [data-theme="dark"] body #contacto .contact-body textarea {
    color: #f4d4e4;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(244, 114, 182, 0.4);
  }
  [data-theme="dark"] body #contacto .contact-body input:focus,
  [data-theme="dark"] body #contacto .contact-body textarea:focus {
    border-color: var(--rosa-brillante);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.22), 0 0 14px var(--tk-glow);
  }
  [data-theme="dark"] body #contacto .contact-mail a { color: #f4b6d4; }

  /* ---------- TABLET ---------- */
  @media (max-width: 820px) {
    body #contacto .contact-accordion { width: 100%; max-width: 100%; }
    body #contacto .contact-body { padding: 18px 16px 20px; }
  }

  /* ---------- CELULAR ---------- */
  @media (max-width: 480px) {
    body #contacto .contact-grid { gap: 6px; }
    body #contacto .contact-grid > .contact-item,
    body #contacto #copy-email-btn {
      flex: 1 1 0;
      min-width: 0;
      flex-direction: column;
      gap: 5px;
      padding: 10px 4px;
      font-size: 11px !important;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
    }
    body #contacto .contact-item i { font-size: 17px; }
    body #contacto .contact-accordion summary {
      flex-wrap: wrap;
      row-gap: 4px;
      padding: 14px 12px;
      text-align: center;
    }
  }

  /* pantallas muy angostas */
  @media (max-width: 360px) {
    body #contacto .contact-grid { gap: 4px; }
    body #contacto .contact-grid > .contact-item,
    body #contacto #copy-email-btn { font-size: 10px !important; padding: 10px 2px; }
    body #contacto .contact-accordion summary { font-size: 13.5px; }
  }

  /* táctil: blancos de toque cómodos y brillo solo mientras apoyás el dedo */
  @media (hover: none), (pointer: coarse) {
    body #contacto .contact-item,
    body #contacto #copy-email-btn,
    body #contacto .contact-btn { min-height: 44px; }
    body #contacto .contact-accordion summary { min-height: 48px; }
    body #contacto .contact-accordion summary:active { background: var(--tk-bar); }
    body #contacto .contact-btn:active { transform: translateY(-1px); box-shadow: 0 0 22px var(--tk-glow); }
  }
}

/* ============ NEÓN SUTIL EN TODO EL SITIO ============
   Al posar el mouse sobre cualquier botón o cartel se prende un brillo rosa suave.
   Va con "drop-shadow", que sigue la forma real de cada cosa (un ícono brilla como
   ícono, un botón redondo como botón redondo): así no aparecen cuadros ni marcos
   alrededor. No cambia fondos ni bordes. En celular se prende solo mientras apoyás
   el dedo. Solo pantalla (no toca PDF). */
:root { --tk-neon: drop-shadow(0 0 7px var(--tk-glow)); }
[data-theme="dark"] { --tk-neon: drop-shadow(0 0 7px var(--tk-glow)); }

@media screen {
  /* El brillo aparece y se va suave (no de golpe). Se repiten las transiciones
     habituales para no pisar las que ya tenían los botones. */
  @media (hover: hover) and (pointer: fine) {
    body .button,
    body .dv-btn,
    body .float-btn,
    body #panel-toggle,
    body #back-to-top,
    body .gif-toggle-btn,
    body .gif-zoom-btn,
    body .header-socials a,
    body .header-socials button,
    body .contact-btn,
    body .summary-pill,
    body .tech-stack-general span,
    body .project-tags span,
    body .featured-badge,
    body .availability,
    body .gh-year-badge,
    body .project-type,
    body .tk-readout {
      transition: filter 0.5s ease-out, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    body .button:hover,
    body .dv-btn:hover,
    body .float-btn:hover,
    body #panel-toggle:hover,
    body #back-to-top:hover,
    body .gif-toggle-btn:hover,
    body .gif-zoom-btn:hover,
    body .gif-lightbox-close:hover,
    body .kawaii-close-btn:hover,
    body .header-socials a:hover,
    body .header-socials button:hover,
    body .contact-btn:hover,
    body .summary-pill:hover,
    body .tech-stack-general span:hover,
    body .project-tags span:hover,
    body .featured-badge:hover,
    body .availability:hover,
    body .gh-year-badge:hover,
    body .project-type:hover,
    body .tk-readout:hover {
      filter: var(--tk-neon);
      transition: filter 1.6s ease-in-out, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
  }

  @media (hover: none), (pointer: coarse) {
    body .button:active,
    body .dv-btn:active,
    body .float-btn:active,
    body #panel-toggle:active,
    body #back-to-top:active,
    body .gif-toggle-btn:active,
    body .gif-zoom-btn:active,
    body .kawaii-close-btn:active,
    body .header-socials a:active,
    body .header-socials button:active,
    body .summary-pill:active,
    body .tech-stack-general span:active,
    body .project-tags span:active,
    body .featured-badge:active,
    body .availability:active,
    body .gh-year-badge:active {
      filter: var(--tk-neon);
    }
  }
}

/* ============ BOTÓN ENCENDIDO (todo el sitio) ============
   Al posar el mouse, cada botón, chip y etiqueta se ve prendido: más claro por dentro,
   con luz interior, texto brillante y un halo rosa neón por fuera. Se enciende de a poco. */
@media screen and (hover: hover) and (pointer: fine) {
  body .button:hover,
  body .dv-btn:hover,
  body .float-btn:hover,
  body #panel-toggle:hover,
  body #back-to-top:hover,
  body .gif-toggle-btn:hover,
  body .gif-zoom-btn:hover,
  body .gif-lightbox-close:hover,
  body .kawaii-close-btn:hover,
  body .contact-btn:hover,
  body .summary-pill:hover,
  body .tech-stack-general span:hover,
  body .tech-stack-general.highlight span:hover,
  body .project-tags span:hover,
  body .featured-badge:hover,
  body .availability:hover,
  body .gh-year-badge:hover,
  body .project-type:hover,
  body .tk-readout:hover,
  body .project-filters .filter-btn.active:hover {
    filter: brightness(1.07) saturate(1.1);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.14), 0 0 6px rgba(255, 45, 149, 0.34), 0 0 16px rgba(255, 45, 149, 0.2), 0 0 28px rgba(255, 45, 149, 0.1) !important;
    transition: filter 1.8s ease-in-out, box-shadow 1.8s ease-in-out, text-shadow 1.8s ease-in-out, transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  /* Íconos sueltos del encabezado (sin caja): se prenden con el mismo rosa neón, siguiendo su forma */
  body .header-socials a:hover,
  body .header-socials button:hover {
    filter: brightness(1.07) drop-shadow(0 0 3px rgba(255, 45, 149, 0.4)) drop-shadow(0 0 9px rgba(255, 45, 149, 0.24));
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.35);
    transition: filter 1.8s ease-in-out, text-shadow 1.8s ease-in-out, transform 0.2s ease, color 0.2s ease;
  }
}

/* ============ ÍCONO DEL ACORDEÓN: sobre cute tech (dibujado, sin emoji) ============
   Sobre rosa con corazón flotando y dos rayitas de "texto". Se dibuja con CSS,
   así el cambio de idioma (ES/EN) no lo borra y se ve igual en todos los celulares.
   Los colores funcionan en modo claro y oscuro. */
@media screen {
  body #contacto .contact-accordion summary [data-k="title"]::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.4C12 7.4 8.6 5.4 8.6 3.5C8.6 2.5 9.3 1.9 10.1 1.9C10.9 1.9 11.6 2.3 12 3C12.4 2.3 13.1 1.9 13.9 1.9C14.7 1.9 15.4 2.5 15.4 3.5C15.4 5.4 12 7.4 12 7.4Z' fill='%23ec4899'/%3E%3Crect x='2.5' y='8' width='19' height='13' rx='3' fill='%23fff0f7' stroke='%23ec4899' stroke-width='1.8'/%3E%3Cpath d='M3.5 10L12 16L20.5 10' fill='none' stroke='%23ec4899' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 19H9M15 19H18' stroke='%23f9a8d4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(236, 72, 153, 0.35));
  }
}
@media screen and (max-width: 480px) {
  body #contacto .contact-accordion summary [data-k="title"]::before { width: 19px; height: 19px; margin-right: 6px; vertical-align: -4px; }
}

/* ============ BOTÓN DE MODO CLARO / OSCURO: rebote al cambiar ============
   Se queda con los emojis de siempre (🌙 / ☀️). Cada vez que cambiás de modo el
   botón da un saltito y rebota. Solo cuando lo tocás (no al cargar la página). */
@media screen {
  body #theme-toggle.tk-pop { animation: tkIconBounce 0.65s ease-out; }
}
@keyframes tkIconBounce {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-10px) scale(0.92, 1.08) rotate(-10deg); }
  45%  { transform: translateY(0) scale(1.15, 0.85); }
  65%  { transform: translateY(-4px) scale(0.97, 1.03) rotate(5deg); }
  85%  { transform: translateY(0) scale(1.04, 0.96); }
  100% { transform: translateY(0) scale(1); }
}
:root.reduce-motion body #theme-toggle.tk-pop { animation: none; }
@media (prefers-reduced-motion: reduce) {
  body #theme-toggle.tk-pop { animation: none; }
}