/*
 * Cards do Expert da Semana Elétrica 2026 nas páginas de preço do site
 * (/pricing e /planos_precos). Mesmo visual da LP da promo
 * (/lp-semana-eletrica-26-promo), mas ESCOPADO em .se26: as páginas do site
 * carregam o Bootstrap e a folha da home, e as classes da LP (.btn, .off...)
 * colidiriam. O botão aqui é .se26-btn, nunca .btn.
 *
 * Element: app/View/Elements/pricing/cards_expert_se26.ctp
 */
.se26{
  --ink:#290500;
  --paper:#fefaf8;
  --volt:#ed6b1d;
  --ink-raise:#3a0c03;
  --amber:#ffa35a;
  --filament:#fff0e0;
  --volt-deep:#b9460c;
  --txt-dim:#d7bfb3;
  --txt-mute:#a3857a;
  --line:rgba(254,250,248,.11);
  --card:rgba(33,5,1,.74);
  --f-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-tech:'Oxanium','Sora',system-ui,sans-serif;
  --radius:22px;

  position:relative;
  font-family:var(--f-display);
  color:var(--paper);
  background:radial-gradient(ellipse 90% 70% at 50% 0%, #4a1003 0%, var(--ink) 55%, #160200 100%);
  border-radius:24px;
  padding:34px 28px 30px;
  margin:26px 40px 0;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.se26 *,.se26 *::before,.se26 *::after{box-sizing:border-box}
.se26 [hidden]{display:none!important}

/* faixa de ponta a ponta (/planos_precos): sem margem nem cantos */
.se26.se26-full{margin:0;border-radius:0}

/* faixa que sai do container e ocupa a TELA inteira (/pricing). O conteúdo
   continua centralizado numa coluna de até 1280px pelo padding lateral. A
   página que usa precisa de overflow-x:hidden no body (o 100vw conta a barra
   de rolagem). */
.se26.se26-bleed{
  margin:26px calc(50% - 50vw) 0;
  border-radius:0;
  padding-left:max(28px, calc((100vw - 1280px) / 2));
  padding-right:max(28px, calc((100vw - 1280px) / 2));
  padding-top:40px;padding-bottom:44px;
}

/* arte da campanha no topo da faixa */
.se26-banner{display:block;width:100%;max-width:1280px;height:auto;margin:0 auto 30px;border-radius:14px;
  box-shadow:0 18px 50px rgba(8,0,0,.55)}

/* ---------- cabeçalho da faixa ---------- */
.se26-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.se26-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-tech);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.se26-kicker::before{content:"";width:28px;height:1.5px;background:linear-gradient(90deg,transparent,var(--volt))}
.se26-title{font-size:clamp(22.4px,2.2vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--paper)}
.se26-title .hl{color:var(--volt)}
.se26-sub{font-size:15.2px;color:var(--txt-dim);font-weight:300;margin:8px 0 0;max-width:640px}
.se26-sub b{color:var(--paper);font-weight:600}

.se26-timer{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;
  background:rgba(58,12,3,.6);border:1px solid rgba(237,107,29,.35)}
.se26-timer-label{font-size:12.8px;color:var(--txt-dim);font-weight:400;line-height:1.2}
.se26-cd{display:flex;gap:6px}
.se26-cd-box{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px}
.se26-cd-num{width:100%;height:38px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-tech);
  font-size:17.6px;font-weight:700;color:#fff;background:rgba(237,107,29,.18);border:1px solid rgba(237,107,29,.4);
  font-variant-numeric:tabular-nums}
.se26-cd-lb{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}

/* ---------- grade de cards ---------- */
.se26-grid{display:grid;gap:16px;align-items:stretch}
.se26-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.se26-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1200px;margin-inline:auto}
.se26-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}

