/* Self-hosted Latin subsets (SIL OFL, see assets/fonts/OFL.txt). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial sized to match each font's text width and metrics, so text keeps its line breaks while the
   fonts load. Bold text gets Arial Bold: Safari draws weight 600 with it, and it is wider than
   Arial Regular. Ascent and descent overrides are the real font's metrics divided by size-adjust.
   Same character range as the real fonts: arrows and check marks they lack use the system font. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 100 500;
  size-adjust: 106.15%;
  ascent-override: 91.28%;
  descent-override: 22.7%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 900;
  size-adjust: 100.75%;
  ascent-override: 96.17%;
  descent-override: 23.92%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 100 500;
  size-adjust: 97.6%;
  ascent-override: 99.28%;
  descent-override: 24.69%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 900;
  size-adjust: 93%;
  ascent-override: 104.19%;
  descent-override: 25.91%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Switches off the icon fallback that each page head keeps for when this file fails to load. */
@layer fallback {
  svg {
    width: revert-layer;
    height: revert-layer;
    fill: revert-layer;
    stroke: revert-layer;
  }
}
:root {
  --paper: #faf9f5;
  --ink: #1c2929;
  --brand: #173b3d;
  --accent: #456851;
  --accent-light: #d4e1c9;
  --line: #dce2da;
  --line-dark: #81948e;
  --quiet: #57635f;
  --white: #fff;
  /* Header bar: a warm neutral, so the bar and its chat button stay clear of WhatsApp's greens. */
  --graphite: #35312e;
  --sand: #cdb899;
  --control-radius: 999px;
  --display:
    'Inter Tight', 'Inter Tight Fallback', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:
    'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.58 var(--sans);
}
a {
  color: inherit;
}
/* Form controls use the browser's own font unless told to inherit the page font. */
button,
input,
select,
textarea {
  font-family: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
/* Text widths use em, not ch: ch is the width of "0", which is 18% narrower in the fallback font,
   so headings wrapped differently until the web fonts arrived. The em values match the old ch
   widths in Inter Tight 600 (0.6297em per ch), Inter 400 (0.6309em) and Inter Tight 500 (0.6039em).
   Rules that cover paragraphs in several fonts keep ch so each one keeps its own width. */
h1 {
  font-size: clamp(3rem, 6.1vw, 5.8rem);
  max-width: 8.8157em;
}
h2 {
  font-size: clamp(2.25rem, 4.5vw, 4.1rem);
  max-width: 10.0751em;
}
h3 {
  font-size: 1.42rem;
  letter-spacing: -0.02em;
}
p {
  max-width: 65ch;
}
.shell {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
}
.section {
  padding: clamp(48px, 5vw, 72px) 0;
}
.section-rule {
  border-bottom: 1px solid var(--line);
}
.kicker {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: -100px;
  padding: 12px 16px;
  color: var(--white);
  background: var(--brand);
}
.skip-link:focus {
  top: 12px;
}
/* The skip link can land on the graphite header, so its ring must show on dark and light. */
.skip-link:focus-visible {
  outline-color: #8a8078;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-row {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.wordmark span {
  color: var(--accent);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.3vw, 30px);
}
.site-nav a {
  min-height: 44px;
  display: grid;
  align-items: center;
  font-size: 0.89rem;
  font-weight: 650;
  text-decoration: none;
}
.site-nav a:not(.nav-contact):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.site-nav .nav-contact {
  font-weight: 600;
}
.nav-contact {
  padding: 8px 12px;
  border: 1px solid var(--brand);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 100ms ease;
}
.nav-contact:hover {
  color: var(--white);
  background: var(--brand);
}
.menu-button {
  display: none;
  min-height: 44px;
  padding: 0 10px;
  color: var(--white);
  border: 1px solid rgba(250, 249, 245, 0.5);
  background: transparent;
  font: 600 0.82rem var(--sans);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 100ms ease;
}
.menu-button:hover {
  color: var(--graphite);
  background: var(--paper);
}
.menu-button > span:last-child {
  display: inline-block;
  transition: transform 160ms ease;
}
.menu-button[aria-expanded='true'] > span:last-child {
  transform: rotate(45deg);
}
.hero {
  padding: clamp(64px, 8vh, 112px) 0 clamp(64px, 8vh, 112px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: start;
  gap: clamp(40px, 5vw, 72px);
}
.hero-lead {
  margin: 22px 0 28px;
  font: 500 clamp(1.45rem, 2.45vw, 2.3rem)/1.18 var(--display);
  letter-spacing: -0.02em;
  max-width: 16.3055em;
}
.intro {
  color: var(--quiet);
  font-size: 1.06rem;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}
.button,
.home-consultoria-action {
  min-height: 48px;
  display: inline-grid;
  align-items: center;
  padding: 10px 17px;
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 100ms ease;
}
.button-solid,
.home-consultoria-action {
  color: var(--white);
  background: var(--brand);
}
.button-solid:hover,
.button-signal:hover,
.home-consultoria-action:hover {
  background: #245254;
}
.button-signal {
  color: var(--white);
  background: var(--brand);
}
.button,
.nav-contact,
.menu-button,
.home-consultoria-action,
.contact-link {
  border-radius: var(--control-radius);
}
.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
  text-underline-offset: 5px;
}
.nav-contact:active,
.menu-button:active,
.button:active {
  transform: translateY(1px);
}
.cuadra-facts {
  padding: 18px 22px;
  border-top: 3px solid var(--accent-light);
  background: var(--brand);
  color: var(--white);
  border-radius: 4px;
}
.examples-section {
  background: #f4f0ea;
}
.cuadra-section {
  background: var(--white);
}
.cuadra-facts {
  margin-top: 3px;
}
.cuadra-facts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuadra-facts li {
  padding: 15px 0;
  border-top: 1px solid var(--line-dark);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
}
.faq-list {
  border-top: 1px solid var(--ink);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  cursor: pointer;
  font: 600 1.38rem var(--display);
  line-height: 1.2;
  letter-spacing: -0.02em;
  list-style: none;
  text-align: left;
  transition: color 160ms ease;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 9px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: var(--accent);
  clip-path: polygon(
    5px 0,
    7px 0,
    7px 5px,
    12px 5px,
    12px 7px,
    7px 7px,
    7px 12px,
    5px 12px,
    5px 7px,
    0 7px,
    0 5px,
    5px 5px
  );
  pointer-events: none;
}
.faq-list summary::after {
  content: '';
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}
.faq-list details[open] summary::before {
  background: var(--brand);
  clip-path: inset(5px 0);
}
.faq-list details[open] summary::after {
  border-color: var(--accent);
  background-color: var(--accent-light);
}
.faq-list summary:hover,
.faq-list details[open] summary {
  color: var(--brand);
}
.faq-list details p {
  padding: 0 54px 25px 0;
  color: var(--quiet);
}
.contact-section {
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--brand);
  color: var(--white);
}
.contact-section .kicker {
  color: var(--white);
}
.contact-grid h2 {
  margin-bottom: 18px;
}
.contact-links {
  align-self: center;
  display: grid;
  gap: 13px;
}
.contact-link {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--accent-light);
  background: var(--accent-light);
  color: var(--brand);
  font: 600 1rem var(--sans);
  text-decoration: none;
}
.contact-icon {
  width: 23px;
  height: 23px;
  flex: none;
}
.contact-link:hover {
  background: var(--white);
  color: var(--brand);
}
.contact-link:focus-visible {
  outline-color: var(--white);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px var(--accent-light);
}
.site-footer {
  padding: clamp(48px, 6vw, 72px) 0 32px;
  background: #0e2021;
  border-top: 1px solid rgba(212, 225, 201, 0.22);
  color: var(--white);
}
.site-footer p {
  color: #d7cec6;
  font-size: 0.85rem;
}
.site-footer .wordmark span {
  color: var(--accent-light);
}
.site-footer :focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 4px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.footer-legal-name {
  margin: 0;
  color: var(--accent-light);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer-desc {
  margin: 0;
  color: #d7cec6;
  font-size: 0.85rem;
  line-height: 1.45;
}
.footer-nav {
  display: flex;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.footer-group {
  min-width: 140px;
}
.footer-heading {
  margin: 0 0 14px;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: #d7cec6;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 140ms ease;
}
.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.footer-legal p {
  margin: 0;
  font-size: 0.82rem;
}
.footer-legal a {
  color: #d7cec6;
  font-size: 0.82rem;
  text-decoration: none;
}
.footer-legal a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-hero {
  padding: clamp(72px, 10vw, 140px) 0 clamp(58px, 8vw, 100px);
  border-bottom: 1px solid var(--line);
}
.legal-lead {
  margin-top: 22px;
  color: var(--quiet);
  font: 500 clamp(1.3rem, 2.2vw, 1.85rem)/1.25 var(--display);
  letter-spacing: -0.02em;
  max-width: 25.3641em;
}
.legal-updated {
  margin-top: 20px;
  color: var(--quiet);
  font-size: 0.88rem;
}
.legal-body {
  padding-top: clamp(56px, 8vw, 100px);
}
.legal-content {
  max-width: 780px;
}
.legal-back {
  margin-bottom: 52px;
}
.legal-block + .legal-block {
  margin-top: 52px;
}
.legal-block h2 {
  max-width: 18.8908em;
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.legal-block p + p {
  margin-top: 18px;
}
.legal-block ul {
  margin: 16px 0 0;
  padding-left: 1.35rem;
}
.legal-block li + li {
  margin-top: 8px;
}
.legal-block a {
  text-underline-offset: 4px;
}
@media (max-width: 760px) {
  .shell {
    width: min(100% - 32px, 600px);
  }
  html:not(.js-ready) .site-header {
    position: static;
  }
  html:not(.js-ready) .header-row {
    flex-wrap: wrap;
  }
  html:not(.js-ready) .site-nav {
    flex-basis: 100%;
  }
  .site-nav {
    position: static;
    display: grid;
    padding: 12px 0 18px;
  }
  .js-ready .menu-button {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .js-ready .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    display: grid;
    padding: 12px 16px 18px;
    background: var(--graphite);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      visibility 0s 200ms;
  }
  .js-ready .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      visibility 0s;
  }
  .site-nav a {
    padding: 8px 0;
  }
  .nav-contact {
    padding: 11px 12px !important;
  }
  .hero {
    padding-top: 75px;
  }
  .hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cuadra-facts {
    margin: 0;
  }
  .faq-list summary {
    font-size: 1.18rem;
    gap: 16px;
    min-height: 64px;
  }
  .faq-list details p {
    padding-right: 0;
  }
  .footer-main {
    flex-direction: column;
    gap: 32px;
  }
  .footer-brand {
    max-width: none;
  }
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
  }
  .footer-group {
    min-width: 0;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .nav-contact,
  .menu-button,
  .button,
  .menu-button > span:last-child {
    transition: none;
  }
  .js-ready .site-nav,
  .js-ready .site-nav.is-open {
    transition: none;
    transform: none;
  }
}

/* Editorial service pages. The same layout grammar keeps the family coherent while each route gets its own story and accent. */
.editorial-page {
  --editorial-wash: var(--home-muted-wash);
  --editorial-line: var(--home-muted-line);
  --editorial-accent: var(--home-muted);
  --editorial-deep: var(--brand);
  --editorial-deep-text: var(--white);
  --editorial-soft: #fffdf8;
  --editorial-warm: #f1eee7;
  --editorial-chart: var(--accent);
  overflow-x: hidden;
}
.service-desarrollo {
  --editorial-wash: #e8e2d7;
  --editorial-line: #aeb8b2;
  --editorial-accent: var(--brand);
  --editorial-deep: var(--brand);
  --editorial-chart: #7f9e76;
}
.service-consultoria {
  --editorial-wash: var(--home-sage-wash);
  --editorial-line: #94ad82;
  --editorial-accent: var(--accent);
}
.product-cuadra {
  --editorial-wash: #e6eddf;
  --editorial-line: #94ad82;
  --editorial-accent: var(--accent);
  --editorial-deep: var(--brand);
  --editorial-chart: var(--accent);
}
.giro-page {
  --editorial-wash: var(--home-paper-deep);
  --editorial-line: #b7bfba;
  --editorial-accent: var(--brand);
}
.editorial-page .shell {
  width: min(1240px, calc(100% - 56px));
}
.editorial-page h1,
.editorial-page h2,
.editorial-page h3 {
  text-wrap: balance;
}
.editorial-hero {
  padding: clamp(72px, 8vw, 126px) 0 clamp(70px, 8vw, 112px);
  background: var(--editorial-wash);
  border-bottom-color: var(--editorial-line);
}
.editorial-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
}
.editorial-hero-grid.editorial-hero-copy-only {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.editorial-hero-copy-only .editorial-hero-copy {
  max-width: 900px;
}
.editorial-hero-grid.editorial-hero-copy-only h1 {
  max-width: 760px;
}
.editorial-hero-copy-only .editorial-lead {
  max-width: 39.1133em;
  margin-top: 28px;
}
.consultoria-guide {
  border-radius: 6px;
  margin-top: 32px;
}
.consultoria-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.consultoria-guide-card {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.consultoria-guide-card:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.consultoria-guide-card h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.consultoria-guide-card p {
  margin: 0;
  color: var(--quiet);
  font-size: 0.88rem;
  line-height: 1.5;
}
.consultoria-guide .visual-note {
  margin-top: 20px;
}
.editorial-hero-copy {
  min-width: 0;
}
.editorial-eyebrow {
  margin-bottom: 18px;
  color: var(--editorial-accent);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.editorial-hero h1 {
  max-width: 7.5563em;
  font-size: clamp(3rem, 5.1vw, 5.35rem);
  line-height: 1.04;
}
.editorial-lead {
  max-width: 26.4961em;
  margin-top: 24px;
  color: var(--quiet);
  font-size: clamp(1.1rem, 1.45vw, 1.28rem);
  line-height: 1.52;
}
.editorial-note {
  max-width: 30.2812em;
  margin-top: 15px;
  color: var(--quiet);
  font-size: 0.92rem;
}
.editorial-page .editorial-hero .action-row {
  margin-top: 31px;
}
.editorial-page .editorial-hero .button-solid {
  background: var(--editorial-deep);
}
.editorial-page .editorial-hero .text-link {
  color: var(--editorial-deep);
}
.editorial-visual {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #aeb8b2;
  border-radius: 12px;
  background: var(--editorial-soft);
  box-shadow: 0 18px 35px rgba(23, 59, 61, 0.12);
}
.visual-card-body {
  padding: clamp(20px, 3vw, 31px);
}
.visual-heading-row,
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.visual-heading-row > div {
  display: grid;
  gap: 5px;
}
.visual-overline {
  color: var(--quiet);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.visual-heading-row strong {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.visual-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--quiet);
  font-size: 0.74rem;
}
.note-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--editorial-accent);
}
.editorial-section {
  padding: clamp(70px, 8vw, 116px) 0;
}
.editorial-problem {
  background: var(--paper);
}
.editorial-intro {
  min-width: 0;
}
.editorial-intro > p {
  max-width: 72ch;
}
.editorial-intro-wide {
  max-width: none;
}
.editorial-intro h2 {
  max-width: 16.372em;
  font-size: clamp(2.1rem, 3.4vw, 3.35rem);
  line-height: 1.01;
}
.editorial-intro > p:not(.editorial-eyebrow) {
  margin-top: 20px;
  color: var(--quiet);
  font-size: 1.07rem;
  line-height: 1.58;
}
.editorial-card-grid {
  display: grid;
  gap: 18px;
  margin-top: 48px;
}
.editorial-card-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Same card as the home page's problems: white, rounded and with a soft shadow. */
.editorial-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 3px 8px rgba(27, 29, 34, 0.04);
}
.editorial-process article > span {
  color: var(--editorial-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.editorial-card h3 {
  max-width: none;
  margin-top: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.12;
}
.editorial-card p {
  margin-top: 12px;
  color: var(--quiet);
  font-size: 0.94rem;
  line-height: 1.55;
}
.editorial-dark {
  background: var(--editorial-deep);
  color: var(--editorial-deep-text);
}
.editorial-dark .editorial-eyebrow {
  color: var(--accent-light);
}
.editorial-dark .editorial-intro > p:not(.editorial-eyebrow),
.editorial-dark .editorial-list p {
  color: #d8ded8;
}
.editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(48px, 8vw, 110px);
}
.editorial-list {
  border-top: 1px solid rgba(212, 225, 201, 0.32);
}
.editorial-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(212, 225, 201, 0.32);
}
.editorial-list h3 {
  margin-bottom: 8px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.editorial-list p {
  max-width: 31.5429em;
  font-size: 0.96rem;
  line-height: 1.55;
}
.editorial-visual-section {
  background: var(--editorial-wash);
  border-block: 1px solid var(--editorial-line);
}
.development-examples {
  margin-top: clamp(32px, 5vw, 49px);
}
.editorial-scope {
  background: var(--paper);
}
.editorial-process {
  border-top: 1px solid var(--ink);
}
.editorial-process article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}
.editorial-process h3 {
  margin-bottom: 7px;
  font-size: 1.3rem;
}
.editorial-process p {
  color: var(--quiet);
  font-size: 0.93rem;
}
.deliverables-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.deliverables-row > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
.deliverables-row > div:last-child {
  border-right: 0;
}
.deliverables-row strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.deliverables-row p {
  color: var(--quiet);
  font-size: 0.87rem;
  line-height: 1.5;
}
.editorial-cta {
  padding: clamp(64px, 7vw, 95px) 0;
  background: var(--editorial-deep);
  color: var(--white);
}
.editorial-cta .editorial-eyebrow {
  color: var(--accent-light);
}
.editorial-cta h2 {
  max-width: 10.0751em;
  font-size: clamp(2.35rem, 4vw, 4rem);
  line-height: 1.02;
}
.editorial-cta p:not(.editorial-eyebrow) {
  max-width: 30.2812em;
  margin-top: 18px;
  color: #d8ded8;
}
.editorial-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.65fr);
  gap: 70px;
}
.editorial-cta-actions {
  display: grid;
  justify-items: end;
  gap: 12px;
  align-self: center;
}
.editorial-cta .contact-wa-primary {
  width: min(100%, 360px);
  margin-top: 0;
  padding: 0 24px;
}
/* The global green ring is 1.94:1 on dark teal; white clears 3:1 easily. */
.editorial-cta .contact-wa-primary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}
.giro-page .editorial-cta-actions {
  margin-top: 28px;
}
.editorial-cta .contact-links {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
/* Centered and at the same size as the WhatsApp button above it, so the pair lines up. */
.editorial-cta .contact-link {
  width: min(100%, 360px);
  min-height: 56px;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(250, 249, 245, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-size: 1.05rem;
}
.editorial-cta .contact-link .contact-icon {
  width: 22px;
  height: 22px;
}
.editorial-cta .contact-link:hover {
  border-color: var(--white);
  background: rgba(250, 249, 245, 0.08);
}
/* Tablets: the buttons would wrap in a narrow column beside the text, so they go below it. */
@media (max-width: 1023px) {
  .editorial-cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .editorial-cta-actions {
    justify-items: start;
  }
  .editorial-cta .contact-links {
    justify-content: flex-start;
  }
  .giro-page .editorial-cta-actions {
    margin-top: 0;
  }
}
@media (max-width: 760px) {
  .editorial-cta-actions {
    justify-items: stretch;
  }
  .editorial-cta .contact-wa-primary {
    width: 100%;
  }
  .editorial-cta .contact-links {
    justify-content: stretch;
  }
  .editorial-cta .contact-link {
    width: 100%;
  }
}
.editorial-cta .text-link {
  display: inline-flex;
  margin-top: 23px;
  color: var(--accent-light);
}
.editorial-cta .text-link:hover {
  color: var(--white);
}

.panel-metric-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #d5dad2;
  background: #fff;
}
.panel-metric-grid span,
.panel-metric-grid small {
  color: var(--quiet);
  font-size: 0.63rem;
}
.panel-metric-grid strong {
  color: var(--brand);
  font: 600 clamp(1.2rem, 2vw, 1.55rem)/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.budget-track {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #dfe8da;
}

/* Cuadra product panel. */
.cuadra-panel {
  margin-top: 0;
  padding: 0;
  border: 1px solid #8da68a;
  background: #edf2e9;
  box-shadow: 0 14px 28px rgba(23, 59, 61, 0.1);
  --editorial-chart: var(--accent);
}
.cuadra-product-stage {
  margin-top: 50px;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 14px;
  background: var(--brand);
  box-shadow: 0 14px 30px rgba(23, 59, 61, 0.16);
}
.panel-layout {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  min-height: 360px;
  border: 1px solid #a9bca2;
  background: #fafbf8;
}
.panel-sidebar {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 20px 14px;
  border-right: 1px solid #c5d1c0;
  background: #e3edde;
  color: #59675b;
  font-size: 0.69rem;
}
.panel-sidebar span {
  padding: 7px 8px;
}
.panel-sidebar span.is-active {
  background: #c9ddc0;
  color: var(--brand);
  font-weight: 800;
}
.panel-content {
  min-width: 0;
  padding: 16px;
}
.panel-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.panel-metric-warm {
  border-color: #d6bd9e !important;
  background: #fffaf3 !important;
}
.panel-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 12px;
  margin-top: 15px;
}
.panel-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d1d9ce;
  background: #fff;
}
.panel-heading {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e5df;
}
.panel-heading strong {
  font-size: 0.78rem;
}
.panel-heading span {
  color: var(--quiet);
  font-size: 0.64rem;
}
.budget-line {
  display: grid;
  gap: 7px;
  margin-top: 17px;
}
.budget-line > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.68rem;
}
.budget-line > div span {
  color: var(--quiet);
}
.budget-line > div strong {
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.budget-track i {
  display: block;
  height: 100%;
  background: var(--editorial-chart);
}
.panel-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.panel-list li {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  padding: 13px 0;
  border-bottom: 1px solid #e0e5df;
  font-size: 0.67rem;
}
.panel-list li:last-child {
  border-bottom: 0;
}
.panel-list span {
  color: var(--quiet);
}
.panel-list strong {
  color: var(--brand);
  font-size: 0.65rem;
}
.panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  color: var(--quiet);
  font-size: 0.64rem;
}
.panel-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.panel-footer i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--editorial-chart);
}
.panel-footer i.legend-expense {
  background: #ba7047;
}
.editorial-demo {
  background: var(--editorial-wash);
}
.editorial-demo .button {
  margin-top: 27px;
}
.demo-steps {
  border-top: 1px solid var(--ink);
}
.demo-steps article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.demo-steps article > span {
  color: var(--editorial-accent);
  font: 600 1.2rem var(--display);
  letter-spacing: -0.01em;
}
.demo-steps strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.demo-steps p {
  grid-column: 1;
  color: var(--quiet);
  font-size: 0.9rem;
}

