/* ============================================================
   AUTOMATIZACIONES DIGITALES S.A.S.
   Sitio corporativo — dirección "Suizo / Brutalista tipográfico"
   Papel hueso · tinta casi-negra · un solo acento (azul eléctrico)
   La tipografía es el héroe.
   ============================================================ */

/* ─── Reset / base ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100%; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: var(--paper); }

/* ─── Tokens ─── */
:root {
  /* Paleta */
  --paper:        #ECE7DA;   /* fondo papel hueso, cálido */
  --paper-2:      #E3DDCC;   /* panel ligeramente más profundo */
  --ink:          #16150F;   /* tinta casi negra */
  --ink-2:        #4C4636;   /* texto secundario */
  --ink-3:        #8C8674;   /* texto tenue / captions */
  --accent:       #1F38FF;   /* azul eléctrico — acento primario (identidad/estructura) */
  --accent-deep:  #0E1FCB;
  --accent-2:     #FF5A1F;   /* naranja señal — segundo acento (energía/resultados/estado) */
  --rule:         rgba(22, 21, 15, 0.18);
  --rule-strong:  rgba(22, 21, 15, 0.42);

  /* Tipografías */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  /* Métrica */
  --container: 1480px;
  --gutter: clamp(20px, 5vw, 80px);
  --nav-h: 76px;
  --section-y: clamp(72px, 12vw, 180px);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur: 0.6s;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grano sutil de papel sobre todo el documento */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ─── Layout helpers ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rule { border: 0; border-top: 1px solid var(--rule); }
.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.muted { color: var(--ink-2); }
.accent { color: var(--accent); }
.accent-2 { color: var(--accent-2); }
/* Sin cursivas: el énfasis va recto (peso + color) — más legible y más suizo */
em, i { font-style: normal; font-weight: 600; color: var(--ink); }

/* ─── Tipografía display ─── */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand .dot { color: var(--accent); }
.brand .tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  transform: translateY(-1px);
}
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); }
.nav-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  padding-block: 4px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[data-cta] { color: var(--ink); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-cta:hover { background: var(--accent); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* ─── Menú móvil: overlay de papel bajo el nav (solo <860px) ─── */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 99; /* bajo el nav (100): la barra queda visible para cerrar */
  display: none;
  background: var(--paper);
  padding-top: calc(var(--nav-h) + 12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
html.menu-open { overflow: hidden; }
.mmenu-links { display: flex; flex-direction: column; padding-inline: var(--gutter); }
.mmenu-links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mmenu.is-open .mmenu-links a { transform: none; opacity: 1; }
.mmenu.is-open .mmenu-links a:nth-child(2) { transition-delay: 0.04s; }
.mmenu.is-open .mmenu-links a:nth-child(3) { transition-delay: 0.08s; }
.mmenu.is-open .mmenu-links a:nth-child(4) { transition-delay: 0.12s; }
.mmenu.is-open .mmenu-links a:nth-child(5) { transition-delay: 0.16s; }
.mmenu-links a:first-child { border-top: 1px solid var(--ink); }
.mmenu-links .mm-n { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); }
.mmenu-links .mm-cta { color: var(--accent); }
@media (max-width: 860px) {
  .mmenu { display: block; }
  .mmenu.is-open { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .mmenu, .mmenu-links a { transition: none; }
  .mmenu-links a { transform: none; opacity: 1; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--nav-h) + clamp(24px, 5vw, 56px));
  padding-bottom: clamp(28px, 5vw, 56px);
  overflow: hidden;
}
#field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}
/* En mobile el campo de nodos queda detrás de texto+índice apilados en
   una sola columna larga — se atenúa para que no compita con el contenido. */
html.is-mobile #field { opacity: 0.45; }
.hero > .container { position: relative; z-index: 2; }

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  color: var(--ink-2);
  padding-bottom: clamp(20px, 4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.hero-meta .right { text-align: right; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-size: clamp(3.6rem, 17vw, 17rem);
  margin: clamp(28px, 6vw, 72px) 0;
  word-break: keep-all;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; will-change: transform; }
.hero-title .accent { color: var(--accent); }

.hero-foot {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: end;
  padding-top: clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--rule);
}
.hero-lead { max-width: 46ch; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); color: var(--ink); line-height: 1.45; }
.hero-lead strong { font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Índice del hero = acordeón: cada ítem despliega una descripción + CTA */
.hero-index { display: grid; gap: 0; }
.hero-index .ix { border-top: 1px solid var(--rule); }
.hero-index .ix:last-child { border-bottom: 1px solid var(--rule); }
.hero-index .ix-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.hero-index .ix-head .n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 400; }
.hero-index .ix-head:hover { color: var(--accent); padding-left: 8px; }
.hero-index .ix.open .ix-head { color: var(--accent); }

/* Signo +/− dibujado */
.ix-plus { position: relative; width: 17px; height: 17px; flex-shrink: 0; }
.ix-plus::before, .ix-plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.ix-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.ix.open .ix-plus::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* Panel expandible (animación por grid-template-rows 0fr → 1fr) */
.ix-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s var(--ease); }
.ix.open .ix-wrap { grid-template-rows: 1fr; }
.ix-inner { overflow: hidden; min-height: 0; }
.ix-desc {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 42ch;
  padding: 2px 0 14px;
}
.ix-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}
.ix-link .arrow { transition: transform 0.2s var(--ease); }
.ix-link:hover { color: var(--accent); }
.ix-link:hover .arrow { transform: translateX(3px); }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  color: var(--ink-2);
}
.scroll-cue .bar { position: relative; width: 46px; height: 1px; background: var(--rule-strong); overflow: hidden; }
.scroll-cue .bar::after { content:""; position:absolute; inset:0; width:40%; background: var(--accent); animation: cue 2.2s var(--ease-inout) infinite; }
@keyframes cue { 0%{transform:translateX(-110%)} 60%,100%{transform:translateX(260%)} }

