/* ---------- Hero (P4) dentro de panel con radio y margen (transición hacia lo claro) ---------- */
.hero { padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem) var(--gutter) 0; }
.hero__panel {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: min(100%, var(--max)); margin-inline: auto;
  min-height: 34rem;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 3vw, 3.5rem) 1.25rem;
  border-radius: var(--r-panel);
  background: var(--night); color: var(--white);
}
.hero__panel::after { /* grano sobre el panel */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain-light); background-size: 220px 220px; opacity: 0.07;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0.38; }
.hero__media .duo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Foto de la oficina: encuadre al borde derecho para que el rotulo CMPI del muro se vea completo */
.hero__media .duo img { object-position: 100% 50%; }
.hero__media .duo::after { background: linear-gradient(0deg, var(--night) 8%, transparent 70%), linear-gradient(90deg, var(--night) 0%, transparent 80%); }
/* Movil: la foto sale del fondo y pasa a ser un banner cuadrado sobre el titular, con zoom al rotulo */
@media (max-width: 899.98px) {
  .hero__panel { padding-top: 1.25rem; }
  .hero__media {
    position: relative; inset: auto; order: -1; opacity: 1;
    width: 100%; aspect-ratio: 1 / 1; margin-bottom: 1.5rem;
    border-radius: 1.25rem; border: 1px solid var(--hair-dark);
  }
  .hero__media .duo img { object-position: 100% 45%; transform: scale(1.25); transform-origin: 82% 45%; }
  .hero__media .duo::after { background: linear-gradient(0deg, var(--night) 0%, transparent 25%); }
}
/* Tableta: banner panoramico para no empujar el titular fuera de pantalla */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero__media { aspect-ratio: 16 / 9; }
  .hero__media .duo img { object-position: 100% 50%; transform: none; }
}
.hero__glow {
  position: absolute; z-index: 0; right: -20%; bottom: -30%; width: 80vmax; height: 80vmax; max-width: 1100px; max-height: 1100px;
  background: radial-gradient(closest-side, var(--blue-glow), transparent 70%);
  opacity: 0.3; pointer-events: none;
}
.hero__slab { display: none; }
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero .eyebrow { margin-bottom: 1rem; color: var(--blue-soft); }

h1 {
  margin: 0; font-weight: 900; text-transform: uppercase;
  font-size: var(--text-h1); line-height: 0.92; letter-spacing: -0.035em; overflow-wrap: break-word;
}
.h1-line { display: block; }
.hero h1 .ac { color: var(--blue-soft); font-size: 1.06em; }
.outline { /* relleno = fondo y trazo doble para ocultar cruces de la fuente variable */
  color: var(--night);
  -webkit-text-stroke: calc(var(--stroke) * 2) var(--blue-soft);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px #000) { .outline { color: var(--blue-soft); } }

.lede { max-width: 52ch; margin-top: 1.5rem; font-size: var(--text-lede); color: var(--white); }
.lema { margin-top: 1rem; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.hero__index {
  position: relative; z-index: 1; width: 100%; margin-top: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem;
  padding-top: 0.5rem; border-top: 1px solid var(--hair-dark);
}
.hero__index ol { display: grid; grid-template-columns: repeat(2, auto); gap: 0 1.75rem; }
.hero__index a {
  display: inline-flex; align-items: baseline; gap: 0.6rem; min-height: 44px; align-content: center;
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--text-on-dark); transition: color var(--dur-fast);
}
.hero__index a:hover { color: var(--white); }
.num { font-weight: 900; color: var(--blue-soft); font-variant-numeric: tabular-nums; }
.scrollcue { display: none; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-dark); }