.giro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 50px;
}
.giro-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 12px;
  padding: 24px;
  border: 1px solid var(--editorial-line);
  background: var(--editorial-soft);
}
.giro-card > div:nth-child(2) {
  min-width: 0;
}
.giro-card h3 {
  margin-bottom: 9px;
  font-size: 1.35rem;
}
.giro-card p {
  color: var(--quiet);
  font-size: 0.9rem;
  line-height: 1.5;
}
.giro-links {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin-top: 20px;
}
.giro-links a {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
  text-underline-offset: 4px;
}

@media (max-width: 1040px) {
  .editorial-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr);
    gap: 36px;
  }
  .giro-card {
    padding: 20px;
  }
}
@media (max-width: 760px) {
  .editorial-page .shell {
    width: min(100% - 32px, 600px);
  }
  .editorial-hero {
    padding: 57px 0 58px;
  }
  .editorial-hero-grid,
  .editorial-split,
  .editorial-cta-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .editorial-hero h1 {
    max-width: 8.186em;
    font-size: clamp(2.55rem, 11vw, 3.55rem);
  }
  .editorial-lead {
    font-size: 1.08rem;
  }
  .editorial-hero .action-row {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  .editorial-hero .button {
    justify-content: center;
    text-align: center;
  }
  .editorial-visual {
    box-shadow: 0 9px 18px rgba(23, 59, 61, 0.09);
  }
  .visual-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .editorial-section {
    padding: 60px 0;
  }
  .editorial-intro h2 {
    max-width: none;
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .editorial-card-grid.three-up,
  .deliverables-row,
  .giro-grid {
    grid-template-columns: 1fr;
  }
  .editorial-card {
    min-height: 0;
  }
  .editorial-card h3 {
    margin-top: 0;
  }
  .editorial-list article {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .editorial-process article {
    grid-template-columns: minmax(0, 1fr);
  }
  .deliverables-row {
    gap: 0;
    margin-top: 38px;
  }
  .deliverables-row > div {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .deliverables-row > div:last-child {
    border-bottom: 0;
  }
  .editorial-cta h2 {
    max-width: 8.8157em;
    font-size: clamp(2.25rem, 10vw, 3.2rem);
  }
  .panel-layout {
    grid-template-columns: 1fr;
  }
  .panel-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 5px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid #c5d1c0;
  }
  .panel-sidebar span {
    min-width: 0;
    overflow: hidden;
    padding: 6px;
    font-size: 0.58rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .panel-content {
    padding: 17px;
  }
  .panel-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
    gap: 6px;
  }
  .panel-metric-grid > div {
    padding: 8px 6px;
  }
  .panel-metric-grid > div:last-child {
    grid-column: auto;
  }
  .panel-main-grid {
    grid-template-columns: 1fr;
  }
  .panel-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .cuadra-product-stage .panel-layout {
    grid-template-columns: 1fr;
  }
  .cuadra-product-stage .panel-content {
    padding: 16px;
  }
  .giro-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .giro-card h3 {
    font-size: 1.25rem;
  }
}

/* The page remains readable without animation or JavaScript. */
section[id],
main[id],
.anchor-target[id] {
  scroll-margin-top: 90px;
}
.cuadra-story {
  padding-block: clamp(48px, 5vw, 72px);
}
.cuadra-story-intro {
  display: grid;
  gap: 22px;
  padding-bottom: 35px;
}
.cuadra-story-intro .kicker {
  margin: 0;
}
.cuadra-story-intro > p:last-child {
  color: var(--quiet);
  max-width: 45.4218em;
}
.cuadra-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: clamp(42px, 7vw, 100px);
}
.cuadra-story-copy {
  min-width: 0;
}
.cuadra-beat {
  display: grid;
  align-content: center;
  gap: 16px;
  padding-block: 40px;
}
.cuadra-beat h3 {
  max-width: 12.5938em;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: -0.03em;
}
.cuadra-beat > p:last-child {
  color: var(--quiet);
  font-size: 1.02rem;
}
.cuadra-story .cuadra-facts {
  margin: 28px auto 0;
}
.cuadra-story .cuadra-facts ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cuadra-story .cuadra-facts li {
  padding: 6px 0;
  border-top: none;
}
.cuadra-demo-note {
  margin-top: 10px;
  color: var(--quiet);
  font-size: 0.82rem;
  line-height: 1.4;
}
.phone-track {
  min-width: 0;
}
.phone-stage {
  position: sticky;
  top: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  margin: 0;
  padding: 18px 0 24px;
}
.phone-product {
  position: relative;
  width: min(386px, calc((100svh - 200px) * 0.496), 100%);
  max-width: 100%;
  aspect-ratio: 744/1500;
  container-type: inline-size;
  isolation: isolate;
  filter: drop-shadow(0 18px 20px rgba(27, 29, 34, 0.18));
}
.phone-hardware {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(1.2% 1.6% round 17% / 8%);
  pointer-events: none;
}
.phone-product picture {
  position: absolute;
  inset: 0;
  display: block;
}
.phone-screen {
  position: absolute;
  z-index: 2;
  inset: 2.4% 4.9% 2.7%;
  overflow: hidden;
  border-radius: 14% / 6.8%;
  background: #eee9df;
  color: #1b1d22;
  font: 3.8cqw/1.35 var(--sans);
}
.phone-island {
  position: absolute;
  z-index: 8;
  top: 1.7%;
  left: 50%;
  width: 30%;
  height: 3.4%;
  translate: -50% 0;
  border-radius: 999px;
  background: #070809;
  box-shadow: inset 0 0 0 1px #26282c;
}
.phone-status {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  right: 0;
  height: 6.3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8.5%;
  background: #fffdf8;
  font-size: 3.3cqw;
  font-weight: 750;
}
.phone-indicators {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}
.phone-indicators svg {
  width: 6cqw;
  height: 3cqw;
}
.phone-home {
  position: absolute;
  z-index: 7;
  bottom: 1%;
  left: 35%;
  width: 30%;
  height: 0.5%;
  border-radius: 4px;
  background: #1b1d22;
}
.chat-header {
  position: absolute;
  z-index: 6;
  top: 6.2%;
  left: 0;
  right: 0;
  height: 9%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0 3cqw 0 2cqw;
  border-bottom: 1px solid rgba(27, 29, 34, 0.12);
  background: #fffdf8;
}
.chat-back {
  color: #197d69;
  font-size: 9cqw;
  font-weight: 300;
  line-height: 1;
}
.chat-avatar {
  width: 9cqw;
  height: 9cqw;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font: 700 3cqw var(--sans);
}
.chat-title {
  min-width: 0;
  display: grid;
  flex: 1;
}
.chat-title strong {
  overflow: hidden;
  font-size: 3.7cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-title small {
  color: #6d716f;
  font-size: 2.9cqw;
}
.chat-actions {
  display: flex;
  gap: 3cqw;
  color: #197d69;
}
.chat-actions svg {
  width: 5cqw;
  height: 5cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.chat-viewport {
  position: absolute;
  z-index: 3;
  inset: 15.2% 0 9.4%;
  overflow: hidden;
  background-color: #eee9df;
}
.chat-transcript {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 100%;
  padding: 12px 8px 26px;
}
.chat-date {
  align-self: center;
  margin: 3px 0 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fffdf8;
  color: #64666b;
  box-shadow: 0 1px 3px rgba(27, 29, 34, 0.1);
  font-size: 2.9cqw;
}
.chat-bubble {
  position: relative;
  max-width: 88%;
  padding: 2cqw 2.5cqw 5.5cqw;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 0 1px 2px rgba(27, 29, 34, 0.1);
}
.chat-bubble.incoming {
  border-top-left-radius: 4px;
}
.chat-bubble.outgoing {
  align-self: flex-end;
  border-top-right-radius: 4px;
  background: #dceccb;
}
.chat-bubble b {
  display: block;
  margin-bottom: 2px;
  color: #197d69;
  font-size: 3.2cqw;
}
.chat-bubble strong {
  font-weight: 800;
}
.chat-bubble small {
  position: absolute;
  right: 7px;
  bottom: 4px;
  color: #646963;
  font-size: 2.7cqw;
}
.chat-bubble.attachment {
  width: 73%;
}
.receipt-preview {
  display: block;
  padding: 3cqw;
  border: 1px solid #d2c9bc;
  background: #e5ded3;
  color: #4a4c50;
  font-weight: 700;
}
.final-message {
  border: 1px solid #a6bf91;
}
.chat-composer {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9.5%;
  display: grid;
  grid-template-columns: 5cqw 1fr 5cqw;
  align-items: center;
  gap: 2cqw;
  padding: 1cqw 2.5cqw 4cqw;
  border-top: 1px solid rgba(27, 29, 34, 0.12);
  background: #f6f2ea;
  color: #197d69;
  font-size: 6cqw;
}
.chat-composer svg {
  width: 5cqw;
  height: 5cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.chat-input {
  min-height: 7cqw;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #d5d0c7;
  border-radius: 999px;
  background: #fffdf8;
  color: #64666b;
  font-size: 3.2cqw;
}
.phone-stage figcaption {
  max-width: 330px;
  margin-top: 12px;
  color: var(--quiet);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 760px) {
  .cuadra-story-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .phone-track {
    order: -1;
  }
  .phone-stage {
    top: 80px;
  }
  .phone-product {
    width: min(326px, calc((100svh - 180px) * 0.496), calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
  .cuadra-beat {
    border-top: 1px solid var(--line);
  }
  .cuadra-story .cuadra-facts ul {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Landscape phones keep the image usable without a very small pinned viewport. */
@media (max-height: 500px) {
  .cuadra-story-grid {
    grid-template-columns: 1fr;
  }
  .phone-track {
    order: -1;
  }
  .phone-stage {
    position: relative;
    top: auto;
  }
  .phone-product {
    width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-stage {
    position: relative;
    top: auto;
  }
}

/* Homepage editorial system. Kept under .home-page so the service and product pages retain their existing rhythm. */
.home-page,
.service-page {
  --home-sage-wash: #e6eddf;
  --home-sage: #b9cfaa;
  --home-muted: #65716e;
  --home-muted-wash: #e9eceb;
  --home-muted-line: #bdc5c2;
  --home-sand: #f1eee7;
  --home-paper-deep: #e8e2d7;
}
.home-page .shell {
  width: min(1240px, calc(100% - 56px));
}
.home-page .section {
  padding: clamp(64px, 6vw, 96px) 0;
}
.app-window {
  overflow: hidden;
  border: 1px solid #9ea496;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 29, 34, 0.12);
}
.app-window-bar {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid #b8beb0;
  background: #e8eae4;
  color: #454a44;
  font-size: 0.68rem;
  font-weight: 750;
}
.app-window-dots {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: none;
  border-radius: 50%;
  background: #de5f53;
  box-shadow:
    13px 0 #e5b045,
    26px 0 #5aa368;
  margin-right: 22px;
}
.app-window-title {
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.home-demo > .app-window-bar {
  grid-column: 1 / -1;
}

.home-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.84fr);
  gap: clamp(44px, 8vw, 112px);
  align-items: start;
}
.home-development-copy {
  min-width: 0;
  max-width: 39.1133em;
}
.home-page .home-section-intro h2 {
  max-width: 10.7048em;
  font-size: clamp(2.35rem, 4.1vw, 4rem);
  line-height: 1.02;
}
.home-section-intro > p {
  color: var(--quiet);
  font-size: 1.04rem;
}

.home-demo-section {
  background: var(--brand);
  color: var(--white);
  padding: clamp(64px, 6vw, 92px) 0;
  border-bottom: 1px solid rgba(212, 225, 201, 0.32);
}
.home-demo-section .kicker {
  color: var(--accent-light);
}
.home-demo-section .home-section-subtitle {
  margin-top: 14px;
  color: #dce2da;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 34.0664em;
}
.home-development-actions {
  margin-top: 20px;
}
.home-section-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.home-section-more-link:hover {
  color: var(--brand);
}
.home-consultoria-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.home-consultoria-actions .home-consultoria-action {
  margin-top: 0;
}
.home-consultoria-actions .home-section-more-link {
  margin-top: 0;
}
.home-service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 38px 0 0;
}
.home-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 30px);
  background: #fffdf8;
  border: 1.5px solid #b8bcb0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  min-width: 0;
  max-width: 100%;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.home-service-card[href='consultoria-operativa/'] {
  background: var(--home-muted-wash);
  border-color: var(--home-muted-line);
}
.home-service-card[href='consultoria-operativa/'] .home-service-icon {
  background: var(--paper);
  color: var(--home-muted);
}
.home-service-card[href='consultoria-operativa/'] .home-service-tag {
  color: var(--quiet);
}
.home-service-card[href='consultoria-operativa/'] .home-service-footer {
  border-top-color: var(--home-muted-line);
  color: var(--quiet);
}
.home-service-card[href='consultoria-operativa/'] .home-service-cue {
  background: var(--paper);
  border-color: var(--home-muted-line);
  color: var(--quiet);
}
.home-service-card[href='desarrollo-software/'] {
  background: var(--paper);
  border-color: var(--line-dark);
  color: var(--ink);
}
.home-service-card[href='desarrollo-software/'] .home-service-icon {
  background: #eef2eb;
  color: var(--brand);
}
.home-service-card[href='desarrollo-software/'] .home-service-tag,
.home-service-card[href='desarrollo-software/'] .home-service-footer {
  color: var(--accent);
}
.home-service-card[href='desarrollo-software/'] .home-service-title {
  color: var(--ink);
}
.home-service-card[href='desarrollo-software/'] .home-service-desc {
  color: var(--quiet);
}
.home-service-card[href='desarrollo-software/'] .home-service-footer {
  border-top-color: var(--line);
}
.home-service-card[href='desarrollo-software/'] .home-service-cue {
  background: #f0f4ee;
  border-color: #c8cec2;
  color: var(--ink);
}
.home-service-card[href='desarrollo-software/']:hover .home-service-title {
  color: var(--brand);
}
.home-service-card[href='desarrollo-software/']:hover {
  border-color: var(--accent);
}
.home-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}
.home-service-card:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 4px;
  border-color: var(--brand);
}
.home-service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.home-service-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef2eb;
  color: var(--brand);
}
.home-service-copy {
  margin-bottom: 20px;
}
.home-service-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-service-title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
}
.home-service-card:hover .home-service-title {
  color: var(--brand);
}
.home-service-desc {
  margin: 0;
  color: var(--quiet);
  font-size: 0.94rem;
  line-height: 1.55;
}
.home-service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-service-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0f4ee;
  border: 1px solid #c8cec2;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.home-service-card:hover .home-service-cue,
.home-service-card:focus-visible .home-service-cue {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
  transform: translateY(2px);
}

/* Card 3 dark variant (Cuadra) */
.home-service-card-dark {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
.home-service-card-dark .home-service-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-light);
}
.home-service-card-dark .home-service-tag {
  color: var(--accent-light);
}
.home-service-card-dark .home-service-title {
  color: var(--white);
}
.home-service-card-dark:hover .home-service-title {
  color: var(--accent-light);
}
.home-service-card-dark .home-service-desc {
  color: #dce2da;
}
.home-service-card-dark .home-service-footer {
  border-top-color: rgba(212, 225, 201, 0.2);
  color: var(--accent-light);
}
.home-service-card-dark .home-service-cue {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 225, 201, 0.3);
  color: var(--white);
}
.home-service-card-dark:hover .home-service-cue,
.home-service-card-dark:focus-visible .home-service-cue {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--brand);
}
.home-service-card-dark:hover {
  border-color: var(--accent-light);
}

