:root {
  --forest: #15332d;
  --evergreen: #1f5549;
  --honey: #d69b42;
  --alerta: #a33a2b;
  --sage: #ccd7cc;
  --linen: #f5f0e7;
  --paper: #fffdf8;
  --ink-soft: #49645d;
  --rule: rgba(21, 51, 45, .22);
  --rule-strong: rgba(21, 51, 45, .5);
  --display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --text: "Work Sans", "Segoe UI", Arial, sans-serif;
  --header-h: 72px;
  --rail-h: 116px;
  --page-x: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { min-width: 320px; color-scheme: light; background: var(--linen); }
body {
  margin: 0;
  color: var(--forest);
  background: var(--linen);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { color: inherit; }
[hidden] { display: none !important; }

::selection { color: var(--linen); background: var(--evergreen); }
:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--forest);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--linen);
  background: var(--forest);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  border-bottom: 1px solid var(--rule);
  background: var(--linen);
}
.header-inner {
  width: min(calc(100% - 2 * var(--page-x)), 1440px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
}
.brand {
  width: clamp(112px, 10vw, 142px);
  view-transition-name: axioma-brand;
}
.brand img { width: 100%; height: auto; aspect-ratio: 141 / 31; }
.primary-nav { justify-self: end; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a,
.mobile-menu a {
  position: relative;
  font-size: .94rem;
  font-weight: 500;
}
.primary-nav a::after,
.mobile-menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after,
.mobile-menu a[aria-current="page"]::after,
.mobile-menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.mobile-menu { display: none; justify-self: end; }
.mobile-menu summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  padding: 20px var(--page-x) 24px;
  border-bottom: 1px solid var(--forest);
  background: var(--linen);
}
.mobile-menu ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 13px 20px;
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--linen);
  font-weight: 600;
  line-height: 1.1;
  transition: transform 180ms var(--ease), background-color 180ms ease;
}
.button::after { content: "→"; font-size: 1.25rem; font-weight: 400; }
.button:hover { background: var(--evergreen); transform: translateY(-2px); }
.button--quiet { color: var(--forest); background: transparent; }
.button--quiet:hover { color: var(--linen); background: var(--forest); }
.text-link {
  border-bottom: 2px solid var(--honey);
  padding-bottom: 2px;
  font-weight: 600;
}

/* Portada: una sola pantalla, dos decisiones y evidencia visual. */
.home-body { overflow-x: hidden; }
.home-frame {
  min-height: 100svh;
  display: grid;
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--rail-h);
}
.home-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 42%) minmax(0, 58%);
  border-bottom: 1px solid var(--forest);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 72px) var(--page-x);
  border-right: 1px solid var(--rule-strong);
  background: var(--linen);
}
.hero-copy::before {
  content: "";
  width: 72px;
  height: 3px;
  margin-bottom: clamp(20px, 3vh, 36px);
  background: var(--forest);
}
.hero-title,
.route-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .94;
  text-wrap: balance;
  view-transition-name: page-title;
}
.hero-title { max-width: 9.5ch; font-size: clamp(3.4rem, 6.2vw, 6.8rem); }
.hero-deck {
  max-width: 49ch;
  margin: clamp(20px, 3vh, 34px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}
.hero-price {
  margin: clamp(18px, 2.7vh, 30px) 0 0;
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: clamp(18px, 3vh, 32px); }
.hero-note { max-width: 23ch; margin: 0; color: var(--ink-soft); font-size: .82rem; }

.hero-visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--sage);
  isolation: isolate;
  view-transition-name: route-visual;
  --px: 0px;
  --py: 0px;
}
.hero-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035) translate(calc(var(--px) * -.25), calc(var(--py) * -.25));
  transition: transform 500ms var(--ease);
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(21, 51, 45, .22);
  pointer-events: none;
}
.visual-label {
  position: absolute;
  z-index: 4;
  top: 34px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  background: rgba(245, 240, 231, .9);
  font-size: .77rem;
  font-weight: 600;
}
.visual-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--honey); }
.report-float {
  position: absolute;
  z-index: 3;
  top: 8%;
  right: clamp(20px, 4vw, 64px);
  width: min(34%, 330px);
  max-height: 82%;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  transform: translate(var(--px), var(--py)) rotate(1.5deg);
  transition: transform 500ms var(--ease);
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
}
.report-float img { width: 100%; height: auto; }
.scope-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--linen);
}
.scope-link {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 64px auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 18px var(--page-x);
  overflow: hidden;
  transition: color 220ms ease, background-color 220ms ease;
}
.scope-link::after { content: ""; grid-column: 3; grid-row: 1; height: 2px; background: var(--sage); }
.scope-link + .scope-link { border-left: 1px solid var(--rule-strong); }
.scope-link:hover { color: var(--linen); background: var(--forest); }
.scope-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--linen);
  transition: background-color 220ms ease, color 220ms ease, transform 220ms var(--ease);
}
.scope-link:hover .scope-icon { color: var(--forest); background: var(--honey); transform: rotate(-5deg); }
.scope-icon svg { width: 32px; height: 32px; }
.scope-copy strong { display: block; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 2.1rem); line-height: 1; }
.scope-copy small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .8rem; }
.scope-link:hover .scope-copy small { color: var(--sage); }
.scope-arrow { grid-column: 4; font-size: 1.8rem; font-weight: 300; }