@media (min-width: 900px) {
  .hero__panel { min-height: clamp(36rem, calc(100svh - var(--header-h) - 2.5rem), 52rem); }
  .hero__media {
    inset: 0 0 0 auto; width: min(58%, 880px); opacity: 1;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }
  .hero__media .duo::after { background: linear-gradient(0deg, var(--night) 0%, transparent 45%); }
  .hero__index ol { grid-template-columns: repeat(4, auto); gap: 0 2.5rem; }
  .scrollcue { display: inline-flex; }
  .hero__slab { /* oculta: tapaba el rotulo CMPI de la foto */
    display: none; position: absolute; z-index: 0; right: 7%; top: 12%; width: 13rem; aspect-ratio: 3 / 4;
    border: var(--hard) solid var(--blue-soft); border-radius: var(--r-block);
    box-shadow: var(--flat-md) var(--blue); opacity: 0.55; pointer-events: none;
    transform: translate3d(calc((var(--p, 0.5) - 0.5) * 70px), calc((var(--p, 0.5) - 0.5) * -110px), 0);
  }
  .hero__media .duo { transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -56px), 0) scale(1.08); will-change: transform; }
  .hero__glow { transform: translate3d(calc((var(--p, 0.5) - 0.5) * -90px), calc((var(--p, 0.5) - 0.5) * 80px), 0); }
}

/* ---------- Para quién (bloques P3, visual sticky P4) ---------- */
.quien { overflow: clip; }
.quien-grid { display: grid; gap: var(--space-gap); }

.quien-visual { position: relative; height: clamp(14rem, 50vw, 21rem); }
.quien-frame {
  position: relative; height: 100%; overflow: clip; isolation: isolate; container-type: inline-size;
  background: var(--navy); border: var(--hard-lg) solid var(--navy);
  border-radius: 3rem var(--r-block) 3rem var(--r-block);
  box-shadow: var(--flat-md) var(--blue);
}
.quien-layer { position: absolute; }
.quien-layer--photo { inset: -6%; transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -48px), 0) scale(1.06); }
.quien-layer--glow {
  right: -30%; bottom: -30%; width: 90%; aspect-ratio: 1; z-index: 1;
  background: radial-gradient(closest-side, var(--blue-glow), transparent 72%);
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * -80px), calc((var(--p, 0.5) - 0.5) * 90px), 0);
}
.quien-layer--inset {
  z-index: 2; right: 7%; top: 12%; width: 32%; aspect-ratio: 3 / 4;
  border: var(--hard) solid var(--white); border-radius: var(--r-block);
  box-shadow: 6px 6px 0 var(--red);
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * 36px), calc((var(--p, 0.5) - 0.5) * -90px), 0);
}
.quien-tag {
  position: absolute; z-index: 3; left: 1.25rem; top: 1.25rem;
  padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: var(--white); color: var(--navy);
  font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.quien-caps { display: none; }

.quien-list { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.quien-item { position: relative; --off: 7px; }
.quien-item::before { /* sombra plana desplazada */
  content: ""; position: absolute; inset: 0; border-radius: var(--r-block);
  background: var(--blue); transform: translate(var(--off), var(--off));
  transition: transform var(--dur-normal) var(--ease-out);
}
.quien-item--red::before { background: var(--red); }
.quien-block {
  position: relative; z-index: 1; display: grid; gap: 0.75rem; align-content: center;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  background: var(--white); color: var(--navy);
  border: var(--hard-lg) solid var(--navy); border-radius: var(--r-block);
  transition: translate var(--dur-normal) var(--ease-out);
}
.quien-block--navy { background: var(--navy); color: var(--white); }
.quien-block--tint { background: var(--blue-tint); }
.quien-block__no { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-text); }
.quien-block--navy .quien-block__no { color: var(--blue-soft); }
.quien-block__icon {
  display: grid; place-items: center; width: 4.25rem; height: 4.25rem;
  border: var(--hard) solid currentColor; border-radius: var(--r-block);
  background: var(--blue-tint); color: var(--navy);
}
.quien-block--navy .quien-block__icon { background: var(--white); color: var(--navy); }
.quien-block--tint .quien-block__icon { background: var(--white); }
.quien-block h3 { font-weight: 900; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; }
.quien-block p:not(.quien-block__no) { max-width: 48ch; }
.quien-block .quien-block__q { font-weight: 800; font-size: var(--text-lede); line-height: 1.25; color: var(--blue-text); }
.quien-block--navy p:not(.quien-block__no) { color: var(--text-on-dark); }
.quien-block--navy .quien-block__q { color: var(--blue-soft); }
@media (hover: hover) {
  .quien-item:hover::before { --off: 12px; }
  .quien-item:hover .quien-block { translate: -3px -3px; }
}
.quien-item.is-active::before { --off: 12px; }
.quien-item.is-active .quien-block { translate: -3px -3px; }

@media (min-width: 900px) {
  .quien-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .quien-visual {
    position: sticky; top: calc(var(--header-h) + 1.25rem);
    height: calc(100svh - var(--header-h) - 2.5rem); min-height: 26rem; max-height: 40rem;
  }
  .quien-item { padding-block: clamp(0.75rem, 3vh, 2rem); --off: 7px; }
  .quien-item::before { inset: clamp(0.75rem, 3vh, 2rem) 0; }
  .quien-block { min-height: 34svh; }
  .quien-caps { display: block; position: absolute; z-index: 3; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; height: 4.75rem; }
  .quien-cap {
    position: absolute; inset: auto 0 0 0; display: none; flex-direction: column; justify-content: flex-end; gap: 0.2rem;
    padding: 0.85rem 1rem; background: color-mix(in oklab, var(--navy) 90%, transparent); color: var(--white);
    border-left: var(--hard-lg) solid var(--red); border-radius: var(--r-block);
    transition: opacity var(--dur-normal), transform var(--dur-normal) var(--ease-out);
  }
  .quien-cap[data-i="1"] { display: flex; }
  .js .quien-cap { display: flex; opacity: 0; transform: translateY(14px); }
  .js .quien-cap.is-on { opacity: 1; transform: none; }
}
.quien-cap__meta { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--blue-soft); }
.quien-cap__name { font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; }

