/* ==========================================================================
   SEA ENERGY, Componentes v1.0 (depende de tokens.css)
   Prefixo "se-" para não colidir com o WordPress/plugins.
   ========================================================================== */

.se-container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.se-narrow{max-width:var(--container-narrow)}
.se-section{padding-block:var(--section-y);background:var(--bg);color:var(--ink)}
.se-section--alt{background:var(--bg-alt)}
.se-section--night{background:var(--grad-night)}
.se-grid{display:grid;gap:var(--space-5)}
.se-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.se-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.se-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* ---------- Tipografia utilitária ---------- */
.se-display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.se-lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.55;max-width:62ch}
.se-overline{display:inline-flex;align-items:center;gap:.6rem;font:600 .8125rem/1 var(--font-display);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--link)}
.se-overline::before{content:"";width:1.75rem;height:2px;background:var(--grad-brand);border-radius:2px}
.se-hl{color:var(--sea-blue-400)}
.se-grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.se-num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}

/* ---------- Botões ---------- */
.se-btn{--_bg:var(--accent);--_fg:var(--on-accent);--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.5rem;
  font:600 1rem/1 var(--font-display);letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd);border-radius:var(--radius-btn);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.se-btn:hover{--_bg:var(--accent-hover);color:var(--_fg)}
.se-btn:active{transform:translateY(1px)}
.se-btn svg{width:1.15em;height:1.15em;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.se-btn:hover svg.se-arrow{transform:translateX(3px)}
.se-btn--secondary{--_bg:transparent;--_fg:var(--ink);--_bd:var(--line-strong)}
.se-btn--secondary:hover{--_bg:var(--accent-soft);--_fg:var(--ink);border-color:var(--accent);box-shadow:none}
.se-btn--alert{--_bg:var(--alert);--_fg:var(--on-alert)}
.se-btn--alert:hover{--_bg:var(--signal-400)}
.se-btn--ghost{--_bg:transparent;--_fg:var(--link);padding-inline:.5rem;min-height:44px}
.se-btn--ghost:hover{--_bg:transparent;box-shadow:none;text-decoration:underline;transform:none}
.se-btn--sm{min-height:40px;padding:.55rem 1.1rem;font-size:.9375rem}
.se-btn--lg{min-height:56px;padding:.9rem 1.9rem;font-size:1.0625rem}
.se-btn[disabled],.se-btn[aria-disabled=true]{opacity:.45;pointer-events:none}

/* ---------- Rótulos (planos, sem formato de pílula) ---------- */
.se-badge{display:inline-block;padding:.2rem .5rem;border-radius:2px;font:600 .6875rem/1.3 var(--font-display);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--link);border:1px solid currentColor}
.se-badge--alert{background:var(--alert);color:var(--on-alert);border-color:var(--alert)}
.se-status{display:inline-flex;align-items:center;gap:.6rem;font:500 .875rem/1.2 var(--font-display);letter-spacing:.02em;color:var(--slate-300)}
.se-status::before{content:"";width:.5rem;height:.5rem;background:var(--signal-500);animation:se-pulse 1.8s var(--ease-in-out) infinite}
@keyframes se-pulse{50%{opacity:.25}}

/* ---------- Cabeçalho ---------- */
.se-header{position:sticky;top:0;z-index:50;background:rgba(6,13,31,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
.se-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:76px}
.se-nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);list-style:none;margin:0;padding:0}
.se-nav a{position:relative;display:inline-block;padding:.5rem 0;color:var(--slate-300);font:500 .9375rem/1 var(--font-display);text-decoration:none;transition:color var(--dur-base)}
.se-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.se-nav a:hover,.se-nav a[aria-current=page]{color:#fff}
.se-nav a:hover::after,.se-nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---------- Logo (lockup em HTML; troque por SVG vetorial oficial na entrega) ---------- */
.se-logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;line-height:1}
.se-logo img{height:2.4em;width:auto;flex:none}
.se-logo__txt{display:flex;flex-direction:column;gap:.18em}
.se-logo__name{font:800 1.75em/.9 var(--font-display);letter-spacing:-.045em;color:var(--logo-sea,#fff)}
.se-logo__name b{font-weight:800;color:var(--sea-blue-500)}
.se-logo__tag{font:300 .78em/1 var(--font-display);letter-spacing:.01em;color:var(--logo-tag,var(--slate-300))}
.se-logo--on-light{--logo-sea:var(--navy-800);--logo-tag:var(--slate-600)}

/* ---------- Herói ---------- */
.se-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--grad-night);padding-block:clamp(4rem,3rem + 6vw,8rem)}
.se-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--grad-glow)}
.se-hero__media{position:absolute;inset:0;z-index:-3;opacity:.38}
.se-hero__media img{width:100%;height:100%;object-fit:cover}
.se-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,13,31,.96) 20%,rgba(6,13,31,.55) 100%)}
.se-hero h1{font-size:var(--fs-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:16ch}
.se-hero .se-lead{color:var(--slate-300)}
.se-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* ---------- Cartões ---------- */
.se-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.se-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sea-blue-300)}
.se-card h3{font-size:1.375rem;margin:0}
.se-card p{margin:0;color:var(--ink-soft)}
.se-card__icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--link)}
.se-card__icon svg{width:1.6rem;height:1.6rem}
.se-card__link{margin-top:auto;font:600 .9375rem/1 var(--font-display);color:var(--link);text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.se-card__link:hover{color:var(--link-hover)}
.se-card--media{padding:0;overflow:hidden}
.se-card--media img{aspect-ratio:16/10;width:100%;object-fit:cover}
.se-card--media .se-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-6);flex:1}

