/* =====================================================================
   Tipos de Aços Inoxidáveis — componentes próprios da página
   (usa também os estilos-base de abc-inox.css)
   ===================================================================== */
.abc-nav a { padding: 9px 14px; font-size: .88rem; }
.ti-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.ti-card-lg { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px; box-shadow: var(--shadow-sm); }
.ti-card-lg h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.ti-card-lg p { color: var(--ink-2); line-height: 1.7; }
.ti-key { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-50); color: var(--navy-900) !important; border-radius: 14px; padding: 14px 16px; font-weight: 600; margin: 18px 0 0; line-height: 1.55 !important; }
.ti-key .ico { flex-shrink: 0; color: var(--blue-600); margin-top: 1px; }
.ti-sub { font-weight: 700; color: var(--navy-900); margin: -16px 0 18px; }

/* ---------- 1. Visão geral ---------- */
.ti-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.ti-intro-text p { line-height: 1.7; color: var(--ink-2); }
.ti-elements { list-style: none; padding: 0; margin: 20px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.ti-elements li { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 6px 6px; font-size: .86rem; color: var(--ink-2); }
.ti-elements strong { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-navy); color: #fff; font-family: var(--font-head); font-size: .95rem; }
.ti-fade { position: relative; aspect-ratio: 4 / 3.4; border-radius: 24px; overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-lg); }
.ti-fade-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; display: block; }
.ti-fade-slide.active { opacity: 1; z-index: 1; }
.ti-fade-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease; }
.ti-fade-slide.active img { transform: scale(1); }
.ti-fade-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 26, 48, .85) 0%, rgba(6, 26, 48, 0) 45%); }
.ti-fade-cap { position: absolute; left: 22px; right: 22px; bottom: 40px; z-index: 2; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.ti-fade-cap small { display: block; font-family: var(--font); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7fd3ff; margin-bottom: 6px; font-weight: 700; }
.ti-fade-dots { position: absolute; left: 22px; bottom: 18px; z-index: 3; display: flex; gap: 6px; }
.ti-fade-dots span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .4); transition: .4s; }
.ti-fade-dots span.active { width: 24px; background: var(--accent); }

