@font-face {
  font-family: Inter;
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* 1. Identidad Rectora Criterio (Marca & SaaS) */
  --white: #ffffff;
  --ink: #11241c;
  --ink-deep: #0f172a;
  --muted: #4e6459;
  --slate-muted: #64748b;
  --accent: #087754;
  --accent-hover: #066043;
  --mint-vivid: #00c281;
  --sage-ribbon: #d5ece1;
  --wash: #f0faf9;
  --tint: #edf7f2;
  --line: rgba(8, 119, 84, 0.11);
  --border-clean: #e2e8f0;

  /* 2. Estados Transaccionales y Semántica Anti-Carnaval */
  --amber: #d97706;
  --amber-soft: #fffbeb;
  --amber-border: #fde68a;
  --blue-sync: #2563eb;
  --blue-soft: #eff6ff;
  --red-err: #dc2626;
  --red-soft: #fef2f2;

  /* 3. Tipografía Oficial Unificada (Plus Jakarta Sans + Inter + JetBrains Mono) */
  --heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1.01rem/1.7 var(--body);
  overflow-x: clip;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .5rem .85rem;
  border-radius: .5rem;
  background: var(--white);
  transform: translateY(-150%);
}
.skip:focus {
  transform: none;
}

.container {
  width: min(100% - 4rem, 76rem);
  margin-inline: auto;
}

/* ==========================================================================
   Header Ejecutivo Minimalista
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(243, 249, 245, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(8, 119, 84, 0.08);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 4.6rem;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}

.brand-lockup {
  position: relative;
  display: block;
  width: clamp(10.5rem, 18vw, 13.5rem);
  aspect-ratio: 884 / 281;
  overflow: hidden;
  border-radius: .45rem;
}

.brand-lockup-footer {
  width: clamp(10rem, 16vw, 12.5rem);
}

.brand-lockup img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 144.8%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -49.6%);
  display: block;
  mix-blend-mode: multiply;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2.4vw, 1.85rem);
}

.header-link {
  font-family: var(--heading);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease;
}

.header-link:hover {
  color: var(--accent);
}

.nav-contact {
  padding: .44rem 1.05rem;
  border: 1px solid rgba(8, 119, 84, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--accent) !important;
  font-weight: 600;
  font-size: .84rem;
  box-shadow: none;
  transition: background .2s, border-color .2s, transform .2s;
}

.nav-contact:hover {
  background: rgba(8, 119, 84, 0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ==========================================================================
   Hero Stage (Minimalista, Sereno y Espacioso)
   ========================================================================== */
.hero-stage {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-wave-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-wave-bg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hero-stage .opening {
  position: relative;
  z-index: 1;
}

.opening {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(2.5rem, 5.5vw, 5rem);
  padding-block: clamp(3.5rem, 7vw, 6.25rem) clamp(2.5rem, 4.5vw, 4rem);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: var(--heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(8, 119, 84, 0.16);
  box-shadow: 0 2px 10px -4px rgba(8, 119, 84, 0.12);
  font-size: .73rem;
}

.hero-label span, .tag span, .pulse-mint {
  width: .44rem;
  height: .44rem;
  flex: 0 0 .44rem;
  border-radius: 50%;
  background: var(--mint-vivid);
  box-shadow: 0 0 0 3px rgba(0, 194, 129, 0.2);
}

h1, h2, h3, h4 {
  font-family: var(--heading);
  text-wrap: balance;
}

h1 {
  margin: 1rem 0 1.15rem;
  font-size: clamp(2.1rem, 3.4vw, 2.85rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0b1a14;
  max-width: 22ch;
}

h1 em {
  color: var(--accent);
  font-style: normal;
  background: linear-gradient(120deg, #087754 0%, #00a870 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro {
  max-width: 44ch;
  margin: 0 0 1.65rem;
  color: #384e44;
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.65;
}

.intro strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  min-height: 3.05rem;
  padding: .72rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, #09845d 0%, #066043 100%);
  color: var(--white);
  font: 600 .9rem/1.4 var(--heading);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(8, 119, 84, 0.4);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s, filter .2s;
}

.button:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(8, 119, 84, 0.5);
}

.text-link {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .6rem .85rem;
  border-radius: 999px;
  font-family: var(--heading);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, background .2s;
}

.text-link:hover {
  color: var(--accent);
  background: rgba(8, 119, 84, 0.06);
}

.text-link span {
  transition: transform .2s;
}
.text-link:hover span {
  transform: translateY(2px);
}

/* ==========================================================================
   Consola de Demostración Hero Minimalista (#cascada)
   ========================================================================== */
.product {
  position: relative;
  width: 100%;
}

.workspace {
  background: var(--white);
  border: 1px solid rgba(8, 119, 84, 0.12);
  border-radius: 1.35rem;
  box-shadow: 0 24px 52px -24px rgba(14, 58, 42, 0.14), 0 2px 6px rgba(0, 0, 0, 0.02);
  padding: clamp(1.4rem, 3.2vw, 2.15rem);
  transition: border-color .35s ease, box-shadow .35s ease;
}

.workspace.is-updated {
  border-color: rgba(8, 119, 84, 0.28);
  box-shadow: 0 28px 60px -26px rgba(8, 119, 84, 0.2), 0 2px 8px rgba(0, 0, 0, 0.03);
}

.workspace-main {
  display: flex;
  flex-direction: column;
}

/* Etiqueta suave de cada nivel en la cascada */
.cascade-step-label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--slate-muted);
  margin-bottom: .45rem;
}

