/* Estilos compartidos de las páginas Vision, Existencias, Empaque, Campo y ComoEmpezar.
   Tokens y componentes base tomados de public/Direccion/index.html para que todas se vean iguales. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --canvas:#f7faf8;
  --paper:#ffffff;
  --paper-fg:#14171a;
  --muted:#f1f5f2;
  --muted-fg:#5c6b64;
  --border:#e1e8e3;
  --ink:#1e2a26;
  --ink-fg:#fafcfa;
  --brand-50:#eaf7f0;
  --brand-500:#0e7656;
  --brand-600:#0a563e;
  --brand-700:#073d2c;
  --brand-wash:rgb(14 118 86 / 0.08);
  --brand-wash-strong:rgb(14 118 86 / 0.15);
  --cta-accent:#0e7656;
  --cta-accent-hover:#0a563e;
  --slate:#2c3e50;
  --slate-fg:#e7ebee;
  --success:#0e7656;
  --warning:#c88719;
  --danger:#c0392b;
  --info:#3b6ea5;
  --shadow-float:0 20px 60px -20px rgb(10 86 62 / 0.28);
  --r-sm:0.375rem; --r-md:0.5rem; --r-lg:0.75rem; --r-xl:1rem; --r-pill:9999px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#101512;
    --paper:#161d19;
    --paper-fg:#eef3f0;
    --muted:#1c2420;
    --muted-fg:#9db0a5;
    --border:#28332d;
    --ink:#eef3f0;
    --ink-fg:#161d19;
    --brand-500:#22c55e;
    --brand-600:#34d399;
    --brand-700:#6ee7b7;
    --success:#34d399;
    --warning:#e0a63a;
    --danger:#e2685a;
    --info:#6b9bd1;
    --brand-wash:rgb(52 199 149 / 0.14);
    --brand-wash-strong:rgb(52 199 149 / 0.22);
    --shadow-float:0 20px 60px -20px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"]{
  --canvas:#101512;
  --paper:#161d19;
  --paper-fg:#eef3f0;
  --muted:#1c2420;
  --muted-fg:#9db0a5;
  --border:#28332d;
  --ink:#eef3f0;
  --ink-fg:#161d19;
  --brand-500:#22c55e;
  --brand-600:#34d399;
  --brand-700:#6ee7b7;
  --success:#34d399;
  --warning:#e0a63a;
  --danger:#e2685a;
  --info:#6b9bd1;
  --brand-wash:rgb(52 199 149 / 0.14);
  --brand-wash-strong:rgb(52 199 149 / 0.22);
  --shadow-float:0 20px 60px -20px rgb(0 0 0 / 0.6);
}

*{box-sizing:border-box; margin:0; padding:0;}
::selection{background:var(--brand-500); color:#fff;}
:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px;}
html{scroll-behavior:smooth; font-size:16px; scrollbar-color:var(--brand-500) var(--muted);}
section[id]{scroll-margin-top:80px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn:active{transform:none;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--muted);}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:var(--r-pill); border:2px solid var(--muted);}
::-webkit-scrollbar-thumb:hover{background:var(--brand-500);}
@media (min-width:760px){ html{font-size:18px;} }
body{
  background:var(--canvas);
  color:var(--paper-fg);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(16px, 4vw, 40px);}

/* ---------- Encabezado ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  height:64px; display:flex; align-items:center;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header.site .inner{
  width:100%; max-width:1200px; margin:0 auto;
  padding:0 clamp(16px, 4vw, 40px);
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
.wordmark{font-weight:800; font-size:1rem; letter-spacing:-0.01em; color:var(--brand-700); display:flex; align-items:center; gap:0.5rem; text-decoration:none;}
.wordmark .dot{width:8px; height:8px; border-radius:999px; background:var(--brand-500);}
.header-actions{display:flex; align-items:center; gap:0.75rem;}

.page-nav{
  display:flex; align-items:center; gap:0.15rem; padding:0.2rem;
  border-radius:var(--r-lg); background:var(--muted); border:1px solid var(--border);
}
.page-nav-item{
  display:inline-flex; align-items:center; gap:0.4rem;
  height:1.85rem; padding:0 0.6rem; border-radius:calc(var(--r-lg) - 0.2rem);
  font-size:0.8125rem; font-weight:600; color:var(--muted-fg); text-decoration:none;
  transition:background .2s ease, color .2s ease; white-space:nowrap;
}
.page-nav-item svg{width:15px; height:15px; flex-shrink:0;}
a.page-nav-item:hover{background:var(--paper); color:var(--paper-fg);}
.page-nav-item.is-active{background:var(--paper); color:var(--paper-fg); cursor:default;}
.nav-menu > summary.is-active{cursor:pointer;}

.theme-toggle{
  width:36px; height:36px; border-radius:var(--r-lg);
  border:1px solid var(--border); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted-fg); flex-shrink:0;
  transition:background .2s ease, color .2s ease;
}
.theme-toggle:hover{background:var(--muted);}
@keyframes theme-attention{
  0%, 100%{opacity:1; transform:scale(1); box-shadow:0 0 0 0 color-mix(in oklab, var(--brand-500) 55%, transparent);}
  50%{opacity:0.3; transform:scale(0.9); box-shadow:0 0 10px 3px color-mix(in oklab, var(--brand-500) 55%, transparent);}
}
.theme-toggle.attention{animation:theme-attention 0.9s ease-in-out 4;}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .sun{display:none; color:#facc15;}
.theme-toggle .moon{color:#2e3192;}
:root[data-theme="dark"] .theme-toggle .sun{display:block;}
:root[data-theme="dark"] .theme-toggle .moon{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none;}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  height:2.25rem; padding:0 1rem;
  border-radius:var(--r-lg); font-weight:600; font-size:0.875rem;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.98);}
.btn-accent{background:var(--cta-accent); color:#fff;}
.btn-accent:hover{background:var(--cta-accent-hover);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--paper-fg);}
.btn-outline:hover{background:var(--muted);}
.btn-lg{height:2.75rem; padding:0 1.5rem; font-size:0.9375rem;}

/* ---------- Portada ---------- */
.hero{padding:clamp(2.5rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 5rem); position:relative;}
@media (min-width:900px){ .hero{padding:3.5rem 0 3rem;} }
.hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:520px;
  background:radial-gradient(60% 60% at 20% 0%, var(--brand-wash), transparent 70%);
  pointer-events:none; z-index:-1;
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem, 5vw, 4rem); align-items:center;}
.hero-solo{max-width:46rem;}
h1{font-size:clamp(2rem, 4.6vw, 3.3rem); font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin-bottom:1.1rem; text-wrap:balance;}
h1 em{color:var(--brand-600); font-style:normal;}
.hero p.lead{font-size:clamp(1.02rem, 1.6vw, 1.15rem); color:var(--muted-fg); max-width:36rem; margin-bottom:2rem;}
.hero-ctas{display:flex; gap:0.75rem; flex-wrap:wrap;}

