/* Tipografías self-hosted (Inter + JetBrains Mono) - Variable fonts */
/* Orbitron autoalojada (coloca los archivos en /image-data/homepage/public/fonts/) */
/* WOFF2 específicos por peso para mejor rendimiento */
@font-face{
  font-family:"Orbitron";
  src: url("/fonts/Orbitron-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Orbitron";
  src: url("/fonts/Orbitron-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
/* Fallback variable (WOFF2/TTF) para otros pesos o si falta WOFF2 */
@font-face{
  font-family:"Orbitron";
  src: url("/fonts/Orbitron-VariableFont_wght.woff2") format("woff2-variations"),
       url("/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src: url("/fonts/Inter-roman.var.woff2") format("woff2-variations"),
       url("/fonts/Inter-roman.var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family:"Inter";
  src: url("/fonts/Inter-italic.var.woff2") format("woff2-variations"),
       url("/fonts/Inter-italic.var.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Geist Sans (variable) — coloca los archivos en /image-data/homepage/fonts/ */
@font-face{
  font-family:"Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src: url("/fonts/Geist-VariableItalic.woff2") format("woff2-variations"),
       url("/fonts/Geist-VariableItalic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}

:root{
  --font-sans:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-heading: "Orbitron", "JetBrains Mono", var(--font-sans);
  /* Accent fijo (Indigo) */
  --accent: #6366f1;            /* indigo-500 */
  --accent-soft: rgba(99,102,241,.45);
  --card-bg:#111827;                    /* flat card */
  --card-bg-hover:#1f2937;              /* slightly lighter on hover */
  --card-border:rgba(255,255,255,.08);
  --focus: var(--accent-soft);
  --text-primary:#e5e7eb;   /* slate-200 */
  --text-secondary:#cbd5e1; /* slate-300 */
  --card-radius:12px;        /* más redondeo para diferenciar del default */
  --card-gap:12px;
}

/* Fondo con gradientes sutiles (sin imágenes) */
html,body{background:transparent!important}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:#0b0f14; /* flat solid background */
}

/* Contenido: ancho máx y gutters horizontales */
main{max-width:1600px;margin-inline:auto;padding-inline:24px}
@media (min-width:1600px){ main{padding-inline:32px} }

/* Header */
header h1{letter-spacing:-.02em;font-weight:700}
header{margin-bottom:24px}

/* Fuente global visible */
html,body,#app,main{
  font-family:var(--font-sans)!important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Base más legible y con presencia */
body{ font-weight:400; font-size:17px; }
h1,h2,h3{
  font-family: var(--font-heading)!important;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height:1.1;
}

/* Mono selectivo y números tabulares para métricas */
.mono, code, pre, kbd{
  font-family: var(--font-mono)!important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat, .stat-title, .stat-desc, .badge, .chip{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Métricas dentro de tarjetas: aplicar monospace y números tabulares */
.service [class*="value"],
.service [class*="count"],
.service [class*="num"],
.service [class*="size"],
.service .stat,
.service .metric,
.service .value{
  font-family: var(--font-mono)!important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Métricas hero: un poco más grandes y 600 */
.service .value, .service .metric{ font-size:1.1em; font-weight:600 }

/* Buscador (flat) */
input[type="search"],header input{
  font-family:var(--font-sans);
  border-radius:9999px;background:#111827; /* pill */
  border:1px solid var(--card-border);color:#e5e7eb
}
input[type="search"]::placeholder{color:rgba(229,231,235,.65)}
input[type="search"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Tarjetas (flat) */
.section .service,.section .bookmark{
  border-radius:var(--card-radius)!important;background:var(--card-bg)!important;
  border:1px solid var(--card-border)!important;box-shadow:none!important;
  transition:background .2s ease,transform .15s ease,border-color .2s ease;
  backdrop-filter:none;
  color:var(--text-primary);
  padding:18px 20px;              /* más aire interno */
  margin:0 !important;            /* el espacio vendrá del gap del grid */
}
/* Espaciado interno entre bloques dentro de la tarjeta */
.section .service > * + *{margin-top:8px}
.section .bookmark > * + *{margin-top:8px}
.section .service:hover,.section .bookmark:hover{
  background:var(--card-bg-hover);
  transform:translateY(-1px) scale(1.01);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
}

/* Sin acentos por servidor (preset Flat) */

/* Estados */
.status-dot{transform:scale(1.1)}
@keyframes pulse-soft{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 8px rgba(99,102,241,0)}100%{box-shadow:0 0 0 10px rgba(99,102,241,0)}}
.status-dot{animation:pulse-soft 2.6s ease-out infinite}

/* Accesibilidad foco */
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Densidad */
.section{scroll-margin-top:100px;margin-top:40px}

/* Espaciado entre tarjetas vía grid gap (cubre cualquier clase grid-*) */
.section [class*="grid"]{gap:36px!important}

/* Asegurar que no haya barra lateral por tema/base */
.section .service{border-left:0!important}

/* Separación de títulos de sección */
.section h2,.section h3{margin:8px 6px 12px;color:var(--text-secondary);font-weight:600; font-family: var(--font-heading)!important}

/* Tabs: minimalistas sin pastilla, tipografía consistente */
[role="tablist"]{
  background:transparent!important;border:none!important;border-radius:0;
  padding:0;margin:8px 0 24px;box-shadow:none!important;
  display:flex;gap:18px;align-items:center;justify-content:flex-start
}
[role="tablist"] > *{
  background:transparent!important;border:none;border-radius:4px;
  color:var(--text-secondary);padding:0;line-height:1.2;
  font-weight:500;font-size:1rem;letter-spacing:0;text-transform:none!important;
  cursor:pointer;display:inline-block;vertical-align:middle;
  white-space:normal;line-height:1.3;overflow:visible;position:relative;
  -webkit-box-decoration-break:slice;box-decoration-break:slice
}
[role="tablist"] > * a,
[role="tablist"] > * span,
[role="tablist"] > * button,
[role="tablist"] [role="tab"]{display:inline-block;color:inherit;text-decoration:none;padding:6px 10px;border-radius:9999px;position:relative}
[role="tablist"] > * a::after,
[role="tablist"] > * span::after,
[role="tablist"] > * button::after,
[role="tablist"] [role="tab"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--accent-soft);border-radius:2px;z-index:1;transform:scaleX(0);transform-origin:left;transition:transform .14s ease,background-color .14s ease;will-change:transform}
[role="tablist"] > *[aria-selected="true"],
[role="tablist"] > *.active{
  color:#e5e7eb;font-weight:600;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent)
  );border-radius:9999px;
  padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 10px rgba(99,102,241,.12);
}
[role="tablist"] > *[aria-selected="true"] a::after,
[role="tablist"] > *[aria-selected="true"] button::after,
[role="tablist"] > *[aria-selected="true"] span::after,
[role="tablist"] > *.active a::after,
[role="tablist"] > *.active button::after,
[role="tablist"] > *.active span::after,
[role="tablist"] [role="tab"][aria-selected="true"]::after,
[role="tablist"] > *:has([aria-selected="true"]) a::after,
[role="tablist"] > *:has([aria-selected="true"]) button::after,
[role="tablist"] > *:has([aria-selected="true"]) span::after,
[role="tablist"] > *:has(.active) a::after,
[role="tablist"] > *:has(.active) button::after,
[role="tablist"] > *:has(.active) span::after{ background: var(--accent); transform:scaleX(1) }
[role="tablist"] > *:not([aria-selected="true"]) a:hover::after,
[role="tablist"] > *:not([aria-selected="true"]) button:hover::after,
[role="tablist"] > *:not([aria-selected="true"]) span:hover::after,
[role="tablist"] [role="tab"]:not([aria-selected="true"]):hover::after{ background: var(--accent-soft); transform:scaleX(1) }
[role="tablist"] > *[aria-selected="true"] a,
[role="tablist"] > *.active a{background:transparent;box-shadow:none}

/* Asegurar que no aparezca una “pista” o pill detrás de las pestañas */
[role="tablist"]::before,[role="tablist"]::after{content:none!important;display:none!important}
.tabs,.tabbar,.tab-list{background:transparent!important;border:none!important;box-shadow:none!important}

/* Badges/chips legibles en dark */
.badge,.chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:4px 10px;margin-top:6px;border-radius:9999px;text-transform:none!important;letter-spacing:.01em;font-weight:600}

/* Quitar mayúsculas forzadas en stats/labels para marcar diferencia */
[class*="stat-"],.stat,.stat-title,.stat-desc{ text-transform:none!important; letter-spacing:.01em }

/* ============================= */
/* Search polish                 */
/* ============================= */
input[type="search"], header input{
  transition: background .20s ease, box-shadow .20s ease, border-color .20s ease, color .20s ease;
}
input[type="search"]:hover, header input:hover{
  background:#151c28; /* un toque más claro que #111827 */
  border-color: rgba(255,255,255,.12);
}
input[type="search"]::placeholder{ color: rgba(229,231,235,.78) }
input[type="search"]:focus-visible, header input:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================= */
/* Section headings with accent  */
/* ============================= */
.section h2,.section h3{
  border-left:3px solid var(--accent);
  padding-left:12px;
  letter-spacing:-0.01em;
  color: var(--text-primary);
}

/* ============================= */
/* Metrics contrast + scale      */
/* ============================= */
.service .value{
  font-size:1.2em; /* ligeramente mayor que 1.1 */
  font-weight:600;
  letter-spacing:-0.01em;
  color:#f3f4f6; /* más contraste */
}
.service .metric{ color: rgba(229,231,235,.72) }
.stat-title{ color: rgba(229,231,235,.68); font-weight:500 }
.stat-desc{ color: rgba(229,231,235,.55) }

/* ============================= */
/* Reduced motion (accessibility)*/
/* ============================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html:focus-within{ scroll-behavior: auto }
  .status-dot{ animation: none !important }
  /* Tabs underline sin animación */
  [role="tablist"] > * a::after,
  [role="tablist"] > * button::after,
  [role="tablist"] > * span::after,
  [role="tablist"] [role="tab"]::after{ transition: none !important }
}

/* Neutralizar mayúsculas globales de clases utilitarias */
.uppercase{ text-transform:none !important }

/* Accent toggles removidos para simplicidad: se usa un único acento fijo */

/* ============================= */
/* Quick actions (header)        */
/* ============================= */
header .actions button,
header .actions .btn,
header .actions a[role="button"],
header button.icon,
header .icon-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:6px 10px;
  color:inherit;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
header .actions button:hover,
header .actions .btn:hover,
header .actions a[role="button"]:hover,
header button.icon:hover,
header .icon-btn:hover{
  background:color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.06));
  border-color:color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.10));
  box-shadow:0 0 0 3px var(--accent-soft);
}
header .actions button:active,
header .actions .btn:active,
header .actions a[role="button"]:active,
header button.icon:active,
header .icon-btn:active{ transform:translateY(1px) }

/* ============================= */
/* Card stats: subtle dividers   */
/* ============================= */
.service .metric + .metric,
.service .stat + .stat{
  border-top:1px solid rgba(255,255,255,.06);
}

/* ============================= */
/* Status dot halo               */
/* ============================= */
.status-dot{ transition: box-shadow .18s ease }
.service:hover .status-dot{ box-shadow:0 0 0 6px var(--accent-soft) }

/* ============================= */
/* Labels                        */
/* ============================= */
label{ color:rgba(229,231,235,.82); font-weight:600; letter-spacing:.01em }

/* ============================= */
/* Tech/Geek UI typography        */
/* ============================= */
[role="tablist"] > * a,
[role="tablist"] [role="tab"],
.badge, .chip,
header .actions button,
header .actions .btn,
header .icon-btn,
.stat-title, .stat-desc,
label{
  font-family: var(--font-mono) !important;
}
.badge, .chip{
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  font-weight: 600;
}

/* ============================= */
/* Tech background grid (subtle) */
/* ============================= */
body::after{
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mix-blend-mode: normal;
}

/* ================================= */
/* Icon polish and sizing consistency */
/* ================================= */
.service .icon, .bookmark .icon{
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.service .icon img, .bookmark .icon img, .service .icon svg, .bookmark .icon svg{
  width: 18px; height: 18px;
}

/* ============================= */
/* Compact density toggle styles */
/* ============================= */
:root{ --compact-scale: .86 }
.compact .section [class*="grid"]{ gap: 22px !important }
.compact .section .service, .compact .section .bookmark{
  padding: 14px 16px;
}
.compact body, .compact main, .compact .service, .compact .bookmark{
  font-size: calc(17px * var(--compact-scale));
}
.compact .service .value{ font-size: 1.05em }

/* ============================= */
/* Tooltip helper via [data-help] */
/* ============================= */
[data-help]{ position: relative; cursor: help }
[data-help]::after{
  content: attr(data-help);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); white-space: nowrap;
  background: rgba(17,24,39,.98);
  color: #e5e7eb; border: 1px solid rgba(255,255,255,.10);
  padding: 6px 8px; border-radius: 8px; font-size: 12px;
  line-height: 1.2; pointer-events: none; opacity: 0; 
  translate: 0 4px; transition: opacity .15s ease, translate .15s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 10;
}
[data-help]:hover::after{ opacity: 1; translate: 0 0 }