/* V36 · Tutorial Margen Real MLA */
.tutorial-page{display:grid;gap:18px}.tutorial-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:stretch;padding:24px;border-radius:26px;background:radial-gradient(circle at top right,rgba(58,163,255,.26),transparent 34%),linear-gradient(135deg,rgba(9,20,38,.96),rgba(13,31,61,.92));border:1px solid rgba(58,163,255,.24);box-shadow:0 22px 70px rgba(0,0,0,.22)}.tutorial-hero h1{margin:6px 0 8px;color:var(--white);font-size:clamp(26px,4vw,42px);letter-spacing:-.04em}.tutorial-hero p{margin:0;color:#c9d8ea;font-size:16px;line-height:1.55;max-width:760px}.tutorial-hero-card{display:grid;align-content:center;gap:8px;min-height:150px;padding:18px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.tutorial-hero-card small{color:#8fc7ff;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.tutorial-hero-card strong{color:#fff;font-size:20px}.tutorial-hero-card span{color:#c9d8ea;line-height:1.4}.tutorial-quick-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tutorial-quick-start article{display:grid;gap:8px;padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}.tutorial-quick-start span{width:34px;height:34px;display:grid;place-items:center;border-radius:13px;color:#061629;font-weight:1000;background:linear-gradient(135deg,#9fd8ff,#6be7c8)}.tutorial-quick-start strong{color:var(--text);font-size:16px}.tutorial-quick-start small{color:var(--muted);line-height:1.35}.tutorial-important-box{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px;border-radius:22px;border:1px solid rgba(245,158,11,.30);background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(58,163,255,.08))}.tutorial-important-box strong{display:block;color:var(--text);font-size:18px;margin-bottom:4px}.tutorial-important-box p{margin:0;color:var(--muted);line-height:1.45}.tutorial-accordion{display:grid;gap:12px}.tutorial-accordion-item{overflow:hidden;border-radius:20px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow)}.tutorial-accordion-item.featured{border-color:rgba(245,158,11,.40);box-shadow:0 20px 54px rgba(245,158,11,.10)}.tutorial-accordion-item>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px 18px}.tutorial-accordion-item>summary::-webkit-details-marker{display:none}.tutorial-item-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;background:rgba(58,163,255,.11);border:1px solid rgba(58,163,255,.20)}.tutorial-accordion-item.featured .tutorial-item-icon{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.25)}.tutorial-accordion-item summary strong{color:var(--text);font-size:17px}.tutorial-accordion-item summary em{font-style:normal;font-size:12px;color:var(--muted);font-weight:900}.tutorial-accordion-item[open] summary{border-bottom:1px solid var(--border)}.tutorial-accordion-item[open] summary em{color:#8fc7ff}.tutorial-item-body{padding:18px;color:var(--muted);line-height:1.6}.tutorial-item-body p{margin:0 0 12px}.tutorial-item-body p:last-child{margin-bottom:0}.tutorial-item-body ul{margin:0 0 12px;padding-left:18px}.tutorial-item-body li{margin:6px 0}.tutorial-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.tutorial-mini-grid div,.tutorial-callout>div{display:grid;gap:4px;padding:13px;border-radius:15px;background:rgba(58,163,255,.08);border:1px solid rgba(58,163,255,.16)}.tutorial-mini-grid b,.tutorial-callout strong{color:var(--text)}.tutorial-mini-grid span,.tutorial-callout span{color:var(--muted);font-size:13px}.tutorial-callout.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.tutorial-formula{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}.tutorial-formula span{padding:8px 10px;border-radius:12px;background:rgba(58,163,255,.10);color:var(--text);font-weight:800}.tutorial-formula b{color:#8fc7ff}.tutorial-example{margin:14px 0;padding:15px;border-radius:18px;background:rgba(93,242,168,.08);border:1px solid rgba(93,242,168,.22)}.tutorial-example strong,.tutorial-example b{color:var(--text)}.tutorial-warning{padding:12px;border-radius:15px;color:#ffe5b1!important;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28)}@media (max-width:820px){.tutorial-hero{grid-template-columns:1fr;padding:20px}.tutorial-quick-start{grid-template-columns:1fr}.tutorial-important-box{display:grid}.tutorial-important-box .btn{width:100%}.tutorial-mini-grid,.tutorial-callout.split{grid-template-columns:1fr}.tutorial-accordion-item>summary{padding:15px}}