/* Cuadra uses the same sage product surface as its destination section. */
.home-service-card[href='cuadra/'] {
  background: var(--home-sage-wash);
  border-color: #94ad82;
  color: var(--ink);
}
.home-service-card[href='cuadra/'] .home-service-icon {
  background: var(--white);
  color: var(--brand);
}
.home-service-card[href='cuadra/'] .home-service-tag {
  color: var(--accent);
}
.home-service-card[href='cuadra/'] .home-service-title {
  color: var(--ink);
}
.home-service-card[href='cuadra/'] .home-service-desc {
  color: var(--quiet);
}
.home-service-card[href='cuadra/'] .home-service-footer {
  border-top-color: #94ad82;
  color: var(--brand);
}
.home-service-card[href='cuadra/'] .home-service-cue {
  background: var(--white);
  border-color: #94ad82;
  color: var(--brand);
}
.home-service-card[href='cuadra/']:hover {
  border-color: var(--accent);
}
.home-service-card[href='cuadra/']:hover .home-service-title {
  color: var(--brand);
}

/* Señales operativas */
.home-signals-section {
  background: var(--home-sage-wash);
  border-bottom: 1px solid var(--line);
}
.home-signals-intro {
  max-width: 46.6836em;
}
.home-signals-intro h2 {
  max-width: 14.4829em;
  font-size: clamp(2.35rem, 4.1vw, 4rem);
}
.home-signals-intro > p:not(.kicker) {
  max-width: 41.0058em;
  margin-top: 22px;
  color: var(--quiet);
  font-size: 1.08rem;
}
.home-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.home-signal-card {
  display: grid;
  grid-template-rows: minmax(4.2rem, auto) auto;
  align-content: start;
  min-width: 0;
  min-height: 278px;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 3px 8px rgba(27, 29, 34, 0.04);
}
.home-signal-card h3 {
  margin: 0;
  font-size: clamp(1.42rem, 2vw, 1.8rem);
  line-height: 1.13;
}
.home-signal-card p {
  margin: 18px 0 0;
  color: var(--quiet);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* Consultoría Operativa */
.home-consultoria-section {
  background: var(--home-muted-wash);
  border-bottom: 1px solid var(--line);
  padding: clamp(64px, 6vw, 92px) 0;
}
.home-consultoria-layout {
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  align-items: start;
}
.home-consultoria-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
}
.home-consultoria-heading {
  min-width: 0;
}
.home-consultoria-heading h2 {
  max-width: 11.3345em;
  font-size: clamp(2.4rem, 4vw, 4rem);
}
.home-consultoria-copy {
  min-width: 0;
  max-width: 42.8984em;
}
.home-consultoria-summary {
  color: var(--quiet);
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.55;
}
.home-consultoria-audience {
  margin-top: 24px;
  color: var(--quiet);
  font-size: 0.98rem;
  line-height: 1.55;
}
.home-consultoria-closing {
  min-width: 0;
}
.home-consultoria-steps {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--home-muted-line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 3px 8px rgba(27, 29, 34, 0.04);
}
.home-consultoria-steps h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-consultoria-steps h3 span {
  color: var(--accent);
  font-size: 1.2rem;
}
.home-consultoria-steps ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(24px, 5vw, 72px);
  margin: 20px 0 0;
  padding-left: 1.6rem;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}