/* ---------- Secciones ---------- */
section{padding:clamp(2.75rem, 7vw, 5.5rem) 0;}
@media (min-width:900px){ section{padding:2.75rem 0;} }
.section-head{max-width:40rem; margin-bottom:clamp(1.75rem, 5vw, 3rem);}
@media (min-width:900px){ .section-head{margin-bottom:1.75rem;} }
.section-head h2{font-size:clamp(1.5rem, 3.2vw, 2.15rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:0.75rem; text-wrap:balance;}
.section-head p{color:var(--muted-fg); font-size:1rem;}
/* Para títulos que deben caber en una línea en escritorio */
.section-head-wide{max-width:none;}
.section-head-wide p{max-width:40rem;}

/* "El día de hoy": situaciones que el cliente reconoce */
.pain-list{display:flex; flex-direction:column;}
.pain-row{display:flex; gap:1.25rem; padding:1.5rem 0; border-top:1px solid var(--border); align-items:flex-start;}
.pain-row:first-child{border-top:none; padding-top:0;}
.pain-row .icon{
  width:40px; height:40px; border-radius:var(--r-md); background:var(--brand-wash);
  display:flex; align-items:center; justify-content:center; color:var(--brand-700); flex-shrink:0;
}
.pain-row .icon svg{width:20px; height:20px;}
.pain-row h3{font-size:1.0625rem; font-weight:700; margin-bottom:0.35rem;}
.pain-row p{font-size:0.9rem; color:var(--muted-fg); line-height:1.6; max-width:40rem;}

/* "Lo que cambia": rejilla con divisiones finas, sin tarjetas en caja */
.change-grid{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border);}
.change-item{padding:1.5rem 1.5rem 1.5rem 0; border-bottom:1px solid var(--border); display:flex; gap:1rem; align-items:flex-start;}
.change-item:nth-child(even){padding:1.5rem 0 1.5rem 1.5rem; border-left:1px solid var(--border);}
.change-item .num{
  font-size:0.75rem; font-weight:800; color:var(--brand-600);
  font-variant-numeric:tabular-nums; min-width:1.5rem; padding-top:0.2rem;
}
.change-item h3{font-size:1rem; font-weight:700; margin-bottom:0.3rem;}
.change-item p{font-size:0.875rem; color:var(--muted-fg); line-height:1.55;}

