/* Coriva, home. Palette sampled from the official isotipo: steel, silver, mist. */

:root {
  --bg: #FFFFFF;
  --bg-2: #F4F8FB;
  --surface: #FFFFFF;
  --shell: rgba(94, 122, 143, .06);
  --ink: #44586F;
  --ink-2: #56697F;
  --ink-3: #607489;
  --line: rgba(94, 122, 143, .16);
  --line-strong: rgba(94, 122, 143, .28);
  --steel-1: #F1F6FA;
  --steel-2: #E1EAF2;
  --steel-3: #BFD2E1;
  --steel-4: #8FA8BD;
  --steel-5: #5E7A8F;
  --ice: #BFD8EA;
  --ice-soft: #EAF2F8;
  --accent: #4F6A82;
  --accent-fill: linear-gradient(180deg, #607C96 0%, #4B6680 100%);
  --on-accent: #FFFFFF;
  --chip-on-bg: #EAF1F8;
  --chip-on-fg: #243A52;
  --hero-sky: #F2F6FA;
  --hero-sky-grad: linear-gradient(180deg, #C1D6EB 0%, #D4E4F2 26%, #E4EEF6 48%, #F1EFEC 66%, #F2F5F8 100%);
  --sky-tint: rgba(84, 144, 204, .55);
  --hero-ink-2: #4A5D74;
  --cta-grad: linear-gradient(125deg, #CFE1F1 0%, #E4EEF8 50%, #F5F9FC 100%);
  --photo-ink: #2E4158;
  --photo-ink-2: #34485E;
  --accent-2: #6B87A1;
  --accent-2-soft: #EAF1F8;
  --accent-2-fill: linear-gradient(160deg, #FFFFFF 0%, #E3ECF5 100%);
  --btn-bg: #FFFFFF;
  --btn-fg: #243A52;
  --btn-ring: rgba(68, 88, 111, .14);
  --arrow-bg: #EAF1F8;
  --arrow-fg: #5E7A8F;
  --icon-fg: #5E7A8F;
  --tile-ring: rgba(94, 122, 143, .2);
  --hero-glow: rgba(255, 255, 255, .45);
  --hero-chip-bg: rgba(255, 255, 255, .45);
  --hero-chip-edge: rgba(255, 255, 255, .7);
  --hero-photo-filter: saturate(1.28) contrast(1.05) brightness(1.02);
  --hero-photo-opacity: 1;
  --net-opacity: .75;
  --net-edge: rgba(79, 94, 117, .5);
  --photo-soft: none;
  --glass: rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-edge: rgba(255, 255, 255, .9);
  --digital-a: #F3F8FC;
  --digital-b: #D6E6F2;
  --viz-card: rgba(255, 255, 255, .95);
  --danger: #A3322B;
  --danger-bg: #FBEDEC;
  --success: #1F8A55;
  --success-bg: #E3F4EA;
  --ok-solid: #4A9E77;
  --primary-bg: linear-gradient(180deg, #6F8BA5 0%, #52708A 100%);
  --primary-fg: #FFFFFF;
  --primary-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 26px -12px rgba(46, 70, 96, .6);
  --contact-grad: radial-gradient(60% 70% at 18% 24%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #EEF4FA 0%, #DDE9F5 42%, #C6D9EC 100%);
  --contact-ink: #2A3D53;
  --contact-ink-2: #3D5168;
  --contact-chip: rgba(255, 255, 255, .72);
  --ok-halo: rgba(74, 158, 119, .14);
  --shadow-sm: 0 1px 2px rgba(68, 88, 111, .06);
  --shadow-md: 0 1px 2px rgba(68, 88, 111, .05), 0 14px 36px -14px rgba(68, 88, 111, .2);
  --shadow-lg: 0 2px 4px rgba(68, 88, 111, .05), 0 28px 60px -24px rgba(68, 88, 111, .28);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.3rem, 1.1rem + 2.5vw, 3.7rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.08rem + .3vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  --r-card: 28px;
  --r-bezel: 6px;
  --r-inner: calc(var(--r-card) - var(--r-bezel));
  --r-input: 14px;
  --r-pill: 999px;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --nav-h: 60px;
  --section-y: clamp(5rem, 3rem + 7vw, 9rem);

  /* Emil Kowalski's curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --z-menu: 19;
  --z-nav: 20;
  --z-skip: 30;

  color-scheme: light;
}

/* Light only: the brand is always shown on white */

/* ---------- Base ---------- */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 40px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: var(--z-skip);
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.section-title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.section-lede {
  max-width: 62rem;
  margin-top: 1.1rem;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.btn {
  --pad: .45rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 52px;
  padding: var(--pad) var(--pad) var(--pad) 1.4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--btn-ring), var(--shadow-md);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }

.btn-chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--arrow-bg);
  color: var(--arrow-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring);
  transition: transform 220ms var(--ease-out), background-color 200ms ease;
}
.btn-chip .icon { width: 17px; height: 17px; }

.btn-label {
  transition: opacity 200ms ease, filter 200ms ease;
}

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding-inline: .25rem;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease;
}
.link-quiet .icon { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: inset 0 0 0 1px var(--btn-ring), var(--shadow-lg); }
  .btn:hover .btn-chip { background: color-mix(in srgb, var(--arrow-bg) 70%, var(--steel-3)); }
  .btn:hover .btn-chip { transform: translate(2px, -1px) scale(1.05); }
  .link-quiet:hover { color: var(--ink-2); }
  .link-quiet:hover .icon { transform: translateX(3px); }
}

/* ---------- Navigation (floating glass island) ---------- */

.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 32px;
  pointer-events: none;
}

.nav {
  position: fixed;
  z-index: var(--z-nav);
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  width: min(calc(100% - var(--gutter) * 2), 1120px);
  transform: translateX(-50%);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--nav-h);
  padding-inline: 1.1rem .4rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-sm);
  transition: background-color 250ms ease, box-shadow 250ms ease;
}

.nav[data-scrolled="true"] .nav-bar {
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 36px; height: 36px; }
.wordmark { width: 92px; height: auto; aspect-ratio: 1706 / 259; fill: currentColor; }

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .9rem;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: var(--shell); }
}

.nav .btn { min-height: 46px; --pad: .35rem; padding-left: 1.15rem; font-size: .88rem; box-shadow: inset 0 0 0 1px var(--btn-ring), 0 4px 12px -6px rgba(68, 88, 111, .25); }
.nav .btn-chip { width: 34px; height: 34px; }

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--shell);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.nav-toggle:active { transform: scale(0.95); }

.nav-toggle span {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 300ms var(--ease-in-out);
}
.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 25px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav-menu {
  position: absolute;
  z-index: var(--z-menu);
  top: calc(100% + 10px);
  right: 0;
  width: min(100%, 340px);
  padding: .6rem;
  border-radius: 24px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-lg);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.96) translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms var(--ease-out), visibility 0s linear 150ms;
}

.nav-menu[data-open="true"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
}

.nav-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-inline: 1rem;
  border-radius: 16px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms var(--ease-out), background-color 200ms ease;
}
.nav-menu a .icon { width: 18px; height: 18px; color: var(--ink-3); }
.nav-menu a:not(.btn):active { background: var(--shell); }

.nav-menu[data-open="true"] a {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), background-color 200ms ease;
  transition-delay: calc(40ms + var(--i, 0) * 40ms);
}

.nav-menu a.btn {
  width: 100%;
  justify-content: space-between;
  margin-top: .4rem;
  padding-left: 1.2rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-ring);
}
.nav-menu .btn .icon { color: inherit; }

@media (max-width: 860px) {
  .nav-links, .nav-bar > .btn { display: none; }
  .nav-toggle { display: block; }
}

@media (min-width: 861px) {
  .nav-menu { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) 0;
}

.hero-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: clamp(640px, calc(100svh - 20px), 980px);
  max-width: 1720px;
  margin-inline: auto;
  border-radius: 32px;
  background:
    radial-gradient(55% 50% at 74% 36%, var(--hero-glow) 0%, transparent 70%),
    var(--hero-sky-grad);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hero-photo {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  z-index: -2;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sky-tint) 70%, transparent) 22%, var(--sky-tint) 34%, color-mix(in srgb, var(--sky-tint) 40%, transparent) 48%, transparent 62%);
  mix-blend-mode: color;
  pointer-events: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  filter: var(--hero-photo-filter);
  opacity: var(--hero-photo-opacity);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(2rem, 5svh, 4rem)) clamp(1.5rem, 1rem + 3.5vw, 4.5rem) clamp(5rem, 15svh, 10rem);
}

.hero-content { container-type: inline-size; }

.hero h1 {
  margin-top: 1.4rem;
  font-size: min(var(--fs-display), calc(100cqi / var(--h1-fit, 10.6)));
  line-height: 1.08;
  letter-spacing: -.03em;
}

.hero h1 .line { display: block; white-space: nowrap; }
.hero .eyebrow { color: var(--ink); background: var(--hero-chip-bg); box-shadow: inset 0 0 0 1px var(--hero-chip-edge); }

.hero-sub {
  max-width: 32rem;
  margin-top: 1.4rem;
  color: var(--hero-ink-2);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.12rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2.2rem;
}


/* Data network over the landscape photos (same geometry as the photo, anchored bottom) */
.hero-net {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}

.net {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--net-opacity);
}

.net-line { fill: none; stroke: #FFFFFF; stroke-width: 1; opacity: .3; }
.net-pin { stroke: #FFFFFF; stroke-width: 1; opacity: .16; }
.net-halo { fill: #FFFFFF; opacity: .1; }
.net-ring { fill: none; stroke: #FFFFFF; stroke-width: 1; opacity: .28; }
.net-dot { fill: #FFFFFF; opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
  .hero-net { animation: viz-fade 1400ms ease both 600ms; }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding-bottom: clamp(6rem, 20vw, 9rem);
  }
  .hero-art { max-width: 540px; }
  .hero-photo, .hero-net { height: 30%; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .hero h1 .line { white-space: normal; }
  .hero-frame { border-radius: 24px; }
  .hero-grid { padding-inline: 1.25rem; gap: 2.75rem; }
}

/* ---------- Hero illustration: one hero object (the report), the site behind, a review badge ---------- */

.hero-art { margin: 0; }

.viz {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-inline: auto 0;
  aspect-ratio: 580 / 515;
  container-type: inline-size;
}

.viz-card {
  position: absolute;
  font-size: clamp(10px, 2.15cqw, 12.5px);
  border-radius: max(14px, 3.4cqw);
  background: var(--viz-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg);
}

/* Back layer: the client's site, peeking out top-right */
.viz-site {
  top: 0;
  right: 0;
  width: 64%;
  overflow: hidden;
  transform-origin: top right;
}

.viz-chrome {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .9em 1.2em;
  border-bottom: 1px solid var(--line);
}
.viz-chrome i { width: .62em; height: .62em; border-radius: 50%; background: var(--steel-2); }
.viz-url {
  margin-left: .6em;
  padding: .22em .85em;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-3);
  font-size: .92em;
}

.viz-site-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4em;
  align-items: center;
  padding: 1.1em 1.4em 5.5em;
}
.viz-site-nav {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: 1em 1.4em 0;
}
.viz-site-nav i { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--steel-3); }
.viz-site-nav b { width: 2.6em; height: .5em; border-radius: 3px; background: var(--steel-2); }
.viz-site-nav b:first-of-type { margin-left: auto; }
.viz-site-nav b:last-of-type { width: 3.2em; height: 1.2em; border-radius: var(--r-pill); background: var(--steel-3); }

.viz-sk { display: block; height: .62em; border-radius: 3px; background: var(--steel-2); }
.viz-sk + .viz-sk { margin-top: .55em; }
.viz-sk.h1 { width: 94%; height: .95em; background: var(--steel-3); }
.viz-sk.h2 { width: 70%; height: .95em; background: var(--steel-3); }
.viz-sk.h2 + .viz-sk { margin-top: .9em; }
.viz-sk.p { width: 86%; }
.viz-sk.short { width: 60%; }
.viz-sk-btn { display: block; width: 52%; height: 1.55em; margin-top: 1.1em; border-radius: var(--r-pill); background: var(--steel-3); }
.viz-site-img { aspect-ratio: 1 / .9; border-radius: .8em; overflow: hidden; background: var(--steel-2); }
.viz-site-img img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 62%; filter: var(--hero-photo-filter); }

/* Front layer: the report is the protagonist */
.viz-report {
  left: 0;
  top: 22%;
  width: 72%;
  padding: 1.7em 1.8em 1.5em;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), 0 2px 4px rgba(79, 94, 117, .05), 0 40px 80px -30px rgba(68, 88, 111, .32);
  transform-origin: bottom left;
}

.viz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  color: var(--ink-3);
  font-size: .92em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.viz-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .75em .3em .6em;
  border-radius: var(--r-pill);
  background: var(--ice-soft);
  color: var(--ink-2);
  letter-spacing: .02em;
  text-transform: none;
}
.viz-pill .icon { width: 1.1em; height: 1.1em; }

.viz-kpi {
  display: flex;
  align-items: baseline;
  gap: .08em;
  margin-top: .55em;
  color: var(--ink);
  font-size: max(40px, 11.5cqw);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.viz-kpi small { font-size: .42em; letter-spacing: 0; color: var(--ink-2); }

.viz-caption { margin-top: .5em; color: var(--ink-2); font-size: 1.12em; line-height: 1.45; }

.viz-chart { display: block; width: 100%; height: auto; margin-top: 1.4em; color: var(--steel-4); overflow: visible; }
.viz-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.viz-grid--base { stroke-dasharray: none; }
.viz-line { fill: none; stroke: var(--steel-5); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.viz-end { fill: var(--steel-5); stroke: var(--surface); stroke-width: 2; }
.viz-end-ring { fill: var(--steel-5); opacity: .16; }
.viz-end, .viz-end-ring { transform-box: fill-box; transform-origin: center; }

.viz-months {
  display: flex;
  justify-content: space-between;
  margin-top: .6em;
  padding-inline: .1em;
  color: var(--ink-3);
  font-size: .85em;
}

/* Badge: AI plus a human check, the core promise */
.viz-badge {
  position: absolute;
  right: 4%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em 1em .55em .55em;
  border-radius: var(--r-pill);
  background: var(--viz-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg);
  color: var(--ink);
  font-size: clamp(10.5px, 2.3cqw, 13px);
  font-weight: 500;
  white-space: nowrap;
  transform-origin: left center;
}
.viz-badge img { width: 2.1em; height: 2.1em; }
.viz-ok {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.viz-ok .icon { width: 1em; height: 1em; }
.viz-pill .viz-ok-icon { color: var(--success); }

.viz-card, .viz-badge { transition: box-shadow 300ms ease; }
.viz-card.is-lifted { box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), 0 2px 6px rgba(68, 88, 111, .06), 0 48px 90px -30px rgba(68, 88, 111, .4); }
.viz { transform-style: preserve-3d; will-change: transform; }
.viz::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 8%;
  bottom: -3%;
  height: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 56, 78, .22), transparent);
  filter: blur(12px);
  pointer-events: none;
}

@container (max-width: 420px) {
  .viz-site-body { grid-template-columns: 1fr; }
  .viz-site-img { display: none; }
}

@media (max-width: 560px) {
  .viz { aspect-ratio: auto; padding-top: 16%; }
  .viz-site { width: 70%; }
  .viz-report { position: relative; top: auto; width: 90%; }
  .viz-badge { position: relative; right: auto; bottom: auto; width: fit-content; margin: 14px 0 0 auto; }
}

@keyframes viz-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes viz-back { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes viz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes viz-fade { from { opacity: 0; } }
@keyframes viz-dot { from { opacity: 0; transform: scale(.4); } }
@keyframes viz-badge { from { opacity: 0; transform: translateX(-10px) scale(.96); } }

@media (prefers-reduced-motion: no-preference) {
  .viz-site { animation: viz-back 700ms var(--ease-out) both 250ms; }
  .viz-report { animation: viz-rise 750ms var(--ease-out) both 420ms; }
  .viz-line { stroke-dasharray: 1; animation: viz-draw 1100ms var(--ease-in-out) both 800ms; }
  .viz-area { animation: viz-fade 700ms ease both 1500ms; }
  .viz-end, .viz-end-ring { animation: viz-dot 400ms var(--ease-out) both 1850ms; }
  .viz-badge { animation: viz-badge 550ms var(--ease-out) both 2050ms; }
}

/* ---------- Services (asymmetric pair) ---------- */

.services { padding-block: var(--section-y) calc(var(--section-y) * .6); }

.services-head { max-width: 72rem; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.bezel {
  padding: var(--r-bezel);
  border-radius: var(--r-card);
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--line);
}

.bezel-core {
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: var(--inner-hi), var(--shadow-sm);
}

.service {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.service:active { transform: scale(0.99); }

.service .bezel-core {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: box-shadow 300ms ease;
}

.service-media {
  position: relative;
  height: clamp(220px, 20vw, 300px);
  overflow: hidden;
  background: var(--ice-soft);
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  filter: var(--photo-soft);
  transition: transform 700ms var(--ease-out);
}

.service-media--digital {
  background: linear-gradient(155deg, var(--digital-a) 0%, var(--digital-b) 100%);
}

.service-media--digital img {
  position: absolute;
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  right: -14%;
  top: 50%;
  object-fit: contain;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 900ms var(--ease-out);
}

.service-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.service h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.015em;
  line-height: 1.25;
}

.service p { color: var(--ink-2); max-width: 52ch; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: .8rem;
  font-weight: 500;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .95rem;
  font-weight: 500;
}

.service-link .btn-chip {
  width: 36px;
  height: 36px;
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .service:hover .bezel-core { box-shadow: var(--inner-hi), var(--shadow-lg); }
  .service:hover .service-media img { transform: scale(1.03); }
  .service:hover .service-media--digital img { transform: translateY(-50%) rotate(14deg); }
  .service:hover .service-link .btn-chip { transform: translate(2px, -1px) scale(1.05); }
}

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

/* ---------- Principles: copy + tall landscape ---------- */

.principles { padding-block: calc(var(--section-y) * .6) var(--section-y); }

.principles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: stretch;
}

.principle-list {
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.75rem;
}

.principle + .principle { border-top: 1px solid var(--line); }

.principle-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-2-fill);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring), 0 8px 18px -12px rgba(68, 88, 111, .35);
}
.principle-icon .icon { width: 24px; height: 24px; }

.principle h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.015em;
  line-height: 1.3;
}

.principle p { margin-top: .5rem; color: var(--ink-2); max-width: 46ch; }

.principles-photo {
  position: relative;
  margin: 0;
  min-height: 520px;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.principles-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 50%;
  filter: var(--photo-soft);
}

@media (max-width: 860px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principles-photo { min-height: 0; aspect-ratio: 16 / 11; order: -1; }
}

/* ---------- Process: frozen-lake banner + timeline card ---------- */

.process { padding-block: 0 calc(var(--section-y) * .45); }

.process-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1720px;
  min-height: clamp(420px, 40vw, 600px);
  margin-inline: var(--gutter);
  border-radius: 32px;
  background: #AECBE7;
}

@media (min-width: 1800px) {
  .process-banner { margin-inline: auto; }
}

.process-photo { position: absolute; inset: 0; z-index: -1; }
.process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: var(--photo-soft);
}

.process-banner {
  --tone-ink: #2A3D53;
  --tone-ink-2: #33475D;
  --tone-scrim: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .38) 32%, rgba(255, 255, 255, 0) 62%);
  --tone-shadow: none;
}
.process-banner[data-tone="dark"] {
  --tone-ink: #F6F9FC;
  --tone-ink-2: #DCE5EE;
  --tone-scrim: linear-gradient(180deg, rgba(11, 19, 30, .66) 0%, rgba(11, 19, 30, .4) 32%, rgba(11, 19, 30, 0) 64%);
  --tone-shadow: 0 1px 14px rgba(8, 14, 24, .35);
}
.process-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tone-scrim);
  pointer-events: none;
}

.process-head {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--tone-ink);
  text-shadow: var(--tone-shadow);
  transition: color 200ms ease;
}
.process-head .section-lede { color: var(--tone-ink-2); transition: color 200ms ease; }

.process-card {
  position: relative;
  margin-top: calc(-1 * clamp(7rem, 4rem + 8vw, 11rem));
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 6px rgba(68, 88, 111, .05), 0 40px 80px -30px rgba(46, 65, 88, .35);
}

/* Steps: a segmented progress bar, one segment per step, filling in order */
.steps {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 2.25rem clamp(1.25rem, .5rem + 2vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps[data-n="5"] { --n: 5; }
.steps[data-n="6"] { --n: 3; row-gap: 2.75rem; }

.step {
  position: relative;
  counter-increment: step;
  padding-top: 1.75rem;
}

.step::before,
.step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
}
.step::before { background: var(--steel-2); }
.step::after {
  background: linear-gradient(90deg, var(--steel-3) 0%, var(--steel-5) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.steps.is-active .step::after {
  transform: scaleX(1);
  transition: transform 700ms var(--ease-in-out);
  transition-delay: calc(150ms + var(--i, 0) * 220ms);
}

.step-head { display: flex; align-items: center; gap: .85rem; }

.step-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-2-fill);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring), 0 8px 18px -12px rgba(68, 88, 111, .35);
}
.step-icon .icon { width: 22px; height: 22px; }



.step h3 {
  margin-top: 1.25rem;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-wrap: balance;
}

.step p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 1100px) {
  .steps[data-n="5"] { --n: 3; row-gap: 2.75rem; }
}

@media (max-width: 860px) {
  .steps, .steps[data-n] { --n: 1; grid-template-columns: 1fr; row-gap: 2rem; }
  .process-banner { min-height: 380px; }
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  padding-block: var(--section-y) calc(var(--section-y) * 1.1);
  overflow: hidden;
}

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}

.contact-intro .section-title { margin-top: 1.4rem; }

.need-group { margin: 2.25rem 0 0; padding: 0; border: 0; }

.need-group legend {
  margin-bottom: .9rem;
  padding: 0;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem 1rem .5rem .8rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.chip:active { transform: scale(0.97); }

.chip-glyph {
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
}

.chip-glyph .icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity 150ms ease, transform 150ms var(--ease-out);
}

.chip-glyph .icon-check { opacity: 0; transform: scale(.7); }

.chip[aria-pressed="true"] {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
  box-shadow: inset 0 0 0 1.5px var(--steel-4), var(--shadow-sm);
}
.chip[aria-pressed="true"] .icon-kind { opacity: 0; transform: scale(.7); }
.chip[aria-pressed="true"] .icon-check { opacity: 1; transform: none; color: var(--icon-fg); }

@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
}

.form-card .bezel-core {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--inner-hi), var(--shadow-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
}

.field { display: grid; gap: .45rem; align-content: start; }
.field--full { grid-column: 1 / -1; }

.field label {
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
}

.field label .optional { color: var(--ink-3); font-weight: 400; }

.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: .8rem 1rem;
  border: 0;
  border-radius: var(--r-input);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}

.field textarea { min-height: 128px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: 1; }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--ice) 55%, transparent);
}

.field [aria-invalid="true"],
.field [aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
}

.field-error {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--danger);
  font-size: .82rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.field-error .icon { width: 15px; height: 15px; }
.field-error:empty { display: none; }
.field-error.is-shown { opacity: 1; transform: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  border-radius: var(--r-input);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: .9rem;
  font-weight: 500;
}
.form-alert .icon { margin-top: .15rem; width: 18px; height: 18px; }

.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.submit-note { color: var(--ink-3); font-size: .85rem; }

.btn[data-state="loading"] { pointer-events: none; }
.btn[data-state="loading"] .btn-label { opacity: .55; filter: blur(1.5px); }
.btn[data-state="loading"] .btn-chip .icon { animation: nudge 900ms var(--ease-in-out) infinite alternate; }

@keyframes nudge {
  to { transform: translateX(3px); }
}

.form-view,
.success-view {
  transition: opacity 220ms ease, filter 220ms ease, transform 280ms var(--ease-out);
}

.form-view.is-leaving { opacity: 0; filter: blur(4px); }

.success-view {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding-block: 1.5rem;
}

.success-view.is-entering { opacity: 0; transform: scale(0.98); filter: blur(4px); }

.success-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ice-soft);
  color: var(--ink);
}
.success-mark .icon { width: 26px; height: 26px; }

.success-view h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.success-view h3:focus { outline: none; }
.success-view p { color: var(--ink-2); max-width: 44ch; }

.btn-secondary {
  background: var(--shell);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  padding-inline: 1.2rem;
}
.btn-secondary .icon { width: 17px; height: 17px; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid > * { min-width: 0; }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .submit-row .btn { width: 100%; justify-content: space-between; }
}

/* ---------- Footer ---------- */

.footer { padding-block: 3rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.footer-brand { display: grid; gap: .6rem; }
.footer-brand { gap: .45rem; }
.footer-brand .wordmark { width: 78px; color: var(--ink-2); }
.footer-brand span { color: var(--ink-3); font-size: .78rem; letter-spacing: .02em; }

.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--ink); }
}

.footer-meta { margin-top: 2rem; color: var(--ink-3); font-size: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-meta p { margin: 0; }
.footer-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.4rem; }
.footer-socials a { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; color: var(--ink-2); font-weight: 500; font-size: .85rem; text-decoration: none; }
.footer-meta .footer-socials a { text-decoration: none; }
.footer-socials img { border-radius: 7px; }
.footer-socials img { display: block; width: 26px; height: 26px; transition: transform 200ms var(--ease-out); }
.footer-socials a:active img { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .footer-socials a:hover { color: var(--ink); }
  .footer-socials a:hover img { transform: scale(1.08); }
}
@media (max-width: 640px) {
  .footer-meta { flex-direction: column-reverse; gap: .75rem; }
}

/* ---------- Motion: entrance + scroll reveal ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes settle {
  from { transform: scale(1.06); }
}

@keyframes fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero [data-enter] {
    animation: rise 700ms var(--ease-out) both;
    animation-delay: calc(120ms + var(--i, 0) * 70ms);
  }
  .hero-photo img { animation: settle 1800ms var(--ease-out) both; }

  .js .reveal {
    transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-pending { opacity: 0; transform: translateY(18px); }

  .js .reveal .service-media {
    transition: clip-path 900ms var(--ease-in-out);
    transition-delay: calc(120ms + var(--i, 0) * 70ms);
  }
  .js .reveal.is-pending .service-media { clip-path: inset(0 0 100% 0 round 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero [data-enter] { animation: fade 300ms ease both; }
  .js .reveal { transition: opacity 300ms ease; }
  .js .reveal.is-pending { opacity: 0; }
  .steps.is-active .step::after { transition: none; }
  .btn[data-state="loading"] .btn-chip .icon { animation: none; }
  .success-view.is-entering { transform: none; filter: none; }
  .form-view.is-leaving { filter: none; }
  .nav-menu, .nav-menu[data-open="true"], .nav-menu a, .nav-menu[data-open="true"] a { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-bar, .nav-menu {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: color-mix(in srgb, var(--ink) 38%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 62%, transparent);
  }
  .nav-bar, .nav-menu { background: var(--surface); }
}

/* =====================================================================
   Inner pages: services + contact
   ===================================================================== */

.nav-links a[aria-current="page"] { background: var(--shell); box-shadow: inset 0 0 0 1px var(--line); }

@media (min-width: 961px) {
  .hero--page .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (min-width: 641px) {
  .hero--page h1 { font-size: min(var(--fs-display), calc(100cqi / var(--h1-fit, 10.6))); }
}

/* Data page illustration: a spreadsheet behind, segments in front */
.viz-sheet .viz-file-head {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.2em;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .92em;
}
.viz-sheet .viz-file-head .icon { width: 1.4em; height: 1.4em; color: var(--icon-fg); }
.viz-grid-sheet {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: .45em .5em;
  padding: 1.1em 1.2em 6em;
}
.viz-grid-sheet span { height: .6em; border-radius: 2px; background: var(--steel-2); }
.viz-grid-sheet .hd { background: var(--steel-3); }
.viz-grid-sheet .hl { background: var(--accent-2); opacity: .55; }

.viz-hbars { display: grid; gap: .85em; margin-top: 1.5em; }
.viz-hbar { display: grid; grid-template-columns: 6.5em 1fr 2.6em; align-items: center; gap: .8em; font-size: .95em; color: var(--ink-2); }
.viz-hbar b { font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.viz-hbar i { display: block; height: .75em; border-radius: 999px; background: var(--steel-2); overflow: hidden; }
.viz-hbar i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel-3) 0%, var(--steel-4) 100%);
  transform-origin: left center;
}
.viz-hbar:nth-child(2) i::before { opacity: .72; }
.viz-hbar:nth-child(3) i::before { opacity: .48; }

/* Digital page illustration: a browser in front, the phone version behind */
.viz-browser { width: 78%; top: 20%; padding: 0; overflow: hidden; }
.viz-browser-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.3em;
  align-items: center;
  padding: 1.4em 1.5em 1.7em;
}
.viz-browser-hero .viz-site-img { aspect-ratio: 1 / .95; }
.viz-phone {
  top: 0;
  right: 2%;
  width: 29%;
  aspect-ratio: 9 / 17.5;
  padding: .6em;
  border-radius: max(18px, 4.4cqw);
  overflow: hidden;
}
.viz-phone-screen {
  height: 100%;
  border-radius: max(12px, 3.2cqw);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.viz-phone-notch { width: 34%; height: .55em; margin: .55em auto .7em; border-radius: 999px; background: var(--steel-2); }
.viz-phone-img { height: 38%; margin-inline: .7em; border-radius: .7em; overflow: hidden; }
.viz-phone-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--hero-photo-filter); }
.viz-phone-body { padding: .9em .8em; }
.viz-phone-body .viz-sk + .viz-sk { margin-top: .45em; }

@keyframes viz-grow-x { from { transform: scaleX(.05); } }
@media (prefers-reduced-motion: no-preference) {
  .viz-hbar i::before { animation: viz-grow-x 900ms var(--ease-out) both; animation-delay: calc(1000ms + var(--i, 0) * 120ms); }
  .viz-phone { animation: viz-back 700ms var(--ease-out) both 250ms; }
  .viz-browser { animation: viz-rise 750ms var(--ease-out) both 420ms; }
}

@media (max-width: 560px) {
  .viz-browser { position: relative; top: auto; width: 88%; }
  .viz-phone { width: 34%; }
}

/* Problems: what is going wrong today */
.problems { padding-block: var(--section-y) calc(var(--section-y) * .5); }
.problems-head { max-width: 72rem; }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.problem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}

.problem-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-2-soft);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring);
}
.problem-icon .icon { width: 24px; height: 24px; }
.problem h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.3; }
.problem p { margin-top: .45rem; color: var(--ink-2); }

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

/* Offer: the two services on the page */
.offer { padding-block: calc(var(--section-y) * .5) var(--section-y); }
.offer-head { max-width: 72rem; }

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.offer-card .bezel-core {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.offer-visual {
  position: relative;
  height: clamp(150px, 13vw, 190px);
  overflow: hidden;
}
.offer-visual img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-soft); }
.offer-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 35%, transparent) 100%);
}
.offer-badge {
  position: absolute;
  left: 1.5rem;
  bottom: -26px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--accent-2-fill);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring), 0 8px 18px -12px rgba(68, 88, 111, .35);
}
.offer-badge .icon { width: 26px; height: 26px; }

.offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.4rem);
}
.offer-card .offer-badge { position: static; margin-bottom: .35rem; }
.offer-card .bezel-core { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2-soft) 55%, var(--surface)) 0%, var(--surface) 38%); }
.offer-body h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.25; }
.offer-body > p { color: var(--ink-2); max-width: 52ch; }

.check-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--ink); font-size: .98rem; }
.check-list .viz-ok { width: 22px; height: 22px; margin-top: .1rem; font-size: 14px; }
.check-list .viz-ok .icon { width: 14px; height: 14px; }

.offer-card .service-link { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .offer-card:hover .offer-visual img { transform: scale(1.03); }
  .offer-card:hover .service-link .btn-chip { transform: translate(2px, -1px) scale(1.05); }
}
.offer-visual img { transition: transform 700ms var(--ease-out); }

.info-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: var(--accent-2-soft);
  color: var(--ink);
}
.info-note .icon { width: 22px; height: 22px; margin-top: .1rem; color: var(--icon-fg); }
.info-note p { max-width: 80ch; color: var(--ink-2); }

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

/* Closing band */
.cta-band { padding-block: 0 var(--section-y); }

