/* El método integrado (templates/_metodo_integrado.html). Colores de las técnicas: cosmos.css (--tec-*). */
.mt-cadena{list-style:none;margin:20px 0 10px;padding:0;display:grid;grid-template-columns:1fr;gap:12px;counter-reset:none}
@media(min-width:860px){.mt-cadena{grid-template-columns:repeat(4,1fr)}}
.mt-paso{position:relative;background:var(--bg-card);border:1px solid var(--border);border-top:4px solid var(--c);border-radius:12px;padding:14px 16px;text-align:left}
.mt-paso h3{margin:2px 0 6px;color:var(--c);font-size:1.15rem}
.mt-paso p{margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.5}
.mt-n{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.mt-sale{margin-top:10px;font-size:.8rem;color:var(--text-secondary)}
.mt-sale b{color:var(--c)}
@media(min-width:860px){.mt-paso:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:44%;color:var(--text-muted);font-size:1rem}}
@media(max-width:859px){.mt-paso:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-15px;color:var(--text-muted)}}
.mt-repaso{font-size:.9rem;color:var(--text-secondary);margin:6px 0 0}
.mt-repaso span{color:var(--c);font-weight:600}

.mt-ejemplo{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:left;margin-top:18px}
.mt-ej-cab{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between}
.mt-ej-cab b{font-size:1.05rem;color:var(--text-primary)} .mt-ej-cab span{font-size:.82rem;color:var(--text-muted)}
.mt-ej-fila{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 16px;border-bottom:1px solid var(--border)}
.mt-ej-fila:last-child{border-bottom:0}
@media(min-width:640px){.mt-ej-fila{grid-template-columns:110px 1fr;gap:12px}}
.mt-ej-et{font-weight:700;color:var(--c);font-size:.9rem}
.mt-ej-v{color:var(--text-primary);font-size:.95rem;line-height:1.5}
.mt-cod{display:inline-block;margin:0 10px 6px 0;padding:3px 8px;border:1px solid var(--border-strong);border-radius:8px;font-size:.88rem}
.mt-cod small{color:var(--text-muted)}
.mt-ok{font-size:.8rem;color:var(--accent-emerald)}
.mt-escena{font-style:italic} .mt-escena small{font-style:normal;color:var(--text-muted)}

.mt-practica{display:grid;gap:10px}
.mt-q{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:end}
.mt-q label{grid-column:1/-1;display:grid;gap:4px;font-size:.88rem;color:var(--text-secondary)}
.mt-q input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-surface);color:var(--text-primary);font-size:1rem}
.mt-q label{grid-column:1/2} .mt-btn{grid-column:2/3}
.mt-btn{padding:9px 14px;border-radius:8px;border:1px solid var(--tec-repaso);background:transparent;color:var(--text-primary);cursor:pointer;font-size:.9rem;min-height:40px}
.mt-res{grid-column:1/-1;font-size:.85rem;min-height:1em}
.mt-res.bien{color:#22c55e} .mt-res.mal{color:#ef4444}
.mt-total{font-weight:600;font-size:.9rem}
.mt-cta{display:inline-block;margin-top:12px;padding:10px 16px;border-radius:10px;background:var(--accent-violet);color:#fff;text-decoration:none;font-weight:600}

/* inicio con sesión */
.ini-wrap{max-width:1040px;margin:0 auto;padding:24px 16px 56px}
.ini-wrap h1{font-size:clamp(1.6rem,4.5vw,2.3rem);margin:.2em 0}
.ini-lede{color:var(--text-secondary);max-width:680px}
.ini-acciones{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 8px}
@media(min-width:700px){.ini-acciones{grid-template-columns:repeat(2,1fr)}}
.ini-accion{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;color:var(--text-primary);text-decoration:none;min-height:44px}
.ini-accion:hover,.ini-accion:focus-visible{border-color:var(--accent-violet)}
.ini-accion .t{font-size:1.1rem;font-weight:700}
.ini-accion p{margin:.3em 0 .6em;color:var(--text-secondary);font-size:.92rem}
.ini-chips{display:flex;flex-wrap:wrap;gap:6px}
.ini-chip{font-size:.72rem;padding:2px 9px;border-radius:999px;border:1px solid var(--c);color:var(--c)}
.ini-dato{font-size:.85rem;color:var(--text-muted)}
.ini-aviso{color:#f59e0b}
.ini-sec{margin-top:34px}
.ini-sec h2{font-size:1.3rem;margin:0 0 4px}
.met-por-que{padding-left:1.2em}.met-por-que li{margin:6px 0}
.mt-datos{font-size:.8rem;color:var(--text-secondary);margin-top:4px;line-height:1.45}
.ini-wrap .eyebrow{overflow-wrap:anywhere}

/* IDEA VEMOS: acróstico vertical en dos columnas y lema */
.mt-acro{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:2px 0 10px}
.mt-acro ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mt-acro li{font-size:.86rem;color:var(--text-secondary);line-height:1.35}
.mt-acro b{display:inline-block;width:1.1em;font-size:1.05rem;color:var(--c)}
.mt-lema{margin:10px 0 0;font-weight:700;font-size:1.05rem;color:var(--text-primary);letter-spacing:.02em}
.mt-ej-et small{font-weight:500;color:var(--text-muted)}
.met-acro{max-width:760px;margin:14px 0 18px}.met-acro li{font-size:.95rem}
@media(max-width:640px){.mt-acro.met-acro{grid-template-columns:1fr}}