.home-consultoria-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.home-consultoria-card {
  display: grid;
  min-width: 0;
  height: 100%;
  padding: clamp(22px, 2.5vw, 30px);
  background: var(--white);
  border: 1px solid var(--home-muted-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.home-consultoria-body {
  display: grid;
  grid-template-rows: minmax(3.3rem, auto) auto;
  align-content: start;
}
.home-consultoria-body h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-consultoria-body p {
  margin: 10px 0 0;
  color: var(--quiet);
  font-size: 0.94rem;
  line-height: 1.55;
}
.home-consultoria-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.home-consultoria-action span {
  font-size: 1.2rem;
  transition: transform 0.15s ease;
}
.home-consultoria-action:hover span,
.home-consultoria-action:focus-visible span {
  transform: translateX(4px);
}

.home-examples-section {
  background: var(--brand);
  color: var(--white);
}
.home-examples-section .kicker,
.home-examples-section .home-section-more-link {
  color: var(--accent-light);
}
.home-examples-section .home-group-header {
  border-bottom-color: rgba(212, 225, 201, 0.42);
}
.home-examples-section .home-group-title {
  color: var(--white);
}

.home-page .cuadra-section {
  background: var(--home-sage-wash);
}
.home-apps-section {
  border-bottom: 1px solid #94ad82;
}

.home-examples-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
  margin-top: 32px;
}
.home-example-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.home-group-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
}
.home-group-title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.02em;
  margin: 0;
}
.home-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.home-scenes-single {
  grid-template-columns: 1fr;
}
.home-scene {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #9ea496;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 24px rgba(27, 29, 34, 0.08);
  overflow: hidden;
}
.home-scene > .app-window-bar {
  border-bottom: 1px solid #b8beb0;
  background: #e8eae4;
  color: #454a44;
}
.home-scene-body {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 28px);
  background: #fffdf8;
  flex: 1;
}
.home-scene-statement {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.home-sample-folio {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-sample-client {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.home-sample-field {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}
.home-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-pending {
  background: var(--home-muted-wash);
  color: var(--quiet);
  border: 1px solid var(--home-muted-line);
}
.status-review {
  background: #eff1f0;
  color: #596360;
  border: 1px solid #c4cbca;
}
.status-active {
  background: var(--home-sage-wash);
  color: var(--accent);
  border: 1px solid #94ad82;
}
.home-concept-name {
  display: block;
  margin-top: 4px;
  font: 600 0.95rem/1.35 var(--display);
  color: var(--ink);
}
.home-task-title {
  font: 600 0.94rem/1.3 var(--display);
  color: var(--ink);
}
.home-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--quiet);
}
.home-task-assignee {
  font-weight: 600;
  color: var(--brand);
}
.home-inst-q {
  padding: 14px 16px;
  border: 1px solid #b5b4aa;
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 0 2px 5px rgba(27, 29, 34, 0.04);
}
.home-inst-q-text {
  display: block;
  margin-top: 4px;
  font: 600 0.92rem/1.35 var(--display);
  color: var(--ink);
}
.home-inst-source {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #c2d1b8;
}
.home-source-text {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--quiet);
}

/* Sample 5: Compras y Reportes (Horizontal) */
.home-scene-horizontal {
  /* Spans full container width */
}
.home-purchase-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fffdf8;
  border: 1px solid #b5b4aa;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(27, 29, 34, 0.04);
}
.home-purchase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.home-purchase-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.home-purchase-desc {
  font-size: 0.86rem;
  color: var(--ink);
}
.home-purchase-amount {
  font-size: 0.94rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex-shrink: 0;
}

/* Modern App Mocks for Soluciones / Desarrollo */
.mock-app-shell {
  color: var(--ink);
  display: flex;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27, 29, 34, 0.04);
}
.mock-app-sidebar {
  width: 128px;
  flex-shrink: 0;
  background: #f4f6f2;
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: none;
}
.mock-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--line);
}
.mock-sidebar-brand svg {
  color: var(--accent);
  flex-shrink: 0;
}
.mock-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--quiet);
  cursor: default;
}
.mock-nav-item svg {
  flex-shrink: 0;
  color: var(--quiet);
}
.mock-nav-item.is-active {
  background: var(--accent-light);
  color: var(--brand);
  font-weight: 600;
}
.mock-nav-item.is-active svg {
  color: var(--brand);
}

.mock-app-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fffdf9;
}

/* Metrics */
.mock-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
  gap: 8px;
}
.mock-metrics-horizontal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mock-metric-card {
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-scene .mock-metric-card {
  background: #fafbf9;
  border-color: transparent;
}
/* A warm neutral for the number to look at first; green stays for finished states. */
.mock-metric-card.is-highlight {
  background: #f6efe4;
  border-color: #d8c6ad;
}
.mock-metric-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--quiet);
}
.home-scene .mock-metric-label,
.home-scene .home-sample-field {
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0;
}
.mock-metric-value {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.mock-val-accent {
  color: var(--accent);
}
.mock-val-pending {
  color: #8c4a22;
}

/* Charts */
.mock-chart-block {
  padding: 10px 12px;
  background: #fafbf9;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-scene .mock-chart-block {
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
}
.mock-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}
.mock-chart-label {
  font-weight: 600;
  color: var(--ink);
}
.mock-chart-stat {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mock-progress-track {
  height: 8px;
  background: #e8eae4;
  border-radius: 999px;
  overflow: hidden;
}
.mock-progress-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Pipeline bar */
.mock-pipeline-bar {
  height: 8px;
  background: #e8eae4;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.mock-pipe-segment {
  display: block;
  height: 100%;
}
.pipe-approved {
  background: var(--brand);
}
.pipe-review {
  background: var(--accent);
}
.pipe-draft {
  background: #b9c8b3;
}
.mock-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.68rem;
  color: var(--quiet);
  margin-top: 2px;
}
.mock-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mock-chart-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dot-approved {
  background: var(--brand);
}
.dot-review {
  background: var(--accent);
}
.dot-draft {
  background: #b9c8b3;
}

/* Mini bar chart */
.mock-mini-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  padding-top: 6px;
  border-bottom: 1px solid var(--line);
}
.mock-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}
.mock-bar-fill {
  display: block;
  width: 100%;
  max-width: 22px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.mock-bar-fill.is-current {
  background: var(--brand);
}
.mock-bar-fill.is-pending {
  background: var(--line-dark);
  opacity: 0.5;
}
.mock-bar-lbl {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--quiet);
}

/* Record card */
.mock-record-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-record-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mock-record-concept {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mock-ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mock-ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.mock-ledger-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mock-row-paid {
  padding: 4px 8px;
  background: var(--home-sage-wash);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
}
.mock-row-paid strong {
  color: var(--accent);
}
.mock-row-balance {
  padding: 6px 8px;
  background: var(--home-muted-wash);
  border: 1px solid var(--home-muted-line);
  border-radius: 4px;
  margin-top: 2px;
}
.mock-balance-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: none;
  color: var(--quiet);
}
.mock-balance-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--quiet);
}

/* Quote sheet */
.mock-quote-sheet {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mock-quote-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.mock-quote-desc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mock-item-name {
  font-size: 0.82rem;
  color: var(--ink);
}
.mock-item-calc {
  font-size: 0.7rem;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}
.mock-item-subtotal {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mock-quote-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}
.mock-total-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: none;
  color: var(--quiet);
}
.mock-total-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* Tasks */
.mock-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-task-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.mock-task-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mock-task-details .home-task-title {
  font-size: 0.84rem;
}

