/* ============================================================
   Pablo Meyer — sistema base
   Tokens, tipografía, nav, botones y utilidades compartidas
   por la home, las páginas de caso y la 404.
   No añadir aquí nada específico de una sola página.
   ============================================================ */

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

:root {
  /* Blanco, negro y amarillo.
     REGLA DE USO: el amarillo sobre blanco da 1.51:1 — no vale como
     texto ni como marca fina. Solo como relleno con texto negro
     encima (13.11:1). Sobre negro sí funciona como texto (13.11:1).
     Para texto o iconos amarillos sobre blanco, usar --accent-ink. */
  --accent: #F5D000;
  --accent-deep: #C9A900;   /* hover de rellenos amarillos */
  --accent-ink: #8F7600;    /* amarillo legible sobre blanco: 4.41:1 */
  --accent-soft: #F5D000;   /* sobre negro el amarillo base ya es legible */
  --black: #0A0A0A;
  --gray: #6E6E73;
  --gray-light: #F4F4F6;
  --bg: #FFFFFF;
  --white: #FFFFFF;
  --ink-soft: #45454A;

  /* Filete fino, no línea gruesa: es lo que da el aire de producto */
  --rule: rgba(0, 0, 0, 0.09);
  --rule-strong: rgba(0, 0, 0, 0.16);
  --rule-dark: rgba(255, 255, 255, 0.13);

  /* Escala tipográfica */
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Courier New', ui-monospace, monospace;
  --t-display: clamp(56px, 11.6vw, 168px);
  --t-h1:      clamp(44px, 6.4vw, 96px);
  --t-h2:      clamp(26px, 3.4vw, 46px);
  --t-h3:      clamp(19px, 1.7vw, 24px);
  --t-num:     clamp(58px, 6.4vw, 108px);
  --t-lead:    clamp(21px, 2.1vw, 28px);
  --t-body:    16px;
  --t-small:   13px;
  --t-label:   11px;   /* 10 se quedaba en microtexto en rotulos y chips */

  /* Espaciado */
  --s-section: clamp(72px, 9vw, 112px);
  --s-block:   clamp(40px, 5vw, 68px);
  --s-el:      24px;
  /* El contenido ya no va a 1180: el frame v2 lo lleva a los bordes.
     1328 es exactamente lo que queda a 1440 restando los 24 de la
     seccion y los 32 del contenedor, y ademas pone un techo para que en
     una pantalla de 27" las lineas no se hagan ilegibles. */
  --container: 1328px;

  /* Movimiento — una sola curva en todo el sitio */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur:      0.5s;
  --dur-slow: 0.8s;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

img { max-width: 100%; display: block; }

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

/* Anillo negro sobre claro (el amarillo oscuro daba menos de 3:1 contra
   blanco) y amarillo sobre las zonas oscuras. */
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; border-radius: 2px; }
#contact :focus-visible, footer :focus-visible, .case-hero :focus-visible,
.next-project-block :focus-visible, .pm-lb :focus-visible { outline-color: var(--accent); }

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 300;
  background: var(--black); color: var(--white);
  font-size: var(--t-small); font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 12px 12px; text-decoration: none;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
section { display: block; padding: var(--s-section) 24px; }

/* ---------- Tipografía ---------- */
.display {
  font-size: var(--t-display); font-weight: 900;
  line-height: 0.8; letter-spacing: -0.052em;
}

/* Contorno: acento gráfico que no gasta color */
.outline { color: #B0AEAA; }
@supports (-webkit-text-stroke: 1px #000) {
  .outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1.5px, 0.22vw, 3.2px) var(--black);
  }
  .on-dark .outline, .outline.on-dark {
    -webkit-text-stroke-color: var(--white);
  }
}

.section-title { font-size: var(--t-h1); font-weight: 900; line-height: 0.94; letter-spacing: -0.038em; }
.section-label, .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gray);
}
.lead { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -0.015em; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--gray); }

