/* calculadora-de-dano.css -- Calculadora de Dano (calculadora-de-dano.php).
   Visual de "bancada de laboratório": painéis de vidro escuro, fórmula em fonte mono com campos que brilham,
   resultado em destaque. A cor de destaque de cada confronto (--cd) muda com o modo escolhido. */

.cd{ --cd:#9d7cf0; --cd2:#5a8bff; --cd-manual:#f0b34a; }
.cd:has(.cd-modo[data-modo="jp"].is-ativo){ --cd:#9d7cf0; --cd2:#5a8bff; }
.cd:has(.cd-modo[data-modo="pj"].is-ativo){ --cd:#ff6a6a; --cd2:#f0a04a; }
.cd:has(.cd-modo[data-modo="pp"].is-ativo){ --cd:#4fd1b0; --cd2:#5aa9ff; }

/* ---------- Cabeçalho ---------- */
.cd-cabecalho{ text-align:center; max-width:760px; margin:0 auto 1.6rem; }
.cd-cabecalho__eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color: color-mix(in srgb, var(--cd) 80%, white 20%);
  padding:.3rem .9rem; border-radius:999px;
  background: color-mix(in srgb, var(--cd) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cd) 35%, transparent);
}
.cd-cabecalho h1{ margin:.8rem 0 .5rem; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.3rem); color: var(--text-bright); text-wrap:balance; }
.cd-cabecalho h1 em{ font-style:italic; background: linear-gradient(90deg, var(--cd), var(--cd2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-cabecalho p{ margin:0; color: var(--text-dim); font-size:.95rem; text-wrap:pretty; }

/* ---------- Seletor de confronto ---------- */
.cd-modos{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-bottom:1.4rem; }
.cd-modo{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  padding:1rem 1.1rem 1.05rem; text-align:left; cursor:pointer; overflow:hidden;
  color: var(--text); background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--hairline); border-radius:14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cd-modo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg, var(--cd), var(--cd2)); transform: scaleX(0); transform-origin:left; transition: transform .3s ease; }
.cd-modo:hover{ border-color: var(--accent-line); transform: translateY(-1px); }
.cd-modo.is-ativo{
  border-color: color-mix(in srgb, var(--cd) 55%, var(--hairline));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cd) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: 0 12px 34px -16px color-mix(in srgb, var(--cd) 70%, transparent);
}
.cd-modo.is-ativo::after{ transform: scaleX(1); }
.cd-modo__icones{ display:flex; align-items:center; gap:.5rem; font-size:1.15rem; color: var(--text-dim); }
.cd-modo__icones .bi-arrow-right{ font-size:.85rem; opacity:.7; }
.cd-modo.is-ativo .cd-modo__icones{ color: color-mix(in srgb, var(--cd) 80%, white 20%); }
.cd-modo__nome{ font-weight:700; font-size:1.02rem; color: var(--text-bright); }
.cd-modo__desc{ font-size:.78rem; color: var(--text-dim); }
.cd-modo:focus-visible{ outline:2px solid var(--cd); outline-offset:2px; }

/* ---------- Palco ---------- */
.cd-palco{ display:grid; grid-template-columns: minmax(280px, 340px) minmax(0,1fr); gap:1.4rem; align-items:start; }
.cd-lateral{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:1rem; }
.cd-central{ display:flex; flex-direction:column; gap:1.2rem; min-width:0; }

.cd-painel{
  position:relative; padding:1.15rem 1.25rem 1.25rem; min-width:0;
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel-2) 92%, var(--cd) 8%), var(--panel) 55%);
  border:1px solid var(--hairline); border-radius:16px;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
.cd-painel__topo{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem; }
.cd-painel__topo h2{ margin:0; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color: var(--text-bright); }
.cd-painel__tag{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.18rem .6rem; border-radius:999px; color: color-mix(in srgb, var(--cd) 75%, white 25%);
  background: color-mix(in srgb, var(--cd) 12%, transparent); border:1px solid color-mix(in srgb, var(--cd) 30%, transparent);
}
.cd-nota{ margin:.2rem 0 .6rem; font-size:.8rem; color: var(--text-dim); }
.cd-sub-titulo{ margin:1rem 0 .5rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color: var(--text); }
.cd-sub-titulo small{ letter-spacing:0; text-transform:none; font-weight:400; color: var(--text-dim); }