/* 01 · Objetivo */
.objective {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(8, 119, 84, 0.08);
}

.objective h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, 1.8vw, 1.38rem);
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.key-result {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
}

/* 02 · Indicador (KPI) */
.metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem 1.25rem;
  margin-block: 1.15rem;
  border-radius: 1rem;
  background: #f8fbf9;
  border: 1px solid rgba(8, 119, 84, 0.1);
  transition: background-color .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s ease;
}

.workspace.is-updated .metric {
  background: #f3faf6;
  border-color: rgba(8, 119, 84, 0.24);
}

.metric-copy {
  display: flex;
  flex-direction: column;
}

.metric-title {
  margin: 0;
  font-size: .84rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
}

.metric-value {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin: .3rem 0 .35rem;
}

.metric-value strong {
  font: 800 clamp(2.35rem, 3.8vw, 3.1rem)/1 var(--heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--ink);
  transition: color .35s ease;
}

.workspace.is-updated .metric-value strong {
  color: var(--accent);
}

.metric-value span {
  color: var(--slate-muted);
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 600;
}

.metric-status {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin: 0;
  font-size: .74rem;
  color: var(--muted);
  transition: color .35s ease;
}

.metric-status-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--amber);
  transition: background-color .4s ease, box-shadow .4s ease;
  flex-shrink: 0;
}

.workspace.is-updated .metric-status-dot {
  background: var(--mint-vivid);
  box-shadow: 0 0 6px rgba(0, 194, 129, 0.5);
}

.workspace.is-updated .metric-status {
  color: var(--accent);
  font-weight: 600;
}

.trend {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.trend-caption {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--slate-muted);
  text-align: right;
}

.chart {
  display: block;
  width: 100%;
  overflow: visible;
}

.chart-grid, .chart-target, .chart-line {
  fill: none;
}

.chart-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.chart-target {
  stroke: #94a3b8;
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}

.chart-area {
  fill: rgba(8, 119, 84, 0.08);
  transition: fill .35s;
}

.chart-area-next {
  fill: rgba(8, 119, 84, 0.14);
  opacity: 0;
  transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace.is-updated .chart-area-next {
  opacity: 1;
}

.chart-line {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

path.chart-next {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity .35s, stroke-dashoffset .55s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace.is-updated path.chart-next {
  stroke-dashoffset: 0;
  opacity: 1;
}

circle.chart-current {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 2;
  transition: opacity .35s, fill .35s;
}

circle.chart-next {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace.is-updated circle.chart-next {
  opacity: 1;
}

.workspace.is-updated circle.chart-current {
  opacity: 0.4;
}

/* 03 · Proyecto y fuente en una sola línea integrada */
.cascade-origin {
  display: flex;
  flex-direction: column;
}

.cascade-origin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  padding: .65rem .85rem;
  border-radius: .75rem;
  background: #fbfdfc;
  border: 1px solid rgba(8, 119, 84, 0.1);
  transition: border-color .35s ease, background-color .35s ease;
}

.workspace.is-updated .cascade-origin-bar {
  border-color: rgba(8, 119, 84, 0.22);
  background: #f4faf7;
}

.origin-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .81rem;
}

.origin-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  transition: background-color .4s ease;
}

.workspace.is-updated .origin-dot {
  background: var(--mint-vivid);
}

.origin-project {
  font-weight: 650;
  color: var(--ink);
}

.origin-sep {
  color: #cbd5e1;
}

.origin-source {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--muted);
  font-size: .78rem;
}