/* Botones genéricos */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Mobile: el pie del hero (texto+botones junto al índice numerado) se
   apilaba en 2 columnas angostas — texto partido en muchas líneas cortas,
   botones envueltos a la mitad y el índice 001–005 apretado contra el
   borde. Aquí pasa a 1 columna de ancho completo, cada elemento se
   mantiene, solo deja de competir por espacio horizontal. */
@media (max-width: 760px) {
  .hero-foot { grid-template-columns: 1fr; gap: clamp(36px, 10vw, 56px); }
  .hero-lead { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}

/* ============================================================
   MARQUEE / TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-block: 16px;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 28s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em;
  padding-inline: 28px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
}
.ticker-track .star { color: var(--accent-2); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ============================================================
   SECCIONES — encabezado común
   ============================================================ */
.section { padding-block: var(--section-y); }
/* Entre secciones consecutivas se acumulaban DOS paddings completos
   (~318px de vacío en 1440). El de abajo ya da el respiro: el de arriba
   sobra y solo deja hueco muerto. */
.section + .section { padding-top: 0; }
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 4vw, 48px);
  align-items: end;
  padding-bottom: clamp(28px, 5vw, 56px);
}
.section-head .eyebrow { color: var(--ink-3); padding-top: 8px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-size: clamp(2.2rem, 7vw, 6.2rem);
}
.section-head h2 .accent { color: var(--accent); }

/* ─── Manifiesto ─── */
.manifesto .container { max-width: 1180px; }
.manifesto-text {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: clamp(1.8rem, 5.2vw, 4.4rem);
}
.manifesto-text .dim { color: var(--ink-3); }
.manifesto-text .accent { color: var(--accent); }
.manifesto-sign {
  margin-top: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: center;
  color: var(--ink-2);
}

/* ─── Servicios (index brutalist) ─── */
.svc-list { border-top: 1px solid var(--ink); }
.svc {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  cursor: default;
}
.svc::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: 0; bottom: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-inout);
  z-index: 0;
}
.svc:hover::before { transform: scaleY(1); }
.svc > * { position: relative; z-index: 1; transition: color 0.4s var(--ease); }
.svc:hover, .svc:hover .svc-desc, .svc:hover .svc-n { color: var(--paper); }
.svc:hover .svc-tags span { border-color: color-mix(in srgb, var(--paper) 40%, transparent); color: var(--paper); }
.svc-n { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-3); }
.svc-main { display: grid; gap: 8px; }
.svc-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
}
.svc-desc { color: var(--ink-2); max-width: 60ch; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 320px; }
.svc-tags span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-2);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
@media (max-width: 760px) {
  .svc { grid-template-columns: 1fr; gap: 14px; }
  .svc-tags { justify-content: flex-start; max-width: none; }
}

/* Servicios → Obra: cada fila navega a sus casos reales.
   La fila entera es clickeable (data-cases/data-goto en app.js);
   los chips "En la obra" son anclas directas a cada tarjeta. */