/* Todas las secciones abren igual: título grande a la izquierda,
   dato corto a la derecha y un filete debajo. Sin rótulos numerados. */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(36px, 4vw, 56px);
  padding-bottom: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--rule);
}
.section-head .section-title { flex: 1; min-width: 0; }
.section-meta {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--gray); text-align: right; flex-shrink: 0; padding-bottom: 4px;
}
.section-header { margin-bottom: var(--s-block); }
.section-header .section-label { display: block; margin-bottom: 16px; }

/* Resalte amarillo — reservado para la llamada a la acción */
.hl { background: var(--accent); color: var(--black); padding: 0.02em 0.1em; }

/* ---------- Botones ---------- */
.btn-primary, .btn-secondary {
  font-size: 15px; font-weight: 700; padding: 12px 24px; border-radius: 50px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-family: var(--font); border: none;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--black); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--black); font-weight: 600; border: 2px solid var(--black); }
.btn-secondary:hover { background: var(--black); color: var(--white); transform: translateY(-2px); }

/* ---------- Nav ---------- */
/* Piezas comunes. La cabecera en si es .nav-hero (mas abajo), la misma
   en la home y en las paginas de caso. */
.nav-logo { text-decoration: none; display: flex; align-items: center; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--black); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; opacity: 1; transition: opacity var(--dur-fast); }
/* Texto pequeno, zona de toque grande: 40px de alto sin mover el dibujo */
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.nav-links a:hover { opacity: 0.55; }
.nav-links a.active { opacity: 1; }
.nav-cta {
  background: var(--black); color: var(--white); font-size: 13px; font-weight: 700;
  line-height: 1.4; padding: 8px 18px; border-radius: 50px; text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.nav-cta:hover { background: #242422; transform: scale(1.03); }

.nav-burger {
  display: none; background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--black); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast); }

.mobile-menu a {
  display: block; text-decoration: none; color: var(--black);
  font-size: 17px; font-weight: 700; padding: 14px 16px; border-radius: 14px;
  transition: background var(--dur-fast);
}
.mobile-menu a:hover, .mobile-menu a:active { background: rgba(0,0,0,0.05); }

/* ---------- Cabecera (.nav-hero) ----------
   .nav-hero es el carril: sticky, ancho y posicion. .nav-bar es la fila.
   En escritorio la fila reparte tres piezas con una rejilla 1fr - auto - 1fr,
   que mantiene la placa PM en el centro optico aunque los lados midan
   distinto; al bajar se agrupan en una capsula flotante y la capsula
   interior de los enlaces se disuelve, asi que nunca hay dos pildoras
   anidadas. En la home es sticky, no fixed: no hay salto de layout. En
   los casos flota encima del hero (.nav-case, mas abajo). */