/* ---------- Servicios (bloques P3 en sistema claro) ---------- */
.serv { background: var(--blue-tint); }
.serv .section-intro { color: var(--navy); }
.serv-grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); grid-template-columns: minmax(0, 1fr); }
.serv-card {
  position: relative; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--white); color: var(--navy);
  border: var(--hard) solid var(--navy); border-radius: var(--r-block);
  box-shadow: var(--flat-md) var(--blue);
  transition: translate var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
@media (hover: hover) { .serv-card:hover { translate: -4px -4px; box-shadow: var(--flat-lg) var(--blue); } }
.serv-card h3 { font-weight: 900; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.08; text-transform: uppercase; letter-spacing: -0.01em; }
.serv-card p { color: var(--muted); }
.serv-card__no { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: var(--blue-text); }
.serv-card__ico { width: 3.25rem; height: 3.25rem; margin-block: 0.5rem 0.15rem; stroke-width: 1.5; }
.serv-card__link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; width: fit-content; margin-top: auto;
  font-weight: 800; font-size: 0.85rem; color: var(--blue-text); text-underline-offset: 4px;
}

.serv-card--shadow-red { box-shadow: var(--flat-md) var(--red); }
@media (hover: hover) { .serv-card--shadow-red:hover { box-shadow: var(--flat-lg) var(--red); } }

.serv-card--red { background: var(--red); color: var(--white); box-shadow: var(--flat-md) var(--navy); }
.serv-card--red .serv-card__no, .serv-card--red p { color: var(--white); }
.serv-card--red .serv-card__ico--xl { width: clamp(5rem, 3rem + 6vw, 8rem); height: clamp(5rem, 3rem + 6vw, 8rem); stroke-width: 1.25; margin-block: auto 0.5rem; }
.serv-card--hero h3 { font-size: clamp(1.9rem, 1rem + 3.2vw, 3.6rem); line-height: 0.95; }
.serv-card--hero p { max-width: 30ch; font-size: var(--text-lede); font-weight: 600; }
@media (hover: hover) { .serv-card--red:hover { box-shadow: var(--flat-lg) var(--navy); } }

.serv-card--navy { background: var(--navy); color: var(--white); box-shadow: var(--flat-md) var(--red); }
.serv-card--navy .serv-card__no { color: var(--blue-soft); }
.serv-card--navy p { color: var(--text-on-dark); }
@media (hover: hover) { .serv-card--navy:hover { box-shadow: var(--flat-lg) var(--red); } }

