/* Hero «De una necesidad a un plan» · estilos de sección (prefijo .hz-).
   Reutiliza de site.css: .wrap, .button.primary, .watch-link, .play-circle, .intro-label, .icon, .sr, h1 em (serif) y el foco visible.
   Estado por defecto del CSS = estado final del ejemplo (todo visible, decisión tomada, fase 3 concretada):
   sin JS se lee entero; con JS, las animaciones WAAPI de hero.js llevan cada pieza desde opacity 0 hasta este estado. */

/* Envoltorio: recorta el fondo salvia girado sin tocar main */
.hz-band{overflow-x:clip;--plum:#67517f} /* --plum viene del brief V4 y no está en site.css: se declara aquí, dentro de la sección */

/* Rejilla: argumento | ventana de producto */
.hz-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;padding-block:18px 40px}
.hz-copy{min-width:0;padding-top:4px}
.hz-eyebrow{margin-bottom:22px}
.hz-eyebrow .icon{width:16px;height:16px}
.hz-title{font-size:clamp(44px,4.5vw,64px);line-height:1.035;letter-spacing:-.055em}
.hz-title em{display:inline-block;margin-top:7px;line-height:1.04}
.hz-lead{font-size:19px;line-height:1.6;margin-top:26px;max-width:470px;color:#465c4c}
.hz-lead strong{font-weight:650;color:var(--forest)}
.hz-lead-2{font-size:16px;line-height:1.6;margin-top:12px;max-width:470px;color:var(--muted)}
.hz-actions{margin-top:30px;display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.hz-watch{min-height:44px}
.hz-watch .play-circle{transition:background-color .2s ease}
.hz-watch:hover .play-circle{background:var(--lime)}
.hz-footnote{font-size:12px;color:var(--muted);margin-top:16px}

/* Ventana de producto */
.hz-product{position:relative;padding:15px 0 0 17px;min-width:0;isolation:isolate}
.hz-backing{position:absolute;inset:0 -8px -15px 0;max-width:calc(100% + 8px);background:#e0e8ca;border-radius:30px;transform:rotate(2deg);z-index:-1}
.hz-window{position:relative;background:var(--white);border:1px solid #c4d0b6;border-radius:16px;overflow:hidden;box-shadow:0 25px 45px -22px #193a2e40}
.hz-bar{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 14px;background:#f2f4eb;border-bottom:1px solid #e1e6d8;font-size:12px;color:#5c705b}
.hz-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--lavender);color:#6b5d80;flex-shrink:0}
.hz-mark .icon{width:14px;height:16px}
.hz-bar-title{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.hz-bar-title span{font-size:12px}
.hz-window-title{font-size:13px;font-weight:650;letter-spacing:-.02em;line-height:1.2;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-tag{margin-left:auto;font-size:12px;padding:3px 7px;border:1px solid #d7decd;border-radius:4px;white-space:nowrap;color:#5c705b}

/* Pasos (lectura manual) y control: solo con JS */
.hz-steps{display:none;align-items:center;gap:4px;padding:3px 8px;background:#f7f8f1;border-bottom:1px solid #e5e8dc}
.js .hz-steps{display:flex;flex-wrap:wrap}
.js.hz-static .hz-steps{display:none}
.hz-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;min-height:44px;padding:4px 9px;border-radius:8px;background:transparent;font-size:12px;font-weight:560;color:#526b4d;transition:background-color .2s ease,color .2s ease}
.hz-step b{display:grid;place-content:center;width:18px;height:18px;border-radius:50%;background:#e8eddd;font-size:12px;font-weight:600;transition:background-color .2s ease}
.hz-step:hover{background:#eef1e3}
.hz-step[aria-pressed="true"]{background:#e3e9cc;color:var(--forest)}
.hz-step[aria-pressed="true"] b{background:var(--forest);color:#f6f8ee}
.hz-step.hz-done b{background:#c9d9a8;color:var(--forest)}
.hz-motion{display:none;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;margin-left:auto;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid #c9d4be;border-radius:8px;background:var(--white);font-size:12px;font-weight:600;color:var(--forest);white-space:nowrap;transition:background-color .2s ease}
.js .hz-motion{display:inline-flex}
.js.hz-reduce .hz-motion{display:none} /* F11: sin controles inoperantes en movimiento reducido (como el resto de secciones) */
.hz-static-note{display:none;flex:1 1 100%;margin:0;padding:0 4px 3px;font-size:12px;line-height:1.3;color:#5c705b}
.js.hz-reduce .hz-static-note{display:block}
.js.hz-reduce .hz-steps{padding-block:2px}
.js.hz-reduce .hz-progress{display:none}
.hz-motion:hover{background:var(--sage)}
.hz-motion:disabled{opacity:.6;background:var(--white)}
.hz-progress{display:none;height:3px;background:#e6ebdc}
.js .hz-progress{display:block}
.js.hz-static .hz-progress{display:none}
.hz-progress span{display:block;width:100%;height:100%;background:#718c53;transform:scaleX(1);transform-origin:left}

/* Superficie de trabajo */
.hz-work{display:grid;gap:7px;padding:9px 14px 11px;background:#fbfcf8}
.hz-phases,.hz-tasks,.hz-auto-list,.hz-opts{margin:0;padding:0;list-style:none}

/* 1. La necesidad, escrita por la persona (lavanda) */
.hz-need{position:relative;padding:9px 12px;border:1px solid #e1d9ec;border-radius:10px;background:var(--lavender);color:#5f5375}
.hz-need-main{display:flex;gap:10px;align-items:flex-start;padding-right:30px}
.hz-need-main>.icon{width:19px;height:19px;margin-top:2px}
.hz-need-label{display:flex;align-items:center;gap:7px;margin-bottom:2px;font-size:12px;font-weight:650}
.hz-need-label b,.hz-decision-q b{padding:1px 6px;border-radius:4px;background:#fff;color:var(--plum);font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.hz-need-text{font-size:13px;line-height:1.45;color:#3f3552}
.hz-w{display:inline-block}
.hz-sent{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #dcd2e9;border-radius:50%;background:#fff;color:var(--plum)}
.hz-sent .icon{width:13px;height:13px;stroke-width:2}

/* 4. La decisión de la persona (de la propuesta B), bajo la necesidad */
.hz-decision{margin-top:8px;padding-top:8px;border-top:1px dashed #cfc3df}
.hz-decision-q{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;min-height:18px;margin-bottom:6px;font-size:12px;font-weight:650;color:#4d3f63}
.hz-decision-note{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;font-weight:600;color:var(--plum)}
.hz-decision-note .icon{width:12px;height:12px;stroke-width:2}
.hz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hz-opt{position:relative;display:flex;align-items:center;gap:7px;min-width:0;padding:5px 8px;border:1px solid #ddd4ea;border-radius:8px;background:#faf8fd;font-size:12px;font-weight:500;line-height:1.3;color:#4d3f63}
.hz-opt>*{position:relative;z-index:1;min-width:0}
.hz-opt>.hz-opt-fill{position:absolute;inset:-1px;z-index:0;border:1.5px solid var(--plum);border-radius:8px;background:#fff}
.hz-opt-mark{display:grid;place-items:center;width:14px;height:14px;border:1.5px solid #b5a7c8;border-radius:50%;color:var(--plum);flex-shrink:0}
.hz-opt-mark .icon{width:9px;height:9px;stroke-width:2.8}
.hz-opt-other{opacity:.85}
.hz-opt-other span{color:#4f4763}

/* 2. El plan como documento (blanco, título y entregables en serif) */
.hz-doc{position:relative;padding:8px 12px 5px;border:1px solid #d7dfc9;border-radius:10px;background:#fff;box-shadow:0 1px 0 #eef1e6}
.hz-doc-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:2px;padding-bottom:6px;border-bottom:1px solid #e6ebdc;font-size:12px;color:#596b53}
.hz-doc-head strong{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;font-weight:400;letter-spacing:-.01em;color:var(--forest)}
.hz-doc-head .icon{width:17px;height:17px;color:var(--green)}
.hz-doc-state{align-items:center}
.hz-doc-wait{display:inline-flex;align-items:center;gap:6px;color:#5f7057}
.hz-doc-wait::before{content:"";width:7px;height:7px;border-radius:50%;background:#b9d38f;flex-shrink:0}
.hz-doc-adjust{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:600;color:var(--plum)}
.hz-doc-adjust::before{content:"";width:7px;height:7px;border-radius:50%;background:#c9b9e2}
.hz-phases{display:grid}
.hz-phase{position:relative;display:grid;grid-template-columns:22px minmax(0,.72fr) minmax(0,1.55fr);gap:4px 10px;align-items:start;padding:5px 0;border-bottom:1px dashed #e3e9d8}
.hz-phase:last-child{border-bottom:0}
.hz-phase>*{position:relative;z-index:1;min-width:0}
.hz-phase>.hz-phase-glow{position:absolute;inset:-1px -8px;z-index:0;border:1.5px solid #a894c4;border-radius:9px;background:#f4f0f9;pointer-events:none}
.hz-num{display:grid;place-content:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--sage);color:var(--green);font-size:12px;font-weight:650}
.hz-phase-name{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:13px;font-weight:650;letter-spacing:-.01em;line-height:1.3;color:var(--forest)}
.hz-badge{padding:1px 6px;border-radius:999px;background:var(--plum);color:#fff;font-size:12px;font-weight:650;letter-spacing:.03em;line-height:1.5;white-space:nowrap}
.hz-phase-what{font-size:12px;line-height:1.4;color:#5f7057}
.hz-swap{display:grid;min-width:0}
.hz-swap>*{grid-area:1/1;min-width:0}
.hz-old{opacity:0}
.hz-pending{font-style:italic;color:#7a8a73;white-space:nowrap}
.hz-deliv{display:inline-flex;align-items:center;gap:5px;max-width:100%;margin-top:3px;padding:1px 7px 1px 5px;border:1px solid #dfe5d3;border-radius:6px;background:#fbfcf7;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:12px;color:var(--deep)}
.hz-deliv .icon{width:13px;height:13px;color:var(--green)}

/* 3. Reparto: tareas «Tú» (lavanda) y «Agente» (salvia) */
.hz-tasks{display:grid;gap:4px;align-content:start}
.hz-task{display:flex;gap:7px;align-items:flex-start;min-width:0;padding:4px 8px;border:1px solid #e6ebdc;border-radius:7px;background:#f5f7ef;font-size:12px;line-height:1.35;color:#3f5546}
.hz-who{flex-shrink:0;margin-top:1px;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.05em;line-height:1.3;text-transform:uppercase}
.hz-you{background:#f8f5fc;border-color:#e3dced}
.hz-you .hz-who{background:var(--lavender);color:var(--plum)}
.hz-agent{background:#f4f7ec;border-color:#dde6c8}
.hz-agent .hz-who{background:var(--sage);color:var(--green)}
.hz-new-tag{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:4px;background:var(--plum);color:#fff;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.05em;line-height:1.4;text-transform:uppercase;vertical-align:1px}

/* 5. Automatismos (salvia) y «Lo siguiente que te toca» (lavanda) */
.hz-auto{display:grid;gap:6px}
.hz-auto-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.hz-auto-label .icon{width:14px;height:14px}
.hz-auto-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hz-auto-item{display:flex;gap:8px;align-items:flex-start;min-width:0;padding:6px 9px;border:1px solid #d8e2c4;border-radius:8px;background:var(--sage);font-size:12px;line-height:1.35;color:#3f5546}
.hz-auto-item>span{min-width:0}
.hz-auto-item .icon{width:15px;height:15px;margin-top:1px;color:var(--green)}
.hz-auto-item strong{display:flex;align-items:center;gap:6px;margin-bottom:1px;font-size:12px;font-weight:650;color:var(--forest)}
.hz-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6f9a45;box-shadow:0 0 0 3px #d4ebaa;flex-shrink:0}
.hz-next{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #dcd2e9;border-radius:10px;background:var(--lavender);color:#5f5375}
.hz-next>.icon{width:19px;height:19px}
.hz-next span{display:block;font-size:12px;font-weight:650}
.hz-next strong{display:block;font-size:13px;font-weight:650;line-height:1.3;color:#3f3552}
.hz-next .hz-next-arrow{width:18px;height:18px;margin-left:auto;color:var(--plum)}
.hz-next-then{font-size:12px;font-weight:500;color:#6a5f7d}
.hz-next-then::before{content:"· "}

/* Notas bajo la ventana: el código de color, explicado */
.hz-notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding-left:17px}
.hz-note{display:flex;gap:9px;align-items:center;padding:9px 12px;border:1px solid;border-radius:9px;font-size:12px;line-height:1.4}
.hz-note .icon{width:18px;height:18px}
.hz-note-you{background:#f5f0fb;border-color:#dcd2e9;color:#5a4a70}
.hz-note-agent{background:#eef3e2;border-color:#d3dfbd;color:#3f5a45}

/* Franja de capacidad */
.hz-strip{display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:36px;align-items:start;padding:24px 0;border-block:1px solid var(--line)}
.hz-strip p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.hz-strip p::before{content:"";width:9px;height:9px;margin-top:6px;border-radius:50%;flex-shrink:0}
.hz-strip-you::before{background:#c9b9e2}
.hz-strip-agent::before{background:#b9d38f}
.hz-strip-who::before{background:#9cb879}
.hz-strip strong{font-weight:600;color:#435b3e}

/* Entrada de la ventana (una vez; no en reducido ni al congelar con ?t / ?stage) */
@keyframes hz-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .hz-product{animation:hz-enter 1.05s var(--ease) both}
  .js.hz-reduce .hz-product,.js.hz-freeze .hz-product,.js.hz-static .hz-product{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .hz-product{animation:none}
  .js .hz-motion{display:none}
  .js .hz-static-note{display:block}
  .hz-step,.hz-step b,.hz-motion,.hz-watch .play-circle{transition:none}
}
.hz-reduce .hz-step,.hz-reduce .hz-step b,.hz-reduce .hz-motion,.hz-reduce .hz-watch .play-circle,
.hz-freeze .hz-step,.hz-freeze .hz-step b,.hz-freeze .hz-motion{transition:none}

/* Responsive */
@media (max-width:1180px){
  .hz-hero{gap:34px}
  .hz-title{font-size:clamp(42px,4.4vw,58px)}
}
@media (max-width:960px){
  .hz-hero{grid-template-columns:1fr;gap:40px;padding-block:36px 48px}
  .hz-copy{max-width:600px}
  .hz-strip{grid-template-columns:1fr 1fr;gap:18px 30px}
  .hz-strip-who{grid-column:1/-1}
}
@media (max-width:767.98px){
  .hz-notes{display:none} /* recorte 6: en móvil las insignias «Por tu decisión» y «NUEVA» ya cuentan la relación */
}
@media (max-width:640px){
  .hz-hero{padding-block:28px 44px}
  .hz-product{padding:10px 0 0 8px}
  .hz-backing{inset:0 0 -10px 0;border-radius:22px;transform:rotate(.6deg)}
  .hz-work{padding:10px 10px 12px}
  .hz-bar{padding:6px 10px}
  .hz-bar-ctx{display:none}
  .hz-window-title{white-space:normal;overflow-wrap:anywhere}
  .hz-motion{flex:1 1 100%;margin-left:0}
  .hz-need-main{padding-right:26px}
  .hz-decision-note{flex-basis:100%;margin-left:0}
  .hz-opts{grid-template-columns:1fr}
  .hz-phase{grid-template-columns:22px minmax(0,1fr)}
  .hz-tasks{grid-column:2}
  .hz-auto-list{grid-template-columns:1fr}
  .hz-notes{grid-template-columns:1fr;padding-left:8px}
  .hz-strip{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .hz-next-then{display:block;margin-top:1px}
  .hz-next-then::before{content:none}
  .hz-lead{font-size:17px}
  .hz-lead-2{font-size:15px}
}
@media (max-width:360px){
  .hz-title{font-size:37px}
  .hz-need-text{font-size:12.5px}
  .hz-step{padding:5px 7px;font-size:12px}
  .hz-doc{padding-inline:10px}
  .hz-phase>.hz-phase-glow{inset:-1px -6px}
}