/* ==========================================================================
   Grupo Impresor Arcos — sistema de diseño
   Azul institucional sobre papel cálido; acentos en las tintas del logo
   (cian, magenta y amarillo). Firma gráfica: la línea de registro CMYK.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* base */
  --navy:        #0E2A47;
  --navy-700:    #16395C;
  --navy-900:    #081B2E;
  --paper:       #FAF7F2;
  --paper-2:     #F2ECE3;
  --paper-3:     #E7DFD2;
  --ink:         #141414;
  --ink-60:      #14141499;

  /* tintas CMYK del logo — ahora son el sistema de acento */
  --c: #47A2D5;
  --m: #C6317C;
  --y: #FDF051;
  --k: #1A1919;

  /* variantes de trabajo (contraste) --------------------------------------
     Sobre papel sólo el magenta pasa AA como texto/botón sólido:
       magenta 5.1:1 · cian 2.5:1 · amarillo 1.1:1
     Por eso el cian y el amarillo se usan como fondo con tinta oscura,
     como subrayado o como detalle — nunca como texto pequeño.            */
  --acc:      var(--m);          /* acción principal */
  --acc-dark: #A82565;           /* magenta a fondo, para hover */
  --acc-2:    var(--c);          /* apoyo: bloques, subrayados */
  --acc-2-dark:#2E7FAE;          /* cian legible como texto sobre papel */
  --acc-3:    var(--y);          /* resalte: siempre con tinta oscura encima */
  --grad-cmyk: linear-gradient(90deg, var(--c) 0%, var(--m) 48%, var(--y) 100%);

  /* tipografía */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Sora", var(--sans);

  /* escala fluida */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.84rem, 0.81rem + 0.14vw, 0.93rem);
  --t-base: clamp(0.97rem, 0.93rem + 0.20vw, 1.08rem);
  --t-lg:   clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
  --t-xl:   clamp(1.35rem, 1.20rem + 0.72vw, 1.85rem);
  --t-2xl:  clamp(1.72rem, 1.42rem + 1.45vw, 2.85rem);
  --t-3xl:  clamp(2.15rem, 1.60rem + 2.70vw, 4.20rem);
  --t-4xl:  clamp(2.70rem, 1.70rem + 4.90vw, 6.40rem);

  /* ritmo */
  --gut: clamp(1.15rem, 0.80rem + 1.70vw, 2.40rem);
  --bay: clamp(3.40rem, 2.30rem + 5.20vw, 7.60rem);
  --wrap: 1280px;
  --wrap-narrow: 760px;

  --rule: 1px solid var(--paper-3);
  --rule-ink: 1px solid #14141420;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1.15em; max-width: 68ch; }
::selection { background: var(--acc); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
  z-index: 200; font-size: var(--t-sm); font-weight: 600;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gut) * 2), var(--wrap-narrow)); margin-inline: auto; }
.bay { padding-block: var(--bay); }
.bay-sm { padding-block: calc(var(--bay) * 0.58); }

/* firma: línea de registro CMYK */
.registro {
  display: flex; height: 3px; width: 100%; overflow: hidden;
}
.registro span { flex: 1 1 25%; }
.registro span:nth-child(1) { background: var(--c); }
.registro span:nth-child(2) { background: var(--m); }
.registro span:nth-child(3) { background: var(--y); }
.registro span:nth-child(4) { background: var(--k); }
.registro--thin { height: 2px; }

/* cruz de registro decorativa */
.cruz {
  width: 22px; height: 22px; position: relative; flex: none; opacity: 0.5;
}
.cruz::before, .cruz::after {
  content: ""; position: absolute; background: var(--ink-60);
}
.cruz::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.cruz::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* etiqueta de sección tipo pliego */
.rotulo {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 1.6rem;
}
.rotulo::after { content: ""; flex: 1; height: 1px; background: var(--paper-3); }
.rotulo .num { color: var(--acc); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- header */
/* Barra mínima: tipografía pequeña en versalitas, mucho aire, una sola
   acción. La firma de imprenta queda en la línea de registro inferior. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.header--scrolled { box-shadow: 0 1px 0 #14141414, 0 8px 28px #0e2a470f; }
.header__bar {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem);
  min-height: 62px; padding-block: 0.55rem;
}
.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img {
  width: clamp(112px, 10.5vw, 146px);
  transition: opacity 0.25s var(--ease);
}
.header__logo:hover img { opacity: 0.72; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.3rem); margin-left: auto; }
.nav a:not(.btn) {
  text-decoration: none; font-family: var(--display);
  font-size: 0.735rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.135em;
  padding: 0.35rem 0; position: relative; white-space: nowrap;
  color: var(--ink); opacity: 0.72;
  transition: opacity 0.25s var(--ease);
}
.nav a:not(.btn):hover { opacity: 1; }
/* punto de tinta en lugar de subrayado: más callado, más gráfico */
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--acc);
  transform: translate(-50%, 4px) scale(0);
  transition: transform 0.3s var(--ease);
}
.nav a:not(.btn):hover::after { transform: translate(-50%, 0) scale(1); }
.nav a:not(.btn)[aria-current="page"] { opacity: 1; }
.nav a:not(.btn)[aria-current="page"]::after { transform: translate(-50%, 0) scale(1); }

/* selector de idioma: texto plano con separador, sin cápsula */
.lang {
  display: flex; align-items: center; flex: none;
  font-family: var(--display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em;
}
.lang a {
  text-decoration: none; padding: 0.3rem 0.34rem; color: var(--ink);
  opacity: 0.42; transition: opacity 0.25s var(--ease);
}
.lang a:hover { opacity: 0.8; }
.lang a[aria-current="true"] { opacity: 1; font-weight: 700; }
.lang__sep { opacity: 0.24; font-size: 0.72rem; }

/* CTA de la barra: contorno fino y punto de tinta, no un bloque sólido */
.nav .btn--nav {
  --btn-bg: transparent; --btn-fill: var(--navy);
  --btn-fg: var(--ink); --btn-fg-hover: #fff;
  border-color: #14141426; border-radius: 999px;
  padding: 0.56rem 1.05rem 0.56rem 0.9rem;
  font-size: 0.735rem; text-transform: uppercase; letter-spacing: 0.12em;
  gap: 0.5rem;
}
.nav .btn--nav::before { border-radius: 999px; }
.nav .btn--nav:hover { border-color: var(--navy); }
.nav .btn--nav .punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none;
  transition: transform 0.3s var(--ease);
}
.nav .btn--nav:hover .punto { transform: scale(1.5); background: var(--y); }