.serv-card--blue { background: var(--blue-ink); color: var(--white); box-shadow: var(--flat-md) var(--navy); }
.serv-card--blue .serv-card__no, .serv-card--blue p { color: var(--white); }
@media (hover: hover) { .serv-card--blue:hover { box-shadow: var(--flat-lg) var(--navy); } }

.serv-card--photo, .serv-card--chart { padding: 0; flex-direction: column; overflow: clip; }
.serv-card__body { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.serv-card__media { flex: 0 0 11rem; min-height: 11rem; }
.serv-card__bars { --bar: var(--blue); --bar-top: var(--red); width: min(14rem, 100%); height: auto; margin: 0 clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1vw, 2rem); }

@media (min-width: 640px) {
  .serv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serv-card--hero, .serv-card--wide { grid-column: 1 / -1; }
  .serv-card--photo, .serv-card--chart { flex-direction: row; align-items: stretch; }
  .serv-card--photo .serv-card__body, .serv-card--chart .serv-card__body { flex: 1 1 50%; }
  .serv-card__media { flex: 0 0 38%; min-height: 100%; }
  .serv-card__bars { align-self: flex-end; flex: 0 0 38%; width: 38%; max-width: 15rem; margin: 0 var(--pad) var(--pad) 0; }
}
@media (min-width: 1000px) {
  .serv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .serv-card--hero { grid-column: span 2; grid-row: span 2; }
  .serv-card--wide { grid-column: span 2; }
  .serv-card--photo, .serv-card--chart { flex-direction: column; }
  .serv-card--photo .serv-card__media { flex: 0 0 9rem; min-height: 9rem; }
  .serv-card--chart .serv-card__bars { align-self: flex-start; flex: none; width: min(14rem, 70%); margin: 0 var(--pad) var(--pad); }
}
@media (min-width: 1200px) {
  .serv-card--photo, .serv-card--chart { flex-direction: row; }
  .serv-card--photo .serv-card__media { flex: 0 0 38%; min-height: 100%; }
  .serv-card--chart .serv-card__bars { align-self: flex-end; flex: 0 0 38%; width: 38%; margin: 0 var(--pad) var(--pad) 0; }
}

/* ---------- Bento base (P5): casos y contacto ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: var(--pad); border-radius: var(--r-tile); background: var(--white); color: var(--navy);
  overflow: clip; box-shadow: var(--lift);
  transition: translate var(--dur-normal) var(--ease-out);
}
@media (hover: hover) { .tile:hover { translate: 0 -3px; } }
.tile--navy { background: var(--navy); color: var(--white); box-shadow: none; }
.tile--navy p { color: var(--text-on-dark); }
.tile--navy .eyebrow { color: var(--blue-soft); }

/* ---------- Casos con cifras ---------- */
.casos { padding-bottom: calc(var(--section) + 1rem); }
.casos .bento { align-items: stretch; }
.caso { padding: 0; }
.caso__media { flex: 0 0 auto; min-height: 9.5rem; }
.caso__body { display: grid; gap: 0.6rem; align-content: start; padding: var(--pad); flex: 1; }
.caso__body p { color: var(--muted); }
.tile--navy .caso__body p { color: var(--text-on-dark); }
.caso h3 { font-size: 1.3rem; font-weight: 800; }
.caso-1 { grid-column: 1 / 8; grid-row: 1 / 3; border-radius: var(--r-panel) var(--r-tile) var(--r-tile) var(--r-tile); }
.caso-1 .caso__media { flex: 1 1 14rem; min-height: 14rem; }
.caso-2 { grid-column: 8 / 13; border-radius: var(--r-tile) var(--r-tile) 3rem var(--r-tile); }
.caso-3 { grid-column: 8 / 13; border-radius: var(--r-block) var(--r-tile) var(--r-tile) var(--r-tile); }
.caso__metric { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.5rem; padding-top: 0.9rem; border-top: 2px solid var(--line); }
.tile--navy .caso__metric { border-color: var(--hair-dark); }
.caso__body .caso__num { line-height: 0.95; color: var(--navy); }
.caso__figure { font-weight: 900; letter-spacing: -0.04em; font-size: var(--text-fig); color: var(--blue-text); }
.tile--navy .caso__figure { color: var(--blue-soft); }
.caso__unit { font-weight: 800; font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem); text-transform: uppercase; letter-spacing: 0.04em; }
.tile--navy .caso__body .caso__num { color: var(--white); }
.caso__bars { --bar: var(--blue); --bar-top: var(--red); width: clamp(5rem, 22%, 7.5rem); flex: none; }
.tile--navy .caso__bars { --bar: color-mix(in srgb, var(--white) 45%, transparent); --bar-top: var(--white); }

