/* Página "Importar paso a paso" — simulador (prefijos pp- y ppx-) */
.pp-who{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.02em; line-height:1.5; font-style:normal; }
.pp-who-tu{ background:#fff3cc; color:#7a5a00; }
.pp-who-chelme{ background:#123f49; color:#fff; }
.pp-who-juntos{ background:#e6f4ef; color:#1f7a55; }
.pp-time{ display:inline-block; padding:3px 10px; border-radius:999px; background:var(--soft); color:var(--petrol); font-size:.72rem; font-weight:700; line-height:1.5; }
.pp-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pp-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.pp-btn-outline{ background:#fff; color:var(--petrol); border:1.5px solid var(--petrol); }
.pp-btn-outline:hover{ background:var(--petrol); color:#fff; }
.ppx-hero-link{ display:inline-block; margin-top:12px; color:#f2c94c; font-weight:800; font-size:.92rem; }
.ppx-hero-link:hover{ text-decoration:underline; }
.ppx-mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; letter-spacing:.02em; }

/* Configuración del caso */
.ppx-config{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; margin:0 auto; }
.ppx-q{ display:flex; flex-direction:column; gap:10px; }
.ppx-q-label{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ppx-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.ppx-seg button{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:0; border-radius:13px; background:transparent; text-align:left; color:var(--petrol); transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.ppx-seg button strong{ font-size:.98rem; }
.ppx-seg button small{ font-size:.78rem; color:var(--muted); line-height:1.35; }
.ppx-seg button:hover{ background:var(--soft); }
.ppx-seg button.is-on{ background:var(--petrol); color:#fff; box-shadow:0 10px 24px rgba(18,63,73,.22); }
.ppx-seg button.is-on small{ color:rgba(255,255,255,.75); }
.ppx-seg button:focus-visible,.ppx-step:focus-visible,.ppx-arrow:focus-visible,.ppx-play:focus-visible,.ppx-pays button:focus-visible{ outline:3px solid #f2b91f; outline-offset:2px; }

.ppx-summary{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 18px; max-width:980px; margin:18px auto 0; color:var(--petrol); font-size:.9rem; }
.ppx-summary strong{ font-size:1rem; }
.ppx-summary span{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.ppx-summary span:last-child{ font-weight:600; color:var(--muted); }

/* Escenario: visual fijo + lista de pasos */
.ppx-stage{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:start; margin-top:30px; }
.ppx-visual{ position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; padding:22px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }

.ppx-route{ padding:6px 4px 0; }
.ppx-track{ position:relative; height:4px; margin:22px 0 12px; border-radius:2px; background:repeating-linear-gradient(90deg,#c9d8da 0 8px,transparent 8px 14px); }
.ppx-track-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px; background:linear-gradient(90deg,#f2b91f,var(--petrol)); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.ppx-marker{ position:absolute; top:50%; left:0; width:44px; height:22px; transform:translate(-50%,-50%); transition:left .7s cubic-bezier(.2,.8,.2,1); }
.ppx-marker svg{ width:44px; height:22px; fill:var(--petrol); stroke:rgba(255,255,255,.35); stroke-width:1; }
.ppx-marker svg path:first-of-type{ stroke:#f2b91f; stroke-width:2; }
.ppx-marker.is-sea{ animation:ppxBob 1.8s ease-in-out infinite; }
@keyframes ppxBob{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,-62%) rotate(-2deg); } }
.ppx-nodes{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.ppx-node{ font-size:.74rem; font-weight:700; color:#5b6c70; transition:color .3s ease; }
.ppx-node.is-past{ color:var(--petrol); }
.ppx-node.is-on{ color:var(--petrol); font-weight:800; }
.ppx-node.is-on::before{ content:""; display:block; width:8px; height:8px; margin:0 auto 4px; border-radius:50%; background:#f2b91f; }

.ppx-scene{ position:relative; min-height:330px; display:flex; flex-direction:column; gap:12px; }
.ppx-scene.is-in > *{ animation:ppxIn .45s ease both; }
.ppx-scene.is-in > *:nth-child(2){ animation-delay:.06s; }
@keyframes ppxIn{ from{ opacity:.001; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ppx-scene-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.ppx-photo{ margin:0; position:relative; border-radius:16px; overflow:hidden; background:var(--soft); }
.ppx-photo img{ width:100%; height:300px; object-fit:cover; }
.ppx-photo figcaption{ position:absolute; left:12px; bottom:12px; padding:5px 10px; border-radius:8px; background:rgba(10,46,53,.78); color:#fff; font-size:.76rem; font-weight:600; }

.ppx-doc{ display:flex; flex-direction:column; gap:12px; padding:20px; min-height:260px; box-sizing:border-box; border-radius:16px; background:linear-gradient(180deg,#f7fafa,#fff); border:1px solid var(--line); }
.ppx-doc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px dashed #cfdcde; color:var(--petrol); }
.ppx-doc-head strong{ font-size:1.1rem; }
.ppx-doc-head .ppx-mono{ color:var(--muted); }
.ppx-doc-row{ display:flex; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--ink); }
.ppx-doc-row span:last-child{ color:var(--petrol); font-weight:700; text-align:right; }
.ppx-doc-row.is-aside{ padding:10px 12px; border-radius:10px; background:#fff8e4; }
.ppx-doc-row.is-aside span:last-child{ color:#7a5a00; }
.ppx-chips{ display:flex; gap:6px; }
.ppx-chips span{ padding:6px 12px; border-radius:8px; border:1.5px solid var(--line); font-weight:800; font-size:.85rem; color:var(--muted); }
.ppx-chips .is-on{ border-color:var(--petrol); color:var(--petrol); background:var(--soft); }
.ppx-meter{ height:14px; border-radius:7px; background:var(--soft); overflow:hidden; }
.ppx-meter span{ display:block; height:100%; width:var(--v); border-radius:7px; background:linear-gradient(90deg,#f2b91f,#d7aa28); animation:ppxGrow 1s ease both; }
@keyframes ppxGrow{ from{ width:0; } }
.ppx-flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ppx-flow li{ position:relative; padding:10px 12px 10px 38px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:.9rem; font-weight:600; color:var(--ink); }
.ppx-flow li::before{ content:""; position:absolute; left:12px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; border:2px solid #c9d8da; box-sizing:border-box; }
.ppx-flow li.is-done::before{ border-color:#1f7a55; background:#1f7a55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.ppx-flow li.is-now{ border-color:#f2b91f; background:#fffaf0; }
.ppx-flow li.is-now::before{ border-color:#f2b91f; box-shadow:0 0 0 4px rgba(242,185,31,.25); animation:ppxPulse 1.6s ease-in-out infinite; }
@keyframes ppxPulse{ 50%{ box-shadow:0 0 0 7px rgba(242,185,31,.08); } }
.ppx-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ppx-list li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; }
.ppx-check{ width:20px; height:20px; border-radius:6px; background:#1f7a55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat; flex:none; }
.ppx-choice{ display:flex; flex-direction:column; gap:8px; }
.ppx-choice span{ padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-weight:700; color:var(--muted); }
.ppx-choice .is-on{ border-color:var(--petrol); background:var(--petrol); color:#fff; }
.ppx-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ppx-cal span{ display:grid; place-items:center; height:34px; border-radius:8px; background:var(--soft); font-size:.8rem; font-weight:700; color:var(--muted); }
.ppx-cal .is-on{ background:#f2b91f; color:#3b2c00; box-shadow:0 6px 14px rgba(242,185,31,.35); }
.ppx-box{ display:flex; flex-direction:column; justify-content:center; gap:6px; height:120px; border-radius:10px; background:linear-gradient(135deg,#d9b27a,#c89a5b); color:#3b2a12; text-align:center; font-weight:700; box-shadow:inset 0 0 0 2px rgba(59,42,18,.15); }
.ppx-waves{ position:relative; height:64px; border-radius:10px; overflow:hidden; background:linear-gradient(180deg,#eaf3f4 0 55%,#cfe2e5 55%); }
.ppx-waves::after{ content:""; position:absolute; left:0; right:0; top:55%; height:10px; margin-top:-5px; background:radial-gradient(circle at 10px -4px,transparent 9px,#cfe2e5 10px) 0 0/20px 10px repeat-x; animation:ppxWave 3s linear infinite; }
@keyframes ppxWave{ to{ background-position:20px 0; } }
.ppx-ship{ position:absolute; left:18%; top:50%; width:74px; height:22px; margin-top:-17px; border-radius:2px 2px 10px 10px; background:var(--petrol); box-shadow:inset 0 -5px 0 #0a2e35; animation:ppxSail 7s ease-in-out infinite alternate; }
.ppx-ship::before{ content:""; position:absolute; left:10px; bottom:100%; width:46px; height:10px; background:linear-gradient(90deg,#d7aa28 0 30%,#1d5b66 30% 65%,#b83232 65%); }
@keyframes ppxSail{ to{ left:62%; } }
.ppx-stamp{ align-self:flex-start; margin-top:4px; padding:8px 12px; border:2px solid #1f7a55; border-radius:8px; color:#1f7a55; font-weight:800; font-size:.82rem; transform:rotate(-2deg); }

.ppx-controls{ display:flex; align-items:center; gap:10px; }
.ppx-arrow{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--petrol); background:#fff; color:var(--petrol); font-size:1.1rem; font-weight:800; }
.ppx-arrow:hover:not(:disabled){ background:var(--petrol); color:#fff; }
.ppx-arrow:disabled{ opacity:.35; cursor:default; }
.ppx-count{ min-width:92px; text-align:center; font-weight:800; color:var(--petrol); font-size:.9rem; font-variant-numeric:tabular-nums; }
.ppx-play{ margin-left:auto; height:42px; padding:0 18px; border-radius:999px; border:0; background:#f2b91f; color:#3b2c00; font-weight:800; }
.ppx-play:hover{ background:#e5ab10; }

.ppx-pays{ display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.ppx-pays-label{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ppx-pays ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; counter-reset:pay; }
.ppx-pays li{ counter-increment:pay; }
.ppx-pays button{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 6px; border-radius:999px; border:1px solid #f0d98a; background:#fffaf0; color:#7a5a00; font-size:.8rem; font-weight:700; }
.ppx-pays button::before{ content:counter(pay); display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#f2b91f; color:#3b2c00; font-size:.7rem; font-weight:800; }
.ppx-pays button:hover{ border-color:#f2b91f; }

/* Lista de pasos */
.ppx-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ppx-phase{ margin:10px 0 2px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ppx-phase:first-child{ margin-top:0; }
.ppx-step{ width:100%; display:grid; grid-template-columns:36px 1fr; gap:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:#fff; text-align:left; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ppx-step:hover{ border-color:#c9d8da; box-shadow:0 8px 22px rgba(18,63,73,.07); }
.ppx-num{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--petrol); font-weight:800; font-size:.9rem; transition:background .2s ease, color .2s ease; }
.ppx-step.is-past .ppx-num{ background:#1f7a55; color:#fff; }
.ppx-step.is-active{ border-color:#f2b91f; background:linear-gradient(180deg,#fffaf0,#fff); box-shadow:0 12px 30px rgba(18,63,73,.1); }
.ppx-step.is-active .ppx-num{ background:var(--petrol); color:#fff; box-shadow:0 0 0 4px rgba(242,185,31,.35); }
.ppx-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ppx-body strong{ margin-top:4px; color:var(--petrol); font-size:1rem; }
.ppx-text{ color:var(--muted); font-size:.9rem; line-height:1.5; }
.ppx-extra{ display:flex; flex-wrap:wrap; gap:6px; }
.ppx-extra:empty{ display:none; }
.ppx-pay,.ppx-get{ padding:3px 10px; border-radius:8px; font-size:.76rem; font-weight:700; }
.ppx-pay{ background:#fff3cc; color:#7a5a00; }
.ppx-get{ background:#e6f4ef; color:#1f7a55; }
.ppx-step:not(.is-active) .ppx-text,.ppx-step:not(.is-active) .ppx-extra{ display:none; }
.ppx-noscript{ text-align:center; color:var(--muted); }

@media (max-width:900px){
  .ppx-config{ grid-template-columns:1fr; }
  .ppx-stage{ grid-template-columns:1fr; gap:18px; }
  .ppx-visual{ position:relative; top:auto; padding:16px; border-radius:20px; scroll-margin-top:84px; }
  .ppx-scene{ min-height:0; }
  .ppx-photo img{ height:220px; }
  .ppx-doc{ min-height:0; padding:16px; }
  .ppx-node{ font-size:.66rem; }
}
@media (max-width:420px){
  .ppx-seg{ grid-template-columns:1fr; }
  .ppx-controls{ flex-wrap:wrap; }
  .ppx-count{ flex:1; }
  .ppx-play{ order:4; width:100%; margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .ppx-track-fill,.ppx-marker{ transition:none; }
  .ppx-marker.is-sea,.ppx-flow li.is-now::before,.ppx-meter span,.ppx-waves::after,.ppx-ship{ animation:none; }
  .ppx-scene.is-in > *{ animation:none; }
}