.svc { cursor: pointer; }
.svc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.svc-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.svc-cases-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}
.svc-case {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 4px 9px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.svc-case:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.svc-case.is-mute { pointer-events: none; color: var(--ink-3); border-style: dashed; }
.svc:hover .svc-cases-label { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.svc:hover .svc-case { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.svc:hover .svc-case:hover { background: var(--paper); border-color: var(--paper); color: var(--accent); }

/* Resultado real por disciplina — naranja = resultado/latido (regla de marca).
   Solo cifras ya ancladas en el sitio (stats/ticker/tarjetas): nada inventado. */
.svc-fact {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-top: 2px;
}
.svc:hover .svc-fact { color: var(--paper); }

/* Spotlight: al llegar desde un servicio, sus casos quedan al frente
   y el resto se atenúa (misma estética del hover de la grilla).
   !important porque GSAP deja opacity inline tras el reveal. */
.work-grid.is-spotlight .case:not(.is-spot) { opacity: 0.22 !important; }
.case.is-spot { outline: 2px solid var(--accent); outline-offset: 10px; }
section[id], .case { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ─── Obra / Casos ─── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Aire generoso ENTRE proyectos: el corte entre uno y otro debe leerse
     más fuerte que la separación interna (media ↔ texto) de cada ficha. */
  gap: clamp(30px, 4.5vw, 60px);
}
/* Al hacer hover sobre una tarjeta, las demás se vuelven transparentes.
   !important porque GSAP deja opacity:1 inline tras el reveal y, si no, le gana. */
.work-grid:hover .case:not(:hover) { opacity: 0.32 !important; }

/* Cada proyecto es un CONTENEDOR visible (panel + filete + sombra suave):
   al hacer scroll se ve exactamente dónde empieza y dónde termina, y qué
   imagen va con qué texto. Antes eran bloques sueltos sobre el papel y el
   título quedaba ambiguo entre la imagen de arriba y la de abajo. */
.case {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: clamp(12px, 1.4vw, 18px);
  box-shadow: 0 1px 2px rgba(22, 21, 15, 0.05), 0 10px 26px -14px rgba(22, 21, 15, 0.22);
  transition: opacity 0.45s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.case:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(22, 21, 15, 0.07), 0 22px 46px -18px rgba(22, 21, 15, 0.32);
}
.case.wide { grid-column: span 12; }

/* ── Media: visual generado (SVG) + dossier técnico al hover ── */
.case-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: linear-gradient(135deg, var(--paper-2), color-mix(in srgb, var(--paper) 80%, var(--ink) 5%));
  transition: border-color 0.4s var(--ease);
}
.case.wide .case-media { aspect-ratio: 21 / 9; }
.case:hover .case-media { border-color: var(--accent); }

.viz {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.case:hover .viz { opacity: 0.10; transform: scale(1.06); }
/* Capturas reales: <img class="viz"> llena la media (web/landscape) */
img.viz { object-fit: cover; object-position: top center; background: var(--paper-2); }
/* Captura de app móvil (vertical): se centra como pantalla flotante sobre fondo oscuro */
.case-media.shot-phone { background: linear-gradient(150deg, #1b1b24, var(--ink)); }
.case-media.shot-phone img.viz { object-fit: contain; padding: 16px; object-position: center; }
/* Galería de capturas (tarjeta wide): varias pantallas del producto lado a lado */
.shot-gallery { display: flex; gap: 3px; background: var(--rule-strong); }
.shot-gallery img { flex: 1 1 0; min-width: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; background: var(--paper-2); }
@media (max-width: 560px) { .shot-gallery img:nth-child(3) { display: none; } }
/* Galería en tarjeta de app móvil (Monitas): 2 teléfonos contenidos sobre fondo oscuro */
.shot-phone .shot-gallery { background: transparent; gap: 0; }
.shot-phone .shot-gallery img { object-fit: contain; background: transparent; padding: 12px 4px; }
.viz line, .viz polyline, .viz path, .viz circle, .viz rect, .viz polygon { vector-effect: non-scaling-stroke; }
.viz text { font-family: var(--font-mono); font-size: 11px; }
.viz .s-ink { stroke: var(--ink); fill: none; }
.viz .s-blue { stroke: var(--accent); fill: none; }
.viz .s-org { stroke: var(--accent-2); fill: none; }
.viz .s-rule { stroke: var(--rule-strong); fill: none; }
.viz .f-ink { fill: var(--ink); }
.viz .f-blue { fill: var(--accent); }
.viz .f-org { fill: var(--accent-2); }
.viz .f-paper { fill: var(--paper); }
.viz .f-soft { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.viz .f-soft-o { fill: color-mix(in srgb, var(--accent-2) 18%, transparent); }
.viz .dim { opacity: 0.4; }

/* badge de estado, flotando sobre la media */
.case-status {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.case-status.live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); }

/* Marca del proyecto: etiqueta SIEMPRE visible (sobrevive al hover y al
   dossier) para que no quede duda de qué imagen y qué texto son de qué
   proyecto. Va arriba-izquierda; el estado ocupa la derecha. */
.case-brand {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
}
.case.wide .case-brand { top: clamp(12px, 1.6vw, 20px); left: clamp(12px, 1.6vw, 20px); font-size: 0.64rem; }
@media (max-width: 760px) { .case-brand { font-size: 0.52rem; padding: 4px 8px; letter-spacing: 0.1em; } }

/* ── Titular sobre la imagen (plakat suizo): chip mono + bloques de tinta.
      Da vida a la media sin tocar el dossier: al hover se aparta y el
      dossier técnico aparece como siempre. ── */
.case-cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  max-width: min(82%, 460px);
  display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.case-cap .cap-kicker {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px 4px;
}
.case-cap .cap-line {
  display: inline;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.28;
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  padding: 5px 11px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.case-cap .cap-line .hl { color: var(--accent-2); }
.case.wide .case-cap { left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); max-width: min(70%, 620px); }
.case.wide .case-cap .cap-line { font-size: clamp(1.25rem, 2.4vw, 2.3rem); }
.case:hover .case-cap, .case:focus-within .case-cap { opacity: 0; transform: translateY(10px); }
@media (max-width: 760px) {
  /* Las fotos reales (los "sistemas en producción") son las que generan
     engagement — sin hover en touch, el titular quedaba fijo encima,
     tapando buena parte de la imagen. Se achica y la media wide gana
     alto (mismo ratio que las tarjetas normales) para que la foto
     respire y sea lo que domina la tarjeta, no el texto. */
  .case.wide .case-media { aspect-ratio: 16 / 10; }
  .case-cap,
  .case.wide .case-cap { max-width: 88%; }
  .case-cap .cap-kicker { font-size: 0.5rem; padding: 4px 8px 3px; }
  .case-cap .cap-line,
  .case.wide .case-cap .cap-line { font-size: 0.82rem; line-height: 1.2; padding: 4px 8px 5px; }
}

/* dossier overlay: aparece sobre la media (que se vuelve transparente) */
.case-dossier {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  padding: clamp(16px, 2.2vw, 28px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 12%, transparent), color-mix(in srgb, var(--paper) 95%, transparent) 52%);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.case:hover .case-dossier, .case:focus-within .case-dossier { opacity: 1; transform: none; }

.case-mags { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.mag { display: flex; flex-direction: column; gap: 2px; }
.mag b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--accent-2);
}
.mag span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.case-tech .lbl {
  display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.case-tech p { color: var(--ink); max-width: 62ch; font-size: 0.9rem; line-height: 1.45; }

/* info debajo de la media (siempre visible) */
.case-info { display: flex; flex-direction: column; gap: 9px; }
.case-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.case-kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.case-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.035em; line-height: 0.95;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
}
.case.wide .case-name { font-size: clamp(2rem, 5.5vw, 4.4rem); }
.case-desc { color: var(--ink-2); max-width: 60ch; }

/* Fichas anchas: layout editorial a dos columnas para no desperdiciar el
   blanco de la derecha — titular grande a la izquierda, cuerpo + stack +
   enlace a la derecha. En pantallas angostas vuelve a una sola columna. */
@media (min-width: 861px) {
  .case.wide .case-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(28px, 4vw, 72px);
    row-gap: 12px;
    align-items: start;
  }
  .case.wide .case-top { grid-column: 1 / -1; grid-row: 1; }
  .case.wide .case-name { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .case.wide .case-desc { grid-column: 2; grid-row: 2; max-width: none; }
  .case.wide .case-stack { grid-column: 2; grid-row: 3; margin-top: 0; }
  .case.wide .case-link { grid-column: 2; grid-row: 4; margin-top: 0; }
}
.case-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.case-stack span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2);
}
.case-link {
  align-self: flex-start; margin-top: 8px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.case-link .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.case-link:hover { border-color: var(--accent); }
.case-link:hover .arrow { transform: translate(2px, -2px); }
/* La ficha entera es clickeable cuando tiene enlace (stretched link) */
.case:has(.case-link) { cursor: pointer; }
.case-link::after { content: ""; position: absolute; inset: 0; z-index: 6; }
.case:hover .case-link { border-color: var(--accent); }
.case:hover .case-link .arrow { transform: translate(2px, -2px); }

@media (max-width: 760px) {
  .case { grid-column: span 12 !important; }
  .work-grid:hover .case:not(:hover) { opacity: 1 !important; }
}

/* ============================================================
   MÁS PROYECTOS — carrusel horizontal de secundarios
   ============================================================ */
.secondary-work { padding-top: 0; }
.sh-carousel { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sh-note { color: var(--ink-2); margin-top: 10px; font-size: 0.95rem; }

.carousel-nav { display: flex; gap: 10px; }
.carousel-btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-size: 1.1rem; color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.carousel-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.carousel-btn:disabled { opacity: 0.28; cursor: default; }
.carousel-btn:disabled:hover { background: none; color: var(--ink); border-color: var(--rule-strong); }

/* La pista sangra a todo el ancho; el padding la alinea con el contenedor */
.carousel {
  margin-top: clamp(28px, 4vw, 44px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }  /* WebKit */
/* Con la marquesina activa el snap estorba: frena el giro continuo */
.carousel.is-marquee { scroll-snap-type: none; }
.carousel-track {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  padding-inline: var(--gutter);
  padding-bottom: 8px;
  width: max-content;
}

.carousel-card {
  position: relative;
  flex: 0 0 clamp(280px, 78vw, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-2);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.carousel-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.cc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-2), color-mix(in srgb, var(--paper) 80%, var(--ink) 5%));
  border-bottom: 1px solid var(--rule);
}
.cc-media img, .cc-viz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-media-viz { display: flex; align-items: center; justify-content: center; }
.cc-viz { object-fit: contain; padding: 18px; }
.carousel-card:hover .cc-media img { transform: scale(1.04); transition: transform 0.5s var(--ease); }

.cc-status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--rule); color: var(--ink-2);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cc-status.live { color: var(--accent-2); }

.cc-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.cc-kicker { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.02; letter-spacing: -0.02em; }
.cc-desc { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.cc-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.cc-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-stack span {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-3);
}
.cc-link {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px;
  transition: border-color 0.25s var(--ease);
}
.cc-link .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.carousel-card:hover .cc-link { border-color: var(--accent); }
.carousel-card:hover .cc-link .arrow { transform: translate(2px, -2px); }
.cc-note { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* Toda la ficha clickeable cuando hay destino */
.carousel-card:has(.cc-link) { cursor: pointer; }
.cc-link::after { content: ""; position: absolute; inset: 0; z-index: 4; }

/* Spotlight sobre una ficha del carrusel (llegando desde Servicios) */
.carousel-card.is-spot { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
  .carousel-nav { display: none; }   /* en móvil se desliza con el dedo */
}

/* ─── Academia — banda destacada (única sección azul: máxima atención) ─── */
.academia-feature {
  background: var(--accent);
  color: var(--paper);
  border-block: 1px solid var(--ink);
}
.academia-feature .container { padding-block: clamp(60px, 9vw, 124px); }
.af-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
}
.af-eyebrow { color: color-mix(in srgb, var(--paper) 70%, transparent); display: inline-flex; align-items: center; gap: 12px; }
.af-flag { font-style: normal; color: var(--accent-2); letter-spacing: 0.06em; }
.af-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.035em;
  font-size: clamp(2.1rem, 6.2vw, 5.2rem);
  margin: 18px 0 0;
}
.af-title .af-em { color: var(--ink); }
.af-lead {
  margin-top: clamp(18px, 3vw, 30px);
  max-width: 48ch;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem);
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  line-height: 1.5;
}
.af-lead strong { color: var(--paper); font-weight: 700; }
.af-actions { margin-top: clamp(26px, 4vw, 38px); }
.af-btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.af-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.af-side { display: grid; gap: clamp(18px, 2.5vw, 26px); }
.af-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--paper) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
}
.af-stat { background: var(--accent); padding: 16px 18px; }
.af-stat b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -0.04em; line-height: 1; color: var(--paper);
}
.af-stat span {
  display: block; margin-top: 7px; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}