.caso-stats {
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem;
  background: var(--blue-ink); color: var(--white); box-shadow: none;
  border-radius: var(--r-tile) var(--r-tile) var(--r-tile) 4rem;
}
.caso-stats__lead { font-weight: 800; font-size: var(--text-h3); line-height: 1.15; max-width: 16ch; color: var(--white); }
.caso-stats__list { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.caso-stats__list div { display: flex; flex-direction: column-reverse; gap: 0.15rem; max-width: 12rem; }
.caso-stats__num { font-weight: 900; font-size: var(--text-fig); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 1ch; }
.caso-stats__list dt { font-weight: 600; font-size: var(--text-small); }

/* ---------- Producción audiovisual (editorial P2, bloque navy con cortes diagonales) ---------- */
.video {
  position: relative; isolation: isolate; overflow: clip;
  margin-block: calc(var(--cut) * -1);
  padding-block: calc(var(--section) + var(--cut));
  background: var(--navy-deep); color: var(--white);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.video::before { /* grano */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain-light); background-size: 220px 220px; opacity: 0.06;
}
.video__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.video__head { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.video .eyebrow { color: var(--blue-soft); }
.video h2 { color: var(--white); }
.video .ac { color: var(--blue-soft); }
.video__text { max-width: 34ch; font-size: var(--text-lede); color: var(--text-on-dark); }
.video__player { display: grid; gap: 0.9rem; min-width: 0; padding-right: 12px; }
.video__poster {
  aspect-ratio: 16 / 9; border: var(--hard-lg) solid var(--white); border-radius: var(--r-block);
  box-shadow: var(--flat-lg) var(--blue);
}
.video__poster > img { transition: none; }
.video__poster::after { background: radial-gradient(closest-side at 50% 50%, color-mix(in oklab, var(--navy) 30%, transparent) 40%, color-mix(in oklab, var(--night) 70%, transparent) 115%); }
.play {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); aspect-ratio: 1; padding: 0;
  border: 3px solid var(--white); border-radius: 50%;
  background: var(--red); color: var(--white); cursor: not-allowed;
}
.play .i { fill: currentColor; margin-left: 0.2rem; stroke-width: 1.5; }
.video__tag {
  position: absolute; z-index: 3; left: 0.9rem; bottom: 0.9rem; padding: 0.4rem 0.8rem; border-radius: var(--r-pill);
  background: var(--red); color: var(--white); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.video figcaption { font-size: var(--text-small); color: var(--text-on-dark); }
@media (min-width: 900px) {
  .video__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
}

/* ---------- Nuestro Método (línea de progreso de P7, bloques de borde duro de P3) ----------
   Sin position en .met: el bloque de video (positioned) debe seguir pintándose encima en la diagonal. */
.met { overflow: clip; padding-top: calc(var(--section) + var(--cut) * 1.2); background: var(--white); }
.met-head h2 .h2-line { display: block; }

.met-steps { --node: 3.75rem; --seg: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); display: grid; gap: var(--seg); }
.met-step { position: relative; display: flex; flex-direction: column; min-width: 0; padding-left: calc(var(--node) + 1.1rem); }
.met-step::before, .met-step::after { /* tramo de línea hasta el siguiente nodo (vertical en móvil) */
  content: ""; position: absolute; z-index: 0; left: calc(var(--node) / 2 - 2px); top: calc(var(--node) / 2);
  width: 4px; height: calc(100% + var(--seg)); border-radius: 2px;
}
.met-step::before { background: color-mix(in srgb, var(--navy) 16%, transparent); }
.met-step::after { background: var(--blue); transform-origin: top; }
.met-step:last-child::before, .met-step:last-child::after { display: none; }

.met-node {
  position: absolute; z-index: 1; left: 0; top: 0; display: grid; place-items: center;
  width: var(--node); height: var(--node);
  background: var(--navy); color: var(--white);
  border: var(--hard) solid var(--navy); border-radius: var(--r-block);
  box-shadow: 4px 4px 0 var(--blue);
}
.met-node .i { width: 2rem; height: 2rem; stroke-width: 1.5; }
.met-step:nth-child(even) .met-node { box-shadow: 4px 4px 0 var(--red); }

.met-card {
  position: relative; z-index: 1; flex: 1; display: grid; gap: 0.4rem; align-content: start;
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  background: var(--blue-tint); color: var(--navy);
  border: var(--hard-lg) solid var(--navy); border-radius: var(--r-block);
  box-shadow: var(--flat-sm) var(--blue);
  transition: translate var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.met-step:nth-child(even) .met-card { box-shadow: var(--flat-sm) var(--red); }
.met-step:last-child .met-card { background: var(--navy); color: var(--white); box-shadow: var(--flat-sm) var(--red); }
@media (hover: hover) {
  .met-card:hover { translate: -3px -3px; box-shadow: var(--flat-md) var(--blue); }
  .met-step:nth-child(even) .met-card:hover, .met-step:last-child .met-card:hover { box-shadow: var(--flat-md) var(--red); }
}
.met-no { display: block; font-weight: 900; font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.75rem); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--blue-text); }
.met-step:last-child .met-no { color: var(--blue-soft); }
.met-card h3 { font-weight: 900; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.015em; }
.met-card p:not(.met-no) { color: var(--muted); }
.met-step:last-child .met-card p { color: var(--text-on-dark); }