.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 2rem 3rem;
  align-items: center;
  min-height: clamp(240px, 22vw, 320px);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 4vw, 4.5rem);
  border-radius: 32px;
  background:
    radial-gradient(50% 80% at 85% 20%, var(--hero-glow) 0%, transparent 70%),
    var(--cta-grad);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cta-panel h2 { color: var(--photo-ink); }
.cta-panel .section-lede { color: var(--hero-ink-2); }

@media (max-width: 760px) {
  .cta-panel { grid-template-columns: 1fr; }
}

/* Contact page: the whole first screen is the conversation */
.hero--contact .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding-bottom: clamp(8rem, 18svh, 12rem); }
.hero--contact .contact-intro .section-lede { color: var(--hero-ink-2); }
.hero--contact .chip:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--surface) 80%, transparent); }
@media (max-width: 960px) {
  .hero--contact .hero-grid { grid-template-columns: 1fr; }
}
.viz:has(.viz-sheet) { aspect-ratio: 580 / 472; }
.viz:has(.viz-browser) { aspect-ratio: 580 / 438; }
.js .reveal.process-head { transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out), color 200ms ease; }

/* Short copy blocks share their words evenly across lines instead of leaving a word alone */
.hero-sub,
.problem p,
.principle p,
.offer-body > p,
.step p,
.info-note p,
.check-list span,
.viz-caption { text-wrap: balance; }

/* ---------- Hero: light veil so the copy never sits on busy photo detail ---------- */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(64% 74% at 20% 46%,
      color-mix(in srgb, var(--hero-sky) 96%, transparent) 0%,
      color-mix(in srgb, var(--hero-sky) 82%, transparent) 44%,
      transparent 78%);
}
.hero .hero-sub { color: var(--hero-ink-2); }
.hero .link-quiet { color: var(--ink); }

/* ---------- Home illustration: a two-card deck that takes turns in front ---------- */
.viz--swap { aspect-ratio: 580 / 520; max-width: 620px; }

.viz--swap .swap-card {
  position: absolute;
  left: 0;
  top: 17%;
  width: 80%;
  aspect-ratio: 1.16;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transform-origin: 50% 50%;
  transition:
    transform 800ms var(--ease-in-out),
    box-shadow 500ms ease,
    z-index 0s linear 400ms;
}

.viz--swap .swap-card.is-front { z-index: 2; transform: none; }
.viz--swap .swap-card.is-back { z-index: 1; transform: translate(21%, -18%) scale(.9); }

/* the card behind reads as further away */
.viz--swap .swap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.viz--swap .swap-card.is-back::after { opacity: .38; }
.viz--swap .swap-card.is-back { cursor: pointer; }

.viz--swap .viz-report { padding: 1.6em 1.7em 1.3em; }
.viz--swap .viz-chart { flex: 1 1 auto; min-height: 0; }

/* Landing page card */
.viz-landing-hero {
  position: relative;
  flex: 0 0 60%;
  margin: .7em .7em 0;
  border-radius: .95em;
  overflow: hidden;
}
.viz-landing-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 55%;
}
.viz-landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 52, 86, .42) 0%, rgba(44, 52, 86, .12) 55%, transparent 80%);
}
.viz-landing-nav {
  position: absolute;
  z-index: 1;
  top: .9em;
  left: 1em;
  right: 1em;
  display: flex;
  align-items: center;
  gap: .6em;
}
.viz-landing-nav i { width: 1em; height: 1em; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.viz-landing-nav b { width: 2.4em; height: .42em; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.viz-landing-nav b:first-of-type { margin-left: auto; }
.viz-landing-nav b:last-of-type { width: 3.4em; height: 1.2em; border-radius: 999px; background: rgba(255, 255, 255, .92); }
.viz-landing-copy {
  position: absolute;
  z-index: 1;
  left: 1.2em;
  bottom: 1.2em;
  width: 52%;
  display: grid;
  gap: .5em;
}
.viz-landing-copy span { display: block; border-radius: 3px; background: rgba(255, 255, 255, .95); }
.viz-landing-copy .h1 { width: 96%; height: 1.05em; }
.viz-landing-copy .h2 { width: 70%; height: 1.05em; }
.viz-landing-copy .p { width: 84%; height: .5em; margin-top: .2em; background: rgba(255, 255, 255, .7); }
.viz-landing-copy .btn { width: 34%; height: 1.25em; margin-top: .5em; border-radius: 999px; }

.viz-landing-features {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  align-content: center;
  padding: .9em 1.3em 1.1em;
}
.viz-landing-features div { display: grid; gap: .45em; }
.viz-landing-features i {
  width: 1.9em;
  height: 1.9em;
  border-radius: .6em;
  background: var(--accent-2-fill);
  box-shadow: inset 0 0 0 1px var(--tile-ring);
  margin-bottom: .2em;
}
.viz-landing-features b { height: .55em; border-radius: 3px; background: var(--steel-2); }
.viz-landing-features b.s { width: 70%; background: color-mix(in srgb, var(--steel-2) 70%, transparent); }

/* Badge text follows the card in front: a soft blurred crossfade */
.viz-badge-text { display: grid; }
.viz-badge-text > span {
  grid-area: 1 / 1;
  transition: opacity 260ms ease, filter 260ms ease;
}
.viz-badge[data-show="report"] [data-for="landing"],
.viz-badge[data-show="landing"] [data-for="report"] { opacity: 0; filter: blur(3px); }

.viz--swap .viz-badge { right: 1%; bottom: 0; z-index: 3; }

@container (max-width: 440px) {
  .viz--swap .swap-card { aspect-ratio: 1; width: 84%; }
  .viz--swap .viz-report { padding: 1.2em 1.25em 1em; }
  .viz-landing-hero { flex-basis: 58%; }
  .viz-landing-features { gap: .6em; padding: .7em .9em .8em; }
  .viz-landing-features b.s { display: none; }
}

@media (max-width: 560px) {
  .viz.viz--swap { aspect-ratio: 580 / 652; padding-top: 0; }
  .viz--swap .swap-card { position: absolute; top: 12%; width: 84%; }
  .viz--swap .viz-badge { position: absolute; right: 0; bottom: 0; margin: 0; width: auto; }
}

@keyframes swap-in { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .viz--swap .swap-card { animation: swap-in 750ms var(--ease-out) both; }
  .viz--swap .swap-card.viz-landing { animation-delay: 250ms; }
  .viz--swap .swap-card.viz-report { animation-delay: 420ms; }
}
@media (prefers-reduced-motion: reduce) {
  .viz--swap .swap-card { transition: box-shadow 200ms ease, z-index 0s; }
  .viz-badge-text > span { transition: opacity 200ms ease; filter: none; }
}


/* single-column hero: the copy runs the full width, so the veil runs top-down */
@media (max-width: 960px) {
  .hero-veil {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--hero-sky) 92%, transparent) 0%,
      color-mix(in srgb, var(--hero-sky) 86%, transparent) 42%,
      color-mix(in srgb, var(--hero-sky) 40%, transparent) 62%,
      transparent 80%);
  }
}

/* =====================================================================
   Mobile (<= 640px): a dedicated layout, not a squeezed desktop
   ===================================================================== */
@media (max-width: 640px) {
  :root {
    --section-y: 3.75rem;
    --fs-body: 1rem;
    --gutter: 20px;
  }

  .section-title { font-size: clamp(1.7rem, 7.4vw, 2rem); line-height: 1.12; }
  .section-lede { margin-top: .85rem; }

  /* Hero */
  .hero { padding-inline: 12px; }
  .hero-frame { min-height: 0; border-radius: 24px; }
  .hero-grid,
  .hero--page .hero-grid,
  .hero--contact .hero-grid {
    padding: calc(var(--nav-h) + 2.25rem) 1.25rem 2.25rem;
    gap: 2.25rem;
  }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .12em; }
  .hero h1 { margin-top: 1.1rem; }
  .hero-sub { margin-top: 1rem; font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: .35rem; margin-top: 1.75rem; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-actions .link-quiet { justify-content: center; }
  .hero-photo, .hero-net { height: 34%; }

  /* Services */
  .services { padding-bottom: calc(var(--section-y) * .5); }
  .service-grid { gap: 1rem; margin-top: 2rem; }
  .service-media { height: 170px; }
  .service-body { padding: 1.35rem 1.35rem 1.4rem; gap: .8rem; }
  .service p, .offer-body > p, .problem p, .principle p { font-size: .96rem; }

  /* Principles: headline, then photo, then the list */
  .principles-grid { gap: 1.75rem; }
  .principles-copy { display: contents; }
  .principles-copy > .reveal { order: 1; }
  .principles-photo { order: 2; aspect-ratio: 16 / 10; min-height: 0; }
  .principle-list { order: 3; margin-top: 0; }
  .principle { gap: 1rem; padding-block: 1.25rem; }
  .principle:first-child { padding-top: 0; }
  .principle-icon { width: 44px; height: 44px; border-radius: 14px; }

  /* Process: a vertical timeline, icon on the left, text on the right */
  .process-banner { min-height: 0; margin-inline: 12px; border-radius: 24px; }
  .process-head { padding-top: 2.5rem; padding-bottom: 7.5rem; }
  .process-card { margin-top: -5.5rem; margin-inline: 0; padding: 1.5rem 1.25rem .5rem; }
  .steps, .steps[data-n] { grid-template-columns: 1fr; row-gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 1rem;
    padding: 0 0 1.5rem;
  }
  .step-head { grid-row: 1 / span 2; align-self: start; }
  .step-icon { width: 44px; height: 44px; }
  .step h3 { margin-top: .6rem; font-size: 1.05rem; }
  .step p { grid-column: 2; margin-top: .3rem; }
  .step::before,
  .step::after {
    top: 52px;
    bottom: 8px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .step::after { transform: scaleY(0); transform-origin: center top; background: linear-gradient(180deg, var(--steel-3) 0%, var(--steel-5) 100%); }
  .steps.is-active .step::after { transform: scaleY(1); }
  .step:last-child::before,
  .step:last-child::after { display: none; }

  /* Contact: needs as a tidy two-column grid */
  .contact { padding-top: 3rem; }
  .contact-grid { gap: 2rem; }
  .need-group { margin-top: 1.75rem; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .chip { min-height: 50px; padding: .55rem .7rem; font-size: .8rem; line-height: 1.25; text-align: left; }
  .chip-glyph, .chip-glyph .icon { width: 16px; height: 16px; flex: none; }
  .form-card .bezel-core { padding: 1.35rem 1.15rem 1.5rem; }
  .form-grid { gap: 1rem; }
  .submit-row { margin-top: 1.4rem; }
  .submit-note { width: 100%; text-align: center; }

  /* Inner pages */
  .problem { padding: 1.25rem; gap: 1rem; }
  .problem-grid, .offer-grid { margin-top: 2rem; }
  .offer-body { padding: 1.4rem 1.35rem; }
  .cta-panel { padding: 2rem 1.35rem; gap: 1.5rem; border-radius: 24px; }
  .cta-panel .btn { width: 100%; justify-content: space-between; }
  .info-note { padding: 1rem 1.15rem; }

  /* Narrow columns read better with natural wrapping than with balanced lines */
  .step p, .principle p, .problem p, .offer-body > p, .check-list span, .service p { text-wrap: pretty; }

  /* Footer */
  .footer { padding-block: 2.5rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links a { min-height: 40px; }
  .footer-meta { margin-top: 1rem; }
}

/* =====================================================================
   Hero illustrations: a layered stack with one choreographed entrance
   ===================================================================== */
.viz--stack {
  aspect-ratio: 600 / 604;
  max-width: 620px;
  margin-inline: auto 0;
}

.viz--stack .stack-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  font-size: clamp(9px, 2.05cqw, 12.5px);
  border-radius: max(14px, 3.2cqw);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), 0 2px 6px rgba(68, 88, 111, .05), 0 32px 64px -28px rgba(46, 65, 88, .34);
}

.viz--stack .stack-back { top: 0; right: 0; bottom: auto; left: auto; width: 66%; }
.viz--stack .stack-front { top: auto; left: 0; bottom: 4%; right: auto; width: 56%; z-index: 2; }
.viz--stack .viz-badge { right: 2%; bottom: 0; z-index: 3; }

.viz--stack .viz-report { padding: 1.5em 1.6em 1.3em; }
.viz--stack .viz-kpi { font-size: max(30px, 8.6cqw); }

/* data page: spreadsheet behind, segments in front */
.viz--data .stack-back { width: 66%; }
.viz--data .viz-grid-sheet { padding: 1.1em 1.2em 1.4em; }
.viz--data { aspect-ratio: 600 / 540; }
.viz--devices { aspect-ratio: 600 / 540; }
.viz--data .stack-front { width: 58%; bottom: 14%; }

/* digital page: the site on a laptop-width browser, the same site on a phone */
.viz--devices .stack-back { top: 6%; left: 0; right: auto; bottom: auto; width: 80%; }
.viz--devices .stack-front { top: auto; left: auto; right: 3%; bottom: 5%; width: 29%; padding: .5em; border-radius: max(18px, 4.4cqw); }
.viz--devices .viz-badge { left: 0; right: auto; }

/* mini landing page, written with real words instead of placeholder bars */
.lp-hero {
  position: relative;
  margin: .6em .6em 0;
  aspect-ratio: 16 / 8.6;
  border-radius: .9em;
  overflow: hidden;
  color: #FFFFFF;
}
.lp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(35deg, rgba(34, 40, 66, .62) 0%, rgba(34, 40, 66, .22) 50%, rgba(34, 40, 66, .08) 100%);
}
.lp-nav {
  position: absolute;
  z-index: 1;
  top: .85em;
  left: 1em;
  right: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78em;
}
.lp-nav strong { font-weight: 600; letter-spacing: .01em; }
.lp-nav span { opacity: .85; }
.lp-copy { position: absolute; z-index: 1; left: 1em; bottom: 1em; display: grid; justify-items: start; gap: .25em; }
.lp-copy b { font-size: 1.55em; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.lp-copy span { font-size: .8em; opacity: .9; }
.lp-btn {
  margin-top: .45em;
  padding: .42em .95em;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2E3550;
  font-size: .74em;
  font-style: normal;
  font-weight: 600;
}
.lp-btn--dark { background: #34405E; color: #FFFFFF; }
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6em;
  padding: .75em .6em .8em;
}
.lp-features div { display: grid; gap: .4em; }
.lp-features i {
  display: block;
  aspect-ratio: 1.5;
  border-radius: .55em;
  overflow: hidden;
  background: var(--steel-1) var(--img, none) var(--pos, 50% 50%) / cover no-repeat;
}
.lp-map svg { display: block; width: 100%; height: 100%; }
.lp-map-lake { fill: #DCE8F2; }
.lp-map-road { fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; }
.lp-map-pin { fill: #34405E; }
.lp-features span { color: var(--ink); font-size: .78em; font-weight: 500; }

/* phone version of the same site */
.lp-phone-img { height: 44%; margin: 0 .55em; border-radius: .7em; overflow: hidden; }
.lp-phone-img img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }
.lp-phone-copy { display: grid; justify-items: start; gap: .25em; padding: .8em .75em; }
.lp-phone-copy small { color: var(--ink-3); font-size: .7em; font-weight: 600; }
.lp-phone-copy b { color: var(--ink); font-size: 1.05em; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.lp-phone-copy span { color: var(--ink-2); font-size: .72em; }

/* One entrance, in order: the site arrives, the report rises in front, the chart draws, the review lands */
@keyframes stack-back-in { from { opacity: 0; transform: translate(18px, -14px) scale(.96); } }
@keyframes stack-front-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .viz--stack .stack-back { animation: stack-back-in 800ms var(--ease-out) both 250ms; }
  .viz--stack .stack-front { animation: stack-front-in 800ms var(--ease-out) both 600ms; }
  .viz--stack .viz-line { animation-delay: 1150ms; }
  .viz--stack .viz-area { animation-delay: 1850ms; }
  .viz--stack .viz-end, .viz--stack .viz-end-ring { animation-delay: 2200ms; }
  .viz--stack .viz-hbar i::before { animation-delay: calc(1250ms + var(--i, 0) * 120ms); }
  .viz--stack .viz-badge { animation: viz-badge 550ms var(--ease-out) both 2350ms; }
}

/* =====================================================================
   Mobile: centered, like the industry does for marketing pages
   (forms stay left-aligned: that is how people scan labels and fields)
   ===================================================================== */
@media (max-width: 640px) {
  /* illustration */
  .viz.viz--stack { aspect-ratio: 1 / 1.3; max-width: none; margin-inline: 0; padding-top: 0; }
  .viz--stack .stack-card { font-size: clamp(8.5px, 2.5cqw, 11px); }
  .viz--stack .stack-back { width: 82%; }
  .viz--stack .stack-front { width: 74%; bottom: 5%; }
  .viz--stack .viz-badge { position: absolute; right: 0; bottom: 0; margin: 0; width: auto; }
  .viz--devices .viz-badge { left: 0; right: auto; }
  .viz.viz--data { aspect-ratio: 1 / .93; }
  .viz--data .stack-front { bottom: 9%; }
  .viz.viz--devices { aspect-ratio: 1 / 1.1; }
  .viz--devices .stack-front { bottom: 2%; }
  .viz--devices .stack-back { width: 88%; top: 4%; }
  .viz--devices .stack-front { width: 34%; }
  .viz--stack .viz-kpi { font-size: 2.2rem; }
  .viz--stack .viz-badge { font-size: 11.5px; }

  /* hero copy */
  .hero-content, .contact-intro { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero h1 .line { white-space: normal; }

  /* section heads */
  .services-head, .problems-head, .offer-head,
  .principles-copy > .reveal, .process-head { text-align: center; }
  .section-lede { margin-inline: auto; }

  /* home service cards */
  .service-body { align-items: center; text-align: center; }
  .service .tags, .offer-card .tags { justify-content: center; }
  .service-link { align-self: center; }

  /* principles and problems: icon above, text centered */
  .principle, .problem { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .principle-icon { margin-bottom: .1rem; }
  .problem-icon { margin-bottom: .1rem; }

  /* offer cards */
  .offer-body { align-items: center; text-align: center; }
  .check-list { justify-items: center; }
  .check-list li { display: flex; gap: .6rem; text-align: left; max-width: 32ch; }
  .info-note { grid-template-columns: 1fr; justify-items: center; text-align: center; }

  /* process: centered steps joined by a short line */
  .steps, .steps[data-n] { grid-template-columns: 1fr; row-gap: 0; }
  .step { display: block; text-align: center; padding: 0 0 2.6rem; }
  .step-head { justify-content: center; }
  .step h3 { margin-top: .8rem; }
  .step p { margin: .35rem auto 0; max-width: 30ch; }
  .step::before,
  .step::after {
    top: auto;
    bottom: .75rem;
    left: calc(50% - 1px);
    right: auto;
    width: 2px;
    height: 1.1rem;
  }
  .step::after { transform: scaleY(0); transform-origin: center top; }
  .steps.is-active .step::after { transform: scaleY(1); }
  .step:last-child { padding-bottom: 1.25rem; }
  .step:last-child::before, .step:last-child::after { display: none; }

  /* contact */
  .need-group legend { width: 100%; text-align: center; }
  .chip { justify-content: flex-start; }
  .submit-row { justify-content: center; }

  /* closing band + footer */
  .cta-panel { text-align: center; }
  .footer-row, .footer-brand { align-items: center; justify-items: center; text-align: center; }
  .footer-links { align-items: center; }
  .footer-meta { text-align: center; }
}

/* Review badge: one quiet, solid check so the "approved" state reads at a glance */
.viz-badge .viz-ok {
  width: 1.5em;
  height: 1.5em;
  background: var(--ok-solid);
  color: #FFFFFF;
  box-shadow: 0 0 0 .22em var(--ok-halo);
}
.viz-badge .viz-ok .icon { width: .82em; height: .82em; }

/* =====================================================================
   Process: one continuous timeline. Small nodes on a hairline that fills
   in order; the delivery node turns green as the goal state.
   ===================================================================== */
.step h3, .step p { text-wrap: pretty; }
.step-icon {
  background: var(--surface);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--steel-3), 0 6px 14px -10px rgba(68, 88, 111, .4);
}
.step:last-child .step-icon {
  background: var(--ok-solid);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--ok-halo), 0 8px 16px -10px rgba(40, 110, 80, .55);
}

/* Wide screens: every step in one row, whatever the count */
@media (min-width: 1101px) {
  .steps, .steps[data-n] {
    --gap: clamp(1.25rem, .5rem + 1.6vw, 2rem);
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
  }
  .steps[data-n="5"] { --n: 5; }
  .steps[data-n="6"] { --n: 6; }
}
/* Medium screens: four steps still fit in a row */
@media (min-width: 861px) and (max-width: 1100px) {
  .steps[data-n="4"] { --gap: 1.5rem; column-gap: var(--gap); }
}

@media (min-width: 1101px), (min-width: 861px) and (max-width: 1100px) {
  .steps:is([data-n="4"], [data-n="5"], [data-n="6"]) .step { padding-top: 0; }
  .step-icon { width: 44px; height: 44px; border-radius: 50%; }
  .step-icon .icon { width: 20px; height: 20px; }
  .step::before,
  .step::after {
    top: 21px;
    left: 56px;
    right: calc(12px - var(--gap, 2rem));
    height: 2px;
    border-radius: 2px;
  }
  .step:last-child::before, .step:last-child::after { display: none; }
  .step h3 { margin-top: 1.15rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; }
  .step p { margin-top: .4rem; font-size: .9rem; line-height: 1.55; }
}

/* Medium screens with five or six steps: a vertical rail, icon left, text right */
@media (min-width: 861px) and (max-width: 1100px) {
  .steps[data-n="5"], .steps[data-n="6"] { grid-template-columns: 1fr; row-gap: 0; max-width: 640px; }
  .steps:is([data-n="5"], [data-n="6"]) .step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 1.1rem;
    padding: 0 0 1.75rem;
  }
  .steps:is([data-n="5"], [data-n="6"]) .step-head { grid-row: 1 / span 2; }
  .steps:is([data-n="5"], [data-n="6"]) .step h3 { margin-top: .6rem; }
  .steps:is([data-n="5"], [data-n="6"]) .step p { grid-column: 2; }
  .steps:is([data-n="5"], [data-n="6"]) .step::before,
  .steps:is([data-n="5"], [data-n="6"]) .step::after { top: 52px; bottom: 8px; left: 21px; right: auto; width: 2px; height: auto; }
  .steps:is([data-n="5"], [data-n="6"]) .step::after { transform: scaleY(0); transform-origin: center top; }
  .steps.is-active:is([data-n="5"], [data-n="6"]) .step::after { transform: scaleY(1); }
}

@media (max-width: 640px) {
  .step-icon { border-radius: 50%; }
}

/* Banner copy: a soft sky fade behind the words so they read on any photo */
.process-banner {
  --tone-scrim:
    radial-gradient(70% 70% at 20% 22%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .76) 32%, rgba(255, 255, 255, .32) 56%, rgba(255, 255, 255, 0) 76%);
  --tone-shadow: 0 0 22px rgba(255, 255, 255, .75);
}
.process-banner[data-tone="dark"] {
  --tone-scrim:
    radial-gradient(70% 70% at 20% 22%, rgba(11, 19, 30, .45) 0%, rgba(11, 19, 30, 0) 70%),
    linear-gradient(180deg, rgba(11, 19, 30, .8) 0%, rgba(11, 19, 30, .62) 32%, rgba(11, 19, 30, .25) 58%, rgba(11, 19, 30, 0) 78%);
}

/* =====================================================================
   Home contact: a sky panel with the data network, so the last step has presence
   ===================================================================== */
.contact--feature { background: var(--bg); padding-block: 0 var(--section-y); }
.contact-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1720px;
  margin-inline: var(--gutter);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  border-radius: 32px;
  background: var(--contact-grad);
}
@media (min-width: 1800px) { .contact-stage { margin-inline: auto; } }
.contact-net {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}
.contact--feature .section-title { color: var(--ink); }
.contact--feature .form-card .bezel-core { box-shadow: var(--inner-hi), 0 2px 6px rgba(68, 88, 111, .06), 0 40px 80px -30px rgba(46, 65, 88, .45); }

.contact-next {
  display: grid;
  gap: 1.1rem;
  margin: 2.25rem 0 0;
  padding: 1.75rem 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--steel-4) 30%, transparent);
}
.contact-next li { display: flex; align-items: flex-start; gap: .9rem; }
.contact-next-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--icon-fg);
  box-shadow: inset 0 0 0 1px var(--tile-ring), 0 8px 16px -12px rgba(68, 88, 111, .4);
}
.contact-next-icon .icon { width: 19px; height: 19px; }
.contact-next li > span:last-child { display: grid; gap: .1rem; padding-top: .1rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.contact-next strong { color: var(--ink); font-size: .95rem; font-weight: 600; }
.contact-wa { display: flex; align-items: center; gap: .9rem; width: fit-content; margin-top: 1.1rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; text-decoration: none; }
.contact-wa img { display: block; flex: none; width: 40px; height: 40px; border-radius: 10px; transition: transform 200ms var(--ease-out); }
.contact-wa span { display: grid; gap: .1rem; }
.contact-wa strong { color: var(--ink); font-size: .95rem; font-weight: 600; }
.contact--feature .contact-wa { color: var(--contact-ink-2); }
.contact--feature .contact-wa strong { color: var(--contact-ink); }
.contact-wa:active img { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .contact-wa:hover img { transform: scale(1.06); }
  .contact-wa:hover strong { text-decoration: underline; text-decoration-color: var(--steel-3); text-underline-offset: 3px; }
}
.contact-mail { margin-top: 1.6rem; color: var(--ink-2); font-size: .9rem; }
.contact-mail a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--steel-3); text-underline-offset: 3px; }

/* Primary action: the one filled button on the page, in the logo's steel */
.btn--primary {
  background: var(--primary-bg);
  color: var(--primary-fg);
  box-shadow: var(--primary-shadow);
}
.btn--primary .btn-chip {
  background: rgba(255, 255, 255, .18);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: var(--primary-shadow), 0 16px 30px -14px rgba(46, 70, 96, .55); }
  .btn--primary:hover .btn-chip { background: rgba(255, 255, 255, .26); }
}

@media (max-width: 640px) {
  .contact-stage { margin-inline: 12px; border-radius: 24px; padding-block: 3rem; }
  .contact-next { justify-items: center; text-align: left; }
  .contact-next li { width: 100%; max-width: 20rem; }
  .contact-mail { text-align: center; }
}
@media (max-width: 860px) {
  .process-banner {
    --tone-scrim: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .82) 45%, rgba(255, 255, 255, .45) 72%, rgba(255, 255, 255, 0) 92%);
  }
  .process-banner[data-tone="dark"] {
    --tone-scrim: linear-gradient(180deg, rgba(11, 19, 30, .8) 0%, rgba(11, 19, 30, .7) 45%, rgba(11, 19, 30, .35) 72%, rgba(11, 19, 30, 0) 92%);
  }
}

/* Contact panel: light where the words sit, bluer behind the white form; ink one step deeper */
.contact--feature .section-title { color: var(--contact-ink); }
.contact--feature .section-lede,
.contact--feature .contact-mail { color: var(--contact-ink-2); }
.contact--feature .need-group legend,
.contact--feature .contact-next strong,
.contact--feature .contact-mail a { color: var(--contact-ink); }
.contact--feature .contact-next li > span:last-child { color: var(--contact-ink-2); }
.contact--feature .eyebrow {
  background: var(--contact-chip);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--steel-4) 35%, transparent);
  color: var(--contact-ink-2);
}
.contact--feature .contact-next { border-top-color: color-mix(in srgb, var(--steel-4) 40%, transparent); }
.contact--feature .contact-mail a { text-decoration-color: var(--steel-4); }

/* Footer meta: the email stays quiet */
.footer-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--steel-3); text-underline-offset: 3px; }

/* FAQ: one hairline per question, a plus that turns into a minus */
.faq { max-width: 860px; padding-block: calc(var(--section-y) * .5) var(--section-y); }
.faq-head { text-align: left; }
.faq-list { margin-top: 2.25rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding-block: 1.1rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--icon-fg);
  transition: transform 200ms var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 68ch; padding-bottom: 1.4rem; color: var(--ink-2); line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { color: var(--ink-2); }
}
@media (max-width: 640px) {
  .faq-head { text-align: center; }
  .faq-item summary { font-size: 1rem; }
}

/* Survey illustration: a questionnaire behind, the profiles found in front */
.viz-survey { padding: 1.1em 1.25em 1.3em; }
.viz-survey .viz-file-head { padding: 0 0 .8em; margin-bottom: .6em; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5em; color: var(--ink-2); font-size: .85em; font-weight: 500; }
.viz-survey .viz-file-head .icon { width: 1.3em; height: 1.3em; color: var(--icon-fg); }
.viz-q { display: grid; gap: .45em; padding: .55em 0; }
.viz-q + .viz-q { border-top: 1px dashed var(--line); }
.viz-q b { color: var(--ink); font-size: .82em; font-weight: 500; }
.viz-scale { display: flex; gap: .45em; }
.viz-scale i { width: 1.25em; height: 1.25em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--steel-3); }
.viz-scale i.on { background: var(--steel-4); box-shadow: none; }

/* Catalog illustration: a product grid and the same catalog on a phone */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: .8em .8em 1em; }
.cat-item { display: grid; gap: .3em; }
.cat-item i { display: block; aspect-ratio: 1.15; border-radius: .6em; background: var(--steel-1) var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.cat-item b { color: var(--ink); font-size: .78em; font-weight: 600; }
.cat-item span { color: var(--ink-3); font-size: .72em; }
.cat-head { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em .1em; }
.cat-head strong { color: var(--ink); font-size: .95em; font-weight: 600; }
.cat-head span { color: var(--ink-3); font-size: .72em; }
.cat-phone-list { display: grid; gap: .55em; padding: .6em .7em; }
.cat-phone-list div { display: grid; grid-template-columns: 2.6em 1fr; gap: .55em; align-items: center; }
.cat-phone-list i { aspect-ratio: 1; border-radius: .5em; background: var(--steel-1) var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.cat-phone-list b { display: block; color: var(--ink); font-size: .72em; font-weight: 600; line-height: 1.2; }
.cat-phone-list span { color: var(--ink-3); font-size: .66em; }

/* Inline links inside notes */
.info-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--steel-3); text-underline-offset: 3px; }

/* =====================================================================
   Hero fits the first screen on laptops and desktops: type, spacing and
   the illustration scale with the viewport height, not only its width
   ===================================================================== */
@media (min-width: 961px) {
  .hero-frame { min-height: clamp(500px, calc(100svh - 20px), 980px); }
  .hero-grid {
    --art-room: calc(100svh - 20px - var(--nav-h) - clamp(1.25rem, 5svh, 4rem) - clamp(2rem, 8svh, 6.5rem));
    padding-top: calc(var(--nav-h) + clamp(1.25rem, 5svh, 4rem));
    padding-bottom: clamp(2rem, 8svh, 6.5rem);
  }
  .hero h1,
  .hero--page h1 {
    margin-top: clamp(.8rem, 2.2svh, 1.4rem);
    font-size: min(var(--fs-display), calc(100cqi / var(--h1-fit, 10.6)), 8.2svh);
  }
  .hero-sub { margin-top: clamp(.8rem, 2.2svh, 1.4rem); }
  .hero-actions { margin-top: clamp(1.1rem, 3.4svh, 2.2rem); }
  .hero .viz--stack { max-width: min(620px, calc(var(--art-room) * 600 / 604)); }
  .hero .viz--data,
  .hero .viz--devices { max-width: min(620px, calc(var(--art-room) * 600 / 540)); }
}