/* ---------- Fórmula ---------- */
.cd-formula-painel{
  padding-top:1.3rem;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cd) 16%, transparent), transparent 60%),
    linear-gradient(170deg, var(--panel-2), var(--panel));
  border-color: color-mix(in srgb, var(--cd) 30%, var(--hairline));
}
.cd-eq{ display:grid; grid-template-columns: 130px auto minmax(0,1fr); gap:.5rem .8rem; align-items:center; padding:.9rem 0; border-top:1px dashed color-mix(in srgb, var(--hairline) 80%, transparent); font-family: var(--font-mono); }
.cd-eq:first-of-type{ border-top:0; padding-top:.2rem; }
.cd-eq__nome{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color: var(--text-dim); font-family: var(--font-body); }
.cd-eq__igual{ font-size:1.5rem; color: var(--cd); font-weight:700; line-height:1; }
.cd-eq__corpo{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.55rem .5rem; min-width:0; }
.cd-eq--final .cd-eq__nome{ color: color-mix(in srgb, var(--cd) 75%, white 25%); }
.cd-op{ font-size:1.35rem; color: var(--text-dim); font-weight:500; padding:0 .05rem 1.1rem; line-height:1; user-select:none; }
.cd-lit{ font-size:1.15rem; font-weight:700; color: var(--text); padding:0 .1rem 1.1rem; line-height:1; }
.cd-chip{
  display:inline-block; padding:.35rem .8rem; margin-bottom:.1rem; font-family: var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.04em;
  color: color-mix(in srgb, var(--cd) 80%, white 20%); border:1px dashed color-mix(in srgb, var(--cd) 45%, transparent); border-radius:8px;
  background: color-mix(in srgb, var(--cd) 8%, transparent);
}