@media (min-width: 900px) {
  .met-steps { --node: 4.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .met-node .i { width: 2.6rem; height: 2.6rem; }
  .met-step { padding-left: 0; padding-top: calc(var(--node) + 1.5rem); }
  .met-step::before, .met-step::after { left: calc(var(--node) / 2); top: calc(var(--node) / 2 - 2px); width: calc(100% + var(--seg)); height: 4px; }
  .met-step::after { transform-origin: left; }
}

/* Contacto */
.contacto { padding-top: var(--section); }
.contacto-bento { grid-template-columns: minmax(0, 1fr); }
.contacto-info { gap: 1.1rem; align-items: flex-start; border-radius: var(--r-panel) var(--r-tile) var(--r-tile) var(--r-tile); }
.contacto-info h2 { color: var(--white); }
.contacto-info .ac { color: var(--blue-soft); }
.contacto-list { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.contacto-list li { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; color: var(--text-on-dark); }
.contacto-form { border-radius: var(--r-tile) var(--r-panel) var(--r-tile) var(--r-tile); }
@media (min-width: 900px) {
  .contacto-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contacto-info { grid-column: 1 / 6; }
  .contacto-form { grid-column: 6 / 13; }
}

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form__note { grid-column: 1 / -1; font-size: var(--text-small); color: var(--muted); }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.85rem; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--navy); font: 400 1rem/1.4 var(--font-main);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--blue) 55%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--blue); background: var(--white); outline-offset: 2px; }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--red); }
.field--check { display: flex; align-items: flex-start; gap: 0.7rem; }
.field--check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.75rem 0 0; accent-color: var(--blue); }
.field--check label { font-weight: 600; font-size: var(--text-small); padding-block: 0.6rem; }
.field--check a { display: inline-block; min-height: 1.5rem; font-weight: 700; color: var(--blue-text); }
.field-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- Pie (P5) ---------- */
.site-footer {
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 1rem;
  background: var(--navy); color: var(--white);
  border-top: var(--hard-lg) solid var(--red);
  overflow: clip;
}
.footer-grid { display: grid; gap: 2rem; }
.footer-brand { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
.logo-plate { display: inline-block; line-height: 0; }
.logo-plate img { width: 160px; height: 62px; }
.footer-lema { margin-top: 0.5rem; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft); }
.footer-desc { color: var(--text-on-dark); }
.footer-title { margin-bottom: 0.5rem; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark); }
.site-footer li { color: var(--text-on-dark); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 4px; }
.social-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.social-link {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid color-mix(in oklab, var(--white) 55%, transparent); border-radius: 50%;
  color: var(--white); text-decoration: none;
  transition: transform var(--dur-normal) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast);
}
.social-link:hover, .social-link:focus-visible { transform: translateY(-3px); background: var(--blue); border-color: var(--blue); }
.social-link:active { transform: translateY(0) scale(0.96); background: var(--red); border-color: var(--red); }
.social-note { margin-top: 0.75rem; font-size: var(--text-small); font-weight: 600; color: var(--blue-soft); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem;
  margin-top: 1.5rem; padding-block: 1rem; border-top: 1px solid var(--hair-dark);
  font-size: var(--text-small); color: var(--text-on-dark);
}
.footer-base a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 4px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Barra fija inferior (móvil) ---------- */
.dock {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: var(--hard) solid var(--navy);
}
@media (min-width: 900px) { .dock { display: none; } body { padding-bottom: 0; } }