/* hamburguesa */
.burger {
  display: none; flex: none; width: 42px; height: 42px; border: none;
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
  padding: 0; gap: 0; flex-direction: column;
}
.burger i {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform 0.34s var(--ease), opacity 0.24s var(--ease);
}
.burger i + i { margin-top: 5px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------- botones */
.btn {
  --btn-bg: transparent;
  --btn-fill: var(--navy);
  --btn-fg: var(--ink);
  --btn-fg-hover: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--display); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  padding: 1rem 1.75rem; border: 1px solid transparent; border-radius: 2px;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
/* el relleno entra desde abajo en vez de un simple cambio de color */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* la flecha se adelanta y deja rastro */
.btn .btn__ico { transition: transform 0.34s var(--ease); }
.btn:hover .btn__ico { transform: translateX(4px); }

/* gesto de imprenta: el rótulo se sale de registro en cian y magenta.
   Va sobre el propio botón: text-shadow no afecta al SVG de la flecha. */
.btn:hover { animation: desregistro 0.5s var(--ease); }
@keyframes desregistro {
  0%   { text-shadow: none; }
  35%  { text-shadow: -0.055em 0 var(--c), 0.055em 0 var(--m); }
  70%  { text-shadow: 0.03em 0 var(--c), -0.03em 0 var(--m); }
  100% { text-shadow: none; }
}

.btn--primary {
  --btn-bg: var(--acc); --btn-fill: var(--navy);
  --btn-fg: #fff; --btn-fg-hover: #fff;
  box-shadow: 0 6px 22px #c6317c38;
}
.btn--primary:hover { box-shadow: 0 12px 34px #0e2a4738; }

.btn--ghost { --btn-bg: transparent; --btn-fill: var(--navy); border-color: #14141426; }
.btn--ghost:hover { border-color: var(--navy); }

/* cian sólido con tinta oscura encima: el cian no pasa contraste con blanco */
.btn--cyan { --btn-bg: var(--acc-2); --btn-fill: var(--navy); --btn-fg: var(--navy-900); --btn-fg-hover: #fff; }

/* amarillo sólido, siempre con tinta */
.btn--yellow { --btn-bg: var(--acc-3); --btn-fill: var(--ink); --btn-fg: var(--ink); --btn-fg-hover: var(--acc-3); }

.btn--light { --btn-bg: #fff; --btn-fill: var(--acc); --btn-fg: var(--navy); --btn-fg-hover: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fill: #fff; --btn-fg: #fff; --btn-fg-hover: var(--navy); border-color: #ffffff4d; }
.btn--outline-light:hover { border-color: #fff; }
.btn--wa { --btn-bg: #25D366; --btn-fill: #0B7C3A; --btn-fg: #06331a; --btn-fg-hover: #fff; }

.btn__ico { width: 1.05em; height: 1.05em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn:hover { animation: none; }
}

/* enlace con flecha */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm); color: var(--navy);
  border-bottom: 1px solid #0e2a4733; padding-bottom: 2px;
  transition: gap 0.24s var(--ease), border-color 0.24s var(--ease), color 0.24s var(--ease);
}
.arrow-link:hover { gap: 0.85rem; border-color: var(--acc); color: var(--acc); }

/* --------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* dos velos: uno general y otro más denso del lado del texto, para que el
   titular y la entradilla mantengan contraste con el vídeo en marcha */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, #081b2edb 0%, #081b2eb3 42%, #081b2ef0 100%),
    linear-gradient(90deg, #081b2eed 0%, #081b2ea6 55%, #081b2e40 100%);
}
.hero__inner { padding-block: clamp(5.5rem, 11vw, 11rem); position: relative; }
.hero h1 {
  font-size: var(--t-4xl); letter-spacing: -0.035em; margin-bottom: 0.55em;
  max-width: 17ch; color: #fff;
}
.hero h1 em { font-style: normal; color: var(--acc); }
.hero__lede { font-size: var(--t-lg); color: #ffffffd9; max-width: 52ch; margin-bottom: 2.2rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: #ffffffb3;
}
.hero__eyebrow::before {
  content: ""; width: 34px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%);
}
.hero__registro { position: absolute; left: 0; right: 0; bottom: 0; }

/* --------------------------------------------------------------- cifras */
.cifras {
  display: grid; gap: 1px; background: var(--paper-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-block: var(--rule);
}
.cifra { background: var(--paper); padding: clamp(1.7rem, 3.2vw, 2.9rem) clamp(1.1rem, 2vw, 1.7rem); }
.cifra__n {
  font-family: var(--display); font-weight: 800; line-height: 0.92;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
  letter-spacing: -0.045em; color: var(--navy); font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.cifra__n sup { font-size: 0.42em; vertical-align: super; color: var(--acc); letter-spacing: 0; }
.cifra__t { font-size: var(--t-sm); color: var(--ink-60); line-height: 1.45; max-width: 24ch; }

/* --------------------------------------------------------------- secciones */
.sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.sec-head h2 { font-size: var(--t-3xl); max-width: 20ch; }
.sec-head p { font-size: var(--t-lg); color: var(--ink-60); max-width: 58ch; }
.sec-head--split {
  display: grid; gap: clamp(1.2rem, 3vw, 3rem); align-items: end;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
@media (max-width: 780px) { .sec-head--split { grid-template-columns: 1fr; } }

.band-navy { background: var(--navy); color: #fff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: #ffffffb8; }
.band-navy .rotulo { color: #ffffff80; }
.band-navy .rotulo::after { background: #ffffff26; }
.band-paper2 { background: var(--paper-2); }

/* --------------------------------------------------------------- servicios */
.serv-grid {
  display: grid; gap: 1px; background: var(--paper-3);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border: var(--rule);
}
/* cuatro bloques: 2×2 llena la retícula; a tres por fila quedaba uno huérfano */
@media (min-width: 1080px) {
  .serv-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
.serv {
  background: var(--paper); padding: clamp(1.6rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none;
  position: relative; transition: background 0.3s var(--ease); min-height: 240px;
}
.serv:hover { background: #fff; }
.serv::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--accent, var(--c)); transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.serv:hover::before { transform: scaleX(1); }
.serv__n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; color: var(--ink-60); font-variant-numeric: tabular-nums;
}
.serv h3 { font-size: var(--t-xl); margin: 0.2rem 0 0; }
.serv p { font-size: var(--t-sm); color: var(--ink-60); margin: 0; flex: 1; }
.serv__go {
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm); color: var(--navy);
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: gap 0.24s var(--ease), color 0.24s var(--ease);
}
.serv:hover .serv__go { gap: 0.8rem; color: var(--acc); }

/* --------------------------------------------------------------- media/figura */
.figura { position: relative; background: var(--paper-2); overflow: hidden; }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura--tall { aspect-ratio: 3 / 4; }
.figura--wide { aspect-ratio: 16 / 10; }
.figura--sq { aspect-ratio: 1; }
.figura__cap {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 1.5rem 1.4rem 1.2rem;
  background: linear-gradient(180deg, transparent, #081b2ecc);
  color: #fff; font-size: var(--t-xs); letter-spacing: 0.04em;
}

.dos-col {
  display: grid; gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.dos-col--media-first > .figura { order: -1; }

/* marcas de corte en bloques destacados */
.crop {
  position: relative; padding: clamp(1.6rem, 3.4vw, 3rem);
  background: var(--paper); border: var(--rule);
}
.crop::before, .crop::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.crop::before { top: -1px; left: -1px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); }
.crop::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--acc); border-right: 2px solid var(--acc); }

/* --------------------------------------------------------------- portafolio */
.filtros {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.2rem;
  padding-bottom: 1.4rem; border-bottom: var(--rule);
}
.filtro {
  border: var(--rule-ink); background: transparent; border-radius: 999px;
  padding: 0.55rem 1.15rem; font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.filtro:hover { border-color: var(--navy); }
.filtro[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.galeria {
  display: grid; gap: clamp(0.7rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 24vw, 280px), 1fr));
}
.pieza {
  position: relative; background: #fff; border: var(--rule); padding: 0;
  cursor: zoom-in; overflow: hidden; aspect-ratio: 1; display: block;
  transition: border-color 0.28s var(--ease), transform 0.36s var(--ease), box-shadow 0.36s var(--ease);
}
.pieza img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
  transition: transform 0.5s var(--ease);
}
.pieza:hover { border-color: #14141433; transform: translateY(-3px); box-shadow: 0 14px 34px #0e2a4714; }
.pieza:hover img { transform: scale(1.045); }
.pieza__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.95rem 0.8rem;
  background: linear-gradient(180deg, transparent, #ffffffee);
  font-size: var(--t-xs); font-weight: 600; color: var(--navy);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.pieza:hover .pieza__meta, .pieza:focus-visible .pieza__meta { opacity: 1; transform: none; }
.pieza[hidden] { display: none; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: #081b2ef2; padding: clamp(1rem, 4vw, 3rem);
  align-items: center; justify-content: center;
}
.lb[open], .lb.is-open { display: flex; }
.lb__img {
  max-width: min(100%, 1100px); max-height: 82vh; object-fit: contain;
  background: #fff; padding: 1.4rem; box-shadow: 0 30px 90px #0006;
}
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem);
  text-align: center; color: #fff; font-size: var(--t-sm); padding-inline: 1rem;
  /* el max-width global de <p> lo anclaría a la izquierda */
  max-width: 68ch; margin-inline: auto;
}
.lb__btn {
  position: absolute; background: #ffffff1a; border: 1px solid #ffffff33; color: #fff;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s var(--ease); font-size: 1.4rem; line-height: 1;
}
.lb__btn:hover { background: #ffffff33; }
.lb__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------- certificaciones */
.iso-grid {
  display: grid; gap: 1px; background: #ffffff1f;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 1px solid #ffffff1f;
}
.iso { background: var(--navy); padding: clamp(1.6rem, 3vw, 2.4rem); }
.iso__n {
  font-family: var(--display); font-weight: 800; font-size: var(--t-2xl);
  letter-spacing: -0.03em; color: #fff; margin-bottom: 0.3rem;
}
.iso__t { font-size: var(--t-sm); color: #ffffffa8; margin: 0; }

/* --------------------------------------------------------------- timeline */
.linea { list-style: none; margin: 0; padding: 0; }
.linea li {
  display: grid; grid-template-columns: minmax(92px, 128px) 1fr; gap: clamp(1rem, 3vw, 2.6rem);
  padding-block: clamp(1.3rem, 2.6vw, 2.1rem); border-top: var(--rule);
}
.linea li:last-child { border-bottom: var(--rule); }
.linea__y {
  font-family: var(--display); font-weight: 800; font-size: var(--t-xl);
  color: var(--acc); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.linea h3 { font-size: var(--t-lg); margin-bottom: 0.3rem; }
.linea p { font-size: var(--t-sm); color: var(--ink-60); margin: 0; }

/* --------------------------------------------------------------- formulario */
.form { display: grid; gap: 1.15rem; }
.campo { display: grid; gap: 0.42rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo .hint { font-size: var(--t-xs); color: var(--ink-60); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  background: #fff; border: 1px solid #14141424; border-radius: 2px;
  padding: 0.82rem 0.95rem; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.campo textarea { min-height: 132px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px #0e2a4718;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] {
  border-color: #C0392B; box-shadow: 0 0 0 3px #c0392b1a;
}
.campo .err { font-size: var(--t-xs); color: #C0392B; font-weight: 600; min-height: 1em; }
.form-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form__nota { font-size: var(--t-xs); color: var(--ink-60); }
.form__estado { font-size: var(--t-sm); font-weight: 600; min-height: 1.5em; }
.form__estado[data-ok] { color: #1E7A45; }
.form__estado[data-err] { color: #C0392B; }

/* --------------------------------------------------------------- blog */
.posts { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.post {
  display: flex; flex-direction: column; text-decoration: none; background: var(--paper);
  border: var(--rule); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: 0 18px 44px #0e2a4714; border-color: #14141426; }
.post .figura { aspect-ratio: 16 / 10; }
.post__body { padding: clamp(1.2rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.post__meta { font-size: var(--t-xs); color: var(--ink-60); letter-spacing: 0.06em; text-transform: uppercase; }
.post h3, .post .post__t { font-size: var(--t-lg); margin: 0; }
.post p { font-size: var(--t-sm); color: var(--ink-60); margin: 0; flex: 1; }

.prosa { max-width: 72ch; }
.prosa h2 { font-size: var(--t-2xl); margin-top: 2.4em; }
.prosa h3 { font-size: var(--t-xl); margin-top: 1.9em; }
.prosa ul, .prosa ol { padding-left: 1.25rem; margin: 0 0 1.15em; }
.prosa li { margin-bottom: 0.5em; }
.prosa blockquote {
  margin: 2rem 0; padding: 1.2rem 0 1.2rem 1.6rem; border-left: 3px solid var(--acc);
  font-family: var(--display); font-size: var(--t-lg); font-style: normal; color: var(--navy);
}
.prosa table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: var(--t-sm); }
.prosa th, .prosa td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: var(--rule); }
.prosa th { font-family: var(--display); font-weight: 650; background: var(--paper-2); }
.tabla-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- footer */
.footer { background: var(--navy); color: #fff; }
.footer a { color: #ffffffc2; text-decoration: none; transition: color 0.2s var(--ease); }
.footer a:hover { color: #fff; }
.footer__top {
  display: grid; gap: clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: clamp(2.8rem, 5vw, 4.4rem);
}
.footer__logo img { width: 190px; margin-bottom: 1.2rem; }
.footer .footer__h {
  font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffffff80; margin-bottom: 1rem; font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-sm); }
.footer address { font-style: normal; font-size: var(--t-sm); color: #ffffffc2; line-height: 1.75; }
.footer__bottom {
  border-top: 1px solid #ffffff1f; padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs); color: #ffffff80;
}
.redes { display: flex; gap: 0.65rem; }
.redes a {
  width: 40px; height: 40px; border: 1px solid #ffffff2b; border-radius: 50%;
  display: grid; place-items: center;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.redes a:hover { background: #fff; border-color: #fff; transform: translateY(-2px); }
.redes a:hover svg { fill: var(--navy); }
.redes svg { width: 17px; height: 17px; fill: #fff; transition: fill 0.22s var(--ease); }

/* --------------------------------------------------------------- whatsapp flotante */
.wa-float {
  position: fixed; right: clamp(1rem, 2.4vw, 1.8rem); bottom: clamp(1rem, 2.4vw, 1.8rem);
  z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 8px 26px #25d36659;
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 12px 34px #25d36680; }
.wa-float svg { width: 27px; height: 27px; fill: #fff; }

/* --------------------------------------------------------------- CTA final */
.cta-final { text-align: center; }
.cta-final h2 { font-size: var(--t-3xl); max-width: 22ch; margin-inline: auto; }
.cta-final p { margin-inline: auto; text-align: center; }
.cta-final .btn-row { justify-content: center; }

/* --------------------------------------------------------------- reveal */
.rv { opacity: 1; }
/* Sólo ocultamos si el JS está vivo para volver a mostrarlo. Sin JS el
   contenido se ve tal cual: nunca se queda invisible. */
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.rv-d1.in { transition-delay: 0.08s; }
.rv-d2.in { transition-delay: 0.16s; }
.rv-d3.in { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .btn:hover, .post:hover, .pieza:hover, .wa-float:hover, .redes a:hover { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 62px 0 auto; background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.4rem var(--gut) 2.2rem; border-bottom: var(--rule);
    transform: translateY(-130%); transition: transform 0.42s var(--ease);
    max-height: calc(100dvh - 62px); overflow-y: auto; box-shadow: 0 24px 40px #0e2a4718;
  }
  .nav.is-open { transform: none; }
  .nav a:not(.btn) {
    padding: 1rem 0; border-bottom: var(--rule); opacity: 1;
    font-size: 1.05rem; letter-spacing: 0.06em; text-transform: none; font-weight: 600;
  }
  .nav a:not(.btn)::after { left: 0; transform: translate(0, 4px) scale(0); }
  .nav a:not(.btn)[aria-current="page"]::after,
  .nav a:not(.btn):hover::after { transform: translate(0, 0) scale(1); }
  .nav .btn { margin-top: 1.3rem; justify-content: center; }
  .header__bar { gap: 0.7rem; }
  .lang { margin-left: auto; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .linea li { grid-template-columns: 1fr; gap: 0.35rem; }
  .lb__prev, .lb__next { top: auto; bottom: 1rem; transform: none; }
  .hero__inner { padding-block: clamp(4rem, 16vw, 6rem); }
}

@media print {
  .header, .footer, .wa-float, .lb, .burger { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Componentes dinámicos — home y movimiento
   ========================================================================== */

/* barra de progreso de lectura, en tintas */
.progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 150;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-cmyk); pointer-events: none;
}

/* ------------------------------------------------------------ marquesina */
.marquee {
  overflow: hidden; border-block: var(--rule); background: var(--paper-2);
  padding-block: 0.9rem; display: flex; user-select: none;
}
.marquee__track {
  display: flex; flex: none; gap: 0; align-items: center;
  animation: correr 42s linear infinite; will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__i {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-inline: 1.6rem;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.7rem); white-space: nowrap; color: var(--navy);
}
.marquee__i::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--dot, var(--c));
}
.marquee__i:nth-child(4n+2)::after { --dot: var(--m); }
.marquee__i:nth-child(4n+3)::after { --dot: var(--y); }
.marquee__i:nth-child(4n+4)::after { --dot: var(--k); }
.marquee--navy { background: var(--navy); border-color: #ffffff1f; }
.marquee--navy .marquee__i { color: #fff; }

/* ------------------------------------------------------------ contadores */
.cifra__n[data-count] { font-variant-numeric: tabular-nums; }
.cifra { position: relative; overflow: hidden; }
.cifra::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--tinta, var(--c)); transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ease) 0.15s;
}
.cifra.in::after { transform: scaleX(1); }
.cifra:nth-child(2) { --tinta: var(--m); }
.cifra:nth-child(3) { --tinta: var(--y); }
.cifra:nth-child(4) { --tinta: var(--k); }

/* ------------------------------------------------------------ tarjetas con foco */
/* el puntero deja un halo suave: da sensación de material, no de plantilla */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent, var(--c)) 20%, transparent), transparent 62%);
}
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ mosaico de trabajo */
.mosaico {
  display: grid; gap: clamp(0.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(88px, 11vw, 150px);
}
.mos {
  position: relative; overflow: hidden; background: var(--paper-2);
  border: var(--rule); text-decoration: none; display: block;
}
.mos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mos--pad img { object-fit: cover; background: #fff; }
.mos:hover img { transform: scale(1.06); }
.mos__t {
  position: absolute; inset: auto 0 0 0; padding: 2rem 1rem 0.9rem;
  background: linear-gradient(180deg, transparent, #081b2edd);
  color: #fff; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.03em;
  transform: translateY(102%); transition: transform 0.36s var(--ease);
}
.mos:hover .mos__t, .mos:focus-visible .mos__t { transform: none; }
/* dos bandas que suman 12 columnas exactas: 5+4+3 y 3+5+4 */
.mos--a { grid-column: span 5; grid-row: span 3; }
.mos--b { grid-column: span 4; grid-row: span 3; }
.mos--c { grid-column: span 3; grid-row: span 3; }
.mos--d { grid-column: span 3; grid-row: span 2; }
.mos--e { grid-column: span 5; grid-row: span 2; }
.mos--f { grid-column: span 4; grid-row: span 2; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 92px; }
  .mos--a { grid-column: span 6; grid-row: span 3; }
  .mos--b, .mos--c, .mos--d, .mos--e, .mos--f { grid-column: span 3; grid-row: span 2; }
}

/* ------------------------------------------------------------ parallax */
.px { overflow: hidden; }
.px img, .px video { will-change: transform; }

/* ------------------------------------------------------------ vídeo de proceso */
.vcard {
  position: relative; overflow: hidden; background: var(--navy-900);
  border: 1px solid #ffffff1a; aspect-ratio: 16 / 10;
}
.vcard video, .vcard img { width: 100%; height: 100%; object-fit: cover; }
.vcard video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.vcard.playing video { opacity: 1; }
.vcard__t {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem 1rem;
  background: linear-gradient(180deg, transparent, #081b2ee6);
  color: #fff; font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  display: flex; align-items: center; gap: 0.6rem;
}
.vcard__t::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tinta, var(--c)); box-shadow: 0 0 0 0 var(--tinta, var(--c));
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tinta, var(--c)) 70%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------------------ banda de formulario */
.fband { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.fband::before {
  content: ""; position: absolute; inset: 0; opacity: 0.16; pointer-events: none;
  background:
    radial-gradient(700px circle at 12% 18%, var(--c), transparent 55%),
    radial-gradient(620px circle at 88% 82%, var(--m), transparent 55%);
}
.fband .wrap { position: relative; }
.fband h2 { color: #fff; }
.fband p { color: #ffffffc4; }
.fband__grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start;
}
@media (max-width: 900px) { .fband__grid { grid-template-columns: 1fr; } }
.fband .campo label { color: #fff; }
.fband .campo input, .fband .campo select, .fband .campo textarea {
  background: #ffffff0f; border-color: #ffffff2e; color: #fff;
}
.fband .campo input::placeholder, .fband .campo textarea::placeholder { color: #ffffff66; }
.fband .campo input:focus, .fband .campo select:focus, .fband .campo textarea:focus {
  border-color: var(--c); box-shadow: 0 0 0 3px #47a2d533; background: #ffffff17;
}
.fband .campo select option { color: var(--ink); }
.fband .form__nota { color: #ffffff8a; }
.fband .err { color: #FF9BB4; }
.fband__lista { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.fband__lista li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--t-sm); color: #ffffffcc; }
.fband__lista li::before {
  content: ""; width: 10px; height: 10px; flex: none; margin-top: 0.45em;
  background: var(--tinta, var(--c));
}
.fband__lista li:nth-child(2)::before { --tinta: var(--m); }
.fband__lista li:nth-child(3)::before { --tinta: var(--y); }

/* ------------------------------------------------------------ revelado por palabra */
.rw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rw > span { display: inline-block; }
.js .rw > span { transform: translateY(105%); transition: transform 0.82s var(--ease); }
.js .rw.in > span { transform: none; }

/* ------------------------------------------------------------ enlace de sección */
.peek {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.peek__n {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--paper-3);
}
.band-navy .peek__n { -webkit-text-stroke-color: #ffffff33; }

/* subrayado de tinta bajo palabras clave */
.tinta {
  background: linear-gradient(transparent 62%, var(--sub, var(--y)) 62%);
  padding-inline: 0.06em;
}
.tinta--c { --sub: color-mix(in srgb, var(--c) 60%, transparent); }
.tinta--m { --sub: color-mix(in srgb, var(--m) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .rw > span { transform: none; }
  .cifra::after { transition: none; transform: scaleX(1); }
  .vcard__t::before { animation: none; }
  .progreso { display: none; }
}

/* ==========================================================================
   Hero partido, tira de imágenes y muro — versión estudio de diseño
   ========================================================================== */

/* El texto vive sobre papel y la obra ocupa su propio panel: la fotografía
   se ve a saturación real en vez de bajo un velo oscuro. */
.hsplit {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch; border-bottom: var(--rule);
}
.hsplit__txt {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.15rem, 4vw, 4.5rem)
           clamp(3rem, 7vw, 6.5rem) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.hsplit__txt h1 {
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.1rem);
  letter-spacing: -0.038em; margin-bottom: 0.42em; max-width: 15ch;
}
.hsplit__txt h1 em { font-style: normal; color: var(--acc); }
.hsplit__lede { font-size: var(--t-lg); color: var(--ink-60); max-width: 46ch; margin-bottom: 2rem; }
.hsplit__media { position: relative; overflow: hidden; background: var(--navy-900); min-height: clamp(320px, 56vh, 660px); }
.hsplit__media img, .hsplit__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hsplit__media video { opacity: 0; transition: opacity 0.7s var(--ease); }
.hsplit__media.playing video { opacity: 1; }
.hsplit__media::after {
  content: ""; position: absolute; right: 18px; bottom: 18px; width: 26px; height: 26px;
  border-right: 2px solid #ffffff8c; border-bottom: 2px solid #ffffff8c; pointer-events: none;
}
.hsplit__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3rem 1.5rem 1.15rem; color: #fff;
  background: linear-gradient(180deg, transparent, #081b2ecc);
  font-size: var(--t-xs); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 0.6rem;
}
.hsplit__pie::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--y); flex: none;
}
@media (max-width: 900px) {
  .hsplit { grid-template-columns: 1fr; }
  .hsplit__txt { padding-inline: var(--gut); order: 2; }
  .hsplit__media { order: 1; min-height: 46vh; }
}

/* Cinta de piezas en movimiento continuo: la vitrina más rápida de leer. */
.tira { overflow: hidden; display: flex; padding-block: clamp(1rem, 2vw, 1.7rem); background: var(--paper-2); }
.tira__track { display: flex; flex: none; gap: clamp(0.6rem, 1.2vw, 1rem); animation: correr 64s linear infinite; }
.tira:hover .tira__track { animation-play-state: paused; }
.tira__i {
  flex: none; width: clamp(120px, 13vw, 190px); aspect-ratio: 1;
  background: #fff; border: var(--rule); overflow: hidden; display: block;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tira__i img { width: 100%; height: 100%; object-fit: cover; }
.tira__i:hover { transform: translateY(-5px); border-color: #14141433; }

.muro {
  display: grid; gap: clamp(0.4rem, 0.9vw, 0.8rem);
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 11vw, 148px), 1fr));
}
.muro a {
  aspect-ratio: 1; background: #fff; border: var(--rule); overflow: hidden; display: block;
  position: relative; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.muro img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.muro a:hover { transform: translateY(-4px) scale(1.03); z-index: 2; box-shadow: 0 16px 34px #0e2a471f; border-color: #14141426; }
.muro a:hover img { transform: scale(1.05); }
.muro a::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: var(--tint, var(--c)); mix-blend-mode: multiply;
  transition: opacity 0.35s var(--ease); pointer-events: none;
}
.muro a:hover::after { opacity: 0.10; }
.muro a:nth-child(4n+2) { --tint: var(--m); }
.muro a:nth-child(4n+3) { --tint: var(--y); }
.muro a:nth-child(4n+4) { --tint: var(--navy); }

.duo { display: grid; gap: clamp(0.7rem, 1.5vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (min-width: 1000px) { .serv-grid--3 { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .tira__track { animation: none; }
  .muro a:hover { transform: none; }
}

/* ==========================================================================
   Curvas, cortina de entrada y formularios del pie
   ========================================================================== */

:root{
  --r-sm: 10px;   /* campos, chips */
  --r-md: 16px;   /* tarjetas */
  --r-lg: 24px;   /* paneles de imagen */
  --r-xl: 36px;   /* bandas y paneles grandes */
  --r-pill: 999px;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* --- se acaban las esquinas vivas ------------------------------------- */
.btn            { border-radius: var(--r-pill); }
.btn::before    { border-radius: var(--r-pill); }
.campo input, .campo select, .campo textarea { border-radius: var(--r-sm); }
.serv, .post, .crop, .cifra   { border-radius: var(--r-md); }
.pieza, .muro a, .tira__i     { border-radius: var(--r-md); }
.figura, .mos, .vcard         { border-radius: var(--r-lg); }
.hsplit__media, .lb__img      { border-radius: var(--r-xl); }
.filtro                       { border-radius: var(--r-pill); }

/* la retícula de pelo se abre a tarjetas sueltas */
.serv-grid{ background: transparent; border: 0; gap: clamp(.6rem,1.2vw,1rem); }
.serv{ border: var(--rule); background: var(--paper); }
.serv:hover{ background: #fff; }
.serv::before{ border-radius: var(--r-md) var(--r-md) 0 0; }
.cifras{ background: transparent; border: 0; gap: clamp(.6rem,1.2vw,1rem);
         padding-inline: var(--gut); }
.cifra{ border: var(--rule); }
.cifra::after{ border-radius: 0 0 var(--r-md) var(--r-md); }
.iso-grid{ background: transparent; border: 0; gap: clamp(.6rem,1.2vw,1rem); }
.iso{ border: 1px solid #ffffff1f; border-radius: var(--r-md); }

/* la marca de corte en ángulo recto pasa a arco: viene de tus propios arcos */
.crop::before, .crop::after{
  width: 22px; height: 22px; border-color: var(--acc);
  border-style: solid; background: transparent;
}
.crop::before{ top:-1px; left:-1px; border-width: 2px 0 0 2px;
               border-radius: var(--r-md) 0 0 0; }
.crop::after { bottom:-1px; right:-1px; border-width: 0 2px 2px 0;
               border-radius: 0 0 var(--r-md) 0; }
/* la cruz de registro pasa a punto con anillo */
.cruz::before, .cruz::after{ display:none; }
.cruz{ border: 1px solid var(--ink-60); border-radius: 50%; }
.cruz::after{ display:block; content:""; position:absolute; inset:35%;
              background: var(--acc); border-radius:50%; }
/* el filete recto de la cita pasa a arco de tinta */
.prosa blockquote{ border-left: 0; padding-left: 1.9rem; position: relative; }
.prosa blockquote::before{
  content:""; position:absolute; left:0; top:.5rem; bottom:.5rem; width:14px;
  border: 3px solid var(--acc); border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* --- banda de vídeo a todo lo ancho ----------------------------------- */
.banda{
  position: relative; overflow: hidden; background: var(--navy-900);
  border-radius: var(--r-xl); margin-inline: auto;
  width: min(100% - (var(--gut)*2), var(--wrap));
}
.banda video, .banda img{ width:100%; height:100%; object-fit:cover; display:block; }
.banda video{ position:absolute; inset:0; opacity:0; transition: opacity .7s var(--ease); }
.banda.playing video{ opacity:1; }
.banda__t{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 3.4rem clamp(1.2rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem);
  background: linear-gradient(180deg, transparent, #081b2ecc);
  color:#fff; font:600 var(--t-xs)/1.4 var(--display); letter-spacing:.14em;
  text-transform: uppercase; display:flex; align-items:center; gap:.6rem;
}
.banda__t::before{ content:""; width:8px; height:8px; border-radius:50%;
                   background: var(--y); flex:none; }

/* --- cortina de entrada ----------------------------------------------- */
/* Pliego blanco donde se imprime el logo; al terminar se levanta.
   Una vez por sesión, saltable, y jamás si el visitante pidió menos
   animación o si la carga se demora. */
.cortina{
  position: fixed; inset: 0; z-index: 300; background: #fff;
  display: grid; place-items: center;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.cortina video{
  width: min(86vw, 940px); height: auto; display: block;
  border-radius: var(--r-lg);
}
.cortina__saltar{
  position: absolute; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem);
  font:600 var(--t-xs)/1 var(--display); letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-60); background: transparent; border: 1px solid #14141426;
  border-radius: var(--r-pill); padding:.7rem 1.2rem; cursor:pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cortina__saltar:hover{ color: var(--ink); border-color: var(--ink); }
.cortina.fuera{ transform: translateY(-101%); }
body.cortina-activa{ overflow: hidden; }

/* --- formularios del pie ---------------------------------------------- */
.piefx{ border-top: 1px solid #ffffff1f; }
.piefx__grid{
  display:grid; gap: clamp(1rem,2.4vw,2rem);
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  padding-block: clamp(2rem,4vw,3.2rem);
}
.fx{ border:1px solid #ffffff24; border-radius: var(--r-md);
     background:#ffffff0a; overflow:hidden; }
.fx__cab{
  width:100%; display:flex; align-items:center; gap:.8rem; cursor:pointer;
  padding: clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.4rem);
  background:transparent; border:0; text-align:left; color:#fff;
}
.fx__cab h4{ margin:0; font:700 var(--t-base)/1.25 var(--display);
             letter-spacing:-.01em; color:#fff; text-transform:none; }
.fx__cab p{ margin:.15rem 0 0; font-size:var(--t-xs); color:#ffffff8a; }
.fx__pt{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--pt,var(--c)); }
.fx__mas{ margin-left:auto; width:26px; height:26px; flex:none; position:relative;
          border:1px solid #ffffff33; border-radius:50%; }
.fx__mas::before, .fx__mas::after{
  content:""; position:absolute; inset:50% 24%; height:1.5px; background:#fff;
  transform: translateY(-50%); transition: transform .32s var(--ease);
}
.fx__mas::after{ transform: translateY(-50%) rotate(90deg); }
.fx__cab[aria-expanded="true"] .fx__mas::after{ transform: translateY(-50%) rotate(0); }
.fx__cuerpo{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .45s var(--ease); }
.fx__cab[aria-expanded="true"] + .fx__cuerpo{ grid-template-rows:1fr; }
.fx__cuerpo > div{ overflow:hidden; }
.fx__cuerpo .form{ padding: 0 clamp(1rem,2vw,1.4rem) clamp(1.1rem,2vw,1.5rem); gap:.85rem; }
.fx .campo label{ color:#fff; font-size:var(--t-xs); }
.fx .campo input, .fx .campo select, .fx .campo textarea{
  background:#ffffff0f; border-color:#ffffff2e; color:#fff; font-size:var(--t-sm);
  padding:.65rem .8rem;
}
.fx .campo input::placeholder, .fx .campo textarea::placeholder{ color:#ffffff5c; }
.fx .campo select option{ color: var(--ink); }
.fx .campo input:focus, .fx .campo select:focus, .fx .campo textarea:focus{
  border-color: var(--c); box-shadow: 0 0 0 3px #47a2d533;
}
.fx .err{ color:#FF9BB4; }
.fx .form__nota{ color:#ffffff7a; font-size:var(--t-xs); }
.fx .btn{ font-size:var(--t-xs); padding:.75rem 1.3rem; }

@media (prefers-reduced-motion: reduce){
  .cortina{ display:none !important; }
  .fx__cuerpo{ transition:none; }
}

/* ==========================================================================
   Ajustes: galería a sangre, cabecera flotante y bloques de capítulo
   ========================================================================== */

/* --- la imagen ES la loseta: sin marco, sin caja, todas del mismo tamaño --- */
.pieza{
  background: transparent; border: 0; box-shadow: none;
  aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md);
}
.pieza img{
  width:100%; height:100%; object-fit: cover; padding:0;
  transform: scale(1.02);                 /* respiro para que no se vea el borde */
  transition: transform .55s var(--ease);
}
.pieza:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px #0e2a4722; border:0; }
.pieza:hover img{ transform: scale(1.07); }
.pieza__meta{ display: none; }            /* fuera las descripciones */

.muro a{ background: transparent; border: 0; }
.tira__i{ background: transparent; border: 0; }
.mos--pad img{ object-fit: cover; }

/* --- cabecera flotante, tipo cápsula --- */
.header{
  position: fixed; top: clamp(10px, 1.6vw, 18px); left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.header__bar{
  width: min(100% - (var(--gut)*2), calc(var(--wrap) + 120px));
  margin-inline: auto;
  background: color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 10px #0e2a470f, 0 12px 40px #0e2a4714, inset 0 0 0 1px #14141410;
  padding-inline: clamp(1rem, 2vw, 1.6rem);
  min-height: 60px;
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.header--scrolled .header__bar{
  box-shadow: 0 2px 12px #0e2a4714, 0 16px 48px #0e2a471f, inset 0 0 0 1px #14141414;
}
/* la firma CMYK va DENTRO de la cápsula, como filo inferior recortado por
   el propio radio; la barra suelta de antes sobresalía y se veía pegada */
.header > .registro{ display: none; }
.header__bar{ position: relative; overflow: hidden; }
.header__bar::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: linear-gradient(90deg,
    var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%);
  opacity: .85; pointer-events: none;
  /* el degradado se recorta a la curva de la cápsula */
  -webkit-mask: linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0);
}
/* el contenido arranca por debajo de la barra flotante */
body{ padding-top: clamp(74px, 8vw, 92px); }
.hsplit{ border-top: 0; }

/* acciones de la derecha: una discreta y una sólida */
.nav__acciones{ display:flex; align-items:center; gap:.5rem; }
.btn--suave{
  --btn-bg: var(--paper-2); --btn-fill: var(--navy);
  --btn-fg: var(--ink); --btn-fg-hover:#fff;
  border-color: transparent;
}
.nav .btn--nav, .nav .btn--suave{
  padding:.6rem 1.15rem; font-size:.72rem; letter-spacing:.13em;
}

@media (max-width: 940px){
  .nav{ inset: calc(60px + clamp(10px,1.6vw,18px) + 10px) var(--gut) auto; border-radius: var(--r-lg);
        border-bottom: 0; box-shadow: 0 24px 50px #0e2a4726; padding: 1.2rem 1.3rem 1.6rem; }
  .nav__acciones{ flex-direction: column; align-items: stretch; gap:.6rem; margin-top:1rem; }
  .nav .btn--nav, .nav .btn--suave{ justify-content:center; padding:.85rem 1.2rem; }
}

/* --- bloque de capítulo, al estilo de la referencia --- */
.cap{ display:grid; gap: clamp(1.4rem, 3.4vw, 3.4rem);
      grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:center; }
.cap--flip > .cap__media{ order:-1; }
@media (max-width: 860px){ .cap{ grid-template-columns:1fr; } .cap--flip > .cap__media{ order:0; } }
.cap__media{ border-radius: var(--r-lg); overflow:hidden; background: var(--paper-2); }
.cap__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; display:block; }
.cap__etq{
  display:flex; align-items:center; gap:.8rem; margin:0 0 .9rem;
  font:600 var(--t-xs)/1 var(--display); letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink-60);
}
.cap__etq::after{ content:""; width:46px; height:2px; background:var(--acc); border-radius:999px; }
.cap h3{ font-size: var(--t-2xl); max-width: 16ch; margin-bottom:.5em; }
.cap p{ color: var(--ink-60); }
.cap__n{
  font:800 var(--t-xs)/1 var(--display); letter-spacing:.1em; color: var(--acc);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Limpieza global + componentes nuevos
   Fuera: números de sección, líneas divisorias y descripciones bajo
   imágenes y vídeos. Las transiciones entre secciones son por aire, no por filete.
   ========================================================================== */

/* --- fuera numeración y filetes ---------------------------------------- */
.rotulo .num,
.serv__n,
.peek__n,
.cap__n            { display: none !important; }
.rotulo::after     { display: none; }
.rotulo            { margin-bottom: 1.1rem; }
.peek              { align-items: flex-end; }

/* --- fuera descripciones de vídeo e imagen ----------------------------- */
.banda__t,
.vcard__t,
.mos__t,
.figura__cap,
.hsplit__pie       { display: none !important; }

/* --- fuera divisores entre secciones ----------------------------------- */
.filtros           { border-bottom: 0; padding-bottom: 0; }
.cifras            { border-block: 0; }
.cifra             { border: 0; }
.cifra::after      { display: none; }
.linea li          { border-top: 0; }
.linea li:last-child { border-bottom: 0; }
.hsplit            { border-bottom: 0; }

/* --- cabecera y logo más presentes ------------------------------------- */
.header__bar       { min-height: 76px; padding-inline: clamp(1.2rem, 2.4vw, 2rem); }
.header__logo img  { width: clamp(150px, 14vw, 208px); }
.nav a:not(.btn)   { font-size: .82rem; letter-spacing: .12em; }
.nav .btn--nav,
.nav .btn--suave   { padding: .72rem 1.35rem; font-size: .8rem; }
body               { padding-top: clamp(92px, 9vw, 112px); }

/* --- banda de vídeo a sangre, pegada a lo que sigue --------------------- */
.banda--full       { width: 100%; border-radius: 0; margin: 0; display: block; }
.banda--full video,
.banda--full img   { width: 100%; height: 100%; object-fit: cover; }
.seccion-pegada    { padding-top: 0 !important; margin-top: 0 !important; }

/* --- carrusel del hero -------------------------------------------------- */
.carrusel          { position: relative; overflow: hidden; background: var(--navy-900); }
.carrusel__pista   { display: flex; transition: transform .85s var(--ease); will-change: transform; }
.carrusel__dia     { flex: 0 0 100%; position: relative; min-height: clamp(460px, 66vh, 720px); }
.carrusel__dia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carrusel__dia::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #081b2eef 0%, #081b2ec4 46%, #081b2e4d 100%);
}
.carrusel__txt     {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  width: min(100% - (var(--gut)*2), var(--wrap)); margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5.5rem); color: #fff;
}
.carrusel__txt h1  { color: #fff; font-size: clamp(2.3rem,1.3rem+3.9vw,4.4rem);
                     letter-spacing: -.035em; max-width: 17ch; margin-bottom: .45em; }
.carrusel__txt h1 em { font-style: normal; color: var(--y); }
.carrusel__txt p   { color: #ffffffd6; font-size: var(--t-lg); max-width: 48ch; margin-bottom: 2rem; }

/* botón de conversión, grande y evidente */
.btn--grande       { font-size: 1rem; padding: 1.15rem 2.3rem; }
.btn--conv         { --btn-bg: var(--y); --btn-fill: #fff; --btn-fg: var(--ink); --btn-fg-hover: var(--ink);
                     box-shadow: 0 10px 30px #fdf05140; font-weight: 700; }
.btn--conv:hover   { box-shadow: 0 16px 44px #fdf05159; }

.carrusel__nav     { position: absolute; left: 0; right: 0; bottom: clamp(1.1rem,2.4vw,2rem); z-index: 3; }
.carrusel__nav > div{ width: min(100% - (var(--gut)*2), var(--wrap)); margin-inline: auto;
                      display: flex; gap: .6rem; }
.carrusel__pt      { width: 42px; height: 4px; border-radius: 999px; border: 0; padding: 0;
                     background: #ffffff45; cursor: pointer; transition: background .3s var(--ease); }
.carrusel__pt[aria-current="true"] { background: var(--y); }

/* --- servicios: título claro + imagen de proceso ------------------------ */
.serv              { padding: 0; overflow: hidden; min-height: 0; }
.serv__img         { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); }
.serv__img img     { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.serv:hover .serv__img img { transform: scale(1.05); }
.serv__cuerpo      { padding: clamp(1.1rem,2.2vw,1.6rem); display: flex; flex-direction: column; gap: .5rem; }
.serv h3           { font-size: var(--t-lg); margin: 0; }
.serv::before      { display: none; }

/* --- muro de portafolio: filas completas -------------------------------- */
.muro--par         { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .muro--par { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .muro--par { grid-template-columns: repeat(2, 1fr); } }

/* --- certificaciones ---------------------------------------------------- */
.isos              { display: flex; flex-wrap: wrap; align-items: center;
                     justify-content: center; gap: clamp(2rem, 6vw, 5rem); }
.isos img          { height: clamp(72px, 8vw, 108px); width: auto; display: block; }

@media (prefers-reduced-motion: reduce){ .carrusel__pista { transition: none; } }


/* rejilla del portafolio con columnas fijas: filas siempre completas */
.galeria--par{ grid-template-columns: repeat(5, 1fr); }
@media (max-width:1100px){ .galeria--par{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px){ .galeria--par{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .galeria--par{ grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Reglas de diseño y correcciones
   ========================================================================== */

/* --- 1. contenedores: o la tarjeta trae margen interno, o su cuerpo. -----
   Nunca a medias: ése fue el fallo que dejó el texto pegado al borde. */
.serv{ padding: clamp(1.3rem, 2.4vw, 1.8rem); min-height: 0; }
.serv--foto{ padding: 0; }                      /* aquí lo pone .serv__cuerpo */
.serv--foto .serv__cuerpo{ padding: clamp(1.1rem, 2.2vw, 1.6rem); }

/* --- 2. toda imagen dentro de un contenedor redondeado hereda su radio --- */
.post .figura{ border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.post .figura img{ display:block; width:100%; height:100%; object-fit:cover; }
.serv__img{ border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.cap__media, .figura, .banda, .vcard, .mos, .pieza, .muro a, .tira__i{ overflow: hidden; }

/* --- 3. rótulo de sección: mismo peso en todo el sitio, con punto de tinta */
.rotulo{
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 1.1rem;
}
.rotulo::before{
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc); flex: none;
}
.band-navy .rotulo, .fband .rotulo{ color: #fff; }
.band-navy .rotulo::before, .fband .rotulo::before{ background: var(--y); }
.sec-head[style*="center"] .rotulo, .rotulo[style*="center"]{ justify-content: center; }

/* --- 4. las cifras recuperan su recuadro ------------------------------- */
.cifras{ padding-inline: var(--gut); gap: clamp(.7rem, 1.4vw, 1.1rem); }
.cifra{
  background: var(--paper); border: var(--rule); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.2rem, 2vw, 1.6rem);
}

/* --- 5. la banda toca la sección, pero el contenido respira ------------- */
.seccion-pegada{ margin-top: 0 !important; padding-top: clamp(2.6rem, 5vw, 4.4rem) !important; }

/* --- 6. WhatsApp: un icono más presente -------------------------------- */
.wa-float{ width: 68px; height: 68px; }
.wa-float svg{ width: 34px; height: 34px; }

/* --- 7. certificaciones del home: más grandes, más aire, centradas ------ */
.isos{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(3rem, 9vw, 7rem); padding-block: clamp(1rem, 2.4vw, 2rem);
}
.isos img{ height: clamp(96px, 10vw, 148px); width: auto; }

/* --- 8. tarjetas de certificación en blanco, con su icono -------------- */
.certs{
  display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cert{
  background: #fff; border-radius: var(--r-md); overflow: hidden;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  display: flex; flex-direction: column; gap: .9rem;
  box-shadow: 0 1px 0 #14141410;
}
/* align-self: en un flex en columna el hijo se estira a lo ancho por
   defecto, y eso deformaba el icono */
.cert img{ height: clamp(58px, 6vw, 76px); width: auto; display: block;
           align-self: flex-start; object-fit: contain; }
.cert h3{ font-size: var(--t-lg); margin: 0; color: var(--ink); }
.cert p{ font-size: var(--t-sm); color: var(--ink-60); margin: 0; }

/* --- 9. ritmo vertical: tres alturas y ninguna más ---------------------- */
.bay-lg{ padding-block: calc(var(--bay) * 1.25); }

/* --- 10. las cifras: más aire y un borde por tinta ---------------------- */
/* cada recuadro toma una de las cuatro tintas del logo, en el mismo orden
   en que entran en máquina: cian, magenta, amarillo, negro. */
.cifras{
  gap: clamp(1.1rem, 2.4vw, 2rem);
  padding-block: clamp(.6rem, 1.4vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cifra{
  --tinta: var(--c);
  border: 2px solid var(--tinta);
  padding: clamp(1.8rem, 3.2vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem);
}
.cifra:nth-child(2){ --tinta: var(--m); }
/* el amarillo de marca sobre papel casi no se ve a 2 px: se le baja
   un punto de luminosidad sin salirse del tono */
.cifra:nth-child(3){ --tinta: #E4CE1E; }
.cifra:nth-child(4){ --tinta: var(--k); }
.cifra::after{ display: none; }

/* --- 11. lista de acabados y demás enumeraciones de Servicios ---------- */
/* van en dos columnas cuando son largas: trece acabados en fila única
   dejaban una columna de texto altísima al lado de la foto */
.lista-tinta{
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: .55rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.lista-tinta li{
  display: flex; gap: .6rem; align-items: baseline;
  font-size: var(--t-sm); color: var(--ink-60);
}
.lista-tinta li::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tinta, var(--c)); transform: translateY(-1px);
}
.lista-tinta li:nth-child(4n+2)::before{ --tinta: var(--m); }
.lista-tinta li:nth-child(4n+3)::before{ --tinta: #E4CE1E; }
.lista-tinta li:nth-child(4n+4)::before{ --tinta: var(--k); }
.band-navy .lista-tinta li{ color: #ffffffc4; }

/* --- 12. qué necesitamos para cotizar ---------------------------------- */
/* sobre el azul del formulario: la ficha se separa con un filete de tinta */
.chk{
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.4vw, 1.7rem);
  border: 1px solid #ffffff26; border-radius: var(--r-md);
  background: #ffffff0a;
}
.chk h3{
  font-size: var(--t-base); color: #fff; margin: 0 0 .35rem;
  display: flex; align-items: center; gap: .6rem;
}
.chk h3::before{
  content: ""; width: 22px; height: 3px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, #fff 75% 100%);
}
.chk__in{ font-size: var(--t-sm); color: #ffffff99; margin: 0 0 1rem; }
.chk ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.chk li{ font-size: var(--t-sm); color: #ffffffc4; line-height: 1.55; }
.chk li b{ color: #fff; font-weight: 600; }
.chk__pie{
  font-size: var(--t-sm); color: #ffffffc4; line-height: 1.55;
  margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid #ffffff1f;
}
.chk__pie b{ color: var(--y); font-weight: 600; }

/* --- 13. menú móvil: reconstruido -------------------------------------- */
/* El panel es hijo de .header__bar, y esa cápsula lleva `backdrop-filter`
   + `overflow:hidden`. El backdrop-filter la convierte en bloque contenedor,
   así que el `position:fixed` del panel dejaba de referirse al viewport y
   pasaba a medirse desde la cápsula; y el overflow lo recortaba a sus 76 px
   de alto. Encima, el desplazamiento era `translateY(-130%)` —un porcentaje
   de su propia altura— que dejaba el panel fuera de pantalla.
   Aquí se ancla al flujo de la cápsula con `absolute` y se muestra con
   opacidad, que no depende de medidas. */
@media (max-width: 940px) {
  .header__bar { overflow: visible; }

  .nav {
    position: absolute;
    inset: auto 0 auto 0;
    top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border: 0; border-radius: var(--r-lg);
    padding: 1.1rem 1.3rem 1.5rem;
    box-shadow: 0 20px 46px #0e2a4726, inset 0 0 0 1px #1414140f;
    max-height: calc(100dvh - 130px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .26s var(--ease), transform .26s var(--ease),
                visibility 0s linear .26s;
  }
  .nav.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease),
                visibility 0s linear 0s;
  }
  /* el último enlace no necesita filete: lo cierra el botón de cotizar */
  .nav a:not(.btn):last-of-type { border-bottom: 0; }
}

/* Al sacar el panel del flujo, `margin-left:auto` dejó de empujar: el botón
   se pegaba al logo. Y sin `overflow:hidden` la firma CMYK asomaba por las
   esquinas redondeadas, así que se recoge hasta donde el borde ya es recto. */
@media (max-width: 940px) {
  .burger { margin-left: auto; }
  .header__bar::after {
    left: var(--r-xl); right: var(--r-xl);
    border-radius: var(--r-pill);
  }
}