/* ---------- Upnegocio: producto destacado (19-10-2026) ---------- */
.upn-band { margin-top: 3rem; }
.upn-card {
  background: linear-gradient(135deg, #1E4F5F 0%, #2C6B7F 45%, #3E8BA0 100%);
  color: #FFFFFF;
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 5vw, 3.25rem);
  box-shadow: 0 24px 60px -32px rgba(30,79,95,.55);
}
.upn-copy { max-width: 54ch; }
.upn-card .upn-eyebrow { color: rgba(255,255,255,.82); }
.upn-card .section-title, .upn-card .section-lede { color: #FFFFFF; }
.upn-card .section-lede { opacity: .93; margin-top: .75rem; }
.upn-card .upn-btn { margin-top: 1.5rem; background: #FFFFFF; color: #1E4F5F; }
.upn-card .upn-btn .btn-chip { color: #1E4F5F; }


/* ---------- Tarjeta Marketing (19-10-2026) ---------- */
.service-media--mkt { background: linear-gradient(155deg, #F2A25C 0%, #E8724E 100%); display: grid; place-items: center; }
.service-media--mkt .service-glyph { width: 38%; height: auto; color: rgba(255,255,255,.94); }


/* ---------- Contacto directo (WhatsApp + correo, 19-10-2026) ---------- */
.contact-direct { display: flex; flex-direction: column; gap: 1rem; height: 100%; justify-content: center; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.contact-direct h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.2; }
.contact-direct p { color: var(--ink-2); margin-bottom: .5rem; }
.contact-direct-btn { justify-content: center; }

/* Hero en 2 líneas en móvil (19-10-2026): "Soluciones digitales" + "para tu empresa." */
@media (max-width: 699px) {
  .hero h1 .line:nth-child(1), .hero h1 .line:nth-child(2) { display: inline; white-space: normal; }
  .hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
}

/* Upnegocio: caras del equipo para dar dinamismo (19-10-2026) */
.upn-faces { display: flex; }
.upn-face { width: clamp(46px, 13vw, 84px); height: clamp(46px, 13vw, 84px); border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 3px solid #FFFFFF; box-shadow: 0 10px 26px rgba(0,0,0,.22); margin-left: -18px; background: #DCEAEE; }
.upn-face:first-child { margin-left: 0; }


/* Upnegocio: boton + caras en la misma fila (19-10-2026) */
.upn-cta { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.75rem); flex-wrap: wrap; margin-top: 1.5rem; }
.upn-card .upn-btn { margin-top: 0; flex-shrink: 0; }

/* Hero más limpio en móvil (19-10-2026): ocultar los mockups decorativos */
@media (max-width: 699px) {
  .hero-art { display: none; }
}

/* Upnegocio móvil: caras pequeñas a la derecha del botón, sin bajar de línea (19-10-2026) */
@media (max-width: 560px) {
  .upn-cta { flex-wrap: nowrap; gap: .6rem; }
  .upn-cta .upn-btn { flex-shrink: 0; padding-inline: 1rem; }
  .upn-cta .upn-btn .btn-label { white-space: nowrap; }
  .upn-cta .upn-btn .btn-chip { display: none; }
  .upn-faces { flex-shrink: 0; }
  .upn-face { width: 36px; height: 36px; margin-left: -16px; border-width: 2.5px; }
}

/* Upnegocio: en PC las caras van grandes a la derecha para llenar el ancho (19-10-2026) */
.upn-faces--side { display: none; }
@media (min-width: 761px) {
  .upn-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .upn-faces--inline { display: none; }
  .upn-faces--side { display: flex; padding-right: clamp(.5rem, 2vw, 2.5rem); }
  .upn-faces--side .upn-face { width: clamp(88px, 8vw, 120px); height: clamp(88px, 8vw, 120px); margin-left: -30px; border-width: 4px; }
  .upn-faces--side .upn-face:first-child { margin-left: 0; }
}

/* =====================================================================
   Hero v2 (22-10-2026): marketing digital y tecnología
   (23-10-2026: --mark pasó del azul lago #3D74A6 al azul acero del isotipo, el mismo de "Tecnología e IA")
   - El título sube línea por línea desde su máscara y "tecnología" se subraya a mano.
   - La red sobre las montañas se dibuja sola y lleva luces que viajan por sus tramos.
   - La ilustración cuenta una historia: la publicación atrae, llega el mensaje,
     la automatización responde y anota, y la reserva queda confirmada.
   Todo con prefers-reduced-motion: sin movimiento, se ve el estado final.
   ===================================================================== */
:root {
  --mark: #44607D;
  --mark-soft: #E8EDF3;
  --wa: #1F9D5B;
}

/* ---------- Título ---------- */
/* Más grande que el resto de los títulos: es la primera impresión. Las líneas cortas permiten llegar a ~4,6 rem. */
.hero h1.h1-reveal { font-size: min(clamp(2.4rem, 1.1rem + 3.3vw, 4.6rem), calc(100cqi / var(--h1-fit, 10.6))); line-height: 1.04; letter-spacing: -.035em; }
.h1-reveal .line { overflow: clip; padding-bottom: .3em; margin-bottom: -.3em; }
.h1-reveal .line > span { display: inline-block; }
/* "tecnología e IA": color de lago y, debajo, un trazo recto con un nodo en cada punta, como la red del fondo.
   Se dibuja de izquierda a derecha y cada tanto lo recorre una luz, igual que los datos que viajan por la red. */
.h1-mark { position: relative; font-style: normal; color: var(--mark); white-space: nowrap; }
.h1-mark abbr { text-decoration: none; }
.h1-mark::before,
.h1-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.1em;
  height: max(7px, .11em);
  pointer-events: none;
}
.h1-mark::before {
  background:
    radial-gradient(circle at 50% 50%, var(--mark) 0 46%, transparent 52%) 0 50% / max(7px, .11em) 100% no-repeat,
    radial-gradient(circle at 50% 50%, var(--mark) 0 46%, transparent 52%) 100% 50% / max(7px, .11em) 100% no-repeat,
    linear-gradient(90deg, var(--mark), #93A8BF) 50% 50% / calc(100% - max(7px, .11em)) max(1.5px, .025em) no-repeat;
}
.h1-mark::after {
  background: radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 42%, rgba(186, 200, 218, 0) 100%) no-repeat;
  background-size: 2.2em 100%;
  background-position: -2.2em 50%;
  opacity: 0;
}
@keyframes line-up { from { transform: translateY(110%); } }
@keyframes mark-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes mark-pulse {
  0% { background-position: -2.2em 50%; opacity: 0; }
  8% { opacity: 1; }
  44% { background-position: calc(100% + 2.2em) 50%; opacity: 1; }
  50%, 100% { background-position: calc(100% + 2.2em) 50%; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .h1-reveal .line > span {
    animation: line-up 1100ms var(--ease-out) both;
    animation-delay: calc(160ms + var(--l, 0) * 110ms);
  }
  .h1-mark::before {
    clip-path: inset(0 100% 0 0);
    animation: mark-draw 1000ms cubic-bezier(.65, 0, .35, 1) 950ms forwards;
  }
  .h1-mark::after { animation: mark-pulse 5.6s ease-in-out 2.4s infinite; }
}

/* ---------- La red viva ---------- */
.net--live .net-line { opacity: .34; }
.net-pulse-dot { fill: #FFFFFF; }
.net-pulse-halo { fill: #FFFFFF; opacity: .22; }
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-breathe { 50% { transform: scale(1.5); opacity: .06; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-net:has(.net--live) { animation: none; }
  .net--live .net-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: net-draw 1500ms var(--ease-in-out) forwards;
    animation-delay: calc(420ms + var(--d, 0) * 42ms);
  }
  .net--live .net-dot, .net--live .net-halo, .net--live .net-pin {
    animation: viz-fade 900ms ease both;
    animation-delay: calc(760ms + var(--d, 0) * 42ms);
  }
  .net--live .net-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: viz-fade 900ms ease both, net-breathe 4.8s ease-in-out infinite;
    animation-delay: calc(760ms + var(--d, 0) * 42ms), calc(2s + var(--d, 0) * -.37s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .net-pulses { display: none; }
}

/* ---------- La ilustración: marketing que atrae, tecnología que responde ---------- */
.viz--mt {
  --mt-fs: clamp(9px, 2.06cqw, 12.5px);
  aspect-ratio: 600 / 500;
  max-width: 640px;
  margin-inline: auto 0;
}
.viz--mt::after { left: 12%; right: 4%; bottom: -2%; }

.mt-card {
  position: absolute;
  font-size: var(--mt-fs);
  color: var(--ink);
  border-radius: max(14px, 3.2cqw);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), 0 2px 6px rgba(68, 88, 111, .05), 0 32px 64px -28px rgba(46, 65, 88, .34);
  transition: box-shadow 300ms ease;
}
.mt-card.is-lifted { box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), 0 2px 6px rgba(68, 88, 111, .06), 0 48px 90px -30px rgba(46, 65, 88, .42); }
.mt-ico { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Marketing: la publicación de la campaña */
.mt-post { left: 0; top: 2%; width: 52%; overflow: hidden; }
.mt-post-head { display: flex; align-items: center; gap: .7em; padding: .85em .95em .7em; }
.mt-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: linear-gradient(150deg, #8FA8BD 0%, #4F6A82 100%);
  color: #FFFFFF;
  font-size: .76em;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E2A07E;
}
.mt-post-id { display: grid; line-height: 1.25; min-width: 0; }
.mt-post-id b { font-weight: 600; }
.mt-post-id small { color: var(--ink-3); font-size: .82em; }
.mt-more { display: flex; gap: .24em; margin-left: auto; }
.mt-more i { width: .3em; height: .3em; border-radius: 50%; background: var(--steel-4); }
.mt-post-img { position: relative; margin: 0 .55em; aspect-ratio: 1.42; border-radius: .8em; overflow: hidden; background: var(--steel-2); }
.mt-post-img img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 62%; filter: saturate(1.08); }
.mt-post-chip {
  position: absolute;
  left: .8em;
  bottom: .8em;
  padding: .38em .85em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: #2E3550;
  font-size: .82em;
  font-weight: 600;
}
.mt-post-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .6em .55em 0;
  padding: .62em .85em;
  border-radius: .65em;
  background: var(--steel-1);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .9em;
  font-weight: 600;
}
.mt-post-cta .icon { width: 1.1em; height: 1.1em; color: var(--steel-5); }
.mt-post-actions { display: flex; align-items: center; gap: .85em; padding: .8em .95em .25em; }
.mt-save { margin-left: auto; }
.mt-like { display: grid; color: var(--ink); }
.mt-like .mt-ico { transform-box: fill-box; transform-origin: center; transition: fill 220ms ease, stroke 220ms ease; }
.viz--mt.is-liked .mt-like .mt-ico { fill: #E0475E; stroke: #E0475E; }
@keyframes like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.34); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .viz--mt.is-liked .mt-like .mt-ico { animation: like-pop 560ms var(--ease-out); }
}
.mt-post-likes { padding: .3em .95em 0; font-size: .92em; }
.mt-post-likes b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mt-post-caption { padding: .3em .95em 1.05em; color: var(--ink-2); font-size: .9em; line-height: 1.45; }
.mt-post-caption b { margin-right: .3em; color: var(--ink); font-weight: 600; }

/* El mensaje que trae la campaña */
.mt-toast {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: 48%;
  display: flex;
  align-items: center;
  gap: .75em;
  padding: .75em .95em .75em .75em;
  border-radius: max(14px, 3cqw);
  font-size: var(--mt-fs);
  background: var(--viz-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg);
}
.mt-toast-app { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: .8em; background: var(--wa); color: #FFFFFF; }
.mt-toast-app .mt-ico { width: 1.45em; height: 1.45em; stroke-width: 1.9; }
.mt-toast-body { display: grid; gap: .1em; min-width: 0; line-height: 1.3; }
.mt-toast-body small { color: var(--ink-3); font-size: .8em; }
.mt-toast-body b { font-weight: 600; }

/* Tecnología: la automatización */
.mt-flow { z-index: 2; right: 0; top: 18%; width: 57%; padding: 1.05em 1.1em .95em; }
.mt-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  color: var(--ink-3);
  font-size: .84em;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mt-flow-head > span:first-child { display: inline-flex; align-items: center; gap: .45em; }
.mt-flow-head .mt-ico { width: 1.35em; height: 1.35em; color: var(--mark); }
.mt-live {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .75em;
  border-radius: var(--r-pill);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.mt-live i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 85, .45); } 80%, 100% { box-shadow: 0 0 0 .55em rgba(31, 138, 85, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .mt-live i { animation: live-ping 1.9s ease-out infinite; }
}

.mt-steps { --p: 0; position: relative; display: grid; gap: .2em; margin: .85em 0 0; padding: 0; list-style: none; }
.mt-steps::before,
.mt-steps::after {
  content: "";
  position: absolute;
  left: calc(.2em + 1.2em - 1px);
  top: 1.7em;
  bottom: 1.7em;
  width: 2px;
  z-index: 0;
  border-radius: 2px;
  background: var(--steel-2);
}
.mt-steps::after { background: var(--mark); transform-origin: top; transform: scaleY(var(--p)); transition: transform 600ms var(--ease-in-out); }
.mt-steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: .8em; padding: .42em .2em; }
.mt-step-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: .8em;
  background: var(--steel-1);
  color: var(--steel-5);
  box-shadow: inset 0 0 0 1px var(--tile-ring);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.mt-step-icon .mt-ico { width: 1.3em; height: 1.3em; }
.mt-step-text { display: grid; min-width: 0; line-height: 1.25; }
.mt-step-text b { font-weight: 600; }
.mt-step-text small { color: var(--ink-3); font-size: .82em; }
.mt-check { display: grid; place-items: center; flex: none; width: 1.75em; height: 1.75em; margin-left: auto; border-radius: 50%; background: var(--success-bg); color: var(--success); }
.mt-check .icon { width: .95em; height: .95em; }
.mt-steps li.is-done .mt-step-icon { background: var(--mark-soft); color: var(--mark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 28%, transparent); }
.mt-steps li.is-active .mt-step-icon { background: #FFFFFF; color: var(--mark); box-shadow: inset 0 0 0 1.5px var(--mark), 0 0 0 .32em color-mix(in srgb, var(--mark) 16%, transparent); }
.mt-flow-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
  margin-top: .65em;
  padding-top: .7em;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-3);
  font-size: .9em;
}
.mt-flow-foot b { color: var(--ink); font-weight: 600; }

/* El resultado */
.viz--mt .mt-badge { left: auto; right: 0; top: 72%; bottom: auto; z-index: 3; gap: .65em; padding: .6em 1.1em .6em .6em; }
.mt-badge b { font-weight: 600; }

/* Los estados de la historia (solo con JS; sin JS se ve todo terminado) */
.viz--mt .mt-toast, .viz--mt .mt-badge { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), box-shadow 300ms ease; }
.viz--mt .mt-steps li { transition: opacity 320ms ease; }
.viz--mt .mt-check { transition: opacity 260ms ease, transform 420ms var(--ease-out); }
.js .viz--mt:not(.is-final) .mt-toast:not(.is-in) { opacity: 0; transform: translateY(-8px) scale(.96); }
.js .viz--mt:not(.is-final) .mt-badge:not(.is-in) { opacity: 0; transform: translateY(10px) scale(.96); }
.js .viz--mt:not(.is-final) .mt-steps li:not(.is-done):not(.is-active) { opacity: .5; }
.js .viz--mt:not(.is-final) .mt-steps li:not(.is-done) .mt-check { opacity: 0; transform: scale(.4); }

/* Entrada: la publicación, después la automatización */
@keyframes mt-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  .mt-post { animation: mt-in 850ms var(--ease-out) both 300ms; }
  .mt-flow { animation: mt-in 850ms var(--ease-out) both 620ms; }
}

/* La ilustración se esconde en el celular (decisión del 19-10-2026); de 700 a 960 px va bajo el texto, más angosta */
@media (max-width: 960px) {
  .hero-art:has(.viz--mt) { max-width: 600px; width: 100%; margin-inline: auto; }
  .viz--mt { margin-inline: auto; }
}

/* ---------- La cinta de servicios ---------- */
.ticker {
  max-width: 1720px;
  margin: clamp(1.4rem, 2.6vw, 2.2rem) auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.ticker-list li {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
  padding-right: clamp(1.1rem, 2.4vw, 2.2rem);
  color: var(--ink);
  font-size: clamp(1.2rem, .8rem + 1.5vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  white-space: nowrap;
}
.ticker-list li:nth-child(even) { color: var(--steel-4); }
.ticker-list li::after {
  content: "";
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 .2em var(--mark-soft);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .ticker-track { width: auto; }
  .ticker-list { flex-wrap: wrap; justify-content: center; row-gap: .35rem; }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   Diseño tecnológico en todo el sitio (23-10-2026): el trazo con nodos queda
   solo en el título del hero (así lo pidió quien fundó CORIVA); el resto usa
   el mismo lenguaje sin repetirlo: borde con luz, circuitos, nodos y puntos.
   Todo en Montserrat (la tipografía de código no le gustó).
   ===================================================================== */
:root { --tm-a: var(--mark); --tm-b: #93A8BF; --tm-glow: rgba(186, 200, 218, .95); }

/* ---------- Borde con luz (Upnegocio y contacto) y el número en un nodo ---------- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(147, 168, 191, 0) 262deg, #93A8BF 300deg, var(--mark) 324deg, transparent 342deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@keyframes beam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .beam::before { animation: beam 8s linear infinite; }
  .beam + .beam::before { animation-delay: -4s; }
  .form-card.beam::before { animation-duration: 11s; }
}
@media (prefers-reduced-motion: reduce) {
  .beam::before { display: none; }
}

/* "1 · Crecer": el número va en un nodo, unido a la palabra por un trazo */
.area-kicker { display: inline-flex; align-items: center; gap: .6rem; }
.area-kicker b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--mark);
  box-shadow: inset 0 0 0 1.5px var(--mark), 0 0 0 4px var(--mark-soft);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
}
.area-kicker i { position: relative; width: 36px; height: 1.5px; background: linear-gradient(90deg, var(--mark), #93A8BF); }
.area-kicker i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #93A8BF; }

@keyframes rail-pulse {
  0% { background-position: 50% -48px, 0 0; }
  45%, 100% { background-position: 50% calc(100% + 48px), 0 0; }
}

/* Un fondo de puntos, como una placa, detrás de los servicios */
.services { position: relative; isolation: isolate; }
.services::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6rem 0 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(94, 122, 143, .2) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 55%, #000 0%, transparent 100%);
}

/* ---------- Proceso: los tramos entre pasos con la misma línea y su luz ---------- */
.step::after { background: linear-gradient(90deg, var(--mark), #93A8BF); }
@keyframes step-pulse {
  0% { background-position: -3em 50%, 0 0; }
  35%, 100% { background-position: calc(100% + 3em) 50%, 0 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .steps:not([data-n="5"]):not([data-n="6"]).is-active .step::after {
    background:
      radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 45%, rgba(186, 200, 218, 0) 100%) -3em 50% / 3em 8px no-repeat,
      linear-gradient(90deg, var(--mark), #93A8BF);
    animation: step-pulse 6s ease-in-out infinite;
    animation-delay: calc(1.8s + var(--i, 0) * .9s);
  }
}

/* ---------- Calidad, criterio y precisión: los mismos nodos y el mismo circuito ---------- */
.principle-icon,
.step-icon {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--mark-soft) 100%);
  color: var(--mark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--mark) 7%, transparent), 0 8px 18px -10px rgba(68, 96, 125, .45);
}
.step:last-child .step-icon { background: var(--ok-solid); color: #FFFFFF; box-shadow: 0 0 0 4px var(--ok-halo), 0 8px 16px -10px rgba(40, 110, 80, .55); }
@media (min-width: 641px) {
  .principle { position: relative; }
  .principle + .principle { border-top: 0; }
  .principle:not(:last-child)::before,
  .principle:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 25px;
    top: calc(1.75rem + 26px);
    width: 2px;
    height: 100%;
    border-radius: 2px;
  }
  .principle:not(:last-child)::before { background: var(--steel-2); }
  .principle:not(:last-child)::after {
    background:
      radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 45%, rgba(186, 200, 218, 0) 100%) 50% -48px / 10px 48px no-repeat,
      linear-gradient(180deg, var(--mark), #93A8BF);
    transform-origin: top;
    transform: scaleY(1);
    transition: transform 900ms cubic-bezier(.65, 0, .35, 1) 400ms;
  }
  .js .principle.reveal.is-pending::after { transform: scaleY(0); }
}
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .principle:not(:last-child)::after { animation: rail-pulse 5.2s ease-in-out infinite; animation-delay: calc(3s + var(--i, 0) * 1.3s); }
}

/* ---------- La cinta, mínima (23-10-2026, pedido de quien fundó CORIVA): pequeña, en mayúsculas y en un solo tono ---------- */
.ticker { margin-top: clamp(1rem, 2vw, 1.5rem); }
.ticker-list li,
.ticker-list li:nth-child(even) {
  gap: clamp(1.25rem, 2vw, 1.75rem);
  padding-right: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--ink-3);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.6;
  text-transform: uppercase;
}
.ticker-list li::after { width: 3px; height: 3px; background: var(--steel-4); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation-duration: 40s; }
}

/* ---------- Upnegocio destacado (23-10-2026, pedido de quien fundó CORIVA): luz en el borde, un brillo que cruza la tarjeta,
   un halo detrás de las caras y la línea con nodos en "equipo digital" ---------- */
.upn-card { position: relative; isolation: isolate; }
.upn-card > * { position: relative; z-index: 1; }
.upn-card.beam::before {
  padding: 2px;
  background: conic-gradient(from var(--beam), transparent 0deg 240deg, rgba(191, 230, 243, 0) 255deg, #BFE6F3 300deg, #FFFFFF 324deg, transparent 344deg);
}
.upn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
}
@keyframes upn-sheen { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
@keyframes upn-glow { 50% { opacity: .55; transform: scale(.94); } }
@media (prefers-reduced-motion: no-preference) {
  .upn-card::after { animation: upn-sheen 7.5s ease-in-out 1.2s infinite; }
}
@media (min-width: 761px) {
  .upn-faces--side { isolation: isolate; }
  .upn-faces--side::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40% -14%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(191, 230, 243, .45), rgba(191, 230, 243, 0) 75%);
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .upn-faces--side::before { animation: upn-glow 5.5s ease-in-out infinite; }
}

.upn-card .tech-mark { position: relative; color: #D6F0F8; white-space: nowrap; }
.upn-card .tech-mark::before,
.upn-card .tech-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.1em;
  height: max(6px, .12em);
  pointer-events: none;
}
.upn-card .tech-mark::before {
  background:
    radial-gradient(circle at 50% 50%, #BFE6F3 0 46%, transparent 52%) 0 50% / max(6px, .12em) 100% no-repeat,
    radial-gradient(circle at 50% 50%, #FFFFFF 0 46%, transparent 52%) 100% 50% / max(6px, .12em) 100% no-repeat,
    linear-gradient(90deg, #BFE6F3, #FFFFFF) 50% 50% / calc(100% - max(6px, .12em)) 1.5px no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms cubic-bezier(.65, 0, .35, 1) 350ms;
}
.upn-card .tech-mark::after {
  background: radial-gradient(closest-side, #FFFFFF 0, rgba(255, 255, 255, .9) 42%, rgba(255, 255, 255, 0) 100%) no-repeat;
  background-size: 2.4em 100%;
  background-position: -2.4em 50%;
  opacity: 0;
}
.js .upn-card.reveal.is-pending .tech-mark::before { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .upn-card .tech-mark::after { animation: mark-pulse 6.4s ease-in-out 2.5s infinite; }
}

/* ---------- Servicios v4 (23-10-2026, pedido de quien fundó CORIVA): una tarjeta por área, lado a lado, con su foto,
   pero optimizada: cabecera de foto baja, menos relleno y los servicios en filas compactas que se iluminan ---------- */
.area-kicker { color: var(--mark); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.svc--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(68, 88, 111, .04), 0 24px 50px -34px rgba(46, 65, 88, .38);
}
.svc-card-media { position: relative; height: clamp(110px, 9.5vw, 140px); overflow: hidden; background: var(--ice-soft); }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(1.08); transition: transform 700ms var(--ease-out); }
#tecnologia .svc-card-media img { object-position: 50% 66%; }
.svc-card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); }
.svc-card-body { display: flex; flex-direction: column; flex: 1; gap: .45rem; padding: clamp(1.15rem, .9rem + 1vw, 1.6rem) clamp(1.15rem, .9rem + 1vw, 1.75rem) clamp(.9rem, .7rem + .6vw, 1.1rem); }
.svc-card h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); letter-spacing: -.02em; line-height: 1.2; }
.svc-card-lede { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }

/* Los servicios: filas compactas, cada una con su ícono, una línea y la flecha */
.svc-list { display: grid; margin: .55rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-list li { position: relative; }
.svc-list li + li::before { content: ""; position: absolute; top: 0; left: 3.55rem; right: 0; height: 1px; background: var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  margin-inline: -.6rem;
  padding: .72rem .6rem;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 250ms ease, box-shadow 250ms ease;
}
.svc-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--mark-soft) 100%);
  color: var(--mark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 26%, transparent);
  transition: box-shadow 300ms ease;
}
.svc-icon .mt-ico { width: 19px; height: 19px; stroke-width: 1.6; }
.svc-text { display: grid; gap: .1rem; min-width: 0; }
.svc-title { margin: 0; color: var(--ink); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.svc-text small { color: var(--ink-3); font-size: .86rem; line-height: 1.45; }
.svc-go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform 250ms var(--ease-out), color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.svc-go .icon { width: 14px; height: 14px; }
.svc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover .svc-card-media img { transform: scale(1.04); }
  .svc-row:hover { background: linear-gradient(90deg, var(--mark-soft) 0%, rgba(232, 237, 243, 0) 90%); box-shadow: inset 2px 0 0 var(--mark); }
  .svc-row:hover .svc-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--mark) 10%, transparent); }
  .svc-row:hover .svc-go { color: #FFFFFF; background: var(--mark); box-shadow: none; transform: translate(2px, -2px); }
}
/* Al aparecer, las filas entran una tras otra */
@media (prefers-reduced-motion: no-preference) {
  .svc-list li { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(200ms + var(--n, 0) * 90ms); }
  .js .svc-card.reveal.is-pending .svc-list li { opacity: 0; transform: translateY(10px); }
}
@media (max-width: 860px) {
  .svc--cards { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .svc--cards { margin-top: 1.75rem; }
  .svc-card { border-radius: 24px; }
  .svc-card-body { text-align: left; padding: 1.1rem 1rem .8rem; }
  .svc-card h3 { font-size: 1.3rem; }
  .svc-row { gap: .7rem; margin-inline: -.35rem; padding: .7rem .35rem; }
  .svc-icon { width: 34px; height: 34px; border-radius: 11px; }
  .svc-icon .mt-ico { width: 17px; height: 17px; }
  .svc-go { width: 22px; height: 22px; box-shadow: none; }
  .svc-title { font-size: .95rem; }
  .svc-text small { font-size: .84rem; }
  .svc-list li + li::before { left: 2.95rem; }
}
/* Cabecera de foto más baja y con un degradé que se funde con la tarjeta (pedido de quien fundó CORIVA) */
.svc-card-media { height: clamp(88px, 7vw, 104px); }
.svc-card-media::after { inset: 0; height: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 68%, #FFFFFF 100%); }
/* La cabeza de servicios a todo el ancho en PC (pedido de quien fundó CORIVA): el título en 2 líneas largas y la bajada en una */
.br-pc { display: none; }
@media (min-width: 1024px) {
  .br-pc { display: inline; }
  .services-head { max-width: none; }
  .services-head .section-title { text-wrap: wrap; }
  .services-head .section-lede { max-width: none; text-wrap: pretty; }
}

/* Cada tarjeta, en una línea: el título y, a la derecha, "Crecer" u "Optimizar" con su trazo y su punto (pedido de quien fundó
   CORIVA; sin números). Si no cabe, el título y la etiqueta se achican y, en lo más angosto, la etiqueta baja bajo el título. */
.svc-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
.svc-card-head h3 { margin: 0; }
.svc-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--mark);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.svc-tag i { position: relative; width: 28px; height: 1.5px; margin-right: 3px; background: linear-gradient(90deg, var(--mark), #93A8BF); }
.svc-tag i::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #93A8BF; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-tag { gap: .4rem; font-size: .64rem; letter-spacing: .1em; }
  .svc-tag i { width: 18px; }
}
@media (max-width: 640px) {
  .svc-card-head { gap: .3rem .55rem; }
  .svc-tag { font-size: .64rem; letter-spacing: .12em; gap: .45rem; }
  .svc-tag i { width: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-card-head h3 { font-size: 1.38rem; }
}
@media (max-width: 640px) {
  .svc-card-head { gap: .3rem .5rem; }
  .svc-card-head h3 { font-size: 1.15rem; }
  .svc-tag { gap: .35rem; font-size: .58rem; letter-spacing: .1em; }
  .svc-tag i { width: 10px; }
}
@media (max-width: 640px) {
  .svc-card-body { padding-inline: .85rem; }
  .svc-card-head h3 { font-size: 1.1rem; }
  .svc-tag { gap: .3rem; letter-spacing: .06em; }
}
/* En el celular, la frase de cada tarjeta en 2 líneas (pedido de quien fundó CORIVA) */
@media (max-width: 640px) {
  .svc-card-lede { font-size: .88rem; line-height: 1.5; }
}
/* Celular (pedido de quien fundó CORIVA: las filas se veían pobres): arriba el ícono azul, el título y la flecha en una línea;
   abajo la descripción a todo el ancho. En PC no cambia nada. */
@media (max-width: 640px) {
  .svc-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icono titulo flecha" "texto texto texto";
    align-items: center;
    column-gap: .7rem;
    row-gap: .45rem;
    margin-inline: 0;
    padding: .9rem 0;
  }
  .svc-text { display: contents; }
  .svc-icon {
    grid-area: icono;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, #5E7896 0%, var(--mark) 100%);
    color: #FFFFFF;
    box-shadow: 0 6px 14px -8px rgba(68, 96, 125, .65);
  }
  .svc-icon .mt-ico { width: 17px; height: 17px; stroke-width: 1.8; }
  .svc-title { grid-area: titulo; font-size: .95rem; line-height: 1.3; }
  .svc-text small { grid-area: texto; font-size: .86rem; line-height: 1.5; }
  .svc-go { grid-area: flecha; width: 28px; height: 28px; color: var(--mark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 35%, transparent); }
  .svc-go .icon { width: 13px; height: 13px; }
  .svc-list li + li::before { left: 0; }
}
/* "Crecer" y "Optimizar" solo con el punto, sin la línea (pedido de quien fundó CORIVA) */
.svc-tag { gap: .45rem; }
.svc-tag i { width: 6px; height: 6px; margin-right: 0; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px var(--mark-soft); }
.svc-tag i::after { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .svc-tag i { width: 6px; } }
@media (max-width: 640px) { .svc-tag i { width: 5px; height: 5px; } }

/* ---------- Servicios en el celular, versión elegida (23-10-2026, quien fundó CORIVA eligió "H1 · Compacta"):
   cada servicio en una tarjeta con el tinte suave de su área, una franja de color a la izquierda, el texto a todo el ancho
   y una flecha pequeña del color de la tarjeta. En PC no cambia nada. ---------- */
#marketing { --svc-suave: linear-gradient(135deg, #FBEEF0 0%, #F6F2FB 100%); --svc-acento: linear-gradient(180deg, #D88FA2 0%, #A58BCB 100%); --svc-flecha: #A66E92; }
#tecnologia { --svc-suave: linear-gradient(135deg, #E5EEF8 0%, #EEF2F6 100%); --svc-acento: linear-gradient(180deg, #8DB3DA 0%, #5E7896 100%); --svc-flecha: #4F78A3; }
@media (max-width: 640px) {
  .svc-list { display: grid; gap: .5rem; margin-top: .85rem; border-top: 0; }
  .svc-list li + li::before { display: none; }
  .svc-icon { display: none; }
  .svc-row {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: .78rem 2.1rem .82rem 1rem;
    border-radius: 16px;
    background: var(--svc-suave);
    box-shadow: none;
  }
  .svc-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--svc-acento); }
  .svc-text { display: grid; gap: .2rem; }
  .svc-title { grid-area: auto; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em; }
  .svc-text small { grid-area: auto; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
  .svc-go { grid-area: auto; position: absolute; right: .45rem; top: .62rem; width: 24px; height: 24px; background: none; box-shadow: none; color: var(--svc-flecha); }
  .svc-go .icon { width: 14px; height: 14px; }
}

/* ---------- "tecnología e IA" sin línea: una luz recorre el contorno de cada letra, una tras otra, en bucle
   (pedido de quien fundó CORIVA, 23-10-2026: "que recorra cada letra, cada línea de la letra"). Es una copia del texto en SVG,
   encima del texto real, que solo dibuja un trazo corto de luz por el borde de cada letra. Con movimiento reducido no se ve. ---------- */
.h1-mark::before,
.h1-mark::after { content: none; }
.h1-trazo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.h1-trazo text { fill: none; stroke: none; }
@keyframes letra-trazo {
  0% { stroke-dashoffset: .85em; }
  45%, 100% { stroke-dashoffset: -7.5em; }
}
@media (prefers-reduced-motion: no-preference) {
  .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(175, 192, 212, 1)); }
  .h1-trazo tspan {
    stroke: #FFFFFF;
    stroke-width: max(1.4px, .032em);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: .8em 40em;
    stroke-dashoffset: .85em;
    animation: letra-trazo 6s linear infinite;
    animation-delay: calc(1.5s + var(--k, 0) * .16s);
  }
}