/* ---------- Revelado, barras y datos (P5/P4) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js .bars .bar { transform: scaleY(0); }
.js .is-in .bars .bar { transform: scaleY(1); transition: transform 0.9s var(--ease-out) calc(var(--i) * 90ms + 250ms); }

/* Método: la línea se llena tramo a tramo y los nodos se encienden (estado final estático sin JS) */
.js .met-step:not(.is-lit)::after { transform: scaleY(0); }
.js .met-step:not(.is-lit) .met-node { background: var(--white); color: var(--muted); border-color: color-mix(in srgb, var(--navy) 30%, transparent); box-shadow: none; transform: scale(0.86); }
.js .met-step.is-lit::after { transform: none; transition: transform 0.55s var(--ease-out) calc(var(--d, 0s) + 0.25s); }
.js .met-step.is-lit .met-node {
  transition: transform 0.6s var(--ease-out) var(--d, 0s), background-color 0.4s var(--d, 0s), color 0.4s var(--d, 0s), border-color 0.4s var(--d, 0s), box-shadow 0.4s var(--d, 0s);
}
@media (min-width: 900px) {
  .js .met-step:not(.is-lit)::after { transform: scaleX(0); }
}

/* ---------- Responsive fino ---------- */
@media (max-width: 1000px) {
  .caso-1, .caso-2, .caso-3 { grid-column: span 6; grid-row: auto; }
  .caso-1 { grid-column: 1 / -1; }
  .caso-1 .caso__media { flex-basis: 12rem; min-height: 12rem; }
}
@media (max-width: 760px) {
  .caso-2, .caso-3 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .form .field, .form__note { grid-column: 1 / -1; }
  .actions .btn { flex: 1 1 100%; }
  .contacto-info .btn { width: 100%; }
  .hero__index ol { gap: 0 1.25rem; }
}
@media (max-width: 360px) {
  .brand img { width: 108px; height: 44px; }
  .hero__panel { padding-inline: 1rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .js .bars .bar { transform: none; }
  .js .met-step:not(.is-lit)::after { transform: none; }
  .js .met-step:not(.is-lit) .met-node { background: var(--navy); color: var(--white); border-color: var(--navy); box-shadow: 4px 4px 0 var(--blue); transform: none; }
  .js .met-step:nth-child(even):not(.is-lit) .met-node { box-shadow: 4px 4px 0 var(--red); }
  .quien-visual { position: relative !important; top: auto !important; height: clamp(14rem, 50vw, 24rem) !important; max-height: none !important; }
  .quien-layer, .quien-layer--photo, .hero__media .duo, .hero__glow, .hero__slab { transform: none !important; will-change: auto; }
  .quien-layer--photo { inset: 0; }
  .js .quien-cap:not([data-i="1"]) { display: none; }
  .js .quien-cap[data-i="1"] { opacity: 1; transform: none; }
  .quien-item.is-active .quien-block, .tile:hover, .serv-card:hover, .met-card:hover { translate: none; }
  .social-link:hover, .social-link:focus-visible { transform: none; }
  .main-nav.is-open { animation: none; }
}