/* ---------- Pantalla de ejemplo ---------- */
.showcase{display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem, 5vw, 3.5rem); align-items:center;}
.showcase-text h2{font-size:clamp(1.5rem, 3.2vw, 2.15rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:0.75rem; text-wrap:balance;}
.showcase-text p{color:var(--muted-fg); margin-bottom:0.75rem;}
.showcase-text p:last-child{margin-bottom:0;}

.mock-card{
  background:var(--paper); border-radius:var(--r-xl);
  padding:1.25rem; box-shadow:var(--shadow-float); position:relative;
  min-width:0;
}
.eyebrow-badge{
  position:absolute; top:-11px; left:1.1rem;
  font-size:0.625rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  background:var(--ink); color:var(--ink-fg);
  padding:0.2rem 0.55rem; border-radius:var(--r-pill);
}
.mock-head{display:flex; justify-content:space-between; align-items:center; gap:0.75rem; margin-bottom:0.9rem; flex-wrap:wrap;}
.mock-head .title{font-weight:700; font-size:0.9375rem;}
.mock-head .sub{font-size:0.6875rem; color:var(--muted-fg);}
.badge{
  font-size:0.625rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:0.3rem; white-space:nowrap;
  background:var(--brand-wash-strong); color:var(--success);
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.badge.warn{background:color-mix(in oklab, var(--warning) 16%, transparent); color:var(--warning);}
.badge.risk{background:color-mix(in oklab, var(--danger) 14%, transparent); color:var(--danger);}
.badge.info{background:color-mix(in oklab, var(--info) 15%, transparent); color:var(--info);}

.mock-kpis{display:grid; grid-template-columns:repeat(3, 1fr); gap:0.6rem; margin-bottom:1rem;}
.kpi{background:var(--muted); border-radius:var(--r-md); padding:0.65rem 0.75rem; min-width:0;}
.kpi .label{font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted-fg); margin-bottom:0.2rem;}
.kpi .value{font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; font-variant-numeric:tabular-nums;}
.kpi .value.accent{color:var(--brand-600);}
.kpi .value small{font-size:0.6875rem; font-weight:600; color:var(--muted-fg);}

.mock-table-wrap{overflow-x:auto; margin:0 -0.25rem;}
.mock-table{width:100%; border-collapse:collapse; font-size:0.75rem; font-variant-numeric:tabular-nums;}
.mock-table th{
  text-align:left; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--muted-fg); padding:0 0.25rem 0.5rem; white-space:nowrap;
}
.mock-table td{padding:0.6rem 0.25rem; border-top:1px solid var(--border); vertical-align:middle;}
.mock-table td.num, .mock-table th.num{text-align:right;}
.mock-table td b{font-weight:700;}
.mock-table .item{font-weight:600; white-space:nowrap;}
.mock-table .item small{display:block; font-size:0.625rem; font-weight:500; color:var(--muted-fg);}