.source-icon-pill {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: .3rem;
  background: var(--white);
  border: 1px solid var(--border-clean);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Botón sutil de simular avance con suave transición */
.simulate:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .36rem .82rem;
  border-radius: 999px;
  border: 1px solid rgba(8, 119, 84, 0.2);
  background: rgba(8, 119, 84, 0.06);
  color: var(--accent);
  font-family: var(--heading);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .24s cubic-bezier(0.16, 1, 0.3, 1);
}

.simulate:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(8, 119, 84, 0.35);
}

/* ==========================================================================
   Summary Flow
   ========================================================================== */
.summary-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem 1.2rem;
  padding: clamp(1rem, 2vw, 1.5rem) 1rem;
  margin-block: clamp(1rem, 2.5vw, 2.25rem);
  font-size: .9rem;
  color: var(--muted);
}

.flow-lead {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  font-size: .73rem;
  letter-spacing: .08em;
}

.flow-sep {
  color: #a6c0b3;
}

.flow-item {
  font-family: var(--heading);
  color: var(--ink);
  font-weight: 600;
}

.flow-arrow {
  color: var(--accent);
  opacity: .55;
}

/* ==========================================================================
   2. Compromisos Innegociables de Experiencia (4 Estándares)
   ========================================================================== */
.commitments-section {
  padding-block: clamp(2rem, 4.5vw, 3.75rem);
}

.commitments-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.85rem;
}

.commitments-header h2 {
  margin: .55rem 0 0;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.22;
}

.commitments-sub {
  margin: 0;
  max-width: 38ch;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.6;
}

.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.commitment-card {
  padding: clamp(1.35rem, 2.2vw, 1.65rem);
  border-radius: 1.15rem;
  border: 1px solid rgba(8, 119, 84, 0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f9fcfa 100%);
  box-shadow: 0 10px 24px -18px rgba(17, 28, 26, 0.08);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s ease, box-shadow .25s ease;
}

.commitment-card:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 119, 84, 0.28);
  box-shadow: 0 16px 32px -18px rgba(8, 119, 84, 0.16);
}

.commitment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .85rem;
}

.commitment-metric {
  font-family: var(--heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
}

.commitment-tag {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--tint);
  padding: .2rem .55rem;
  border-radius: 999px;
}

.commitment-card h3 {
  margin: 0 0 .45rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}

.commitment-card p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   3. Cómo funciona · Cascada de 4 Niveles + Semántica de Estados
   ========================================================================== */
.method-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3.5rem, 7vw, 6.25rem);
  border-top: 1px solid rgba(8, 119, 84, 0.08);
}

.method-organic-aura {
  position: absolute;
  top: 0;
  right: -6%;
  width: 60%;
  height: 95%;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  background: radial-gradient(circle at 65% 45%, rgba(220, 242, 232, 0.45) 0%, rgba(235, 247, 241, 0.25) 55%, transparent 75%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.method-narrative {
  position: sticky;
  top: 6.25rem;
}

.method-narrative h2 {
  margin: .7rem 0 1rem;
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.method-intro {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--muted);
}

.method-intro strong {
  color: var(--ink);
  font-weight: 600;
}

.method-active-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid rgba(8, 119, 84, 0.16);
  font-size: .8rem;
  color: var(--accent);
  font-weight: 600;
}

#method-level-label {
  transition: opacity 0.25s ease;
}