/* "Tecnología e IA" en verde petróleo (pedido de quien fundó CORIVA: el azul no la convencía), con la luz de las letras a tono */
:root { --mark-h1: #237A80; }
.h1-mark { color: var(--mark-h1); }
@media (prefers-reduced-motion: no-preference) {
  .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(110, 200, 200, 1)); }
}

/* Celular: la cabeza de cada tarjeta de servicios centrada y las tarjetas sin la franja de color de la izquierda */
@media (max-width: 640px) {
  .svc-card-head { justify-content: center; }
  .svc-card-lede { text-align: center; }
  .svc-row::before { display: none; }
}

/* "Tecnología e IA" con el color del isotipo (pedido de quien fundó CORIVA): un degradé metálico de azul acero y plateado,
   un poco más oscuro que el logo para que se lea sobre el cielo claro. La luz que recorre las letras va en plateado. */
.h1-mark {
  color: #5E7590;
  background: linear-gradient(115deg, #4C637E 0%, #7C92AB 28%, #556D89 50%, #8A9EB5 70%, #4E6581 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h1-trazo { -webkit-text-fill-color: initial; }
@media (prefers-reduced-motion: no-preference) {
  .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(170, 190, 215, 1)); }
}

/* =====================================================================
   Ilustración del hero (23-10-2026, elegida por quien fundó CORIVA): un notebook y un celular con una página web
   sin textos (líneas y bloques neutros, para que nadie crea que el sitio es de cabañas). Aparecen al cargar,
   el celular flota suave, un brillo cruza la pantalla cada tanto y se mueven con el mouse (data-depth en coriva.js).
   ===================================================================== */
.viz--dev { aspect-ratio: 600 / 500; max-width: 640px; margin-inline: auto 0; }
.viz--dev > * { font-size: clamp(9px, 2.08cqw, 13px); }
.viz--dev::after { display: none; }
.dev-sombra { position: absolute; left: 6%; right: 2%; bottom: 3%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 45, 65, .3), rgba(30, 45, 65, 0)); filter: blur(6px); }
.dev-laptop { position: absolute; left: 0; top: 5%; width: 86%; }
.dev-pantalla { position: relative; overflow: hidden; padding: 2.2% 2.2% 3%; border-radius: 1.2em 1.2em .4em .4em; background: linear-gradient(180deg, #2A3442, #161D27); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(20, 30, 45, .55); }
.dev-web { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; aspect-ratio: 16 / 10; border-radius: .35em; background: #FFFFFF; }
.dev-nav { display: flex; align-items: center; gap: .9em; padding: .85em 1em; }
.dev-logo { width: 1.25em; height: 1.25em; margin-right: auto; border-radius: 50%; background: linear-gradient(135deg, #D7DFE8 0%, #7C92AB 100%); }
.dev-nav b { width: 2.6em; height: .45em; border-radius: 3px; background: var(--steel-2); }
.dev-nav em { width: 4.4em; height: 1.35em; border-radius: 999px; background: var(--accent); }
.dev-hero { position: relative; margin: 0 .8em; overflow: hidden; border-radius: .6em; }
.dev-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.dev-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 35, 50, .42), rgba(25, 35, 50, 0) 65%); }
.dev-copy { position: absolute; z-index: 1; left: 1.2em; bottom: 1.2em; display: grid; gap: .45em; width: 40%; }
.dev-copy b { display: block; height: .8em; border-radius: 3px; background: rgba(255, 255, 255, .92); }
.dev-copy b.corta { width: 68%; }
.dev-copy em { width: 38%; height: 1.45em; margin-top: .3em; border-radius: 999px; background: #FFFFFF; }
.dev-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; padding: .75em .8em .9em; }
.dev-cards div { display: grid; gap: .35em; }
.dev-cards i { display: block; aspect-ratio: 16 / 9; border-radius: .5em; background: center / cover no-repeat; }
.dev-cards b { display: block; width: 80%; height: .45em; border-radius: 3px; background: var(--steel-2); }
.dev-cards b.corta { width: 55%; background: var(--steel-1); }
.dev-brillo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .18) 48%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }
.dev-base { position: relative; height: 1.15em; margin: 0 -6%; border-radius: 0 0 1.4em 1.4em; background: linear-gradient(180deg, #E9EEF3 0%, #C9D3DD 55%, #AEB9C5 100%); box-shadow: 0 12px 24px -12px rgba(20, 30, 45, .45); }
.dev-base i { position: absolute; left: 50%; top: 0; width: 16%; height: 45%; margin-left: -8%; border-radius: 0 0 .6em .6em; background: linear-gradient(180deg, #C2CCD7, #D9E0E7); }
.dev-phone { position: absolute; right: 0; bottom: 5%; width: 25%; aspect-ratio: 9 / 19; padding: .45em; border-radius: 2.1em; background: linear-gradient(160deg, #3A4554, #151B24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 50px -24px rgba(20, 30, 45, .6); }
.dev-isla { position: absolute; z-index: 2; left: 50%; top: 1.1em; width: 30%; height: .9em; margin-left: -15%; border-radius: 999px; background: #0E131A; }
.dev-movil { display: flex; flex-direction: column; gap: .55em; height: 100%; overflow: hidden; padding: 2.4em .55em .75em; border-radius: 1.7em; background: #FFFFFF; }
.dev-mhero { display: grid; align-content: end; gap: .35em; min-height: 30%; padding: .7em; border-radius: .8em; background: center / cover no-repeat; box-shadow: inset 0 -40px 40px -20px rgba(25, 35, 50, .5); }
.dev-mhero b { display: block; width: 76%; height: .5em; border-radius: 3px; background: rgba(255, 255, 255, .92); }
.dev-mhero b.corta { width: 50%; }
.dev-mlist { display: grid; gap: .45em; }
.dev-mlist div { display: flex; align-items: center; gap: .5em; padding: .35em; border-radius: .7em; background: #F4F7FA; }
.dev-mlist i { flex: none; width: 2.5em; height: 2.5em; border-radius: .5em; background: center / cover no-repeat; }
.dev-mlist span { display: grid; flex: 1; gap: .3em; }
.dev-mlist b { display: block; width: 80%; height: .4em; border-radius: 3px; background: var(--steel-2); }
.dev-mlist b.corta { width: 55%; background: var(--steel-1); }
.dev-mbtn { height: 1.9em; margin-top: auto; border-radius: 999px; background: var(--accent); }
@keyframes dev-brillo { 0% { background-position: 130% 0; } 35%, 100% { background-position: -30% 0; } }
@keyframes dev-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
  .dev-laptop { animation: mt-in 850ms var(--ease-out) both 250ms; }
  .dev-phone { animation: mt-in 850ms var(--ease-out) both 550ms, dev-flota 6s ease-in-out 1.6s infinite; }
  .dev-brillo { animation: dev-brillo 8s ease-in-out 2.2s infinite; }
}
@media (max-width: 960px) {
  .hero-art:has(.viz--dev) { width: 100%; max-width: 600px; margin-inline: auto; }
  .viz--dev { margin-inline: auto; }
}

/* "Tecnología e IA" en el tono más oscuro del isotipo, con impacto (pedido de quien fundó CORIVA: el degradé claro se veía borroso).
   Azul acero profundo con un leve brillo metálico, sin partes claras, y un poco más gruesa para que la luz de las letras se luzca. */
.h1-mark {
  font-weight: 600;
  color: #44607D;
  background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* La cinta bajo el hero, más lenta (pedido de quien fundó CORIVA, 23-10-2026) */
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation-duration: 62s; }
}

/* ---------- Hero (23-10-2026, pedido de quien fundó CORIVA): la etiqueta como antes (píldora clara, sin logo),
   pero con la letra del título: Montserrat en minúsculas, sin el espaciado ancho que la hacía difícil de leer.
   El botón "Cotizar proyecto" vuelve al blanco de siempre. ---------- */
.hero .eyebrow--marca {
  padding: .45rem 1rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
}
@media (max-width: 640px) {
  .hero .eyebrow--marca { font-size: .84rem; letter-spacing: -.005em; }
}

/* ---------- La cinta bajo el hero con la letra de la etiqueta "Coriva · Agencia digital" (pedido de quien fundó CORIVA, 23-10-2026):
   Montserrat en minúsculas, sin el espaciado ancho de las mayúsculas, e igual de sutil ---------- */
.ticker-list li,
.ticker-list li:nth-child(even) {
  font-size: .9rem;
  letter-spacing: -.005em;
  text-transform: none;
}
@media (max-width: 640px) {
  .ticker-list li,
  .ticker-list li:nth-child(even) { font-size: .84rem; }
}

/* ---------- Hero en el celular (pedido de quien fundó CORIVA, 23-10-2026): la bajada, más pequeña y a todo el ancho,
   ocupa menos de la tarjeta (5 líneas en vez de un bloque angosto de 6 al centro) ---------- */
@media (max-width: 640px) {
  .hero-grid,
  .hero--page .hero-grid,
  .hero--contact .hero-grid { padding-inline: 1rem; }
  .hero .hero-sub { max-width: none; font-size: .875rem; line-height: 1.55; text-wrap: pretty; }
}

/* ---------- Upnegocio: "equipo digital" sin la línea, con la misma luz que recorre cada letra de "Tecnología e IA"
   (pedido de quien fundó CORIVA, 23-10-2026). Luz blanca con brillo celeste, a tono con la tarjeta; parte cuando la tarjeta aparece. ---------- */
.upn-card .tech-mark::before,
.upn-card .tech-mark::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .upn-card .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(191, 230, 243, 1)); }
  .upn-card .h1-trazo tspan { stroke-width: max(2px, .05em); }
  .js .upn-card.reveal.is-pending .h1-trazo tspan { animation: none; }
}

/* ---------- Servicios sin "Crecer" ni "Optimizar" (pedido de quien fundó CORIVA, 23-10-2026): cada tarjeta solo con su título,
   en negrita (600, el mismo grueso de "Tecnología e IA") y de vuelta a su tamaño (se había achicado para dejarle espacio a la etiqueta) ---------- */
.svc-card-head h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); font-weight: 600; }
@media (max-width: 640px) {
  .svc-card-head h3 { font-size: 1.25rem; }
}

/* ---------- Bajadas de las secciones en el celular (pedido de quien fundó CORIVA, 23-10-2026): más pequeñas y a todo el ancho,
   igual que la del hero, para que no ocupen tanto; y los puntos del fondo de servicios empiezan bajo la cabeza, no detrás del texto ---------- */
@media (max-width: 640px) {
  .section-lede { max-width: none; font-size: .875rem; line-height: 1.55; text-wrap: pretty; }
  .services::before { inset: 15rem 0 0; }
}

/* ---------- Upnegocio en el celular (pedido de quien fundó CORIVA, 23-10-2026): la bajada a todo el ancho de la tarjeta,
   con menos relleno a los lados, para que la tarjeta quede más baja (3 líneas en vez de 5) ---------- */
@media (max-width: 640px) {
  .upn-card { padding: 1.5rem 1.15rem; }
  .upn-cta { margin-top: 1.25rem; }
}

/* ---------- Hero: "Ver servicios" se nota sobre la foto (pedido de quien fundó CORIVA, 23-10-2026). En el celular, en blanco;
   en PC el blanco no se leía sobre la neblina clara, así que va oscuro, como antes, sobre una pastilla clara de vidrio. ---------- */
.hero .link-quiet { font-weight: 600; }
@media (max-width: 640px) {
  .hero .link-quiet { color: #FFFFFF; text-shadow: 0 1px 2px rgba(16, 30, 46, .35), 0 1px 12px rgba(16, 30, 46, .55); }
}
@media (min-width: 641px) {
  .hero .link-quiet {
    padding: .8rem 1.3rem;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 8px 20px -12px rgba(30, 45, 65, .35);
    transition: background-color 200ms ease;
  }
  .hero .link-quiet:hover { color: var(--ink); background: rgba(255, 255, 255, .72); }
}

/* ---------- Ilustración del hero solo con imágenes (pedido de quien fundó CORIVA, 23-10-2026): sin las líneas que imitaban textos
   ni los botones. En el notebook, la barra con el logo, la foto grande y tres fotos; en el celular, la foto grande y una debajo. ---------- */
.dev-hero::after { content: none; }
.dev-mhero { min-height: 56%; box-shadow: none; }
.dev-mlist { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.dev-mlist div { display: grid; align-items: stretch; padding: 0; background: none; }
.dev-mlist i { width: auto; height: auto; min-height: 0; border-radius: .8em; }

/* ---------- Servicios (pedido de quien fundó CORIVA, 23-10-2026) ----------
   En PC, el título en una sola línea y centrado junto con su bajada; la letra se ajusta al ancho para no partirse.
   Los títulos de las tarjetas, con el estilo de "Tecnología e IA" (azul acero del isotipo, en negrita);
   los servicios, más sutiles, y su descripción, un poco más pequeña. */
@media (min-width: 1024px) {
  .services-head { text-align: center; }
  .services-head .section-lede { margin-inline: auto; }
}
@media (min-width: 1200px) {
  .services-head { container-type: inline-size; }
  .services-head .br-pc { display: none; }
  .services-head .section-title { white-space: nowrap; font-size: min(var(--fs-h2), calc(100cqi / 33.6)); }
}
/* El título de cada servicio en su acero sólido (26-10-2026, "en light mode no se ve el título de servicios"): cada palabra va en
   un .svc-luz con posición propia (para su luz) y Safari, sobre todo en el iPhone, no pinta el degradado recortado a las letras
   dentro de esos elementos: el texto quedaba transparente y solo se veía la luz. La versión oscura ya iba en sólido. */
.svc-card-head h3 {
  font-weight: 600;
  color: #44607D;
  -webkit-text-fill-color: #44607D;
}
.svc-title { font-weight: 500; }
.svc-text small { font-size: .8rem; }

/* ---------- El celular del hero flota (pedido de quien fundó CORIVA, 23-10-2026): sube y baja con un leve giro, en un ciclo lento;
   con menos imágenes (la foto grande y una debajo). Con movimiento reducido queda quieto. ---------- */
@keyframes dev-flota-suave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .dev-phone { animation: mt-in 850ms var(--ease-out) both 550ms, dev-flota-suave 5.5s ease-in-out 1.4s infinite; }
}

/* ---------- Principios en un panel oscuro (23-10-2026, quien fundó CORIVA eligió "B · Panel oscuro", sin línea entre los íconos) ----------
   El azul acero profundo del isotipo, con la foto de la red fundida a la derecha (arriba en el celular). "precisión" lleva la luz
   que recorre las letras, aquí en blanco; los tres íconos se encienden uno tras otro y la etiqueta de vidrio va en la esquina. */
.js .reveal.is-pending .h1-trazo tspan { animation: none; }
.pp-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(2.25rem, 4.5vw, 4.5rem);
  color: #FFFFFF;
  background: linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%);
  box-shadow: 0 40px 80px -40px rgba(20, 30, 45, .6);
}
.pp-foto { position: absolute; z-index: -1; inset: 0 0 0 34%; }
.pp-foto picture,
.pp-foto img { display: block; width: 100%; height: 100%; }
.pp-foto img {
  object-fit: cover;
  object-position: 50% 62%;
  opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
}
.pp-head { max-width: 52rem; }
.pp-panel .section-title { color: #FFFFFF; }
.pp-panel .section-lede { color: rgba(255, 255, 255, .74); max-width: 50rem; text-wrap: balance; }
.pp-panel .h1-mark {
  color: #E3ECF5;
  background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-puntos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(2.5rem, 4vw, 3.75rem) 0 0; padding: 0; list-style: none; }
.pp-puntos li { display: grid; gap: .5rem; align-content: start; }
.pp-panel .principle-icon {
  background: rgba(255, 255, 255, .08);
  color: #D9E4EF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 4px rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pp-puntos h3 { margin-top: .6rem; color: #FFFFFF; font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.pp-puntos p { margin-top: .3rem; color: rgba(255, 255, 255, .7); font-size: .93rem; line-height: 1.55; max-width: 34ch; }
.principle-icon::after,
.principles-chip-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  box-shadow: 0 0 0 1.5px rgba(147, 168, 191, .95), 0 0 20px 2px rgba(147, 168, 191, .6);
  opacity: 0;
  pointer-events: none;
}
.principles-chip-icon::after { inset: -4px; border-radius: 50%; }
@keyframes nodo-luz {
  0% { opacity: 0; transform: scale(.9); }
  5% { opacity: 1; transform: scale(1); }
  24%, 100% { opacity: 0; transform: scale(1.08); }
}
.principles-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.05rem .45rem .45rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.principles-chip-icon { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; }
.principles-chip-icon .icon { width: 16px; height: 16px; }
.pp-chip {
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
  color: #FFFFFF;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.pp-chip .principles-chip-icon { background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: no-preference) {
  .pp-panel .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(150, 190, 230, 1)); }
  .pp-panel .h1-trazo tspan { stroke-width: max(2px, .05em); }
  .principle-icon::after { animation: nodo-luz 6s ease-out infinite; animation-delay: calc(1s + var(--i, 0) * 1.1s); }
  .principles-chip-icon::after { animation: nodo-luz 6s ease-out 4.3s infinite; }
}
@media (max-width: 760px) {
  .pp-panel { padding: 1.75rem 1.25rem; border-radius: 26px; }
  .pp-foto { inset: 0 0 45% 0; }
  .pp-foto img {
    opacity: .4;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  }
  .pp-head { text-align: center; }
  .pp-panel .section-lede { margin-inline: auto; text-wrap: pretty; }
  .pp-puntos { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 2rem; }
  .pp-puntos li { justify-items: center; gap: .65rem; text-align: center; }
  .pp-panel .principle-icon { width: 42px; height: 42px; border-radius: 13px; }
  .pp-puntos h3 { margin-top: 0; font-size: 1rem; }
  .pp-puntos p { margin-inline: auto; font-size: .875rem; }
  .pp-chip { position: static; display: flex; width: fit-content; margin: 1.75rem auto 0; font-size: .78rem; gap: .5rem; padding-right: .85rem; }
  .pp-chip .principles-chip-icon { width: 26px; height: 26px; }
  .pp-chip .principles-chip-icon .icon { width: 14px; height: 14px; }
}

/* =====================================================================
   Dos versiones para comparar (pedido de quien fundó CORIVA, 23-10-2026)
   - Clara (la normal): como está, con "Marketing con criterio" en su versión clara.
   - Oscura: con ?tema=oscuro en la dirección. El fondo de la página sigue blanco y las tarjetas van en el azul acero profundo
     del isotipo; el hero con la misma foto de las montañas oscurecida, la red con solo unas pocas líneas y la luz de las letras
     más visible, y arriba la palabra CORIVA en vez del isotipo.
   ===================================================================== */

/* ---------- Versión clara: "Marketing con criterio" en claro ---------- */
html:not([data-tema="oscuro"]) .pp-panel { color: var(--ink); background: linear-gradient(135deg, #FFFFFF 0%, #F4F7FA 50%, #E9EFF5 100%); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
html:not([data-tema="oscuro"]) .pp-foto img { opacity: .85; }
html:not([data-tema="oscuro"]) .pp-panel .section-title { color: var(--ink); }
html:not([data-tema="oscuro"]) .pp-panel .section-lede { color: var(--ink-2); }
html:not([data-tema="oscuro"]) .pp-panel .h1-mark { color: #44607D; background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html:not([data-tema="oscuro"]) .pp-panel .principle-icon {
  background: linear-gradient(160deg, #FFFFFF 0%, var(--mark-soft) 100%);
  color: var(--mark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--mark) 7%, transparent), 0 8px 18px -10px rgba(68, 96, 125, .45);
}
html:not([data-tema="oscuro"]) .pp-puntos h3 { color: var(--ink); }
html:not([data-tema="oscuro"]) .pp-puntos p { color: var(--ink-2); }
html:not([data-tema="oscuro"]) .pp-chip { color: var(--ink); background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 12px 28px -16px rgba(30, 45, 65, .45); }
html:not([data-tema="oscuro"]) .pp-chip .principles-chip-icon { background: linear-gradient(145deg, #587291, #3A516C); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-tema="oscuro"]) .pp-panel .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(170, 190, 215, 1)); }
  html:not([data-tema="oscuro"]) .pp-panel .h1-trazo tspan { stroke-width: max(1.4px, .032em); }
}

/* ---------- Versión oscura: el fondo de la página sigue blanco y solo las tarjetas van oscuras ---------- */
html[data-tema="oscuro"] :is(.svc-card, .process-card, .contact-stage) {
  --surface: #161F2B;
  --shell: rgba(255, 255, 255, .05);
  --ink: #E8EEF5;
  --ink-2: #B7C3D0;
  --ink-3: #8E9CAD;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --steel-2: rgba(255, 255, 255, .1);
  --steel-4: #7D93AB;
  --mark: #A9BED3;
  --mark-soft: rgba(169, 190, 211, .12);
  --icon-fg: #C9D6E4;
  --tile-ring: rgba(255, 255, 255, .14);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .25), 0 28px 60px -24px rgba(0, 0, 0, .55);
  color: var(--ink);
}
html[data-tema="oscuro"] {
  --contact-grad: radial-gradient(60% 70% at 18% 24%, rgba(120, 150, 185, .16) 0%, rgba(120, 150, 185, 0) 70%), linear-gradient(160deg, #16202C 0%, #1C2838 45%, #243447 100%);
  --contact-ink: #FFFFFF;
  --contact-ink-2: #C3CFDC;
  --contact-chip: rgba(255, 255, 255, .08);
}
html[data-tema="oscuro"] .contact-net { display: none; }

/* La barra de arriba: oscura sobre el hero y, arriba, la palabra CORIVA en vez del isotipo; al bajar vuelve a la clara */
.brand-palabra { display: none; }
html[data-tema="oscuro"] .brand img { display: none; }
html[data-tema="oscuro"] .brand-palabra { display: block; width: 84px; }
@media (max-width: 640px) {
  html[data-tema="oscuro"] .brand-palabra { width: 76px; }
}
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .nav-bar { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) :is(.nav-links a, .brand) { color: #FFFFFF; }
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .nav-toggle { background: rgba(255, 255, 255, .12); }
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .nav-toggle span { background: #FFFFFF; }

/* ---------- Versión oscura: el hero ---------- */
html[data-tema="oscuro"] .hero-frame { background: linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .6); }
html[data-tema="oscuro"] .hero-photo { inset: 0; height: auto; }
html[data-tema="oscuro"] .hero-photo img { opacity: .55; filter: saturate(.9); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 60%); }
html[data-tema="oscuro"] .hero-photo::after { display: none; }
html[data-tema="oscuro"] .hero-veil { background: linear-gradient(180deg, rgba(18, 26, 37, .78) 0%, rgba(18, 26, 37, .42) 42%, rgba(18, 26, 37, .12) 68%, rgba(18, 26, 37, .35) 100%), radial-gradient(70% 80% at 18% 45%, rgba(18, 26, 37, .6) 0%, rgba(18, 26, 37, 0) 70%); }
@media (max-width: 960px) {
  html[data-tema="oscuro"] .hero-photo img { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, #000 62%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, #000 62%); }
  html[data-tema="oscuro"] .hero-veil { background: linear-gradient(180deg, rgba(18, 26, 37, .8) 0%, rgba(18, 26, 37, .55) 50%, rgba(18, 26, 37, .2) 75%, rgba(18, 26, 37, .4) 100%); }
}
html[data-tema="oscuro"] .hero h1 { color: #FFFFFF; }
html[data-tema="oscuro"] .hero .h1-mark { color: #E3ECF5; background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-tema="oscuro"] .hero .hero-sub { color: rgba(255, 255, 255, .78); }
html[data-tema="oscuro"] .hero .eyebrow--marca { color: #FFFFFF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-tema="oscuro"] .hero .link-quiet,
html[data-tema="oscuro"] .hero .link-quiet:hover { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); text-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="oscuro"] .hero .link-quiet:hover { background: rgba(255, 255, 255, .18); }
}
@media (max-width: 640px) {
  html[data-tema="oscuro"] .hero .link-quiet { min-height: 52px; padding: .8rem 1.3rem; border-radius: 999px; }
}
html[data-tema="oscuro"] .dev-pantalla { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .6); }
html[data-tema="oscuro"] .dev-phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 50px -24px rgba(0, 0, 0, .7); }
html[data-tema="oscuro"] .dev-sombra { background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="oscuro"] .hero .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 9px rgba(150, 190, 230, 1)); }
  html[data-tema="oscuro"] .hero .h1-trazo tspan { stroke-width: max(2px, .045em); }
}
/* la red del hero, solo unas pocas: dos grupos pequeños abajo y una luz que los recorre */
html[data-tema="oscuro"] .net--live .net-pin,
html[data-tema="oscuro"] .net--live .net-line,
html[data-tema="oscuro"] .net--live .net-halo,
html[data-tema="oscuro"] .net--live .net-ring,
html[data-tema="oscuro"] .net--live .net-dot,
html[data-tema="oscuro"] .net--live .net-pulse { display: none; }
html[data-tema="oscuro"] .net--live .net-line:is([d^="M700,520 Q630"], [d^="M700,520 Q780"], [d^="M980,560 Q1040"], [d^="M1010,420 Q995"], [d^="M1240,535 Q1170"]),
html[data-tema="oscuro"] .net--live circle:is([cx="560"][cy="610"], [cx="700"][cy="520"], [cx="860"][cy="640"], [cx="980"][cy="560"], [cx="1010"][cy="420"], [cx="1100"][cy="690"], [cx="1240"][cy="535"]),
html[data-tema="oscuro"] .net--live .net-pulse:nth-child(5) { display: inline; }
html[data-tema="oscuro"] .net--live .net-line { opacity: .3; stroke: #DCE6F0; }
html[data-tema="oscuro"] .net--live .net-dot { opacity: .8; }
html[data-tema="oscuro"] .net--live .net-halo { opacity: .08; }
html[data-tema="oscuro"] .net--live .net-ring { opacity: .18; }

/* ---------- Versión oscura: servicios ---------- */
html[data-tema="oscuro"] .svc-card { background: linear-gradient(160deg, #18222F 0%, #1E2A3A 100%); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -30px rgba(20, 30, 45, .5); }
html[data-tema="oscuro"] .svc-card-media::after { background: linear-gradient(180deg, rgba(22, 31, 43, 0) 30%, rgba(22, 31, 43, .6) 68%, var(--surface) 100%); }
html[data-tema="oscuro"] .svc-card-media img { filter: saturate(.95) brightness(.88); }
html[data-tema="oscuro"] .svc-card-head h3 { color: #E3ECF5; background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-tema="oscuro"] .svc-icon { background: rgba(255, 255, 255, .06); color: #C9D6E4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
html[data-tema="oscuro"] #marketing { --svc-suave: linear-gradient(135deg, rgba(216, 143, 162, .16) 0%, rgba(165, 139, 203, .08) 100%); --svc-flecha: #DDA8C6; }
html[data-tema="oscuro"] #tecnologia { --svc-suave: linear-gradient(135deg, rgba(141, 179, 218, .18) 0%, rgba(169, 190, 211, .08) 100%); --svc-flecha: #A9C8E6; }

/* ---------- Versión oscura: "Marketing con criterio" usa el panel oscuro (sus colores de base) ---------- */


/* ---------- Servicios: la foto de cada tarjeta se desvanece sobre la tarjeta, sin corte (pedido de quien fundó CORIVA, 23-10-2026) ----------
   En vez de pintar un degradé encima (que no calzaba con el fondo de la tarjeta), la foto se funde con una máscara suave, así queda
   pareja en la versión clara y en la oscura. El borde fino de la tarjeta va encima, para que siga también junto a la foto. */
.svc-card-media { background: none; }
.svc-card-media::after { display: none; }
.svc-card-media img {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .8) 52%, rgba(0, 0, 0, .5) 68%, rgba(0, 0, 0, .22) 83%, rgba(0, 0, 0, .06) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .8) 52%, rgba(0, 0, 0, .5) 68%, rgba(0, 0, 0, .22) 83%, rgba(0, 0, 0, .06) 94%, transparent 100%);
}
.svc-card { box-shadow: 0 1px 2px rgba(68, 88, 111, .04), 0 24px 50px -34px rgba(46, 65, 88, .38); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
html[data-tema="oscuro"] .svc-card { box-shadow: 0 24px 50px -30px rgba(20, 30, 45, .5); }

/* ---------- "Marketing con criterio": el panel tan ancho como el del proceso y el de contacto, y en PC la bajada en una línea
   (pedido de quien fundó CORIVA, 23-10-2026); la letra se ajusta un poco al ancho para no partirse ---------- */
.pp-panel { max-width: 1720px; margin-inline: var(--gutter); }
@media (min-width: 1800px) {
  .pp-panel { margin-inline: auto; }
}
@media (max-width: 640px) {
  .pp-panel { margin-inline: 12px; }
}
@media (min-width: 1280px) {
  .pp-head { max-width: none; container-type: inline-size; }
  .pp-panel .section-lede { max-width: none; white-space: nowrap; font-size: clamp(14.5px, calc(100cqi / 73.2), 1.0625rem); }
}

/* ---------- Upnegocio en PC (pedido de quien fundó CORIVA, 23-10-2026): a la derecha, las caras un poco más pequeñas y, debajo,
   el botón "Conocer Upnegocio"; el texto queda solo a la izquierda. En el celular sigue igual (el botón con las caras pequeñas). ---------- */
@media (min-width: 761px) {
  .upn-lado { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; padding-right: clamp(.5rem, 2vw, 2.5rem); }
  .upn-lado .upn-faces--side { padding-right: 0; }
  .upn-faces--side .upn-face { width: clamp(64px, 5.4vw, 84px); height: clamp(64px, 5.4vw, 84px); margin-left: -20px; border-width: 3px; }
  .upn-lado .upn-cta { margin-top: 0; }
}

/* "Marketing con criterio": el título en dos líneas (la bajada sí va en una), para que no llegue a la etiqueta de la derecha */
@media (min-width: 761px) {
  .pp-panel .section-title { max-width: 12.6em; }
}

/* ---------- Servicios (pedido de quien fundó CORIVA, 23-10-2026): "Marketing digital" y "Soluciones tecnológicas" con la luz que recorre
   las letras, como "Tecnología e IA"; en la versión oscura, en blanco; y en PC centrados, igual que en el celular ---------- */
.svc-luz { position: relative; white-space: nowrap; }
.svc-card-head { justify-content: center; }
.svc-card-lede { text-align: center; }
html[data-tema="oscuro"] .svc-card-head h3 { color: #FFFFFF; background: none; -webkit-text-fill-color: #FFFFFF; }
@media (max-width: 360px) {
  .svc-card-head h3 { font-size: 1.12rem; }
}

/* Upnegocio en PC: el título en dos líneas, "tu equipo digital" / "para ordenar y digitalizar tu negocio"; el texto usa el ancho que dejó libre el botón */
@media (min-width: 761px) {
  .upn-copy { max-width: none; }
  .upn-card .section-title { font-size: clamp(1.7rem, 1rem + 1.6vw, 2.4rem); }
  .upn-card .section-lede { max-width: 62ch; }
}

/* ---------- Servicios en la versión oscura (pedido de quien fundó CORIVA, 23-10-2026): la foto no corta de golpe al color oscuro.
   Como en el hero, la foto va oscurecida y se extiende detrás del título, fundiéndose de a poco con la tarjeta. ---------- */
html[data-tema="oscuro"] .svc-card-media { overflow: visible; }
html[data-tema="oscuro"] .svc-card-media img {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 290%;
  opacity: .55;
  filter: saturate(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .82) 22%, rgba(0, 0, 0, .52) 45%, rgba(0, 0, 0, .24) 68%, rgba(0, 0, 0, .07) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .82) 22%, rgba(0, 0, 0, .52) 45%, rgba(0, 0, 0, .24) 68%, rgba(0, 0, 0, .07) 86%, transparent 100%);
}

/* =====================================================================
   Proceso del inicio: "Ruta iluminada" (23-10-2026, elegida por quien fundó CORIVA entre 3 propuestas)
   Los 4 pasos sobre una ruta: una luz la recorre de punta a punta y enciende cada número al pasar; el último es un visto verde.
   Los textos usan solo lo que el sitio ya promete (respuesta en 24 horas hábiles, diagnóstico, plazos y cotización cerrada) y
   terminan en un botón para cotizar. En la versión oscura, el panel va en el azul acero profundo. En tablet y celular la ruta
   va vertical y compacta (número a la izquierda, texto al lado), para que la tarjeta no quede larga.
   Las otras páginas siguen con su proceso anterior (.process-banner y .steps).
   ===================================================================== */
.process--ruta { padding-block: 0 calc(var(--section-y) * .6); }
.ruta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1720px;
  margin-inline: var(--gutter);
  padding: clamp(2.75rem, 5vw, 5rem) clamp(1.5rem, 4.5vw, 4.5rem) clamp(2.5rem, 4.5vw, 4.25rem);
  border-radius: 32px;
  text-align: center;
  background: linear-gradient(180deg, #F7FAFC 0%, #EEF3F8 100%);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
}
@media (min-width: 1800px) {
  .ruta-panel { margin-inline: auto; }
}
.ruta-foto { position: absolute; z-index: -1; inset: 42% 0 0 0; }
.ruta-foto picture,
.ruta-foto img { display: block; width: 100%; height: 100%; }
.ruta-foto img {
  object-fit: cover;
  object-position: 50% 72%;
  opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 45%, #000 100%);
}
.ruta-head { max-width: 46rem; margin-inline: auto; }
.ruta-head .section-lede { margin-inline: auto; text-wrap: balance; }
.ruta-pasos {
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --nodo: 62px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin: clamp(2.5rem, 4.5vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
}
.ruta-pasos::before,
.ruta-pasos::after {
  content: "";
  position: absolute;
  top: calc(var(--nodo) / 2 - 1px);
  left: calc((100% - 3 * var(--gap)) / 8);
  right: calc((100% - 3 * var(--gap)) / 8);
  height: 2px;
  border-radius: 2px;
}
.ruta-pasos::before { background: color-mix(in srgb, var(--mark) 26%, transparent); }
.ruta-pasos::after { background: radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 45%, rgba(186, 200, 218, 0) 100%) -90px 50% / 90px 12px no-repeat; }
.ruta-pasos li { position: relative; display: grid; justify-items: center; align-content: start; gap: .45rem; }
.ruta-nodo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--nodo);
  height: var(--nodo);
  margin-bottom: .75rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--mark);
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 28%, transparent), 0 0 0 6px rgba(255, 255, 255, .75), 0 12px 26px -14px rgba(68, 96, 125, .55);
}
.ruta-nodo--ok { background: var(--ok-solid); color: #FFFFFF; box-shadow: 0 0 0 6px var(--ok-halo), 0 12px 26px -14px rgba(40, 110, 80, .55); }
.ruta-nodo .icon { width: 22px; height: 22px; }
.ruta-nodo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(147, 168, 191, .95), 0 0 22px 3px rgba(147, 168, 191, .65);
  opacity: 0;
  pointer-events: none;
}
.ruta-pasos h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.ruta-pasos p { max-width: 28ch; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.ruta-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.ruta-nota {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .75rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .84rem;
  font-weight: 500;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
}
.ruta-nota::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-solid); box-shadow: 0 0 0 3px var(--ok-halo); }
@keyframes ruta-viaje { 0% { background-position: -90px 50%; } 75%, 100% { background-position: calc(100% + 90px) 50%; } }
@keyframes ruta-baja { 0% { background-position: 50% -56px; } 22%, 100% { background-position: 50% calc(100% + 56px); } }
@keyframes ruta-nodo { 0% { opacity: 0; transform: scale(.92); } 4% { opacity: 1; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1.08); } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .ruta-pasos::after { animation: ruta-viaje 8s linear .8s infinite; }
  .ruta-nodo::after { animation: ruta-nodo 8s ease-out infinite; animation-delay: calc(1.05s + var(--i) * 1.83s); }
}