/* Campo editável da fórmula */
.cd-var{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.3rem; margin:0; cursor:text; }
.cd-in{
  min-width:4ch; max-width:16ch; padding:.5rem .55rem; text-align:center;
  font-family: var(--font-mono); font-size:1.15rem; font-weight:700; letter-spacing:.01em; font-variant-numeric: tabular-nums;
  color: var(--text-bright); background: rgba(0,0,0,.42);
  border:1px solid color-mix(in srgb, var(--cd) 40%, var(--hairline)); border-radius:10px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 0 0 0 transparent;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cd-in:hover{ border-color: color-mix(in srgb, var(--cd) 70%, var(--hairline)); }
.cd-in:focus{ outline:none; border-color: var(--cd); background: rgba(0,0,0,.6); box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 0 0 3px color-mix(in srgb, var(--cd) 25%, transparent), 0 0 22px -4px var(--cd); }
.cd-var__rot{ max-width:13ch; font-family: var(--font-body); font-size:.62rem; line-height:1.2; text-align:center; letter-spacing:.03em; color: var(--text-dim); text-wrap:balance; }
.cd-var.is-manual .cd-in{ border-color: var(--cd-manual); color: #ffe2a8; background: color-mix(in srgb, var(--cd-manual) 10%, rgba(0,0,0,.45)); }
.cd-var.is-manual .cd-var__rot{ color: var(--cd-manual); }

.cd-reset{
  position:absolute; top:-9px; right:-9px; width:20px; height:20px; padding:0; display:none; place-items:center;
  font-size:.62rem; line-height:1; color:#241a05; background: var(--cd-manual); border:0; border-radius:50%; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.cd-var.is-manual .cd-reset, .cd-elsel.is-manual .cd-reset{ display:grid; }
.cd-reset:hover{ filter:brightness(1.12); }

/* Elementos */
.cd-elementos{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; padding:1rem 0 .4rem; border-top:1px dashed var(--hairline); }
.cd-elsel{ position:relative; display:flex; flex-direction:column; gap:.3rem; margin:0; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.cd-elsel__caixa{ position:relative; display:flex; align-items:center; }
.cd-elsel__ico{ position:absolute; left:.6rem; width:18px; height:18px; object-fit:contain; pointer-events:none; }
.cd-sel{
  min-width:170px; padding:.5rem .7rem .5rem 2rem; font-size:.85rem; color: var(--text-bright); background: rgba(0,0,0,.42);
  border:1px solid color-mix(in srgb, var(--cd) 40%, var(--hairline)); border-radius:10px;
}
.cd-sel:focus{ outline:none; border-color: var(--cd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd) 25%, transparent); }
.cd-elsel.is-manual .cd-sel{ border-color: var(--cd-manual); }
.cd-elsel.is-manual > span:first-child{ color: var(--cd-manual); }

/* Linha "com os seus números" */
.cd-vivo{
  margin-top:1rem; padding:.85rem 1rem; border-radius:12px; font-family: var(--font-mono); font-size:.86rem; line-height:1.9;
  background: rgba(0,0,0,.35); border:1px solid color-mix(in srgb, var(--cd) 22%, var(--hairline)); overflow-x:auto;
}
.cd-vivo__rot{ display:block; margin-bottom:.15rem; font-family: var(--font-body); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: var(--text-dim); }
.cd-vivo__linha{ color: var(--text); overflow-wrap:anywhere; }
.cd-vivo__linha b{ color: var(--text-bright); }
.cd-vivo__eq, .cd-vivo__x{ color: var(--cd); font-weight:700; }
.cd-vivo__m{ display:inline-block; padding:0 .4rem; border-radius:6px; background: color-mix(in srgb, var(--cd) 14%, transparent); color: var(--text-bright); }
.cd-vivo__fim{ padding:.05rem .55rem; border-radius:6px; background: linear-gradient(90deg, var(--cd), var(--cd2)); color:#0b0e16 !important; }

/* ---------- Parâmetros ---------- */
.cd-grupos{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem 1.4rem; }
.cd-grupo h3{ margin:0 0 .7rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color: var(--text-dim); }
.cd-grupo h3 small{ letter-spacing:0; text-transform:none; font-weight:400; }
.cd-grupo__campos{ display:flex; flex-wrap:wrap; gap:1rem 1rem; }
.cd-grupo__campos .cd-in{ font-size:1rem; }
.cd-grupo__campos--sub{ align-items:flex-end; }
.cd-sub{ display:flex; flex-direction:column; gap:.3rem; margin:0; font-size:.68rem; color: var(--text-dim); min-width:120px; }
.cd-sub input[type=number]{
  width:100%; padding:.45rem .55rem; font-family: var(--font-mono); font-size:.95rem; font-weight:700; color: var(--text-bright);
  background: rgba(0,0,0,.42); border:1px solid var(--hairline); border-radius:8px;
}
.cd-sub input:focus{ outline:none; border-color: var(--cd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd) 22%, transparent); }
.cd-sub--check{ flex-direction:row; align-items:center; gap:.5rem; min-width:0; }
.cd-sub__nota{ flex:1 1 100%; margin:.2rem 0 0; font-size:.74rem; color: var(--text-dim); }
.cd-acordeao{ margin-top:1.1rem; border-top:1px dashed var(--hairline); padding-top:.8rem; }
.cd-acordeao summary{ cursor:pointer; font-size:.8rem; font-weight:600; color: var(--text); list-style:none; display:flex; align-items:center; gap:.5rem; }
.cd-acordeao summary::-webkit-details-marker{ display:none; }
.cd-acordeao summary::after{ content:"\F282"; font-family:"bootstrap-icons"; margin-left:auto; color: var(--text-dim); transition: transform .2s ease; }
.cd-acordeao[open] summary::after{ transform: rotate(180deg); }
.cd-acordeao__corpo{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1.2rem; margin-top:1rem; }

/* ---------- Fontes (coluna lateral) ---------- */
.cd-fontes .cd-painel__topo{ margin-bottom:.8rem; }
.cd-select{ display:flex; flex-direction:column; gap:.3rem; margin:0 0 .7rem; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.cd-select select{ width:100%; }
.cd-check{ display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .8rem; font-size:.82rem; color: var(--text); cursor:pointer; }
.cd-fonte{
  display:flex; align-items:center; gap:.8rem; width:100%; margin-bottom:.7rem; padding:.65rem .8rem; text-align:left; cursor:pointer; color: var(--text);
  background: rgba(0,0,0,.28); border:1px solid var(--hairline); border-radius:12px; transition: border-color .15s ease, background .15s ease;
}
.cd-fonte:hover{ border-color: color-mix(in srgb, var(--cd) 55%, var(--hairline)); background: color-mix(in srgb, var(--cd) 8%, rgba(0,0,0,.28)); }
.cd-fonte__ico{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:10px; background: rgba(255,255,255,.04); color: var(--text-dim); font-size:1.2rem; }
.cd-fonte__ico img{ width:38px; height:38px; object-fit:contain; }
.cd-fonte__txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cd-fonte__txt small{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-dim); }
.cd-fonte__txt b{ color: var(--text-bright); font-size:.95rem; overflow-wrap:anywhere; }
.cd-fonte__txt em{ font-style:normal; font-size:.74rem; color: var(--text-dim); }
.cd-fonte > i{ color: var(--text-dim); }
.cd-alvo-rot{ margin:.4rem 0 .35rem; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-dim); }
.cd-alvo{ margin:0 0 .3rem; }
.cd-passivas{ margin-top:.8rem; }
.cd-mini{
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; font-size:.78rem; font-weight:600; cursor:pointer; color: var(--text);
  background: transparent; border:1px dashed color-mix(in srgb, var(--cd) 45%, var(--hairline)); border-radius:999px;
}
.cd-mini:hover{ background: color-mix(in srgb, var(--cd) 12%, transparent); color: var(--text-bright); }
.cd-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.cd-chip-passiva{ display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .3rem .2rem .7rem; font-size:.74rem; color: var(--text-bright); background: color-mix(in srgb, var(--cd) 16%, transparent); border:1px solid color-mix(in srgb, var(--cd) 35%, transparent); border-radius:999px; }
.cd-chip-passiva button{ display:grid; place-items:center; width:18px; height:18px; padding:0; color: var(--text-dim); background:none; border:0; border-radius:50%; cursor:pointer; }
.cd-chip-passiva button:hover{ background: rgba(255,255,255,.12); color: var(--text-bright); }

/* Condições */
.cd-conds{ display:flex; flex-direction:column; gap:.35rem; }
.cd-cond{ display:flex; align-items:center; gap:.5rem; margin:0; padding:.35rem .6rem; border:1px solid var(--hairline); border-radius:10px; background: rgba(0,0,0,.2); cursor:pointer; }
.cd-cond.is-on{ border-color: color-mix(in srgb, var(--cd) 55%, var(--hairline)); background: color-mix(in srgb, var(--cd) 9%, rgba(0,0,0,.2)); }
.cd-cond.is-imune{ opacity:.5; cursor:not-allowed; }
.cd-cond small{ margin-left:auto; color: var(--text-dim); font-size:.7rem; }
.cd-apl{ display:flex; align-items:center; gap:.7rem; margin-bottom:.45rem; padding:.45rem .6rem; border:1px solid var(--hairline); border-radius:10px; background: rgba(0,0,0,.2); }
.cd-apl label{ display:flex; flex-direction:column; margin:0 0 0 auto; align-items:flex-end; }
.cd-apl input{ width:84px; padding:.3rem .45rem; text-align:right; font-family: var(--font-mono); font-weight:700; color: var(--text-bright); background: rgba(0,0,0,.42); border:1px solid var(--hairline); border-radius:8px; }
.cd-apl small{ font-size:.62rem; color: var(--text-dim); }
.cd-apl__x{ width:26px; height:26px; padding:0; display:grid; place-items:center; color: var(--text-dim); background:none; border:0; border-radius:50%; cursor:pointer; }
.cd-apl__x:hover{ background: rgba(255,255,255,.1); color: var(--text-bright); }
.cd-add{ display:grid; grid-template-columns: 1fr 84px; gap:.5rem; margin-top:.6rem; }
.cd-add select{ grid-column:1; }
.cd-add input{ padding:.4rem .5rem; font-family: var(--font-mono); font-weight:700; color: var(--text-bright); background: rgba(0,0,0,.42); border:1px solid var(--hairline); border-radius:8px; }
.cd-add .montador-btn{ grid-column:1 / -1; justify-content:center; }

/* ---------- Resultado ---------- */
.cd-resultado{ overflow:hidden; }
.cd-hero{
  position:relative; padding:1.5rem 1.4rem 1.3rem; text-align:center; border-radius:14px; overflow:hidden;
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--cd) 28%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border:1px solid color-mix(in srgb, var(--cd) 35%, var(--hairline));
}
.cd-hero__rot{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color: var(--text-dim); }
.cd-hero__num{
  margin:.2rem 0 .1rem; font-family: var(--font-mono); font-weight:800; font-size: clamp(3rem, 8vw, 5rem); line-height:1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 10%, color-mix(in srgb, var(--cd) 55%, white 45%) 90%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--cd) 50%, transparent));
}
.cd-hero__faixa{ display:flex; align-items:center; justify-content:center; gap:.7rem; font-family: var(--font-mono); font-size:.85rem; color: var(--text-dim); }
.cd-hero__faixa i{ display:block; width:min(220px, 40%); height:4px; border-radius:2px; background: linear-gradient(90deg, transparent, var(--cd), var(--cd2), transparent); }
.cd-hero__sub{ margin-top:.6rem; font-size:.85rem; color: var(--text-dim); }
.cd-hero__sub b{ color: var(--cd-manual); font-family: var(--font-mono); }