/* Páginas internas: una tarea por URL. */
.route-frame { min-height: 100svh; display: grid; grid-template-rows: var(--header-h) 1fr auto; }
.route-main { min-height: 0; padding: clamp(28px, 4vw, 64px) var(--page-x); }
.route-container { width: min(100%, 1380px); margin-inline: auto; }
.route-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: end;
  gap: 48px;
  margin-bottom: clamp(28px, 4vh, 50px);
}
.route-title { max-width: 13ch; font-size: clamp(3rem, 6vw, 6rem); }
.route-intro { max-width: 50ch; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.route-intro strong { color: var(--forest); }

.service-layout { display: grid; gap: 24px; }
.service-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--forest);
  border-bottom: 1px solid var(--forest);
}
.service-tab {
  min-height: 62px;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 600;
  cursor: pointer;
}
.service-tab + .service-tab { border-left: 1px solid var(--rule-strong); }
.service-tab[aria-selected="true"] { color: var(--linen); background: var(--forest); }
.service-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(22px, 2.8vw, 36px) clamp(28px, 5vw, 80px);
  padding: clamp(26px, 3.4vw, 44px) 0 clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--forest);
}
.service-head { grid-column: 1; grid-row: 1; }
.service-head h2 { margin: 0; font-family: var(--display); font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: .96; letter-spacing: -.03em; }
.service-lede { max-width: 40ch; margin: 12px 0 0; color: var(--ink-soft); font-size: 1.02rem; }
.service-buy { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
.service-amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.6vw, 3.8rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.service-meta { display: block; margin-top: 10px; color: var(--evergreen); font-size: .82rem; font-weight: 600; }
.fact-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin: 0;
  border-top: 1px solid var(--forest);
}
.fact-list div { display: grid; grid-template-columns: 104px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.fact-list dt { color: var(--evergreen); font-size: .78rem; font-weight: 600; }
.fact-list dd { margin: 0; font-size: .92rem; }
.service-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-foot p { max-width: 52ch; margin: 0; color: var(--ink-soft); font-size: .84rem; }

.pricing-stage { border-top: 1px solid var(--forest); }
.price-item { border-bottom: 1px solid var(--forest); }
.price-item summary {
  display: grid;
  grid-template-columns: minmax(200px, 1.25fr) minmax(150px, .55fr) minmax(130px, .42fr) 36px;
  align-items: baseline;
  gap: 26px;
  min-height: 92px;
  padding: 18px 8px 16px;
  cursor: pointer;
  list-style: none;
  transition: background-color 180ms ease;
}
.price-item summary::-webkit-details-marker { display: none; }
.price-item summary:hover { background: rgba(204, 215, 204, .38); }
/* El renglón dice qué es el servicio sin abrirlo: la hoja informativa que se
   manda por WhatsApp lo hace así y se lee mejor. Abrir sigue dando el alcance
   completo, que es donde viven las exclusiones. */
.price-name { font-family: var(--display); font-size: clamp(1.3rem, 2.3vw, 2.2rem); font-weight: 600; }
.price-que { display: block; margin-top: 6px; color: var(--ink-soft); font-family: var(--text); font-size: .84rem; font-weight: 400; line-height: 1.4; }
/* El alcance de entrada va marcado, como en la hoja: filo miel y lino tibio.
   El relleno Sage se reserva al estado abierto para que no se confundan. */
.price-item--entrada > summary { background: rgba(204, 215, 204, .34); box-shadow: inset 3px 0 0 var(--honey); }
.price-item--entrada > summary:hover { background: rgba(204, 215, 204, .55); }
.price-value { font-size: clamp(1.15rem, 2vw, 1.75rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-time { color: var(--ink-soft); font-size: .88rem; }
.price-plus { font-size: 1.6rem; text-align: center; transition: transform 220ms var(--ease); }
.price-item[open] > summary { background: var(--sage); }
.price-item[open] .price-plus { transform: rotate(45deg); }
.price-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 4px 8px 28px;
}
.price-detail p { margin: 0; font-size: .92rem; }
.price-detail b { display: block; margin-bottom: 6px; color: var(--evergreen); font-size: .78rem; }
.pricing-note { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; color: var(--ink-soft); font-size: .82rem; }
.pricing-note > * { max-width: 68ch; margin: 0; }
.pricing-source { text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 3px; }
.pricing-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.pricing-cta p { max-width: 64ch; margin: 0; color: var(--ink-soft); font-size: .86rem; }

.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.process { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--forest); counter-reset: step; }
.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 180px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.process li::before { content: counter(step, decimal-leading-zero); color: var(--evergreen); font-size: .8rem; font-weight: 600; }
.process h2 { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
.process p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.method-evidence {
  position: relative;
  max-height: min(610px, calc(100svh - 210px));
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
  view-transition-name: route-visual;
}
.method-evidence img { width: 100%; height: auto; }
.method-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 22px; font-size: .82rem; }
.method-side { min-width: 0; }
.method-limits { margin-top: 18px; border-top: 1px solid var(--forest); border-bottom: 1px solid var(--forest); }
.method-limits summary { padding: 14px 0; cursor: pointer; font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.method-limits ul { display: grid; gap: 8px; margin: 0 0 18px; padding-left: 18px; color: var(--ink-soft); font-size: .82rem; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}
.contact-copy .route-title { max-width: 10ch; }
.contact-copy > p { max-width: 43ch; color: var(--ink-soft); }
.contact-art { position: relative; min-height: 190px; margin-top: 28px; overflow: hidden; border: 1px solid var(--rule); }
.contact-art img { width: 100%; height: 100%; object-fit: cover; }
.contact-form { padding: clamp(24px, 4vw, 48px); background: var(--sage); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }
.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label { color: var(--evergreen); font-size: .78rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 12px;
  color: var(--forest);
  background: var(--paper);
}
.field textarea { min-height: 82px; resize: vertical; }
.field [aria-invalid="true"] { border: 2px solid var(--forest); }
.field-error { min-height: 1.1em; margin: 0; color: var(--forest); font-size: .75rem; font-weight: 600; }
.form-note { margin: 0 0 20px; color: var(--evergreen); font-size: .84rem; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.form-result { margin-top: 18px; padding: 16px; border: 1px solid var(--forest); background: var(--paper); }
.form-result textarea { width: 100%; min-height: 150px; border: 0; color: var(--forest); background: transparent; }
.form-result .form-actions { flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; }
.contact-channel a { white-space: nowrap; }
.mini-footer { margin-top: 28px; color: var(--ink-soft); font-size: .78rem; }
.contact-kicker { margin: 0 0 14px; color: var(--evergreen); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Pie: la marca cierra la pagina y la navegacion queda siempre al alcance. */
.site-footer { border-top: 1px solid var(--forest); background: var(--linen); }
.footer-inner {
  width: min(calc(100% - 2 * var(--page-x)), 1440px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(28px, 5vw, 72px);
  padding: clamp(20px, 2.6vw, 30px) 0;
}
.footer-brand { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }
.footer-brand img { width: clamp(94px, 8vw, 116px); height: auto; aspect-ratio: 141 / 31; }
.footer-brand p { max-width: 44ch; margin: 0; color: var(--ink-soft); font-size: .8rem; }
.footer-text { display: grid; gap: 4px; min-width: 0; }
.footer-contact a { padding-bottom: 1px; border-bottom: 2px solid var(--honey); color: var(--forest); font-weight: 600; white-space: nowrap; }
.footer-legal {
  justify-self: end;
  max-width: 46ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: .76rem;
  text-align: right;
}

@keyframes page-old { to { opacity: 0; transform: translateX(-14px); } }
@keyframes page-new { from { opacity: 0; clip-path: inset(0 9% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes art-new { from { transform: scale(1.03); filter: saturate(.75); } to { transform: scale(1); filter: saturate(1); } }
::view-transition-old(root) { animation: 180ms ease both page-old; }
::view-transition-new(root) { animation: 440ms var(--ease) both page-new; }
::view-transition-new(route-visual) { animation: 650ms var(--ease) both art-new; }
::view-transition-group(axioma-brand) { animation-duration: 380ms; }

@media (max-width: 900px) {
  :root { --header-h: 62px; --rail-h: 108px; --page-x: 20px; }
  .primary-nav { display: none; }
  .mobile-menu { display: block; }
  .header-inner { grid-template-columns: auto 1fr; }
  .home-main { grid-template-columns: 44% 56%; }
  .hero-title { font-size: clamp(3rem, 8vw, 4.8rem); }
  .report-float { width: 42%; right: 18px; }
  .route-heading { grid-template-columns: 1fr; gap: 18px; }
  .service-panel { grid-template-columns: 1fr; }
  .service-buy { grid-column: 1; grid-row: auto; text-align: left; }
  .fact-list { grid-template-columns: 1fr; }
  .method-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal { justify-self: start; max-width: 60ch; text-align: left; }
  .method-evidence { max-width: 430px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .home-body { overflow: auto; }
  .home-frame { min-height: 100svh; grid-template-rows: var(--header-h) minmax(0, 1fr) var(--rail-h); }
  .home-main { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(250px, 1fr); }
  .hero-copy { justify-content: flex-start; padding: 20px var(--page-x) 18px; border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .hero-copy::before { width: 46px; height: 2px; margin-bottom: 14px; }
  .hero-title { max-width: 10ch; font-size: clamp(2.55rem, 12vw, 3.7rem); }
  .hero-deck { margin-top: 13px; font-size: .93rem; line-height: 1.4; }
  .hero-price { margin-top: 12px; font-size: 1.02rem; }
  .hero-actions { margin-top: 14px; gap: 12px; }
  .hero-actions .button { min-height: 44px; padding: 11px 15px; font-size: .88rem; }
  .hero-note { font-size: .7rem; }
  .visual-label { top: 18px; left: 18px; }
  .hero-visual::after { inset: 10px; }
  .hero-map { object-position: 55% 48%; }
  .report-float { top: 8%; right: 16px; width: 31%; }
  .scope-link { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 13px 14px; }
  .scope-link::after { display: none; }
  .scope-icon { width: 34px; height: 34px; }
  .scope-icon svg { width: 20px; height: 20px; }
  .scope-copy strong { font-size: 1rem; }
  .scope-copy small { margin-top: 3px; font-size: .65rem; }
  .scope-arrow { grid-column: 3; font-size: 1.15rem; }

  .route-main { padding-block: 28px; }
  .route-title { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .route-heading { margin-bottom: 26px; }
  .service-tabs { grid-template-columns: 1fr; }
  .service-tab + .service-tab { border-top: 1px solid var(--rule-strong); border-left: 0; }
  .fact-list div { grid-template-columns: 82px 1fr; }
  .service-foot { align-items: flex-start; flex-direction: column; gap: 16px; }
  .footer-brand { align-items: flex-start; flex-direction: column; gap: 12px; }

  .price-item summary { grid-template-columns: 1fr auto; gap: 6px 16px; min-height: 98px; }
  .price-name { grid-column: 1; }
  .price-value { grid-column: 1; }
  .price-time { grid-column: 1; }
  .price-plus { grid-column: 2; grid-row: 1 / span 3; }
  .price-detail { grid-template-columns: 1fr; gap: 16px; }
  .pricing-note { display: grid; }
  .pricing-cta { align-items: flex-start; flex-direction: column; }

  .process li { grid-template-columns: 34px 1fr; }
  .process p { grid-column: 2; }
  .method-evidence { max-height: none; }
  .form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .contact-form { padding: 22px 18px; }
}

@media (max-width: 390px), (max-height: 720px) {
  .hero-title { font-size: 2.45rem; }
  .hero-copy::before { margin-bottom: 14px; }
  .hero-deck { max-width: 44ch; margin-top: 13px; font-size: .95rem; }
  .hero-price { margin-top: 13px; }
  .hero-actions { margin-top: 15px; }
}

/* Entre 641 y 900 px la columna de oferta es angosta: boton y nota se apilan. */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .hero-note { max-width: 34ch; }
}

/* La nota bajo el boton solo se sacrifica en pantallas muy angostas. */
@media (max-width: 390px) { .hero-note { display: none; } }
@media (min-width: 391px) and (max-height: 720px) { .hero-note { max-width: 26ch; font-size: .74rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .hero-map, .report-float { transform: none !important; }
}

@media print {
  .site-header, .scope-rail, .button, .mobile-menu { display: none !important; }
  .home-body { overflow: visible; }
  .home-frame, .route-frame { display: block; }
  .home-main, .service-panel, .method-grid, .contact-grid { display: block; }
  .hero-visual { min-height: 420px; }
}

/* ==========================================================================
   Material: grano de papel y curvas de nivel.
   DESIGN.md pide papel real, no sombras. El grano es una teselación SVG de
   120 px que tiñe con Forest Ink solo la mitad mas clara del ruido; las
   curvas son cartografía de 1 px al 7 % sobre las rutas internas.
   Las superficies que pintan lino propio repiten el grano o lo taparían.
   ========================================================================== */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.082 0 0 0 0 0.2 0 0 0 0 0.176 0.1 0.1 0.1 0 -0.16'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  --curvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke='%2315332D' stroke-width='1' opacity='0.07'%3E%3Cpath d='M-40 92C60 44 150 130 250 86S420 8 500 54'/%3E%3Cpath d='M-40 140C64 88 152 178 252 134S424 54 500 102'/%3E%3Cpath d='M-40 188C68 132 154 226 254 182S428 100 500 150'/%3E%3Cpath d='M-40 300C46 356 140 268 236 316S404 396 500 344'/%3E%3Cpath d='M-40 348C50 404 142 316 238 364S408 444 500 392'/%3E%3C/g%3E%3C/svg%3E");
}
body,
.site-header,
.site-footer,
.hero-copy,
.scope-rail,
.mobile-menu nav { background-image: var(--grain); background-size: 120px 120px; }
.route-main {
  background-image: var(--curvas), var(--grain);
  background-size: 440px 440px, 120px 120px;
  background-position: right -80px top -60px, 0 0;
  background-repeat: no-repeat, repeat;
}
.contact-form,
.price-item[open] { background-image: var(--grain); background-size: 120px 120px; }

/* La señal miel del mapa late una vez cada seis segundos: es el hallazgo. */
.visual-label::before { animation: senal 6s var(--ease) infinite; }
@keyframes senal {
  0%, 88%, 100% { box-shadow: 0 0 0 0 rgba(214, 155, 66, .55); }
  92% { box-shadow: 0 0 0 7px rgba(214, 155, 66, 0); }
}

/* ==========================================================================
   Revelado al entrar en pantalla. Solo con JS y sin reducir movimiento;
   sin JS el contenido nace visible porque la clase la pone el script.
   ========================================================================== */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); }
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* ==========================================================================
   Diagramas de ruta en linea. Heredan la tipografía real de la pagina, se
   dibujan solos al entrar en pantalla y quedan estáticos si el visitante
   reduce el movimiento.
   ========================================================================== */
.ruta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Tres renglones fijos por estación: nodo, nombre y nota arrancan a la misma
   altura en las cinco, aunque una nota ocupe dos líneas. */
.ruta li {
  position: relative;
  display: grid;
  grid-template-rows: 60px 26px auto;
  justify-items: center;
  text-align: center;
}
/* El tramo va de borde a borde entre dos nodos, nunca por debajo de uno: con
   `gap: 0`, el centro del nodo siguiente cae exactamente a 50 % + una columna. */
.ruta li:not(:last-child)::before,
.ruta li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 29px;
  left: calc(50% + 34px);
  right: calc(-50% + 34px);
  height: 2px;
}
.ruta li:not(:last-child)::before { background: var(--sage); }
.ruta li:not(:last-child)::after { background: var(--forest); transform: scaleX(0); transform-origin: left; }
.is-visible .ruta li:not(:last-child)::after { animation: crece 420ms var(--ease) forwards; }
.is-visible .ruta li:nth-child(2)::after { animation-delay: 360ms; }
.is-visible .ruta li:nth-child(3)::after { animation-delay: 720ms; }
.is-visible .ruta li:nth-child(4)::after { animation-delay: 1080ms; }
.ruta-nodo {
  position: relative;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1.5px solid var(--forest);
  border-radius: 50%;
  background: var(--paper);
  color: var(--forest);
}
.ruta-nodo svg { width: 27px; height: 27px; }
/* La última estación no es un sistema más: es la hoja que recibes. */
.ruta-nodo--hoja { border-radius: 0; clip-path: polygon(0 0, 74% 0, 100% 24%, 100% 100%, 0 100%); }
.ruta li strong { align-self: center; font-size: .88rem; font-weight: 600; }
.ruta li small { max-width: 18ch; color: var(--ink-soft); font-size: .74rem; line-height: 1.35; }
.ruta li[data-hallazgo] .ruta-nodo::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--forest);
  border-radius: 50%;
  background: var(--honey);
  opacity: 0;
}
.is-visible .ruta li[data-hallazgo] .ruta-nodo::after { animation: aparece 420ms var(--ease) 1380ms forwards; }
@keyframes aparece { to { opacity: 1; } }

.diagrama {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 26px);
  border: 1px solid var(--rule);
  background: var(--paper);
  background-image: var(--grain);
  background-size: 120px 120px;
}
.diagrama figcaption {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: .78rem;
}
.diagrama figcaption b { color: var(--evergreen); font-weight: 600; }

/* ==========================================================================
   Lo que cuesta que te entren. Es la única vez que el sitio usa rojo y la
   única vez que enseña una cifra de pérdida: cifra publicada, fuente
   enlazada y conversión con tipo de cambio y fecha. La barra respeta la
   proporción real; que el precio mida dos píxeles es el argumento, no un
   defecto de dibujo.
   ========================================================================== */
.perdida { margin-top: clamp(26px, 4vh, 44px); padding-top: 22px; border-top: 1px solid var(--forest); }
.perdida h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 600;
}
.perdida-cifra { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px clamp(24px, 3vw, 40px); }
.perdida-cifra > b {
  color: var(--alerta);
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.perdida-cifra span { max-width: 56ch; color: var(--ink-soft); font-size: .82rem; }
.perdida-cifra span b { color: var(--forest); font-weight: 600; white-space: nowrap; }
.perdida-cifra a { text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 3px; }
.perdida-barra {
  position: relative;
  height: 26px;
  margin: 22px 0 12px;
  background: var(--alerta);
  transform: scaleX(0);
  transform-origin: left;
}
/* El filo Forest Ink de la izquierda es el precio a escala real. */
.perdida-barra span {
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: 0;
  width: 3px;
  background: var(--forest);
}
.is-visible .perdida-barra { animation: crece 1100ms var(--ease) forwards; }
.perdida-lectura { max-width: 78ch; margin: 0; color: var(--ink-soft); font-size: .84rem; }
.perdida-lectura b { color: var(--forest); font-weight: 600; }

/* Crecimiento vertical: lo usa la ruta apilada en pantallas angostas. */
@keyframes crece-y { to { transform: scaleY(1); } }

/* Los cuatro pasos entran escalonados: se leen en el orden en que ocurren. */
.js-reveal .process li { opacity: 0; transform: translateY(14px); }
.js-reveal .process.is-visible li {
  opacity: 1;
  transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js-reveal .process.is-visible li:nth-child(2) { transition-delay: 120ms; }
.js-reveal .process.is-visible li:nth-child(3) { transition-delay: 240ms; }
.js-reveal .process.is-visible li:nth-child(4) { transition-delay: 360ms; }

/* ==========================================================================
   Escalera de niveles. Cuatro columnas divididas por reglas, sin tarjetas.
   Cada columna repite la lista completa de componentes: lo incluido con punto
   lleno, lo que suma ese nivel en negrita, lo que no incluye apagado. Así la
   acumulación se lee sin comparar columnas y el «no incluye» sigue a la vista.
   La entrada lleva el filo miel, la única señal miel de la composición.
   ========================================================================== */
.escalera {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--forest);
}
.nivel { min-width: 0; padding: 22px clamp(14px, 1.6vw, 26px) 24px 0; }
.nivel + .nivel { border-left: 1px solid var(--rule-strong); padding-left: clamp(14px, 1.6vw, 26px); }
.nivel--entrada { padding-left: 14px; background: rgba(204, 215, 204, .34); box-shadow: inset 3px 0 0 var(--honey); }
.nivel-num { margin: 0; color: var(--evergreen); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nivel h2 { min-height: 2.1em; margin: 6px 0 0; font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 600; line-height: 1.05; }
.nivel-precio {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.nivel-precio small { display: block; margin-top: 6px; color: var(--evergreen); font-family: var(--text); font-size: .76rem; font-weight: 600; letter-spacing: 0; }
.nivel-lista { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.nivel-lista li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--rule); font-size: .86rem; line-height: 1.35; }
.nivel-lista li::before { content: ""; position: absolute; top: 12px; left: 2px; width: 9px; height: 9px; border: 1.5px solid var(--forest); border-radius: 50%; }
.nivel-lista li.si::before { background: var(--forest); }
.nivel-lista li.nuevo { font-weight: 600; }
.nivel-lista li.no { color: var(--ink-soft); opacity: .5; }
.nivel-lista li.no::before { border-color: var(--rule-strong); }
.nivel-lista li small { display: block; color: var(--ink-soft); font-size: .74rem; font-weight: 400; }
.nivel-carta { margin: 12px 0 0; color: var(--ink-soft); font-size: .78rem; }
.nivel-carta b { color: var(--forest); font-weight: 600; }
.diagrama--suelto { margin-top: clamp(22px, 3.5vh, 36px); }
.escalera-pie { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; }
.escalera-pie p { max-width: 60ch; margin: 0; color: var(--ink-soft); font-size: .84rem; }
.aparte { margin-top: clamp(32px, 5vh, 58px); }
.aparte-titulo { margin: 0 0 18px; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.aparte-titulo small { display: block; margin-top: 10px; font-family: var(--text); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }

/* ==========================================================================
   Dúo. Los dos alcances que prueban personas viven fuera de las pestañas:
   las pestañas son alcances de sistema y meter cinco ahí las vuelve ilegibles.
   Dos columnas divididas por una regla, sin tarjetas.
   ========================================================================== */
.duo-titulo { margin: clamp(32px, 5vh, 58px) 0 0; }
.duo-titulo h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.duo-titulo p { max-width: 52ch; margin: 12px 0 0; color: var(--ink-soft); font-size: 1rem; }
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--forest);
}
.duo > div { padding: 24px 0 26px; }
.duo > div + div { border-left: 1px solid var(--rule-strong); padding-left: clamp(24px, 3vw, 44px); }
.duo h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.04;
}
.duo-precio {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.duo-precio small {
  display: block;
  margin-top: 8px;
  color: var(--evergreen);
  font-family: var(--text);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
}
/* :not() excluye el precio: sin eso esta regla, más específica y posterior,
   le pisaba el tamaño de display y lo dejaba del tamaño del cuerpo. */
.duo > div > p:not(.duo-precio) { max-width: 42ch; margin: 14px 0 0; color: var(--ink-soft); font-size: .92rem; }
.duo ul { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: .84rem; }
.duo li b { color: var(--forest); font-weight: 600; }

/* ==========================================================================
   Ley de datos. La página cita el artículo tal como está publicado y separa,
   sin ambigüedad, lo que una evaluación resuelve de lo que no. El sitio no
   vende cumplimiento y esta página es donde más fácil sería resbalar.
   ========================================================================== */
.cita {
  margin: 0 0 clamp(24px, 3vh, 36px);
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  background-image: var(--grain);
  background-size: 120px 120px;
  clip-path: polygon(0 0, 96% 0, 100% 11%, 100% 100%, 0 100%);
}
.cita-fuente {
  margin: 0 0 14px;
  color: var(--evergreen);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cita blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.72rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.cita blockquote b { font-weight: 700; }
.cita-pie { margin: 16px 0 0; color: var(--ink-soft); font-size: .8rem; }
.cita-pie a { text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 3px; }

.contraste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin: clamp(26px, 4vh, 44px) 0 0;
  border-top: 1px solid var(--forest);
}
.contraste > div { padding: 18px 0 20px; }
.contraste > div + div { border-left: 1px solid var(--rule-strong); padding-left: clamp(24px, 3vw, 44px); }
.contraste h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 600;
}
.contraste ul { display: grid; gap: 9px; margin: 0; padding-left: 18px; font-size: .89rem; }
.contraste li { color: var(--ink-soft); }
.contraste li b { color: var(--forest); font-weight: 600; }
.contraste--no li::marker { color: var(--alerta); }

/* La cifra de la multa reutiliza el bloque de pérdida sin la banda. En la
   columna angosta del costado, la rejilla de dos columnas dejaba al párrafo
   con una palabra por renglón: aquí manda una sola columna. */
.perdida--suelta { border-top: 0; margin-top: 0; padding-top: 0; }
.perdida--suelta .perdida-cifra { grid-template-columns: 1fr; align-items: start; gap: 14px; }
.perdida--suelta .perdida-cifra > b { font-size: clamp(1.9rem, 3.1vw, 2.85rem); }
.perdida--suelta .perdida-cifra span { max-width: none; }
.perdida--suelta .perdida-lectura { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ==========================================================================
   Tecnología: qué modelos operan y bajo qué límite.
   ========================================================================== */
.stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.stack-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--forest); }
.stack-list li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.stack-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--forest);
  color: var(--forest);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
}
.stack-list h2 { margin: 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.15; }
.stack-list p { margin: 6px 0 0; color: var(--ink-soft); font-size: .89rem; }
.stack-list p b { color: var(--evergreen); font-weight: 600; }
.stack-side { display: grid; gap: 20px; min-width: 0; }
.stack-figure {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  background-image: var(--grain);
  background-size: 120px 120px;
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
  view-transition-name: route-visual;
}
.stack-figure figcaption { margin-top: 12px; color: var(--ink-soft); font-size: .76rem; }
.stack-limits { border-top: 1px solid var(--forest); border-bottom: 1px solid var(--forest); }
.stack-limits summary { padding: 14px 0; cursor: pointer; font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.stack-limits ul { display: grid; gap: 8px; margin: 0 0 18px; padding-left: 18px; color: var(--ink-soft); font-size: .82rem; }

/* ==========================================================================
   WhatsApp: lanzador flotante, globo de aviso y panel con tres aperturas.
   El pie ya lleva el número en texto; esto es la ruta rápida, no la única.
   ========================================================================== */
.wa {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  display: grid;
  justify-items: end;
  gap: 12px;
  font-family: var(--text);
}
.home-body .wa { bottom: calc(var(--rail-h) + 14px); }
.wa-launcher {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid var(--forest);
  border-radius: 50%;
  background: var(--forest);
  color: var(--linen);
  cursor: pointer;
  transition: transform 200ms var(--ease), background-color 200ms ease;
}
.wa-launcher:hover { background: var(--evergreen); transform: translateY(-2px); }
.wa-launcher svg { width: 27px; height: 27px; }
.wa-launcher .cerrar { display: none; }
.wa[data-open="true"] .wa-launcher .abrir { display: none; }
.wa[data-open="true"] .wa-launcher .cerrar { display: block; }
.wa-tag {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--forest);
  border-radius: 50%;
  background: var(--honey);
}
.wa[data-open="true"] .wa-tag { display: none; }
.wa-teaser {
  position: relative;
  max-width: 250px;
  padding: 13px 34px 13px 15px;
  border: 1px solid var(--forest);
  background: var(--paper);
  background-image: var(--grain);
  background-size: 120px 120px;
  color: var(--forest);
  font-size: .82rem;
  line-height: 1.4;
  animation: globo 420ms var(--ease) both;
}
.wa-teaser b { display: block; font-weight: 600; }
.wa-teaser-close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
@keyframes globo { from { opacity: 0; transform: translateY(8px); } }
.wa-panel {
  width: min(322px, calc(100vw - 28px));
  border: 1px solid var(--forest);
  background: var(--paper);
  background-image: var(--grain);
  background-size: 120px 120px;
  animation: globo 260ms var(--ease) both;
}
.wa-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--rule-strong); }
.wa-head strong { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.wa-head span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .76rem; }
.wa-list { display: grid; margin: 0; padding: 0; list-style: none; }
.wa-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: .85rem;
  font-weight: 600;
  transition: color 180ms ease, background-color 180ms ease;
}
.wa-list a small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .72rem; font-weight: 400; }
.wa-list a::after { content: "\2192"; font-size: 1.1rem; font-weight: 400; }
.wa-list a:hover { color: var(--linen); background: var(--forest); }
.wa-list a:hover small { color: var(--sage); }
.wa-foot { padding: 12px 18px 15px; color: var(--ink-soft); font-size: .72rem; }
.wa-foot a { border-bottom: 2px solid var(--honey); color: var(--forest); font-weight: 600; white-space: nowrap; }