.nav-hero {
  position: sticky; top: 16px; left: auto; transform: none; z-index: 100;
  display: block; height: auto; padding: 0;
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  width: min(1344px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
  max-width: none;
  margin: 16px auto 0;
  border-radius: 50px;
  transition: width 0.55s var(--ease), top var(--dur) var(--ease),
              border-radius var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav-hero.stuck {
  top: 12px;
  width: min(520px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
}
/* En castellano los enlaces miden mas (Proyectos · Sobre mi ·
   Experiencia): la capsula recogida se abre un poco para que no se
   partan ni se peguen al sello. Solo ES; la inglesa no cambia. */
:lang(es) .nav-hero.stuck { width: min(600px, calc(100% - 2 * clamp(20px, 4vw, 48px))); }

/* Paginas de caso: el hero arranca en el borde superior, asi que la
   cabecera flota encima (fixed) en vez de ir en el flujo. */
.nav-hero.nav-case { position: fixed; left: 0; right: 0; margin: 0 auto; }

/* En los casos, a la izquierda va «Back» en vez de los enlaces de
   seccion: dentro de un proyecto la pregunta es como volver, no a que
   seccion ir. Mismo cuerpo que los enlaces y pildora gris al pasar. */
.nav-back {
  grid-area: 1 / 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 16px; border-radius: 50px;
  color: var(--black); text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  transition: background var(--dur-fast), height 0.55s var(--ease), padding 0.55s var(--ease);
}
.nav-back:hover { background: rgba(10, 10, 10, 0.07); }
@media (min-width: 901px) {
  /* Arriba, las tres piezas van sueltas como en la home: «Back» en su
     propia pildora blanca (asi se lee sobre los heros negros), el sello
     en el centro y la llamada negra a la derecha. Al recogerse, la
     capsula de .stuck las agrupa y «Back» vuelve a ser solo texto. */
  .nav-case .nav-back { height: 58px; padding: 0 28px; background: var(--white); }
  .nav-case .nav-back:hover { background: var(--gray-light); }
  .nav-case.stuck .nav-back { height: 40px; padding: 0 16px; background: none; }
  .nav-case.stuck .nav-back:hover { background: rgba(10, 10, 10, 0.07); }
}
/* La llamada negra, suelta sobre un hero negro, se quedaba sin borde:
   filete blanco al 40% (3:1 contra el negro, como .social-btn). Sobre
   blanco no se ve, y en la capsula recogida sobra. */
.nav-case:not(.stuck) .nav-cta { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.nav-back-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.nav-back:hover .nav-back-arrow { transform: translateX(-3px); }

.nav-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 58px;
  padding: 0 6px 0 0;
  gap: 24px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid transparent;
  border-radius: 50px;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: height 0.55s var(--ease), gap 0.55s var(--ease), padding 0.55s var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav-hero.stuck .nav-bar {
  height: 50px;
  gap: 12px;
  padding: 0 6px 0 8px;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* Colocacion explicita en la rejilla: asi el movil reordena las piezas
   sin tocar el HTML — la llamada se va a la primera columna. */
.nav-hero .nav-links  { grid-area: 1 / 1; justify-self: start; }
.nav-hero .nav-logo   { grid-area: 1 / 2; justify-self: center; }
.nav-hero .nav-end    { grid-area: 1 / 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-hero .nav-start  { grid-area: 1 / 1; justify-self: start; display: flex; align-items: center; gap: 4px; }
.nav-hero .nav-burger { grid-area: 1 / 3; justify-self: end; display: none; }

/* ---------- Marca ----------
   Solo el sello PM. Suelto mide lo mismo de alto que la placa de antes
   (58px) y al recogerse la cabecera baja a 36: una sola pieza que cambia
   de tamano, sin relevos ni fundidos. */
.nav-hero .nav-logo-mark {
  display: block; flex-shrink: 0; width: 58px; height: 58px;
  transition: width 0.55s var(--ease), height 0.55s var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-hero.stuck .nav-logo-mark { width: 36px; height: 36px; }
.nav-hero .nav-logo:hover .nav-logo-mark { transform: scale(1.04); }

/* La capsula de los enlaces solo existe mientras el nav esta suelto.
   Es blanca sobre blanco a proposito: al principio solo se leen las
   palabras y la capsula no aparece hasta que hay algo detras. */
.nav-hero .nav-links {
  position: relative;
  align-items: center; gap: 28px;
  height: 58px; padding: 0 28px;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: 50px;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              height 0.55s var(--ease), padding 0.55s var(--ease), gap 0.55s var(--ease);
}
.nav-hero.stuck .nav-links {
  background: none; border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  height: 34px; padding: 0 4px; gap: 20px;
}
.nav-hero .nav-links li { position: relative; z-index: 1; }

/* Pildora que viaja a la seccion activa.
   Gris y no amarilla a proposito: el amarillo ya lo gasta la placa PM. */
.nav-hero .nav-links li.nav-indicator {
  position: absolute; left: 0; top: 50%;
  width: 0; height: 30px; margin-top: -15px;
  border-radius: 50px;
  background: rgba(10, 10, 10, 0.07);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity var(--dur-fast);
}
.nav-hero .nav-links li.nav-indicator.on { opacity: 1; }

.nav-hero .nav-cta { padding: 14px 24px; transition: padding 0.55s var(--ease), background var(--dur-fast), transform var(--dur-fast) var(--ease); }
.nav-hero.stuck .nav-cta { padding: 10px 18px; }

/* ---------- Selector de idioma ----------
   EN / ES junto a la llamada. Cada enlace lleva a la misma pagina en el
   otro idioma. El activo va en negro, negrita y subrayado (no solo
   color); el otro, en gris. Nada de banderas ni desplegables. */
.nav-lang { display: flex; align-items: center; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
.nav-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 40px; padding: 0 4px;
  color: var(--gray); text-decoration: none; transition: color var(--dur-fast);
}
.nav-lang a:hover { color: var(--black); }
.nav-lang a[aria-current] {
  color: var(--black); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.nav-lang-sep { color: var(--rule-strong); }
/* Version corta (solo el otro idioma) para la cabecera movil de los casos */
.nav-lang--mini { display: none; }
.nav-lang--mini a { color: var(--ink-soft); } /* gris base sobre la capsula movil no llega a 4.5:1 */
@media (min-width: 901px) {
  /* En los casos, suelto sobre heros negros: pildora blanca como «Back» */
  .nav-case .nav-end .nav-lang { height: 46px; padding: 0 10px; border-radius: 50px; background: var(--white); transition: background var(--dur) var(--ease); }
  .nav-case.stuck .nav-end .nav-lang { height: auto; padding: 0; background: none; }
}

.nav-hero .mobile-menu { display: none; }

/* ---------- Capsula movil ----------
   Del componente «Nav - mobile capsule»: la llamada a la izquierda, la
   marca PM en el centro y el menu a la derecha. Al abrir no sale un panel
   aparte: la tarjeta blanca crece por detras de la fila y las esquinas
   pasan de 50 a 30, asi que se lee como una sola pieza que se despliega.
   Va en absoluto para que abrir el menu no empuje el hero hacia abajo. */
@media (max-width: 900px) {
  .nav-hero {
    width: calc(100% - 24px); margin-top: 10px; top: 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  }
  .nav-hero.stuck { width: calc(100% - 24px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
  .nav-hero.menu-open { border-radius: 30px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); }

  .nav-bar, .nav-hero.stuck .nav-bar {
    height: 56px; gap: 12px; padding: 0 20px 0 14px;
    background: none; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-hero .nav-links { display: none; }
  /* En movil el sello no cambia de tamano */
  .nav-hero .nav-logo-mark, .nav-hero.stuck .nav-logo-mark { width: 30px; height: 30px; }
  .nav-hero .nav-end { grid-area: 1 / 1; justify-self: start; }
  .nav-hero .nav-cta, .nav-hero.stuck .nav-cta { padding: 8px 18px; }
  /* El selector de la fila no cabe en la capsula movil: en la home va
     dentro del menu y en los casos, corto, junto a «Back» */
  .nav-end .nav-lang { display: none; }
  .nav-lang--mini { display: flex; }
  /* Casos: sin menu, «Back» a la izquierda y la llamada vuelve a la derecha */
  .nav-hero.nav-case .nav-end { grid-area: 1 / 3; justify-self: end; }
  .nav-back { padding: 0 12px; margin-left: -8px; }
  .nav-hero .nav-burger { display: flex; }

  /* Dos barras, no tres: es lo que hay dibujado, y al abrir se cruzan */
  .nav-hero .nav-burger { gap: 5px; }
  .nav-hero .nav-burger span { height: 3px; }
  .nav-hero .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-hero .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 1; transform: translateY(-4px) rotate(-45deg); }

  /* z-index -1: la tarjeta se pinta por encima del fondo de la capsula
     pero por debajo de la fila, asi que tapa las esquinas de 50 sin
     tapar los botones. El relleno superior deja hueco a la fila. */
  .nav-hero .mobile-menu {
    display: flex; flex-direction: column; gap: 8px;
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    width: auto; max-width: none;
    background: var(--white); border-radius: 30px;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 80px 32px 24px;
    z-index: -1;
    opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  }
  .nav-hero .mobile-menu.open { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .nav-hero .mobile-menu a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 4px 10px; border-radius: 14px;
    font-size: 20px; font-weight: 700; text-align: center;
  }
  .nav-hero .mobile-menu .nav-lang { justify-content: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .nav-hero .mobile-menu .nav-lang a { min-width: 48px; font-size: 15px; font-weight: 500; }
  .nav-hero .mobile-menu .nav-lang a[aria-current] { font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-hero .nav-links li.nav-indicator { transition: opacity 0.01ms; }
}

/* ---------- Barra de datos del hero ----------
   Antes era una tabla de cuatro celdas con filetes y rótulos en
   versalitas. Ahora son cápsulas sueltas que se envuelven solas: sin
   retícula que romper en móvil y sin rótulos, porque el dato se explica
   solo. El punto de disponibilidad es el único color de la fila. */
.factbar { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.fact {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 50px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--black);
  white-space: nowrap;
}
.fact .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-ink);
  /* Tres latidos y quieto: un parpadeo infinito distrae de la lectura */
  animation: pulse 2s ease-in-out 3;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- Revelado al scroll ----------
   En CSS y no en estilos inline desde JS, para que
   prefers-reduced-motion pueda anularlo de verdad. */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.fade-up.visible { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .fade-up, .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Footer ---------- */
footer { background: #0A0A09; color: var(--white); padding: 28px 24px; }
.footer-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-logo { display: block; text-decoration: none; }
.footer-logo-img { height: 32px; width: 32px; display: block; }
.footer-copy { font-size: var(--t-small); font-weight: 500; color: rgba(255,255,255,0.48); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { display: inline-block; padding: 12px 0; font-size: var(--t-small); font-weight: 500; color: rgba(255,255,255,0.58); text-decoration: none; transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--accent-soft); }

/* ---------- Barra de progreso de lectura (páginas de caso) ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 200; transition: width 0.05s linear; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --container: 100%; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-meta { text-align: left; padding-bottom: 0; }
  .footer-inner { flex-direction: column; gap: 14px; text-align: center; }
  section { padding: clamp(56px, 11vw, 76px) 20px; }
}
@media (max-width: 480px) {
  .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 14px; }
  .fact { font-size: 13px; padding: 9px 15px; gap: 8px; }
}

/* ---------- Pantallas grandes (> 1440) ----------
   Hasta 1440 todo queda como esta maquetado. Por encima, la reticula se
   abre hacia los bordes (margen lateral proporcional, techo de 2400 px)
   y titulos y aire crecen poco a poco: cada valor parte de su medida a
   1440 y crece la mitad que la pantalla, con techo en x1,5. Los parrafos
   no se estiran: mantienen su medida de lectura. */
@media (min-width: 1441px) {
  :root {
    --container: min(calc(1328px + (100vw - 1440px) * 0.88), 2400px);
    --t-display: min(calc(168px + (100vw - 1440px) * 0.0583), 252px);
    --t-h1:      min(calc(96px + (100vw - 1440px) * 0.0333), 144px);
    --t-h2:      min(calc(46px + (100vw - 1440px) * 0.016), 69px);
    --t-h3:      min(calc(24px + (100vw - 1440px) * 0.0083), 36px);
    --t-num:     min(calc(108px + (100vw - 1440px) * 0.0375), 162px);
    --t-lead:    min(calc(28px + (100vw - 1440px) * 0.0069), 38px);
    --s-section: min(calc(112px + (100vw - 1440px) * 0.0389), 168px);
    --s-block:   min(calc(68px + (100vw - 1440px) * 0.0236), 102px);
    --t-small:   min(calc(13px + (100vw - 1440px) * 0.0018), 15px);
    --t-label:   min(calc(11px + (100vw - 1440px) * 0.0013), 12.5px);
  }
  /* La barra arriba sigue alineada con la reticula */
  .nav-hero { width: calc(var(--container) + 16px); }
}
@media (min-width: 1441px) {
  /* Rotulos en mono de 12 px: a 2000 px de reticula se quedaban en microtexto */
  .mono, .section-meta {
    font-size: min(calc(12px + (100vw - 1440px) * 0.0018), 14px);
  }
}