.af-track { list-style: none; display: grid; }
.af-track li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.95rem, 0.9rem + 0.45vw, 1.3rem); letter-spacing: -0.02em;
}
.af-track li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.af-track .n { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.08em; color: color-mix(in srgb, var(--paper) 58%, transparent); }
@media (max-width: 860px) { .af-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ─── Números (bloque invertido) ─── */
.stats {
  background: var(--ink);
  color: var(--paper);
}
.stats .container { padding-block: clamp(64px, 9vw, 130px); }
.stats-head { color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: clamp(40px, 6vw, 72px); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.stat { border-top: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); padding-top: 18px; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(3.4rem, 9vw, 8rem);
}
.stat .num .suffix { color: var(--accent-2); }
.stat .label { margin-top: 10px; color: color-mix(in srgb, var(--paper) 62%, transparent); max-width: 22ch; }

/* ─── Proceso ─── */
.steps { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(20px, 5vw, 64px);
  padding: clamp(28px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.step .step-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  margin-bottom: 12px;
}
.step p { color: var(--ink-2); max-width: 60ch; }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 12px; } }

/* ─── CTA final ─── */
.cta {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.cta .container { padding-block: clamp(80px, 14vw, 200px); }
.cta .pre { color: color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom: 28px; }
.cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 11vw, 10rem);
  margin-inline: auto;
}
.cta h2 .accent { color: var(--accent); }
.cta-mail {
  display: inline-block;
  margin-top: clamp(32px, 5vw, 56px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  border-bottom: 2px solid color-mix(in srgb, var(--paper) 40%, transparent);
  padding-bottom: 6px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cta-mail:hover { color: var(--accent); border-color: var(--accent); }
.cta-sub { margin-top: 28px; color: color-mix(in srgb, var(--paper) 55%, transparent); }

/* ─── Footer ─── */
.foot { background: var(--ink); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.foot .container { padding-block: clamp(40px, 6vw, 72px); }
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
}
.foot h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--paper); font-size: 1.1rem; margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a:hover { color: var(--accent); }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr; } }