/* Página 404: el sitio no deja al visitante en la pantalla de nginx. */
.perdido { display: grid; place-items: center; padding: clamp(40px, 10vh, 110px) var(--page-x); text-align: center; }
.perdido .route-title { max-width: none; margin-bottom: 18px; }
.perdido p { max-width: 46ch; margin: 0 0 8px; color: var(--ink-soft); }
.perdido-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 30px; font-size: .86rem; }

@media (max-width: 900px) {
  .stack-grid { grid-template-columns: 1fr; }
  .escalera { grid-template-columns: 1fr 1fr; }
  .nivel:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-strong); }
  .nivel:nth-child(n+3) { border-top: 1px solid var(--rule-strong); }
  .nivel--entrada { padding-left: 14px; }
  .stack-figure { max-width: 470px; }
}

@media (max-width: 640px) {
  .wa { right: 12px; bottom: 12px; gap: 10px; }
  .home-body .wa { bottom: calc(var(--rail-h) + 10px); }
  .wa-launcher { width: 50px; height: 50px; }
  .wa-launcher svg { width: 24px; height: 24px; }
  .wa-teaser { max-width: min(238px, calc(100vw - 86px)); font-size: .78rem; }
  .perdida h2 { font-size: 1.15rem; }
  .contraste, .duo, .escalera { grid-template-columns: 1fr; }
  .nivel + .nivel { border-left: 0; border-top: 1px solid var(--rule-strong); padding-left: 0; }
  .nivel--entrada { padding-left: 14px; }
  .escalera-pie { align-items: flex-start; flex-direction: column; }
  .duo > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); padding-left: 0; }
  .contraste > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); padding-left: 0; }
  .cita { clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 0 100%); }
  .route-main { background-position: right -170px top -80px, 0 0; }
  .diagrama { padding: 18px 14px; }
  .ruta { grid-template-columns: 1fr; }
  .ruta li { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; text-align: left; column-gap: 18px; padding-bottom: 24px; }
  .ruta li:last-child { padding-bottom: 0; }
  .ruta li strong { grid-column: 2; grid-row: 1; align-self: end; }
  .ruta li small { grid-column: 2; grid-row: 2; align-self: start; max-width: none; }
  .ruta-nodo { grid-row: 1 / span 2; }
  /* El tramo se pone de pie: del borde inferior de un nodo al superior del siguiente. */
  .ruta li:not(:last-child)::before,
  .ruta li:not(:last-child)::after { top: 64px; bottom: 4px; left: 29px; right: auto; width: 2px; height: auto; }
  .ruta li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
  .is-visible .ruta li:not(:last-child)::after { animation-name: crece-y; }
  .perdida-cifra { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal .process li { opacity: 1 !important; transform: none !important; }
  .visual-label::before,
  .ruta li:not(:last-child)::after,
  .ruta li[data-hallazgo] .ruta-nodo::after,
  .perdida-barra,
  .wa-teaser,
  .wa-panel { animation: none !important; }
  .ruta li:not(:last-child)::after { transform: none; }
  .ruta li[data-hallazgo] .ruta-nodo::after { opacity: 1; }
  .perdida-barra { transform: none; }
}

@media print {
  .wa { display: none !important; }
  .js-reveal [data-reveal],
  .js-reveal .process li { opacity: 1 !important; transform: none !important; }
  .ruta li:not(:last-child)::after { transform: none; }
  .ruta li[data-hallazgo] .ruta-nodo::after { opacity: 1; }
  .perdida-barra { transform: none; }
}