.active-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* Semántica de Estados y Transacciones */
.state-semantics-box {
  margin-top: 1.65rem;
  padding: 1rem 1.15rem;
  border-radius: .95rem;
  border: 1px solid rgba(8, 119, 84, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

.state-semantics-title {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .65rem;
}

.state-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .24rem .62rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.state-pill i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  display: inline-block;
}

.state-ok {
  background: #f0fdf4;
  color: #087754;
  border-color: #bbf7d0;
}
.state-ok i { background: #087754; }

.state-sync {
  background: var(--blue-soft);
  color: var(--blue-sync);
  border-color: #bfdbfe;
}
.state-sync i { background: var(--blue-sync); }

.state-warn {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber-border);
}
.state-warn i { background: var(--amber); }

.state-err {
  background: var(--red-soft);
  color: var(--red-err);
  border-color: #fecaca;
}
.state-err i { background: var(--red-err); }

/* Tarjetas interactivas de la metodología */
.method-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.method-card {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  width: 100%;
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
  border-radius: 1.2rem;
  border: 1px solid rgba(8, 119, 84, 0.12);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(17, 28, 26, 0.08);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1), background-color .4s ease;
}

.method-card:hover {
  border-color: rgba(8, 119, 84, 0.3);
  box-shadow: 0 14px 30px -16px rgba(8, 119, 84, 0.18);
  transform: translateY(-2px);
}

.method-card.is-active {
  border-color: var(--accent);
  background: linear-gradient(175deg, #ffffff 0%, #f6fbf8 100%);
  box-shadow: 0 16px 36px -18px rgba(8, 119, 84, 0.25), 0 0 0 1px var(--accent);
}

.method-card.method-card-amber.is-active {
  border-color: var(--amber);
  background: linear-gradient(175deg, #ffffff 0%, #fffdf7 100%);
  box-shadow: 0 16px 36px -18px rgba(217, 119, 6, 0.22), 0 0 0 1px var(--amber);
}

.card-left {
  flex-shrink: 0;
}

.method-card .method-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #f0f7f3;
  border: 1px solid rgba(8, 119, 84, 0.12);
  color: #087754;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  transition: background-color .25s, color .25s, border-color .25s;
}

.method-card.is-active .method-number {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.method-card.method-card-amber.is-active .method-number {
  background: var(--amber);
  color: var(--white);
  border-color: var(--amber);
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}

.card-header h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  padding: .18rem .58rem;
  border-radius: 999px;
  background: #edf6f1;
  color: #087754;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card-tag-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.method-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.62;
  color: var(--muted);
}

.card-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .5s ease, margin-top .4s ease;
}

.method-card.is-active .card-preview {
  max-height: 3rem;
  opacity: 1;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px dashed #dbe9e0;
}

.preview-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  color: #087754;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.preview-badge-amber {
  color: var(--amber);
}

.preview-text {
  font-size: .82rem;
  color: #24483a;
}

/* ==========================================================================
   4. Ecosistema de Conectores Oficiales y Agentes de IA
   ========================================================================== */
.connectors-section {
  background: linear-gradient(180deg, #F0FAF9 0%, #E6F6F2 45%, #F4FAF8 100%);
  border-top: 1px solid rgba(8, 119, 84, 0.12);
  border-bottom: 1px solid rgba(8, 119, 84, 0.12);
  padding-block: clamp(4rem, 7.5vw, 6.5rem);
  position: relative;
}

.connectors-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-bottom: 2.25rem;
}

.connectors-header h2 {
  margin: .6rem 0 0;
  font-size: clamp(1.8rem, 2.9vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.22;
  max-width: 24ch;
}

.connectors-lead {
  margin: 0;
  max-width: 44ch;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Bloque de 4 Agentes de IA en Tarjetas Ligeras */
.ai-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin-bottom: 3.5rem;
}

.ai-card {
  padding: 1.25rem 1.15rem;
  background: var(--white);
  border: 1px solid rgba(8, 119, 84, 0.12);
  border-radius: 1rem;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .5rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ai-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 119, 84, 0.35);
  box-shadow: 0 10px 22px -8px rgba(8, 119, 84, 0.12);
}

.ai-card-highlight {
  background: var(--white);
  border: 1.5px solid rgba(0, 194, 129, 0.45);
}

.ai-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
}

.ai-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .55rem;
  background: #f0faf7;
  border: 1px solid rgba(8, 119, 84, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-card-tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--accent);
  background: #f4faf7;
  border: 1px solid rgba(8, 119, 84, 0.15);
  padding: .18rem .5rem;
  border-radius: 999px;
  letter-spacing: .02em;
}

.ai-tag-mint {
  color: #056645;
  background: #e6f9f2;
  border-color: rgba(0, 194, 129, 0.35);
}

.ai-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--ink-deep);
  letter-spacing: -.015em;
}