/* ============================================================
   Cursor personalizado + utilidades de movimiento
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
  opacity: 0;
}
.cursor.is-hover { width: 64px; height: 64px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Reveal: estado inicial SOLO cuando GSAP realmente cargó y va a animar.
   Antes colgaba de `.js`, que se pone siempre: si el CDN de GSAP fallaba,
   initMotion() hacía `return` sin animar nada y la página entera quedaba
   invisible (incluido el H1, atrapado en translateY(110%) dentro de un
   .line con overflow:hidden). Ahora la clase la pone quien sí va a animar. */
.gsap-ready [data-reveal] { opacity: 0; transform: translateY(28px); }
.gsap-ready .hero-title .line > span { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .gsap-ready [data-reveal] { opacity: 1; transform: none; }
  .gsap-ready .hero-title .line > span { transform: none; }
  .scroll-cue .bar::after { animation: none; }
}

/* ─── Botón flotante de WhatsApp (agente "Timbre") ───
   Brutalista: tile de tinta, glifo verde reconocible, punto naranja "en línea".
   En desktop, al pasar el cursor se despliega la etiqueta en mono. */
.wa-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 9970;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(22, 21, 15, 0.22);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22, 21, 15, 0.28); }
.wa-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wa-fab-label {
  max-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  color: var(--paper);
  font-size: 0.68rem;
  transition: max-width 0.4s var(--ease), padding 0.4s var(--ease), opacity 0.3s var(--ease);
}
.wa-fab:hover .wa-fab-label,
.wa-fab:focus-visible .wa-fab-label { max-width: 160px; opacity: 1; padding: 0 2px 0 16px; }
.wa-fab-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  color: #25D366; /* verde WhatsApp — recordable, enmarcado en la tinta de la marca */
}
.wa-fab-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent-2); /* naranja = "en línea / responde" */
}
@media (prefers-reduced-motion: no-preference) {
  .wa-fab-dot { animation: waPulse 2.4s var(--ease) infinite; }
  @keyframes waPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 90, 31, 0); }
  }
}
@media (hover: none), (pointer: coarse) {
  .wa-fab-label { display: none; }
}
/* Mobile: tile más chico y con esquinas más suaves — el cuadrado grande
   y recto tapaba el texto de debajo de forma brusca. */
@media (max-width: 560px) {
  .wa-fab {
    right: 14px;
    bottom: 14px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(22, 21, 15, 0.2);
  }
  .wa-fab-icon { width: 48px; height: 48px; }
  .wa-fab-icon svg { width: 22px; height: 22px; }
  .wa-fab-dot { top: 9px; right: 9px; width: 8px; height: 8px; }
}

/* nota de acceso privado en la ficha de obra (onsen) */
.case-note{margin-top:8px;font-size:.82rem;line-height:1.45;opacity:.6}

/* Piezas que SOLO existen en móvil: por defecto no se muestran.
   (El bloque móvil de abajo las enciende.) */
.tk-num { display: none; }   /* variante del ticker con cifras */
.af-toggle { display: none; }  /* botón que pliega el temario de la Academia */

/* ============================================================================
   ══ MÓVIL (≤760px) ══
   Bloque ÚNICO y AL FINAL a propósito: sobrescribe por orden de cascada, sin
   subir especificidad ni usar !important.

   Diagnóstico medido (390×844): la página eran 17,2 pantallas. Nadie diseñó
   una escala para el celular — los clamp() traen el MÍNIMO calibrado para que
   el escritorio no colapsara, y en 390px gana ese mínimo: el título de
   servicio solo se achica 2,1× y el de sección 2,8×, cuando la pantalla se
   achica 3,7×. Por eso "lo que se ve pequeño en escritorio, en móvil se ve
   muy grande". Además había siete niveles entre 22 y 38px (saltos del 4-12%),
   que el ojo lee como UN solo tamaño: sin jerarquía, todo suena al mismo
   volumen y todo parece repetido.

   El titular del hero y el de contacto ya escalan por vw (ratio 3,69 = el del
   viewport): esos NO se tocan, son el momento de marca.
   ============================================================================ */