/* Barra de semanas de alcance (de 8) */
.reach{display:flex; gap:2px; min-width:72px;}
.reach i{flex:1; height:8px; border-radius:2px; background:var(--muted); display:block;}
.reach i.on{background:var(--brand-500);}
.reach.warn i.on{background:var(--warning);}
.reach.risk i.on{background:var(--danger);}

/* Filas de pesaje (Empaque) */
.weigh{display:flex; flex-direction:column; font-variant-numeric:tabular-nums;}
.weigh-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.55rem 0; border-top:1px solid var(--border); font-size:0.8125rem;}
.weigh-row:first-child{border-top:none;}
.weigh-row span{color:var(--muted-fg);}
.weigh-row span small{display:block; font-size:0.6875rem;}
.weigh-row b{font-weight:700;}
.weigh-row.total{border-top:2px solid var(--paper-fg); padding-top:0.7rem;}
.weigh-row.total span{color:var(--paper-fg); font-weight:700;}
.weigh-row.total b{font-size:1.15rem; font-weight:800; color:var(--brand-600);}
.mock-foot{
  margin-top:0.9rem; padding-top:0.8rem; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:0.45rem; font-size:0.6875rem; color:var(--muted-fg);
}
.mock-foot svg{width:13px; height:13px; flex-shrink:0;}
.chips{display:grid; grid-template-columns:repeat(3, 1fr); gap:0.5rem; margin-top:0.9rem;}