.ai-card p {
  margin: 0;
  font-size: .83rem;
  line-height: 1.52;
  color: var(--muted);
}

.connectors-catalog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 1.15rem;
}

.connectors-catalog-head h3 {
  margin: .35rem 0 0;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 750;
  letter-spacing: -.015em;
  color: var(--ink-deep);
}

.connectors-catalog-head p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

/* Grid de Conectores Oficiales en Recuadros Compactos */
.connectors-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.connector-tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem;
  border-radius: .75rem;
  border: 1px solid rgba(8, 119, 84, 0.1);
  background: var(--white);
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  user-select: none;
}

.connector-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 119, 84, 0.38);
  box-shadow: 0 6px 16px -6px rgba(8, 119, 84, 0.14);
}

.connector-tile .connector-logo-box {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: .5rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.connector-name {
  font-family: var(--heading);
  font-size: .86rem;
  font-weight: 650;
  color: var(--ink-deep);
  letter-spacing: -.01em;
}

.connector-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: #f0faf7;
  color: var(--accent);
  border: 1px solid rgba(8, 119, 84, 0.16);
}

/* ==========================================================================
   5. Mapa de Experiencia del Cliente · Viaje Interactivo de 5 Etapas
   ========================================================================== */
.journey-section {
  padding-block: clamp(3.75rem, 7.5vw, 6.5rem);
}

.journey-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-bottom: 2.15rem;
}

.journey-header h2 {
  margin: .6rem 0 0;
  font-size: clamp(1.75rem, 2.8vw, 2.3rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.24;
  max-width: 26ch;
}

.journey-quote {
  margin: 0;
  max-width: 44ch;
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.65;
}

.journey-explorer {
  border-radius: 1.4rem;
  border: 1px solid rgba(8, 119, 84, 0.14);
  background: var(--white);
  box-shadow: 0 20px 44px -26px rgba(8, 119, 84, 0.15);
  overflow: hidden;
  margin-bottom: 2.25rem;
}

.journey-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(8, 119, 84, 0.1);
  background: #f6fbf8;
}

.journey-tab {
  padding: 1rem 1.1rem;
  border: none;
  border-right: 1px solid rgba(8, 119, 84, 0.08);
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  transition: background-color .25s ease, color .25s ease;
  position: relative;
}

.journey-tab:last-child {
  border-right: none;
}

.journey-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-tab:hover {
  background: rgba(8, 119, 84, 0.04);
}

.journey-tab.is-active {
  background: var(--white);
}

.journey-tab.is-active::after {
  transform: scaleX(1);
}

.journey-step-num {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}

.journey-step-name {
  font-family: var(--heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}

.journey-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 3.8vw, 3.25rem);
  padding: clamp(1.8rem, 3.8vw, 2.75rem);
  align-items: center;
  transition: opacity .22s ease, transform .22s ease;
}

.journey-panel.is-transitioning {
  opacity: 0.35;
  transform: translateY(6px);
}

.journey-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}

.journey-emotion-badge {
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  border: 1px solid rgba(8, 119, 84, 0.15);
  padding: .2rem .65rem;
  border-radius: 999px;
}

.journey-panel-main h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 750;
  line-height: 1.28;
  color: var(--ink);
  letter-spacing: -.02em;
}

.journey-action-desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 48ch;
}

.journey-wow-card {
  border-radius: 1.15rem;
  padding: clamp(1.4rem, 2.5vw, 1.95rem);
  background: linear-gradient(135deg, #0e271e 0%, #071711 100%);
  border: 1px solid rgba(0, 194, 129, 0.22);
  color: #e6f4ed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 14px 32px -16px rgba(9, 24, 18, 0.35);
}

.wow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.journey-pause-indicator {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7dd3b0;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(0, 194, 129, 0.12);
  border: 1px solid rgba(0, 194, 129, 0.25);
  opacity: 0;
  transition: opacity .25s ease;
}

.journey-pause-indicator.is-visible {
  opacity: 1;
}

.wow-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(0, 194, 129, 0.14);
  border: 1px solid rgba(0, 194, 129, 0.32);
  color: #34d399;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wow-quote {
  margin: 0;
  font-family: var(--heading);
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--white);
}

.wow-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: .7rem;
  color: #9cb5a9;
}

.journey-nav-arrows {
  display: flex;
  gap: .4rem;
}