.se26 .plano{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 18px 18px;
  box-shadow:0 26px 70px rgba(8,0,0,.6), 0 0 0 1px rgba(237,107,29,.06) inset;
  text-align:left;
}
.se26 .plano.destaque{
  border-color:rgba(237,107,29,.6);
  box-shadow:0 26px 70px rgba(8,0,0,.6), 0 0 0 1px rgba(237,107,29,.22) inset, 0 0 46px rgba(237,107,29,.18);
}
.se26 .plano-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:6px 13px;border-radius:99px;background:linear-gradient(100deg,#c24a0e,#b3410a);
  box-shadow:0 6px 20px rgba(185,70,12,.5);
}
.se26 .plano-tag{font-family:var(--f-tech);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.se26 .plano-nome{font-size:23.2px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:2px 0 4px;color:var(--paper)}
.se26 .plano-desc{font-size:13.76px;color:var(--txt-dim);font-weight:300;margin:0 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.se26 .preco{margin-bottom:14px}
.se26 .preco-de{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14.08px;color:var(--txt-mute)}
.se26 .preco-de s{text-decoration-thickness:1.5px}
.se26 .off{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#2a0500;background:var(--amber);padding:3px 8px;border-radius:6px}
.se26 .preco-parc{font-size:clamp(25.6px,2.1vw,31.2px);font-weight:800;line-height:1;letter-spacing:-.025em;margin-bottom:7px;
  font-variant-numeric:tabular-nums;color:var(--paper)}
.se26 .preco-parc small{font-size:16.8px;font-weight:700;letter-spacing:0;margin-right:2px}
.se26 .preco-parc small.mes{font-size:15.2px;font-weight:600;color:var(--txt-dim);margin-left:2px}
.se26 .preco-sub{font-size:12.8px;color:var(--txt-mute);font-weight:300;margin-top:2px}
.se26 .preco-vista{font-size:13.76px;color:var(--txt-dim);font-weight:300;line-height:1.45}
.se26 .preco-vista b{color:var(--paper);font-weight:700}

.se26 .custo{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center;
  margin-bottom:14px;padding:8px 10px;min-height:54px;border-radius:11px;font-size:12.8px;line-height:1.35;color:#ecdcd3;
  background:rgba(58,12,3,.55);border:1px solid rgba(237,107,29,.25);
}
.se26 .custo b{color:var(--paper);font-weight:700}
.se26 .custo em{font-style:normal;color:var(--amber);font-weight:700}
.se26 .custo span,.se26 .custo em{white-space:nowrap}
.se26 .destaque .custo{background:linear-gradient(135deg,rgba(237,107,29,.2),rgba(58,12,3,.55));border-color:rgba(237,107,29,.45)}

.se26 .inclui{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.se26 .inclui-tit{display:block;margin-bottom:12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.se26 .vant{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.se26 .vant li{position:relative;padding-left:27px;font-size:13.76px;color:#ecdcd3;font-weight:300;line-height:1.45}
.se26 .vant li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:6px;
  background:linear-gradient(135deg,var(--volt),var(--volt-deep));box-shadow:0 0 12px rgba(237,107,29,.4)}
.se26 .vant li::after{content:"";position:absolute;left:5.5px;top:7px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.se26 .vant li b{color:var(--paper);font-weight:600}
.se26 .vant li.no{color:var(--txt-mute);text-decoration:line-through;text-decoration-color:rgba(163,133,122,.7)}
.se26 .vant li.no::before{background:rgba(254,250,248,.06);box-shadow:none;border:1px solid rgba(254,250,248,.16)}
.se26 .vant li.no::after{content:"✕";border:0;transform:none;left:0;top:2px;width:18px;height:18px;line-height:18px;
  text-align:center;font-size:10px;font-weight:700;color:var(--txt-mute)}

/* botão de compra (laranja fechado: texto branco passa no AA) */
.se26 .se26-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 12px;border-radius:13px;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:15.04px;font-weight:700;color:#fff;
  background:linear-gradient(100deg,#c24a0e,#b3410a);
  box-shadow:0 10px 30px rgba(185,70,12,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;
}
.se26 .se26-btn:hover,.se26 .se26-btn:focus{color:#fff;text-decoration:none;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(185,70,12,.6), inset 0 1px 0 rgba(255,255,255,.2)}
.se26 .se26-btn[disabled]{opacity:.7;cursor:wait}
/* Os filhos não recebem clique: o Click ID que chega no GTM é o id do botão. */
.se26 .se26-btn > *{pointer-events:none}
.se26 .se26-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.4;fill:none;flex-shrink:0}
.se26 .btn-nota{font-size:11px;color:var(--txt-mute);text-align:center;margin:11px 0 0;font-weight:300}

/* ---------- "Ver mais planos" ---------- */
.se26-more{text-align:center;margin:26px 0 4px}
.se26-more .se26-more-btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:13px;cursor:pointer;
  font-family:'Sora',system-ui,sans-serif;font-size:15.2px;font-weight:700;
  color:#290500!important;background:#fff!important;border:1.5px solid #ed6b1d!important;line-height:1.2;
  transition:background .18s,color .18s;
}
.se26-more .se26-more-btn:hover,.se26-more .se26-more-btn:focus{background:#ed6b1d!important;color:#fff!important;outline:none}
.se26-more-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .2s}
.se26-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* selo da promoção no card do Expert da tabela completa */
.se26-selo{display:inline-block;margin:0 0 8px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(100deg,#c24a0e,#b3410a)}
.se26-riscado{display:block;font-size:13px;color:#91817d;margin-bottom:2px}
.se26-riscado s{text-decoration-thickness:1.5px}

/* ---------- responsivo ---------- */
@media (max-width:1200px){
  .se26-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px){
  .se26-grid.cols-3{grid-template-columns:minmax(0,1fr);max-width:460px;row-gap:28px}
}
@media (max-width:767px){
  .se26{margin:18px 0 0;padding:26px 16px 22px;border-radius:18px}
  .se26.se26-full{margin:0;border-radius:0}
  .se26.se26-bleed{margin:18px calc(50% - 50vw) 0;border-radius:0;padding-left:16px;padding-right:16px}
  .se26-banner{margin-bottom:22px;border-radius:10px}
  .se26-grid.cols-4,.se26-grid.cols-3,.se26-grid.cols-2{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto;row-gap:28px}
  /* no celular o card em destaque (maior ticket) vem primeiro */
  .se26 .plano.destaque{order:-1}
  .se26-head{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .se26 *,.se26 *::before,.se26 *::after{transition:none!important;animation:none!important}
}