/* ──────────────────────────────────────────────────────────────────────
   VIERES · sitio corporativo estático
   Paleta: tinta de agua profunda + blanco técnico + azul de señal +
   gris de banda + verde de zona correcta (acento único).
   Tipografía autoalojada (OFL, assets/fonts): Archivo (display) ·
   Source Serif 4 (cuerpo) · IBM Plex Mono (datos). Sin terceros en tiempo
   de ejecución. El elemento firma es la banda de confianza del héroe.
   ────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-400-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-serif-4-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/source-serif-4-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tinta: #16303f;
  --tinta-suave: #3d5766;
  --papel: #fafcfc;
  --papel-tinte: #eef4f6;
  --azul-senal: #1d6fa5;
  --banda: #cfdfe8;
  --verde-zona: #1e7a5a;
  --verde-zona-oscuro: #175f46;
  --ambar: #b97d10;
  --rojo-zona: #b3543d;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --ancho: 1120px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
}

img { max-width: 100%; display: block; }
main:focus { outline: none; }

a { color: var(--azul-senal); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--azul-senal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Enlace de salto (accesibilidad con teclado) ──────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  font-family: var(--display);
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0;
  z-index: 10;
}
.skip-link:focus-visible { left: 0; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.site-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 82%;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  color: var(--tinta);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}

.site-nav a {
  font-family: var(--display);
  font-stretch: 88%;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
}
.site-nav a:hover { color: var(--tinta); }

/* ── Botones ──────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  font-family: var(--display);
  font-stretch: 90%;
  font-weight: 650;
  font-size: 1rem;
  color: #fff;
  background: var(--verde-zona);
  padding: 0.75rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
}
.cta:hover { background: var(--verde-zona-oscuro); }
.cta--small { font-size: 0.88rem; padding: 0.55rem 1rem; }
.cta--invert { background: #fff; color: var(--tinta); }
.cta--invert:hover { background: var(--banda); }

.link-quiet {
  font-family: var(--display);
  font-stretch: 90%;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  align-self: center;
}

/* ── Héroe ────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-senal);
  margin-bottom: 0.9rem;
}

.hero h1 {
  text-wrap: balance;
  font-family: var(--display);
  font-stretch: 80%;
  font-weight: 780;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.lede {
  font-size: 1.08rem;
  color: var(--tinta-suave);
  margin-bottom: 1.8rem;
  max-width: 34rem;
}

.hero-actions { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* La gráfica firma: banda de confianza sobre zonas de calidad */
.hero-chart {
  background: #fff;
  border: 1px solid var(--banda);
  border-radius: 8px;
  padding: 1rem 1rem 0.8rem;
  box-shadow: 0 1px 2px rgba(22, 48, 63, 0.06);
}
.hero-chart svg { width: 100%; height: auto; display: block; }
.hero-chart figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tinta-suave);
  padding: 0.7rem 0.2rem 0.2rem;
  line-height: 1.5;
}