/* Versión oscura */
html[data-tema="oscuro"] .ruta-panel { background: linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(20, 30, 45, .55); }
html[data-tema="oscuro"] .ruta-foto img { opacity: .45; }
html[data-tema="oscuro"] .process--ruta .section-title { color: #FFFFFF; }
html[data-tema="oscuro"] .process--ruta .section-lede { color: rgba(255, 255, 255, .76); }
html[data-tema="oscuro"] .ruta-pasos::before { background: rgba(255, 255, 255, .16); }
html[data-tema="oscuro"] .ruta-nodo { background: #223044; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 6px rgba(255, 255, 255, .04), 0 12px 26px -14px rgba(0, 0, 0, .6); }
html[data-tema="oscuro"] .ruta-nodo--ok { background: var(--ok-solid); box-shadow: 0 0 0 6px rgba(74, 158, 119, .2); }
html[data-tema="oscuro"] .ruta-pasos h3 { color: #FFFFFF; }
html[data-tema="oscuro"] .ruta-pasos p { color: rgba(255, 255, 255, .72); }
html[data-tema="oscuro"] .ruta-nota { color: rgba(255, 255, 255, .82); background: rgba(18, 26, 37, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* Tablet y celular: la ruta vertical y compacta */
@media (max-width: 900px) {
  .ruta-pasos { --nodo: 42px; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; max-width: 34rem; margin: 1.75rem auto 0; text-align: left; }
  .ruta-pasos::before,
  .ruta-pasos::after { display: none; }
  .ruta-pasos li { grid-template-columns: var(--nodo) minmax(0, 1fr); column-gap: .9rem; row-gap: .15rem; justify-items: start; }
  .ruta-nodo { grid-row: span 2; margin: 0; font-size: .95rem; }
  .ruta-nodo .icon { width: 17px; height: 17px; }
  .ruta-nodo,
  .ruta-nodo--ok,
  html[data-tema="oscuro"] .ruta-nodo,
  html[data-tema="oscuro"] .ruta-nodo--ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 28%, transparent); }
  .ruta-nodo--ok,
  html[data-tema="oscuro"] .ruta-nodo--ok { box-shadow: none; }
  html[data-tema="oscuro"] .ruta-nodo:not(.ruta-nodo--ok) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  .ruta-pasos h3 { padding-top: .55rem; font-size: .98rem; }
  .ruta-pasos p { max-width: none; font-size: .84rem; line-height: 1.5; }
  .ruta-pasos li:not(:last-child)::before,
  .ruta-pasos li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--nodo) / 2 - 1px);
    top: calc(var(--nodo) + 5px);
    bottom: calc(-1.15rem + 5px);
    width: 2px;
    border-radius: 2px;
  }
  .ruta-pasos li:not(:last-child)::before { background: color-mix(in srgb, var(--mark) 26%, transparent); }
  html[data-tema="oscuro"] .ruta-pasos li:not(:last-child)::before { background: rgba(255, 255, 255, .16); }
  .ruta-pasos li:not(:last-child)::after { background: radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 45%, rgba(186, 200, 218, 0) 100%) 50% -56px / 12px 56px no-repeat; }
  .ruta-cta { margin-top: 1.6rem; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ruta-pasos li:not(:last-child)::after { animation: ruta-baja 8s linear infinite; animation-delay: calc(1s + var(--i) * 2s); }
  .ruta-nodo::after { animation: ruta-nodo 8s ease-out infinite; animation-delay: calc(.8s + var(--i) * 2s); }
}
@media (max-width: 760px) {
  .ruta-panel { margin-inline: 12px; padding: 1.85rem 1.1rem 1.5rem; border-radius: 24px; }
  .ruta-foto { inset: 58% 0 0 0; }
  .ruta-cta { flex-direction: column; align-items: stretch; gap: .65rem; }
  .ruta-cta .btn { width: 100%; justify-content: space-between; }
  .ruta-nota { align-self: center; font-size: .8rem; }
}

/* ---------- Pie de página: WhatsApp e Instagram en tarjetas llamativas, cada una con el color de su app
   (pedido de quien fundó CORIVA, 23-10-2026). Iguales en la versión clara y en la oscura (el pie va sobre el fondo blanco). ---------- */