.journey-arrow {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: background-color .2s, border-color .2s, transform .2s;
}

.journey-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ==========================================================================
   Identidad Cultural: Misión, Visión y Los 4 Criterios (Integrada en Footer)
   ========================================================================== */
.footer-identity {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.footer-identity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.footer-eyebrow {
  color: #5eead4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.footer-identity-header h2 {
  margin: .45rem 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: #ffffff;
}

.footer-identity-sub {
  margin: 0;
  max-width: 44ch;
  font-size: .92rem;
  color: #9cb5a9;
  line-height: 1.6;
}

/* Misión y Visión en Footer */
.footer-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.footer-mv-card {
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .2s ease, background .2s ease;
}

.footer-mv-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(94, 234, 212, 0.3);
}

.footer-mv-card .eyebrow {
  color: #5eead4;
}

.footer-mv-card h3 {
  margin: .5rem 0 .65rem;
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: #ffffff;
}

.footer-mv-card p {
  margin: 0 0 1.15rem;
  font-size: .88rem;
  line-height: 1.6;
  color: #a3bfb2;
}

.footer-mv-mantra {
  padding: .75rem .95rem;
  border-radius: .75rem;
  background: rgba(8, 119, 84, 0.22);
  border-left: 3px solid #00C281;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.footer-mv-mantra span {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5eead4;
}

.footer-mv-mantra strong {
  font-family: var(--heading);
  font-size: .86rem;
  font-weight: 600;
  color: #e6f4ee;
  line-height: 1.45;
}

/* Valores Fundamentales en Footer */
.footer-values-block {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.footer-values-head .eyebrow {
  color: #5eead4;
}

.footer-values-head h3 {
  margin: .35rem 0 0;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: #ffffff;
}

.footer-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.footer-value-card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .2s ease, transform .2s ease;
}

.footer-value-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 234, 212, 0.28);
}

.footer-value-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.footer-value-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(0, 194, 129, 0.16);
  color: #5eead4;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
}

.footer-value-tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  color: #9cb5a9;
  background: rgba(255, 255, 255, 0.05);
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-value-card h4 {
  margin: 0 0 .35rem;
  font-size: .96rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-value-card p {
  margin: 0 0 .85rem;
  font-size: .8rem;
  line-height: 1.55;
  color: #9cb5a9;
}

.footer-value-motto {
  margin: 0;
  padding-top: .65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-family: var(--heading);
  font-size: .78rem;
  font-weight: 600;
  color: #5eead4;
}

/* El Ritual de Cada Día en Footer */
.footer-ritual-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  padding: 1.15rem 1.45rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-ritual-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.footer-ritual-q {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5eead4;
}

.footer-ritual-item p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: #cce3d8;
}

.footer-ritual-item strong {
  color: #ffffff;
  font-weight: 650;
}

/* ==========================================================================
   8. Para Quién · Mapa de Influencia y Roles
   ========================================================================== */
.audience {
  padding-block: clamp(3.5rem, 7vw, 6.25rem);
}

.audience .section-heading {
  max-width: 46rem;
}

.audience h2 {
  margin: .7rem 0 .75rem;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 750;
  line-height: 1.24;
  letter-spacing: -.025em;
}

.audience-lead {
  margin: 0;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.68;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.8vw, 2rem);
  margin-top: 2.15rem;
}

.audience article {
  position: relative;
  padding: clamp(1.65rem, 2.8vw, 2.15rem);
  border-radius: 1.25rem;
  border: 1px solid rgba(8, 119, 84, 0.12);
  background: var(--white);
  box-shadow: 0 10px 24px -16px rgba(17, 28, 26, 0.08);
  transition: transform .26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .26s, border-color .26s;
}

.audience article:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 119, 84, 0.28);
  box-shadow: 0 18px 36px -18px rgba(8, 119, 84, 0.18);
}

.audience-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

.audience article .method-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: #f0f7f3;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
}

.audience-role-tag {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  padding: .2rem .58rem;
  border-radius: 999px;
}

.audience h3 {
  margin: 0 0 .5rem;
  font-size: 1.16rem;
  font-weight: 750;
  color: var(--ink);
}

.audience p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ==========================================================================
   9. Preguntas Frecuentes - Carrusel Minimalista
   ========================================================================== */
.questions {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6.25rem);
  border-top: 1px solid rgba(8, 119, 84, 0.1);
}