/* Instructions */
.mock-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mock-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--quiet);
  flex: 1;
  max-width: 260px;
}
.mock-instruction-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-instruction-title-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mock-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-check-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink);
}
.mock-check-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--brand);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Purchases */
.mock-app-shell-horizontal .mock-app-sidebar {
  width: 130px;
}
.mock-purchases-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.mock-purchases-col,
.mock-chart-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-purchases-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-budget-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.mock-budget-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-budget-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
}
.mock-budget-bar-info strong {
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.mock-budget-track {
  height: 7px;
  background: #e8eae4;
  border-radius: 999px;
  overflow: hidden;
}
.mock-budget-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.mock-budget-fill.bar-primary {
  background: var(--brand);
}
.mock-budget-fill.bar-accent {
  background: var(--accent);
}
.mock-budget-summary-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--home-sage-wash);
  border: 1px solid #94ad82;
  border-radius: 6px;
  font-size: 0.76rem;
  color: var(--brand);
}
.mock-budget-summary-pill strong {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.home-contact-section {
  padding: clamp(72px, 8vw, 120px) 0;
  background: var(--brand);
  color: var(--white);
  border-top: 0;
  border-bottom: 1px solid rgba(212, 225, 201, 0.2);
}
.home-contact-section .kicker {
  color: var(--accent-light);
  margin-bottom: 20px;
}
.home-contact-section h2,
.home-contact-section h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.home-contact-info {
  min-width: 0;
}
.home-contact-info h2 {
  max-width: 8.8157em;
  color: var(--white);
  font-size: clamp(2.7rem, 4.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.home-contact-info > p:not(.kicker) {
  max-width: 33.4355em;
  margin-top: 24px;
  color: #dce2da;
  font-size: 1.08rem;
  line-height: 1.55;
}
.home-contact-direct {
  max-width: 520px;
  margin-top: clamp(38px, 4vw, 56px);
}
.home-contact-direct-heading {
  margin: 0;
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-contact-direct-copy {
  max-width: 26.4961em;
  margin-top: 8px;
  color: #c6d4ce;
  font-size: 0.94rem;
  line-height: 1.5;
}
.home-contact-actions {
  margin-top: 24px;
}
.home-contact-actions .contact-links {
  display: grid;
  width: 100%;
  gap: 10px;
}
.home-contact-actions .contact-link {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 74px;
  padding: 12px 16px;
  border: 1px solid var(--white);
  border-radius: 10px;
  background: var(--white);
  color: #0e2021;
  font: 600 1rem/1.35 var(--sans);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.home-contact-actions .contact-icon {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 10px;
  border: 1px solid rgba(14, 32, 33, 0.28);
  border-radius: 8px;
  color: #0e2021;
}
.home-contact-actions .contact-link:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}
.home-contact-actions .contact-link:focus-visible {
  outline-color: var(--white);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px var(--accent-light);
}
.home-contact-privacy {
  max-width: 26.4961em;
  margin-top: 30px;
  color: #b9c9c2;
  font-size: 0.82rem;
  line-height: 1.45;
}
.home-contact-privacy a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.home-contact-privacy svg {
  width: 15px;
  height: 15px;
  margin: 0 5px 0 2px;
  vertical-align: -3px;
}
.home-contact-form-wrap {
  min-width: 0;
  padding: clamp(26px, 3.6vw, 44px);
  background: #faf9f5;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-top: 4px solid var(--accent-light);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(4, 24, 25, 0.14);
  color: var(--ink);
}
.home-contact-form-heading {
  margin-bottom: 24px;
}
.home-contact-form-heading h3 {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-field label {
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 750;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid #b8c3bd;
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(69, 104, 81, 0.18);
}
.form-field textarea {
  min-height: 132px;
  resize: vertical;
}
.home-contact-form-field-wide,
.home-contact-submit,
.home-contact-form .form-note,
.home-contact-form .form-status {
  grid-column: 1 / -1;
}
.home-contact-submit {
  width: max-content;
  min-width: 168px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--brand);
  color: var(--white);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  cursor: pointer;
}
.home-contact-submit:hover {
  background: #245254;
  color: var(--white);
}
.home-contact-submit svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.form-note {
  margin-top: -4px;
  color: var(--quiet);
  font-size: 0.82rem;
  line-height: 1.4;
}
.form-status {
  margin: 0;
  color: var(--brand);
  font-size: 0.85rem;
  line-height: 1.4;
}
.form-status.is-error {
  color: #9e4133;
}

@media (max-width: 1040px) {
  .home-consultoria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .home-page .shell {
    width: min(100% - 32px, 600px);
  }
  .home-page .section {
    padding: 44px 0;
  }

  .home-consultoria-intro,
  .home-section-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .home-consultoria-intro,
  .home-section-intro {
    gap: 25px;
  }
  .home-consultoria-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-consultoria-steps ul {
    grid-template-columns: 1fr;
  }
  .home-signals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 30px;
  }
  .home-signal-card {
    min-height: 0;
    padding: 26px;
  }
  .home-consultoria-card {
    min-height: 0;
  }
  .home-page .home-section-intro h2 {
    max-width: 9.4454em;
    font-size: clamp(2.2rem, 10vw, 3.1rem);
  }
  .home-section-intro {
    margin-bottom: 29px;
  }
  .home-demo {
    grid-template-columns: 1fr;
  }
  .home-service-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .home-scenes {
    grid-template-columns: 1fr;
  }
  .mock-app-shell {
    flex-direction: column;
  }
  .mock-app-sidebar {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
    overflow-x: auto;
  }
  .mock-app-shell-horizontal .mock-app-sidebar {
    width: 100%;
    min-width: 0;
  }
  .mock-sidebar-brand {
    border-bottom: none;
    padding: 0 8px 0 0;
    border-right: 1px solid var(--line);
  }
  .mock-sidebar-nav {
    flex-direction: row;
    gap: 4px;
  }
  .mock-nav-item {
    padding: 4px 8px;
    white-space: nowrap;
  }
  .mock-app-main {
    padding: 12px;
  }
  .mock-metrics-horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mock-purchases-layout {
    grid-template-columns: 1fr;
  }
  .home-contact-actions .contact-link {
    width: 100%;
    justify-content: flex-start;
  }
  .home-contact-actions .contact-links {
    display: grid;
    align-items: stretch;
    gap: 10px;
  }
  .home-contact-section {
    padding: 64px 0;
  }
  .home-contact-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .home-contact-info h2 {
    max-width: 7.5563em;
    font-size: clamp(2.5rem, 11vw, 3.6rem);
  }
  .home-contact-direct {
    margin-top: 36px;
  }
  .home-contact-form-wrap {
    padding: 24px;
    border-radius: 16px;
  }
  .home-contact-form {
    grid-template-columns: 1fr;
  }
  .home-contact-submit {
    width: 100%;
  }
}
@media (max-width: 1180px) and (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .js-ready .site-nav,
  .js-ready .site-nav.is-open {
    transition: none;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .button,
  .home-page .nav-contact,
  .home-page .menu-button,
  .home-service-card,
  .home-service-title,
  .home-service-cta,
  .home-service-cue {
    transition: none;
  }
  .home-service-card:hover {
    transform: none;
  }
  .home-service-card:hover .home-service-cue {
    transform: none;
  }
}

/* Service headings share the content edge; cards have no decorative numbering. */
.editorial-card-grid:not(.three-up) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editorial-page .app-window {
  border: 1px solid #9ea496;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 29, 34, 0.12);
}
@media (max-width: 760px) {
  .editorial-card-grid:not(.three-up) {
    grid-template-columns: 1fr;
  }
  .consultoria-guide-card:nth-child(odd) {
    padding-right: 0;
    border-right: 0;
  }
}

/* Shared branded header and homepage flow hero. */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 20;
  width: min(1240px, calc(100% - 56px));
  min-height: 72px;
  transform: translateX(-50%);
  /* Over the dark teal sections the graphite fill almost disappears, so this light keyline is
     what separates the bar there. */
  border: 1px solid rgba(250, 249, 245, 0.45);
  border-radius: 15px;
  color: var(--white);
  background: var(--graphite);
  /* Without this, printing drops the graphite fill and the white links print pale gray. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  /* A short, soft shadow: the dark bar already stands out, so it only needs a slight lift. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 8px rgba(18, 14, 12, 0.1),
    0 12px 24px -12px rgba(18, 14, 12, 0.3);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}
.site-header .wordmark span {
  color: var(--sand);
}
.site-header :focus-visible {
  outline-color: var(--sand);
}
.site-header.is-hidden {
  transform: translate(-50%, calc(-100% - 42px));
  opacity: 0;
  pointer-events: none;
}
.site-header .header-row {
  min-height: 70px;
}
.editorial-page .editorial-hero,
.legal-hero {
  padding-top: clamp(118px, 10vw, 150px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .site-header {
    top: 12px;
    width: min(100% - 32px, 600px);
  }
  .editorial-page .editorial-hero,
  .legal-hero {
    padding-top: 100px;
  }
}
@media (max-width: 480px) {
  .site-header {
    border-radius: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}
@media (max-width: 1180px) and (min-width: 761px) {
  html:not(.js-ready) .site-header {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    transform: none;
  }
  html:not(.js-ready) .header-row {
    flex-wrap: wrap;
  }
  html:not(.js-ready) .site-nav {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    padding: 12px 0 18px;
  }
  html:not(.js-ready) .site-nav a {
    min-width: 0;
    overflow-wrap: normal;
  }
  html:not(.js-ready) .site-nav .nav-contact {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .js-ready .menu-button {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .js-ready .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px 28px 22px;
    background: var(--graphite);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      visibility 0s 200ms;
  }
  .js-ready .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 200ms ease,
      transform 200ms ease,
      visibility 0s;
  }
  .js-ready .site-nav a {
    padding: 8px 0;
  }
  .js-ready .site-nav .nav-contact {
    justify-self: start;
    padding: 11px 18px;
  }
}
@media (max-width: 760px) {
  html:not(.js-ready) .site-header {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    transform: none;
  }
}
@media (max-width: 1180px) {
  /* Without JavaScript the bar spans the full width, so rounded corners would leave light notches. */
  html:not(.js-ready) .site-header {
    border-radius: 0;
    border-width: 0 0 1px;
  }
  .js-ready .site-header:has(.site-nav.is-open) {
    border-bottom-color: transparent;
    border-radius: 15px 15px 0 0;
  }
  .js-ready .site-nav {
    top: 100%;
    left: -1px;
    right: -1px;
    border: 1px solid rgba(250, 249, 245, 0.45);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow:
      0 3px 8px rgba(18, 14, 12, 0.1),
      0 12px 24px -12px rgba(18, 14, 12, 0.3);
    /* Phones in landscape: the bar stays fixed, so the menu scrolls instead of running off screen. */
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 1180px) and (max-height: 500px) {
  .js-ready .site-nav a {
    padding-block: 4px;
  }
}

/* Shared FAQ layout. */
.home-page .faq-section,
.editorial-page .faq-section {
  --faq-surface: #e4f2ef;
  --faq-line: #a8bdb5;
  padding: clamp(76px, 8vw, 116px) 0;
  background: var(--faq-surface);
  border-block: 1px solid var(--faq-line);
}
.faq-section .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
}
.faq-section .faq-intro {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}
.faq-section .faq-intro h2 {
  max-width: none;
  font-size: clamp(2.45rem, 4.4vw, 4.35rem);
  line-height: 1.02;
}
.faq-section .faq-list {
  max-width: none;
  border-top: 2px solid var(--ink);
}
.faq-section .faq-list summary {
  min-height: 88px;
  padding: 23px 0;
  font-size: clamp(1.2rem, 1.65vw, 1.42rem);
  line-height: 1.22;
}
.faq-section .faq-list details {
  border-bottom-color: var(--faq-line);
}
.faq-section .faq-list summary::before {
  right: 11px;
  width: 14px;
  height: 14px;
  background: var(--accent);
}
.faq-section .faq-list summary::after {
  width: 36px;
  height: 36px;
  border-color: var(--line-dark);
  border-radius: 5px;
  background: transparent;
}
.faq-section .faq-list details[open] summary::before {
  background: var(--brand);
}
.faq-section .faq-list details[open] summary::after {
  border-color: var(--brand);
  background: var(--accent-light);
}
.faq-section .faq-list summary:hover::before,
.faq-section .faq-list summary:focus-visible::before {
  background: var(--brand);
}
.faq-section .faq-list summary:hover::after,
.faq-section .faq-list summary:focus-visible::after {
  border-color: var(--brand);
  background: var(--accent-light);
}
.faq-section .faq-list summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.faq-section .faq-list details p {
  max-width: 42.8984em;
  padding: 0 76px 29px 0;
  color: var(--quiet);
  font-size: 1rem;
  line-height: 1.58;
}
@media (max-width: 760px) {
  .home-page .faq-section,
  .editorial-page .faq-section {
    padding: 52px 0 58px;
  }
  .faq-section .faq-intro h2 {
    max-width: 9.4454em;
    font-size: clamp(2.25rem, 10vw, 3.2rem);
  }
  .faq-section .home-section-intro {
    margin-bottom: 0;
  }
  .faq-section .faq-list summary {
    min-height: 82px;
    padding: 20px 0;
    font-size: 1.16rem;
  }
  .faq-section .faq-list summary::before {
    right: 11px;
  }
  .faq-section .faq-list details p {
    padding: 0 0 25px;
    font-size: 0.98rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list summary,
  .faq-list summary::after {
    transition: none;
  }
}

/* ============ Hero con globo y ajustes de la portada ============ */

/*
 * Hero con globo: adaptación sin dependencias del prototipo de Lovable
 * (KlearyssHero.tsx + AsciiGlobe.tsx). La información está completa desde el
 * primer momento: las tarjetas tienen una entrada corta en CSS y el globo gira
 * por su cuenta. No hay listeners de scroll ni secuencia que esperar.
 */

.kg-hero {
  --kg-bg: oklch(0.955 0.006 155);
  --kg-fg: oklch(0.255 0.039 214);
  --kg-primary: oklch(0.33 0.073 172);
  --kg-primary-fg: oklch(0.99 0.003 145);
  --kg-card: oklch(1 0 0);
  --kg-border: oklch(0.91 0.009 165);
  --kg-muted-fg: oklch(0.554 0.046 257.417);
  --kg-globe: oklch(0.43 0.052 168 / 72%);
  --kg-globe-faint: oklch(0.63 0.026 165 / 31%);
  --kg-globe-node: oklch(0.39 0.085 169);
  --kg-flow: oklch(0.55 0.12 161);
  --kg-success: oklch(0.65 0.17 151);
  --globe-ink: rgba(46, 84, 75, 0.92);
  --globe-grid-ink: rgba(104, 139, 130, 0.42);
  --globe-limb-ink: rgba(96, 132, 123, 0.45);
  /* Same type as the rest of the site: Inter Tight for the heading, Inter for everything else. */
  --kg-font: var(--sans);
  position: relative;
  color: var(--kg-fg);
  font-family: var(--kg-font);
}

.kg-hero p,
.kg-hero h1 {
  max-width: none;
  margin: 0;
}

/* Escena */

.kg-scene {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--kg-bg);
}

/* Globo */

.kg-globe-stage {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: min(92vh, 92vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform-origin: center;
  transform: translateX(-28.5vw) scale(1.12);
  opacity: 0.94;
  will-change: transform;
}

.kg-globe-holder,
.kg-globe-canvas,
.kg-globe-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kg-globe-orbits {
  transform-origin: center;
  transform: rotate(26deg);
}

.kg-orbit-lines {
  fill: none;
  stroke: var(--kg-globe-faint);
}

.kg-orbit-nodes {
  opacity: 0.8;
  fill: var(--kg-globe-node);
}

/* Microtextos */

.kg-micro-labels {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 1;
}

.kg-micro {
  position: absolute;
  color: color-mix(in oklab, var(--kg-primary) 74%, transparent);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.kg-micro span {
  display: block;
  width: 30px;
  margin-top: 8px;
  border-top: 1px solid currentColor;
}

.kg-top-right {
  top: 13.5%;
  right: 2.8vw;
}

.kg-bottom-right {
  bottom: 6.5%;
  right: 2.8vw;
}

/* Below 1200px the last benefit comes too close to this decorative label. */
@media (max-width: 1199px) {
  .kg-bottom-right {
    display: none;
  }
}

/* Composición final */

.kg-content {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
}

.kg-content > *,
.kg-flow > * {
  pointer-events: auto;
}

.kg-copy-panel {
  position: absolute;
  top: 27%;
  left: 4.4vw;
  width: min(41vw, 720px);
}

/* Fondo sólido, sin degradado. */
.kg-copy-inner {
  padding: clamp(26px, 2.8vw, 42px);
  border: 1px solid rgba(23, 59, 61, 0.14);
  border-radius: 20px;
  background: rgba(250, 249, 245, 0.95);
  box-shadow: 0 24px 58px color-mix(in oklab, var(--kg-fg) 9%, transparent);
}

.kg-hero .kg-copy-panel h1 {
  max-width: 10.7048em;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.3rem, 3.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.kg-copy-panel p {
  max-width: 560px;
  margin-top: 18px;
  color: color-mix(in oklab, var(--kg-fg) 82%, transparent);
  font-size: clamp(0.88rem, 1.08vw, 1.1rem);
  line-height: 1.48;
}

/* Mismo botón que "Escríbenos" de la barra: los dos llevan a WhatsApp. */
.kg-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 26px;
  padding: 0 26px 0 20px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 12px 26px -14px rgba(23, 59, 61, 0.7);
  color: var(--white);
  font: 600 1rem var(--sans);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.kg-cta:hover {
  transform: translateY(-1px);
  background: #0f2b2d;
}

.kg-cta:focus-visible {
  outline: 3px solid var(--kg-flow);
  outline-offset: 3px;
}

.kg-cta svg,
.kg-flow-node svg,
.kg-card svg,
.kg-order svg,
.kg-benefit svg,
.kg-wa-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-cta svg {
  width: 20px;
  height: 20px;
}

/* Tablero de 440 × 500: las líneas comparten coordenadas con las tarjetas. */

.kg-flow {
  position: absolute;
  top: 22%;
  right: calc(3.6vw + min(22vw, 350px));
  width: 440px;
  height: 500px;
  transform: scale(0.9);
  transform-origin: top right;
}

.kg-flow-lines {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.kg-flow-paths {
  fill: none;
  stroke: var(--kg-flow);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kg-flow-dots {
  fill: var(--kg-flow);
}

.kg-flow-dots circle {
  transform-box: fill-box;
  transform-origin: center;
}

.kg-card,
.kg-order {
  border: 1px solid color-mix(in oklab, var(--kg-border) 62%, white);
  background: color-mix(in oklab, var(--kg-card) 97%, transparent);
  box-shadow:
    0 18px 40px color-mix(in oklab, var(--kg-fg) 10%, transparent),
    0 4px 12px color-mix(in oklab, var(--kg-fg) 6%, transparent);
}

.kg-card {
  position: absolute;
  z-index: 2;
  padding: 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.34;
  transition: box-shadow 0.25s ease;
}

.kg-card:hover {
  box-shadow: 0 24px 48px color-mix(in oklab, var(--kg-fg) 14%, transparent);
}

.kg-card > svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.kg-card small {
  color: var(--kg-muted-fg);
  font-size: 11.5px;
}

.kg-whatsapp {
  top: 0;
  left: 78px;
  width: 240px;
  transform: rotate(-4deg);
}

.kg-chat-head {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: start;
  gap: 9px;
}

.kg-wa-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--kg-success);
  color: oklch(1 0 0);
}

.kg-wa-icon svg {
  width: 16px;
  height: 16px;
}

.kg-chat-head strong {
  font-weight: 600;
}

.kg-chat-reply {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 10px -3px -3px 30px;
  padding: 9px 10px;
  border-radius: 9px;
  background: oklch(0.955 0.004 160);
}

.kg-chat-reply span {
  font-weight: 650;
}

.kg-inventory {
  top: 143px;
  left: 62px;
  width: 256px;
  transform: rotate(2deg);
}

.kg-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.kg-sheet-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 4px;
  background: oklch(0.53 0.13 156);
  color: oklch(1 0 0);
  font-size: 12px;
  font-weight: 800;
}

.kg-inventory strong {
  font-size: 13px;
}

.kg-inventory table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.kg-inventory th,
.kg-inventory td {
  padding: 5px 3px;
  border-top: 1px solid var(--kg-border);
  font-size: 12px;
  text-align: left;
}

.kg-inventory th {
  font-weight: 650;
}

.kg-stock-note {
  position: absolute;
  z-index: 4;
  top: 296px;
  left: 92px;
  width: 150px;
  padding: 13px 16px;
  background: oklch(0.935 0.058 96);
  box-shadow: 0 12px 24px color-mix(in oklab, var(--kg-fg) 12%, transparent);
  color: oklch(0.27 0.035 220);
  font-family: 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 14px;
  line-height: 1.4;
  transform: rotate(-8deg);
}

.kg-stock-note strong {
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
}

.kg-transfer {
  top: 398px;
  left: 110px;
  width: 232px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transform: rotate(-5deg);
}

.kg-transfer small,
.kg-transfer strong,
.kg-transfer span {
  display: block;
}

.kg-transfer strong {
  margin-top: 2px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.kg-transfer span {
  margin-top: 3px;
  color: var(--kg-muted-fg);
}

.kg-flow-node {
  position: absolute;
  z-index: 5;
  top: 211px;
  right: 8px;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 5px solid oklch(1 0 0 / 85%);
  border-radius: 50%;
  background: oklch(0.945 0.035 160);
  box-shadow: 0 0 34px color-mix(in oklab, var(--kg-success) 26%, transparent);
  color: oklch(0.42 0.09 168);
}

.kg-flow-node svg {
  width: 28px;
  height: 28px;
}

.kg-order {
  position: absolute;
  top: 26%;
  right: 3.6vw;
  width: min(22vw, 350px);
  padding: 22px;
  border-radius: 18px;
}

.kg-order-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kg-order-title span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-order-title i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: oklch(0.96 0.006 160);
}

.kg-order-title svg {
  width: 18px;
  height: 18px;
}

.kg-order-title strong {
  font-size: 15px;
  font-weight: 650;
}

.kg-order-title b {
  padding: 6px 13px;
  border-radius: 20px;
  background: var(--kg-success);
  color: oklch(1 0 0);
  font-size: 11.5px;
  font-weight: 600;
}

.kg-order-details {
  margin-top: 16px;
}

.kg-order-details div {
  display: grid;
  grid-template-columns: 18px 1fr 1.35fr;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--kg-border);
  font-size: 12.5px;
}

.kg-order-details svg {
  width: 14px;
  height: 14px;
  color: var(--kg-muted-fg);
}

.kg-order-details span {
  color: var(--kg-muted-fg);
}

.kg-order-details strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kg-order-status {
  display: grid;
  gap: 11px;
  margin-top: 18px;
  font-size: 12.5px;
}

.kg-order-status div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-order-status i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: var(--kg-success);
  color: oklch(1 0 0);
}

.kg-order-status svg {
  width: 12px;
  height: 12px;
}

.kg-benefits-wrap {
  position: absolute;
  right: 5vw;
  bottom: 5.5%;
  left: 5vw;
}

.kg-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kg-benefit {
  display: grid;
  grid-template-columns: 48px 1fr 1px;
  align-items: center;
  gap: 16px;
  padding: 0 3.4vw 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.kg-benefit + .kg-benefit {
  padding-left: 3.4vw;
}

.kg-benefit i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: oklch(0.987 0.003 155);
  box-shadow: 0 9px 22px color-mix(in oklab, var(--kg-fg) 8%, transparent);
  color: var(--kg-fg);
}

.kg-benefit i svg {
  width: 20px;
  height: 20px;
}

.kg-benefit span {
  height: 42px;
  background: color-mix(in oklab, var(--kg-fg) 22%, transparent);
}

.kg-benefit:last-child span {
  display: none;
}

.kg-chain {
  display: none;
}

@media (min-width: 1200px) and (max-width: 1360px) {
  .kg-flow {
    transform: scale(0.82);
  }

  .kg-copy-panel {
    width: 39vw;
  }

  .kg-hero .kg-copy-panel h1 {
    font-size: clamp(2rem, 3.1vw, 2.8rem);
  }

  .kg-order {
    width: 23vw;
    padding: 18px;
  }
}

@media (min-width: 1600px) {
  .kg-flow {
    transform: scale(1);
  }
}

/* Entrada corta: el texto no se anima; las piezas del flujo aparecen en menos de un segundo. */

@keyframes kgRise {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

@keyframes kgSlideIn {
  from {
    opacity: 0;
    translate: 36px 0;
  }
}

@keyframes kgPop {
  from {
    opacity: 0;
    scale: 0.5;
  }
}

@keyframes kgDraw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes kgOrbit {
  to {
    transform: rotate(386deg);
  }
}

.kg-globe-orbits {
  animation: kgOrbit 240s linear infinite;
}

.kg-whatsapp {
  animation: kgRise 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.kg-inventory {
  animation: kgRise 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.18s both;
}

.kg-stock-note {
  animation: kgRise 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.28s both;
}

.kg-transfer {
  animation: kgRise 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.32s both;
}

.kg-flow-paths path {
  stroke-dasharray: 1;
  animation: kgDraw 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0.35s both;
}

.kg-flow-paths path:nth-child(2) {
  animation-delay: 0.4s;
}

.kg-flow-paths path:nth-child(3) {
  animation-delay: 0.45s;
}

.kg-flow-paths path:nth-child(4) {
  animation-delay: 0.5s;
}

.kg-flow-dots circle {
  animation: kgPop 0.3s ease-out 0.55s both;
}

.kg-flow-node {
  animation: kgPop 0.4s cubic-bezier(0.34, 1.8, 0.64, 1) 0.6s both;
}

.kg-order {
  animation: kgSlideIn 0.55s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s both;
}

.kg-benefit {
  animation: kgRise 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s both;
}

.kg-benefit:nth-child(2) {
  animation-delay: 0.62s;
}

.kg-benefit:nth-child(3) {
  animation-delay: 0.69s;
}

/* Tablet y celular: texto arriba y, abajo, el globo con el chat y el pedido encima. */

@media (max-width: 1199px) {
  .kg-scene {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'copy'
      'visual'
      'visual'
      'benefits';
    row-gap: 26px;
    padding: 96px 20px 44px;
  }

  .kg-content,
  .kg-flow {
    display: contents;
  }

  .kg-micro-labels,
  .kg-chain,
  .kg-flow-lines,
  .kg-inventory-group,
  .kg-transfer,
  .kg-order-status {
    display: none;
  }

  /* El texto va directo sobre el fondo: sin tarjeta. */
  .kg-copy-panel {
    grid-area: copy;
    position: static;
    width: auto;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .kg-copy-inner {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .kg-hero .kg-copy-panel h1 {
    max-width: none;
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }

  .kg-copy-panel p {
    margin-top: 14px;
    font-size: 16px;
  }

  .kg-cta {
    width: 100%;
    justify-content: center;
    margin-top: 22px;
  }

  /* El globo queda a la vista: el chat y el pedido solo tapan su parte de abajo. */
  .kg-globe-stage {
    grid-area: visual;
    position: relative;
    z-index: 0;
    top: auto;
    left: auto;
    align-self: start;
    justify-self: center;
    width: min(100%, 420px);
    translate: none;
    transform: none;
    opacity: 1;
  }

  .kg-globe-orbits {
    animation: none;
  }

  /* The chat takes the first visual row and the order the second, so the order always starts
     right under the chat's last time stamp, however tall the chat wraps. */
  .kg-whatsapp {
    grid-column: visual;
    grid-row: visual-start / span 1;
    position: relative;
    inset: auto;
    z-index: 2;
    align-self: start;
    justify-self: start;
    width: min(58%, 240px);
    margin-top: min(40%, 170px);
    transform: rotate(-3deg);
  }

  .kg-flow-node {
    display: none;
  }

  .kg-order {
    grid-column: visual;
    grid-row: span 1 / visual-end;
    position: relative;
    inset: auto;
    z-index: 3;
    align-self: start;
    justify-self: end;
    width: min(58%, 250px);
    /* Cancels the 26px row gap and overlaps only the chat's bottom padding. */
    margin-top: -44px;
    padding: 16px;
  }

  .kg-order-details {
    margin-top: 10px;
  }

  /* En celular el pedido muestra cantidad y entrega. */
  .kg-order-details div:nth-child(1),
  .kg-order-details div:nth-child(4) {
    display: none;
  }

  .kg-order-details div {
    padding: 8px 0;
    font-size: 12.5px;
  }

  .kg-order-details div:last-child {
    border-bottom: 0;
  }

  .kg-benefits-wrap {
    grid-area: benefits;
    position: static;
    width: 100%;
  }

  .kg-benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .kg-benefit,
  .kg-benefit + .kg-benefit {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 0;
    font-size: 14.5px;
  }

  .kg-benefit i {
    width: 36px;
    height: 36px;
    box-shadow: none;
  }

  .kg-benefit i svg {
    width: 17px;
    height: 17px;
  }

  .kg-benefit p br,
  .kg-benefit span {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 1199px) {
  /* En tableta, el globo y sus tarjetas van en una columna centrada. */
  .kg-scene {
    grid-template-columns: minmax(0, 1fr) min(480px, 100%) minmax(0, 1fr);
    grid-template-areas:
      'copy copy copy'
      '. visual .'
      '. visual .'
      'benefits benefits benefits';
    padding: 124px 40px 48px;
  }

  .kg-copy-panel {
    max-width: 640px;
  }

  .kg-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kg-cta {
    width: auto;
  }
}

/* iPads in landscape and narrow laptops: text beside the globe, so both fit on the first screen. */
@media (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .kg-scene {
    grid-template-columns: minmax(0, 1fr) min(440px, 42%);
    grid-template-areas:
      'copy visual'
      'copy visual'
      'benefits benefits';
    column-gap: 48px;
    padding: 112px 48px 40px;
  }

  .kg-copy-panel {
    align-self: center;
    max-width: 560px;
  }

  .kg-hero .kg-copy-panel h1 {
    font-size: clamp(2.4rem, 4.2vw, 3.1rem);
  }

  .kg-copy-panel p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kg-hero *,
  .kg-hero *::before,
  .kg-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============ Development hero ============ */

/*
 * The team's app and the customer's phone show the same service order. Once the phone is in
 * view, Ventas confirms the visit and the phone receives the notice; then everything rests.
 * Every piece's default style is the finished frame, which is what reduced motion shows. The
 * illustration is a board 76em wide whose em follows the column width, so the pieces and the
 * line between them keep their places at any size.
 */

.dh-hero {
  --dh-bg: #0d1c1d;
  --dh-text: #f6f4ee;
  --dh-soft: rgba(233, 238, 235, 0.74);
  --dh-line: rgba(250, 249, 245, 0.16);
  --dh-sales: #cdb899;
  --dh-stock: #a3aadd;
  --dh-admin: #e0a48c;
  --dh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dh-pad-end: clamp(64px, 7vw, 104px);
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(100svh, 980px);
  padding: clamp(118px, 10vw, 150px) 0 var(--dh-pad-end);
  overflow: clip;
  color: var(--dh-text);
  background: var(--dh-bg);
}

/* Dot grid, like a design canvas. Solid dots, no blending: the site keeps flat colors. */
.dh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23d6e8e2' fill-opacity='.14'/%3E%3C/svg%3E")
    center top / 28px 28px;
  pointer-events: none;
}

.dh-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  align-items: center;
  gap: clamp(40px, 4.5vw, 72px);
}

.dh-copy {
  min-width: 0;
}

.dh-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--dh-line);
  border-radius: 999px;
  background: rgba(250, 249, 245, 0.05);
  color: #e9e6dd;
  font: 600 0.84rem/1.2 var(--sans);
}

.dh-badge svg {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(205, 184, 153, 0.16);
  color: var(--sand);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dh-hero h1 {
  max-width: 7.6em;
  margin-top: 26px;
  color: var(--dh-text);
  font-size: clamp(2.6rem, 4.1vw, 4.25rem);
  line-height: 1.02;
}

/* The second color always starts its own line. */
.dh-hero h1 span {
  display: block;
  color: var(--sand);
}

.dh-lead {
  max-width: 29em;
  margin-top: 26px;
  color: var(--dh-soft);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
}

.dh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 34px;
}

/* Same chat icon as the home page button: it opens WhatsApp. */
.dh-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px 0 20px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--paper);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  color: #10201f;
  font: 600 1rem var(--sans);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.dh-cta svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dh-cta:hover {
  transform: translateY(-1px);
  background: #e8e2d7;
}

.dh-link {
  color: #e9e6dd;
  font-weight: 600;
  text-decoration-color: rgba(233, 230, 221, 0.35);
  text-underline-offset: 5px;
}

.dh-link:hover {
  text-decoration-color: var(--sand);
}

.dh-cta:focus-visible,
.dh-link:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 3px;
}

/* Illustration */

.dh-visual {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}

.dh-board {
  position: relative;
  height: 50.4em;
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(100cqw / 76);
  line-height: 1.3;
}

.dh-board svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Same window as the examples below, sized with the board. */
.dh-window {
  position: absolute;
  top: 2em;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 54em;
  height: 45em;
  background: #fffdf9;
}

/* Scoped to the board so it wins over the shared window frame's lighter shadow. */
.dh-board .dh-window {
  border-radius: 1em;
  box-shadow:
    0 0.4em 1em rgba(0, 0, 0, 0.18),
    0 2.4em 4.8em -2em rgba(0, 0, 0, 0.55);
}

.dh-window .app-window-bar {
  flex: none;
  min-height: 3.2em;
  gap: 1em;
  padding: 0 1.2em;
  font-size: 1em;
}

.dh-window .app-window-dots {
  width: 0.8em;
  height: 0.8em;
  margin-right: 2.2em;
  box-shadow:
    1.3em 0 #e5b045,
    2.6em 0 #5aa368;
}

.dh-window .app-window-title {
  font-size: 1.1em;
}

.dh-app {
  display: grid;
  flex: 1;
  grid-template-columns: 12em minmax(0, 1fr);
  min-height: 0;
}

.dh-side {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 1.4em 1em;
  border-right: 1px solid var(--line);
  background: #f4f6f2;
}

.dh-side span {
  padding: 0.55em 0.8em;
  border-radius: 0.5em;
  color: var(--quiet);
  font-size: 1.15em;
  font-weight: 500;
}

.dh-side .dh-side-brand {
  margin-bottom: 0.4em;
  padding: 0 0.5em 0.8em;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--brand);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dh-side .is-active {
  background: var(--accent-light);
  color: var(--brand);
  font-weight: 600;
}

.dh-main {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  min-width: 0;
  padding: 1.8em 2em 1.6em;
}

.dh-toolbar {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.dh-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6em;
  height: 3em;
  padding: 0 0.5em 0 0.9em;
  border: 1px solid #dfe2da;
  border-radius: 0.7em;
  background: var(--white);
  color: #7a8581;
  font-size: 1.1em;
  white-space: nowrap;
}

.dh-search svg {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

.dh-people {
  display: flex;
  padding-left: 0.6em;
}

.dh-people i {
  display: grid;
  width: 2.7em;
  height: 2.7em;
  margin-left: -0.6em;
  place-items: center;
  border: 0.2em solid #fffdf9;
  border-radius: 50%;
  background: var(--dh-sales);
  color: #1c1a17;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
}

.dh-people i:nth-child(2) {
  background: var(--dh-stock);
}

.dh-people i:nth-child(3) {
  background: var(--dh-admin);
}

.dh-record {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2em;
}

.dh-record > div {
  display: grid;
  gap: 0.3em;
  min-width: 0;
}

.dh-folio {
  color: #6b7672;
  font: 600 1em var(--dh-mono);
  letter-spacing: 0.04em;
}

.dh-record strong {
  font: 600 1.7em/1.1 var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dh-client {
  color: var(--quiet);
  font-size: 1.15em;
}

/* The button and the finished tag share one cell, so the swap never moves anything. */
.dh-confirm {
  display: grid;
  flex: none;
  justify-items: end;
  margin-top: 0.6em;
}

.dh-confirm > span {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 0.5em;
  height: 2.8em;
  padding: 0 1.2em;
  border-radius: 99em;
  font-size: 1.15em;
  font-weight: 650;
  white-space: nowrap;
}

.dh-confirm-button {
  visibility: hidden;
  opacity: 0;
  background: var(--brand);
  color: var(--white);
}

.dh-confirm-done {
  padding-left: 0.9em;
  border: 1px solid #94ad82;
  background: var(--home-sage-wash);
  color: #2f5a3f;
}

.dh-confirm-done svg {
  width: 1.2em;
  height: 1.2em;
  stroke-width: 2.6;
}

.dh-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8em;
}

.dh-fields div {
  position: relative;
  display: grid;
  gap: 0.25em;
  padding: 1em 1.2em;
  border: 1px solid #e3e5dd;
  border-radius: 0.8em;
  background: var(--white);
}

.dh-fields span {
  color: #6b7672;
  font-size: 1em;
  font-weight: 600;
}

.dh-fields strong {
  font-size: 1.4em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dh-fields em {
  position: absolute;
  top: 1em;
  right: 1em;
  padding: 0.2em 0.6em;
  border-radius: 99em;
  background: var(--home-sage-wash);
  color: #2f5a3f;
  font-size: 0.9em;
  font-style: normal;
  font-weight: 650;
}

.dh-log {
  display: grid;
  gap: 0.55em;
  margin: 1em 0 0;
  padding: 1.2em 0 0;
  border-top: 1px solid #e3e5dd;
  color: #3d4845;
  font-size: 1.1em;
  list-style: none;
}

.dh-log li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  align-items: baseline;
  margin: 0 -0.5em;
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  white-space: nowrap;
}

.dh-log time {
  color: #8a9490;
  font: 600 0.9em var(--dh-mono);
}

.dh-log .dh-log-new {
  background: rgba(205, 184, 153, 0.24);
  color: var(--ink);
  font-weight: 600;
}

/* Customer's phone */

.dh-phone {
  position: absolute;
  top: 8.5em;
  left: 58em;
  width: 18em;
  height: 38.5em;
  padding: 0.55em;
  border-radius: 2.9em;
  background: #0b1111;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0.4em 1em rgba(0, 0, 0, 0.2),
    0 2.4em 4.8em -2em rgba(0, 0, 0, 0.6);
}

.dh-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.9em 1.1em 1.1em;
  overflow: hidden;
  border-radius: 2.35em;
  background: var(--paper);
}

.dh-screen::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 50%;
  width: 4.8em;
  height: 1.45em;
  border-radius: 99em;
  background: #0b1111;
  translate: -50% 0;
}

.dh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.8em;
  padding: 0 0.5em;
  font-size: 1em;
  font-weight: 700;
}

.dh-status i {
  position: relative;
  width: 1.9em;
  height: 0.95em;
  border: 1px solid currentColor;
  border-radius: 0.3em;
}

.dh-status i::before {
  content: '';
  position: absolute;
  inset: 0.14em 0.5em 0.14em 0.14em;
  border-radius: 0.1em;
  background: currentColor;
}

.dh-notice {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: center;
  gap: 0.75em;
  margin: 0.7em 0 1.4em;
  padding: 0.8em;
  border: 1px solid #e3e5dd;
  border-radius: 1.2em;
  background: var(--white);
  box-shadow: 0 0.6em 1.4em -0.4em rgba(20, 30, 28, 0.22);
}

.dh-notice b {
  display: grid;
  width: 2.4em;
  height: 2.4em;
  place-items: center;
  border-radius: 0.7em;
  background: var(--brand);
  color: var(--sand);
}

.dh-notice b svg {
  width: 1.35em;
  height: 1.35em;
}

.dh-notice p {
  color: #3d4845;
  font-size: 0.95em;
  line-height: 1.3;
}

.dh-notice strong {
  display: block;
  color: var(--ink);
  font-size: 1.1em;
  white-space: nowrap;
}

.dh-phone-label {
  color: #6b7672;
  font-size: 0.95em;
  font-weight: 600;
}

.dh-phone-title {
  margin: 0.2em 0 0.3em;
  font: 600 1.5em/1.12 var(--display);
  letter-spacing: -0.015em;
}

.dh-phone-folio {
  color: #6b7672;
  font: 600 0.95em var(--dh-mono);
}

.dh-steps {
  display: grid;
  gap: 1em;
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
}

.dh-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1fr);
  align-items: center;
  gap: 0.7em;
  color: #8a9490;
  font-size: 1.1em;
  font-weight: 600;
  white-space: nowrap;
}

