/* Estilos replicados de sprint.productdesign.mx/mejora (journey-page / improvement-page). */
*,:before,:after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5;-webkit-tap-highlight-color:transparent;font-family:Arial,Helvetica,sans-serif}
h1,h2,h3{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
ul,ol{list-style:none}
img,svg,iframe{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border-radius:0}
button{cursor:pointer}
textarea{resize:vertical}
[hidden]{display:none!important}

.journey-page{
  --im-bg:#081411;--im-ink:#f2f8f4;--im-line:#c4ead42b;
  --journey-ease:cubic-bezier(.22,1,.36,1);--layer-nav:30;
  min-height:100svh;color:var(--im-ink);line-height:1.6;
  background:radial-gradient(at 82% 8%,#16433166,#0000 40%),#081713;
}
.journey-page svg{stroke-width:1.25px}
.journey-page em{color:#8ee6b6;font-style:normal}
.journey-page :is(a,button,summary,input,textarea):focus-visible{outline-offset:4px;outline:3px solid #c2f9d8}

/* Header */
.journey-header{color:#b4ccc0;justify-content:space-between;align-items:center;gap:20px;padding:28px 5.5%;font-size:14px;display:flex}
.journey-header a,.journey-header .journey-header-pill{align-items:center;gap:10px;min-height:44px;display:flex}
.journey-header-pill{background:#ffffff06;border:1px solid #bdedce22;border-radius:99px;padding:8px 16px;font-variant-numeric:tabular-nums}
.journey-brand{letter-spacing:.06em;font-size:14px}

/* Hero */
.journey-hero{max-width:1440px;margin:auto;padding:96px 5.5% 36px}
.journey-eyebrow{color:#a4dfbd;letter-spacing:.06em;text-transform:uppercase;border:1px solid #bce9cb26;border-radius:99px;align-items:center;margin:0 0 28px;padding:8px 13px;font-size:14px;display:inline-flex}
.journey-hero h1{letter-spacing:-.04em;max-width:1100px;margin:0 0 36px;font-size:clamp(46px,6.8vw,98px);font-weight:500;line-height:1.08}
.journey-intro{justify-content:space-between;align-items:center;gap:40px;display:flex}
.journey-intro p{color:#b4c7bc;max-width:565px;margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.8}
.journey-hero-foot{color:#b5cebf;letter-spacing:.04em;border-top:1px solid #bbe6cb22;justify-content:space-between;margin-top:64px;padding-top:22px;font-size:14px;display:flex;gap:18px}

/* Botón principal */
.journey-page .journey-action{color:#09251b;white-space:nowrap;min-height:52px;transition:transform .45s var(--journey-ease),background .45s var(--journey-ease),opacity .3s;background:#a4ecc1;border:0;border-radius:99px;justify-content:space-between;align-items:center;gap:24px;padding:8px 8px 8px 23px;font-size:16px;font-weight:600;display:inline-flex}
.journey-action>span{width:36px;height:36px;transition:transform .45s var(--journey-ease);background:#08251a12;border-radius:50%;place-items:center;display:grid}
.journey-action:not(:disabled):hover{background:#c0f6d4;transform:translateY(-3px)}
.journey-action:not(:disabled):hover>span{transform:translate(2px,-1px) rotate(-35deg)}
.journey-action:not(:disabled):active{transform:scale(.97)}
.journey-page .journey-action:disabled{opacity:.35;cursor:default}
.journey-link{color:#a9c5b6;text-underline-offset:5px;text-decoration:underline;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.journey-link:hover{color:#dcfbe8}

/* Nav de pasos */
.journey-nav{z-index:var(--layer-nav);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0a211be8;border:1px solid #bee8cf28;border-radius:99px;gap:4px;width:max-content;max-width:calc(100% - 32px);margin:0 auto;padding:6px;display:flex;position:sticky;top:22px;box-shadow:inset 0 1px #ffffff0d}
.journey-nav span.step{color:#a2bdae;transition:background .5s var(--journey-ease),color .5s var(--journey-ease);border-radius:99px;align-items:center;gap:10px;padding:14px 24px;font-size:16px;display:flex;position:relative}
.journey-nav span.step>span{font-size:14px}
.journey-nav span.step[aria-current]{color:#09251b;background:#a4ecc1}
.journey-nav span.step.is-done{color:#dcfbe8}
.journey-nav i{opacity:0;width:4px;height:4px;transition:opacity .5s var(--journey-ease);background:currentColor;border-radius:50%}
.journey-nav span.step[aria-current] i{opacity:1}

/* Secciones */
.journey-sections{max-width:1440px;margin:auto;padding:0 5.5%}
.journey-section{border-bottom:1px solid #b7dfc81a;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(40px,7vw,112px);padding:112px 0;scroll-margin-top:105px;display:grid}
.journey-copy{padding-top:48px;max-width:65ch}
.journey-copy.is-sticky{position:sticky;top:110px}
.journey-copy h2{letter-spacing:-.025em;margin-bottom:24px;font-size:clamp(32px,3.7vw,54px);font-weight:500;line-height:1.15}
.journey-summary{color:#bfcec5;margin-bottom:32px;font-size:17px;line-height:1.8}
.journey-reasons{margin:0 0 32px}
.journey-reasons>div{border-top:1px solid #b7dfc81f;padding:22px 0}
.journey-reasons dt{letter-spacing:.04em;text-transform:uppercase;color:#a4dfbd;margin-bottom:10px;font-size:14px;font-weight:600}
.journey-reasons dd{color:#c0d2c6;margin:0;font-size:17px;line-height:1.8}

/* Tarjeta tipo visit-rationale */
.visit-rationale{color:#d9e9df;background:#a4dfbd08;border:1px solid #a4dfbd40;border-radius:20px;margin:0 0 32px;padding:24px}
.visit-rationale__eyebrow{letter-spacing:.07em;color:#a4dfbd;margin:0 0 10px;font-size:13px;line-height:1.5}
.visit-rationale h3{letter-spacing:-.02em;margin:0 0 22px;font-size:23px;font-weight:600;line-height:1.3}
.visit-rationale__chart{gap:20px;display:grid}
.visit-rationale__row>div:first-child{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:9px;display:flex}
.visit-rationale__row span{font-size:14px;line-height:1.5}
.visit-rationale__row strong{font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:1.2}
.visit-rationale__track{background:#a4dfbd14;border-radius:8px;height:8px;overflow:hidden}
.visit-rationale__track>span{border-radius:inherit;background:#5e9c78;height:100%;display:block}
.visit-rationale__track>span.is-strong{background:#a4ecc1}
.visit-rationale__note{color:#c0d2c6;margin:0 0 18px;font-size:15px;line-height:1.7}
.visit-rationale__source{color:#aac4b5;margin:12px 0 0;font-size:13px;line-height:1.6}

/* Evidencia / teléfono */
.journey-evidence-shell{background:#d3ffe307;border:1px solid #bceccc24;border-radius:36px;padding:7px;box-shadow:inset 0 1px #ffffff09}
.journey-evidence-core{background:radial-gradient(#1c513933,#0d241c);border-radius:29px;padding:24px 20px 20px;box-shadow:inset 0 1px #ffffff12}
.journey-evidence-heading{letter-spacing:.04em;color:#bed1c4;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;font-size:14px;display:flex;flex-wrap:wrap}
.journey-status{color:#a4dfbd;letter-spacing:.03em;background:#9ce7bb0e;border-radius:99px;padding:6px 9px;font-variant-numeric:tabular-nums}
.journey-hint{color:#b5cebf;text-align:center;margin:24px 0 0;font-size:14px;line-height:1.7}
.im-phone{margin:0 auto;display:block}
.im-phone-shell{width:100%;position:relative}
.im-phone-frame{z-index:3;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}
.im-phone-viewport{z-index:1;background:#fff;border-radius:clamp(17px,2vw,30px);position:absolute;inset:2.7% 4.4% 2.35%;overflow:hidden}
.im-phone figcaption{color:#b5cebf;text-align:center;letter-spacing:.06em;margin-top:16px;font-size:14px;line-height:1.6}
.im-phone--game,.im-phone--waiting{width:min(100%,320px)}
.im-phone--game .im-phone-shell{aspect-ratio:2497/5069}
.im-phone--waiting .im-phone-shell{aspect-ratio:380/808}
.im-phone-viewport--game{background:#08764d}
.im-phone-viewport--game iframe{background:#08764d;border:0;width:100%;height:100%}
.im-phone-viewport--waiting{background:#08764d}
.im-information-viewport{width:100%;height:100%;position:relative;overflow:clip}
.im-information-viewport iframe{transform-origin:0 0;max-width:none;position:absolute;border:0}

/* Preguntas */
.q-list{display:grid}
.q{border-top:1px solid #b7dfc81f;padding:28px 0}
.q:last-child{border-bottom:1px solid #b7dfc81f}
.q legend,.q .q-label{display:block;width:100%;padding:0}
.q-num{letter-spacing:.04em;text-transform:uppercase;color:#a4dfbd;margin-bottom:10px;font-size:14px;font-weight:600;display:block}
.q-text{color:#eff9f2;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;line-height:1.35;display:block}
.q-help{color:#aac4b5;margin-top:8px;font-size:15px;line-height:1.6;display:block}
.q-body{margin-top:20px}
.q.is-missing .q-num{color:#f2f8f4}
.q.is-missing .q-num:after{content:" · Falta responder";color:#8ee6b6;text-transform:none;letter-spacing:0;font-weight:400}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;color:#a2b7aa;background:#061b14;border:1px solid #bceccc24;border-radius:99px;padding:10px 18px;font-size:15px;line-height:1.3;transition:color .4s var(--journey-ease),background .4s var(--journey-ease),border-color .4s var(--journey-ease)}
.chip:hover span{color:#dcfbe8;border-color:#bceccc55}
.chip input:checked+span{color:#09251b;background:#a4ecc1;border-color:#a4ecc1}
.chip input:focus-visible+span{outline-offset:4px;outline:3px solid #c2f9d8}

/* Escala y matriz: misma forma que .journey-toggle */
.journey-toggle{background:#061b14;border:1px solid #bceccc24;border-radius:99px;padding:5px;display:flex;position:relative}
.journey-toggle label{flex:1;position:relative;display:flex}
.journey-toggle input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.journey-toggle label span{flex:1;text-align:center;color:#a2b7aa;border-radius:99px;padding:11px 10px;font-size:14px;line-height:1.3;transition:color .4s var(--journey-ease),background .4s var(--journey-ease)}
.journey-toggle label:hover span{color:#dcfbe8}
.journey-toggle input:checked+span{color:#09251b;background:#a4ecc1}
.journey-toggle input:focus-visible+span{outline-offset:2px;outline:3px solid #c2f9d8}
.scale-ends{display:flex;justify-content:space-between;gap:16px;color:#aac4b5;font-size:13px;margin-top:10px;padding:0 6px}

.matrix{display:grid;gap:18px}
.matrix-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);align-items:center;gap:18px;border-top:1px solid #b7dfc81a;padding-top:18px}
.matrix-row:first-child{border-top:0;padding-top:0}
.matrix-row p{color:#c0d2c6;font-size:16px;line-height:1.55}
.matrix-row.is-missing p{color:#eff9f2}
.matrix-row.is-missing p:after{content:" · Falta";color:#8ee6b6}

.field{width:100%;color:var(--im-ink);background:#061b14;border:1px solid #bceccc24;border-radius:20px;padding:16px 18px;font-size:16px;line-height:1.6;min-height:120px;transition:border-color .3s}
.field:hover{border-color:#bceccc55}
.field:focus{outline:none;border-color:#a4ecc1}
.field::placeholder{color:#7f9a8c}
input.field{min-height:52px;border-radius:99px;padding:12px 20px}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-fields label{display:grid;gap:8px;color:#aac4b5;font-size:14px}

.consent{display:flex;gap:14px;align-items:flex-start;color:#c0d2c6;font-size:15px;line-height:1.6;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin-top:1px;border:1px solid #bceccc55;border-radius:7px;background:#061b14;display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:#a4ecc1;border-color:#a4ecc1}
.consent input:checked:after{content:"";width:6px;height:11px;border:solid #09251b;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

.step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:36px}
.step-note{color:#aac4b5;font-size:14px;line-height:1.6}
.form-error{color:#eff9f2;font-size:15px;line-height:1.6;border:1px solid #a4dfbd40;background:#a4dfbd08;border-radius:16px;padding:12px 16px;margin-top:20px}

.journey-footer{justify-content:space-between;align-items:center;gap:32px;max-width:1440px;margin:auto;padding:96px 5.5%;display:flex}
.journey-footer p{letter-spacing:-.04em;margin:0;font-size:clamp(28px,3vw,42px);line-height:1.3}

/* Animación de entrada (misma curva que /mejora) */
.journey-step{animation:step-in .85s var(--journey-ease) both}
@keyframes step-in{0%{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

@media (max-width:767px){
  .journey-header{gap:12px;padding:16px;flex-wrap:wrap}
  .journey-brand{display:none}
  .journey-header-pill{padding:6px 12px}
  .journey-hero{padding:56px 16px 30px}
  .journey-hero h1{letter-spacing:-.035em;font-size:clamp(39px,8.8vw,64px)}
  .journey-intro{gap:24px;display:grid}
  .journey-intro .journey-action{justify-self:start}
  .journey-hero-foot{flex-direction:column;margin-top:40px;line-height:1.6}
  .journey-nav{gap:0;top:12px}
  .journey-nav span.step{gap:6px;padding:12px 10px;font-size:14px;min-height:44px}
  .journey-nav span.step .label{display:none}
  .journey-nav span.step[aria-current] .label{display:inline}
  .journey-nav i{display:none}
  .journey-sections{padding:0 16px}
  .journey-section{grid-template-columns:1fr;gap:32px;padding:56px 0;scroll-margin-top:80px}
  .journey-copy{padding-top:0}
  .journey-copy.is-sticky{position:static}
  /* En móvil el botón "Ya terminé" queda debajo del teléfono */
  .journey-section.is-play{display:flex;flex-direction:column;gap:0}
  .journey-section.is-play>.journey-copy{display:contents}
  .journey-section.is-play .journey-evidence-shell{order:1;margin:0 0 24px}
  .journey-section.is-play .step-actions{order:2;margin-top:0}
  .journey-evidence-core{padding:20px 12px}
  .im-phone--game,.im-phone--waiting{width:min(82vw,330px)}
  .matrix-row{grid-template-columns:1fr;gap:10px}
  .two-fields{grid-template-columns:1fr}
  .journey-toggle label span{padding:11px 4px;font-size:13px}
  .journey-footer{flex-direction:column;align-items:flex-start;padding:64px 16px}
}
@media (prefers-reduced-motion:reduce){
  .journey-page *,.journey-page :before,.journey-page :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}