.questions .section-heading h2 {
  margin: .75rem 0 1rem;
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  font-weight: 750;
  line-height: 1.24;
  letter-spacing: -.025em;
}

.questions .section-heading p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
}

.faq-carousel-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.faq-carousel-viewport {
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(8, 119, 84, 0.12);
  background: var(--white);
  box-shadow: 0 18px 44px -22px rgba(8, 119, 84, 0.13), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.faq-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.faq-carousel-card {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(1.75rem, 3.4vw, 2.45rem);
  opacity: 0.08;
  transform: scale(0.94);
  filter: blur(2px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;
  pointer-events: none;
}

.faq-carousel-card.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.faq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #edf4ef;
}

.faq-card-head .eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
}

.faq-pill {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
}

.faq-carousel-card h3 {
  margin: 0 0 .8rem;
  font-size: clamp(1.18rem, 1.75vw, 1.4rem);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.32;
  color: var(--ink);
}

.faq-carousel-card p {
  margin: 0 0 1.2rem;
  font-size: .94rem;
  line-height: 1.66;
  color: var(--muted);
}

.faq-takeaway {
  padding: .75rem 1rem;
  border-left: 3px solid var(--accent);
  background: #f5faf7;
  border-radius: 0 .65rem .65rem 0;
  color: #174232;
  font-size: .84rem;
  line-height: 1.5;
}

.faq-takeaway strong {
  color: var(--accent);
  margin-right: .35rem;
}

.faq-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding-inline: .25rem;
}

