/* ============================================================
   mitosu.dev — estilos
   Minimalismo editorial oscuro · spec 03_spec_grafico.md
   El acento se inyecta vía --accent (tweak ámbar/azul)
   ============================================================ */

:root {
  --bg: #0E0E11;
  --surface: #16161A;
  --subtle: #1E1E24;
  --text: #E8E8F0;
  --muted: #7A7A8C;
  --border: #2A2A34;

  /* inyectadas por JS según tweaks */
  --accent: #ECA13F;
  --accent-hover: #D4882A;
  --accent-ink: #131316; /* texto sobre acento */

  --cat-backend: var(--accent);
  --cat-frontend: #7C5BEF;
  --cat-cloud: #5BEFB8;
  --cat-ia: #EF8D5B;

  --font-display: "Space Mono", monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --font-code: "JetBrains Mono", monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --section-gap: 6rem;
  --block-gap: 3rem;
  --item-gap: 1.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(14, 14, 17, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
}
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}
.nav-links a {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); }

.lang-toggle {
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

/* ---------- Secciones ---------- */
.section { padding-top: var(--section-gap); }
.section:last-of-type { padding-bottom: var(--section-gap); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.section-title::before {
  content: "// ";
  color: var(--accent);
}
.section-intro {
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 46rem;
  margin-bottom: var(--block-gap);
  text-wrap: pretty;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: center;
  width: 100%;
}
.hero-kicker {
  font-family: var(--font-code);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.hero-headline .hl { color: var(--accent); }
.hero-sub {
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 38rem;
  margin-bottom: 2.25rem;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* variante terminal */
.hero-terminal .hero-prompt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--accent);
  margin-bottom: 1rem;
}
.hero-terminal .hero-prompt .chevron { color: var(--muted); margin-right: 0.5em; }
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* variante tarjeta — homenaje a la tarjeta de visita */
.hero-card-frame {
  border: 1px dashed #55555f;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  border-radius: 2px;
}
.hero-card-frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: var(--accent);
}
.hero-card-frame .hero-brandmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

/* foto */
.hero-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: var(--font-code);
  font-size: 0.82rem;
  /* deja sitio a la derecha para la rama 'datos · SQL' sin desbordar */
  padding-right: 130px;
}
.diag-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.diag-node {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.55rem 1.05rem;
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: border-color 200ms ease, color 200ms ease;
}
.diag-node--accent { border-color: var(--accent); color: var(--accent); }
.diag-node--muted { color: var(--muted); font-size: 0.74rem; padding: 0.45rem 0.85rem; }
.diag-conn {
  width: 2px;
  height: 30px;
  background: var(--border);
  position: relative;
}
.diag-arrow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 0.7rem;
  line-height: 1;
}
.diag-mid { position: relative; display: flex; justify-content: center; }
.diag-branch {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.diag-branch-line { width: 26px; height: 2px; background: var(--border); }
.diag-branch-line::after {
  content: "▶";
  position: absolute;
  color: var(--accent);
  font-size: 0.6rem;
  margin-left: 22px;
  margin-top: -0.5em;
}
.diag-caption {
  margin: 1.1rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  max-width: 230px;
  text-align: center;
  line-height: 1.45;
}
.hero-diagram:hover .diag-node { border-color: var(--accent); }

/* --- Pulso de datos: puntos viajeros por los conectores --- */
.diag-pulse {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px var(--accent);
  opacity: 0; /* invisible por defecto: con reduced-motion el diagrama queda estático */
  pointer-events: none;
}
/* puntos verticales: centrados sobre el conector de 2px, recorren sus 30px de alto */
.diag-pulse--v1, .diag-pulse--v2 { top: 0; left: 50%; margin-left: -2.5px; }
/* punto horizontal: centrado sobre la línea de la rama, recorre sus 26px */
.diag-pulse--h { top: 50%; left: 0; margin-top: -2.5px; }

@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  6%       { box-shadow: 0 0 14px 1px var(--accent); border-color: var(--accent); }
  14%      { box-shadow: 0 0 0 0 transparent; }
}
@keyframes pulse-fall {
  0%        { opacity: 0; transform: translateY(0); }
  2%        { opacity: 1; }
  10%       { opacity: 1; transform: translateY(30px); }
  12%, 100% { opacity: 0; transform: translateY(30px); }
}
@keyframes pulse-slide {
  0%        { opacity: 0; transform: translateX(0); }
  2%        { opacity: 1; }
  10%       { opacity: 1; transform: translateX(26px); }
  12%, 100% { opacity: 0; transform: translateX(26px); }
}

/* Una sola línea de tiempo (4.5s) escalonada con delay; solo si el usuario no pidió reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
  .diag-node--accent { animation: node-glow 4.5s ease-in-out 0s    infinite; }
  .diag-node--api    { animation: node-glow 4.5s ease-in-out 0.9s  infinite; }
  .diag-node--muted  { animation: node-glow 4.5s ease-in-out 1.6s  infinite; }
  .diag-node--cloud  { animation: node-glow 4.5s ease-in-out 1.95s infinite; }
  .diag-pulse--v1    { animation: pulse-fall  4.5s linear 0.5s infinite; }
  .diag-pulse--h     { animation: pulse-slide 4.5s linear 1.2s infinite; }
  .diag-pulse--v2    { animation: pulse-fall  4.5s linear 1.5s infinite; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Stack ---------- */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--item-gap);
  margin-bottom: var(--item-gap);
}
.stack-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.stack-group-label {
  font-family: var(--font-code);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge {
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--subtle);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
}
.badge-backend { border-left-color: var(--cat-backend); }
.badge-frontend { border-left-color: var(--cat-frontend); }
.badge-cloud { border-left-color: var(--cat-cloud); }
.badge-ia { border-left-color: var(--cat-ia); }