.dh-steps li::before {
  content: '';
  box-sizing: border-box;
  width: 1.8em;
  height: 1.8em;
  border: 2px solid #cdd3cd;
  border-radius: 50%;
  background: var(--white);
}

.dh-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.8em;
  left: calc(0.9em - 1px);
  width: 2px;
  height: 1em;
  background: #cdd3cd;
}

.dh-steps .is-done {
  color: var(--ink);
}

.dh-steps .is-done::before {
  border-color: #3f7a52;
  background: #3f7a52
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 62% no-repeat;
}

.dh-steps .is-done:not(:last-child)::after {
  background: #3f7a52;
}

.dh-balance {
  display: grid;
  gap: 0.15em;
  margin-top: auto;
  padding: 0.9em 1.1em;
  border-radius: 1.1em;
  background: #eef1ec;
}

.dh-balance span {
  color: #6b7672;
  font-size: 0.95em;
  font-weight: 600;
}

.dh-balance strong {
  font-size: 1.5em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Line from the team's app to the phone: the notice travels along it once. */

.dh-beam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.dh-board .dh-beam path {
  stroke: rgba(205, 184, 153, 0.6);
  stroke-width: 2;
}

.dh-board .dh-beam .dh-beam-pulse {
  stroke: #a5875c;
  stroke-width: 3;
  stroke-dasharray: 0.22 1.3;
  stroke-dashoffset: -1.3;
}

.dh-beam rect {
  fill: var(--sand);
  stroke: none;
}

/* Cursors with each person's name and role */

.dh-cursor {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  white-space: nowrap;
}

.dh-cursor svg {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  fill: var(--dh-cursor);
  stroke: var(--white);
  stroke-width: 1.1;
  filter: drop-shadow(0 0.15em 0.25em rgba(0, 0, 0, 0.3));
}

.dh-cursor b {
  margin: 1.35em 0 0 -0.35em;
  padding: 0.35em 0.75em;
  border-radius: 0.2em 0.7em 0.7em;
  background: var(--dh-cursor);
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.2);
  color: #1c1a17;
  font-size: 1.05em;
  font-weight: 650;
}