.footer-socials { gap: .75rem; }
.footer-meta .footer-socials a {
  gap: .7rem;
  min-height: 52px;
  padding: .45rem 1rem .45rem .5rem;
  border-radius: 16px;
  color: #FFFFFF;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 26px -14px var(--sombra-app, rgba(20, 30, 45, .45));
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, filter 200ms ease;
}
.footer-meta .footer-socials .social-whatsapp { --sombra-app: rgba(18, 140, 110, .6); background: linear-gradient(135deg, #22C55E 0%, #16A34A 45%, #128C7E 100%); }
.footer-meta .footer-socials .social-instagram { --sombra-app: rgba(193, 53, 132, .55); background: linear-gradient(120deg, #F9A23A 0%, #E1306C 38%, #C13584 64%, #833AB4 100%); }
.footer-meta .footer-socials a::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: .1rem;
  background: currentColor;
  opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.footer-socials img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 4px 10px -4px rgba(0, 0, 0, .35); }
.footer-meta .footer-socials a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .footer-meta .footer-socials a:hover { color: #FFFFFF; transform: translateY(-2px); filter: saturate(1.1) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 30px -14px var(--sombra-app); }
  .footer-socials a:hover img { transform: none; }
}
@media (max-width: 640px) {
  .footer-socials { flex-direction: column; align-items: stretch; width: 100%; max-width: 21rem; margin-inline: auto; }
  .footer-meta .footer-socials a { justify-content: center; }
}

/* ---------- "Marketing con criterio", versión clara (pedido de quien fundó CORIVA, 23-10-2026): los textos de la derecha no se leían
   sobre la foto. La foto sigue arriba a la derecha, pero se desvanece hacia abajo bajo un velo claro, y los textos van un tono más oscuro. ---------- */
html:not([data-tema="oscuro"]) .pp-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 249, 252, 0) 0%, rgba(246, 249, 252, .12) 30%, rgba(246, 249, 252, .64) 52%, rgba(246, 249, 252, .76) 72%, rgba(246, 249, 252, .8) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
  pointer-events: none;
}
html:not([data-tema="oscuro"]) .pp-puntos h3 { color: var(--ink); }
html:not([data-tema="oscuro"]) .pp-puntos p { color: #43566B; }
html:not([data-tema="oscuro"]) .pp-panel .section-lede { color: #4A5D72; }

/* =====================================================================
   El sol y la luna de la barra: cambia entre la versión clara y la oscura (pedido de quien fundó CORIVA, 23-10-2026)
   Pequeño y sutil: una píldora con los dos íconos, el elegido sobre un círculo. Funciona en todas las páginas.
   ===================================================================== */
.tema { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--line); }
.tema-op {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.tema-op::after { content: ""; position: absolute; inset: -7px -1px; }
.tema-op .icon { width: 15px; height: 15px; }
.tema-op[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 45, 65, .18); }
.tema-op:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tema-op:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .tema-op:not([aria-pressed="true"]):hover { color: var(--ink); }
}
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .tema { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .tema-op { color: rgba(255, 255, 255, .7); }
html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .tema-op[aria-pressed="true"] { background: rgba(255, 255, 255, .18); color: #FFFFFF; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="oscuro"] .nav:not([data-scrolled="true"]) .tema-op:not([aria-pressed="true"]):hover { color: #FFFFFF; }
}
@media (max-width: 860px) {
  .nav-bar { gap: .6rem; }
}

/* ---------- La versión oscura también en "Páginas web", "Catálogo digital" y la página de error:
   su proceso y la franja final para cotizar van en tarjetas oscuras, como en el inicio ---------- */
html[data-tema="oscuro"] .process-banner,
html[data-tema="oscuro"] .process-banner[data-tone] {
  background: #16202C;
  --tone-ink: #FFFFFF;
  --tone-ink-2: rgba(255, 255, 255, .78);
  --tone-scrim: linear-gradient(180deg, rgba(18, 26, 37, .72) 0%, rgba(18, 26, 37, .4) 45%, rgba(18, 26, 37, .3) 100%);
  --tone-shadow: none;
}
html[data-tema="oscuro"] .process-photo img { opacity: .55; filter: saturate(.9); }
html[data-tema="oscuro"] .process-card { background: linear-gradient(160deg, #1A2431 0%, #202D3E 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(20, 30, 45, .55); }
html[data-tema="oscuro"] .step h3 { color: #FFFFFF; }
html[data-tema="oscuro"] .step p { color: rgba(255, 255, 255, .7); }
html[data-tema="oscuro"] .step-icon { background: rgba(255, 255, 255, .08); color: #D9E4EF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 4px rgba(255, 255, 255, .04); }
html[data-tema="oscuro"] .step:last-child .step-icon { background: var(--ok-solid); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(74, 158, 119, .22); }
html[data-tema="oscuro"] .step::before { background: rgba(255, 255, 255, .12); }
html[data-tema="oscuro"] .step::after { background: linear-gradient(90deg, #7D93AB, #DCE6F0); }
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  html[data-tema="oscuro"] .steps:not([data-n="5"]):not([data-n="6"]).is-active .step::after {
    background:
      radial-gradient(closest-side, #FFFFFF 0, rgba(186, 200, 218, .95) 45%, rgba(186, 200, 218, 0) 100%) -3em 50% / 3em 8px no-repeat,
      linear-gradient(90deg, #7D93AB, #DCE6F0);
  }
}
@media (max-width: 860px) {
  html[data-tema="oscuro"] .step::after { background: linear-gradient(180deg, #7D93AB, #DCE6F0); }
}
html[data-tema="oscuro"] .cta-panel {
  background:
    radial-gradient(50% 80% at 85% 20%, rgba(120, 150, 185, .18) 0%, transparent 70%),
    linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(20, 30, 45, .55);
}
html[data-tema="oscuro"] .cta-panel h2 { color: #FFFFFF; }
html[data-tema="oscuro"] .cta-panel .section-lede { color: rgba(255, 255, 255, .76); }

/* ---------- "Marketing con criterio" en el celular, más compacto (pedido de quien fundó CORIVA, 23-10-2026: la tarjeta quedaba
   muy larga): textos más pequeños y cada punto con su ícono pequeño al lado del título, todo centrado ---------- */
@media (max-width: 760px) {
  .pp-panel { padding: 1.6rem 1.1rem 1.35rem; }
  .pp-panel .section-title { font-size: 1.45rem; line-height: 1.16; }
  .pp-panel .section-lede { margin-top: .6rem; font-size: .84rem; line-height: 1.5; }
  .pp-puntos { gap: 1.05rem; margin-top: 1.35rem; }
  .pp-puntos li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .55rem; text-align: center; }
  .pp-puntos li > div { display: contents; }
  .pp-panel .principle-icon { width: 30px; height: 30px; border-radius: 9px; }
  .pp-panel .principle-icon .icon { width: 15px; height: 15px; }
  .pp-panel .principle-icon::after { inset: -4px; border-radius: 12px; }
  .pp-puntos h3 { margin: 0; font-size: .95rem; }
  .pp-puntos p { flex-basis: 100%; max-width: 34ch; margin: 0 auto; font-size: .82rem; line-height: 1.5; }
  .pp-chip { margin-top: 1.25rem; }
}

/* ---------- Servicios (pedido de quien fundó CORIVA, 23-10-2026) ----------
   - En PC, cada servicio también en su tarjeta de color suave, como en el celular (rosado-lila en Marketing, verde-azulado en Tecnología),
     con su ícono y su flecha del color del área.
   - El título de cada tarjeta sube un poco sobre el final de la foto (en PC y en el celular), para que no quede todo apretado abajo. */
.svc-card-body { position: relative; margin-top: -1.6rem; }
@media (max-width: 640px) {
  .svc-card-body { margin-top: -1.35rem; }
}
@media (min-width: 641px) {
  .svc-list { display: grid; gap: .55rem; margin-top: .95rem; border-top: 0; }
  .svc-list li + li::before { display: none; }
  .svc-row { margin: 0; padding: .7rem .8rem .7rem .7rem; border-radius: 16px; background: var(--svc-suave); box-shadow: none; }
  .svc-icon { background: rgba(255, 255, 255, .78); color: var(--svc-flecha); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95); }
  .svc-go { background: rgba(255, 255, 255, .6); color: var(--svc-flecha); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 32%, transparent); }
  html[data-tema="oscuro"] .svc-icon { background: rgba(255, 255, 255, .07); color: var(--svc-flecha); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  html[data-tema="oscuro"] .svc-go { background: rgba(255, 255, 255, .05); }
}
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
  .svc-row:hover { background: var(--svc-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 30%, transparent), 0 12px 24px -18px rgba(30, 45, 65, .45); }
  .svc-row:hover .svc-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 40%, transparent); }
  .svc-row:hover .svc-go { color: #FFFFFF; background: var(--svc-flecha); box-shadow: none; transform: translate(2px, -2px); }
}

/* "Marketing con criterio" en el celular, aún más compacto (pedido de quien fundó CORIVA, 23-10-2026: "acumular varias cosas en una fila"):
   cada punto en una fila, con su ícono pequeño a la izquierda y el título y el texto al lado, como la ruta del proceso */
@media (max-width: 760px) {
  .pp-panel .section-lede { max-width: none; font-size: .82rem; }
  .pp-puntos { max-width: 30rem; gap: .95rem; margin: 1.3rem auto 0; }
  .pp-puntos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: .8rem; row-gap: 0; align-items: start; justify-items: start; text-align: left; }
  .pp-puntos li > div { display: block; }
  .pp-panel .principle-icon { width: 34px; height: 34px; margin-top: .05rem; border-radius: 10px; }
  .pp-panel .principle-icon .icon { width: 16px; height: 16px; }
  .pp-puntos h3 { font-size: .94rem; line-height: 1.3; }
  .pp-puntos p { max-width: none; margin: .15rem 0 0; font-size: .8rem; line-height: 1.45; }
  .pp-chip { margin-top: 1.15rem; }
}

/* ---------- Servicios: los títulos más arriba (pedido de quien fundó CORIVA, 23-10-2026: "está muy abajo todo") ----------
   Versión clara: la franja de la foto, más baja, y el título sube sobre su final desvanecido.
   Versión oscura: la foto ya se ve detrás del contenido, así que la franja casi desaparece y el título queda cerca del borde de arriba. */
.svc-card-media { height: clamp(72px, 5.8vw, 86px); }
.svc-card-body { margin-top: -1.75rem; }
@media (max-width: 640px) {
  .svc-card-media { height: 64px; }
  .svc-card-body { margin-top: -1.5rem; }
}
html[data-tema="oscuro"] .svc-card-media { height: 2.4rem; }
html[data-tema="oscuro"] .svc-card-media img { height: 300px; }
html[data-tema="oscuro"] .svc-card-body { margin-top: -.25rem; }
@media (max-width: 640px) {
  html[data-tema="oscuro"] .svc-card-media { height: 2rem; }
  html[data-tema="oscuro"] .svc-card-media img { height: 250px; }
}

/* ---------- Los cuatro pasos en el celular, más compactos (pedido de quien fundó CORIVA, 23-10-2026: "se ve muy larga"):
   textos más pequeños, números más chicos, menos aire entre pasos y el botón con su nota más juntos ---------- */
@media (max-width: 760px) {
  .ruta-panel { padding: 1.6rem 1.1rem 1.35rem; }
  .process--ruta .section-title { font-size: 1.45rem; line-height: 1.16; }
  .process--ruta .section-lede { margin-top: .6rem; font-size: .82rem; line-height: 1.5; }
  .ruta-pasos { --nodo: 34px; gap: .95rem; margin-top: 1.3rem; }
  .ruta-pasos li { column-gap: .8rem; }
  .ruta-nodo { font-size: .85rem; }
  .ruta-nodo .icon { width: 15px; height: 15px; }
  .ruta-pasos h3 { padding-top: .3rem; font-size: .94rem; }
  .ruta-pasos p { font-size: .8rem; line-height: 1.45; }
  .ruta-pasos li:not(:last-child)::before,
  .ruta-pasos li:not(:last-child)::after { top: calc(var(--nodo) + 4px); bottom: calc(-.95rem + 4px); }
  .ruta-cta { margin-top: 1.25rem; gap: .5rem; }
  .ruta-nota { padding: .3rem .75rem .3rem .65rem; font-size: .76rem; }
}

/* ---------- "Marketing con criterio" en el celular (pedido de quien fundó CORIVA, 23-10-2026): los tres puntos en fila hacia la derecha,
   en tarjetas de vidrio que se deslizan de lado (se alcanza a ver la siguiente), para que no quede todo hacia abajo y se distinga
   de los cuatro pasos de más abajo ---------- */
@media (max-width: 760px) {
  .pp-puntos {
    display: flex;
    gap: .7rem;
    max-width: none;
    margin: 1.3rem -1.1rem 0;
    padding: 0 1.1rem .3rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.1rem;
    scrollbar-width: none;
  }
  .pp-puntos::-webkit-scrollbar { display: none; }
  .pp-puntos li {
    flex: 0 0 min(78%, 270px);
    display: block;
    padding: .95rem 1rem 1rem;
    border-radius: 18px;
    text-align: left;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .pp-puntos li > div { display: block; margin-top: .65rem; }
  .pp-panel .principle-icon { margin-top: 0; }
  .pp-puntos h3 { font-size: .94rem; }
  .pp-puntos p { margin-top: .25rem; }
  html:not([data-tema="oscuro"]) .pp-puntos li { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 10px 24px -18px rgba(30, 45, 65, .45); }
}

/* ---------- Versión oscura en las otras páginas: la etiqueta de arriba del hero y el texto de la página de error, legibles ---------- */
html[data-tema="oscuro"] .hero .eyebrow { color: #FFFFFF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-tema="oscuro"] .hero .section-lede { color: rgba(255, 255, 255, .78); }

/* ---------- "Marketing con criterio" en el celular: las tarjetas avanzan solas, lentamente, una a una (pedido de quien fundó CORIVA,
   23-10-2026, sin flecha). Mientras se deslizan solas se suelta el ajuste a cada tarjeta, para que el movimiento sea parejo. ---------- */
@media (max-width: 760px) {
  .pp-fila { margin-top: 1.3rem; }
  .pp-fila .pp-puntos { margin-top: 0; }
  .pp-puntos.is-auto { scroll-snap-type: none; }
}

/* =====================================================================
   Contacto (pedido de quien fundó CORIVA, 23-10-2026: "que sea wow", con "Escríbenos por correo" arriba y "por WhatsApp" abajo)
   La tarjeta lleva un estado con un punto verde que late y los dos canales en tarjetas grandes de color, cada una con su ícono, su dato
   y una flecha: el correo en el azul acero de la marca y WhatsApp en su verde. Una luz suave las cruza de vez en cuando.
   En el celular, los tres puntos de la izquierda van en una sola fila y la tarjeta usa todo el ancho.
   ===================================================================== */
.contacto-estado {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding: .38rem .85rem .38rem .7rem;
  border-radius: 999px;
  color: #2F7D5B;
  background: rgba(74, 158, 119, .12);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 119, .22);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.contacto-estado i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-solid); }
@keyframes contacto-pulso { 0% { box-shadow: 0 0 0 0 rgba(74, 158, 119, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(74, 158, 119, 0); } }
html[data-tema="oscuro"] .contacto-estado { color: #9ADCBD; background: rgba(74, 158, 119, .16); box-shadow: inset 0 0 0 1px rgba(154, 220, 189, .25); }
.contact-direct h3 { font-weight: 600; }
.contacto-canales { display: grid; gap: .75rem; margin-top: .35rem; }
.contacto-canal {
  --sombra-canal: rgba(40, 60, 85, .55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .95rem;
  padding: .85rem 1rem .85rem .85rem;
  border-radius: 18px;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -16px var(--sombra-canal);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, filter 200ms ease;
}
.contacto-canal--correo { background: linear-gradient(135deg, #5F7A98 0%, #44607D 45%, #2E4560 100%); }
.contacto-canal--wa { --sombra-canal: rgba(18, 140, 110, .55); background: linear-gradient(135deg, #22C55E 0%, #16A34A 45%, #128C7E 100%); }
.contacto-canal-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.contacto-canal-icono .icon { width: 22px; height: 22px; }
.contacto-canal-icono img { display: block; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.contacto-canal-texto { display: grid; gap: .12rem; min-width: 0; }
.contacto-canal-texto strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.contacto-canal-texto small { overflow: hidden; font-size: .82rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; opacity: .86; }
.contacto-canal-flecha { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.contacto-canal-flecha .icon { width: 15px; height: 15px; }
.contacto-canal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  pointer-events: none;
}
@keyframes contacto-brillo { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
.contacto-canal:active { transform: scale(.985); }
.contacto-canal:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .contacto-canal:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 36px -16px var(--sombra-canal); }
  .contacto-canal:hover .contacto-canal-flecha { transform: translate(2px, -2px); background: rgba(255, 255, 255, .28); }
}
@media (prefers-reduced-motion: no-preference) {
  .contacto-estado i { animation: contacto-pulso 2.2s ease-out infinite; }
  .contacto-canal::after { animation: contacto-brillo 7s ease-in-out 1.5s infinite; }
  .contacto-canal--wa::after { animation-delay: 2.4s; }
}
@media (max-width: 640px) {
  .contact-stage { padding-block: 2.25rem 1.25rem; }
  .contact-intro .section-title { margin-top: 1rem; }
  .contact-intro .section-lede { font-size: .86rem; line-height: 1.5; }
  .contact-next { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.4rem; padding-top: 1.2rem; }
  .contact-next li { flex-direction: column; align-items: center; gap: .45rem; max-width: none; text-align: center; }
  .contact-next-icon { width: 36px; height: 36px; }
  .contact-next-icon .icon { width: 17px; height: 17px; }
  .contact-next li > span:last-child { display: block; padding: 0; font-size: 0; line-height: 0; }
  .contact-next strong { display: block; font-size: .76rem; line-height: 1.3; }
  .contact-grid { gap: 1.5rem; }
  .form-card .bezel-core { padding: 1.2rem 1.05rem 1.25rem; }
  .contact-direct { gap: .8rem; padding: 0; text-align: left; }
  .contact-direct h3 { font-size: 1.2rem; }
  .contact-direct p { margin: 0; font-size: .86rem; line-height: 1.5; }
  .contacto-canal { gap: .8rem; padding: .75rem .8rem .75rem .75rem; border-radius: 16px; }
  .contacto-canal-icono { width: 42px; height: 42px; border-radius: 12px; }
  .contacto-canal-texto strong { font-size: .95rem; }
  .contacto-canal-texto small { font-size: .78rem; }
  .contacto-canal-flecha { width: 32px; height: 32px; }
}

/* ---------- "Marketing con criterio, tecnología con precisión." en una línea en PC (pedido de quien fundó CORIVA, 23-10-2026):
   la etiqueta "Cada entrega, probada y revisada" pasa arriba a la izquierda, sobre el título, y la letra se ajusta al ancho para no partirse ---------- */
@media (min-width: 761px) {
  .pp-panel { display: flex; flex-direction: column; }
  .pp-chip { position: static; order: -1; align-self: flex-start; margin-bottom: 1.3rem; }
  .pp-head { max-width: none; container-type: inline-size; }
  .pp-panel .section-title { max-width: none; white-space: nowrap; font-size: min(var(--fs-h2), calc(100cqi / 23.8)); }
}

/* ---------- Los cuatro pasos en PC (pedido de quien fundó CORIVA, 23-10-2026): el título en una línea y la bajada en otra;
   la letra se ajusta un poco al ancho para no partirse ---------- */
@media (min-width: 901px) {
  .ruta-head { max-width: none; container-type: inline-size; }
  .ruta-head .section-title { white-space: nowrap; font-size: min(var(--fs-h2), calc(100cqi / 22.7)); }
}
@media (min-width: 1100px) {
  .ruta-head .section-lede { max-width: none; white-space: nowrap; font-size: min(1.0625rem, calc(100cqi / 57.5)); }
}

/* ---------- Contacto en el celular, más corto (pedido de quien fundó CORIVA, 23-10-2026): textos más pequeños, sin el párrafo de la tarjeta
   (lo dicen la etiqueta verde y la bajada) y los botones sin la flecha redonda, para que su texto quepa en una línea ---------- */
@media (max-width: 640px) {
  .contact-stage { padding-block: 1.75rem 1rem; }
  .contact-intro .section-title { margin-top: .75rem; font-size: 1.45rem; line-height: 1.16; }
  .contact-intro .section-lede { margin-top: .55rem; font-size: .82rem; }
  .contact-next { margin-top: 1.1rem; padding-top: 1rem; }
  .contact-next-icon { width: 30px; height: 30px; }
  .contact-next-icon .icon { width: 15px; height: 15px; }
  .contact-next strong { font-size: .72rem; }
  .contact-grid { gap: 1.1rem; }
  .form-card .bezel-core { padding: 1rem .95rem 1.05rem; }
  .contact-direct { gap: .65rem; }
  .contacto-estado { padding: .3rem .7rem .3rem .6rem; font-size: .74rem; }
  .contact-direct h3 { font-size: 1.08rem; }
  .contact-direct p { display: none; }
  .contacto-canales { gap: .55rem; margin-top: .1rem; }
  .contacto-canal { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: .62rem .8rem .62rem .62rem; }
  .contacto-canal-flecha { display: none; }
  .contacto-canal-icono { width: 38px; height: 38px; border-radius: 11px; }
  .contacto-canal-icono .icon { width: 19px; height: 19px; }
  .contacto-canal-icono img { width: 26px; height: 26px; }
  .contacto-canal-texto strong { font-size: .92rem; }
  .contacto-canal-texto small { font-size: .76rem; }
}

/* ---------- Mismo tamaño en la versión clara y en la oscura (pedido de quien fundó CORIVA, 23-10-2026): al cambiar de una a otra solo
   cambian los colores, nunca el alto de las tarjetas ni de los botones ---------- */
.svc-card-media,
html[data-tema="oscuro"] .svc-card-media { height: clamp(60px, 5vw, 72px); }
.svc-card-body,
html[data-tema="oscuro"] .svc-card-body { margin-top: -1.5rem; }
@media (max-width: 640px) {
  .svc-card-media,
  html[data-tema="oscuro"] .svc-card-media { height: 56px; }
  .svc-card-body,
  html[data-tema="oscuro"] .svc-card-body { margin-top: -1.25rem; }
  .hero .link-quiet { min-height: 52px; padding: .8rem 1.3rem; border-radius: 999px; }
}

/* Servicios en el celular: la bajada en dos líneas (pedido de quien fundó CORIVA, 23-10-2026); la letra se ajusta al ancho,
   sin bajar de 11,5 px para que se siga leyendo bien en los celulares más angostos */
@media (max-width: 640px) {
  .services-head { container-type: inline-size; }
  .services-head .section-lede { font-size: max(11.5px, min(.875rem, calc(100cqi / 28.8))); letter-spacing: -.005em; text-wrap: balance; }
}

/* ---------- Pie de página: solo Instagram en tarjeta de color; WhatsApp vuelve a ser un enlace simple con su ícono, porque el contacto
   ya lo muestra en su tarjeta verde (pedido de quien fundó CORIVA, 23-10-2026: "se ve mucho verde") ---------- */
.footer-meta .footer-socials .social-whatsapp { padding: .45rem .6rem; background: none; color: var(--ink-2); font-weight: 500; text-shadow: none; box-shadow: none; }
.footer-meta .footer-socials .social-whatsapp::after { display: none; }
.footer-socials .social-whatsapp img { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .footer-meta .footer-socials .social-whatsapp:hover { color: var(--ink); transform: none; filter: none; box-shadow: none; }
}
@media (max-width: 640px) {
  .footer-meta .footer-socials .social-whatsapp { justify-content: center; }
}

/* Servicios en el celular: el título en dos líneas, una frase por línea (pedido de quien fundó CORIVA, 23-10-2026);
   la letra se ajusta al ancho para que cada frase quepa */
@media (max-width: 640px) {
  .services-head .br-pc { display: inline; }
  .services-head .section-title { white-space: nowrap; font-size: min(1.75rem, calc(100cqi / 17)); line-height: 1.2; }
}

/* ---------- Los cuatro pasos en el celular, aún más compactos (pedido de quien fundó CORIVA, 23-10-2026: "está muy grande todo"):
   título en dos líneas más pequeño, textos y números más chicos, menos aire, botón más bajo y la nota como texto pequeño ---------- */
.br-movil { display: none; }
@media (max-width: 640px) {
  .br-movil { display: inline; }
  .ruta-panel { padding: 1.4rem 1rem 1.2rem; }
  .ruta-head { container-type: inline-size; }
  .process--ruta .section-title { white-space: nowrap; font-size: min(1.5rem, calc(100cqi / 16.2)); line-height: 1.2; }
  .process--ruta .section-lede { margin-top: .5rem; font-size: .78rem; line-height: 1.5; }
  .ruta-pasos { --nodo: 30px; gap: .8rem; margin-top: 1.1rem; }
  .ruta-pasos li { column-gap: .7rem; }
  .ruta-nodo { font-size: .78rem; }
  .ruta-nodo .icon { width: 14px; height: 14px; }
  .ruta-pasos h3 { padding-top: .25rem; font-size: .88rem; }
  .ruta-pasos p { font-size: .76rem; line-height: 1.45; }
  .ruta-pasos li:not(:last-child)::before,
  .ruta-pasos li:not(:last-child)::after { top: calc(var(--nodo) + 4px); bottom: calc(-.8rem + 4px); }
  .ruta-cta { margin-top: 1.05rem; gap: .4rem; }
  .ruta-cta .btn { min-height: 46px; font-size: .9rem; }
  .ruta-cta .btn-chip { width: 32px; height: 32px; }
  .ruta-nota { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .72rem; }
  html[data-tema="oscuro"] .ruta-nota { background: none; box-shadow: none; }
}

/* ---------- Pie de página en el celular (pedido de quien fundó CORIVA, 23-10-2026): los enlaces en filas ordenadas, centradas,
   en vez de uno debajo del otro ---------- */
@media (max-width: 640px) {
  .footer-row { gap: 1rem; }
  .footer-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; max-width: 22rem; margin-inline: auto; }
  .footer-links a { min-height: 36px; font-size: .82rem; }
}

/* ---------- Los cuatro pasos en el celular (pedido de quien fundó CORIVA, 23-10-2026): la bajada en dos líneas (en el celular, sin la
   primera frase, para que se lea bien) y más aire a los lados, para que los números y los textos no queden al borde de la tarjeta ---------- */
.solo-movil { display: none; }
@media (max-width: 640px) {
  .solo-pc { display: none; }
  .solo-movil { display: inline; }
  .ruta-panel { padding-inline: 1.4rem; }
  .process--ruta .section-lede { text-wrap: balance; }
}

/* =====================================================================
   La versión clara es la que se ve por defecto (quien fundó CORIVA la dejó así el 23-10-2026, después de probar la oscura por defecto):
   la oscura aparece si la persona la elige con la luna (se recuerda en su navegador) o con ?tema=oscuro en la dirección.
   ===================================================================== */

/* =====================================================================
   "Marketing con criterio" en PC y tablet: "A · Foto y lista" (23-10-2026, elegida por quien fundó CORIVA para que la sección se distinga
   de los cuatro pasos de abajo). Sin panel: la foto alta a la izquierda con la etiqueta de vidrio encima y, a la derecha, el título, la bajada
   y los tres puntos en tarjetas blancas con algo de impacto, pero minimalistas: el ícono suave en acero, una luz que recorre el borde de
   cada tarjeta, una tras otra (y enciende su ícono), y una leve elevación al pasar el mouse. En tablet la foto va arriba, como franja.
   En la versión oscura la página sigue blanca y la foto va oscurecida; las tarjetas siguen blancas. En el celular no cambia nada.
   ===================================================================== */
@keyframes pp-luz {
  0% { --beam: 0deg; opacity: 0; }
  4%, 26% { opacity: 1; }
  30% { --beam: 360deg; opacity: 0; }
  100% { --beam: 360deg; opacity: 0; }
}
@media (min-width: 761px) {
  html .principles .pp-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "texto";
    row-gap: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 1720px;
    margin-inline: var(--gutter);
    padding: 0;
    overflow: visible;
    border-radius: 0;
    color: var(--ink);
    background: none;
    box-shadow: none;
  }
  html .principles .pp-foto {
    grid-area: foto;
    position: relative;
    inset: auto;
    z-index: auto;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    border-radius: 28px;
    background: #D9E3EC;
    box-shadow: var(--shadow-lg);
  }
  html .principles .pp-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 60%;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html .principles .pp-foto::after { content: none; }
  html .principles .pp-chip {
    grid-area: foto;
    position: relative;
    inset: auto;
    z-index: 2;
    order: 0;
    align-self: end;
    justify-self: start;
    margin: 0 0 1.25rem 1.25rem;
  }
  html .principles .pp-texto { grid-area: texto; min-width: 0; }
  html .principles .pp-head { max-width: none; container-type: inline-size; }
  html .principles .pp-panel .section-title { max-width: none; white-space: normal; font-size: min(var(--fs-h2), calc(100cqi / 14)); line-height: 1.1; color: var(--ink); }
  html .principles .pp-linea { white-space: nowrap; }
  html .principles .pp-panel .section-lede { max-width: 54ch; margin-top: 1rem; white-space: normal; font-size: var(--fs-body); color: var(--ink-2); text-wrap: pretty; }
  html .principles .pp-panel .h1-mark {
    color: #44607D;
    background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  html .principles .pp-puntos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: clamp(1.5rem, 2.4vw, 2.1rem) 0 0; padding: 0; }
  html .principles .pp-puntos li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1.1rem 1.3rem;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(68, 88, 111, .05), 0 18px 40px -26px rgba(30, 45, 65, .45);
    transition: transform 250ms var(--ease-out), box-shadow 250ms ease;
  }
  html .principles .pp-puntos li::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(147, 168, 191, 0) 262deg, #93A8BF 300deg, #44607D 324deg, transparent 342deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  html .principles .pp-puntos h3 { margin: 0; font-size: 1.06rem; line-height: 1.3; color: var(--ink); }
  html .principles .pp-puntos p { max-width: none; margin: .3rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
  html .principles .pp-puntos .principle-icon {
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 14px;
    color: var(--mark);
    background: linear-gradient(160deg, #FFFFFF 0%, var(--mark-soft) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 26%, transparent), 0 8px 18px -12px rgba(68, 96, 125, .4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .principles .pp-puntos .principle-icon .icon { width: 21px; height: 21px; }

  /* Versión oscura: la foto oscurecida y la etiqueta de vidrio oscuro; las tarjetas quedan blancas (pedido de quien fundó CORIVA) */
  html[data-tema="oscuro"] .principles .pp-foto { background: #16202C; }
  html[data-tema="oscuro"] .principles .pp-foto img { opacity: .6; filter: saturate(.9); }
  html[data-tema="oscuro"] .principles .pp-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 26, 37, .05) 0%, rgba(18, 26, 37, .5) 100%); pointer-events: none; }
  html[data-tema="oscuro"] .principles .pp-chip { color: #FFFFFF; background: rgba(18, 26, 37, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
  html[data-tema="oscuro"] .principles .pp-chip .principles-chip-icon { background: rgba(255, 255, 255, .16); }
}
@media (min-width: 1024px) {
  html .principles .pp-panel {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "foto texto";
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }
  html .principles .pp-foto { align-self: stretch; aspect-ratio: auto; min-height: clamp(440px, 36vw, 540px); border-radius: 32px; }
  html .principles .pp-chip { margin: 0 0 1.5rem 1.5rem; }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html .principles .pp-panel .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(170, 190, 215, 1)); }
  html .principles .pp-panel .h1-trazo tspan { stroke-width: max(1.4px, .032em); }
  html .principles .pp-puntos li::before { animation: pp-luz 7.5s linear infinite; animation-delay: calc(1s + var(--i, 0) * 2.5s); }
  html .principles .pp-puntos .principle-icon::after { animation: nodo-luz 7.5s ease-out infinite; animation-delay: calc(1.15s + var(--i, 0) * 2.5s); }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  html .principles .pp-puntos li:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, #44607D 32%, transparent), 0 2px 4px rgba(68, 88, 111, .06), 0 26px 46px -24px rgba(30, 45, 65, .5); }
}

/* =====================================================================
   Un solo ancho y el mismo espacio entre secciones (pedido de quien fundó CORIVA, 23-10-2026)
   Todas las tarjetas del inicio comparten los bordes del hero (hasta 1.720 px, con el mismo margen a los lados; 12 px en el celular),
   y entre una sección y la siguiente hay siempre el mismo aire (--entre). Upnegocio va pegado a los servicios, a la misma distancia
   que hay entre las dos tarjetas de servicios: se lee como parte del grupo, un producto de Coriva.
   ===================================================================== */
:root { --entre: clamp(3.5rem, 2rem + 4.5vw, 6rem); }
@media (min-width: 1800px) {
  html .principles .pp-panel { margin-inline: auto; }
}
@media (max-width: 640px) {
  .services.wrap,
  .upn-band.wrap { padding-inline: 12px; }
}
.services { padding-block: var(--entre) 0; }
.upn-band { margin-top: 1.25rem; }
@media (max-width: 860px) {
  .upn-band { margin-top: 1rem; }
}
.principles { padding-block: var(--entre) 0; }
.process--ruta { padding-block: var(--entre) 0; }
.contact--feature { padding-block: var(--entre); }

/* ---------- Contacto en la versión oscura, más liviano (pedido de quien fundó CORIVA, 23-10-2026: "quedó muy oscura la tarjeta y la de
   adentro debemos cambiarla"): el panel en un azul acero más claro con un brillo suave detrás de la tarjeta, y la tarjeta de adentro
   blanca, como en la versión clara, con un borde de vidrio claro. Los tamaños no cambian, solo los colores. ---------- */
html[data-tema="oscuro"] {
  --contact-grad: radial-gradient(55% 75% at 76% 42%, rgba(150, 180, 215, .3) 0%, rgba(150, 180, 215, 0) 70%), linear-gradient(150deg, #24344C 0%, #2E425D 50%, #3B5373 100%);
}
html[data-tema="oscuro"] .contact-stage .form-card {
  --surface: #FFFFFF;
  --shell: rgba(255, 255, 255, .1);
  --ink: #44586F;
  --ink-2: #56697F;
  --ink-3: #607489;
  --line: rgba(255, 255, 255, .2);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--ink);
}
html[data-tema="oscuro"] .contact-stage .form-card .contacto-estado { color: #2F7D5B; background: rgba(74, 158, 119, .12); box-shadow: inset 0 0 0 1px rgba(74, 158, 119, .22); }
html[data-tema="oscuro"] .contact--feature .form-card .bezel-core { box-shadow: var(--inner-hi), 0 2px 6px rgba(20, 30, 45, .1), 0 40px 80px -30px rgba(12, 20, 32, .55); }
html[data-tema="oscuro"] .contact-next-icon { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* =====================================================================
   "Marketing con criterio" en el celular, como en PC (pedido de quien fundó CORIVA, 23-10-2026): sin el panel oscuro, para que se
   distinga de los cuatro pasos de abajo. La foto arriba con su etiqueta, el título y la bajada sobre el fondo blanco y las tres
   tarjetas blancas pasando solas, despacio, en una cinta continua como la de abajo del hero (se detiene al tocarla).
   ===================================================================== */
.pp-copia { display: none; }
@keyframes pp-cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 761px) {
  html .principles .pp-puntos li.pp-copia { display: none; }
}
html[data-tema="oscuro"] .principles .pp-foto { background: #16202C; }
html[data-tema="oscuro"] .principles .pp-foto img { opacity: .6; filter: saturate(.9); }
html[data-tema="oscuro"] .principles .pp-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 26, 37, .05) 0%, rgba(18, 26, 37, .5) 100%); pointer-events: none; }
html[data-tema="oscuro"] .principles .pp-chip { color: #FFFFFF; background: rgba(18, 26, 37, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-tema="oscuro"] .principles .pp-chip .principles-chip-icon { background: rgba(255, 255, 255, .16); }
@media (max-width: 760px) {
  html .principles .pp-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "texto";
    row-gap: 1.3rem;
    margin-inline: 12px;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    color: var(--ink);
    background: none;
    box-shadow: none;
  }
  html .principles .pp-foto {
    grid-area: foto;
    position: relative;
    inset: auto;
    z-index: auto;
    overflow: hidden;
    height: 168px;
    border-radius: 22px;
    background: #D9E3EC;
    box-shadow: var(--shadow-md);
  }
  html .principles .pp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  html:not([data-tema="oscuro"]) .principles .pp-foto::after { content: none; }
  html .principles .pp-chip { grid-area: foto; position: relative; inset: auto; z-index: 2; order: 0; display: inline-flex; width: auto; align-self: end; justify-self: start; margin: 0 0 .7rem .7rem; font-size: .74rem; }
  html .principles .pp-texto { grid-area: texto; min-width: 0; }
  html .principles .pp-panel .section-title { color: var(--ink); }
  html .principles .pp-panel .section-lede { color: var(--ink-2); }
  html .principles .pp-panel .h1-mark { color: #44607D; background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  html .principles .pp-fila {
    margin: 1.15rem -12px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  html .principles .pp-puntos { display: flex; gap: 0; width: max-content; max-width: none; margin: 0; padding: .3rem 0 1rem; overflow: visible; scroll-snap-type: none; }
  html .principles .pp-puntos li {
    flex: 0 0 248px;
    display: block;
    margin-right: .7rem;
    padding: .95rem 1rem 1rem;
    border-radius: 18px;
    text-align: left;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -18px rgba(30, 45, 65, .45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .principles .pp-puntos li > div { display: block; margin-top: .6rem; }
  html .principles .pp-puntos h3 { margin: 0; font-size: .92rem; line-height: 1.3; color: var(--ink); }
  html .principles .pp-puntos p { max-width: none; margin: .25rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
  html .principles .pp-puntos .principle-icon {
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 10px;
    color: var(--mark);
    background: linear-gradient(160deg, #FFFFFF 0%, var(--mark-soft) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark) 26%, transparent), 0 6px 14px -10px rgba(68, 96, 125, .4);
  }
  html .principles .pp-puntos .principle-icon .icon { width: 16px; height: 16px; }
  html .principles .pp-puntos:not(.is-cinta) { width: auto; padding-inline: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html .principles .pp-puntos:not(.is-cinta) li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: no-preference) {
  html .principles .pp-panel .h1-trazo { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(170, 190, 215, 1)); }
  html .principles .pp-panel .h1-trazo tspan { stroke-width: max(1.4px, .032em); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html .principles .pp-puntos.is-cinta { animation: pp-cinta 34s linear infinite; }
  html .principles .pp-fila:hover .pp-puntos.is-cinta,
  html .principles .pp-fila:active .pp-puntos.is-cinta { animation-play-state: paused; }
}

/* ---------- Contacto (pedido de quien fundó CORIVA, 23-10-2026): "Respondemos en 24 horas hábiles" pequeño y siempre en una línea,
   y "Escríbenos directo" centrado en su tarjeta ---------- */
.contacto-estado { white-space: nowrap; font-size: .76rem; }
.contact-direct { align-items: center; text-align: center; }
.contacto-canales { width: 100%; }
.contacto-canal { text-align: left; }
@media (max-width: 640px) {
  .contact-direct { text-align: center; }
  .contacto-estado { padding: .28rem .65rem .28rem .55rem; font-size: .7rem; }
}

/* ---------- Upnegocio en el celular, más compacto (pedido de quien fundó CORIVA, 23-10-2026: "ocupa mucho espacio") ---------- */
@media (max-width: 640px) {
  .upn-card { padding: 1.15rem 1rem 1.1rem; border-radius: 22px; }
  .upn-card .upn-eyebrow { padding: .22rem .6rem; font-size: .6rem; letter-spacing: .12em; }
  .upn-card .section-title { margin-top: .55rem; font-size: 1.3rem; line-height: 1.16; }
  .upn-card .section-lede { margin-top: .45rem; font-size: .8rem; line-height: 1.45; }
  .upn-cta { margin-top: .9rem; gap: .5rem; }
  .upn-cta .upn-btn { min-height: 42px; padding-inline: .95rem; font-size: .85rem; }
  .upn-face { width: 30px; height: 30px; margin-left: -12px; border-width: 2px; }
}

/* ---------- Los cuatro pasos en el celular (pedido de quien fundó CORIVA, 23-10-2026): más aire entre cada número y su texto, y la luz
   del número más ceñida, para que al encenderse no choque con el texto ---------- */
@media (max-width: 900px) {
  .ruta-pasos li { column-gap: 1rem; }
  .ruta-nodo::after { inset: -4px; box-shadow: 0 0 0 1.5px rgba(147, 168, 191, .95), 0 0 10px 1px rgba(147, 168, 191, .6); }
}

/* ---------- "Marketing con criterio" en PC (pedido de quien fundó CORIVA, 23-10-2026): "precisión" sin la luz ni animación (solo el acero
   de la marca), y las tarjetas entran un poco en la foto, sobre su parte derecha, para que la imagen no se vea sola. En tablet y en el
   celular la foto va arriba y no se superponen. ---------- */
@media (min-width: 1024px) {
  html .principles .pp-panel { --pp-gap: clamp(2.5rem, 5vw, 5.5rem); column-gap: var(--pp-gap); }
  html .principles .pp-texto { position: relative; z-index: 2; }
  html .principles .pp-fila { margin-left: calc(-1 * (var(--pp-gap) + clamp(4.5rem, 8vw, 8rem))); }
  html .principles .pp-puntos li { box-shadow: inset 0 0 0 1px var(--line), 0 2px 4px rgba(68, 88, 111, .06), 0 26px 50px -24px rgba(20, 30, 45, .45); }
}

/* ---------- Servicios en el celular, con menos espacio arriba (pedido de quien fundó CORIVA, 23-10-2026): el título sube cerca del borde
   y la foto queda detrás del título, desvaneciéndose, en las dos versiones (con el mismo tamaño en ambas) ---------- */
@media (max-width: 640px) {
  .svc-card-media,
  html[data-tema="oscuro"] .svc-card-media { height: 1.1rem; overflow: visible; }
  .svc-card-body,
  html[data-tema="oscuro"] .svc-card-body { margin-top: 0; }
  .svc-card-media img { position: absolute; inset: 0 0 auto 0; z-index: -1; height: 230px; }
  html:not([data-tema="oscuro"]) .svc-card-media img {
    opacity: .9;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 28%, rgba(0, 0, 0, .2) 58%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 28%, rgba(0, 0, 0, .2) 58%, transparent 85%);
  }
}

/* Upnegocio en el celular: el título en dos líneas, "Upnegocio: tu equipo digital" / "para ordenar y digitalizar tu negocio."
   (pedido de quien fundó CORIVA, 23-10-2026); la letra se ajusta al ancho de la tarjeta para que nunca se parta en tres */
@media (max-width: 640px) {
  .upn-copy { container-type: inline-size; }
  .upn-card .br-pc { display: inline; }
  .upn-card .section-title { white-space: nowrap; font-size: min(1.3rem, calc(100cqi / 17.9)); line-height: 1.22; }
}
/* "Marketing con criterio": las descripciones de las tarjetas sin una palabra sola en la última línea */
.principles .pp-puntos p { text-wrap: pretty; }

/* "Marketing con criterio" en el celular: las tarjetas de la cinta, más pequeñas (pedido de quien fundó CORIVA, 23-10-2026) */
@media (max-width: 760px) {
  html .principles .pp-puntos li { flex-basis: 214px; margin-right: .6rem; padding: .8rem .85rem .85rem; border-radius: 16px; }
  html .principles .pp-puntos li > div { margin-top: .5rem; }
  html .principles .pp-puntos .principle-icon { width: 30px; height: 30px; border-radius: 9px; }
  html .principles .pp-puntos .principle-icon .icon { width: 14px; height: 14px; }
  html .principles .pp-puntos .principle-icon::after { inset: -3px; border-radius: 11px; }
  html .principles .pp-puntos h3 { font-size: .85rem; }
  html .principles .pp-puntos p { margin-top: .2rem; font-size: .73rem; line-height: 1.42; }
}

/* Servicios en el celular: los nombres y las descripciones un poco más pequeños, y cada fila más baja (pedido de quien fundó CORIVA, 23-10-2026) */
@media (max-width: 640px) {
  .svc-list { gap: .42rem; }
  .svc-row { padding: .64rem 1.9rem .68rem .9rem; border-radius: 14px; }
  .svc-title { font-size: .86rem; line-height: 1.3; }
  .svc-text small { font-size: .76rem; line-height: 1.42; }
  .svc-go { top: .5rem; right: .4rem; }
}

/* ---------- "Marketing con criterio" en el celular sin la foto (pedido de quien fundó CORIVA, 23-10-2026: "hay mucha foto"):
   queda solo la etiqueta "Cada entrega, probada y revisada", centrada sobre el título ---------- */
@media (max-width: 760px) {
  html .principles .pp-panel { grid-template-areas: "chip" "texto"; row-gap: .9rem; }
  html .principles .pp-foto { display: none; }
  html .principles .pp-chip { grid-area: chip; align-self: start; justify-self: center; margin: 0; }
  html:not([data-tema="oscuro"]) .principles .pp-chip { color: var(--ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -14px rgba(30, 45, 65, .4); }
  html[data-tema="oscuro"] .principles .pp-chip { color: #FFFFFF; background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%); box-shadow: 0 8px 20px -12px rgba(46, 69, 96, .5); }
}

/* =====================================================================
   Bajo el hero, todo con el mismo ancho del contenido, con más aire a los lados (pedido de quien fundó CORIVA, 23-10-2026: "está todo
   muy al borde"). El hero sigue ancho, como un marco; servicios, Upnegocio, "Marketing con criterio", los pasos, el contacto y el pie
   comparten el ancho de hasta 1.240 px. En el celular no cambia (12 px a los lados).
   Además, en PC la sección de servicios es más compacta, para que las dos tarjetas y la de Upnegocio se vean juntas en una pantalla.
   ===================================================================== */
@media (min-width: 641px) {
  html .principles .pp-panel,
  .ruta-panel,
  .contact-stage { width: min(100% - var(--gutter) * 2, var(--max)); max-width: none; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .services-head .section-lede { margin-top: .55rem; }
  .svc--cards { margin-top: clamp(1.4rem, 2vw, 1.9rem); }
  .svc-card-media,
  html[data-tema="oscuro"] .svc-card-media { height: clamp(46px, 3.8vw, 54px); }
  .svc-card-body { padding: .95rem clamp(1.1rem, 1.6vw, 1.4rem) 1.05rem; }
  .svc-card-head h3 { font-size: clamp(1.22rem, .95rem + .55vw, 1.42rem); }
  .svc-card-lede { font-size: .9rem; }
  .svc-list { gap: .45rem; margin-top: .75rem; }
  .svc-row { gap: .8rem; padding: .55rem .7rem .55rem .6rem; }
  .svc-icon { width: 36px; height: 36px; border-radius: 11px; }
  .svc-icon .mt-ico { width: 17px; height: 17px; }
  .svc-title { font-size: .92rem; }
  .svc-text small { font-size: .8rem; }
  .svc-go { width: 30px; height: 30px; }
  .upn-card { padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.75rem, 3vw, 2.6rem); }
  .upn-card .upn-eyebrow { padding: .3rem .75rem; font-size: .66rem; }
  .upn-card .section-title { margin-top: .7rem; font-size: clamp(1.6rem, .9rem + 1.2vw, 2rem); }
  .upn-card .section-lede { margin-top: .5rem; font-size: .95rem; }
  .upn-lado { gap: 1rem; }
  .upn-faces--side .upn-face { width: clamp(54px, 4.4vw, 66px); height: clamp(54px, 4.4vw, 66px); margin-left: -16px; }
}
/* La etiqueta "Cada entrega, probada y revisada" en el celular, versión oscura: el azul acero de "precisión", más suave que el azul oscuro
   (pedido de quien fundó CORIVA, 23-10-2026) */
/* En pantallas de PC más bajas (hasta 800 px de alto), la sección de servicios un poco más compacta, para que las tres tarjetas sigan
   cabiendo juntas */
@media (min-width: 1024px) and (max-height: 800px) {
  .services-head .section-lede { margin-top: .4rem; }
  .svc--cards { margin-top: 1.1rem; }
  .svc-card-media,
  html[data-tema="oscuro"] .svc-card-media { height: 40px; }
  .svc-card-body { padding-top: .85rem; padding-bottom: .95rem; }
  .svc-list { margin-top: .6rem; gap: .4rem; }
  .upn-card { padding-block: 1.35rem; }
}

/* ---------- Servicios en la versión oscura: los textos de cada servicio se leen mejor (pedido de quien fundó CORIVA, 23-10-2026)
   Cada fila lleva un vidrio oscuro bajo el tinte de su área (la foto ya no se transparenta tanto), el nombre en blanco y la descripción
   en un gris más claro. Solo cambian los colores. ---------- */
html[data-tema="oscuro"] .svc-row {
  background: var(--svc-suave), rgba(13, 20, 30, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-tema="oscuro"] .svc-title { color: #FFFFFF; }
html[data-tema="oscuro"] .svc-text small { color: rgba(226, 234, 243, .8); }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="oscuro"] .svc-row:hover { background: var(--svc-suave), rgba(13, 20, 30, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 40%, transparent), 0 12px 24px -18px rgba(0, 0, 0, .55); }
}
/* La frase bajo el título de cada tarjeta, que va sobre la foto: más clara y con una sombra suave para separarla de la imagen */
html[data-tema="oscuro"] .svc-card-lede { color: rgba(236, 241, 247, .88); text-shadow: 0 1px 10px rgba(10, 16, 26, .55); }

/* =====================================================================
   Contacto en la versión oscura, invertido (pedido de quien fundó CORIVA, 23-10-2026): como los cuatro pasos de arriba ya son oscuros,
   el panel de afuera va claro (el de la versión clara, con su red y su brillo) y la tarjeta de adentro, oscura, en el acero profundo del
   isotipo, con la luz en su borde y los canales destacados. Solo cambian los colores: los tamaños son los mismos en las dos versiones.
   ===================================================================== */
html[data-tema="oscuro"] {
  --contact-grad: radial-gradient(60% 70% at 18% 24%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #EEF4FA 0%, #DDE9F5 42%, #C6D9EC 100%);
  --contact-ink: #2A3D53;
  --contact-ink-2: #3D5168;
  --contact-chip: rgba(255, 255, 255, .72);
}
html[data-tema="oscuro"] .contact-stage {
  --surface: #FFFFFF;
  --shell: rgba(94, 122, 143, .06);
  --ink: #44586F;
  --ink-2: #56697F;
  --ink-3: #607489;
  --line: rgba(94, 122, 143, .16);
  --line-strong: rgba(94, 122, 143, .28);
  --steel-2: #E1EAF2;
  --steel-4: #8FA8BD;
  --mark: #44607D;
  --mark-soft: #E8EDF3;
  --icon-fg: #5E7A8F;
  --tile-ring: rgba(94, 122, 143, .2);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-sm: 0 1px 2px rgba(68, 88, 111, .06);
  --shadow-lg: 0 2px 4px rgba(68, 88, 111, .05), 0 28px 60px -24px rgba(68, 88, 111, .28);
  color: var(--ink);
}
html[data-tema="oscuro"] .contact-net { display: block; }
html[data-tema="oscuro"] .contact-next-icon { background: var(--surface); color: var(--icon-fg); box-shadow: inset 0 0 0 1px var(--tile-ring), 0 8px 16px -12px rgba(68, 88, 111, .4); }

/* La tarjeta de adentro, oscura */
html[data-tema="oscuro"] .contact-stage .form-card {
  --shell: rgba(255, 255, 255, .55);
  --line: rgba(68, 96, 125, .22);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --ink: #FFFFFF;
  --ink-2: rgba(226, 234, 243, .8);
  --ink-3: rgba(226, 234, 243, .62);
  color: var(--ink);
}
html[data-tema="oscuro"] .contact-stage .form-card .bezel-core {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(150, 180, 215, .24) 0%, rgba(150, 180, 215, 0) 70%),
    linear-gradient(150deg, #16202C 0%, #1F2C3D 52%, #2A3B51 100%);
}
html[data-tema="oscuro"] .contact--feature .form-card .bezel-core { box-shadow: var(--inner-hi), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(20, 30, 45, .12), 0 40px 80px -30px rgba(20, 30, 45, .55); }
html[data-tema="oscuro"] .contact-stage .form-card .contacto-estado { color: #9ADCBD; background: rgba(74, 158, 119, .16); box-shadow: inset 0 0 0 1px rgba(154, 220, 189, .25); }
html[data-tema="oscuro"] .contact-stage .contact-direct h3 { color: #FFFFFF; }
html[data-tema="oscuro"] .contact-stage .contact-direct p { color: rgba(226, 234, 243, .8); }
html[data-tema="oscuro"] .contacto-canal--correo {
  background: linear-gradient(135deg, #7891AD 0%, #587291 50%, #3E5672 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 30px -16px rgba(0, 0, 0, .55);
}
html[data-tema="oscuro"] .contacto-canal--wa { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -16px rgba(18, 140, 110, .55); }

/* Contacto en el celular: "Conversemos sobre tu proyecto." en una línea (pedido de quien fundó CORIVA, 23-10-2026);
   la letra se ajusta al ancho para que no se parta */
@media (max-width: 640px) {
  .contact-intro { container-type: inline-size; }
  .contact-intro .section-title { white-space: nowrap; font-size: min(1.45rem, calc(100cqi / 16)); }
}

/* =====================================================================
   Versión oscura, elegidas por quien fundó CORIVA (23-10-2026) entre 3 alternativas cada una
   - Servicios "A · Vidrio sutil": cada servicio en un vidrio claro muy suave con borde fino sobre la tarjeta oscura; el color de su área
     solo en el ícono y la flecha. La foto se desvanece antes de las filas, para que se lean bien.
   - Contacto "A · Como el hero": el fondo del hero (las montañas en azul acero) y la tarjeta de vidrio blanco encima.
   Solo cambian los colores: los tamaños siguen iguales en las dos versiones.
   ===================================================================== */
html[data-tema="oscuro"] .svc-card-media img { height: 210px; }
@media (max-width: 640px) {
  html[data-tema="oscuro"] .svc-card-media img { height: 190px; }
}
html[data-tema="oscuro"] .svc-row {
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
html[data-tema="oscuro"] .svc-icon { background: color-mix(in srgb, var(--svc-flecha) 15%, transparent); color: var(--svc-flecha); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 32%, transparent); }
html[data-tema="oscuro"] .svc-go { background: transparent; color: var(--svc-flecha); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 35%, transparent); }
@media (max-width: 640px) {
  html[data-tema="oscuro"] .svc-go { box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) {
  html[data-tema="oscuro"] .svc-row:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 40%, transparent), 0 12px 24px -18px rgba(0, 0, 0, .55); }
}

html[data-tema="oscuro"] .contact-stage {
  background: linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%);
  --contact-ink: #FFFFFF;
  --contact-ink-2: rgba(226, 234, 243, .84);
  --contact-chip: rgba(255, 255, 255, .1);
}
html[data-tema="oscuro"] .contact-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/hero-montanas.jpg") 50% 100% / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, #000 60%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, #000 60%);
}
@media (max-width: 760px) {
  html[data-tema="oscuro"] .contact-stage::before {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, #000 70%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, #000 70%);
  }
}
@media (max-width: 699px) {
  html[data-tema="oscuro"] .contact-stage::before { background-image: url("/assets/hero-montanas-movil.jpg"); }
}
html[data-tema="oscuro"] .contact-net { display: none; }
html[data-tema="oscuro"] .contact-next-icon { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-tema="oscuro"] .contact--feature .contact-next { border-top-color: rgba(255, 255, 255, .16); }
html[data-tema="oscuro"] .contact-stage .form-card {
  --shell: rgba(255, 255, 255, .22);
  --line: rgba(255, 255, 255, .4);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --ink: #2A3D53;
  --ink-2: #4A5D72;
  --ink-3: #56697F;
  color: var(--ink);
}
html[data-tema="oscuro"] .contact-stage .form-card .bezel-core {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
html[data-tema="oscuro"] .contact--feature .form-card .bezel-core { box-shadow: var(--inner-hi), 0 2px 6px rgba(20, 30, 45, .1), 0 40px 80px -30px rgba(12, 20, 32, .45); }
html[data-tema="oscuro"] .contact-stage .form-card .contacto-estado { color: #2F7D5B; background: rgba(74, 158, 119, .12); box-shadow: inset 0 0 0 1px rgba(74, 158, 119, .22); }
html[data-tema="oscuro"] .contact-stage .contact-direct h3 { color: #2A3D53; }
html[data-tema="oscuro"] .contact-stage .contact-direct p { color: #4A5D72; }
html[data-tema="oscuro"] .contacto-canal--correo { background: linear-gradient(135deg, #5F7A98 0%, #44607D 45%, #2E4560 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -16px rgba(40, 60, 85, .55); }
html[data-tema="oscuro"] .contacto-canal--wa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -16px rgba(18, 140, 110, .55); }

/* ---------- Los cuatro pasos en la versión clara, legibles (pedido de quien fundó CORIVA, 23-10-2026: "algunos textos se pierden"):
   la foto del lago empieza más abajo, detrás del botón, para que los pasos queden sobre el fondo claro, y los textos van un tono más oscuro.
   La versión oscura no cambia. ---------- */
html:not([data-tema="oscuro"]) .ruta-foto { inset: 60% 0 0 0; }
/* se ve el hielo con sus grietas (la parte de abajo de la foto), detrás del botón */
html:not([data-tema="oscuro"]) .ruta-foto img { object-position: 50% 100%; }
html:not([data-tema="oscuro"]) .ruta-foto img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 40%, #000 100%);
}
html:not([data-tema="oscuro"]) .process--ruta .section-title { color: #2A3D53; }
html:not([data-tema="oscuro"]) .process--ruta .section-lede { color: #3D5168; }
html:not([data-tema="oscuro"]) .ruta-pasos h3 { color: #2A3D53; }
html:not([data-tema="oscuro"]) .ruta-pasos p { color: #3D5168; }
@media (max-width: 900px) {
  html:not([data-tema="oscuro"]) .ruta-foto { inset: 78% 0 0 0; }
}
/* En el celular, la nota "Respuesta en 24 horas hábiles" va sobre el hielo: en la versión clara, con su vidrio claro (el mismo espacio en las dos) */
@media (max-width: 640px) {
  .ruta-nota { padding: .28rem .7rem .28rem .6rem; }
  html:not([data-tema="oscuro"]) .ruta-nota { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* =====================================================================
   Contacto (23-10-2026, quien fundó CORIVA)
   - PC y tablet: "como el hero" (el que le gustó en la versión oscura y pidió igual en la clara): el azul acero profundo con las
     montañas del hero; el título y los tres puntos en blanco a la izquierda, y a la derecha la tarjeta de vidrio blanco con
     "Escríbenos directo" y los canales (correo arriba, WhatsApp abajo, sin mostrar el correo ni el número). En tablet, en una columna.
   - Celular: "A · Centrado": un panel claro, todo centrado y compacto, los canales uno sobre otro y los puntos en una fila.
   Es igual en la versión clara y en la oscura.
   ===================================================================== */
.cn .cn-panel { position: relative; isolation: isolate; overflow: hidden; width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.cn .cn-foto { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; }
.cn .cn-foto picture,
.cn .cn-foto img { display: block; width: 100%; height: 100%; }
.cn .cn-foto img { object-fit: cover; object-position: 50% 100%; }
.cn .cn-texto { min-width: 0; }
.cn .cn-puntos { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cn .cn-puntos li { display: flex; align-items: center; gap: .8rem; text-align: left; }
.cn .cn-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.cn .cn-ic .icon { width: 18px; height: 18px; }
.cn .cn-puntos strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.cn .cn-puntos small { display: block; font-size: .86rem; line-height: 1.45; }
.cn .cn-canales { display: grid; gap: .75rem; width: 100%; min-width: 0; }
.cn .cn-tarjeta .contacto-estado { color: #2F7D5B; background: rgba(74, 158, 119, .12); box-shadow: inset 0 0 0 1px rgba(74, 158, 119, .22); }

/* PC y tablet: como el hero */
@media (min-width: 761px) {
  .cn .cn-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "texto" "puntos" "tarjeta";
    row-gap: 2rem;
    padding: clamp(2.75rem, 5vw, 5rem) clamp(1.75rem, 3.5vw, 3.5rem);
    border-radius: 32px;
    background: linear-gradient(135deg, #16202C 0%, #1F2C3D 48%, #2A3B51 100%);
    box-shadow: 0 40px 80px -40px rgba(20, 30, 45, .55);
  }
  .cn .cn-foto {
    inset: 0;
    opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, #000 60%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, #000 60%);
  }
  .cn .cn-texto { grid-area: texto; }
  .cn .eyebrow { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  .cn .section-title { margin-top: 1.2rem; color: #FFFFFF; font-size: var(--fs-h2); line-height: 1.08; }
  .cn .section-lede { margin-top: 1rem; max-width: 32rem; color: rgba(226, 234, 243, .84); }
  .cn .cn-puntos { grid-area: puntos; flex-direction: column; gap: 1.1rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .16); }
  .cn .cn-ic { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  .cn .cn-puntos strong { color: #FFFFFF; }
  .cn .cn-puntos small { color: rgba(226, 234, 243, .84); }
  .cn .cn-tarjeta {
    grid-area: tarjeta;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border-radius: 26px;
    text-align: center;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, .16), 0 0 0 8px rgba(255, 255, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .9), 0 40px 80px -30px rgba(12, 20, 32, .5);
  }
  .cn .cn-tarjeta h3 { color: #2A3D53; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
  .cn .cn-tarjeta p { max-width: 38ch; margin: 0 0 .35rem; color: #4A5D72; }
  .cn .cn-canales { max-width: 28rem; }
}
@media (min-width: 1024px) {
  .cn .cn-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "texto tarjeta" "puntos tarjeta";
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }
  .cn .cn-texto { align-self: end; }
  .cn .cn-puntos { align-self: start; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .cn .cn-foto {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, #000 70%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, #000 70%);
  }
  .cn .cn-tarjeta { justify-self: center; width: 100%; max-width: 34rem; }
}

/* Celular: A · Centrado */
@media (max-width: 760px) {
  .cn .cn-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "texto" "canales" "puntos";
    row-gap: 1.2rem;
    width: auto;
    margin-inline: 12px;
    padding: 1.75rem 1.1rem 1.35rem;
    border-radius: 24px;
    text-align: center;
    background: radial-gradient(70% 90% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F3F7FB 0%, #E5EDF5 55%, #D4E2EF 100%);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  }
  .cn .cn-foto {
    inset: 62% 0 0 0;
    opacity: .4;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 75%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 75%);
  }
  .cn .cn-texto { grid-area: texto; container-type: inline-size; }
  .cn .section-title { margin-top: .75rem; white-space: nowrap; font-size: min(1.45rem, calc(100cqi / 16)); line-height: 1.2; }
  .cn .section-lede { margin: .5rem auto 0; font-size: .82rem; line-height: 1.5; }
  .cn .cn-tarjeta { display: contents; }
  .cn .cn-tarjeta::before { display: none; }
  .cn .cn-tarjeta > :not(.cn-canales) { display: none; }
  .cn .cn-canales { grid-area: canales; gap: .55rem; }
  .cn .contacto-canal { min-height: 0; text-align: left; }
  .cn .cn-puntos { grid-area: puntos; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .cn .cn-puntos li { flex-direction: column; gap: .4rem; text-align: center; }
  .cn .cn-ic { width: 32px; height: 32px; color: var(--mark); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--tile-ring), 0 6px 14px -10px rgba(68, 88, 111, .45); }
  .cn .cn-ic .icon { width: 15px; height: 15px; }
  .cn .cn-puntos strong { color: var(--contact-ink); font-size: .72rem; }
  .cn .cn-puntos small { display: none; }
}

/* ---------- Servicios en la versión clara, PC y tablet (pedido de quien fundó CORIVA, 23-10-2026: "mejora el degradé de las imágenes"):
   la foto ya no es una franja que se corta: se ve detrás del título y se funde de a poco con la tarjeta blanca, como en el celular y en la
   versión oscura. El cielo claro de las dos fotos queda detrás del título; el alto de la tarjeta no cambia. ---------- */
@media (min-width: 641px) {
  html:not([data-tema="oscuro"]) .svc-card-media { overflow: visible; }
  html:not([data-tema="oscuro"]) .svc-card-media img {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    height: 230px;
    opacity: .92;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .74) 20%, rgba(0, 0, 0, .44) 40%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .06) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .74) 20%, rgba(0, 0, 0, .44) 40%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .06) 80%, transparent 100%);
  }
}

/* ---------- Los dos últimos títulos con el mismo estilo que los de arriba (pedido de quien fundó CORIVA, 23-10-2026): en la versión clara,
   el azul acero de los títulos (no el casi negro) y la frase clave en negrita con el degradé acero, como "precisión"; sobre los paneles
   oscuros, en blanco con la frase clave plateada ---------- */
.process--ruta .h1-mark,
.cn .h1-mark {
  font-style: normal;
  font-weight: 600;
  color: #44607D;
  background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html:not([data-tema="oscuro"]) .process--ruta .section-title { color: var(--ink); }
html:not([data-tema="oscuro"]) .process--ruta .section-lede { color: var(--ink-2); }
html:not([data-tema="oscuro"]) .ruta-pasos h3 { color: var(--ink); }
html:not([data-tema="oscuro"]) .ruta-pasos p { color: var(--ink-2); }
html[data-tema="oscuro"] .process--ruta .h1-mark { color: #E3ECF5; background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; }
@media (min-width: 761px) {
  .cn .h1-mark { color: #E3ECF5; background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; }
}
@media (max-width: 760px) {
  .cn .section-title { color: var(--ink); }
  .cn .section-lede { color: var(--ink-2); }
  .cn .eyebrow { color: var(--ink-2); }
  .cn .cn-puntos strong { color: var(--ink); }
}

/* "Marketing con criterio" en PC: las tarjetas un poco más arriba (pedido de quien fundó CORIVA, 23-10-2026): menos espacio sobre ellas y
   un margen debajo, para que terminen sobre la foto y no pegadas a su borde inferior */
@media (min-width: 1024px) {
  html .principles .pp-puntos { margin-top: clamp(1.1rem, 1.6vw, 1.5rem); }
  html .principles .pp-texto { padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
}

/* ---------- Contacto en la versión clara, PC y tablet (pedido de quien fundó CORIVA, 23-10-2026): el mismo diseño "como el hero", pero
   claro, como el hero en esa versión: el cielo claro con las montañas abajo, un velo claro detrás del texto, los textos en azul acero
   (la frase clave en el degradé acero) y la misma tarjeta de vidrio blanco. La versión oscura no cambia. ---------- */
@media (min-width: 761px) {
  html:not([data-tema="oscuro"]) .cn .cn-panel {
    background: linear-gradient(180deg, #C1D6EB 0%, #D4E4F2 26%, #E4EEF6 48%, #F1EFEC 66%, #F2F5F8 100%);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  }
  html:not([data-tema="oscuro"]) .cn .cn-foto {
    inset: 30% 0 0 0;
    opacity: .95;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  }
  html:not([data-tema="oscuro"]) .cn .cn-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(55% 85% at 20% 55%, rgba(242, 246, 250, .94) 0%, rgba(242, 246, 250, .78) 45%, rgba(242, 246, 250, 0) 75%);
  }
  html:not([data-tema="oscuro"]) .cn .eyebrow { color: var(--ink-2); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--steel-4) 35%, transparent); }
  html:not([data-tema="oscuro"]) .cn .section-title { color: var(--ink); }
  html:not([data-tema="oscuro"]) .cn .h1-mark { color: #44607D; background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%); -webkit-background-clip: text; background-clip: text; }
  html:not([data-tema="oscuro"]) .cn .section-lede { color: var(--ink-2); }
  html:not([data-tema="oscuro"]) .cn .cn-puntos { border-top-color: color-mix(in srgb, var(--steel-4) 35%, transparent); }
  html:not([data-tema="oscuro"]) .cn .cn-ic { color: var(--mark); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--tile-ring), 0 6px 14px -10px rgba(68, 88, 111, .45); }
  html:not([data-tema="oscuro"]) .cn .cn-puntos strong { color: var(--ink); }
  html:not([data-tema="oscuro"]) .cn .cn-puntos small { color: var(--ink-2); }
  html:not([data-tema="oscuro"]) .cn .cn-tarjeta { box-shadow: 0 0 0 7px rgba(255, 255, 255, .35), 0 0 0 8px rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(94, 122, 143, .1), 0 40px 80px -30px rgba(46, 65, 88, .4); }
}

/* =====================================================================
   Servicios en el celular, en una fila (23-10-2026, quien fundó CORIVA eligió "B · Compacta" con mejor diseño):
   "Marketing digital" a la izquierda y "Soluciones tecnológicas" a la derecha. Cada tarjeta y cada servicio miden lo que su contenido
   (nada estirado). Cada servicio es un chip con su nombre, un borde fino y una flecha en un círculo suave del color de su área; las
   descripciones de cada servicio se ven en PC y tablet. Los títulos ocupan el mismo alto, para que las frases de abajo queden alineadas.
   ===================================================================== */
@media (max-width: 640px) {
  .svc--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .5rem; margin-top: 1.25rem; }
  .svc-card { border-radius: 18px; }
  .svc-card-media,
  html[data-tema="oscuro"] .svc-card-media { height: .6rem; }
  .svc-card-media img,
  html:not([data-tema="oscuro"]) .svc-card-media img,
  html[data-tema="oscuro"] .svc-card-media img { height: 160px; }
  .svc-card-body,
  html[data-tema="oscuro"] .svc-card-body { margin-top: 0; padding: .55rem .5rem .55rem; gap: .3rem; }
  .svc-card-head h3 { display: flex; align-items: center; justify-content: center; min-height: 2.4em; font-size: .92rem; line-height: 1.2; text-align: center; }
  .svc-luz { white-space: normal; }
  .svc-luz .h1-trazo { display: none; }
  .svc-card-lede { padding-inline: .1rem; font-size: .68rem; line-height: 1.42; }
  .svc-list { gap: .32rem; margin-top: .5rem; }
  .svc-text small { display: none; }
  .svc-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .45rem .4rem .45rem .6rem;
    border-radius: 12px;
    background: var(--svc-suave);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 14%, transparent);
  }
  .svc-text { flex: 1; min-width: 0; }
  .svc-title { font-size: .72rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
  .svc-go {
    position: static;
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    color: var(--svc-flecha);
    background: color-mix(in srgb, var(--svc-flecha) 12%, transparent);
    box-shadow: none;
  }
  .svc-go .icon { width: 10px; height: 10px; }
  html[data-tema="oscuro"] .svc-row { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  html[data-tema="oscuro"] .svc-go { background: color-mix(in srgb, var(--svc-flecha) 18%, transparent); box-shadow: none; }
}

/* Servicios en el celular: las dos tarjetas del mismo largo (pedido de quien fundó CORIVA, 23-10-2026); ahora las dos tienen tres
   servicios y cada servicio sigue midiendo lo que su contenido */
@media (max-width: 640px) {
  .svc--cards { align-items: stretch; }
}

/* ---------- Upnegocio en el celular, más compacta (pedido de quien fundó CORIVA, 23-10-2026): textos, botón y caras más pequeños y
   menos relleno; el título sigue en dos líneas ---------- */
@media (max-width: 640px) {
  .upn-card { padding: .95rem .95rem .95rem; border-radius: 20px; }
  .upn-card .upn-eyebrow { padding: .18rem .55rem; font-size: .56rem; }
  .upn-card .section-title { margin-top: .45rem; font-size: min(1.08rem, calc(100cqi / 17.9)); line-height: 1.22; }
  .upn-card .section-lede { margin-top: .35rem; font-size: .74rem; line-height: 1.42; }
  .upn-cta { margin-top: .75rem; gap: .45rem; }
  .upn-cta .upn-btn { min-height: 38px; padding-inline: .85rem; font-size: .8rem; }
  .upn-face { width: 26px; height: 26px; margin-left: -10px; border-width: 2px; }
}

/* ---------- Servicios en el celular: los títulos siguen con la luz que recorre las letras (pedido de quien fundó CORIVA, 23-10-2026).
   Cada palabra lleva su propia luz, numerada en orden, así el título va en dos líneas ("Marketing" / "digital") y la luz sigue
   letra por letra de una línea a la otra. En PC se ve igual que antes, en una línea ---------- */
@media (max-width: 640px) {
  .svc-card-head h3 { display: block; min-height: 0; }
  .svc-luz { white-space: nowrap; }
  .svc-luz .h1-trazo { display: block; }
}

/* ---------- Contacto en la versión oscura, en el celular (pedido de quien fundó CORIVA, 23-10-2026): el mismo diseño centrado, pero oscuro
   como el contacto de PC en esa versión: arriba un azul acero suave que baja a la noche, las montañas abajo, los textos en blanco (la frase clave plateada), el correo
   en un botón blanco, como "Cotizar proyecto" en el hero, y WhatsApp en su verde. Mide lo mismo que en la versión clara ---------- */
@media (max-width: 760px) {
  html[data-tema="oscuro"] .cn .cn-panel {
    background: radial-gradient(80% 45% at 50% 0%, rgba(168, 192, 218, .26) 0%, rgba(168, 192, 218, 0) 72%), linear-gradient(180deg, #3E5672 0%, #2F445E 32%, #233448 64%, #1D2A3B 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -34px rgba(20, 30, 45, .6);
  }
  html[data-tema="oscuro"] .cn .cn-foto {
    inset: 50% 0 0 0;
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  }
  html[data-tema="oscuro"] .cn .eyebrow { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  html[data-tema="oscuro"] .cn .section-title { color: #FFFFFF; }
  html[data-tema="oscuro"] .cn .h1-mark { color: #E3ECF5; background: linear-gradient(115deg, #FFFFFF 0%, #BFD0E2 50%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; }
  html[data-tema="oscuro"] .cn .section-lede { color: rgba(226, 234, 243, .84); }
  html[data-tema="oscuro"] .cn .contacto-canal--correo { color: var(--ink); background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%); box-shadow: inset 0 1px 0 #FFFFFF, 0 14px 30px -16px rgba(0, 0, 0, .6); }
  html[data-tema="oscuro"] .cn .contacto-canal--correo .contacto-canal-icono { color: var(--mark); background: var(--mark-soft); box-shadow: inset 0 0 0 1px var(--tile-ring); }
  html[data-tema="oscuro"] .cn .cn-puntos { border-top-color: rgba(255, 255, 255, .14); }
  html[data-tema="oscuro"] .cn .cn-ic { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  html[data-tema="oscuro"] .cn .cn-puntos strong { color: #FFFFFF; }
}

/* ---------- Los cuatro pasos en la versión oscura, en el celular, más claros arriba (pedido de quien fundó CORIVA, 23-10-2026: "muy dura y
   oscura arriba"; en PC queda como estaba): el panel parte en un azul acero suave, con una luz tenue desde arriba, y baja a la noche
   donde están las montañas ---------- */
@media (max-width: 640px) {
  html[data-tema="oscuro"] .ruta-panel {
    background:
      radial-gradient(75% 40% at 50% 0%, rgba(168, 192, 218, .26) 0%, rgba(168, 192, 218, 0) 72%),
      linear-gradient(180deg, #3E5672 0%, #304560 28%, #243549 58%, #1D2A3B 100%);
  }
}

/* ---------- Servicios en la versión oscura, en el celular: "Atardecer" con los servicios en blanco (elegida por quien fundó CORIVA,
   23-10-2026: "no tan dark arriba, solo más dark abajo"). Arriba la foto con sus colores (el lago rosado y las colinas verdes), apenas
   velada para que el título y la frase se lean en blanco; abajo, la noche, y sobre ella cada servicio en blanco, con su flecha en el color
   de su área. Solo cambian los colores: los tamaños son los mismos que en la versión clara. En PC sigue el vidrio sutil ---------- */
@media (max-width: 640px) {
  html[data-tema="oscuro"] .svc-card { background: linear-gradient(180deg, #34465C 0%, #243246 34%, #18212E 64%, #121822 100%); }
  html[data-tema="oscuro"] .svc-card-media img {
    height: 150px;
    opacity: .95;
    filter: saturate(1.1) brightness(.74);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .4) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .4) 70%, transparent 100%);
  }
  html[data-tema="oscuro"] .svc-card-head h3,
  html[data-tema="oscuro"] .svc-card-lede { text-shadow: 0 1px 2px rgba(12, 18, 28, .45), 0 2px 14px rgba(12, 18, 28, .7); }
  html[data-tema="oscuro"] .svc-card-lede { color: rgba(255, 255, 255, .92); }
  html[data-tema="oscuro"] .svc-row,
  html[data-tema="oscuro"] .svc-row:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 100%);
    box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 22px -14px rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-tema="oscuro"] #marketing .svc-row { --svc-flecha: #A66E92; }
  html[data-tema="oscuro"] #tecnologia .svc-row { --svc-flecha: #4F78A3; }
  html[data-tema="oscuro"] .svc-title { color: #2A3D53; }
  html[data-tema="oscuro"] .svc-go { background: color-mix(in srgb, var(--svc-flecha) 12%, transparent); }
}

/* Upnegocio en el celular: la frase en dos líneas (pedido de quien fundó CORIVA, 23-10-2026). Completa necesitaría una letra de 10 px,
   así que en el celular va sin ", en un solo lugar" y un poco más pequeña; en PC sigue completa */
@media (max-width: 640px) {
  .upn-card .section-lede { font-size: .7rem; }
}

/* ---------- Servicios en la versión clara, sin la línea alrededor (pedido de quien fundó CORIVA, 23-10-2026), en PC y en el celular: ni el
   borde fino ni la luz que lo recorre. La tarjeta blanca se separa del fondo solo con su sombra suave. La versión oscura no cambia ---------- */
html:not([data-tema="oscuro"]) .svc-card::before,
html:not([data-tema="oscuro"]) .svc-card::after { display: none; }
html:not([data-tema="oscuro"]) .svc-card { box-shadow: 0 1px 3px rgba(46, 65, 88, .06), 0 14px 32px -20px rgba(46, 65, 88, .24), 0 24px 50px -34px rgba(46, 65, 88, .38); }

/* ---------- Servicios en la versión oscura, también en PC y tablet: "Atardecer" con los servicios en blanco, igual que en el celular (pedido
   de quien fundó CORIVA, 23-10-2026). Arriba la foto con sus colores, apenas velada, detrás del título y la frase; abajo, la noche; cada
   servicio en blanco, con su ícono y su flecha en el color de su área. Reemplaza al vidrio sutil. Los tamaños no cambian ---------- */
html[data-tema="oscuro"] .svc-card { background: linear-gradient(180deg, #34465C 0%, #243246 34%, #18212E 64%, #121822 100%); }
html[data-tema="oscuro"] .svc-card-media img {
  height: 180px;
  opacity: .95;
  filter: saturate(1.1) brightness(.74);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .4) 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .4) 70%, transparent 100%);
}
html[data-tema="oscuro"] .svc-card-head h3,
html[data-tema="oscuro"] .svc-card-lede { text-shadow: 0 1px 2px rgba(12, 18, 28, .45), 0 2px 14px rgba(12, 18, 28, .7); }
html[data-tema="oscuro"] .svc-card-lede { color: rgba(255, 255, 255, .92); }
html[data-tema="oscuro"] .svc-row {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 22px -14px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-tema="oscuro"] #marketing .svc-row { --svc-flecha: #A66E92; }
html[data-tema="oscuro"] #tecnologia .svc-row { --svc-flecha: #4F78A3; }
html[data-tema="oscuro"] .svc-title { color: #2A3D53; }
html[data-tema="oscuro"] .svc-text small { color: #5A6B7F; }
html[data-tema="oscuro"] .svc-icon { background: color-mix(in srgb, var(--svc-flecha) 12%, transparent); color: var(--svc-flecha); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 22%, transparent); }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="oscuro"] .svc-row:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-flecha) 40%, transparent), 0 16px 30px -16px rgba(0, 0, 0, .8); }
}
@media (max-width: 640px) {
  html[data-tema="oscuro"] .svc-card-media img { height: 150px; }
}

/* ---------- "Marketing con criterio" en PC: "B · Tarjetas encima" (elegida por quien fundó CORIVA, 23-10-2026, entre 2 propuestas de su
   idea): la foto más viva, las tarjetas solo con el texto (siguen entrando un poco en la foto) y cada ícono sobre la foto, justo a la
   izquierda de su tarjeta, en un círculo de vidrio que se enciende cuando la luz recorre su tarjeta. En tablet y en el celular no cambia ---------- */
@media (min-width: 1024px) {
  html .principles .pp-foto img { object-position: 50% 62%; filter: saturate(.9) contrast(1.02); }
  html[data-tema="oscuro"] .principles .pp-foto img { opacity: .95; filter: saturate(.85) contrast(1.02) brightness(.8); }
  html[data-tema="oscuro"] .principles .pp-foto::after { background: linear-gradient(180deg, rgba(18, 26, 37, 0) 0%, rgba(18, 26, 37, .3) 100%); }
  html .principles .pp-fila { margin-left: calc(-1 * (var(--pp-gap) + clamp(1.5rem, 3vw, 3rem))); }
  html .principles .pp-puntos li { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.5rem; }
  html .principles .pp-puntos .principle-icon {
    position: absolute;
    top: 50%;
    left: -84px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #44607D;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .2), 0 0 0 7px rgba(255, 255, 255, .5), 0 14px 30px -12px rgba(20, 40, 60, .55);
  }
  html .principles .pp-puntos .principle-icon::after { border-radius: 50%; }
  html .principles .pp-puntos .principle-icon .icon { width: 24px; height: 24px; }
}

/* ---------- "Cada entrega, probada y revisada" en verde y con luz (pedido de quien fundó CORIVA, 23-10-2026): la etiqueta en un degradé
   verde con el texto en blanco, una luz que recorre su borde y el visto que se enciende. En PC y en el celular, en las dos versiones ---------- */
html .principles .pp-panel .pp-chip.principles-chip {
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
  background: linear-gradient(115deg, #2F8A70 0%, #3A9B7F 45%, #26775F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 4px rgba(58, 155, 127, .14), 0 10px 26px -12px rgba(31, 106, 85, .65);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .principles .pp-panel .pp-chip .principles-chip-icon { color: #FFFFFF; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
html .principles .pp-panel .pp-chip .principles-chip-icon::after { box-shadow: 0 0 0 1.5px rgba(200, 245, 225, .95), 0 0 16px 2px rgba(120, 220, 180, .7); }
html .principles .pp-panel .pp-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(220, 255, 240, 0) 262deg, #C9F2E2 300deg, #FFFFFF 324deg, transparent 342deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  html .principles .pp-panel .pp-chip::before { animation: beam 6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  html .principles .pp-panel .pp-chip::before { display: none; }
}

/* ---------- "Cada entrega, probada y revisada" en el celular, con su color anterior (pedido de quien fundó CORIVA, 23-10-2026): blanca con
   el visto en acero en la versión clara y en el degradé acero en la oscura, sin la luz del borde. En PC y tablet sigue verde y con luz ---------- */
@media (max-width: 760px) {
  html .principles .pp-panel .pp-chip.principles-chip { color: var(--ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -14px rgba(30, 45, 65, .4); }
  html[data-tema="oscuro"] .principles .pp-panel .pp-chip.principles-chip { color: #FFFFFF; background: linear-gradient(115deg, #3A516C 0%, #587291 45%, #3C536E 100%); box-shadow: 0 8px 20px -12px rgba(46, 69, 96, .5); }
  html .principles .pp-panel .pp-chip .principles-chip-icon { color: #FFFFFF; background: linear-gradient(145deg, #587291, #3A516C); box-shadow: none; }
  html[data-tema="oscuro"] .principles .pp-panel .pp-chip .principles-chip-icon { background: rgba(255, 255, 255, .16); }
  html .principles .pp-panel .pp-chip .principles-chip-icon::after { box-shadow: 0 0 0 1.5px rgba(147, 168, 191, .95), 0 0 20px 2px rgba(147, 168, 191, .6); }
  html .principles .pp-panel .pp-chip::before { display: none; }
}

/* ---------- La luz de las letras sin filtro y las cintas siempre en bucle (pedido de quien fundó CORIVA, 23-10-2026: en el celular "la luz
   se queda como pegada" y las tarjetas de "Marketing con criterio" "se van y no salen más").
   - La luz: en Safari el brillo hecho con drop-shadow a veces quedaba pegado (al moverse la luz no se borra el brillo anterior). Ahora el
     brillo son dos copias del texto con un trazo más ancho y suave debajo de la luz, que se mueven con ella, sin filtros.
   - Las cintas: el movimiento tiene su inicio explícito (arriba, en sus @keyframes) ---------- */
svg.h1-trazo { --luz: 170, 190, 215; filter: none !important; }
.upn-card svg.h1-trazo { --luz: 191, 230, 243; }
html[data-tema="oscuro"] .hero svg.h1-trazo { --luz: 150, 190, 230; }
@media (prefers-reduced-motion: no-preference) {
  .h1-trazo .trazo-halo tspan { stroke: rgba(255, 255, 255, .38) !important; stroke-width: max(2.6px, .07em) !important; }
  .h1-trazo .trazo-halo--ancho tspan { stroke: rgba(var(--luz), .2) !important; stroke-width: max(5.5px, .2em) !important; }
}
@media (hover: none), (pointer: coarse) {
  .ticker:hover .ticker-track,
  html .principles .pp-fila:hover .pp-puntos.is-cinta,
  html .principles .pp-fila:active .pp-puntos.is-cinta { animation-play-state: running; }
}

/* ---------- La luz de las letras sin la sombra del título (23-10-2026): en la versión oscura los títulos de los servicios llevan una sombra
   oscura para leerse sobre la foto, y la copia de las letras la heredaba: la luz salía con manchas oscuras ---------- */
svg.h1-trazo { text-shadow: none; }

/* ---------- "Marketing con criterio" en el celular: la cinta más lenta, se detiene al tocarla y nunca queda en blanco (pedido de quien
   fundó CORIVA, 23-10-2026). En Safari dejaba de dibujar las tarjetas; la cinta de palabras del hero, que no falla, no tiene máscara
   ni animaciones dentro. Ahora esta tampoco: las orillas se desvanecen con dos velos blancos encima y los íconos de la cinta quedan
   quietos. Al tocarla se detiene (para leer) y sigue 2,5 s después de soltarla (coriva.js) ---------- */
@media (max-width: 760px) {
  html .principles .pp-fila { position: relative; -webkit-mask-image: none; mask-image: none; }
  html .principles .pp-fila::before,
  html .principles .pp-fila::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 22px; pointer-events: none; }
  html .principles .pp-fila::before { left: 0; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
  html .principles .pp-fila::after { right: 0; background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
  html .principles .pp-puntos.is-cinta .principle-icon::after { animation: none; display: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html .principles .pp-puntos.is-cinta { animation-duration: 64s; }
  html body .principles .pp-fila .pp-puntos.is-cinta.is-pausa { animation-play-state: paused; }
}


/* ---------- Dentro de Instagram, Facebook, TikTok y otras apps (23-10-2026: "desde Instagram no se ven los títulos de servicios") ----------
   Su navegador interno no siempre pinta el degradado recortado a las letras con la luz encima: el texto quedaba transparente y solo se
   veía la luz como puntos. Ahí (html.en-app, marcado en el <head>) coriva.js deja esos textos en su color sólido (.sin-recorte), el
   mismo acero (o blanco en la versión oscura), y la luz sigue recorriendo las letras (pidió conservarla). En Safari y Chrome, igual. */
html.en-app .sin-recorte { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; }

/* ---------- La luz de las letras se apaga al final de su recorrido (26-10-2026, "en el celular la luz llega al final y se queda como
   pegada y después vuelve"): el trazo de luz se detenía en -7,5em y, en las letras de contorno largo ("m", "g"), ese punto todavía
   queda sobre la letra, así que la luz se veía quieta hasta la vuelta siguiente. Ahora se desvanece al terminar y vuelve a aparecer
   recién al empezar (fuera de la letra). ---------- */
@keyframes letra-trazo {
  0% { stroke-dashoffset: .85em; stroke-opacity: 1; }
  36% { stroke-opacity: 1; }
  45%, 100% { stroke-dashoffset: -7.5em; stroke-opacity: 0; }
}

/* Paquetes y preguntas frecuentes */
.pq { padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem) clamp(2rem, 1rem + 3vw, 4rem); }
.pq-head { text-align: center; max-width: 60rem; margin-inline: auto; }
.pq-head .section-title b, .faq-head .section-title b { font-weight: 600; color: #44607D; }
.pq-head .section-lede { margin-inline: auto; }
.pq-sello { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 1.3rem; color: var(--ink-3); font-size: var(--fs-small); }
.pq-sello span { display: inline-flex; align-items: center; gap: .55rem; }
.pq-sello em { font-style: normal; }
.pq-corto { display: none; }
.pq-sello i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-solid); box-shadow: 0 0 0 4px var(--ok-halo); }

.pq-radio { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none; }
.pq-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.pq-grupo { display: flex; align-items: center; gap: .8rem; color: var(--ink-3); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pq-grupo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.pq-grupo--mk { grid-row: 1; grid-column: 1 / 3; }
.pq-grupo--tec { grid-row: 1; grid-column: 3 / 5; }
.pq-tiles > .pq-tile { grid-row: 2; }
.pq-canales { display: grid; gap: .6rem; padding: .95rem 1rem 1rem; border-radius: 18px; background: var(--mark-soft); }
.pq-canales-titulo { color: var(--mark); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.pq-canales ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pq-canales li { padding: .34rem .7rem; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: .8rem; box-shadow: inset 0 0 0 1px var(--line); }
.pq-canales li b { color: var(--ink); font-weight: 600; }
.pq-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(46, 65, 88, .35); cursor: pointer; transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.pq-tile-media { position: relative; display: block; height: 74px; overflow: hidden; }
.pq-tile-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
.pq-tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 20%, var(--surface) 100%); }
.pq-tile-body { position: relative; display: grid; gap: .2rem; margin-top: -1.6rem; padding: 0 1.15rem 1.15rem; }
.pq-tile .svc-icon { margin-bottom: .55rem; background: var(--surface); }
.pq-tile-nombre { color: var(--ink); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.pq-tile-lema { color: var(--ink-3); font-size: .84rem; line-height: 1.4; }
.pq-tile-precio { margin-top: .55rem; color: var(--ink-2); font-size: .84rem; }
.pq-tile-precio strong { color: var(--ink); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
#pq-growth:checked ~ .pq-tiles [for="pq-growth"], #pq-web:checked ~ .pq-tiles [for="pq-web"], #pq-smart:checked ~ .pq-tiles [for="pq-smart"], #pq-soft:checked ~ .pq-tiles [for="pq-soft"] { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mark) 55%, transparent), 0 26px 50px -28px rgba(46, 65, 88, .55); }
#pq-growth:checked ~ .pq-tiles [for="pq-growth"]::before, #pq-web:checked ~ .pq-tiles [for="pq-web"]::before, #pq-smart:checked ~ .pq-tiles [for="pq-smart"]::before, #pq-soft:checked ~ .pq-tiles [for="pq-soft"]::before { content: ""; position: absolute; z-index: 2; left: 50%; bottom: 0; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px 4px 0 0; background: var(--mark); }
.pq-tile--mk, .pq-panel--growth { --mark: #8A4F6A; --mark-soft: #F6E7EE; }
.pq-tile--web, .pq-panel--web { --mark: #44607D; --mark-soft: #E4EDF6; }
.pq-tile--smart, .pq-panel--smart { --mark: #4F78A3; --mark-soft: #E5EEF8; }
.pq-tile--soft, .pq-panel--soft { --mark: #4E5F86; --mark-soft: #E6E9F5; }

.pq-panels { margin-top: 1.4rem; }
.pq-panel { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.2rem, .8rem + 2vw, 2.4rem); padding: clamp(1.3rem, .9rem + 1.5vw, 2.2rem); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(68, 88, 111, .04), 0 34px 70px -40px rgba(46, 65, 88, .45); }
#pq-growth:checked ~ .pq-panels .pq-panel--growth, #pq-web:checked ~ .pq-panels .pq-panel--web, #pq-smart:checked ~ .pq-panels .pq-panel--smart, #pq-soft:checked ~ .pq-panels .pq-panel--soft { display: grid; }
.pq-info { display: flex; flex-direction: column; gap: .9rem; padding: .3rem .2rem; }
.pq-modo { align-self: flex-start; padding: .38rem .8rem; border-radius: var(--r-pill); background: var(--mark-soft); color: var(--mark); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pq-info h3 { color: var(--ink); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.pq-info h3 b { font-weight: 600; color: var(--mark); }
.pq-info > p { color: var(--ink-2); line-height: 1.6; }
.pq-incluye { display: grid; margin: .3rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pq-incluye li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.pq-incluye li strong { display: block; color: var(--ink); font-weight: 600; font-size: .95rem; }
.pq-incluye .svc-icon { width: 36px; height: 36px; border-radius: 11px; }
.pq-incluye .svc-icon .mt-ico { width: 17px; height: 17px; }
.pq-nota { color: var(--ink-3); font-size: .82rem; }

.pq-niveles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pq-nivel { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.3rem 1.25rem; border-radius: 22px; background: linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.pq-nivel--pro { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px rgba(46, 65, 88, .55); }
.pq-nivel-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pq-nivel-nombre { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.pq-pill { padding: .28rem .65rem; border-radius: var(--r-pill); background: var(--primary-bg); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--primary-shadow); }
.pq-precio { display: grid; gap: .25rem; }
.pq-desde { color: var(--ink-3); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.pq-monto { color: var(--ink); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pq-monto small { margin-left: .2rem; color: var(--ink-3); font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.pq-monto--cot { font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); color: var(--ink-2); }
.pq-mas { color: var(--ink-3); font-size: .8rem; }
.pq-para { margin-top: -.35rem; color: var(--ink-3); font-size: .9rem; line-height: 1.45; }
.pq-plazo { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; padding: .3rem .65rem; border-radius: var(--r-pill); background: var(--mark-soft); color: var(--mark); font-size: .78rem; font-weight: 600; }
.pq-plazo .mt-ico { width: 14px; height: 14px; }
.pq-etapa .pq-plazo { align-self: center; }
.pq-lista { display: grid; gap: .55rem; margin: 0; padding: .9rem 0 0; list-style: none; border-top: 1px dashed var(--line-strong); }
.pq-lista li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.pq-lista li::before { content: ""; width: 18px; height: 18px; margin-top: .1rem; border-radius: 50%; background: var(--mark-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344607D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pq-nivel .btn { margin-top: auto; align-self: stretch; justify-content: space-between; }

.pq-ruta { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pq-ruta::before { content: ""; position: absolute; top: 31px; left: 16%; right: 16%; height: 1px; background: var(--line-strong); }
.pq-etapa { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 .6rem 1.2rem; text-align: center; }
.pq-num { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 7px rgba(255,255,255,.9), var(--shadow-md); }
.pq-etapa--uno .pq-num { background: var(--primary-bg); color: #fff; }
.pq-etapa b { color: var(--ink); font-size: 1rem; font-weight: 600; }
.pq-etapa .pq-monto { font-size: 1.6rem; }
.pq-etapa .pq-monto--cot { font-size: 1.1rem; }
.pq-etapa p { color: var(--ink-3); font-size: .85rem; line-height: 1.45; }
.pq-caso { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 20px; background: linear-gradient(120deg, var(--mark-soft), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.pq-caso img { width: 44px; height: 44px; border-radius: 13px; flex: none; box-shadow: var(--shadow-md); }
.pq-caso p { color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.pq-caso strong { color: var(--ink); }
.pq-panel--web { grid-template-columns: 1fr; }
.pq-panel--web .pq-info { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.2rem, .8rem + 2vw, 2.4rem); align-content: start; }
.pq-panel--web .pq-info > * { grid-column: 1; }
.pq-panel--web .pq-modo { justify-self: start; }
.pq-panel--web .pq-incluye { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 0; }
.pq-panel--web .pq-niveles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pq-derecha--growth { justify-content: flex-start; }
.pq-derecha--growth .pq-canales { grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; }
.pq-derecha--growth .pq-nota { margin-top: -.3rem; }
.pq-niveles--uno { grid-template-columns: 1fr; }
.pq-unico .pq-nivel-top { flex-wrap: wrap; }
.pq-unico .pq-lista { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
.pq-unico .btn { align-self: flex-start; min-width: 16rem; }
.pq-panel--smart .pq-niveles--uno { align-self: center; }
.pq-derecha { display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }

.pq-combo { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 2rem; margin-top: 1.4rem; padding: clamp(1.6rem, 1rem + 2.5vw, 3rem); overflow: hidden; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line), 0 34px 70px -40px rgba(46, 65, 88, .45); }
.pq-combo-foto { position: absolute; inset: 0; z-index: -1; }
.pq-combo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.pq-combo-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(246,249,252,.97) 0%, rgba(246,249,252,.9) 45%, rgba(246,249,252,.35) 100%); }
.pq-combo h3 { margin-top: .9rem; color: var(--contact-ink); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; }
.pq-combo h3 b { font-weight: 600; color: #44607D; }
.pq-combo p { max-width: 36rem; margin-top: .7rem; color: var(--contact-ink-2); line-height: 1.6; }
.pq-oferta { justify-self: end; display: grid; gap: .45rem; min-width: 260px; padding: 1.5rem 1.6rem; border-radius: 24px; background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-lg); backdrop-filter: blur(12px); }
.pq-oferta s { color: var(--ink-3); font-size: .88rem; }
.pq-oferta .pq-monto { font-size: 2.4rem; }
.pq-oferta small { color: var(--ink-3); font-size: .82rem; margin-bottom: .5rem; }

.faq { max-width: calc(var(--max) + var(--gutter) * 2); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.faq-head { text-align: center; max-width: 52rem; margin-inline: auto; }
.faq-head .section-lede { margin-inline: auto; }
.faq-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; align-items: start; margin-top: 2.2rem; }
.faq-lista details { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 16px 34px -30px rgba(46, 65, 88, .4); }
.faq-lista summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; color: var(--ink); font-weight: 600; font-size: .97rem; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary .svc-icon { width: 38px; height: 38px; --mark: #44607D; --mark-soft: #E4EDF6; }
.faq-lista summary .svc-icon .mt-ico { width: 18px; height: 18px; }
.faq-mas { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); font-weight: 500; transition: transform 250ms var(--ease-out); }
.faq-lista details[open] .faq-mas { transform: rotate(45deg); }
.faq-lista details p { padding: 0 1.2rem 1.15rem 4.1rem; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.faq-otra { display: none; margin-top: 1.4rem; }
@media (min-width: 1081px) {
  .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
  .faq-head { position: sticky; top: calc(var(--nav-h) + 40px); text-align: left; margin: 0; }
  .faq-head .section-title { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); }
  .faq-head .section-lede { margin-inline: 0; }
  .faq-lista { grid-template-columns: 1fr; gap: .6rem; margin-top: 0; }
  .faq-lista summary { padding: .85rem 1.1rem; }
  .faq-otra { display: inline-flex; }
}

@media (min-width: 1081px) {
  .pq-panel--soft { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); row-gap: .8rem; align-items: start; }
  .pq-panel--soft .pq-info { display: contents; }
  .pq-panel--soft .pq-info > * { grid-column: 1; }
  .pq-panel--soft .pq-modo { grid-row: 1; justify-self: start; }
  .pq-panel--soft .pq-info > h3 { grid-row: 2; }
  .pq-panel--soft .pq-info > p:not(.pq-nota) { grid-row: 3; }
  .pq-panel--soft .pq-canales { grid-row: 4; }
  .pq-panel--soft .pq-derecha { grid-column: 2; grid-row: 1 / span 4; justify-content: flex-start; gap: 1rem; }
  .pq-panel--soft .pq-num { width: 44px; height: 44px; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 6px rgba(255,255,255,.9), var(--shadow-md); }
  .pq-panel--soft .pq-ruta::before { top: 22px; }
  .pq-panel--soft .pq-etapa { padding-bottom: .4rem; gap: .45rem; }
  .pq-panel--soft .pq-etapa p { font-size: .84rem; }
  .pq-panel--soft .pq-caso { padding: .85rem 1.1rem; }
  .pq-panel--soft .pq-incluye { grid-column: 1 / -1; grid-row: 5; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
  .pq-panel--soft .pq-incluye li { align-items: start; padding: 0; border-bottom: 0; font-size: .86rem; }
  .pq-panel--soft .pq-nota { grid-column: 1 / -1; grid-row: 6; }
}
@media (max-width: 1080px) {
  .pq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pq-grupo--mk, .pq-grupo--tec, .pq-tiles > .pq-tile { grid-row: auto; grid-column: auto; }
  .pq-grupo--mk, .pq-grupo--tec { grid-column: 1 / -1; }
  .pq-grupo--tec { margin-top: .6rem; }
  .pq-panel, .pq-combo { grid-template-columns: 1fr; }
  .pq-derecha--growth .pq-canales { grid-template-columns: 1fr; }
  .pq-panel--web .pq-info { display: flex; }
  .pq-panel--web .pq-niveles { grid-template-columns: 1fr 1fr; }
  .pq-panel--web .pq-nivel:last-child { grid-column: 1 / -1; }
  .pq-oferta { justify-self: stretch; }
}
@media (max-width: 640px) {
  .pq-sello { flex-wrap: nowrap; gap: .85rem; font-size: .72rem; white-space: nowrap; }
  .pq-sello span { gap: .4rem; }
  .pq-sello i { width: 5px; height: 5px; box-shadow: 0 0 0 3px var(--ok-halo); }
  .pq-largo { display: none; }
  .pq-corto { display: inline; }
  .pq-tiles { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .pq-tile { border-radius: 18px; }
  .pq-tile-media { height: 46px; }
  .pq-tile-body { margin-top: -.9rem; padding: 0 .85rem .85rem; }
  .pq-tile-nombre { font-size: 1rem; }
  .pq-tile-lema { display: none; }
  .pq-tile-precio { margin-top: .2rem; font-size: .78rem; }
  .pq-tile-precio strong { font-size: .9rem; }
  .pq-incluye li { grid-template-columns: 1fr; }
  .pq-niveles, .pq-ruta { grid-template-columns: 1fr; }
  .pq-unico .pq-lista { grid-template-columns: 1fr; }
  .pq-unico .btn { align-self: stretch; min-width: 0; }
  .pq-panel--web .pq-niveles { grid-template-columns: 1fr; }
  .pq-ruta::before { top: 0; bottom: 0; left: 31px; right: auto; width: 1px; height: auto; }
  .pq-etapa { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding: 0 0 .4rem; column-gap: .9rem; }
  .pq-etapa p { flex-basis: 100%; padding-left: 4.4rem; margin-top: -.4rem; }
  .pq-etapa .pq-plazo { margin: -.2rem 0 .1rem 4.4rem; }
  /* Celular: tarjetas compactas */
  .pq-panel { padding: 1.15rem; }
  .pq-modo { padding: .32rem .7rem; font-size: .62rem; letter-spacing: .08em; }
  .pq-info h3 { font-size: 1.4rem; }
  .pq-nivel { gap: .6rem; padding: 1.05rem 1rem 1rem; border-radius: 18px; }
  .pq-nivel .pq-pill { display: none; }
  .pq-nivel-nombre { font-size: 1rem; }
  .pq-para { margin-top: -.15rem; font-size: .86rem; }
  .pq-lista { gap: .45rem; padding-top: .75rem; }
  .pq-lista li { font-size: .86rem; }
  .pq-nivel .btn { margin-top: .3rem; }
  .pq-ruta { gap: .1rem; }
  .pq-ruta::before { left: 17px; top: 18px; bottom: 24px; }
  .pq-etapa { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .3rem .75rem; align-items: center; padding: 0 0 .9rem; text-align: left; }
  .pq-num { width: 36px; height: 36px; font-size: .85rem; box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 5px rgba(255,255,255,.95); }
  .pq-etapa b { grid-column: 2; font-size: .95rem; }
  .pq-etapa .pq-plazo { grid-column: 3; margin: 0; }
  .pq-etapa p { grid-column: 2 / -1; padding-left: 0; margin-top: 0; font-size: .84rem; }
  .pq-caso { align-items: flex-start; gap: .8rem; padding: .9rem 1rem; border-radius: 16px; }
  .pq-caso img { width: 36px; height: 36px; border-radius: 10px; }
  .pq-caso p { font-size: .84rem; }
  .pq-derecha > .btn[style] { align-self: stretch !important; justify-content: space-between; }
  .pq-info { gap: .7rem; }
  .pq-info > p { font-size: .92rem; line-height: 1.55; }
  .pq-incluye { margin-top: .1rem; }
  .pq-incluye li { padding: .55rem 0; font-size: .84rem; line-height: 1.4; }
  .pq-incluye li strong { font-size: .9rem; }
  .pq-info > .pq-nota, .pq-derecha > .pq-nota { font-size: .78rem; line-height: 1.5; }
  .pq-canales { padding: .7rem .6rem .75rem; gap: .45rem; }
  .pq-canales ul { gap: .25rem; }
  .pq-canales li { padding: .24rem .45rem; font-size: .7rem; }
  .pq-nivel .pq-para { display: none; }
  .pq-lista li { line-height: 1.4; }
  .pq-derecha--growth .pq-canales ul { flex-wrap: nowrap; }
  .pq-derecha--growth .pq-canales li { white-space: nowrap; }
  .faq-lista { grid-template-columns: 1fr; }
  .faq-lista details p { padding-left: 1.2rem; }
}
@media (max-width: 380px) {
  .pq-canales li { padding: .22rem .4rem; font-size: .68rem; }
}

/* ---------- Paquetes en la versión oscura (pedido de quien fundó CORIVA, 28-10-2026: "hay que hacerla dark mode"; "no es el fondo,
   solo como las burbujas"): el fondo de la sección sigue claro, como el resto de la página, y solo las burbujas pasan a oscuro, como
   las tarjetas de servicios: los cuatro paquetes, el detalle del paquete elegido y el combo Web + Growth, con texto claro y el color
   de cada paquete en un tono más suave. En la versión clara no cambia nada ---------- */
html[data-tema="oscuro"] :is(.pq-tile, .pq-panel, .pq-combo) {
  --surface: #1D2938;
  --bg-2: #1A2533;
  --ink: #F1F5F9;
  --ink-2: #C6D2DF;
  --ink-3: #9AACBF;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .2);
  color: var(--ink);
}
html[data-tema="oscuro"] .pq-tile { isolation: isolate; background: linear-gradient(170deg, #2A3A50 0%, #223145 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 44px -28px rgba(15, 25, 40, .5); }
html[data-tema="oscuro"] .pq-tile-media { overflow: visible; }
html[data-tema="oscuro"] .pq-tile-media img {
  position: absolute; inset: 0 0 auto 0; z-index: -1; height: 260%; opacity: .78; filter: saturate(.92);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .45) 58%, rgba(0, 0, 0, .15) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .45) 58%, rgba(0, 0, 0, .15) 82%, transparent 100%);
}
html[data-tema="oscuro"] .pq-tile-media::after { content: none; }
html[data-tema="oscuro"] .pq-tile--mk, html[data-tema="oscuro"] .pq-panel--growth { --mark: #E7AFC8; --mark-soft: rgba(176, 102, 138, .22); }
html[data-tema="oscuro"] .pq-tile--web, html[data-tema="oscuro"] .pq-panel--web { --mark: #AFCBE8; --mark-soft: rgba(110, 150, 195, .22); }
html[data-tema="oscuro"] .pq-tile--smart, html[data-tema="oscuro"] .pq-panel--smart { --mark: #A9C8E6; --mark-soft: rgba(141, 179, 218, .24); }
html[data-tema="oscuro"] .pq-tile--soft, html[data-tema="oscuro"] .pq-panel--soft { --mark: #BAC5EA; --mark-soft: rgba(110, 125, 175, .24); }
html[data-tema="oscuro"] .pq-panel { background: radial-gradient(70% 60% at 85% 0%, rgba(150, 185, 225, .2) 0%, rgba(150, 185, 225, 0) 70%), linear-gradient(160deg, #233246 0%, #2A3B52 55%, #33475F 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(15, 25, 40, .6); }
html[data-tema="oscuro"] .pq-nivel { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -34px rgba(0, 0, 0, .6); }
html[data-tema="oscuro"] .pq-tile .svc-icon,
html[data-tema="oscuro"] .pq-incluye .svc-icon { background: rgba(255, 255, 255, .06); color: var(--mark, #C9D6E4); box-shadow: inset 0 0 0 1px var(--line); }
html[data-tema="oscuro"] .pq-canales li { background: rgba(255, 255, 255, .07); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
html[data-tema="oscuro"] .pq-combo-foto img { opacity: .8; filter: saturate(.92); }
html[data-tema="oscuro"] .pq-combo-foto::after { background: linear-gradient(100deg, rgba(30, 43, 60, .9) 0%, rgba(36, 51, 70, .72) 45%, rgba(44, 62, 86, .25) 100%); }
html[data-tema="oscuro"] .pq-combo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(15, 25, 40, .6); }
html[data-tema="oscuro"] .pq-combo h3 { color: #FFFFFF; }
html[data-tema="oscuro"] .pq-combo h3 b { color: #A9C8E6; }
html[data-tema="oscuro"] .pq-combo p { color: rgba(236, 241, 247, .82); }
html[data-tema="oscuro"] .pq-oferta { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(0, 0, 0, .6); }
html[data-tema="oscuro"] .pq-tile :is(.pq-tile-nombre, .pq-tile-lema, .pq-tile-precio) { text-shadow: 0 1px 8px rgba(15, 25, 40, .55); }
html[data-tema="oscuro"] .pq-tile-lema { color: #D2DCE7; }
html[data-tema="oscuro"] .pq-tile .svc-icon { background: rgba(255, 255, 255, .12); }
html[data-tema="oscuro"] .pq-oferta { background: rgba(28, 40, 56, .55); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
html[data-tema="oscuro"] .pq-oferta :is(small, s, .pq-desde) { color: #C9D5E2; }

/* ---------- Paquetes oscuros más livianos (28-10-2026: "que no quede tan duro, con más transparencia, y los íconos no se ven"):
   las burbujas pasan a un vidrio azul acero semitransparente con desenfoque y borde claro; los íconos van en una ficha de vidrio
   blanco con el color fuerte de su paquete, y los vistos de la lista en blanco ---------- */
html[data-tema="oscuro"] .pq-tile--mk { --mark-ico: #8A4F6A; }
html[data-tema="oscuro"] .pq-tile--web { --mark-ico: #44607D; }
html[data-tema="oscuro"] .pq-tile--smart { --mark-ico: #4F78A3; }
html[data-tema="oscuro"] .pq-tile--soft { --mark-ico: #4E5F86; }
html[data-tema="oscuro"] .pq-tile {
  background: linear-gradient(170deg, rgba(58, 80, 108, .62) 0%, rgba(42, 60, 84, .78) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 22px 44px -28px rgba(15, 25, 40, .45);
}
html[data-tema="oscuro"] .pq-tile .svc-icon { background: rgba(255, 255, 255, .9); color: var(--mark-ico, #44607D); box-shadow: 0 6px 16px -8px rgba(10, 20, 35, .45); }
html[data-tema="oscuro"] .pq-panel {
  background: radial-gradient(70% 60% at 85% 0%, rgba(170, 200, 235, .18) 0%, rgba(170, 200, 235, 0) 70%), linear-gradient(160deg, rgba(40, 57, 79, .9) 0%, rgba(50, 70, 96, .84) 55%, rgba(60, 84, 114, .8) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 80px -44px rgba(15, 25, 40, .5);
}
html[data-tema="oscuro"] .pq-nivel { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-tema="oscuro"] .pq-incluye .svc-icon { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-tema="oscuro"] .pq-lista li::before { background: color-mix(in srgb, var(--mark, #AFCBE8) 34%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
html[data-tema="oscuro"] .pq-canales { background: color-mix(in srgb, var(--mark, #AFCBE8) 16%, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-tema="oscuro"] .pq-combo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 80px -44px rgba(15, 25, 40, .5); }
html[data-tema="oscuro"] .pq-combo-foto::after { background: linear-gradient(100deg, rgba(40, 57, 79, .84) 0%, rgba(48, 67, 92, .62) 45%, rgba(56, 78, 106, .2) 100%); }
html[data-tema="oscuro"] :is(.pq-tile, .pq-panel, .pq-combo) { --ink-2: #D6E0EA; --ink-3: #C3CFDC; }
html[data-tema="oscuro"] .pq-tile-lema { color: #E1E8F0; }

/* ---------- Detalle del paquete en la versión oscura con profundidad (28-10-2026: "muy duro, muy plano"): detrás va la foto de su
   paquete, la misma de su tarjeta, apenas visible bajo un vidrio azul acero que se aclara hacia la derecha; las fichas de adentro
   quedan como vidrio claro sobre ella ---------- */
html[data-tema="oscuro"] .pq-panel {
  background-color: #2B3D54;
  background-image:
    linear-gradient(105deg, rgba(30, 44, 62, .9) 0%, rgba(38, 55, 77, .78) 42%, rgba(48, 68, 94, .55) 100%),
    var(--pq-foto, none);
  background-size: cover, cover;
  background-position: center, center 62%;
}
html[data-tema="oscuro"] .pq-panel--growth { --pq-foto: url("/assets/lago-rosa-movil.jpg"); }
html[data-tema="oscuro"] .pq-panel--web { --pq-foto: url("/assets/hero-montanas-movil.jpg"); }
html[data-tema="oscuro"] .pq-panel--smart { --pq-foto: url("/assets/paisaje-verde-movil.jpg"); }
html[data-tema="oscuro"] .pq-panel--soft { --pq-foto: url("/assets/lago-helado-movil.jpg"); }
html[data-tema="oscuro"] .pq-nivel { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .16), 0 20px 40px -28px rgba(10, 20, 35, .5); }
html[data-tema="oscuro"] .pq-canales { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- Detalle de los paquetes más compacto (28-10-2026: "optimiza el uso de espacios, que no quede tanto hacia abajo"), igual en
   la versión clara y la oscura: menos relleno y aire entre filas, fichas más bajas; en el celular, lo que incluye queda solo con su
   título y las 3 opciones de Web se deslizan de lado en vez de apilarse ---------- */
.pq-panel { padding: clamp(1.1rem, .75rem + 1.2vw, 1.7rem); gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); }
.pq-info { gap: .6rem; }
.pq-info h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem); }
.pq-info > p { font-size: .94rem; line-height: 1.5; }
.pq-incluye li { padding: .45rem 0; gap: .7rem; font-size: .86rem; line-height: 1.4; }
.pq-incluye li strong { font-size: .9rem; }
.pq-incluye .svc-icon { width: 32px; height: 32px; border-radius: 10px; }
.pq-incluye .svc-icon .mt-ico { width: 15px; height: 15px; }
.pq-nivel { padding: 1rem 1.1rem 1.05rem; gap: .55rem; border-radius: 20px; }
.pq-lista { gap: .35rem; padding-top: .6rem; }
.pq-lista li { font-size: .86rem; line-height: 1.4; }
.pq-nota { font-size: .78rem; }
.pq-derecha { gap: .8rem; }
.pq-canales { padding: .7rem .9rem .8rem; }
.pq-panel--web .pq-niveles { gap: .8rem; }
@media (min-width: 1081px) {
  .pq-panel--soft { row-gap: .55rem; }
  .pq-panel--soft .pq-incluye { margin-top: .3rem; padding-top: .8rem; gap: 1rem; }
  .pq-panel--soft .pq-etapa { padding-bottom: .2rem; }
}
@media (max-width: 640px) {
  .pq-panel { padding: 1rem; gap: .9rem; }
  .pq-info { gap: .5rem; }
  .pq-incluye li { padding: .35rem 0; }
  .pq-incluye li > span:last-child { font-size: 0; }
  .pq-incluye li strong { font-size: .84rem; }
  .pq-panel--web .pq-niveles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .7rem; margin-inline: -1rem; padding: .2rem 1rem .6rem; scrollbar-width: none; }
  .pq-panel--web .pq-niveles::-webkit-scrollbar { display: none; }
  .pq-panel--web .pq-nivel { flex: 0 0 84%; scroll-snap-align: center; }
  .pq-panel--web .pq-nivel:last-child { grid-column: auto; }
}

/* ---------- Paquetes en el celular, sin tarjetas largas (28-10-2026: "optimiza espacios evitando hacer una tarjeta larga"): todo queda
   dentro de una sola tarjeta, sin la tarjeta interior; lo que incluye va en etiquetas en fila; el título y "Partimos en 1 semana" en una
   línea; sin la bajada repetida; el combo Web + Growth más bajo. Igual en la versión clara y la oscura ---------- */
@media (max-width: 640px) {
  html .pq-incluye { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; border-top: 0; }
  html .pq-incluye li { display: inline-flex; padding: .3rem .65rem; border: 0; border-radius: var(--r-pill); background: var(--mark-soft); box-shadow: none; }
  html .pq-incluye li .svc-icon { display: none; }
  html .pq-incluye li strong { color: var(--mark); font-size: .74rem; font-weight: 600; }
  html[data-tema="oscuro"] .pq-incluye li { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  html[data-tema="oscuro"] .pq-incluye li strong { color: #FFFFFF; }
  html .pq-panel .pq-unico { padding: .8rem 0 0; gap: .5rem; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .pq-unico .pq-nivel-top { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: .5rem; }
  html .pq-unico .pq-nivel-nombre { font-size: .95rem; }
  html .pq-unico .pq-plazo { flex: none; font-size: .7rem; padding: .25rem .55rem; }
  html .pq-unico .pq-para { display: none; }
  html .pq-unico .pq-lista { border-top: 0; padding-top: 0; gap: .3rem; }
  html .pq-unico .pq-lista li { font-size: .82rem; }
  html .pq-derecha { gap: .65rem; }
  html .pq-canales { padding: .6rem .75rem .7rem; gap: .45rem; }
  html .pq-nota { font-size: .72rem; line-height: 1.4; }
  html .pq-info > p { font-size: .88rem; }
  html .pq-combo { gap: 1rem; padding: 1.2rem 1.1rem; }
  html .pq-combo h3 { font-size: 1.3rem; }
  html .pq-combo p { font-size: .86rem; margin-top: .45rem; }
  html .pq-oferta { grid-template-columns: 1fr auto; align-items: center; column-gap: .8rem; row-gap: .1rem; padding: .95rem 1rem; min-width: 0; }
  html .pq-oferta .pq-desde, html .pq-oferta small { grid-column: 1; }
  html .pq-oferta .pq-monto { grid-column: 1; font-size: 1.7rem; }
  html .pq-oferta small { margin-bottom: 0; font-size: .72rem; }
  html .pq-oferta .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 640px) {
  html .pq-unico .pq-nivel-nombre { font-size: .9rem; white-space: nowrap; }
  html .pq-unico .pq-plazo { font-size: .66rem; padding: .22rem .5rem; gap: .3rem; }
  html .pq-oferta { grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .15rem; }
  html .pq-oferta .pq-desde { grid-column: 1 / -1; }
  html .pq-oferta .pq-monto { grid-column: 1; grid-row: 2; }
  html .pq-oferta small { grid-column: 2; grid-row: 2; align-self: center; line-height: 1.3; }
  html .pq-oferta .btn { grid-column: 1 / -1; grid-row: 3; margin-top: .55rem; align-self: stretch; }
}
@media (max-width: 640px) {
  html .pq-unico .pq-nivel-top { flex-wrap: wrap; justify-content: flex-start; row-gap: .35rem; }
  html .pq-oferta .btn { justify-content: space-between; }
}
@media (max-width: 640px) {
  html .pq-ruta { gap: .35rem; }
  html .pq-etapa { padding-bottom: .15rem; }
  html .pq-etapa p { font-size: .78rem; line-height: 1.4; margin-top: -.55rem; }
  html .pq-num { width: 34px; height: 34px; font-size: .8rem; }
  html .pq-caso { padding: .7rem .85rem; gap: .7rem; }
  html .pq-caso img { width: 34px; height: 34px; border-radius: 10px; }
  html .pq-caso p { font-size: .78rem; line-height: 1.45; }
}

/* ---------- El correo de la empresa en el pie de página (29-10-2026, pedido de quien fundó CORIVA: "poner contacto@coriva.cl, actualizar
   el botón y ponerlo en el pie de página como contacto"): bajo el nombre y la bajada de CORIVA, con su ícono de correo en un cuadrado
   acero. Va ahí y no junto a WhatsApp e Instagram para que esa fila siga en una sola línea en PC ---------- */
.footer-brand .footer-correo { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; min-height: 40px; margin-top: .25rem; color: var(--ink-2); font-size: .85rem; font-weight: 500; text-decoration: none; }
.footer-correo-ic { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #5B7593 0%, #44607D 50%, #2F4560 100%); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform 200ms var(--ease-out); }
.footer-correo-ic svg { display: block; }
.footer-brand .footer-correo-ic { color: #FFFFFF; letter-spacing: 0; }
.footer-brand .footer-correo:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .footer-brand .footer-correo:hover { color: var(--ink); }
  .footer-brand .footer-correo:hover .footer-correo-ic { transform: scale(1.08); }
}
@media (max-width: 640px) {
  .footer-brand .footer-correo { justify-self: center; }
}