.zona--alta { fill: #f3ede0; }
.zona--ok   { fill: #e8f2ec; }
.zona--baja { fill: #f4e7e2; }
.grid line { stroke: rgba(22, 48, 63, 0.14); stroke-width: 1; stroke-dasharray: 3 4; }
.banda { fill: rgba(29, 111, 165, 0.16); }
.serie {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.pronostico {
  fill: none;
  stroke: var(--azul-senal);
  stroke-width: 2.6;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}
.ultimo { fill: var(--tinta); stroke: #fff; stroke-width: 2; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--tinta-suave);
}
.tag--eje { fill: var(--tinta); font-weight: 500; }
.tag--mono { fill: var(--azul-senal); }

/* Dibujo de la serie al cargar (respeta reduced motion vía la regla global) */
.serie {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: dibujar 1.6s ease-out 0.2s forwards;
}
.pronostico { opacity: 0; animation: aparecer 0.6s ease-out 1.7s forwards; }
.ultimo { opacity: 0; animation: aparecer 0.4s ease-out 1.6s forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .serie { stroke-dasharray: none; stroke-dashoffset: 0; }
  .pronostico, .ultimo { opacity: 1; }
}

/* ── Franja de credibilidad ───────────────────────────────────────── */
.proof-strip {
  background: var(--tinta);
  color: var(--banda);
  padding: 1.4rem 1.5rem;
}
.proof-strip p {
  max-width: var(--ancho);
  margin: 0 auto;
  font-family: var(--display);
  font-stretch: 90%;
  font-size: 1.02rem;
  font-weight: 500;
}

/* ── Secciones ────────────────────────────────────────────────────── */
.section {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.section--tinted {
  max-width: none;
  background: var(--papel-tinte);
}
.section--tinted > * {
  max-width: calc(var(--ancho) - 3rem);
  margin-left: auto;
  margin-right: auto;
}

.section-head { margin-bottom: 2.2rem; }
.section-head h2 {
  text-wrap: balance;
  font-family: var(--display);
  font-stretch: 82%;
  font-weight: 730;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
}

.cols { display: grid; gap: 2.2rem; }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cols h3, .case-body h3, .steps h3, .method-copy h3 {
  font-family: var(--display);
  font-stretch: 86%;
  font-weight: 680;
  font-size: 1.12rem;
  margin-bottom: 0.55rem;
}
.cols p, .case-body p, .steps p { color: var(--tinta-suave); font-size: 0.98rem; }

.section-note {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--banda);
  color: var(--tinta-suave);
  max-width: 46rem;
}

/* ── Casos ────────────────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.case {
  background: #fff;
  border: 1px solid var(--banda);
  border-radius: 8px;
  overflow: hidden;
}
.case img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.case img.case-evidence--wide { object-fit: contain; background: #fff; }
.case-body { padding: 1.4rem 1.5rem 1.6rem; }
.case-tag {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde-zona);
  margin-bottom: 0.6rem;
}

/* ── Método ───────────────────────────────────────────────────────── */
.method {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.6rem;
  align-items: start;
}
.method-copy p + p { margin-top: 1rem; }
.method-figure img { height: auto; }
.method-figure {
  background: #fff;
  border: 1px solid var(--banda);
  border-radius: 8px;
  padding: 0.9rem;
}
.method-figure figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--tinta-suave);
  padding-top: 0.7rem;
  line-height: 1.5;
}

/* ── Pasos (secuencia real: el orden informa) ─────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  counter-reset: paso;
  list-style: none;
}
.steps li { counter-increment: paso; }
.steps li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--verde-zona);
  border-bottom: 2px solid var(--verde-zona);
  width: 2.2rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.9rem;
}

/* ── Equipo ───────────────────────────────────────────────────────── */
.team-copy { max-width: 46rem; margin-bottom: 2.4rem; }
.logo-band {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  flex-wrap: wrap;
}
.logo-band img { height: 44px; width: auto; filter: grayscale(1); opacity: 0.75; }
.logo-band img:hover { filter: none; opacity: 1; }

/* ── Contacto ─────────────────────────────────────────────────────── */
.section--contact {
  max-width: none;
  background: var(--tinta);
  color: #fff;
}
.contact-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
}
.contact-inner h2 {
  font-family: var(--display);
  font-stretch: 82%;
  font-weight: 730;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1rem;
}
.contact-inner p {
  color: var(--banda);
  max-width: 40rem;
  margin: 0 auto 1.8rem;
}
.contact-note {
  font-family: var(--mono);
  font-size: 0.75rem !important;
  margin-top: 1.4rem !important;
}

/* ── Pie ──────────────────────────────────────────────────────────── */
.site-foot {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 3rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.site-foot .foot-line {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; padding-top: 2.2rem; }
  .cols--3, .steps, .cases, .method { grid-template-columns: 1fr; }
  /* El menú no se oculta: baja a una segunda fila y se compacta. */
  .site-head { flex-wrap: wrap; gap: 0.8rem 1.2rem; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1rem 1.2rem;
    flex-wrap: wrap;
  }
  .cta--small { margin-left: auto; }
}

/* ── Idioma ───────────────────────────────────────────────────────── */
.lang-switch {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: none;
  border: 1px solid var(--banda);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.lang-switch:hover { color: var(--tinta); border-color: var(--tinta-suave); }

/* ── Ejemplos ─────────────────────────────────────────────────────── */
.section-intro { color: var(--tinta-suave); margin-top: 0.6rem; max-width: 46rem; }
.examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.example {
  background: #fff;
  border: 1px solid var(--banda);
  border-radius: 10px;
  overflow: hidden;
}
.example img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--banda);
}
.example figcaption {
  padding: 1rem 1.2rem 1.2rem;
  color: var(--tinta-suave);
  font-size: 0.96rem;
}
.example figcaption strong {
  display: block;
  font-family: var(--display);
  color: var(--tinta);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.contact-address { font-family: var(--mono); white-space: nowrap; }
.foot-brand { margin-bottom: 0.5rem; }

@media (max-width: 940px) {
  .examples { grid-template-columns: 1fr; }
}

/* Página 404 (servida en cualquier ruta, con enlaces absolutos). */
.not-found {
  max-width: 40rem;
  margin: 6rem auto;
  padding: 0 1.5rem;
}
.not-found h1 { margin-bottom: 1rem; }