/* ---------- Especificações técnicas (kVA, tensão…) ---------- */
.se-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.se-spec{background:var(--surface);padding:var(--space-4)}
.se-spec dt{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem}
.se-spec dd{margin:0;font:700 1.5rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.se-spec dd small{font:500 .875rem var(--font-body);color:var(--muted);margin-left:.2em}

/* ---------- Números de destaque ---------- */
.se-stat{border-left:2px solid var(--sea-blue-500);padding-left:var(--space-4)}
.se-stat__n{font:800 clamp(2.25rem,1.8rem + 2vw,3.5rem)/1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.se-stat__l{color:var(--ink-soft);font-size:var(--fs-small);margin-top:.35rem}

/* ---------- Formulários ---------- */
.se-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-4)}
.se-field label{font:600 .9375rem/1.2 var(--font-display);color:var(--ink)}
.se-field .se-hint{font-size:var(--fs-small);color:var(--muted)}
.se-input,.se-select,.se-textarea{width:100%;min-height:52px;padding:.8rem 1rem;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.se-textarea{min-height:140px;resize:vertical}
.se-input::placeholder,.se-textarea::placeholder{color:var(--muted)}
.se-input:hover,.se-select:hover,.se-textarea:hover{border-color:var(--slate-400)}
.se-input:focus,.se-select:focus,.se-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,96,255,.2)}
.se-field--error .se-input{border-color:var(--red-700)}
.se-field--error .se-hint{color:var(--red-700)}
.se-check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-soft)}
.se-check input{width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--sea-blue-500)}

/* ---------- Avisos ---------- */
.se-alert{display:flex;gap:.8rem;padding:1rem 1.2rem;border-radius:var(--radius-md);border:1px solid var(--line);border-left-width:4px;background:var(--surface);font-size:var(--fs-small)}
.se-alert--info{border-left-color:var(--sea-blue-500);background:var(--sea-blue-50);color:var(--slate-900)}
.se-alert--ok{border-left-color:var(--green-500);background:var(--green-50);color:var(--slate-900)}
.se-alert--warn{border-left-color:var(--signal-500);background:#FFF8E1;color:var(--slate-900)}
.se-alert--err{border-left-color:var(--red-500);background:var(--red-50);color:var(--slate-900)}

/* ---------- FAQ (details nativo, acessível) ---------- */
.se-faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.se-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font:600 1.125rem/1.3 var(--font-display)}
.se-faq summary::-webkit-details-marker{display:none}
.se-faq summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--link);transition:transform var(--dur-base) var(--ease-out)}
.se-faq details[open] summary::after{transform:rotate(45deg)}
.se-faq details p{margin:.8rem 0 0;color:var(--ink-soft)}

/* ---------- Faixa de CTA ---------- */
.se-cta{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:clamp(2rem,1rem + 4vw,4rem);background:var(--grad-brand);color:#fff}
.se-cta::after{content:"";position:absolute;right:-4%;top:-30%;width:42%;aspect-ratio:1;background:url("../img/mark-mono-white.svg") center/contain no-repeat;opacity:.1;transform:rotate(8deg)}
.se-cta h2{color:#fff;max-width:20ch}
.se-cta .se-btn{--_bg:#fff;--_fg:var(--navy-900)}
.se-cta .se-btn:hover{--_bg:var(--signal-500)}

/* ---------- Rodapé ---------- */
.se-footer{background:var(--navy-950);color:var(--slate-300);padding-block:var(--space-8) var(--space-5);font-size:var(--fs-small)}
.se-footer h4{color:#fff;font-size:.9375rem;letter-spacing:.02em}
.se-footer a{color:var(--slate-300);text-decoration:none}.se-footer a:hover{color:#fff;text-decoration:underline}
.se-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}

/* ---------- Acessibilidade ---------- */
.se-skip{position:fixed;left:12px;top:-64px;z-index:100000;background:var(--navy-800);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-md);font-weight:600;text-decoration:none;transition:top .15s}
.se-skip:focus{top:12px}
.se-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Revelar ao rolar (progressivo; sem JS o conteúdo aparece) ---------- */
.se-js .se-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.se-js .se-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.se-js .se-reveal{opacity:1;transform:none}}

/* ---------- Ícones (SVG inline, traço 1.75) ---------- */
.se-icon{width:1.5rem;height:1.5rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.se-btn .se-icon,.se-card__link .se-icon{width:1.15em;height:1.15em}