/* p-metodo.css · R9 lote 2 · /metodo, /automatizaciones y las 8 páginas de proceso. Prefijo .mt-
   Regla: el estado por defecto es el FINAL (sin JS o con «reducir movimiento» se ve todo quieto y entero).
   Los estados de partida cuelgan de html.js:not(.quieto). Solo se anima transform, opacity y clip-path. */

/* ---------- base ---------- */
.mt-dos{display:grid;gap:40px;align-items:center}
.mt-dos>*{min-width:0}
@media (min-width:900px){.mt-dos{grid-template-columns:5fr 6fr;gap:72px}.mt-dos.inv>:first-child{order:2}.mt-dos.arriba{align-items:start}}
.mt-pie{margin:16px 0 0;font-size:16px;line-height:1.5;color:var(--tenue)}
.mt-ir{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:12px;font-size:17px;font-weight:600;color:var(--acero);text-decoration:none}
.mt-ir::after{content:"\2192";transition:transform .3s var(--ease)}
.mt-ir:hover::after{transform:translateX(4px)}
.mt-ir:focus-visible{outline:2px solid var(--acero);outline-offset:3px;border-radius:6px}
@media (min-width:900px){.mt-ir{min-height:40px}}
.mt-tag{display:inline-grid;place-items:center;height:26px;padding:0 10px;border-radius:13px;background:var(--bruma);color:var(--acero);font-size:13px;font-weight:600;font-style:normal;white-space:nowrap}
.mt-tag.ok{background:#E6F4EA;color:#137333}
.mt-tag.ojo{background:#FDF0D5;color:#7A4E00}
.mt-tag.ti{background:var(--ink);color:#fff}
.mt-sticky{align-self:start}
@media (min-width:900px){.mt-sticky{position:sticky;top:calc(var(--nav) + 48px)}}

/* m1 · sube al entrar */
html.js:not(.quieto) .mt-sube{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
html.js:not(.quieto) .mt-sube.ve{opacity:1;transform:none}
/* m8 · se escribe de arriba abajo */
html.js:not(.quieto) .mt-escribe{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.5,0,.2,1)}
html.js:not(.quieto) .mt-escribe.ve{clip-path:inset(0 0 0 0)}
/* m2 · PAL del H1 */
html.js:not(.quieto) .mt-pal:not(.lista){opacity:0;animation:mt-asoma 0s 2.4s forwards}
html.js:not(.quieto) .mt-pal .mt-p{display:inline-block;opacity:0;transform:translateY(.42em);transition:opacity .55s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*50ms + 60ms)}
html.js:not(.quieto) .mt-pal.ve .mt-p{opacity:1;transform:none}
@keyframes mt-asoma{to{opacity:1}}

/* ---------- foto ---------- */
.mt-foto{position:relative;margin:0;border-radius:24px;overflow:hidden;background:var(--bruma);aspect-ratio:4/5}
.mt-foto.ancha{aspect-ratio:1200/929}
.mt-foto.alta{aspect-ratio:3/4}
.mt-foto img{display:block;width:100%;height:100%;object-fit:cover}
html.js:not(.quieto) .mt-foto img{transform:scale(1.1);transition:transform 1.6s var(--ease)}
html.js:not(.quieto) .mt-foto.ve img{transform:scale(1)}
.mt-cab-foto{max-width:440px;width:100%;justify-self:center}

/* ---------- marco de app para las demos propias ---------- */
.mt-demo{width:100%;max-width:460px;margin-inline:auto}
.mt-demo .esc-demo{width:100%}
.mt-app{position:relative;width:100%;max-width:460px;margin-inline:auto;padding:7px;border-radius:30px;background:var(--demo);box-shadow:inset 0 0 0 1px rgba(29,29,31,.06),0 30px 60px -38px rgba(29,29,31,.3);color:var(--ink)}
.mt-app-in{border-radius:23px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 1px 2px rgba(29,29,31,.05)}
.mt-app-top{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 16px;border-bottom:1px solid #ECECEF}
.mt-app-top b{margin-right:auto;font-size:16px;font-weight:700;letter-spacing:-.01em}
.mt-app-top small{font-size:13px;color:#6E6E73}
.mt-av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#FBE3A8;font-size:13px;font-weight:700}

/* m9 · chip que gira de «A mano» a «Solo» (el padre lleva .on) */
.mt-chip{position:relative;display:inline-grid;flex:none;perspective:320px;font-size:13px;font-weight:600;line-height:1}
.mt-chip>b{grid-area:1/1;display:grid;place-items:center;height:30px;padding:0 12px;border-radius:15px;white-space:nowrap;backface-visibility:hidden;transition:transform .6s var(--ease),opacity .3s var(--ease)}
.mt-chip .a{background:#F1F2F4;color:#5F5F64;transform:rotateX(180deg);opacity:0}
.mt-chip .d{background:#E6F4EA;color:#137333}
.ti .mt-chip .d{background:var(--ink);color:#fff}
html.js:not(.quieto) :not(.on)>.mt-chip .a{transform:none;opacity:1}
html.js:not(.quieto) :not(.on)>.mt-chip .d{transform:rotateX(-180deg);opacity:0}

/* ---------- FILAS · antes y ahora ---------- */
.mt-filas{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:10px;max-width:760px}
.mt-filas li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:14px 14px 14px 20px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 12px 26px -22px rgba(29,29,31,.45);font-size:17px;line-height:1.35}
.mt-filas li.ti{box-shadow:0 0 0 1.5px var(--ink),0 12px 26px -22px rgba(29,29,31,.45)}
/* sellos «A mano» (/metodo) */
.mt-sellos li{position:relative;display:block;padding:18px 128px 18px 20px}
.mt-sello{position:absolute;right:16px;top:50%;margin-top:-16px;display:grid;place-items:center;height:32px;padding:0 12px;border:2px solid var(--acero);border-radius:8px;color:var(--acero);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-7deg);transition:opacity .2s,transform .45s cubic-bezier(.16,1,.3,1)}
html.js:not(.quieto) .mt-sellos li:not(.on) .mt-sello{opacity:0;transform:rotate(-7deg) scale(1.9)}
@media (max-width:520px){.mt-sellos li{padding:16px 16px 56px}.mt-sello{top:auto;bottom:14px;right:auto;left:18px;margin:0}}

/* ---------- LINEA · el camino entero (m4) ---------- */
.mt-linea{position:relative;list-style:none;margin:0;padding:0;max-width:620px;--p:1}
.mt-linea::before,.mt-linea::after{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;border-radius:1px;background:var(--linea)}
.mt-linea::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--p))}
.mt-linea li{position:relative;padding:2px 0 34px 54px;font-size:17px;line-height:1.45;color:var(--tenue)}
.mt-linea li:last-child{padding-bottom:0}
.mt-linea li b{display:block;margin-bottom:2px;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.mt-linea li::before,.mt-linea li::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%}
.mt-linea li::before{background:#fff;box-shadow:inset 0 0 0 2px var(--apagado)}
.mt-linea li::after{background:var(--ink);box-shadow:0 0 0 5px var(--bruma);transition:transform .45s cubic-bezier(.16,1,.3,1)}
html.js:not(.quieto) .mt-linea li:not(.on)::after{transform:scale(0)}

/* ---------- REGLA · máscara a lo ancho (m4) ---------- */
.mt-regla-sec{background:var(--ink);color:#fff}
.mt-regla{margin:0;max-width:1040px;font-size:clamp(30px,4.6vw,58px);line-height:1.12;letter-spacing:-.03em;font-weight:600}
.mt-regla .mt-w{transition:opacity .35s}
html.js:not(.quieto) .mt-regla.lista .mt-w:not(.on){opacity:0}
.mt-regla-sub{margin:28px 0 0;font-size:18px;line-height:1.5;color:#A1A1A6}

/* ---------- ETIQ · foto con etiquetas que caen ---------- */
.mt-etiq{position:relative}
.mt-etiq-l{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.mt-etiq-l li{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.95);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 12px 26px -12px rgba(5,5,5,.5);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d)*130ms + 200ms)}
.mt-etiq-l li::before{content:"";position:absolute;inset:-4px;border-radius:22px;box-shadow:0 0 0 3px var(--cielo-hondo);opacity:0;transition:opacity .4s}
.mt-etiq-l li.on{transform:scale(1.1);transition-delay:0s}
.mt-etiq-l li.on::before{opacity:1}
html.js:not(.quieto) .mt-etiq:not(.ve) li{opacity:0;transform:translateY(-44px)}

/* ---------- MARCAS · qué necesito de ti ---------- */
.mt-marcas{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.mt-marcas li{position:relative;min-height:60px;padding:16px 18px 16px 58px;border-radius:16px;background:#fff;font-size:17px;line-height:1.4;box-shadow:0 0 0 1px rgba(29,29,31,.07)}
.mt-marcas li::before{content:"";position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:#E6F4EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23137333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0)*160ms + 250ms)}
html.js:not(.quieto) .mt-marcas:not(.ve) li::before{transform:scale(0) rotate(-40deg)}

/* ---------- PREG · las 4 preguntas ---------- */
.mt-preg{max-width:640px;padding:22px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 30px 60px -44px rgba(29,29,31,.45)}
.mt-preg-tarea{display:grid;gap:4px;margin:0 0 14px;padding:0 6px 16px;border-bottom:1px solid var(--linea)}
.mt-preg-tarea small{font-size:13px;font-weight:600;color:var(--tenue)}
.mt-preg-tarea b{font-size:19px;line-height:1.3;letter-spacing:-.01em}
.mt-preg ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mt-preg li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:10px 12px;border-radius:14px;font-size:16px;line-height:1.35;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.mt-preg li::before{content:"";position:absolute;inset:0;border-radius:14px;background:var(--cielo);opacity:0;transition:opacity .45s}
.mt-preg li>*{position:relative}
.mt-preg li b{flex:none;max-width:48%;text-align:right;font-size:15px;color:var(--acero)}
.mt-preg li.foco::before{opacity:.38}
html.js:not(.quieto) .mt-preg li:not(.on){opacity:0;transform:translateY(16px)}
.mt-preg-fin{display:flex;margin:16px 6px 2px}
.mt-preg-fin span{display:grid;place-items:center;height:36px;padding:0 16px;border-radius:18px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;transform:rotate(-3deg);transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1)}
html.js:not(.quieto) .mt-preg:not(.fin) .mt-preg-fin span{opacity:0;transform:rotate(-3deg) scale(1.7)}
@media (max-width:520px){.mt-preg li{flex-direction:column;align-items:flex-start;gap:4px}.mt-preg li b{max-width:none;text-align:left}}

/* ---------- RP · el reporte (§5) ---------- */
.mt-rp{position:relative;margin-top:36px;padding:24px 22px 26px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 40px 80px -50px rgba(29,29,31,.45)}
.mt-rp-foco{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;background:var(--cielo);opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .4s}
.mt-rp.fin .mt-rp-foco{opacity:.4}
.mt-rp-t{position:relative;z-index:1;width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.mt-rp-t caption{caption-side:top;text-align:left;padding:0 0 18px}
.mt-rp-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-rp-cab b{font-size:22px;letter-spacing:-.015em}
.mt-rp-t caption small{display:block;margin-top:6px;font-size:15px;color:var(--tenue)}
.mt-rp-t caption small span+span::before{content:"\00B7";margin:0 6px}
.mt-rp-t th,.mt-rp-t td{padding:16px 12px;text-align:left;vertical-align:middle}
.mt-rp-t thead th{padding-top:10px;padding-bottom:10px;font-size:13px;font-weight:600;color:var(--tenue);border-bottom:1px solid var(--linea)}
.mt-rp-t tbody tr{border-bottom:1px solid #ECECEF}
.mt-rp-t tbody tr:last-child{border-bottom:0}
.mt-rp-t tbody th{font-weight:600;font-size:16px}
.mt-rp-t tr.mano th,.mt-rp-t tr.mano td{color:var(--tenue)}
.mt-prio{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mt-prio i{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 9px;border-radius:14px;background:var(--bruma);color:var(--acero);font-size:13px;font-weight:700;font-style:normal;transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1)}
.mt-prio .uno{background:var(--ink);color:#fff}
.mt-prio .mano{background:transparent;box-shadow:inset 0 0 0 1.5px var(--apagado);color:var(--tenue)}
.mt-prio em{display:inline-grid;place-items:center;height:28px;padding:0 10px;border:2px solid var(--ink);border-radius:8px;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg);transition:opacity .2s,transform .5s cubic-bezier(.16,1,.3,1)}
.mt-rp-pie{position:relative;z-index:1;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--linea);font-size:17px;line-height:1.5;transition:clip-path 1.3s cubic-bezier(.5,0,.2,1)}
html.js:not(.quieto) .mt-rp.prep tbody tr>*{transition:clip-path .75s cubic-bezier(.5,0,.2,1)}
html.js:not(.quieto) .mt-rp.prep tbody tr:not(.ve)>*{clip-path:inset(0 100% 0 0)}
html.js:not(.quieto) .mt-rp.prep tbody tr:not(.sella) .mt-prio i{opacity:0;transform:scale(1.9) rotate(-10deg)}
html.js:not(.quieto) .mt-rp.prep:not(.fin) .mt-prio em{opacity:0;transform:rotate(-6deg) scale(2)}
html.js:not(.quieto) .mt-rp.prep:not(.fin) .mt-rp-pie{clip-path:inset(0 100% 0 0)}
@media (max-width:719.98px){
  .mt-rp{padding:20px 12px 18px}
  .mt-rp-foco{display:none}
  .mt-rp-t,.mt-rp-t tbody,.mt-rp-t tr,.mt-rp-t th,.mt-rp-t td,.mt-rp-t caption{display:block}
  .mt-rp-t caption{padding:0 6px 16px}
  .mt-rp-t thead{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
  .mt-rp-t tbody tr{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:10px;padding:16px 14px;border:0;border-radius:18px;box-shadow:0 0 0 1px rgba(29,29,31,.09)}
  .mt-rp-t tbody tr:last-child{margin-bottom:0}
  .mt-rp-t tbody tr::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;background:var(--cielo);opacity:0;transition:opacity .45s}
  .mt-rp-t tbody tr.foco::before{opacity:.4}
  .mt-rp-t tbody th{grid-column:1/-1;padding:0;font-size:18px}
  .mt-rp-t td{padding:0;font-size:15px}
  .mt-rp-t td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:600;color:var(--tenue)}
  .mt-rp-t td.prio{grid-column:1/-1}
  .mt-rp-pie{font-size:16px;margin:16px 6px 0}
}

/* ---------- COLS · pasa solo / se queda a mano (m6) ---------- */
.mt-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:32px}
.mt-col{padding:16px 12px 14px;border-radius:20px;background:var(--gris)}
.mt-col.mano{background:var(--bruma)}
.mt-col h3{margin:0 0 12px 4px;font-size:15px;font-weight:700;letter-spacing:0}
.mt-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-col li{min-height:48px;padding:12px;border-radius:12px;background:#fff;font-size:16px;line-height:1.3;box-shadow:0 1px 2px rgba(29,29,31,.08),0 8px 18px -14px rgba(29,29,31,.35)}
.mt-col li[data-va="mano"]{box-shadow:0 0 0 1.5px var(--ink)}

/* ---------- CONF · el primer mes ---------- */
.mt-conf{max-width:620px;padding:24px 22px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 30px 60px -44px rgba(29,29,31,.45)}
.mt-conf-pila{display:flex;gap:8px;height:64px;margin-bottom:18px}
.mt-conf-pila i{flex:none;width:46px;height:60px;border-radius:9px;background:#DCEBF6 linear-gradient(#D2D2D7,#D2D2D7) 9px 14px/26px 3px no-repeat,linear-gradient(#E5E5EA,#E5E5EA) 9px 24px/20px 3px no-repeat,linear-gradient(#E5E5EA,#E5E5EA) 9px 34px/24px 3px no-repeat;box-shadow:0 0 0 1px rgba(29,29,31,.1),0 8px 16px -12px rgba(29,29,31,.4);transition:opacity .45s,transform .55s var(--ease)}
.mt-conf:not([data-e]) .mt-conf-pila i:nth-child(n+2),.mt-conf[data-e="3"] .mt-conf-pila i:nth-child(n+2),.mt-conf[data-e="2"] .mt-conf-pila i:nth-child(n+4){opacity:0;transform:translateY(-14px) scale(.9)}
.mt-conf-barra{height:8px;border-radius:4px;background:var(--linea);overflow:hidden}
.mt-conf-barra i{display:block;height:100%;border-radius:4px;background:var(--ink);transform-origin:left;transform:scaleX(1);transition:transform .9s var(--ease)}
.mt-conf[data-e="1"] .mt-conf-barra i{transform:scaleX(.3333)}
.mt-conf[data-e="2"] .mt-conf-barra i{transform:scaleX(.6667)}
.mt-conf ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mt-conf li{position:relative;display:grid;gap:2px;padding:10px;border-radius:12px}
.mt-conf li::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--cielo);opacity:0;transition:opacity .45s}
.mt-conf li>*{position:relative}
.mt-conf li b{font-size:16px;line-height:1.25}
.mt-conf li small{font-size:13px;color:var(--tenue)}
.mt-conf:not([data-e]) li:last-child::before,.mt-conf[data-e="1"] li:nth-child(1)::before,.mt-conf[data-e="2"] li:nth-child(2)::before,.mt-conf[data-e="3"] li:nth-child(3)::before{opacity:.38}

/* ---------- DOC · propuesta que se rellena (m8) ---------- */
.mt-doc-l{margin:0;padding:18px 18px 6px;display:grid;gap:12px}
.mt-doc-l div{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px dashed #E3E3E8}
.mt-doc-l dt{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6E6E73}
.mt-doc-l dd{margin:0;font-size:16px;line-height:1.35;transition:clip-path 1s steps(18,end)}
html.js:not(.quieto) .mt-doc-l div:not(.on) dd{clip-path:inset(0 100% 0 0)}
.mt-doc-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:12px 18px 18px;transition:opacity .4s,transform .5s var(--ease)}
.mt-doc-pie span{display:grid;place-items:center;height:36px;padding:0 16px;border-radius:18px;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
html.js:not(.quieto) .mt-doc:not(.lista) .mt-doc-pie{opacity:0;transform:translateY(10px)}

/* ---------- CHECK · el primer día (m8) ---------- */
.mt-check-l{list-style:none;margin:0;padding:10px 12px 8px;display:grid;gap:4px}
.mt-check-l li{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 10px;border-radius:12px;font-size:16px;line-height:1.3}
.mt-cb{position:relative;flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1.6px var(--apagado)}
.mt-cb::before{content:"";position:absolute;inset:0;border-radius:7px;background:#34A853;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.mt-cb svg{position:absolute;left:4px;top:4px;color:#fff;transition:clip-path .3s .12s}
html.js:not(.quieto) .mt-check-l li:not(.on) .mt-cb::before{transform:scale(0)}
html.js:not(.quieto) .mt-check-l li:not(.on) .mt-cb svg{clip-path:inset(0 100% 0 0)}
.mt-check-l li.ti{background:var(--bruma)}
.mt-check-l li.ti em{margin-left:auto;transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1)}
html.js:not(.quieto) .mt-check-l li.ti:not(.on) em{opacity:0;transform:scale(1.7)}
.mt-check-barra{height:6px;margin:6px 22px 20px;border-radius:3px;background:#ECECEF;overflow:hidden}
.mt-check-barra i{display:block;height:100%;background:#34A853;transform-origin:left;transform:scaleX(1);transition:transform .6s var(--ease)}

/* ---------- HOJA · hoja mini que se escribe sola ---------- */
.mt-hoja-t{padding:6px 10px 6px}
.mt-hoja-t>span{display:grid;grid-template-columns:1.25fr .8fr 1.05fr;align-items:center;gap:8px;min-height:50px;padding:0 8px;border-bottom:1px solid #ECECEF;font-size:15px}
.mt-hoja-t>span:last-child{border-bottom:0}
.mt-hoja-t .cab{min-height:38px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6E6E73}
.mt-hoja-t i{min-width:0;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-hoja-t .vieja{color:#6E6E73}
.mt-hoja-t .fila{transition:clip-path .9s steps(16,end)}
html.js:not(.quieto) .mt-hoja-t .fila:not(.on){clip-path:inset(0 100% 0 0)}
.mt-hoja-aviso{display:flex;align-items:center;gap:10px;margin:4px 12px 14px;padding:10px 12px;border-radius:14px;background:var(--gris);font-size:14px;transition:opacity .4s,transform .5s var(--ease)}
html.js:not(.quieto) .mt-hoja:not(.lista) .mt-hoja-aviso{opacity:0;transform:translateY(10px)}

/* ---------- DK de 4 columnas y tarjeta quieta que se marca ---------- */
.mt-dk4 .dk-col{left:calc(var(--c)*(100% + 6px)/4);width:calc((100% - 18px)/4)}
.mt-dk4 .dk-card{width:calc((100% - 18px)/4 - 10px);transform:translate(calc(var(--c)*(100% + 16px)),calc(var(--r)*var(--ck)))}
@media (max-width:520px){.mt-dk4 .dk-n{display:none}.mt-dk4 .dk-col b{font-size:12px}}
.dk-card::after{content:"";position:absolute;inset:-3px;border-radius:12px;box-shadow:0 0 0 2px #E8A33D;opacity:0;transition:opacity .4s}
.dk-card.marca::after{opacity:1}
.dk-card.marca{scale:1.04}

/* ---------- «Lo que haces tú» ---------- */
.mt-tu-txt{margin:0;max-width:20em;font-size:clamp(26px,3.4vw,40px);line-height:1.18;letter-spacing:-.025em;font-weight:600}
.mt-tu-vis{position:relative;display:grid;place-items:center;min-height:260px}
.mt-tu-av{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--ink);color:#fff;font-size:28px;font-weight:700;letter-spacing:-.02em}
.mt-tu-av i{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--cielo-hondo);opacity:0}
html.js:not(.quieto) .mt-tu-av i{animation:mt-onda 2.8s cubic-bezier(.2,.6,.3,1) infinite}
html.js:not(.quieto) .mt-tu-av i+i{animation-delay:1.4s}
@keyframes mt-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.mt-foto .mt-tu-av{position:absolute;left:18px;bottom:18px;width:72px;height:72px;font-size:20px}

/* ---------- vivo · foto + chat (Y después) ---------- */
.mt-vivo{display:grid;width:100%;max-width:460px;margin-inline:auto}
.mt-vivo>*{grid-area:1/1}
.mt-vivo .mt-foto{justify-self:start;align-self:start;width:56%}
.mt-vivo .esc-demo{justify-self:end;align-self:start;width:80%;height:390px;margin-top:96px}

/* ---------- LIBRO pequeño ---------- */
.mt-libro{display:grid;place-items:center;min-height:300px;border-radius:24px;background:var(--bruma)}
.mt-libro .libro-escena{--pw:150px;--g:10px;margin:0;padding:30px 0 40px}

/* ---------- FICHA · los procesos (m9) ---------- */
.mt-fichas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mt-ficha{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 16px;min-height:96px;padding:18px 18px 18px 16px;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 14px 30px -24px rgba(29,29,31,.45);transition:transform .4s var(--ease)}
a.mt-ficha:hover{transform:translateY(-3px)}
a.mt-ficha:focus-visible{outline:2px solid var(--acero);outline-offset:3px}
.mt-ficha .mt-chip{grid-row:1/3;min-width:76px}
.mt-ficha .mt-chip>b{width:100%}
.mt-ficha-n{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.mt-ficha-l{grid-column:2;font-size:16px;line-height:1.35;color:var(--tenue)}
.mt-ficha-ir{grid-column:3;grid-row:1/3;font-size:20px;color:var(--acero);transition:transform .3s var(--ease)}
a.mt-ficha:hover .mt-ficha-ir{transform:translateX(4px)}
.mt-ficha.sin{background:transparent;box-shadow:inset 0 0 0 1px var(--linea)}
@media (min-width:900px){.mt-ficha{min-height:104px;padding:20px 22px 20px 18px}}

/* ---------- TARJ · tarjeta enlace con mini demo ---------- */
.mt-tarjs{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
@media (min-width:720px){.mt-tarjs{grid-template-columns:repeat(3,1fr)}.mt-tarjs.dos{grid-template-columns:repeat(2,1fr);max-width:820px}}
.mt-tarj{display:flex;flex-direction:column;gap:6px;height:100%;padding:10px 10px 22px;border-radius:22px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 20px 40px -30px rgba(29,29,31,.4);transition:transform .4s var(--ease)}
.mt-tarj:hover{transform:translateY(-4px)}
.mt-tarj:focus-visible{outline:2px solid var(--acero);outline-offset:3px}
.mt-tarj>b{margin:12px 10px 0;font-size:19px;letter-spacing:-.01em}
.mt-tarj>span:last-child{margin:0 10px;font-size:16px;line-height:1.4;color:var(--tenue)}
.mt-mini{position:relative;display:block;height:136px;border-radius:14px;background:var(--gris);overflow:hidden}
.mt-mini i{position:absolute;display:block;font-style:normal}
/* chat */
.mini-chat i{height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(29,29,31,.1)}
.mini-chat .m1{right:14px;top:16px;width:46%;background:#D9FDD3}
.mini-chat .m2{left:14px;top:50px;width:60%}
.mini-chat .m3{left:14px;top:84px;width:40%}
/* crm */
.mini-crm .c{top:12px;bottom:12px;width:calc((100% - 40px)/3);border-radius:9px;background:#E6E7EB}
.mini-crm .c1{left:14px}.mini-crm .c2{left:calc(14px + (100% - 40px)/3 + 6px)}.mini-crm .c3{left:calc(14px + 2*((100% - 40px)/3 + 6px))}
.mini-crm .k{left:20px;top:22px;width:calc((100% - 40px)/3 - 12px);height:30px;border-radius:7px;background:#fff;box-shadow:0 4px 10px -6px rgba(29,29,31,.5);transform:translateX(calc(2*(100% + 18px)))}
.mini-crm .k2{top:60px;transform:none}
.mini-crm .k2::after,.mini-crm .k::after{content:"";position:absolute;left:8px;top:12px;width:55%;height:5px;border-radius:3px;background:#D2D2D7}
/* flujo */
.mini-flujo .ln{left:30px;right:30px;top:66px;height:2px;background:#D2D2D7}
.mini-flujo .n{top:54px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #C7C7CC}
.mini-flujo .n1{left:18px}.mini-flujo .n2{left:calc(18px + (100% - 62px)/3)}.mini-flujo .n3{left:calc(18px + 2*(100% - 62px)/3)}.mini-flujo .n4{left:calc(100% - 44px)}
.mini-flujo .v{left:30px;right:30px;top:61px;height:12px}
.mini-flujo .v::after{content:"";position:absolute;left:-6px;top:0;width:12px;height:12px;border-radius:50%;background:var(--ink)}
/* hoja y doc */
.mini-hoja .r{left:14px;right:14px;height:20px;border-radius:5px;background:#fff linear-gradient(#D2D2D7,#D2D2D7) 10px 50%/34% 4px no-repeat}
.mini-hoja .r1{top:16px;background:#E6E7EB}.mini-hoja .r2{top:44px}.mini-hoja .r3{top:72px}.mini-hoja .r4{top:100px}
.mini-hoja .r4{background:#E6F4EA linear-gradient(#9CCFAE,#9CCFAE) 10px 50%/30% 4px no-repeat}
.mini-doc .r{left:22%;right:22%;height:8px;border-radius:4px;background:#D2D2D7}
.mini-doc::before{content:"";position:absolute;left:16%;right:16%;top:12px;bottom:-10px;border-radius:8px 8px 0 0;background:#fff;box-shadow:0 6px 16px -10px rgba(29,29,31,.5)}
.mini-doc .r1{top:28px;right:44%;height:10px;background:var(--ink)}.mini-doc .r2{top:52px}.mini-doc .r3{top:70px;right:30%}.mini-doc .r4{top:88px;right:36%}
html.js:not(.quieto) .mini-chat i{animation:mt-burbuja 4.2s var(--ease) infinite paused}
html.js:not(.quieto) .mini-chat .m2{animation-delay:.7s}
html.js:not(.quieto) .mini-chat .m3{animation-delay:1.4s}
html.js:not(.quieto) .mini-crm .k{animation:mt-tarjeta 4.8s cubic-bezier(.65,0,.35,1) infinite paused}
html.js:not(.quieto) .mini-flujo .v::after{animation:mt-punto 3.6s cubic-bezier(.65,0,.35,1) infinite paused}
html.js:not(.quieto) .mini-flujo .v{animation:mt-viaje 3.6s cubic-bezier(.65,0,.35,1) infinite paused}
html.js:not(.quieto) .mini-hoja .r2,html.js:not(.quieto) .mini-hoja .r3,html.js:not(.quieto) .mini-hoja .r4,html.js:not(.quieto) .mini-doc .r{animation:mt-fila 4s steps(10,end) infinite paused}
html.js:not(.quieto) .mini-hoja .r3,html.js:not(.quieto) .mini-doc .r2{animation-delay:.5s}
html.js:not(.quieto) .mini-hoja .r4,html.js:not(.quieto) .mini-doc .r3{animation-delay:1s}
html.js:not(.quieto) .mini-doc .r4{animation-delay:1.5s}
html.js:not(.quieto) .mt-mini.vivo i,html.js:not(.quieto) .mt-mini.vivo .v::after{animation-play-state:running}
@keyframes mt-burbuja{0%{opacity:0;transform:translateY(10px) scale(.92)}12%,78%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes mt-tarjeta{0%,12%{transform:translateX(0)}35%,50%{transform:translateX(calc(100% + 18px))}73%,100%{transform:translateX(calc(2*(100% + 18px)))}}
@keyframes mt-viaje{0%{transform:translateX(0)}85%,100%{transform:translateX(100%)}}
@keyframes mt-punto{0%,85%{opacity:1}95%,100%{opacity:0}}
@keyframes mt-fila{0%{clip-path:inset(0 100% 0 0)}25%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* reducir movimiento: todo quieto y entero */
@media (prefers-reduced-motion:reduce){.mt-mini *,.mt-tu-av i{animation:none!important}}

/* ---------- añadidos: puntos de la línea, foco de etiquetas y marcas, raya de la regla, libro ---------- */
.mt-linea::after{transition:transform .8s var(--ease)}
.mt-linea li::after{content:none}
.mt-pt{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--bruma);transition:transform .45s var(--ease)}
html.js:not(.quieto) .mt-linea li:not(.on) .mt-pt{transform:scale(0)}
.mt-etiq-l li{isolation:isolate}
.mt-etiq-l li::before{inset:0;z-index:-1;border-radius:18px;background:var(--ink);box-shadow:none}
.mt-etiq-l li.on{color:#fff}
.mt-marcas li{isolation:isolate}
.mt-marcas li::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px;background:var(--cielo);opacity:0;transition:opacity .5s}
.mt-marcas li.foco::after{opacity:.42}
.mt-marca{position:relative;display:inline-block}
.mt-marca::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:.05em;background:var(--cielo);transform-origin:left}
html.js:not(.quieto) .mt-marca::after{animation:mt-raya 3.8s var(--ease) infinite}
@keyframes mt-raya{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}72%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
html.js:not(.quieto) .mt-libro .libro-escena{animation:mt-balanceo 4.6s ease-in-out infinite alternate}
@keyframes mt-balanceo{from{transform:rotate(-4deg) translateY(6px)}to{transform:rotate(4deg) translateY(-10px)}}
.mt-sec-cab{max-width:760px}
.mt-sec-cab p{margin:16px 0 0;font-size:18px;line-height:1.5;color:var(--tenue)}
@media (prefers-reduced-motion:reduce){.mt-marca::after,.mt-libro .libro-escena{animation:none!important}}
/* ---------- añadidos 2: iconos de app, mini crm, fichas, fotos y chip flotante ---------- */
.df-doc{background:#5F6368}.df-agenda{background:#E8710A}.df-persona{background:var(--acero)}.df-llave{background:#B06000}.df-reloj{background:#8E8E93}.df-web{background:var(--ink)}
html.js:not(.quieto) .mini-crm .k2{animation:none}
.mt-ficha-ir::after{content:"\2192"}
.mt-vivo .mt-foto{aspect-ratio:3/5}
.mt-vivo .mt-foto img{object-position:50% 12%}
.mt-foto.entera{aspect-ratio:1200/2328;max-width:300px;margin-inline:auto}
.mt-flota{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:20px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(5,5,5,.5)}
.mt-flota::before{content:"";width:20px;height:20px;border-radius:50%;background:#34A853 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
html.js:not(.quieto) .mt-flota{animation:mt-flota 2.6s ease-in-out infinite alternate}
@keyframes mt-flota{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.mt-cita{margin:24px 0 0;padding-left:20px;border-left:3px solid var(--ink);max-width:720px}
.mt-cita p{margin:0;font-size:clamp(21px,2.4vw,28px);line-height:1.3;letter-spacing:-.015em;font-weight:500}
@media (max-width:520px){.mt-dk4 .dk-card small,.mt-dk4 .dk-card .dk-tag{display:none}}
@media (min-width:900px){.mt-dos.lista-larga{grid-template-columns:4fr 7fr}}
@media (prefers-reduced-motion:reduce){.mt-flota{animation:none!important}}
/* hub: fichas en una columna legible y RP corto (Proceso · ¿Quién lo hace? · Prioridad) */
.mt-fichas{max-width:760px}
@media (min-width:720px){.mt-rp.corto :is(th,td):is(:nth-child(2),:nth-child(4),:nth-child(5)){display:none}}
@media (max-width:719.98px){.mt-rp.corto td:is(:nth-child(2),:nth-child(4),:nth-child(5)){display:none}}
/* R9 L2 · QA: contraste de los pasos pendientes del flujo, letra mínima 12 en la tapa del libro,
   menos letra en las demos de cabecera y en las del hub (≤ 80 palabras por pantalla) y pie del reporte suelto */
html.js:not(.quieto) :is([data-mtd],.mt-demo,#asi,#esc) .df-nodos li:not(.on) .df-t b{color:var(--tenue)}
.mt-libro .tapa-tit{font-size:max(12px,calc((100cqw - 64px)/8))}
.ps-cab .mt-demo :is(.df-hoja-mini,.dk-h,.dk-tag){display:none}
@media (min-width:900px){#asi .esc-demo :is(.dk-h,.dk-tag,.df-t small){display:none}}
.mt-rp-sec2{padding-top:0}
.mt-rp-sec2 .mt-rp-pie{max-width:40ch;margin:0;font-size:clamp(20px,2.4vw,28px);line-height:1.3;color:var(--ink)}
/* letra de lectura a 16 en móvil (las etiquetas en mayúsculas y los sellos se quedan a 12-13) */
@media (max-width:719.98px){
  .mt-etiq-l>li,.mt-col>h3,:is(.mt-preg,.mt-conf) :is(small,b,span),:is(.mt-rp,.mt-rp-cab) :is(td,small,small span){font-size:16px}
}
@media (max-width:719.98px){html body :is(.mt-preg,.mt-conf) li :is(small,b,span){font-size:16px}}
/* «Va bien con»: el foco recorre las tarjetas (se ve que el bloque está vivo) */
.mt-tarj{transition:background-color .5s var(--ease),color .5s var(--ease)}
html.js:not(.quieto) .mt-tarj.foco{background-color:var(--ink);color:#fff}
html.js:not(.quieto) .mt-tarj.foco *{color:inherit}

/* ===== R9-C1 · escritorio: ≤ 80 palabras por pantalla y movimiento que cuenta algo ===== */
:root{--barrido:#CEE4F3}
/* el foco se ve: la fila que «habla» se rellena entera */
html body .mt-preg li.foco::before,html body .mt-marcas li.foco::after{opacity:.62}
html body .mt-rp.fin .mt-rp-foco{opacity:.6}
html body .mt-conf:not([data-e]) li:last-child::before,html body .mt-conf[data-e="1"] li:nth-child(1)::before,html body .mt-conf[data-e="2"] li:nth-child(2)::before,html body .mt-conf[data-e="3"] li:nth-child(3)::before{opacity:.62}
/* barrido: la fila pasa de «a mano» a «solo» y se pinta de izquierda a derecha */
html.js:not(.quieto) :is(.mt-filas li:not(.ti),.mt-ficha:not(.sin)){background-image:linear-gradient(var(--barrido),var(--barrido));background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;transition:background-size .55s var(--ease),transform .3s var(--ease),box-shadow .3s,color .3s}
html.js:not(.quieto) :is(.mt-filas li.on:not(.ti),.mt-ficha.on:not(.sin)){background-size:100% 100%}
/* chat en rueda: como mucho 3 burbujas a la vez (data-max) */
.demo-chat .bb.sale{display:none}
/* flujo: el paso que está pasando ahora se marca y solo él enseña su detalle */
html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li{border-radius:14px;transition:background-color .4s,box-shadow .4s}
html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li.ahora{background-color:var(--barrido);box-shadow:0 0 0 6px var(--barrido)}
@media (min-width:900px){
  html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li .df-t small{transition:opacity .35s}
  html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li:not(.ahora) .df-t small{opacity:0}
}
/* reporte de procesos en escritorio: cada fila se lee cuando le toca; las demás, nombre y prioridad */
@media (min-width:720px){
  html.js:not(.quieto) .mt-rp.prep:not(.fin) tbody td:not(.prio){transition:opacity .4s,clip-path .75s cubic-bezier(.5,0,.2,1)}
  html.js:not(.quieto) .mt-rp.prep:not(.fin) tbody tr:not(.foco):not(.ve) td:not(.prio){opacity:0} /* R10-L2: al terminar, las 5 filas se quedan llenas */
}
@media (min-width:900px){
  .mt-rp-t tbody th,.mt-rp-t tbody td{padding-top:30px;padding-bottom:30px}
  .mt-rp-t tbody th{font-size:18px}
  /* el primer mes: la pieza llena su columna */
  .mt-conf{max-width:none;padding:36px 36px 30px}
  .mt-conf-pila{height:150px;gap:14px;margin-bottom:28px}
  .mt-conf-pila i{width:100px;height:136px;border-radius:14px;background-position:18px 30px,18px 52px,18px 74px;background-size:58px 6px,46px 6px,52px 6px}
  .mt-conf-barra{height:12px;border-radius:6px}
  .mt-conf ol{gap:10px;margin-top:20px}
  .mt-conf li{padding:20px 16px}
  .mt-conf li b{font-size:22px}
  /* cabecera de los procesos: la demo del tablero sin la letra pequeña */
  .ps-cab .mt-demo :is(.dk-card small,.dk-buscar,.dk-mas){display:none}
  /* hub: la lista del día más alta (las últimas tareas quedan bajo el pliegue) */
  .ps-cab .ps-guion .ps-tareas li{min-height:78px}
  /* pie: el contacto y la FAQ tienen su propia pantalla */
  html body .contacto.ct{padding:200px 0 300px}
  html body section.faq{padding-top:180px;padding-bottom:200px}
}
/* R9-C1 · ronda 2 (escritorio): aire entre los bloques que se juntaban en una pantalla */
@media (min-width:900px){
  html body .ps-sec:is([aria-labelledby="rp-tit"],[aria-labelledby="no-tit"],[aria-labelledby="tope-tit"],[aria-labelledby="mes-tit"],[aria-labelledby="despues-tit"],[aria-labelledby="antes-tit"],[aria-labelledby="ceo-tit"],[aria-labelledby="encima-tit"]){padding-top:150px;padding-bottom:150px}
  html body .ps-sec.mt-rp-sec2{padding-top:0;padding-bottom:170px}
  .mt-rp{margin-top:72px}
  .mt-rp-t tbody th,.mt-rp-t tbody td{padding-top:36px;padding-bottom:36px}
  .mt-sellos li{display:flex;align-items:center;min-height:118px}
  .ps-cab .ps-guion .ps-tareas li{min-height:112px}
  html body .contacto.ct{padding:200px 0 380px}
}
/* R9-C1 · los gorros del CEO se señalan uno cada vez; en móvil, la fila del reporte que habla se ve más */
html body .ps-gorros li.foco{background:var(--barrido)}
@media (max-width:719.98px){html body .mt-rp-t tbody tr.foco::before{opacity:.62}}
/* R9-C1 · ronda 3 (escritorio, /metodo): el reporte, los sellos y el chat de «Y después» en su propia pantalla */
@media (min-width:900px){
  .mt-sellos li{min-height:150px;font-size:19px}
  .mt-rp{margin-top:200px}
  .mt-rp-t tbody th,.mt-rp-t tbody td{padding-top:44px;padding-bottom:44px}
  html body .ps-sec.mt-rp-sec2{padding-bottom:380px}
  html body .ps-sec[aria-labelledby="despues-tit"]{padding-bottom:340px}
}
/* R9-C1 · ronda 3 (hub): cada bloque de texto en su pantalla; el flujo enseña solo el detalle del paso actual también en móvil */
html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li .df-t small{transition:opacity .35s}
html.js:not(.quieto) [data-mtd="flujo"] .df-nodos li:not(.ahora) .df-t small{opacity:0}
@media (max-width:899.98px){.ps-cab .ps-guion .ps-tareas li{min-height:68px}}
@media (min-width:900px){
  .ps-cab .ps-guion{margin-top:110px}
  .ps-cab .ps-guion .ps-tareas li{min-height:120px}
  html body .ps-sec:is([aria-labelledby="ceo-tit"],[aria-labelledby="encima-tit"],[aria-labelledby="nota-tit"],[aria-labelledby="junto-tit"]){padding-top:260px;padding-bottom:260px}
  html body .ps-sec[aria-labelledby="no-tit"]{padding-top:260px}
}

/* R9-C1 ronda 4 (/metodo, escritorio): «Lo que veo» y «Lo que tienes» no comparten pantalla; el contacto sale del último pantallazo */
@media (min-width:900px){
  html body .ps-sec:is([aria-labelledby="veo-tit"],[aria-labelledby="ti-tit"]){padding-top:170px;padding-bottom:170px}
  html body .contacto.ct{padding-bottom:520px}
}

/* R9-C1 ronda 5 · procesos: lo que toca ahora se marca (fila de la hoja, paso, caso, oficio); contraste del detalle del flujo */
html.js:not(.quieto) .mt-hoja-t .fila{transition:clip-path .9s steps(16,end),background-color .4s var(--ease)}
html.js:not(.quieto) .mt-hoja-t .fila.ahora{background-color:var(--barrido)}
html.js:not(.quieto) :is(.ps-pasos,.ps-dia,.ps-chips,.ps-oficios)>li{border-radius:12px;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
html.js:not(.quieto) :is(.ps-pasos,.ps-dia,.ps-chips,.ps-oficios)>li.foco{background-color:var(--barrido);box-shadow:0 0 0 8px var(--barrido)}
html.js:not(.quieto) :is(.ps-pasos,.ps-dia,.ps-chips,.ps-oficios)>li.foco *,html.js:not(.quieto) .mt-hoja-t .fila.ahora *{color:#2C2C30}
html body [data-mtd="flujo"] .df-nodos li.ahora small{color:#45454A}

/* R9-C1 ronda 6 (escritorio): «Hasta dónde llega» tiene su pantalla; la pregunta no comparte con «Lo que tienes»; el reporte se lee sin su texto encima; el hub sin migas arriba */
@media (min-width:900px){
  html body .ps-sec[aria-labelledby="tope-tit"]{padding-top:320px;padding-bottom:320px}
  html body .ps-sec[aria-labelledby="preg-tit"]{padding-top:260px}
  html body .mt-rp{margin-top:420px}
  html body .ps-cab:has(.ps-guion) .ps-migas{display:none}
  html body .ps-sec[aria-labelledby="que-tit"]{padding-top:300px}
}

/* R9-C1 ronda 7 · procesos y método: «Lo que haces tú» se acerca a ti; la guía flota; en el reporte de escritorio la fila que se lee se marca */
@keyframes mt-acerca{from{transform:scale(1)}to{transform:scale(1.08)}}
html.js:not(.quieto) .ps-sec[aria-labelledby="tu-tit"] .mt-foto.ve img{transform-origin:55% 35%;animation:mt-acerca 5s ease-in-out .8s infinite alternate}
@keyframes mt-libro-vive{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-12px) rotate(2.5deg)}}
html.js:not(.quieto) .mt-libro{animation:mt-libro-vive 2.8s ease-in-out infinite alternate}
@media (min-width:720px){
  html.js:not(.quieto) .mt-rp-t tbody tr{transition:background-color .45s var(--ease)}
  html.js:not(.quieto) .mt-rp-t tbody tr.foco{background-color:var(--barrido)}
  html.js:not(.quieto) .mt-rp-t tbody tr.foco>td:not(.prio){color:#2C2C30}
}
@media (prefers-reduced-motion:reduce){html body .mt-libro,html body .mt-foto img{animation:none!important}}

/* ===== R9-D2 · /metodo · escena .mx (2 semanas → análisis → reporte → automatización). Por defecto = estado final ===== */
.mx{position:relative;background:var(--gris)}
.mx-pin{padding:80px 0}
.mx-in{display:grid;gap:28px}
.mx-in>*{min-width:0}
.mx-barra{display:none}
.mx-pasos{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
.mx-paso h3{display:flex;align-items:center;gap:12px;margin:0;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.mx-n{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:16px;font-weight:600}
.mx-paso p{margin:8px 0 0 46px;font-size:17px;line-height:1.45;color:var(--tenue)}
.mx-esc{position:relative;container-type:size;width:100%;aspect-ratio:9/10;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 30px 60px -30px rgba(29,29,31,.28);overflow:hidden}
.mx-cal{position:absolute;left:3cqw;top:3cqh;width:94cqw;height:67cqh;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:6cqh 1fr 1fr;gap:1.5cqh 1cqw;opacity:0;transition:opacity .5s var(--ease)}
.mx-sem{display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--tenue)}
.mx-dia{position:relative;border-radius:10px;background:var(--gris);box-shadow:inset 0 0 0 1px #E2E2E7;transition:background-color .8s var(--ease)}
.mx-dia.fin{background:#FBFBFC}
.mx-dia b{position:absolute;left:7px;top:5px;font-size:13px;font-weight:600;color:var(--tenue)}
.mx-dia.foco{background:var(--cielo)}
.mx-dia.foco b{color:var(--ink)}
.mx-col{position:absolute;top:3cqh;left:calc(3cqw + var(--g)*19cqw);width:18cqw;height:67cqh;border-radius:12px;background:var(--bruma);opacity:0;transition:opacity .5s var(--ease),background-color .8s var(--ease)}
.mx-col.mano{background:var(--gris);box-shadow:inset 0 0 0 1.5px var(--linea)}
.mx-col b{position:absolute;left:-1cqw;right:-1cqw;top:3cqh;text-align:center;font-size:13px;font-weight:600;color:var(--acero);white-space:nowrap}
.mx-col.mano b{color:var(--tenue)}
.mx-col.foco{background:var(--cielo)}
.mx-nota{position:absolute;left:0;top:0;z-index:1;width:11cqw;height:13cqh;display:grid;place-items:center;border-radius:8px;background:#FCEBB6;box-shadow:0 6px 14px -8px rgba(29,29,31,.45);opacity:0;transform:translate(calc(3.786cqw + var(--c)*13.571cqw),calc(23.5cqh + var(--r)*30.5cqh)) rotate(-2deg);transition:transform .8s var(--ease),opacity .45s var(--ease),scale .45s var(--ease)}
.mx-nota b{max-width:100%;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:#6B4600}
.mx-nota.foco{z-index:2;scale:1.14}
.mx-rp{position:absolute;left:3cqw;top:3cqh;width:94cqw;height:68cqh;transition:opacity .5s var(--ease)}
.mx-rp-cab{display:flex;align-items:center;justify-content:space-between;height:7cqh;margin:0;font-size:18px}
.mx-f{position:absolute;left:0;right:0;top:11cqh;height:10.5cqh;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3cqw;border-radius:12px;background:var(--gris);transform:translateY(calc(var(--q)*11.5cqh));transition:transform .8s var(--ease),clip-path .6s var(--ease),background-color .8s var(--ease)}
.mx-f b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600}
.mx-f.mano b{color:var(--tenue)}
.mx-f.foco{background:var(--cielo)}
.mx-f.foco b{color:var(--ink)}
.mx-e{display:grid;flex:none}
.mx-e i{grid-area:1/1;display:inline-grid;place-items:center;height:28px;padding:0 11px;border-radius:14px;background:var(--bruma);color:var(--acero);font-size:13px;font-style:normal;font-weight:600;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.mx-e i.uno{background:var(--ink);color:#fff}
.mx-f.mano .p{background:transparent;box-shadow:inset 0 0 0 1.5px var(--apagado);color:var(--tenue)}
.mx-e .s{background:#E6F4EA;color:#137333;opacity:0;transform:scale(.7)}
.mx-f.hecho .p{opacity:0;transform:scale(.7)}
.mx-f.hecho .s{opacity:1;transform:none}
.mx-hoy{position:absolute;left:3cqw;top:74cqh;width:94cqw;height:23cqh;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 4cqw;border-radius:14px;background:var(--bruma);transition:opacity .4s var(--ease)}
.mx-hoy small{font-size:13px;font-weight:600;color:var(--acero)}
.mx-hoy p{margin:0;font-size:16px;line-height:1.35;color:var(--ink)}
.mx-hoy p.esc{animation:mx-esc .7s var(--ease) both}
@keyframes mx-esc{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@container (max-width:520px){.mx-nota b{display:none}.mx-f b{font-size:14px}.mx-hoy p{font-size:14px}.mx-e i{height:26px;padding:0 9px;font-size:12px}.mx-col b{font-size:12px}}
@media (min-width:900px){
  .mx-pin{padding:120px 0}
  .mx-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
  .mx-esc{aspect-ratio:4/3}
  .mx-paso h3{font-size:26px}
  .mx-paso p{font-size:19px}
}
/* con JS y movimiento: la escena se fija y el scroll la cuenta */
html.js:not(.quieto) .mx.mx-on{height:440svh}
html.js:not(.quieto) .mx.mx-on .mx-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 16px) 0 16px;overflow:hidden}
html.js:not(.quieto) .mx.mx-on .mx-in{width:100%;gap:20px}
html.js:not(.quieto) .mx.mx-on .mx-barra{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px}
.mx-barra i{position:relative;height:4px;border-radius:2px;background:var(--linea);overflow:hidden}
.mx-barra i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:left}
html.js:not(.quieto) .mx.mx-on .mx-pasos{gap:0;margin-top:20px}
html.js:not(.quieto) .mx.mx-on .mx-paso{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
html.js:not(.quieto) .mx.mx-on .mx-paso.on{opacity:1;transform:none}
html.js:not(.quieto) .mx.mx-on[data-paso="1"] .mx-cal{opacity:1}
html.js:not(.quieto) .mx.mx-on[data-paso="1"] .mx-nota{scale:.6}
html.js:not(.quieto) .mx.mx-on[data-paso="1"] .mx-nota.ya{opacity:1;scale:1}
html.js:not(.quieto) .mx.mx-on[data-paso="1"] .mx-nota.ya.foco{scale:1.14}
html.js:not(.quieto) .mx.mx-on[data-paso="2"] .mx-col{opacity:1}
html.js:not(.quieto) .mx.mx-on[data-paso="2"] .mx-nota{opacity:1;transform:translate(calc(6.5cqw + var(--g)*19cqw),calc(15cqh + var(--k)*16cqh))}
html.js:not(.quieto) .mx.mx-on:is([data-paso="1"],[data-paso="2"]) .mx-rp{opacity:0}
html.js:not(.quieto) .mx.mx-on[data-paso="3"] .mx-hoy{opacity:0}
html.js:not(.quieto) .mx.mx-on .mx-f:not(.ve){clip-path:inset(0 100% 0 0)}
html.js:not(.quieto) .mx.mx-on:not(.orden) .mx-f{transform:translateY(calc(var(--o)*11.5cqh))}
@media (min-width:900px){html.js:not(.quieto) .mx.mx-on .mx-in{gap:56px}html.js:not(.quieto) .mx.mx-on .mx-pasos{margin-top:28px}}

/* ===== R9-D2 · «Va bien con»: las mini demos son fichas con texto real (lo rellena p-metodo.js en todas las páginas) ===== */
.mt-mini.ficha{display:flex;flex-direction:column;gap:5px;height:136px;padding:11px 13px;background:var(--bruma);text-align:left}
html .mt-tarj .mt-mini.ficha .mf-cab{font-size:13px;font-weight:600;line-height:1.2;color:var(--acero)}
.mf-b{max-width:88%;padding:6px 10px;border-radius:12px;font-size:13px;line-height:1.3;box-shadow:0 1px 2px rgba(29,29,31,.1)}
html .mt-tarj .mt-mini.ficha .mf-b{background:#fff;color:var(--ink)}
html .mt-tarj .mt-mini.ficha .mf-b.yo{align-self:flex-end;border-bottom-right-radius:4px;background:#D9FDD3}
.mf-b.el{align-self:flex-start;border-bottom-left-radius:4px}
.mf-cols{position:relative;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html .mt-tarj .mt-mini.ficha .mf-c{padding:6px 7px;border-radius:9px;background:rgba(255,255,255,.55);font-size:12px;font-weight:600;line-height:1.2;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .mt-tarj .mt-mini.ficha .mf-k{position:absolute;left:0;bottom:8px;width:calc((100% - 12px)/3);padding:7px;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px -8px rgba(29,29,31,.45);transform:translateX(calc(200% + 12px))}
.mf-fl{flex:1;display:flex;align-items:center;gap:8px}
html .mt-tarj .mt-mini.ficha .mf-pt{position:relative;flex:1;min-width:0;display:grid;place-items:center;height:46px;padding:0 6px;border-radius:10px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;line-height:1.15;text-align:center}
.mf-pt::after{content:"";position:absolute;right:-4px;top:-4px;width:14px;height:14px;border-radius:50%;background:#34A853;box-shadow:0 0 0 2px var(--bruma)}
.mf-pt+.mf-pt::before{content:"";position:absolute;left:-8px;top:50%;width:8px;height:2px;background:var(--apagado)}
html .mt-tarj .mt-mini.ficha .mf-tit{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
html .mt-tarj .mt-mini.ficha .mf-l{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:21px;padding:2px 8px;border-radius:6px;background:#fff;color:var(--ink);font-size:12px;line-height:1.2}
html .mt-tarj .mt-mini.ficha .mf-l em{padding:1px 6px;border-radius:6px;background:#E6F4EA;color:#137333;font-style:normal;font-weight:600}
@keyframes mf-b{0%,6%{opacity:0;transform:translateY(8px)}14%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mf-k{0%{opacity:0;transform:translateX(0)}6%,26%{opacity:1;transform:translateX(0)}38%,56%{transform:translateX(calc(100% + 6px))}68%,90%{opacity:1;transform:translateX(calc(200% + 12px))}100%{opacity:0;transform:translateX(calc(200% + 12px))}}
@keyframes mf-pt{0%,8%{transform:scale(0)}16%,84%{transform:scale(1)}92%,100%{transform:scale(0)}}
@keyframes mf-l{0%,6%{clip-path:inset(0 100% 0 0)}18%,88%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
html.js:not(.quieto) .mt-mini.ficha .mf-b{animation:mf-b 4.4s var(--ease) infinite paused}
html.js:not(.quieto) .mt-mini.ficha .mf-b+.mf-b{animation-delay:.8s}
html.js:not(.quieto) .mt-mini.ficha .mf-k{animation:mf-k 5s cubic-bezier(.65,0,.35,1) infinite paused}
html.js:not(.quieto) .mt-mini.ficha .mf-pt::after{animation:mf-pt 3.9s var(--ease) infinite paused}
html.js:not(.quieto) .mt-mini.ficha .mf-pt:nth-child(2)::after{animation-delay:.6s}
html.js:not(.quieto) .mt-mini.ficha .mf-pt:nth-child(3)::after{animation-delay:1.2s}
html.js:not(.quieto) .mt-mini.ficha .mf-l{animation:mf-l 4.4s var(--ease) infinite paused}
html.js:not(.quieto) .mt-mini.ficha .mf-l:nth-of-type(2){animation-delay:.45s}
html.js:not(.quieto) .mt-mini.ficha .mf-l:nth-of-type(3){animation-delay:.9s}
html.js:not(.quieto) .mt-mini.ficha .mf-l:nth-of-type(4){animation-delay:1.35s}
html.js:not(.quieto) .mt-mini.ficha.vivo :is(.mf-b,.mf-k,.mf-l),html.js:not(.quieto) .mt-mini.ficha.vivo .mf-pt::after{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.mt-mini.ficha *,.mt-mini.ficha *::after{animation:none!important}}

/* ===== R9-D2 · reporte: la letra de la tabla a 16 en el móvil (Ejemplo, Prioridad, Primero, A mano) ===== */
@media (max-width:719.98px){
  .mt-tag{height:30px;padding:0 12px;border-radius:15px;font-size:16px}
  .mt-rp-t thead th{font-size:16px}
  .mt-prio i{height:32px;min-width:32px;border-radius:16px;font-size:16px}
  .mt-prio em{height:32px;font-size:16px;letter-spacing:.01em;text-transform:none}
}

/* ===== R9-D2 · hub «Qué es»: el correo se lee solo ===== */
.mt-lee{display:grid;gap:12px;width:100%;max-width:460px;margin-inline:auto;padding:20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 30px 60px -30px rgba(29,29,31,.28)}
.mt-lee-c{padding:16px 18px;border-radius:16px;background:var(--gris)}
.mt-lee-c small{display:block;font-size:13px;font-weight:600;color:var(--tenue)}
.mt-lee-c p{isolation:isolate;margin:6px 0 0;font-size:17px;line-height:1.5}
.mt-lee mark{position:relative;background:none;color:inherit}
.mt-lee mark::before{content:"";position:absolute;left:-2px;right:-2px;bottom:1px;z-index:-1;height:.55em;border-radius:3px;background:var(--cielo);transform-origin:left;transition:transform .5s var(--ease)}
.mt-lee-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-lee-l li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 16px;border-radius:12px;background:var(--barrido);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.mt-lee-l span{font-size:15px;font-weight:600;color:#1F4E70}
.mt-lee-l b{font-size:16px;text-align:right}
.mt-lee-l li.fin{background:#CDEBD6}
.mt-lee-l li.fin span{color:#0D5C27}
html.js:not(.quieto) .mt-lee.prep mark:not(.on)::before{transform:scaleX(0)}
html.js:not(.quieto) .mt-lee.prep li:not(.on){opacity:0;transform:translateY(10px)}

/* ===== R9-D2 · hub «para CEO»: lo de siempre sale de tu mesa y te queda decidir ===== */
.mt-mesa{display:grid;gap:14px}
@media (min-width:560px){.mt-mesa{grid-template-columns:1fr 1fr}}
.mt-mesa-z{padding:18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.07)}
.mt-mesa-z.solo{background:var(--bruma);box-shadow:none}
.mt-mesa-z h3{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--tenue)}
.mt-mesa-z.solo h3{color:var(--acero)}
.mt-mesa-l{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:8px;min-height:272px}
.mt-mesa-l li{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;background:var(--gris);font-size:16px;font-weight:500;transition:opacity .3s var(--ease)}
.mt-mesa-z.solo .mt-mesa-l li{background:#fff}
.mt-mesa-l li.fija{background:var(--ink);color:#fff;font-weight:600}
html.js:not(.quieto) .mt-mesa.borra .mt-mesa-l li:not(.fija){opacity:0}

/* ===== R9-D2 · hub «Cómo se nota»: la tarjeta «Todo al día» cambia de línea (sin flotar) ===== */
.mt-dia{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:6px;padding:12px 16px 12px 46px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px -12px rgba(29,29,31,.35)}
.mt-dia::before{position:absolute;left:14px;top:14px;content:"";width:20px;height:20px;border-radius:50%;background:#34A853 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.mt-dia b{font-size:14px;font-weight:600;color:#137333}
.mt-dia span{display:block;padding:4px 10px;border-radius:8px;background:var(--barrido);font-size:16px;color:var(--ink);transition:opacity .4s var(--ease),transform .5s var(--ease),background-color .4s var(--ease)}
html.js:not(.quieto) .mt-dia.va span:not(.on){opacity:0;transform:translateY(8px)}
html.js:not(.quieto) .mt-dia.va span.on{opacity:1;transform:none}

/* ===== R9-D2 · /metodo y hub, escritorio: fuera los colchones de C1 (pantallas casi blancas) ===== */
.mt-vivo.solo .esc-demo{justify-self:center;width:100%;margin-top:0}
@media (min-width:900px){
  html body:is(:has(.mx),:has(.mt-mesa)) .ps-sec{padding-top:128px;padding-bottom:128px}
  html body:is(:has(.mx),:has(.mt-mesa)) .mt-rp{margin-top:56px}
  html body:is(:has(.mx),:has(.mt-mesa)) .mt-rp-t tbody th,html body:is(:has(.mx),:has(.mt-mesa)) .mt-rp-t tbody td{padding-top:22px;padding-bottom:22px}
  html body:is(:has(.mx),:has(.mt-mesa)) .contacto.ct{padding:140px 0 200px}
  html body:is(:has(.mx),:has(.mt-mesa)) section.faq{padding-top:128px;padding-bottom:128px}
  html body:has(.mt-mesa) #asi{--paso-esc:30svh}
}

/* R9-D2 · /metodo a 1440: más aire bajo el cierre para que la última pantalla (cierre + pie) no pase de 80 palabras */
@media (min-width:900px){html body:is(:has(.mx),:has(.mt-mesa)) .contacto.ct{padding-bottom:280px}}

/* R9-D2 · hub a 1440: «Antes de nada» y «para CEO» ocupan una pantalla cada una, para que el reporte y la mesa no se lean a la vez (≤ 80 palabras) */
@media (min-width:900px){html body section:has(#antes-tit){min-height:100svh;display:flex;flex-direction:column;justify-content:center}}
html.js:not(.quieto) .mt-dia span.ahora{background:var(--cielo)} /* R9-D2 · la línea que acaba de entrar */

/* ===== R9-E2 · /metodo: el H2 de la escena cabe entero (cuenta con el ancho de su columna) ===== */
.mx-txt{container-type:inline-size}
html body .mx .mx-txt .sec-tit{font-size:min(48px,12.5cqi);overflow-wrap:normal;hyphens:manual}
@media (min-width:900px){html body .mx .mx-txt .sec-tit{font-size:min(72px,12cqi)}}

/* ===== R9-E2 · /metodo «Se queda a mano»: cada cosa dice qué le pasa; nada se vacía; el foco las recorre ===== */
.mt-col li{display:grid;gap:4px;align-content:start}
.mt-col li b{font-size:16px;font-weight:600;line-height:1.3}
.mt-col li small{font-size:16px;line-height:1.35;color:var(--tenue)}
@keyframes mt-col-f{0%,3%{background-color:#fff}7%,17%{background-color:var(--cielo)}21%,100%{background-color:#fff}}
html.js:not(.quieto) .mt-cols.vivo li{animation:mt-col-f 6s var(--ease) infinite}
html.js:not(.quieto) .mt-cols.vivo .mt-col:first-child li:nth-child(2){animation-delay:1.2s}
html.js:not(.quieto) .mt-cols.vivo .mt-col:first-child li:nth-child(3){animation-delay:2.4s}
html.js:not(.quieto) .mt-cols.vivo .mt-col.mano li:nth-child(1){animation-delay:3.6s}
html.js:not(.quieto) .mt-cols.vivo .mt-col.mano li:nth-child(2){animation-delay:4.8s}
@media (min-width:900px){.mt-cols{gap:16px}.mt-col{padding:22px 18px 18px}.mt-col h3{font-size:17px}.mt-col li{padding:16px 18px}.mt-col li b{font-size:19px}.mt-col li small{font-size:17px}}
@media (prefers-reduced-motion:reduce){html body .mt-cols li{animation:none!important}}

/* ===== R9-E2 · /metodo «Cuatro preguntas»: título y ficha juntos; pasan varias tareas ===== */
.mt-dos>.mt-preg{max-width:none}
.mt-preg-tarea b{transition:opacity .4s var(--ease)}
html.js:not(.quieto) .mt-preg.cambia .mt-preg-tarea b{opacity:0}
.mt-preg.mano .mt-preg-fin span{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (min-width:900px){.mt-dos>.mt-preg{padding:34px 34px 28px}.mt-dos>.mt-preg li{min-height:66px;padding:12px 16px;font-size:18px}.mt-dos>.mt-preg li b{font-size:17px}.mt-dos>.mt-preg .mt-preg-tarea b{font-size:24px}}

/* R9-E2 · hub (escritorio): la FAQ comparte pantalla con una foto real; «para CEO» sin pantalla propia vacía */
.faq-foto{display:none}
@media (min-width:900px){
  html body:has(.mt-mesa) .faq-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:center}
  html body:has(.mt-mesa) .faq-in>.faq-tit{grid-column:1/-1;grid-row:1}
  html body:has(.mt-mesa) .faq-in>.faq-lista{grid-column:1;grid-row:2}
  html body:has(.mt-mesa) .faq-foto{display:block;grid-column:2;grid-row:2;max-height:560px}
  .faq-foto img{object-position:50% 30%}
}

/* R9-E2 · ronda 2: «qué no automatizar» con las columnas al 60 %, menos aire en /metodo móvil, el hub sin pantalla final doble */
@media (min-width:900px){
  .mt-dos:has(.mt-cols){grid-template-columns:4fr 7fr}
  .mt-dos .mt-cols{margin-top:0;gap:20px}
  .mt-dos .mt-col{padding:28px 22px 22px}
  .mt-dos .mt-col h3{font-size:20px;margin-bottom:14px}
  .mt-dos .mt-col li{padding:20px 22px;min-height:96px}
}
@media (min-width:900px) and (max-width:1180px){.mt-dos.arriba:has(.mt-rp-t){grid-template-columns:minmax(0,1fr)}}
html body:is(:has(.mx),:has(.mt-mesa)) .dm-estado{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){
  html body:has(.mx) .ps-sec{padding-top:64px;padding-bottom:64px}
  html body:has(.mt-mesa) .contacto.ct{padding-bottom:112px}
}
/* R9-E2 · ronda 3: el título del FAQ del hub no se pega encima de las preguntas; etiquetas de columna dentro de su columna; la tabla del reporte sin cabecera en móvil (cada fila ya lleva su etiqueta); hub móvil más corto */
@media (min-width:900px){html body:has(.mt-mesa) .faq-in>.faq-tit{position:static;top:auto}}
.mx-col b{left:0;right:0}
@media (max-width:899px){
  .mt-rp-t thead{display:none}
  html body:has(.mt-mesa) .ps-sec{padding-top:64px;padding-bottom:64px}
}
/* R9-E2 · ronda 4: «qué no automatizar» con dos paneles que se distinguen de un vistazo (lo que pasa solo en azul, lo tuyo en negro) y menos aire; el FAQ del hub enseña la llamada reservándose, también en móvil */
html body:has(.mx) .mt-col{background:var(--cielo)}
html body:has(.mx) .mt-col.mano{background:var(--ink);color:#fff}
html body:has(.mx) .mt-col.mano h3{color:#fff}
html body:has(.mx) .mt-col.mano li{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}
html body:has(.mx) .mt-col.mano li small{color:rgba(255,255,255,.78)}
@media (min-width:900px){
  html body:has(.mx) .ps-sec:has(#no-tit){padding-top:80px;padding-bottom:80px}
  html body:has(.mx) .mt-dos .mt-col li{min-height:120px}
}
.faq-foto{position:relative}
@media (max-width:899px){
  html body:has(.mt-mesa) .faq-foto{display:block;margin:28px 0 0;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
  html body:has(.mt-mesa) .faq-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
}
/* el foco que recorre las tareas: aro negro en el panel azul, brillo en el negro (el fondo blanco del foco original no vale sobre negro) */
@keyframes mt-col-g{0%,3%{background-color:rgba(255,255,255,.1)}7%,17%{background-color:rgba(255,255,255,.3)}21%,100%{background-color:rgba(255,255,255,.1)}}
@keyframes mt-col-h{0%,3%,21%,100%{box-shadow:0 1px 2px rgba(29,29,31,.08),0 0 0 0 rgba(29,29,31,0)}7%,17%{box-shadow:0 1px 2px rgba(29,29,31,.08),0 0 0 2px var(--ink)}}
html.js:not(.quieto) body:has(.mx) .mt-cols.vivo .mt-col:not(.mano) li{animation-name:mt-col-h}
html.js:not(.quieto) body:has(.mx) .mt-cols.vivo .mt-col.mano li{animation-name:mt-col-g}

/* R9-F · F1 · hub en escritorio: «Encima de lo que ya usáis» con el texto arriba y la maqueta más grande; «Lo que suele ir junto» con maquetas más altas, para que ninguna pantalla pase de 80 palabras */
@media (min-width:1024px){
  html body section.ps-sec[aria-labelledby=nota-tit]{padding-top:80px}
  html body section.ps-sec[aria-labelledby=encima-tit]{padding-top:176px}
  section[aria-labelledby=encima-tit] .mt-demo{max-width:560px}
  html.js:not(.quieto) section[aria-labelledby=encima-tit] .esc-demo{height:640px}
  section[aria-labelledby=encima-tit] .df-nodos{max-height:440px}
  section[aria-labelledby=junto-tit] .mt-mini{height:230px}
}

/* ===== R9-G1 (30-oct) · hub y /metodo: bloques de color con contenido y piezas al 55-65 % a 1440 (solo body.g1-hub / body.g1-metodo) ===== */
/* hub «Así pasa»: escena sobre tinta */
body.g1-hub #asi{background:var(--ink);color:#fff}
body.g1-hub #asi .sec-tit,body.g1-hub #asi .esc-txt h3,body.g1-hub #asi .esc-num b{color:#fff}
body.g1-hub #asi .esc-txt p{color:#D2D2D7}
body.g1-hub #asi .esc-cab{color:#A1A1A6}
body.g1-hub #asi .esc-barra{background:rgba(255,255,255,.2)}
body.g1-hub #asi .esc-barra i{background:#fff}
body.g1-hub #asi .mt-ir{color:var(--cielo)}
body.g1-hub #asi .esc-paso{border-color:rgba(255,255,255,.14)}
/* hub «para CEO» y /metodo «cuatro preguntas»: acero */
body.g1-hub section:has(#ceo-tit),body.g1-metodo section:has(#preg-tit){background:var(--acero);color:#fff}
body.g1-hub section:has(#ceo-tit) :is(.sec-tit,.ps-txt),body.g1-metodo section:has(#preg-tit) :is(.sec-tit,.ps-txt){color:#fff}
body.g1-hub section:has(#ceo-tit) .mt-mesa-z{background:#fff;box-shadow:none}
body.g1-hub section:has(#ceo-tit) .mt-mesa-z.solo{background:var(--bruma)}
/* /metodo «El primer mes»: tinta */
body.g1-metodo section:has(#mes-tit){background:var(--ink);color:#fff}
body.g1-metodo section:has(#mes-tit) .sec-tit{color:#fff}
body.g1-metodo section:has(#mes-tit) .ps-txt{color:#D2D2D7}
body.g1-metodo section:has(#mes-tit) .mt-conf{box-shadow:none}
@media (min-width:1024px){
  body:is(.g1-hub,.g1-metodo) .ps-sec>.caja{max-width:1360px}
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos.inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos>*{min-width:0}
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos .sec-tit{font-size:min(56px,4vw);overflow-wrap:break-word}
  /* pantallas llenas: las dos piezas grandes y la mesa ocupan la pantalla */
  body.g1-hub section:has(#ceo-tit),body.g1-metodo section:has(#preg-tit),body.g1-metodo section:has(#mes-tit){min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding-top:72px;padding-bottom:72px}
  /* mesa grande */
  body.g1-hub .mt-mesa{gap:20px}
  body.g1-hub .mt-mesa-z{padding:28px 24px;border-radius:28px}
  body.g1-hub .mt-mesa-z h3{font-size:20px;margin-bottom:18px}
  body.g1-hub .mt-mesa-l{min-height:min(420px,calc(100svh - 360px));gap:12px}
  body.g1-hub .mt-mesa-l li{min-height:68px;padding:0 20px;border-radius:16px;font-size:21px}
  /* cuatro preguntas grande */
  body.g1-metodo .mt-dos>.mt-preg{padding:44px 44px 36px;border-radius:32px}
  body.g1-metodo .mt-dos>.mt-preg .mt-preg-tarea{margin-bottom:20px;padding-bottom:22px}
  body.g1-metodo .mt-dos>.mt-preg .mt-preg-tarea small{font-size:16px}
  body.g1-metodo .mt-dos>.mt-preg .mt-preg-tarea b{font-size:32px}
  body.g1-metodo .mt-dos>.mt-preg ol{gap:10px}
  body.g1-metodo .mt-dos>.mt-preg li{min-height:84px;padding:14px 22px;border-radius:18px;font-size:22px}
  body.g1-metodo .mt-dos>.mt-preg li b{font-size:20px}
  body.g1-metodo .mt-dos>.mt-preg .mt-preg-fin span{height:44px;padding:0 22px;border-radius:22px;font-size:17px}
  /* primer mes grande */
  body.g1-metodo section:has(#mes-tit) .mt-conf{max-width:none;padding:48px 44px 40px;border-radius:32px}
  body.g1-metodo section:has(#mes-tit) .mt-conf-pila{height:120px;gap:12px;margin-bottom:28px}
  body.g1-metodo section:has(#mes-tit) .mt-conf-pila i{width:86px;height:112px;border-radius:14px}
  body.g1-metodo section:has(#mes-tit) .mt-conf ol{gap:14px;margin-top:28px}
  body.g1-metodo section:has(#mes-tit) .mt-conf li{padding:26px 20px}
  body.g1-metodo section:has(#mes-tit) .mt-conf li b{font-size:26px}
  body.g1-metodo section:has(#mes-tit) .mt-conf li small{font-size:16px}
}
@media (min-width:1280px){
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px}
  body:is(.g1-hub,.g1-metodo) .ps-sec .mt-dos.inv{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  /* escena del hub: la demo manda (≈ 60 % del ancho) y llena el alto */
  body.g1-hub #asi .esc-lista.caja,body.g1-hub #asi .esc-cab.caja,body.g1-hub #asi>.caja{max-width:1360px}
  body.g1-hub #asi .esc-paso{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
  html.js:not(.quieto) body.g1-hub #asi .esc-paso .esc-demo{height:min(760px,calc(100svh - var(--nav) - 120px))}
}
/* R9-G1 · /metodo: la pila de documentos no saca la página de ancho (desbordaba 185 px a 1024) */
body.g1-metodo .mt-conf-pila{overflow:hidden;max-width:100%}

/* R9-G1 · cierre: mesa en cinta, ficha de cuatro preguntas llena, FAQ de /metodo con la primera llamada */
body.g1-hub .mt-mesa-l{display:flex;flex-direction:column}
body.g1-hub .mt-mesa-l li{flex:1 1 0;transition:opacity .28s var(--ease),background-color .5s var(--ease)}
html.js:not(.quieto) body.g1-hub .mt-mesa-l li.fuera{opacity:0}
html.js:not(.quieto) body.g1-metodo .mt-preg li:not(.on){opacity:1;transform:none}
html.js:not(.quieto) body.g1-metodo .mt-preg li b{transition:opacity .35s var(--ease)}
html.js:not(.quieto) body.g1-metodo .mt-preg li:not(.on) b{opacity:0}
.faq-pieza{display:none}
html.js:not(.quieto) .faq-carta .fc-hist li{transition:background-color .4s var(--ease)}
html.js:not(.quieto) .faq-carta .fc-hist li:not(.on){background:transparent}
html.js:not(.quieto) .faq-carta .fc-hist li:not(.on) .fc-ok{transform:scale(0)}
@media (min-width:1024px){
  html body.g1-metodo section.faq{display:flex;align-items:center;min-height:100svh;padding-top:56px;padding-bottom:56px}
  html body.g1-metodo .contacto.ct{padding-bottom:320px}
  body.g1-metodo .faq-in{width:100%;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:72px}
  body.g1-metodo .faq-in>.faq-tit{position:static;top:auto;grid-column:1;grid-row:1;margin:0 0 24px}
  body.g1-metodo .faq-in>.faq-lista{grid-column:1;grid-row:2}
  body.g1-metodo .faq-pieza{display:grid;align-content:center;grid-column:2;grid-row:1/3;min-height:min(640px,calc(100svh - 160px));padding:44px;border-radius:28px;background:var(--ink)}
  .faq-carta{display:grid;gap:18px;padding:28px;border-radius:20px;background:#fff}
  .faq-carta .fc-quien b{font-size:26px}
  .faq-carta .fc-est{padding:6px 14px;font-size:16px;font-variant-numeric:tabular-nums}
  .fc-barra{display:block;height:6px;border-radius:3px;background:var(--gris);overflow:hidden}
  .fc-barra i{display:block;height:100%;border-radius:3px;background:var(--acero);transform-origin:0 50%}
  .faq-carta .fc-hist li{min-height:72px;padding:12px 16px;gap:16px}
  .faq-carta .fc-t b{font-size:20px}
  html body:is(.g1-metodo,.g1-hub) .ct-chat .bb-h{display:none}
}

/* R9-G1 · las piezas blancas no heredan el blanco del fondo oscuro (filas, tarea y hitos se leían en blanco sobre blanco) */
body.g1-hub section:has(#ceo-tit) .mt-mesa,body.g1-metodo section:has(#preg-tit) .mt-preg,body.g1-metodo section:has(#mes-tit) .mt-conf{color:var(--ink)}

/* R9-G1 · hub: el final no deja dos pantallas casi iguales (la penúltima y la última distaban 136 px en escritorio y 106 en móvil) */
@media (min-width:1024px){html body.g1-hub section.faq{padding-top:60px;padding-bottom:60px}}
@media (max-width:1023px){html body.g1-hub section.faq{padding-top:48px;padding-bottom:48px}html body.g1-hub .contacto.ct{padding-top:48px}}
@media (min-width:1024px){html body.g1-hub .ct-chat .dm-dia{display:none}}
@media (max-width:1023px){html body.g1-hub .contacto.ct{padding-bottom:48px}}

/* ==================== R10 · LOTE 2 (hub, agente y método) ==================== */
/* arreglo 7 · el WhatsApp del hub: el panel se ajusta al contenido, se llena desde arriba y nunca se vacía */
.mt-mini.ficha .mf-b:nth-of-type(n+4){display:none}
.mf-t{display:none}
@media (min-width:900px){
  body.g1-hub #asi .esc-paso .esc-demo.demo-chat,html.js:not(.quieto) body.g1-hub #asi .esc-paso .esc-demo.demo-chat{height:auto;max-height:calc(100svh - var(--nav) - 120px)}
  body.g1-hub #asi .demo-chat .dx{height:auto}
  body.g1-hub #asi .demo-chat .dm-cuerpo{flex:none;justify-content:flex-start;gap:10px;padding:22px 28px 16px}
  body.g1-hub #asi .demo-chat .bb{font-size:clamp(17px,1.4vw,20px)}
  body.g1-hub #asi .borra .dm-cuerpo{opacity:1}
  html.js:not(.quieto) body.g1-hub #asi .demo-chat .bb-fin:not(.ve):not(.ya){display:block;visibility:hidden}
  html.js:not(.quieto) body.g1-hub #asi .demo-chat .bb-escribe.ve{margin-bottom:-41px}
  html.js:not(.quieto) body.g1-hub #asi .demo-chat .bb.ya{display:block}
}
/* arreglo 7 · «Lo que suele ir junto»: fichas anchas con contenido de ejemplo */
@media (min-width:1200px){
  body.g1-hub .mt-tarjs.dos{max-width:none;gap:24px}
  html body.g1-hub .mt-tarjs.dos .mt-tarj{padding:14px 14px 26px}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha{height:auto;min-height:252px;gap:10px;padding:18px 20px}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha :is(.mf-cab,.mf-b,.mf-c,.mf-k,.mf-t){font-size:16px}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha .mf-b:nth-of-type(n+4){display:block}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha .mf-b{max-width:80%;padding:8px 14px}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha .mf-c{display:flex;flex-direction:column;gap:8px;padding:10px 8px;border-radius:12px;white-space:normal;color:var(--ink)}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha .mf-t{display:block;padding:8px 10px;border-radius:9px;background:#fff;color:var(--ink);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px rgba(29,29,31,.08)}
  html body.g1-hub .mt-tarjs.dos .mt-mini.ficha .mf-k{left:8px;bottom:10px;width:calc((100% - 12px)/3 - 16px);padding:8px 10px;border-radius:9px;background:var(--acero);color:#fff;animation-name:mf-k2}
  html body.g1-hub .mt-tarjs.dos .mf-b+.mf-b+.mf-b{animation-delay:1.6s}
  html body.g1-hub .mt-tarjs.dos .mf-b+.mf-b+.mf-b+.mf-b{animation-delay:2.4s}
}
/* la tarjeta que cruza columnas: paso = ancho de columna + hueco */
@keyframes mf-k2{0%{opacity:0;transform:translateX(0)}6%,26%{opacity:1;transform:translateX(0)}38%,56%{transform:translateX(calc(100% + 22px))}68%,90%{opacity:1;transform:translateX(calc(200% + 44px))}100%{opacity:0;transform:translateX(calc(200% + 44px))}}
/* arreglo 7 · «Encima de lo que ya usáis»: la pieza ocupa su columna, no 560 px */
@media (min-width:1200px){
  html body section[aria-labelledby=encima-tit] .mt-demo{max-width:none}
}
/* arreglo 7 · entre el contacto y el pie no queda una pantalla vacía */
@media (min-width:1024px){
  html body:is(.g1-hub,.g1-metodo) .contacto.ct{padding-bottom:120px}
}
/* arreglo 7 · «Encima de lo que ya usáis»: cabecera de color y cada paso hecho se rellena */
html body section[aria-labelledby=encima-tit] .df-top{background:var(--acero);border-bottom:0}
html body section[aria-labelledby=encima-tit] :is(.df-top>b,.df-cuenta,.df-num){color:#fff}
html body section[aria-labelledby=encima-tit] .df-nodos li{background:#B5D5EC;box-shadow:0 0 0 12px #B5D5EC;border-radius:4px}
html.js:not(.quieto) body section[aria-labelledby=encima-tit] .df-nodos li:not(.on):not(.ahora){background:transparent;box-shadow:none}
html body section[aria-labelledby=encima-tit] :is(.df-fila i,.df-hc b){font-size:16px}
@media (min-width:1200px){
  html body section[aria-labelledby=encima-tit] .df-cuerpo{padding:30px 28px}
}
/* arreglo 7 · lista de procesos: la tarea que ya va sola se rellena y vuelve a blanco si pasa a mano */
body.g1-hub a.mt-ficha:not(.sin){background:#C4DEF0;transition:transform .3s var(--ease),background-color .5s var(--ease)}
html.js:not(.quieto) body.g1-hub a.mt-ficha:not(.sin):not(.on){background:#fff}
body.g1-hub a.mt-ficha:not(.sin) .mt-chip .d{background:#fff}
body.g1-hub a.mt-ficha:not(.sin) .mt-ficha-l{color:#3A3A3C}
body.g1-hub a.mt-ficha:not(.sin) .mt-ficha-ir{color:var(--ink)}

/* R11-B · /metodo · «El primer mes»: línea de tiempo por semanas. Vertical en móvil, horizontal a 900+.
   Cada etapa enseña cuántas cosas miras tú (azul oscuro) y cuántas salen solas (azul claro). Se dibuja una vez y se queda. */
.mt-mes{max-width:560px}
.mt-mes-l{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:30px}
.mt-mes-l::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--blanco);transform-origin:50% 0;transition:transform 1.4s var(--ease) .2s}
.mt-mes-l li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding-left:46px}
.mt-mes-l li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:50%;background:var(--blanco);box-shadow:inset 0 0 0 5px var(--blanco)}
.mt-mes-s{grid-column:1;font-size:16px;font-weight:600;color:#9EC5E8}
.mt-mes-l b{grid-column:1;font-size:28px;line-height:1.08;letter-spacing:-.03em;font-weight:700;color:var(--blanco)}
.mt-mes-docs{grid-column:2;grid-row:1/span 2;display:grid;grid-template-columns:repeat(3,28px);gap:6px}
.mt-mes-docs i,.mt-mes-ley span::before{display:block;height:36px;border-radius:6px;background:rgba(255,255,255,.2) linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 6px 9px/16px 3px no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 6px 16px/12px 3px no-repeat;transition:background-color .5s var(--ease);transition-delay:calc(.7s + var(--i,0)*.45s)}
.mt-mes-docs i:is(.si,.raro),.mt-mes-ley .si::before{background-color:var(--blanco);background-image:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45))}
.mt-mes-ley{display:flex;gap:24px;margin-top:30px;padding-left:46px;font-size:16px;font-weight:500;color:rgba(255,255,255,.75)}
.mt-mes-ley span{display:inline-flex;align-items:center;gap:10px}
.mt-mes-ley span::before{content:"";width:18px;height:23px;border-radius:4px;background-size:10px 2px,7px 2px;background-position:4px 6px,4px 11px;transition:none}
.mt-mes-l li{transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(.35s + var(--i)*.45s)}
.mt-mes-l li .mt-mes-docs i{--i:inherit}
@media (prefers-reduced-motion:no-preference){html.js:not(.quieto) .mt-mes:not(.ve) .mt-mes-l::before{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){html.js:not(.quieto) .mt-mes:not(.ve) .mt-mes-l li{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:no-preference){html.js:not(.quieto) .mt-mes:not(.ve) .mt-mes-docs i:is(.si,.raro){background-color:rgba(255,255,255,.2)}}
@media (min-width:900px){
  .mt-mes{max-width:none}
  .mt-mes-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;padding-top:58px}
  .mt-mes-l::before{left:0;right:0;top:12px;bottom:auto;width:auto;height:4px;transform-origin:0 50%}
  .mt-mes-l li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-left:0}
  .mt-mes-l li::before{top:-58px;width:28px;height:28px;box-shadow:inset 0 0 0 6px var(--blanco)}
  .mt-mes-s{font-size:18px}
  .mt-mes-l b{font-size:36px}
  .mt-mes-docs{grid-template-columns:repeat(3,44px);gap:10px;margin-top:14px}
  .mt-mes-docs i{height:56px;border-radius:9px;background-position:9px 14px,9px 24px;background-size:26px 4px,19px 4px}
  .mt-mes-ley{padding-left:0;margin-top:40px;font-size:17px}
@media (prefers-reduced-motion:no-preference){  html.js:not(.quieto) .mt-mes:not(.ve) .mt-mes-l::before{transform:scaleX(0)}}
}