.dh-cursor-sales {
  --dh-cursor: var(--dh-sales);
  top: 15.3em;
  left: 40.8em;
}

.dh-cursor-stock {
  --dh-cursor: var(--dh-stock);
  top: 29.6em;
  left: 22.5em;
}

.dh-cursor-admin {
  --dh-cursor: var(--dh-admin);
  top: 30.4em;
  left: 38.4em;
}

/* Placed in percentages of the board: their own font size would change an em offset. */
.dh-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.9em;
  color: var(--sand);
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dh-tag::before {
  content: '';
  width: 2.6em;
  border-top: 1px solid currentColor;
}

.dh-tag-team {
  top: 96.4%;
  left: 0;
}

.dh-tag-client {
  top: 96.4%;
  left: 76.3%;
}

/* Motion: the windows arrive, Ventas confirms and the notice reaches the phone. Then it all
   rests. */

@keyframes dhRise {
  from {
    opacity: 0;
    translate: 0 1.6em;
  }
}

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

/* Mariana moves onto the button, clicks, and then moves the pointer aside so the tag shows. */
@keyframes dhSalesPath {
  from {
    opacity: 0;
    translate: var(--dh-from, -8em 7em);
  }
  18% {
    opacity: 1;
  }
  50%,
  62% {
    translate: var(--dh-click-x, 3.6em) -0.6em;
  }
}

@keyframes dhClick {
  50% {
    scale: 0.86;
  }
}

@keyframes dhButtonOut {
  from {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes dhPop {
  from {
    opacity: 0;
    scale: 0.92;
  }
}

@keyframes dhBeam {
  from {
    stroke-dashoffset: 0.22;
  }
  to {
    stroke-dashoffset: -1;
  }
}

@keyframes dhNotice {
  from {
    opacity: 0;
    translate: 0 -1.4em;
    scale: 0.96;
  }
}

@keyframes dhStepDone {
  from {
    border-color: #cdd3cd;
    background: var(--white);
  }
}

@keyframes dhStepText {
  from {
    color: #8a9490;
  }
}

.dh-window {
  animation: dhRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.dh-phone {
  animation: dhRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.dh-tag,
.dh-beam {
  animation: dhFade 0.5s ease 0.45s both;
}

.dh-cursor-sales {
  animation:
    dhSalesPath 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.55s both,
    dhClick 0.22s ease 1.37s;
}

.dh-cursor-stock,
.dh-cursor-admin {
  animation: dhFade 0.4s ease 0.7s both;
}

.dh-cursor-admin {
  animation-delay: 0.8s;
}

.dh-confirm-button {
  animation: dhButtonOut 0.18s ease 1.52s both;
}

.dh-confirm-done {
  animation: dhPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 1.56s both;
}

.dh-log-new {
  animation: dhRise 0.35s ease 1.72s both;
}

.dh-board .dh-beam .dh-beam-pulse {
  animation: dhBeam 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.78s both;
}

.dh-notice {
  animation: dhNotice 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.55s both;
}

.dh-steps .dh-step-new::before {
  animation: dhStepDone 0.3s ease 2.75s both;
}

.dh-steps .dh-step-new {
  animation: dhStepText 0.3s ease 2.75s both;
}

/* Narrow laptops and iPads in landscape: side by side, with more room for the illustration, so
   the button stays on the first screen. */
@media (min-width: 1100px) and (max-width: 1199px),
  (min-width: 900px) and (max-width: 1199px) and (orientation: landscape) {
  .dh-layout {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 36px;
  }

  .dh-hero h1 {
    font-size: clamp(2.4rem, 4vw, 3rem);
  }
}

/* Phones and tablets in portrait: one column with the headline first and the illustration right
   after it, so the illustration shows without scrolling at a readable size; the text and the
   button follow. */
@media (max-width: 899px), (max-width: 1099px) and (orientation: portrait) {
  .dh-hero {
    --dh-pad-end: 72px;
    min-height: 0;
    padding-top: 124px;
  }

  .dh-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .dh-copy {
    display: contents;
  }

  .dh-badge {
    justify-self: start;
  }

  .dh-hero h1 {
    max-width: none;
  }

  .dh-visual {
    order: 1;
    max-width: 880px;
    margin-top: 36px;
  }

  .dh-lead,
  .dh-actions {
    order: 2;
  }
}

@media (max-width: 760px) {
  .dh-hero {
    --dh-pad-end: 56px;
    padding-top: 112px;
  }

  .dh-hero h1 {
    margin-top: 22px;
    font-size: clamp(2rem, 8.7vw, 2.6rem);
  }

  .dh-visual {
    margin-top: 26px;
  }

  .dh-lead {
    margin-top: 24px;
    font-size: 1.05rem;
  }

  /* The button comes right after the illustration; the intro text follows it. */
  .dh-actions {
    order: 2;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
  }

  .dh-lead {
    order: 3;
  }

  /* On the narrowest phones the label may take two centered lines. */
  .dh-cta {
    justify-content: center;
    padding: 10px 22px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .dh-link {
    align-self: center;
  }
}

/* Without container queries the board can't size itself, so the illustration stays out. */
@supports not (container-type: inline-size) {
  .dh-visual {
    display: none;
  }
}

/* The windows arrive on load; the story waits at its first frame until the phone is on screen
   (main.js). */
.dh-board.is-waiting .dh-cursor,
.dh-board.is-waiting .dh-confirm > span,
.dh-board.is-waiting .dh-log-new,
.dh-board.is-waiting .dh-beam-pulse,
.dh-board.is-waiting .dh-notice,
.dh-board.is-waiting .dh-step-new,
.dh-board.is-waiting .dh-step-new::before {
  animation-play-state: paused;
}

.dh-beam-compact {
  display: none;
}

/* Phones and small tablets: the same pair, reduced. The team's order with the confirmed visit on
   the left, the customer's phone with the notice on the right, and the line between them. The
   board is 32em wide and at most 13px per em, so the text keeps a readable size and nothing is
   cut. */
@container (max-width: 600px) {
  .dh-board {
    width: 32em;
    height: 30em;
    font-size: min(100cqw / 32, 13px);
  }

  .dh-side,
  .dh-toolbar,
  .dh-client,
  .dh-log,
  .dh-week,
  .dh-fields div:nth-child(n + 3),
  .dh-notice b,
  .dh-balance,
  .dh-beam-wide,
  .dh-cursor-stock,
  .dh-cursor-admin {
    display: none;
  }

  .dh-beam-compact {
    display: block;
  }

  .dh-window {
    top: 2.6em;
    width: 17em;
    height: auto;
  }

  .dh-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .dh-main {
    gap: 1.1em;
    padding: 1.2em;
  }

  /* Room under the tag for Mariana's name. */
  .dh-record {
    flex-direction: column;
    gap: 1em;
    margin-bottom: 3em;
  }

  .dh-record strong {
    font-size: 1.45em;
    white-space: normal;
  }

  .dh-confirm {
    justify-items: start;
    margin-top: 0;
  }

  .dh-confirm > span {
    font-size: 1em;
  }

  .dh-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5em;
  }

  .dh-fields div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.7em 0.9em;
  }

  .dh-fields strong {
    font-size: 1.15em;
  }

  .dh-phone {
    top: 2.6em;
    left: 18.5em;
    width: 13.5em;
    height: 27.2em;
  }

  .dh-screen {
    padding: 0.9em 0.9em 1em;
  }

  .dh-screen::before {
    top: 0.8em;
    width: 3.4em;
    height: 1.2em;
  }

  .dh-status {
    padding: 0 0.3em;
    font-size: 0.9em;
  }

  .dh-notice {
    grid-template-columns: minmax(0, 1fr);
    margin: 0.6em 0 1.1em;
    padding: 0.7em 0.8em;
  }

  .dh-notice strong {
    font-size: 1em;
  }

  .dh-notice p {
    font-size: 0.85em;
  }

  .dh-phone-title {
    font-size: 1.25em;
  }

  .dh-steps {
    gap: 0.8em;
    margin-top: 1.1em;
  }

  .dh-steps li {
    font-size: 0.9em;
  }

  .dh-tag {
    top: 0;
    font-size: 0.95em;
  }

  .dh-tag-client {
    left: 57.8%;
  }

  /* She comes from lower in the window, clicks with a short move, and rests just below the tag,
     so her name never crosses the phone or covers "Visita confirmada". */
  .dh-cursor-sales {
    --dh-click-x: 1.6em;
    --dh-from: -2em 7em;
    top: 15.6em;
    left: 4.6em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dh-hero *,
  .dh-hero *::before,
  .dh-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Barra: botón de WhatsApp. */

.site-nav .nav-contact.nav-cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--graphite);
  text-decoration: none;
}

.site-nav .nav-contact.nav-cta-wa:hover {
  background: #e8e2d7;
  color: var(--graphite);
  text-decoration: none;
}

.nav-cta-wa svg,
.header-wa-mobile svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-wa-mobile {
  display: none;
}

@media (max-width: 1180px) {
  .header-wa-mobile {
    display: inline-grid;
    width: 44px;
    height: 44px;
    margin-left: auto;
    place-items: center;
    border-radius: 999px;
    background: var(--paper);
    color: var(--graphite);
  }

  .header-row {
    gap: 10px;
  }
}

/* Íconos de "Problemas que se repiten en el trabajo diario". */

.home-signal-card {
  grid-template-rows: auto minmax(4.2rem, auto) auto;
}

.signal-object {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #2f5a3f;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 650;
}

.signal-object svg {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 7px;
  border-radius: 50%;
  background: var(--accent-light);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Íconos de las tarjetas de consultoría, con el mismo trazo que los de problemas. */

.consultoria-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-light);
  color: #2f5a3f;
}

.consultoria-icon svg,
.home-consultoria-action svg,
.contact-wa-primary svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.consultoria-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

/* Consultoría y contacto: WhatsApp como botón principal. */

.home-consultoria-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
}

.home-consultoria-action svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.contact-wa-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 28px;
  padding: 0 28px 0 22px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
  color: var(--brand);
  font: 600 1.05rem var(--sans);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.contact-wa-primary:hover {
  transform: translateY(-1px);
  background: #e8e2d7;
}

.contact-wa-primary svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.home-contact-section .contact-links a[href*='wa.me'] {
  display: none;
}

.home-contact-direct {
  margin-top: 34px;
}

.home-contact-form .home-contact-submit {
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
}

.home-contact-form .home-contact-submit:hover {
  background: var(--brand);
  color: var(--white);
}

@media (max-width: 760px) {
  .contact-wa-primary {
    width: 100%;
  }
}

/* Desarrollo: una sola vista con pestañas en lugar de cinco ventanas seguidas. */

.is-tabbed .home-group-header {
  display: none;
}

.home-scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.home-scene-tabs button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font: 600 0.95rem var(--sans);
}