@media (max-width: 760px) {
  :root {
    --section-y: 56px;
    /* AA: el gris de etiquetas daba 2,94:1 sobre papel — por debajo del mínimo.
       Mismo tono cálido, ahora 4,56:1. Toda la capa mono cuelga de este token. */
    --ink-3: #6E6754;
    --t-h2: 2rem;          /* 32px — abridor de capítulo */
    --t-d2: 1.6rem;        /* 25.6px — manifiesto, academia, proyecto ancho */
    --t-d3: 1.2rem;        /* 19.2px — servicio, proyecto, paso, ficha carrusel */
    --t-lead: 1.1rem;      /* 17.6px */
    --t-small: 0.9375rem;  /* 15px — cuerpo */
    --t-label: 0.6875rem;  /* 11px — piso duro de la capa mono */
  }

  /* ── Encabezado de sección: una columna ──
     Seguía en 2 columnas sin override móvil: el eyebrow se llevaba ~130px de
     los 350 útiles y al titular le quedaban ~200 → "SISTEMAS / REALES, / EN /
     PRODUCCIÓN", cuatro líneas para cuatro palabras contra el borde derecho.
     Esto es "el qué hacemos se roba el espacio de la pantalla". */
  .section-head, .sh-carousel { display: block; padding-bottom: 24px; }
  .section-head .eyebrow { display: block; padding-top: 0; margin-bottom: 10px; }
  .section-head h2 {
    font-size: var(--t-h2); line-height: 0.95;
    letter-spacing: -0.035em; text-wrap: balance;
  }
  /* OJO: NO ocultar los <br> del titular. El markup es "reales,<br>en" sin
     espacio alrededor, así que quitarlos pega las palabras ("REALES,EN").
     Además el salto que traen funciona igual de bien en dos líneas. */
  .sh-note { margin-top: 8px; font-size: var(--t-small); }

  /* ── Escala cableada (nada queda a merced del clamp de escritorio) ── */
  .manifesto-text, .af-title { font-size: var(--t-d2); line-height: 1.14; }
  .case.wide .case-name, .case-name { font-size: var(--t-d3); line-height: 1.06; }
  .svc-title, .step h3, .cc-name { font-size: var(--t-d3); line-height: 1.06; }
  .hero-lead { font-size: var(--t-lead); line-height: 1.45; }
  .svc-desc, .case-desc, .case-tech p, .step p, .cc-desc {
    font-size: var(--t-small); line-height: 1.55;
  }
  p { text-wrap: pretty; }

  /* ── Piso de 11px en la capa mono (había declaraciones de 8-9px) ── */
  .mono, .ix-link, .svc-n, .svc-cases-label, .svc-case, .svc-tags span,
  .case-kicker, .case-brand, .case-status, .cap-kicker, .case-stack span,
  .mag span, .cc-kicker, .cc-stack span, .cc-status, .cc-link, .cc-note {
    font-size: var(--t-label);
  }
  .case-brand, .cap-kicker { padding: 3px 7px; letter-spacing: 0.08em; }
  .svc-fact { font-size: 0.72rem; }  /* el dato que vende deja de ser el más chico */
  body::after { opacity: 0.34; }     /* el grano sigue en multiply: es tinta, no velo */

  /* ── Índice del hero: tabla de contenidos, no fichas ──
     Las fichas volteables gastaban 566px (44% del hero) para mostrar 16
     palabras, y su cara trasera repetía VERBATIM lo que dice Servicios (la
     005 es idéntica carácter por carácter a su svc-desc). Además usaban la
     misma familia display que los títulos de servicio, con 10px de
     diferencia: por eso se sentía "ya leí esto".
     Ahora son 5 filas mono de 48px — otro registro tipográfico, se lee como
     índice y deja de competir. La descripción sigue ahí, a un toque. */
  .hero-index { display: block; perspective: none; }
  .hero-index .ix {
    position: static; height: auto;
    border: 0; border-top: 1px solid var(--rule);
    transform: none;
  }
  .hero-index .ix:last-child { border-bottom: 1px solid var(--rule); }
  .hero-index .ix-head {
    position: static;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 12px; align-items: center;
    min-height: 48px; padding: 12px 0;
    border: 0; border-radius: 0; background: none;
    font-family: var(--font-mono); font-weight: 400;
    font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-2); line-height: 1.2;
  }
  .hero-index .ix.open .ix-head { color: var(--accent); }
  .hero-index .ix-head:hover { padding-left: 0; color: var(--ink-2); }
  .hero-index .ix-head .n { font-size: var(--t-label); }
  .ix-plus { align-self: center; width: 13px; height: 13px; }
  .hero-index .ix-wrap {
    position: static; display: grid; grid-template-rows: 0fr;
    transform: none; border: 0; background: none; padding: 0; overflow: visible;
  }
  .hero-index .ix.open .ix-wrap { grid-template-rows: 1fr; }
  .hero-index .ix-inner { overflow: hidden; min-height: 0; }
  .hero-index .ix-desc { font-size: var(--t-small); padding: 0 0 10px; max-width: none; }
  .hero-index .ix-link { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 8px; }

  /* ── Servicios: acordeón con la línea de resultado siempre visible ──
     Eran 2.220px (2,6 pantallas) con las 6 filas desplegadas a la vez, y con
     una trampa: tocar CUALQUIER punto de una fila disparaba un salto de
     ~8.000px hasta la Obra, sin aviso (el `cursor:pointer` y el `:hover` que
     lo anunciaban no existen en táctil) y sin regreso. Eso es "lleva a una
     sección de más texto que agota, impacienta e irrita".
     Cerrada, cada fila deja ver número + título + la línea naranja de
     resultado: las 6 disciplinas CON su cifra caben en una pantalla. */
  .svc { display: block; padding: 18px 0; min-height: 92px; position: relative; cursor: default; }
  .svc-main { display: block; }
  .svc-n { display: inline; margin-right: 10px; vertical-align: 0.28em; }
  .svc-title { display: inline; }
  .svc-fact { display: block; margin-top: 10px; }
  .svc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
  .svc.is-open .svc-fold { grid-template-rows: 1fr; }
  .svc-fold > * { overflow: hidden; min-height: 0; }
  .svc.is-open .svc-fold:first-of-type > * { padding-top: 10px; }
  .svc-desc { max-width: none; }
  /* El stack deja de parecer botón: es una lista, no controles */
  .svc-tags { display: none; font-family: var(--font-mono); color: var(--ink-2); max-width: none; margin-top: 10px; }
  .svc.is-open .svc-tags { display: block; }
  .svc-tags span { border: 0; padding: 0; }
  .svc-tags span + span::before { content: " · "; }
  /* Los chips SÍ navegan: 44px y borde azul para que se lea distinto */
  .svc-cases { gap: 10px; }
  .svc-case { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px;
    border: 1px solid var(--accent); color: var(--accent); }
  .svc-case.is-mute { border: 1px dashed var(--rule-strong); color: var(--ink-3); }
  /* Indicador +/− dibujado, sin markup nuevo */
  .svc::after {
    content: ""; position: absolute; right: 0; top: 24px; width: 13px; height: 13px;
    background:
      linear-gradient(var(--ink), var(--ink)) center / 13px 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) center / 2px 13px no-repeat;
  }
  .svc.is-open::after { background: linear-gradient(var(--ink), var(--ink)) center / 13px 2px no-repeat; }
  /* ── El hover NO existe en táctil: al tocar se queda PEGADO ──
     El diseño de escritorio barre la fila con tinta oscura y vuelve el texto
     color papel. En un teléfono el barrido se quedaba encendido y, como aquí
     se anulaba solo el barrido, quedaba texto PAPEL sobre fondo PAPEL: la
     fila abierta se veía en blanco, y al tocar otra "reaparecía" la anterior
     (el hover se iba de ella). Se anula el tratamiento COMPLETO, no solo el
     barrido. */
  .svc:hover::before { transform: scaleY(0); }
  .svc:hover, .svc:hover .svc-n { color: var(--ink); }
  .svc:hover .svc-n { color: var(--ink-3); }
  .svc:hover .svc-desc { color: var(--ink-2); }
  .svc:hover .svc-fact { color: var(--accent-2); }
  .svc:hover .svc-cases-label { color: var(--ink-3); }
  .svc:hover .svc-case,
  .svc:hover .svc-case:hover { color: var(--accent); border-color: var(--accent); background: none; }
  .svc:hover .svc-case.is-mute { color: var(--ink-3); border-color: var(--rule-strong); }
  .svc:hover .svc-tags span { color: var(--ink-2); border-color: transparent; }

  /* ── Obra: cifras arriba, prosa plegada ──
     Era el 42% de la página. Las magnitudes salen del dossier (que en táctil
     nunca se abría) al flujo visible, y la prosa técnica + el stack se
     pliegan. En móvil la sección GANA contenido y pierde altura. */
  .case { padding: 10px; gap: 12px; }
  .work-grid { gap: 20px; }
  .case-info { gap: 8px; }
  .case-top { justify-content: space-between; }
  .case-idx { color: var(--ink-3); letter-spacing: 0.1em; }
  .case-info .case-mags {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
    margin: 4px 0 2px; padding-top: 12px; border-top: 1px solid var(--rule);
  }
  .case-info .mag b { font-size: 1.35rem; color: var(--ink); line-height: 1; }
  .case-info .mag:first-child b { color: var(--accent-2); }  /* una sola cifra naranja por ficha */
  .case-info .mag span { color: var(--ink-2); }
  /* Solo las DOS primeras cifras: son el gancho. El resto sigue en la ficha
     técnica, a un toque — mostrar cuatro costaba el doble de alto. */
  .case-info .mag:nth-child(n + 3) { display: none; }
  .case-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
  .case.is-open .case-fold { grid-template-rows: 1fr; }
  .case-fold > .case-fold-inner { overflow: hidden; min-height: 0; }
  .case-fold .case-tech { margin-bottom: 10px; }
  .case-more {
    min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start; font-size: var(--t-label); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink);
    border-bottom: 1px solid var(--rule-strong); background: none; cursor: pointer;
  }
  /* El dossier queda vacío: su degradado taparía la foto */
  .case-dossier { display: none; }
  /* La ficha entera dejaba de ser una superficie de lectura para volverse un
     enlace invisible a otra pestaña. El enlace vuelve a ser el enlace. */
  .case-link::after { display: none; }
  .case-link { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px;
    border: 1px solid var(--accent); border-radius: 2px; }

  /* Métrica del hero: que la primera pantalla sea una primera pantalla */
  .hero { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 24px; }
  .hero-title { margin: 20px 0; }
  .hero-foot { gap: 26px; padding-top: 16px; }
  .hero-actions { margin-top: 20px; gap: 10px; }
  .scroll-cue { margin-top: 20px; }

  /* ── Ticker: en móvil deja de repetir la taxonomía por TERCERA vez
     (índice del hero → ticker → Servicios) y pasa a dar cifras. ── */
  .tk-d { display: none; }
  .tk-num { display: inline; }

  /* ── Números: 2×2 compacto (era 784px para 33 palabras) ── */
  .stats .container { padding-block: 44px; }
  .stats-head { margin-bottom: 22px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .stat { padding-top: 12px; }
  .stat .num { font-size: 3rem; line-height: 0.9; }
  .stat .label { font-size: var(--t-small); margin-top: 8px; max-width: none; }

  /* ── Proceso: el ordinal vuelve a la línea del título ──
     Un @media de 640px mandaba el '01' a una fila propia: 1.040px para
     90 palabras. No se pliega: es de los pocos bloques que ya se leen bien. */
  .step { display: block; padding: 16px 0; }
  .step .step-n { display: inline-block; font-size: 1.5rem; line-height: 1; margin-right: 12px; vertical-align: -2px; }
  .step h3 { display: inline; margin-bottom: 0; }
  .step > div { display: inline; }   /* el <div> que envuelve h3+p no debe cortar la línea */
  .step p { display: block; margin-top: 8px; max-width: none; }

  /* ── Academia: se pliega el temario, quedan las 4 cifras (el argumento) ── */
  .academia-feature .container { padding-block: 48px; }
  .af-lead { font-size: var(--t-small); }
  .af-toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    min-height: 44px; margin-top: 14px;
    font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--paper); background: none; cursor: pointer;
    border: 0; border-block: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  }
  .af-toggle::after { content: "+"; font-size: 1rem; }
  .af-toggle[aria-expanded="true"]::after { content: "−"; }
  .af-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
  .af-fold > * { overflow: hidden; min-height: 0; }
  .af-fold.is-open { grid-template-rows: 1fr; }

  /* ── Pie: dos columnas (era 743px para 55 palabras) ── */
  .cta .container { padding-block: 56px; }
  .foot .container { padding-block: 32px 84px; }  /* el 84 deja aire para el FAB */
  .foot-top { grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 22px; }
  .foot-top > div:first-child { grid-column: 1 / -1; }
  .foot h4 { font-size: var(--t-small); margin-bottom: 10px; }
  .foot ul { gap: 0; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal { padding-top: 16px; gap: 6px; }

  /* ── Ergonomía táctil ── */
  .nav-toggle { min-height: 44px; min-width: 44px; padding: 12px 10px; margin-right: -10px; display: inline-flex; align-items: center; }
  .ix-link, .cc-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cc-link::after { display: none; }   /* la ficha en movimiento deja de ser un enlace-trampa */

  /* Filete de progreso: el único indicador de "dónde voy" en 10 pantallas */
  .nav::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--accent); transform: scaleX(var(--prog, 0)); transform-origin: left;
  }

  /* Corte de capítulo: una regla a sangre pesa más que vacío y cuesta 1px */
  .section + .section { position: relative; }
  .section + .section::before {
    content: ""; position: absolute; top: 0;
    left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
    border-top: 1px solid var(--rule);
  }
}