.cd-metricas{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:.7rem; margin-top:1rem; }
.cd-metricas > div, .cd-escudo > div, .cd-dps__grade > div{ padding:.7rem .85rem; background: rgba(0,0,0,.28); border:1px solid var(--hairline); border-radius:12px; }
.cd-metricas span, .cd-escudo span, .cd-dps__grade span{ display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); }
.cd-metricas b, .cd-escudo b, .cd-dps__grade b{ display:block; margin-top:.15rem; font-family: var(--font-mono); font-size:1.15rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.cd-escudo small{ display:block; font-size:.72rem; color: var(--text-dim); }
.cd-escudo{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:.7rem; margin-top:1rem; }

.cd-golpes{ margin-top:1rem; padding:.85rem 1rem; background: rgba(0,0,0,.28); border:1px solid var(--hairline); border-radius:12px; }
.cd-golpes__topo{ display:flex; justify-content:space-between; font-size:.74rem; color: var(--text-dim); margin-bottom:.55rem; }
.cd-golpes__topo b{ color: var(--text-bright); font-family: var(--font-mono); }
.cd-golpes__barra{ display:flex; gap:3px; height:14px; }
.cd-golpes__barra i{ flex:1 1 0; min-width:3px; border-radius:3px; background: linear-gradient(180deg, var(--cd), var(--cd2)); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--cd) 70%, transparent); }
.cd-golpes small{ display:block; margin-top:.4rem; color: var(--text-dim); font-size:.72rem; }