/* bloque IA destacado */
.ia-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ia-block::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cat-ia);
}
.ia-label {
  font-family: var(--font-code);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cat-ia);
  margin-bottom: 0.75rem;
}
.ia-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
.ia-body { color: var(--muted); font-size: 0.975rem; text-wrap: pretty; }

/* ---------- Casos: cards ---------- */
.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--item-gap);
}
.caso-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 200ms ease;
}
.caso-card:hover { border-color: var(--accent); }

/* --- Mini-mockups de UI por caso (CSS puro, decorativos) --- */
.caso-visual {
  height: 104px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
  padding: 12px;
  font-family: var(--font-code);
  position: relative;
  transition: border-color 200ms ease;
}
.caso-card:hover .caso-visual { border-color: var(--accent); }

/* Caso 1 — cola/async: API ▸ mensajes en cola ▸ workers */
.caso-visual--queue { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qv-chip {
  font-size: 0.6rem;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  white-space: nowrap;
  flex: none;
}
.qv-arrow { color: var(--muted); font-size: 0.7rem; flex: none; }
.qv-queue { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.qv-msg { height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, var(--subtle)); }
.qv-msg:nth-child(2) { width: 85%; }
.qv-msg:nth-child(3) { width: 70%; }
.qv-msg:nth-child(4) { width: 55%; }
.qv-workers { display: flex; flex-direction: column; gap: 6px; flex: none; }
.qv-worker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Caso 2 — calendario: cabecera de días + rejilla de mes */
.caso-visual--calendar { display: flex; flex-direction: column; gap: 5px; }
.cv-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cv-dow { height: 3px; border-radius: 2px; background: var(--border); }
.cv-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 4px; flex: 1; }
.cv-cell { border-radius: 2px; background: var(--subtle); }
.cv-cell--event { background: var(--accent); }
.cv-cell--today { outline: 1px solid var(--accent); outline-offset: -1px; }

/* Caso 3 — dashboard: barras + guiño a factura PDF */
.caso-visual--chart { display: flex; align-items: flex-end; gap: 8px; }
.cv-bars { display: flex; align-items: flex-end; gap: 7px; flex: 1; height: 100%; }
.cv-bar { flex: 1; min-height: 4px; border-radius: 2px 2px 0 0; background: var(--subtle); }
.cv-bar--hi { background: var(--accent); }
.cv-doc {
  flex: none;
  align-self: flex-start;
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2px 4px;
}
.caso-sector {
  font-family: var(--font-code);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.caso-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  text-wrap: balance;
}
.caso-part-label {
  font-family: var(--font-code);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.caso-part p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Casos: lista editorial ---------- */
.casos-list { display: flex; flex-direction: column; }
.caso-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}
.casos-list .caso-row:last-child { border-bottom: 1px solid var(--border); }
.caso-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
}
.caso-row .caso-title { font-size: 1.35rem; margin: 0.35rem 0 1rem; }
.caso-row-parts { display: flex; flex-direction: column; gap: 1.1rem; }
.caso-row-parts p { color: var(--muted); font-size: 0.95rem; max-width: 40rem; }

/* placeholders de casos */
.caso-placeholder {
  border: 1px dashed var(--border);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    rgba(122, 122, 140, 0.05) 14px 28px
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  min-height: 220px;
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.caso-placeholder .caso-sector { color: #55555f; }
.caso-placeholder-hint {
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: #55555f;
}
.caso-row.placeholder-row {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    rgba(122, 122, 140, 0.05) 14px 28px
  );
}

/* ---------- Cómo trabajo ---------- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--item-gap);
}
.work-block {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.75rem;
}
.work-block-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.work-block h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.work-block p { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }

/* ---------- Contacto ---------- */
.contact-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.contact-box .section-title { margin-bottom: 1rem; }
.contact-body {
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 38rem;
  margin: 0 auto 2rem;
  text-wrap: pretty;
}
.contact-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.contact-availability {
  font-family: var(--font-code);
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: inline-block;
  padding: 0.5rem 1rem;
}
.contact-extras {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.contact-extra { text-align: left; max-width: 240px; }
.contact-extra-label {
  font-family: var(--font-code);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.contact-extra-value { font-size: 0.85rem; color: var(--text); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  margin-top: var(--section-gap);
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.75rem;
}

/* ---------- Reveal al scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .stack-grid, .casos-grid { grid-template-columns: 1fr 1fr; }
  .ia-block { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --section-gap: 4rem; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    background: rgba(14, 14, 17, 0.97);
    backdrop-filter: blur(12px);
    padding: 2rem 1.5rem 2.5rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .nav-burger { display: block; }
  .hero { min-height: auto; padding-top: 110px; padding-bottom: 1rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-diagram { order: 1; padding-right: 0; margin-top: 2.5rem; transform: scale(0.92); }
  .stack-grid, .casos-grid, .work-grid { grid-template-columns: 1fr; }
  .caso-row { grid-template-columns: 1fr; gap: 0.75rem; padding: 2rem 0; }
  .contact-extras { flex-direction: column; align-items: center; gap: 1.25rem; }
  .contact-extra { text-align: center; }
}