/* ---------- 2. Classificação ---------- */
.ti-fam-list { list-style: none; counter-reset: f; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.ti-fam-list li { counter-increment: f; }
.ti-fam-list a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--navy-900); font-weight: 600; transition: .2s; }
.ti-fam-list a::before { content: counter(f, decimal-leading-zero); font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--accent-600); }
.ti-fam-list a:hover { background: var(--accent-50); color: var(--blue-600); }
.ti-balance { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 20px 0; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #f4f9ff, #e8f2fc); }
.ti-bal-side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ti-bal-side strong { font-family: var(--font-head); color: var(--navy-900); }
.ti-bal-atoms { display: flex; gap: 6px; }
.ti-bal-atoms b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .25), inset 4px 4px 8px rgba(255, 255, 255, .35); }
.ti-bal-atoms .cr { background: #2f74c8; } .ti-bal-atoms .mo { background: #7a5cc4; } .ti-bal-atoms .ni { background: #3f9a52; } .ti-bal-atoms .n { background: #c4762f; }
.ti-bal-arrow .ico { transform: rotate(90deg); color: var(--blue-600); }
.ti-bal-vs { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.ti-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 16px; }
.ti-flow span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: var(--navy-900); color: #fff; border-radius: 14px; padding: 12px 8px; font-weight: 700; font-size: .84rem; line-height: 1.2; height: 100%; }
.ti-flow i { color: var(--accent-600); display: grid; }
.ti-nest { margin: 6px 0 22px; font-size: .9rem; }
.ti-nest small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .75; margin-bottom: 2px; }
.ti-nest strong { font-family: var(--font-head); font-size: 1.1rem; }
.ti-nest-l1 { background: var(--grad-navy); color: #fff; border-radius: 18px; padding: 16px; }
.ti-nest-l2 { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 14px; margin-top: 12px; }
.ti-nest-l3 { background: #fff; color: var(--navy-900); border-radius: 12px; padding: 12px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ti-nest-l3 small { width: 100%; color: var(--muted); opacity: 1; }
.ti-nest-l3 span { background: var(--accent-50); color: var(--blue-600); font-weight: 700; border-radius: 8px; padding: 5px 10px; font-size: .85rem; }

/* ---------- Sanfonas (base) ---------- */
.ti-acc-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 72px); transition: box-shadow .2s; }
.ti-acc-item.open { box-shadow: var(--shadow); border-color: #cfe0f1; }
.ti-acc-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; text-align: left; font: inherit; color: var(--navy-900); cursor: pointer; padding: 16px 20px; }
.ti-acc-head:hover { background: #fafcff; }
.ti-acc-ico { margin-left: auto; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--navy-900); transition: .25s; }
.ti-acc-item.open .ti-acc-ico { transform: rotate(180deg); background: var(--navy-900); color: #fff; }
.ti-acc-body { display: none; padding: 4px 24px 26px; }
.ti-acc-item.open .ti-acc-body { display: block; animation: abcIn .3s ease; }

/* ---------- 3. Famílias ---------- */
.ti-acc-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 14px; overflow: hidden; }
.ti-acc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ti-acc-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-acc-title strong { font-family: var(--font-head); font-size: 1.2rem; }
.ti-acc-title small { color: var(--muted); font-size: .88rem; }
.ti-fam-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; padding: 22px 0; border-top: 1px solid var(--line); align-items: start; }
.ti-fam-row:first-child { border-top: 0; }
.ti-fam-row h3 { font-size: 1.08rem; margin-bottom: 10px; }
.ti-fam-row p { color: var(--ink-2); line-height: 1.7; margin: 0; }
.ti-fam-box { background: var(--bg-soft); border-radius: 16px; padding: 18px 20px; }
.ti-fam-box .abc-check { list-style: none; margin: 0; padding: 0; }
.ti-fam-box .abc-check li { padding: 8px 0; font-size: .95rem; }
.ti-fam-duo { grid-template-columns: 1fr 1fr; }
.ti-fam-mini { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.ti-mini-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-50); color: var(--blue-600); margin-bottom: 10px; }
.ti-classes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ti-classes li { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ti-classes strong { display: block; font-family: var(--font-head); font-size: 1.15rem; color: var(--navy-900); }
.ti-classes span { font-size: .86rem; color: var(--muted); }
.ti-fam-fig { margin: 0; position: relative; }
.ti-fam-fig img { display: block; width: 100%; border-radius: 16px; }
.ti-fam-photo { aspect-ratio: 4 / 3; object-fit: cover; }
.ti-fam-fig.has-photo .ti-fam-micro { position: absolute; right: 12px; bottom: 34px; width: 42%; border: 3px solid #fff; box-shadow: var(--shadow); border-radius: 12px; }
.ti-fam-fig figcaption { font-size: .8rem; color: var(--muted); margin-top: 8px; }

/* ---------- 4. Observação técnica ---------- */
.ti-warning { margin-top: 40px; background: #fffaf0; border: 1px solid #f1ddb0; border-radius: 22px; padding: 30px 32px; }
.ti-warning-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ti-warning-head span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--warning); color: #fff; flex-shrink: 0; }
.ti-warning-head h2 { margin: 0; font-size: 1.45rem; }
.ti-warning p { color: var(--ink-2); line-height: 1.7; }
.ti-myths { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.ti-myths li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid #f3e6c9; color: var(--ink-2); font-size: .95rem; }
.ti-myths li span { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--danger-50); color: var(--danger); margin-top: 1px; }

/* ---------- 5. Comparação ---------- */
.ti-cmp-head { padding: 14px 18px; }
.ti-cmp-head strong { font-family: var(--font-head); font-size: 1.04rem; }
.ti-cmp-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-navy); color: #fff; flex: 0 0 40px; }
.ti-cmp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ti-cmp-cell { background: var(--bg-soft); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ti-cmp-cell small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-600); }
.ti-cmp-cell span { color: var(--navy-900); font-weight: 600; line-height: 1.45; font-size: .94rem; }
.ti-scale { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; }
.ti-scale b { flex: 1; height: 6px; border-radius: 4px; background: #d9e3ee; }
.ti-scale b.on { background: linear-gradient(90deg, var(--accent), var(--blue-600)); }
.ti-cmp-actions { display: flex; justify-content: flex-end; margin: 6px 0 4px; }
.ti-foot { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }

/* ---------- 6. Nomenclatura ---------- */
.ti-names { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ti-name { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); }
.ti-name p { color: var(--ink-2); line-height: 1.65; }
.ti-name-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ti-name-badge { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--grad-navy); border-radius: 12px; padding: 8px 16px; letter-spacing: .04em; }
.ti-name-ex { font-size: .85rem; color: var(--muted); font-weight: 600; text-align: right; }
.ti-name-note { font-size: .92rem; background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 0; }
.ti-series { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ti-series span { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: .88rem; color: var(--muted); }
.ti-series strong { display: block; color: var(--navy-900); font-family: var(--font-head); }
.ti-eq { margin: 0 0 14px; display: grid; gap: 6px; }
.ti-eq div { display: grid; grid-template-columns: 110px 1fr; align-items: center; border-radius: 10px; background: var(--bg-soft); overflow: hidden; }
.ti-eq dt { font-weight: 800; color: #fff; background: var(--navy-900); padding: 8px 12px; font-family: var(--font-head); height: 100%; display: flex; align-items: center; }
.ti-eq dd { margin: 0; padding: 8px 12px; color: var(--navy-900); font-weight: 600; font-size: .92rem; }
.ti-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.ti-formula span { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.ti-formula span.ok { background: var(--success-50); border-color: #bfe6d5; color: var(--success); }
.ti-formula b { color: var(--accent-600); font-size: 1.2rem; }
.ti-name-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; background: linear-gradient(135deg, #fff, #f1f7fd); }
.ti-name-wide h3 { font-size: 1.35rem; }
.ti-name-L { aspect-ratio: 1; border-radius: 22px; background: var(--grad-navy); color: #fff; display: grid; place-content: center; text-align: center; font-family: var(--font-head); }
.ti-name-L span { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.ti-name-L b { font-size: 4.2rem; line-height: 1; color: #7fd3ff; }
.ti-name-L small { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* ---------- 7. Diferenças ---------- */
.ti-vs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.ti-vs-tabs { display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(var(--header-h) + 80px); }
.ti-vs-tabs button { text-align: left; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #fff; border-radius: 14px; padding: 14px 18px; cursor: pointer; font: inherit; transition: .2s; }
.ti-vs-tabs button:hover { background: rgba(255, 255, 255, .12); }
.ti-vs-tabs button.active { background: #fff; color: var(--navy-900); border-color: #fff; box-shadow: var(--shadow-lg); }
.ti-vs-pair { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; }
.ti-vs-pair i { font-style: normal; font-weight: 500; opacity: .6; font-size: .9rem; }
.ti-vs-tabs small { display: block; font-size: .8rem; opacity: .7; margin-top: 2px; }
.ti-vs-acc { display: none; }
.ti-vs-item { display: none; }
.ti-vs-item.open { display: block; }
.ti-vs-panel { background: #fff; color: var(--ink); border-radius: 22px; padding: 32px; box-shadow: var(--shadow-lg); animation: abcIn .3s ease; }
.ti-vs-panel p { color: var(--ink-2); line-height: 1.7; }
.ti-vs-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 18px; }
.ti-vs-duel div { background: var(--bg-soft); border-radius: 16px; padding: 16px; text-align: center; }
.ti-vs-duel strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--navy-900); line-height: 1.1; }
.ti-vs-duel small { color: var(--muted); font-weight: 600; }
.ti-vs-duel > span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-family: var(--font-head); }
.ti-vs-key { display: inline-flex !important; align-items: center; gap: 8px; background: var(--accent-50); color: var(--blue-600) !important; border-radius: 999px; padding: 8px 14px; font-size: .9rem; font-weight: 600; }

/* ---------- 8. Como escolher ---------- */
.ti-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.ti-factor p { margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.ti-factor p:last-child { margin-bottom: 0; }
.ti-tags { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ti-tags li { background: var(--accent-50); color: var(--blue-600); font-weight: 600; font-size: .82rem; border-radius: 999px; padding: 5px 11px; }

/* ---------- 9. Principais tipos ---------- */
.ti-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ti-filter button { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .9rem; cursor: pointer; transition: .2s; }
.ti-filter button:hover { border-color: var(--accent); color: var(--blue-600); }
.ti-filter button.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.ti-grades .ti-acc-item { margin-bottom: 8px; border-radius: 14px; }
.ti-grade-head { display: grid; grid-template-columns: 150px 130px 170px minmax(0, 1fr) 36px; gap: 14px; padding: 12px 16px; }
.ti-grade-name { font-family: var(--font-head); font-size: 1.15rem; }
.ti-grade-fam { justify-self: start; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.fam-aust { background: #e3f0ff; color: #1b5fae; } .fam-ferr { background: #ecf5e8; color: #2f7a3a; } .fam-mart { background: #f3ecfb; color: #6a40b0; } .fam-dup { background: #fff1e2; color: #a65a14; } .fam-ph { background: #fde8ee; color: #b0304f; }
.ti-grade-liga { font-weight: 700; color: var(--blue-600); font-size: .92rem; }
.ti-grade-car { color: var(--ink-2); font-size: .92rem; }
.ti-grade-head .ti-acc-ico { margin-left: 0; }
.ti-grade-body { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ti-grade-body div { background: var(--bg-soft); border-radius: 12px; padding: 12px 14px; }
.ti-grade-body div.warn { background: var(--warning-50); }
.ti-grade-body dt { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ti-grade-body div.warn dt { color: var(--warning); }
.ti-grade-body dd { margin: 0; color: var(--navy-900); font-weight: 600; font-size: .94rem; line-height: 1.45; }

/* ---------- 10. Melhor / avaliação ---------- */
.ti-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 20px; }
.ti-sum span { background: var(--navy-900); color: #fff; border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: .88rem; }
.ti-sum b { color: var(--accent-600); font-size: 1.1rem; }
.ti-examples { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ti-examples li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink-2); font-size: .93rem; }
.ti-examples li > span { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-50); color: var(--blue-600); }
.ti-examples strong { display: block; color: var(--navy-900); }
.ti-alert-card { background: linear-gradient(180deg, #fff, #fffaf0); border-color: #f1ddb0; }
.ti-flags { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ti-flags li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); background: #fff; border: 1px solid #f3e6c9; border-radius: 10px; padding: 9px 10px; }
.ti-flags li span { flex: 0 0 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--warning-50); color: var(--warning); }

/* ---------- 11. Fechamento ---------- */
.ti-closing { background: var(--grad-navy); color: rgba(255, 255, 255, .85); padding: 84px 0; text-align: center; position: relative; overflow: hidden; }
.ti-closing .container { max-width: 900px; position: relative; }
.ti-closing .eyebrow { color: #7fd3ff; }
.ti-closing-lead { font-family: var(--font-head); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; color: #fff; line-height: 1.35; }
.ti-closing-fams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 30px 0; }
.ti-closing-fams a { display: block; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); transition: transform .2s; }
.ti-closing-fams a:hover { transform: translateY(-4px); }
.ti-closing-fams img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ti-closing-fams span { display: block; padding: 10px 6px; color: #fff; font-weight: 700; font-size: .85rem; }
.ti-closing p { line-height: 1.7; }
.ti-closing-quote { display: inline-block; margin-top: 18px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; border-top: 2px solid var(--accent); padding-top: 16px; }

/* ---------- 12. Referências ---------- */
.ti-refs-sec { padding: 48px 0 70px; }
.ti-refs { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 24px; max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.ti-refs summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 18px 0; color: var(--navy-900); }
.ti-refs summary::-webkit-details-marker { display: none; }
.ti-refs summary > span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-50); color: var(--blue-600); }
.ti-refs summary small { margin-left: auto; color: var(--muted); }
.ti-refs summary > .ico { transition: .25s; }
.ti-refs[open] summary > .ico { transform: rotate(180deg); }
.ti-refs[open] summary small { display: none; }
.ti-refs p, .ti-refs li { color: var(--ink-2); font-size: .94rem; line-height: 1.65; }
.ti-refs ul { margin: 0 0 22px; padding-left: 20px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .ti-grade-head { grid-template-columns: 120px 120px minmax(0, 1fr) 36px; }
  .ti-grade-car { display: none; }
  .ti-cmp-grid { grid-template-columns: repeat(3, 1fr); }
  .ti-factors { grid-template-columns: repeat(2, 1fr); }
  .ti-grade-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .ti-intro, .ti-two { grid-template-columns: 1fr; gap: 32px; }
  .ti-fade { max-width: 640px; width: 100%; margin: 0 auto; }
  .ti-vs { grid-template-columns: 1fr; }
  .ti-vs-tabs { display: none; }
  .ti-vs-item { display: block; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); margin-bottom: 10px; overflow: hidden; }
  .ti-vs-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; color: #fff; font: inherit; font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; padding: 16px 18px; cursor: pointer; text-align: left; }
  .ti-vs-acc .ico { transition: .25s; }
  .ti-vs-item.open .ti-vs-acc .ico { transform: rotate(180deg); }
  .ti-vs-panel { display: none; border-radius: 0; box-shadow: none; padding: 22px 18px; }
  .ti-vs-item.open .ti-vs-panel { display: block; }
  .ti-closing-fams { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .ti-fam-row, .ti-fam-duo { grid-template-columns: 1fr; gap: 18px; }
  .ti-myths, .ti-flags, .ti-names { grid-template-columns: 1fr; }
  .ti-name-wide { grid-template-columns: 1fr; }
  .ti-name-L { max-width: 180px; }
  .ti-grade-head { grid-template-columns: minmax(0, 1fr) auto 36px; row-gap: 4px; }
  .ti-grade-liga { grid-column: 1 / 2; grid-row: 2; }
  .ti-grade-fam { grid-column: 2; grid-row: 1; justify-self: end; }
  .ti-grade-head .ti-acc-ico { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .ti-card-lg { padding: 24px 20px; }
  .ti-acc-head { gap: 12px; padding: 14px; }
  .ti-acc-thumb { width: 48px; height: 48px; flex-basis: 48px; }
  .ti-acc-title strong { font-size: 1.05rem; }
  .ti-acc-body { padding: 4px 16px 20px; }
  .ti-cmp-grid { grid-template-columns: 1fr 1fr; }
  .ti-cmp-grid .ti-cmp-cell:last-child { grid-column: 1 / -1; }
  .ti-classes, .ti-factors, .ti-grade-body, .ti-series { grid-template-columns: 1fr; }
  .ti-warning { padding: 22px 18px; }
  .ti-balance { grid-template-columns: 1fr; }
  .ti-bal-vs { text-align: center; }
  .ti-eq div { grid-template-columns: 96px 1fr; }
  .ti-closing-fams { grid-template-columns: repeat(2, 1fr); }
  .ti-closing-fams a:last-child { grid-column: 1 / -1; }
  .ti-vs-duel strong { font-size: 1.5rem; }
  .ti-fam-fig.has-photo .ti-fam-micro { width: 48%; }
  .ti-alert-card .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ti-fade-slide, .ti-fade-slide img { transition: none; } }