.home-scene-tabs button[aria-selected='true'] {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--brand);
}

.home-scene-tabs button:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

.is-tabbed .home-example-group[hidden] {
  display: none;
}

.is-tabbed .home-scene[hidden] {
  display: none;
}

/* Con una sola pantalla visible, la ventana ocupa todo el ancho. */
.is-tabbed .home-scenes {
  grid-template-columns: minmax(0, 1fr);
}

.is-tabbed {
  row-gap: 0;
}

.is-tabbed .home-example-group {
  margin-top: 0;
  padding-top: 0;
}

/* En celular las pestañas van en una sola fila que se desliza de lado. */
@media (max-width: 760px) {
  /* The top padding keeps the focus ring from being clipped by the scroller. */
  .home-scene-tabs {
    flex-wrap: nowrap;
    margin-top: -6px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 6px 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-scene-tabs::-webkit-scrollbar {
    display: none;
  }

  .home-scene-tabs button {
    flex: none;
  }
}

/* ============ Desarrollo app examples ============ */

/*
 * The app examples sit on a light version of the hero's dot canvas. On wide viewports the list of
 * examples stands at the side, each with its menu icon and its sentence (main.js), and the window
 * shows only the app. The tabs are dark on this light section; the home page keeps its white
 * tabs on dark teal. Without JavaScript all three windows show, each with its sentence.
 */

.service-desarrollo .editorial-visual-section {
  position: relative;
  isolation: isolate;
}

.service-desarrollo .editorial-visual-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%231c2929' fill-opacity='.14'/%3E%3C/svg%3E")
    center top / 24px 24px;
  pointer-events: none;
}

.development-examples .home-scene-tabs button {
  border-color: rgba(28, 41, 41, 0.55);
  color: var(--ink);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.development-examples .home-scene-tabs button:not([aria-selected='true']):hover {
  border-color: var(--ink);
  background: rgba(250, 249, 245, 0.6);
}

.development-examples .home-scene-tabs button[aria-selected='true'] {
  border-color: var(--graphite);
  background: var(--graphite);
  color: var(--paper);
}

.development-examples .home-scene-tabs button:focus-visible {
  outline-color: var(--brand);
}

/* All examples share one slot: hidden ones keep their place invisibly, so the section is as tall
   as the tallest app and switching tabs never moves the page. */
.development-examples.is-tabbed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'tabs'
    'panel';
}

.development-examples.is-tabbed .home-scene-tabs {
  grid-area: tabs;
}

.development-examples.is-tabbed .home-example-group {
  grid-area: panel;
}

.development-examples.is-tabbed .home-scenes {
  display: grid;
}

.development-examples.is-tabbed .home-scene {
  grid-area: 1 / 1;
}

.development-examples.is-tabbed .home-example-group[hidden],
.development-examples.is-tabbed .home-scene[hidden] {
  display: flex;
  visibility: hidden;
}

/* One frame at every width: the app fills its window instead of sitting in a second box. */
.development-examples .mock-app-shell {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.development-examples .home-sample-folio {
  white-space: nowrap;
}

/* The pill row on narrow viewports shows only the names. */
.development-examples .home-scene-tabs svg,
.development-examples .home-scene-tab-note {
  display: none;
}

.development-examples .home-scene {
  box-shadow:
    0 1px 2px rgba(27, 29, 34, 0.06),
    0 16px 32px -18px rgba(27, 29, 34, 0.4);
}

/* Toolbar inside each app: search, period and main action. */
.development-examples .mock-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.development-examples .mock-toolbar svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.development-examples .mock-search,
.development-examples .mock-period,
.development-examples .mock-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.development-examples .mock-search {
  flex: 1;
  min-width: 0;
  padding: 0 6px 0 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  color: #7a8581;
}

.development-examples .mock-period {
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}

.development-examples .mock-action {
  padding: 0 14px 0 11px;
  background: var(--graphite);
  color: var(--paper);
  font-weight: 650;
}

.development-examples .mock-sidebar-brand svg,
.development-examples .mock-nav-item svg {
  width: 14px;
  height: 14px;
}

/* Two panels side by side: a list and its detail, or a chart and its tasks. */
.development-examples .mock-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.development-examples .mock-table {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.development-examples .mock-table .home-sample-field {
  margin-bottom: 6px;
}

.development-examples .mock-table-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 -6px;
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.78rem;
}

.development-examples .mock-table-row span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.development-examples .mock-table-row strong {
  font-variant-numeric: tabular-nums;
}

.development-examples .mock-table-row.is-selected {
  border-radius: 6px;
  border-top-color: transparent;
  background: #eef1ec;
  font-weight: 600;
}

.development-examples .mock-table-row.is-selected + .mock-table-row {
  border-top-color: transparent;
}

.development-examples .mock-mono {
  color: var(--quiet);
  font:
    600 0.72rem ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

/* In the narrower detail panel the folio and the client stack, and the tag keeps one line. */
.development-examples .mock-record-head > div {
  display: grid;
  gap: 2px;
}

.development-examples .home-status-tag {
  white-space: nowrap;
}

.development-examples .mock-split .mock-chart-block {
  padding: 12px;
  border-color: var(--line);
  background: var(--white);
}

.development-examples .mock-split .mock-mini-bars {
  height: 128px;
}

/* What these apps can do, below the examples. */
.development-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

/* Quieter than the list of examples: no box and an outlined icon, so they don't read as
   something to select. */
.development-capabilities li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 4px 0 0;
  border-top: 1px solid rgba(28, 41, 41, 0.22);
}

.development-capability-icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  place-items: center;
  border: 1px solid rgba(28, 41, 41, 0.4);
  border-radius: 10px;
  color: var(--ink);
}

.development-capability-icon svg {
  width: 17px;
  height: 17px;
}

.development-capabilities h3 {
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.development-capabilities p {
  color: var(--quiet);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* One menu width for all three apps, wide enough for "Administración". Phones keep the menu as a
   strip across the top. */
@media (min-width: 761px) {
  .development-examples .mock-app-sidebar,
  .development-examples .mock-app-shell-horizontal .mock-app-sidebar {
    width: 156px;
  }
}

/* Wide viewports: the list of examples at the side and the window with only the app. Below
   1280px the app would get too narrow beside the list, so the tabs stay a row above a full-width
   window. */
@media (min-width: 1280px) {
  .development-examples.is-tabbed {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    grid-template-areas: 'tabs panel';
    align-items: start;
    gap: 0 clamp(24px, 3vw, 44px);
  }

  .development-examples .home-scene-tabs {
    flex-direction: column;
    gap: 8px;
    margin: 0;
  }

  .development-examples .home-scene-tabs button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    min-height: 0;
    padding: 16px 18px;
    border-color: rgba(28, 41, 41, 0.55);
    border-radius: 14px;
    background: #f3efe8;
    text-align: left;
  }

  .development-examples .home-scene-tabs button svg {
    display: block;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(28, 41, 41, 0.07);
    color: var(--ink);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  .development-examples .home-scene-tab-title {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
  }

  .development-examples .home-scene-tab-note {
    display: block;
    grid-column: 2;
    color: var(--quiet);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
  }

  .development-examples .home-scene-tabs button:not([aria-selected='true']):hover {
    border-color: var(--ink);
    background: var(--paper);
  }

  .development-examples .home-scene-tabs button[aria-selected='true'] {
    border-color: rgba(28, 41, 41, 0.2);
    background: var(--paper);
    box-shadow:
      0 1px 2px rgba(28, 41, 41, 0.08),
      0 8px 18px -12px rgba(28, 41, 41, 0.35);
    color: var(--ink);
  }

  .development-examples .home-scene-tabs button[aria-selected='true'] svg {
    background: var(--graphite);
    color: var(--paper);
  }

  .development-examples.is-tabbed .home-scene-statement {
    display: none;
  }

  .development-examples.is-tabbed .home-scene-body {
    padding: 0;
  }

  /* All three windows share one height, so switching tabs never moves the page. */
  .development-examples.is-tabbed .home-scene {
    min-height: 530px;
  }

  .development-examples.is-tabbed .mock-app-shell {
    flex: 1;
  }

  .development-examples.is-tabbed .mock-app-main {
    gap: 14px;
    padding: 18px 20px 20px;
  }
}

@media (max-width: 1023px) {
  .development-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .development-examples .mock-period,
  .development-examples .mock-nav-item svg {
    display: none;
  }

  .development-examples .mock-split .mock-mini-bars {
    min-height: 72px;
  }

  .development-examples .home-scene-body {
    padding: 18px 14px 14px;
  }
}

/* The visits chart grows with the list of visits beside it instead of leaving a gap below. */
.development-examples .mock-split-chart {
  align-items: stretch;
}

.development-examples .mock-split-chart .mock-chart-block {
  display: flex;
  flex-direction: column;
}

.development-examples .mock-split-chart .mock-mini-bars {
  flex: 1;
  height: auto;
  min-height: 128px;
}

/* Tablets and phones: the two panels inside an app stack, so neither gets squeezed. */
@media (max-width: 900px) {
  .development-examples .mock-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: the action keeps only its + sign, the menu only its sections, the metric left alone on
   its row takes the whole row, each app drops one secondary block, and each capability is a short
   row with its icon. */
@media (max-width: 560px) {
  .development-examples .mock-sidebar-brand,
  .development-examples .mock-optional {
    display: none;
  }

  .development-examples .mock-metrics-grid:not(.mock-metrics-horizontal) .is-highlight {
    grid-column: 1 / -1;
  }

  .development-examples .mock-action {
    padding: 0 10px;
  }

  .development-examples .mock-action span {
    display: none;
  }

  .development-capabilities {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .development-capabilities li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 16px 0 0;
  }

  .development-capability-icon {
    grid-row: 1 / span 2;
    margin: 0;
  }
}