.faq-dots-group {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.faq-carousel-dot {
  width: .55rem;
  height: .55rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cfe2d7;
  cursor: pointer;
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.faq-carousel-dot:hover {
  background: #9ecbb5;
}

.faq-carousel-dot.is-active {
  width: 1.9rem;
  background: var(--accent);
}

.faq-nav-cluster {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.faq-carousel-status {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: #5d756b;
  letter-spacing: .04em;
}

.faq-carousel-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.faq-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(8, 119, 84, 0.18);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 10px -2px rgba(17, 28, 26, 0.08);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-carousel-btn svg {
  transition: transform .2s ease;
}

.faq-carousel-btn:hover {
  background: #f0f7f3;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(8, 119, 84, 0.22);
}

.faq-carousel-btn.prev-btn:hover svg {
  transform: translateX(-2px);
}

.faq-carousel-btn.next-btn:hover svg {
  transform: translateX(2px);
}

/* ==========================================================================
   10. Contacto
   ========================================================================== */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding: clamp(1.6rem, 4.2vw, 3.5rem);
  margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 5rem);
  border: 1px solid rgba(8, 119, 84, 0.14);
  border-radius: 1.6rem;
  background: linear-gradient(150deg, #f2f9f5 0%, #ffffff 70%);
  box-shadow: 0 30px 60px -36px rgba(14, 58, 42, 0.28);
}

.contact-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.contact h2 {
  max-width: 16ch;
  margin: .5rem 0 .85rem;
  font-size: clamp(1.7rem, 2.75vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -.025em;
}

.contact-highlights {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .88rem;
  color: var(--ink);
}

.contact-highlights li {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.contact-highlights span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(8, 119, 84, 0.12);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
}

.contact form:not([hidden]) {
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(8, 119, 84, 0.12);
  backdrop-filter: blur(8px);
}

form:not([hidden]), label, .field-pair {
  display: grid;
  gap: .85rem;
}

.field-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label small {
  display: inline;
  color: var(--muted);
  font-weight: 400;
}

label {
  gap: .3rem;
  font-size: .86rem;
  font-weight: 600;
}

input, textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: .6rem .75rem;
  border: 1px solid #b5c7be;
  border-radius: .45rem;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  transition: border-color .2s;
}

input:focus, textarea:focus {
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

.help {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
}

/* ==========================================================================
   Footer Ejecutivo Sereno
   ========================================================================== */
.calm-footer {
  background: radial-gradient(120% 90% at 50% 0%, #122920 0%, #081611 100%);
  color: #cce3d8;
  padding-top: clamp(3.5rem, 7vw, 5.25rem);
  padding-bottom: 2.25rem;
  border-top: 1px solid rgba(8, 119, 84, 0.25);
  position: relative;
  overflow: hidden;
}

.calm-footer .footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4.5vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-block .brand-lockup {
  background: #ffffff;
  border: 4px solid #ffffff;
  border-radius: .65rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.footer-brand-block .brand-lockup img {
  mix-blend-mode: normal;
}

.footer-tagline {
  margin: 1.15rem 0 1.2rem;
  color: #9cb5a9;
  font-size: .86rem;
  line-height: 1.6;
  max-width: 36ch;
}

.footer-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .26rem .68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1e7dc;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
}

.chip-dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.footer-col-title {
  margin: 0 0 1.05rem;
  font-size: .8rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ffffff;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .68rem;
}

.footer-col a {
  color: #98b3a5;
  font-size: .84rem;
  text-decoration: none;
  transition: color .2s, transform .2s;
  display: inline-block;
}

.footer-col a:hover {
  color: #34d399;
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  font-size: .8rem;
  color: #7a968a;
}

.footer-copy {
  margin: 0;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.footer-legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ==========================================================================
   Transiciones de Entrada y Desplazamiento Progresivo (Scroll Reveal)
   ========================================================================== */
.hero-stagger {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-stagger.is-entered {
  opacity: 1;
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-stagger.is-in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-in-view > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-stagger.is-in-view > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.is-in-view > *:nth-child(3) { transition-delay: 0.32s; }
.reveal-stagger.is-in-view > *:nth-child(4) { transition-delay: 0.44s; }
.reveal-stagger.is-in-view > *:nth-child(5) { transition-delay: 0.52s; }
.reveal-stagger.is-in-view > *:nth-child(6) { transition-delay: 0.6s; }
.reveal-stagger.is-in-view > *:nth-child(7) { transition-delay: 0.68s; }
.reveal-stagger.is-in-view > *:nth-child(8) { transition-delay: 0.76s; }

@media (prefers-reduced-motion: no-preference) {
  .orb-1 { animation: drift-a 18s ease-in-out infinite alternate; }
  .orb-2 { animation: drift-b 22s ease-in-out infinite alternate; }
  .ribbon-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 2.4s cubic-bezier(.22, 1, .36, 1) .35s forwards; }
  .ribbon-line.line-2 { animation-delay: .6s; }
  .ribbon-line.line-3 { animation-delay: .85s; }
  .hero-ribbon-svg > path:first-of-type { transform-origin: 0 0; animation: band-in 1.1s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(60px, 40px) scale(1.08); }
  }
  @keyframes drift-b {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-50px, 30px) scale(.94); }
  }
  @keyframes draw-line { to { stroke-dashoffset: 0; } }
  @keyframes band-in {
    from { opacity: 0; transform: scale(.96, .9); }
    to { opacity: 1; transform: scale(1); }
  }
}

.identity-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.identity-eyebrow img {
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 64rem) {
  .ai-cards-grid,
  .commitments-grid,
  .connectors-tiles-grid,
  .footer-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 60rem) {
  .opening { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero, .product { max-width: 44rem; width: 100%; }
  .method-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .method-narrative { position: static; }
  .footer-mv-grid { grid-template-columns: 1fr; }
  .footer-ritual-bar { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 48rem) {
  .contact, .questions { grid-template-columns: 1fr; }
  .questions h2 { margin-bottom: 0; }
  .audience-grid { grid-template-columns: 1fr; }
  .journey-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .container { width: calc(100% - 2rem); }
  h1 { font-size: clamp(1.85rem, 7.5vw, 2.3rem); line-height: 1.18; }
  h1 br { display: none; }
  .nav-example { display: none; }
  .ai-cards-grid,
  .commitments-grid,
  .connectors-tiles-grid,
  .footer-values-grid,
  .journey-tabs {
    grid-template-columns: 1fr;
  }
  .field-pair { grid-template-columns: 1fr; }
  .workspace { padding: 1.15rem; }
  .metric { grid-template-columns: 1fr; gap: .9rem; }
  .cascade-origin-bar { flex-direction: column; align-items: stretch; gap: .65rem; }
  .simulate { width: 100%; justify-content: center; }
  .hero-label { font-size: .68rem; letter-spacing: .06em; }
  .footer-nav-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-stagger, .reveal, .reveal-stagger > * {
    transform: translateY(12px);
    transition-duration: 0.4s;
  }
  .button:hover, .text-link:hover span { transform: none; }
}