/* ── Botón de WhatsApp: dejaba de ser un atajo y era un estorbo ──
   Medido: tapaba contenido 37 veces a lo largo del recorrido móvil, se
   paraba encima de fichas y flotaba SOBRE el overlay del menú. Ahora se
   aparta en el hero (donde ya hay dos botones), respeta la zona segura del
   teléfono y desaparece con el menú abierto. */
@media (max-width: 760px) {
  .wa-fab {
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 98;                      /* por debajo del overlay del menú */
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .wa-fab.is-out { opacity: 0; pointer-events: none; transform: translateY(10px); }
  html.menu-open .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }

  /* Pie del carril: cuántas fichas hay y por cuál va */
  .rail-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-inline: var(--gutter); }
  .rail-count { color: var(--ink-3); flex: none; font-size: var(--t-label); }
  .rail-prog { display: block; flex: 1; height: 2px; background: var(--rule); position: relative; }
  .rail-prog::after {
    content: ""; position: absolute; inset: 0; background: var(--accent);
    transform: scaleX(var(--p, 0)); transform-origin: left;
  }
}

/* Respaldo para el navegador donde el acordeón te salía siempre abierto:
   si no soporta `grid-template-rows: 0fr`, se pliega con display.
   (El contenido sigue en el DOM; solo se oculta cuando está cerrado.) */