.cd-extras > div:not(.cd-sub-titulo){ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px solid var(--hairline); font-size:.85rem; }
.cd-extras span{ color: var(--text-dim); }
.cd-extras b{ font-family: var(--font-mono); color: var(--text-bright); }
.cd-extras__total b{ color: var(--cd-manual); }
.cd-dps__grade{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:.7rem; }
.cd-dps__num b{ font-size:1.9rem; background: linear-gradient(90deg, var(--cd), var(--cd2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-conta{ margin-top:1rem; }
.cd-lista-el{ display:grid; place-items:center; width:44px; flex:none; }
.cd-lista-el img{ width:30px; height:30px; }

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px){
  .cd-palco{ grid-template-columns: 1fr; }
  .cd-lateral{ position:static; }
}
@media (max-width: 767.98px){
  .cd-modos{ grid-template-columns: 1fr; }
  .cd-modo{ padding:.8rem 1rem; }
  .cd-eq{ grid-template-columns: auto minmax(0,1fr); }
  .cd-eq__nome{ grid-column:1 / -1; }
  .cd-painel{ padding:1rem .9rem 1.1rem; }
  .cd-in{ font-size:1.05rem; }
}
@media (prefers-reduced-motion: reduce){
  .cd-modo, .cd-modo::after, .cd-in, .cd-acordeao summary::after{ transition:none; }
}