/* Proyectado contra cosechado (Campo) */
.bars{display:grid; grid-template-columns:repeat(6, 1fr); gap:0.6rem; align-items:end; height:150px; margin:0.25rem 0 0.4rem;}
.bar-col{display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%;}
.bar-col i{display:block; width:42%; max-width:16px; border-radius:3px 3px 0 0;}
.bar-col i.plan{background:color-mix(in oklab, var(--muted-fg) 35%, transparent);}
.bar-col i.real{background:var(--brand-500);}
.bar-col i.pending{background:transparent; border:1.5px dashed var(--border); border-bottom:none;}
.bar-labels{display:grid; grid-template-columns:repeat(6, 1fr); gap:0.6rem; font-size:0.625rem; color:var(--muted-fg); text-align:center; font-variant-numeric:tabular-nums;}
.bar-labels b{display:block; color:var(--paper-fg); font-weight:700; font-size:0.6875rem;}
.legend{display:flex; flex-wrap:wrap; gap:0.4rem 1rem; font-size:0.6875rem; color:var(--muted-fg); margin-top:0.8rem;}
.legend span{display:inline-flex; align-items:center; gap:0.4rem;}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ---------- Video del recorrido ---------- */
.video-frame{
  position:relative; aspect-ratio:16 / 9; width:100%;
  border-radius:var(--r-xl); overflow:hidden; background:var(--ink);
  box-shadow:var(--shadow-float);
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---------- Bloques de Visión y Cómo empezar ---------- */
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; counter-reset:paso;}
.step{padding:0 1.5rem 0 0; position:relative;}
.step + .step{padding-left:1.5rem; border-left:1px solid var(--border);}
.step .tag{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.75rem; font-weight:800; color:var(--muted-fg); margin-bottom:0.6rem;
}
.step .tag b{
  width:1.6rem; height:1.6rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--muted); color:var(--paper-fg); font-size:0.75rem;
}
.step.is-current .tag{color:var(--brand-600);}
.step.is-current .tag b{background:var(--brand-500); color:#fff;}
.step h3{font-size:1.125rem; font-weight:800; margin-bottom:0.45rem;}
.step p{font-size:0.875rem; color:var(--muted-fg); line-height:1.6;}
.step ul{list-style:none; margin-top:0.8rem; display:flex; flex-direction:column; gap:0.35rem;}
.step li{font-size:0.8125rem; color:var(--muted-fg); padding-left:1rem; position:relative;}
.step li::before{content:""; position:absolute; left:0; top:0.55em; width:5px; height:5px; border-radius:50%; background:var(--brand-500);}

/* Etapas en filas (Visión): etapa y lema a la izquierda, párrafo a la derecha */
.eras{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.era{
  display:grid; grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.6fr); gap:clamp(1rem, 4vw, 3rem);
  padding:1.5rem clamp(0.75rem, 2vw, 1.25rem); border-bottom:1px solid var(--border);
}
.era .tag{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted-fg);
}
.era .tag b{
  width:1.6rem; height:1.6rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--muted); color:var(--paper-fg); font-size:0.75rem;
}
.era-lema{
  margin-top:0.6rem; font-size:clamp(1.1rem, 2vw, 1.4rem); font-weight:700;
  line-height:1.3; letter-spacing:-0.015em; color:var(--paper-fg); text-wrap:balance;
}
.era-text{font-size:0.9375rem; color:var(--muted-fg); line-height:1.65; align-self:center;}
.era-text strong{color:var(--paper-fg); font-weight:600;}
.era.is-current{background:var(--brand-wash); border-radius:var(--r-lg); border-bottom:none; margin-top:0.75rem;}
.era.is-current .tag{color:var(--brand-600);}
.era.is-current .tag b{background:var(--brand-500); color:#fff;}
.era.is-current .era-lema{color:var(--brand-700);}
/* Cierre de la sección: conclusión en texto, sin bloque de color que compita con las etapas */
.era-cierre{
  margin-top:2rem; margin-left:clamp(0.75rem, 2vw, 1.25rem); max-width:46rem;
  padding-left:clamp(1rem, 3vw, 1.5rem); border-left:3px solid var(--brand-500);
}
.era-cierre h2{font-size:clamp(1.15rem, 2.2vw, 1.4rem); font-weight:800; letter-spacing:-0.015em; margin-bottom:0.5rem; text-wrap:balance;}
.era-cierre p{font-size:0.9375rem; color:var(--muted-fg); line-height:1.65;}
@media (max-width:700px){
  .era{grid-template-columns:1fr; gap:0.6rem; padding:1.25rem 0;}
  .era.is-current{padding:1.25rem 1rem;}
  .era-cierre{margin-left:0; padding-left:1rem;}
}

.band{
  background:linear-gradient(135deg, var(--slate), color-mix(in oklab, var(--slate) 82%, black));
  border-radius:var(--r-xl); padding:clamp(1.75rem, 4vw, 2.75rem);
  color:var(--slate-fg);
}
.band h2{font-size:clamp(1.35rem, 2.8vw, 1.85rem); font-weight:800; margin-bottom:0.7rem; letter-spacing:-0.02em; color:#fff; text-wrap:balance;}
.band p{color:#c6d0d9; max-width:40rem;}

.route{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--border);}
.route-item{padding:1.4rem 1.25rem 1.4rem 0; border-bottom:1px solid var(--border);}
.route-item + .route-item{padding-left:1.25rem; border-left:1px solid var(--border);}
.route-item .icon{
  width:36px; height:36px; border-radius:var(--r-md); background:var(--brand-wash);
  display:flex; align-items:center; justify-content:center; color:var(--brand-700); margin-bottom:0.8rem;
}
.route-item .icon svg{width:18px; height:18px;}
.route-item h3{font-size:1rem; font-weight:700; margin-bottom:0.3rem;}
.route-item p{font-size:0.8125rem; color:var(--muted-fg); line-height:1.55;}
.route-item a{font-size:0.8125rem; font-weight:600; color:var(--brand-600); text-decoration:none; display:inline-block; margin-top:0.6rem;}
.route-item a:hover{text-decoration:underline;}

.notes{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem;}
.note{
  display:flex; align-items:flex-start; gap:0.75rem;
  padding:1rem 1.1rem; border-radius:var(--r-md); background:var(--brand-wash);
}
.note svg{width:18px; height:18px; color:var(--brand-700); flex-shrink:0; margin-top:0.15rem;}
.note h4{font-size:0.9375rem; font-weight:700; margin-bottom:0.2rem;}
.note p{font-size:0.8125rem; color:var(--muted-fg);}
.note a{color:var(--brand-700); font-weight:600;}

.prose{max-width:40rem;}
.prose h2{font-size:clamp(1.5rem, 3.2vw, 2.15rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:0.9rem; text-wrap:balance;}
.prose p{color:var(--muted-fg); font-size:1rem; margin-bottom:0.9rem;}
.prose p:last-child{margin-bottom:0;}
/* El título usa todo el ancho (una sola línea en escritorio); el párrafo se mantiene angosto */
.prose-center{margin:0 auto; text-align:center; max-width:none;}
.prose-center p{max-width:36rem; margin-left:auto; margin-right:auto;}

/* Cita personal (Visión) */
.quote{max-width:44rem; padding-left:clamp(1rem, 3vw, 1.75rem); border-left:3px solid var(--brand-500);}
.quote-lead{font-size:0.9375rem; color:var(--muted-fg); margin-bottom:1rem;}
.quote blockquote p{
  font-size:clamp(1.15rem, 2.2vw, 1.45rem); font-weight:600; line-height:1.45;
  letter-spacing:-0.01em; color:var(--paper-fg); text-wrap:pretty;
}
.quote figcaption{margin-top:1rem; font-size:0.8125rem; font-weight:600; color:var(--brand-600);}

/* ---------- Contacto ---------- */
.cta{
  text-align:center; background:linear-gradient(180deg, var(--brand-wash), transparent 70%);
  border-radius:var(--r-xl); padding:clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
}
.cta h2{font-size:clamp(1.5rem, 3.4vw, 2.4rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:0.9rem; text-wrap:balance;}
.cta p{color:var(--muted-fg); max-width:32rem; margin:0 auto 1.75rem;}
.cta-actions{display:flex; gap:0.85rem; justify-content:center; flex-wrap:wrap;}
.cta-more{margin-top:1.5rem; font-size:0.8125rem; color:var(--muted-fg);}
.cta-more a{color:var(--brand-700); font-weight:600;}

footer{border-top:1px solid var(--border); padding:1.75rem 0; margin-top:1rem;}
footer .inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem;}
footer .left{font-size:0.8125rem; color:var(--muted-fg);}
footer .right{font-size:0.75rem; color:var(--muted-fg); display:flex; align-items:center; gap:0.4rem;}
footer .right b{color:var(--paper-fg); font-weight:700;}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero-grid, .showcase{grid-template-columns:1fr;}
  .route{grid-template-columns:1fr 1fr;}
  .route-item:nth-child(3){padding-left:0; border-left:none;}
}
@media (max-width:700px){
  .change-grid{grid-template-columns:1fr;}
  .change-item, .change-item:nth-child(even){padding:1.25rem 0; border-left:none;}
  .steps{grid-template-columns:1fr; gap:1.5rem;}
  .step, .step + .step{padding:0; border-left:none;}
  .step + .step{padding-top:1.5rem; border-top:1px solid var(--border);}
  .notes{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .route{grid-template-columns:1fr;}
  .route-item, .route-item + .route-item{padding:1.25rem 0; border-left:none;}
  .mock-kpis{grid-template-columns:1fr 1fr;}
  .mock-kpis .kpi:last-child:nth-child(odd){grid-column:1 / -1;}
  .chips{grid-template-columns:1fr 1fr 1fr;}
  .mock-card{padding:1.1rem 0.9rem;}
}

/* Preguntas frecuentes */
.faq{max-width:48rem; border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; font-size:1.0625rem; font-weight:700;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; flex-shrink:0; color:var(--brand-500); font-size:1.5rem; font-weight:500; line-height:1; transition:transform .2s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{color:var(--brand-600);}
.faq-item p{max-width:42rem; padding:0 0 1.25rem; color:var(--muted-fg); font-size:0.95rem; line-height:1.65;}
@media (prefers-reduced-motion: reduce){ .faq-item summary::after{transition:none;} }