@supports not (grid-template-rows: 0fr) {
  @media (max-width: 760px) {
    .hero-index .ix-wrap { display: none; }
    .hero-index .ix.open .ix-wrap { display: block; }
  }
}

/* ─── Publicaciones ─── */
.pubs { border-top: 1px solid var(--rule-strong); }
.pub {
  display: grid;
  grid-template-columns: clamp(40px, 6vw, 84px) 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.pub-n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.08em; }
.pub-kicker {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px;
}
.pub-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  transition: color 0.25s var(--ease);
}
.pub-desc { max-width: 62ch; color: var(--ink-2); margin-top: 12px; font-size: 0.95rem; line-height: 1.55; }
.pub-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pub-meta { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pub-cta {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
a.pub:hover .pub-name, a.pub:focus-visible .pub-name { color: var(--accent); }
a.pub:hover .pub-cta, a.pub:focus-visible .pub-cta { color: var(--accent); border-color: var(--accent); }
.pub-soon .pub-name { color: var(--ink-3); }
.pub-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent);
  border-radius: 2px; padding: 4px 9px;
}
@media (max-width: 860px) {
  .pub { grid-template-columns: 1fr; gap: 10px; }
  .pub-n { display: none; }
  .pub-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
}

/* ══════════════ FAQ (Preguntas frecuentes) ══════════════ */
.faq-list { max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--accent);
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-item p {
  padding: 0 0 22px;
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 0.95rem;
}
.faq-item p a { color: var(--accent); text-underline-offset: 3px; }
.faq-item p em { font-style: normal; font-weight: 600; }