/* ==========================================================================
   Ocean Brazil — Design System
   Paleta: verde escuro #194958, verde #5fc8ae, preto/cinza técnico.
   Tipografia: Barlow Condensed (títulos, industrial/condensada) + Titillium Web (corpo).
   ========================================================================== */

:root {
  --c-primary: #194958;
  --c-primary-dark: #0e2c35;
  --c-primary-light: #2a6376;
  --c-accent: #5fc8ae;
  --c-accent-dark: #3fa189;
  --c-accent-light: #8fe0cb;
  --c-black: #10161a;
  --c-ink: #1c2429;
  --c-gray-900: #22303a;
  --c-gray-700: #46595f;
  --c-gray-500: #6f8288;
  --c-gray-300: #c3d0d2;
  --c-gray-100: #eef3f2;
  --c-white: #ffffff;
  --c-online: #35c76b;
  --c-offline: #d3593f;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Titillium Web', 'Segoe UI', sans-serif;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 2px 10px rgba(16, 22, 26, 0.08);
  --shadow-md: 0 10px 30px rgba(16, 22, 26, 0.14);
  --shadow-lg: 0 24px 60px rgba(16, 22, 26, 0.22);
  --container-w: 1240px;
  --header-h: 128px;
  --main-nav-h: 75px;
  --hero-gradient: linear-gradient(118deg, var(--c-primary-dark) 0%, var(--c-primary) 34%, var(--c-accent-dark) 72%, var(--c-accent-light) 100%);
  --hero-gradient-overlay: linear-gradient(102deg, rgba(14,44,53,0.96) 0%, rgba(25,73,88,0.88) 38%, rgba(63,161,137,0.68) 72%, rgba(143,224,203,0.42) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-primary);
  margin: 0 0 12px;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.35rem; letter-spacing: 0.01em; }
p { line-height: 1.65; color: var(--c-gray-900); margin: 0 0 16px; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }

.section { padding: 88px 0; }
.section--muted { background: var(--c-gray-100); }
.section--dark { background: var(--c-primary); color: var(--c-white); }
.section--dark h2, .section--dark h3 { color: var(--c-white); }
.section--dark p { color: rgba(255,255,255,0.82); }
.section__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.section--dark .section__eyebrow { color: var(--c-accent-light); }
.section-head { max-width: 720px; margin: 0 0 44px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.btn, .main-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: 3px;
  border: none;
  background: var(--c-accent);
  color: var(--c-primary-dark);
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.btn:hover, .main-nav__cta:hover { background: var(--c-accent-dark); color: var(--c-white); transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--c-white);
}
.btn--outline:hover { background: rgba(255,255,255,0.12); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }
.btn--block { width: 100%; justify-content: center; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

.image-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16, 22, 26, 0.7);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}
.image-note::before {
  content: 'i';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  font-size: 0.65rem;
  font-weight: 800;
}
.image-note--compact {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  font-size: 0.62rem;
}

/* ---------- Top header ---------- */
.top-header { background: var(--c-black); color: var(--c-gray-300); font-size: 0.86rem; }
.top-header__inner {
  max-width: var(--container-w); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.top-header__left, .top-header__right { display: flex; align-items: center; gap: 20px; }
.top-header__link { display: inline-flex; align-items: center; gap: 8px; color: var(--c-gray-300); transition: color 0.15s; }
.top-header__link:hover { color: var(--c-accent); }
.top-header__social { display: flex; align-items: center; gap: 14px; }
.top-header__social a { color: var(--c-gray-300); font-size: 0.95rem; }
.top-header__social a:hover { color: var(--c-accent); }

.attendance-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.attendance-badge__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.attendance-badge__dot.is-online { background: var(--c-online); box-shadow: 0 0 0 0 rgba(53,199,107,0.6); animation: pulse-online 1.8s infinite; }
.attendance-badge__dot.is-offline { background: var(--c-offline); }
@keyframes pulse-online {
  0% { box-shadow: 0 0 0 0 rgba(53,199,107,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(53,199,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,199,107,0); }
}

.lang-switch { display: flex; align-items: center; gap: 10px; }
.lang-switch a { display: inline-flex; align-items: center; gap: 5px; color: var(--c-gray-300); font-weight: 600; opacity: 0.65; }
.lang-switch a.is-active, .lang-switch a:hover { opacity: 1; color: var(--c-accent); }
.lang-switch .fi { border-radius: 2px; }

/* ---------- Main nav ---------- */
.main-nav { background: var(--c-white); border-bottom: 1px solid var(--c-gray-300); position: sticky; top: 0; z-index: 60; }
.main-nav__inner { max-width: var(--container-w); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.main-nav__logo img { height: 46px; width: auto; }
.main-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.main-nav__toggle span { width: 26px; height: 3px; background: var(--c-primary); border-radius: 2px; }
.main-nav__menu { display: flex; align-items: center; gap: 30px; }
.main-nav__link {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1rem; color: var(--c-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.main-nav__link:hover { color: var(--c-accent-dark); border-color: var(--c-accent); }
.main-nav__caret { font-size: 0.7em; }
/* padding-bottom + margin-bottom negativo estende a área hover do item até a borda
   inferior real do .main-nav (75px, fixo — ver comentário mais abaixo), sem alterar a
   altura da barra: o dropdown (top:100%) então nasce exatamente na base da hero, em vez
   de logo abaixo do texto "CABOS", e o mouse nunca atravessa um gap morto ao descer. */
.main-nav__item--dropdown { position: relative; padding-bottom: 19.5px; margin-bottom: -19.5px; }
.main-nav__dropdown {
  position: absolute; top: 100%; left: -18px; min-width: 260px; background: var(--c-white);
  border: 1px solid var(--c-gray-300); border-top: 3px solid var(--c-accent); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md); padding: 10px; display: none; flex-direction: column; gap: 2px;
}
.main-nav__item--dropdown:hover .main-nav__dropdown,
.main-nav__item--dropdown.is-open .main-nav__dropdown { display: flex; }
.main-nav__dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 3px; font-weight: 600; font-size: 0.95rem; color: var(--c-ink);
}
.main-nav__dropdown a i { width: 18px; text-align: center; color: var(--c-accent-dark); }
.main-nav__dropdown a:hover { background: var(--c-gray-100); color: var(--c-primary); }
.main-nav__dropdown-highlight { color: var(--c-accent-dark) !important; border-top: 1px solid var(--c-gray-300); margin-top: 4px; padding-top: 12px !important; }
.main-nav__cta { border: none; }

/* ---------- Hero (Home, 5-slide slider) ---------- */
.hero-slider { position: relative; height: 640px; max-height: 82vh; overflow: hidden; background: var(--c-primary-dark); }
.hero-slider__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease;
  background-size: cover; background-position: center;
}
.hero-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero-slider__slide--nautico { background-position: center 34%; }
.hero-slider__slide--ul { background-position: center center; }
.hero-slider__slide--naval { background-position: 62% center; }
.hero-slider__slide--ferroviario { background-position: 58% center; }
.hero-slider__slide--portuario { background-position: center center; }
.hero-slider__slide--placeholder {
  background:
    radial-gradient(circle at 18% 24%, rgba(143,224,203,0.22), transparent 40%),
    radial-gradient(circle at 86% 12%, rgba(255,255,255,0.12), transparent 24%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 34px),
    var(--hero-gradient);
}
.hero-slider__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 26, 19, 0.94) 0%, rgba(7, 30, 22, 0.84) 38%, rgba(8, 34, 25, 0.62) 70%, rgba(8, 34, 25, 0.42) 100%);
}
.hero-slider__slide--nautico .hero-slider__scrim {
  background:
    linear-gradient(90deg, rgba(6, 26, 19, 0.94) 0%, rgba(7, 30, 22, 0.84) 38%, rgba(8, 34, 25, 0.62) 70%, rgba(8, 34, 25, 0.42) 100%),
    radial-gradient(circle at 78% 20%, rgba(143, 224, 203, 0.1), transparent 28%);
}
.hero-slider__slide--naval .hero-slider__scrim {
  background:
    linear-gradient(90deg, rgba(6, 26, 19, 0.94) 0%, rgba(7, 30, 22, 0.84) 38%, rgba(8, 34, 25, 0.62) 70%, rgba(8, 34, 25, 0.42) 100%),
    radial-gradient(circle at 76% 62%, rgba(255, 255, 255, 0.08), transparent 24%);
}
.hero-slider__slide--ferroviario .hero-slider__scrim {
  background:
    linear-gradient(90deg, rgba(6, 26, 19, 0.94) 0%, rgba(7, 30, 22, 0.84) 38%, rgba(8, 34, 25, 0.62) 70%, rgba(8, 34, 25, 0.42) 100%),
    radial-gradient(circle at 24% 38%, rgba(255, 140, 56, 0.12), transparent 22%);
}
.hero-slider__slide--portuario .hero-slider__scrim {
  background:
    linear-gradient(90deg, rgba(6, 26, 19, 0.94) 0%, rgba(7, 30, 22, 0.84) 38%, rgba(8, 34, 25, 0.62) 70%, rgba(8, 34, 25, 0.42) 100%),
    radial-gradient(circle at 82% 38%, rgba(255, 191, 72, 0.14), transparent 28%);
}
.hero-slider__content { position: relative; z-index: 3; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 640px; }
.hero-slider__eyebrow { font-family: var(--font-display); color: var(--c-accent); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; font-size: 0.95rem; }
.hero-slider__title { color: var(--c-white); font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 18px; }
.hero-slider__text { color: rgba(255,255,255,0.88); font-size: 1.1rem; max-width: 520px; margin-bottom: 28px; }
.hero-slider__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-slider__nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4); color: var(--c-white); display: flex; align-items: center; justify-content: center; }
.hero-slider__nav:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary-dark); }
.hero-slider__nav--prev { left: 24px; }
.hero-slider__nav--next { right: 24px; }
.hero-slider__progress {
  position: absolute; z-index: 4; left: 0; right: 0; top: 0;
  width: 100%; height: 5px;
  background: rgba(255,255,255,0.18); overflow: hidden;
}
.hero-slider__progress-bar {
  display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #d12e2e 0%, #ef4b4b 100%);
  box-shadow: 0 0 18px rgba(209, 46, 46, 0.35);
}
.hero-slider__dots { position: absolute; z-index: 4; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-slider__dot { width: 34px; height: 4px; background: rgba(255,255,255,0.35); border: none; border-radius: 2px; }
.hero-slider__dot.is-active { background: var(--c-accent); }
@media (max-width: 720px) {
  .hero-slider { height: 540px; }
  .hero-slider__nav { display: none; }
  .hero-slider__progress { height: 4px; }
}

/* ---------- Page hero (internal pages) ---------- */
.page-hero { position: relative; background: var(--hero-gradient); padding: 96px 0 56px; overflow: hidden; }
.page-hero__canvas { position: absolute; inset: 0; opacity: 0.35; }
.page-hero__scrim { position: absolute; inset: 0; background: var(--hero-gradient-overlay); }
.page-hero__content { position: relative; z-index: 2; }
.page-hero__layout { display: block; }
.page-hero__copy { min-width: 0; max-width: 760px; }
.page-hero__copy--compact .page-hero__title { margin-bottom: 0; }
.page-hero__eyebrow { font-family: var(--font-display); color: var(--c-accent); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; }
.page-hero__title { color: var(--c-white); margin-bottom: 10px; }
.page-hero__subtitle { color: rgba(255,255,255,0.85); max-width: 640px; font-size: 1.05rem; margin: 0; }

/* ---------- Empresa ---------- */
.empresa-story { display: grid; gap: 24px; align-content: start; }
.empresa-story__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.empresa-story__card {
  position: relative;
  border-radius: 18px;
  padding: 24px 24px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,250,0.98) 100%);
  box-shadow: 0 18px 40px rgba(16, 22, 26, 0.1);
}
.empresa-story__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(95,200,174,0.16) 100%);
}
.empresa-story__card h3 { margin-bottom: 8px; }
.empresa-story__card p { margin-bottom: 0; }
.empresa-story__card--values { grid-column: 1 / -1; }

.empresa-overview { display: block; }
.empresa-feature-wrap {
  position: relative;
  padding: 18px 22px 20px 8px;
}
.empresa-feature__dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 132px;
  height: 132px;
  background-image: radial-gradient(rgba(95,200,174,0.55) 1.6px, transparent 1.6px);
  background-size: 13px 13px;
  opacity: 0.8;
  pointer-events: none;
}
.empresa-feature__trace {
  position: absolute;
  top: 38px;
  left: 0;
  width: 118px;
  height: 124px;
  border-top: 2px solid rgba(184, 109, 73, 0.5);
  border-left: 2px solid rgba(184, 109, 73, 0.5);
  border-top-left-radius: 26px;
  pointer-events: none;
}
.empresa-feature__trace--alt {
  top: auto;
  left: auto;
  right: 14px;
  bottom: -30px;
  width: 164px;
  height: 72px;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid rgba(95,200,174,0.45);
  border-bottom: 2px solid rgba(95,200,174,0.45);
  border-bottom-right-radius: 28px;
}
.empresa-feature {
  position: relative;
  margin: 0;
  min-height: 470px;
  border: 1px solid var(--c-gray-300);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 58px rgba(16, 22, 26, 0.2);
  background:
    radial-gradient(circle at top right, rgba(95,200,174,0.2), transparent 30%),
    linear-gradient(180deg, #f8fbfa 0%, #e9efee 100%);
}
.empresa-feature::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  z-index: 1;
  pointer-events: none;
}
.empresa-feature::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(14,44,53,0) 0%, rgba(14,44,53,0.28) 100%);
  pointer-events: none;
}
.empresa-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  filter: saturate(1.03) contrast(1.02);
}
@media (max-width: 900px) {
  .empresa-story__cards { grid-template-columns: 1fr; }
  .empresa-story__card--values { grid-column: auto; }
  .empresa-feature-wrap { padding-right: 10px; }
}
@media (max-width: 620px) {
  .empresa-feature-wrap {
    padding: 0 0 18px;
  }
  .empresa-feature__dots {
    width: 88px;
    height: 88px;
    top: -10px;
    right: -6px;
  }
  .empresa-feature__trace {
    width: 82px;
    height: 88px;
    top: 20px;
  }
  .empresa-feature__trace--alt {
    width: 112px;
    height: 52px;
    right: 8px;
    bottom: -12px;
  }
  .empresa-feature {
    min-height: 360px;
    border-radius: 22px;
  }
}

/* ---------- Home: about / diferenciais ---------- */
.diferenciais-grid .card { display: flex; gap: 16px; align-items: flex-start; }
.diferenciais-grid .card i { color: var(--c-accent-dark); font-size: 1.4rem; margin-top: 3px; }

/* ---------- Cable line cards (cabos/index.php + Home) ---------- */
.cabo-card {
  display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
}
.cabo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cabo-card__media {
  position: relative; height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
}
.cabo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.cabo-card__media--contain { padding: 2px; }
.cabo-card__media--contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Conector do aeronáutico fica perto do topo do arquivo de origem — sobe o ponto focal
   do object-fit:cover no card da home pra não cortar o conector. */
.cabo-card__media img[src*="cabo_aeronautico"] { object-position: top; }
.cabo-card:hover .cabo-card__media img { transform: scale(1.05); }
.cabo-card__media i { font-size: 2.8rem; color: rgba(255,255,255,0.5); }
.cabo-card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cabo-card__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--c-gray-100); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 4px; }
.cabo-card__title { margin: 0; font-size: 1.3rem; }
.cabo-card__text { font-size: 0.95rem; color: var(--c-gray-700); flex: 1; }
.cabo-card__link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-accent-dark); display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.cabo-card:hover .cabo-card__link { color: var(--c-primary); }

/* ---------- Cable line detail (cabos/_template.php) — layout aprovado com Portuário
   como prévia (estrutura aproximada de mebay.com.br/controladores/_template.php) ---------- */
.dsx-hero { position: relative; background: var(--hero-gradient); overflow: hidden; padding: 64px 0 0; }
.dsx-hero__canvas { position: absolute; inset: 0; opacity: 0.5; }
/* Duas colunas dentro do MESMO .container centralizado — texto ~58%, imagem ~42% (a
   coluna de imagem fica vazia de propósito: só reserva espaço pra travar a largura do
   texto). A imagem visível de verdade é .dsx-hero__float — some fora do grid/container,
   "flutuando" grudada na borda direita real da tela — por isso nunca pode invadir o texto. */
.dsx-hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding-bottom: 48px; text-align: left; }
@media (max-width: 900px) { .dsx-hero__inner { grid-template-columns: 1fr; } }
.dsx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.dsx-breadcrumb a { color: rgba(255,255,255,0.75); }
.dsx-breadcrumb a:hover { color: var(--c-accent); }
.dsx-hero__badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
/* Base única compartilhada pelo badge "CABOS ..." e pelos botões de variante — mesma
   fonte, padding, borda e altura nos 3, byte a byte (só cor/fundo mudam por contexto),
   pra nunca mais divergir por um dos dois lados ter esquecido de atualizar uma regra. */
.dsx-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; box-sizing: border-box; white-space: nowrap; line-height: 1;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.78rem; padding: 7px 16px; border-radius: 20px; border: 1px solid transparent;
}
.dsx-badge { background: rgba(95,200,174,0.14); border-color: rgba(95,200,174,0.35); color: var(--c-accent-light); }
/* Abas de variante dentro do Hero escuro — mesma estrutura de .variant-tabs usada no
   resto do site, só com cores adaptadas ao fundo escuro. Trocar de aba aqui atualiza o
   H1/subtítulo/e-caps/botão PDF/foto do Hero (via data-variant-panel, ver JS). */
.dsx-hero__variant-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.dsx-hero__variant-tabs button.dsx-pill {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85);
  min-width: 150px; cursor: pointer;
}
.dsx-hero__variant-tabs button.dsx-pill.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary-dark); }
.dsx-hero h1 { color: #fff; margin-bottom: 14px; }
.dsx-hero__subtitle { color: rgba(255,255,255,0.82); font-size: 1.08rem; margin-bottom: 22px; }
.dsx-ecaps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.dsx-ecap { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(95,200,174,0.4); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 6px 13px; border-radius: 20px; }
.dsx-ecap i { color: var(--c-accent); }
.dsx-hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dsx-hero__hint { font-size: 0.76rem; color: rgba(255,255,255,0.45); }
.dsx-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 0.82rem; font-weight: 600; }
.dsx-back:hover { color: var(--c-accent); }
.dsx-hero__media { position: relative; }
/* Uma .dsx-hero__float por variante — só a com data-variant-panel ativo (classe
   is-active, trocada pelo mesmo variant-tabs.js) fica visível; as outras somem por
   completo (display:none), então nunca se empilham nem competem por espaço. */
.dsx-hero__float {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2;
  display: none; align-items: center; justify-content: flex-end;
  width: calc(100vw - 780px); max-width: 686px; min-width: 286px;
  pointer-events: none;
}
.dsx-hero__float.is-active { display: flex; }
.dsx-hero__float img { max-width: 100%; max-height: 601px; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4)); position: relative; z-index: 2; }
/* Foto do naval-pp é um par de cabos lado a lado (mais larga que as fotos de cabo único
   das outras variantes) — ancorada à direita como as demais, fica espremida contra a
   borda. Puxa só essa imagem para a esquerda. */
.dsx-hero__float[data-variant-panel="naval-pp"] img { transform: translateX(-70px); }
/* Foto do aeronáutico tem o conector já bem próximo do topo do próprio arquivo — sem
   este ajuste ele fica espremido contra a borda superior do hero. Desce um pouco. */
.dsx-hero__float[data-variant-panel="aeronautico"] img { transform: translateY(70px); }
.dsx-hero__glow { position: absolute; inset: 10%; background: radial-gradient(circle, rgba(95,200,174,0.35), transparent 70%); filter: blur(20px); z-index: 1; }
.dsx-hero__float-icon { position: relative; z-index: 2; font-size: 7rem; color: rgba(255,255,255,0.22); }
@media (max-width: 900px) {
  .dsx-hero__media { display: none; }
  .dsx-hero__float.is-active { position: static; width: 100%; max-width: none; justify-content: center; margin-top: 24px; }
  .dsx-hero__float img { max-height: 429px; }
}

.dsx-btn-red { background: #d12e2e; color: #fff; }
.dsx-btn-red:hover { background: #a81f1f; color: #fff; }

/* top-header (barra de contato) não é sticky, some ao rolar — só .main-nav (75px) fica
   fixo no topo, então a dsx-nav gruda logo abaixo dela (--main-nav-h), não abaixo da
   dupla top-header+main-nav (--header-h, usado só pra offset de âncora/menu mobile). */
.dsx-nav { position: sticky; top: var(--main-nav-h); z-index: 40; background: rgba(255,255,255,0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-gray-300); }
.dsx-nav__inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0; }
.dsx-nav a {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.78rem; color: var(--c-gray-700); padding: 7px 13px; border-radius: 20px; border: 1px solid transparent;
}
.dsx-nav a:hover { background: var(--c-gray-100); color: var(--c-primary); }
.dsx-nav a.dsx-nav__cta { background: var(--c-accent); color: var(--c-primary-dark); margin-left: auto; }
.dsx-nav a.is-active { background: var(--c-gray-100); color: var(--c-primary); }

.dsx-section { padding: 64px 0; }
.dsx-section--alt { background: var(--c-gray-100); }
.dsx-section__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.dsx-section__icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(95,200,174,0.14); color: var(--c-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.dsx-section__head h2 { margin-bottom: 2px; }
.dsx-section__head p { margin: 0; color: var(--c-gray-500); font-size: 0.95rem; }
.dsx-divider { height: 2px; background: linear-gradient(90deg, var(--c-accent), transparent); margin: 22px 0 32px; }

.dsx-intro { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; }
/* .dsx-intro também carrega a classe genérica .variant-panel (pra trocar de variante);
   .variant-panel.is-active {display:block} tem mais especificidade que .dsx-intro
   {display:grid} sozinho e vencia, "achatando" a Ficha Rápida pra baixo do texto —
   esta regra garante que o grid de 2 colunas continua valendo quando a aba está ativa. */
.dsx-intro.variant-panel.is-active { display: grid; }
@media (max-width: 860px) { .dsx-intro { grid-template-columns: 1fr; } }
.dsx-intro__text { font-size: 1.02rem; line-height: 1.75; color: var(--c-gray-900); }
.dsx-highlight { display: flex; gap: 14px; padding: 16px 18px; border-left: 3px solid var(--c-gray-300); background: var(--c-white); border-radius: 0 var(--radius) var(--radius) 0; margin-top: 16px; }
.dsx-highlight--accent { border-left-color: var(--c-accent); background: rgba(95,200,174,0.06); }
.dsx-highlight i { color: var(--c-accent-dark); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.dsx-highlight p { margin: 0; font-size: 0.94rem; color: var(--c-gray-900); }
.dsx-sidecard { background: var(--c-white); border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 24px; }
.dsx-sidecard h6 { font-family: var(--font-display); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-gray-500); margin-bottom: 10px; }
.dsx-sidecard p { font-size: 0.92rem; color: var(--c-gray-900); margin: 0; }
.dsx-sidecard hr { border: none; border-top: 1px solid var(--c-gray-300); margin: 18px 0; }
.dsx-sidecard ul { display: flex; flex-direction: column; gap: 8px; }
.dsx-sidecard li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--c-gray-900); padding-bottom: 8px; border-bottom: 1px solid var(--c-gray-100); }
.dsx-sidecard li:last-child { border-bottom: none; padding-bottom: 0; }
.dsx-sidecard li i { color: var(--c-accent-dark); font-size: 0.8rem; }

.dsx-tech-table { border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); overflow: hidden; }
.dsx-tech-row { display: grid; grid-template-columns: 260px 1fr; border-bottom: 1px solid var(--c-gray-300); }
.dsx-tech-row:last-child { border-bottom: none; }
.dsx-tech-row > span:first-child { padding: 14px 20px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--c-primary); background: var(--c-gray-100); }
.dsx-tech-row > span:last-child { padding: 14px 20px; color: var(--c-gray-900); }
@media (max-width: 620px) { .dsx-tech-row { grid-template-columns: 1fr; } .dsx-tech-row > span:first-child { border-bottom: 1px solid var(--c-gray-300); } }

.dsx-count-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(95,200,174,0.12); color: var(--c-primary); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; padding: 8px 16px; border-radius: 20px; margin-bottom: 20px; }

.dsx-cta { background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary)); color: #fff; text-align: center; padding: 72px 0; }
.dsx-cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; }
.dsx-cta h2 { color: #fff; }
.dsx-cta p { color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto 26px; }
.dsx-cta__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.color-swatches {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  background: var(--c-gray-100); border-radius: 30px; padding: 14px 22px; margin-bottom: 10px;
}
.color-swatch { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 600; color: var(--c-gray-900); }
.color-swatch__dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.color-swatch__dot--multi {
  background: conic-gradient(from 180deg, #ef233c, #ffd60a, #16c760, #0d6efd, #8b5cf6, #ef233c);
}

.diferenciais-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .diferenciais-grid { grid-template-columns: 1fr; } }
.diferencial-item { display: flex; gap: 12px; align-items: center; background: var(--c-white); border: 1px solid var(--c-gray-300); border-radius: var(--radius); padding: 12px 14px; font-size: 0.9rem; color: var(--c-gray-900); }
.diferencial-item__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.92rem; flex-shrink: 0; }
.flag-br-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: #169b45;
  box-shadow: 0 0 0 1px rgba(12,32,19,.12);
}
.flag-br-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #f1c93a;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
}
.flag-br-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #1f4fa3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-gray-100); color: var(--c-primary); border-radius: 20px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; }
.tag i { color: var(--c-accent-dark); }

.variant-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.variant-tabs button {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--c-white); border: 2px solid var(--c-gray-300); color: var(--c-gray-700);
  padding: 10px 20px; border-radius: 30px; font-size: 0.9rem;
}
.variant-tabs button.is-active { border-color: var(--c-accent); color: var(--c-primary); background: var(--c-accent-light); }
.variant-panel { display: none; }
.variant-panel.is-active { display: block; }

.data-table-wrap { overflow-x: auto; border: 1px solid var(--c-gray-300); border-radius: var(--radius); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; }
table.data-table caption { text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 16px; background: var(--c-primary); color: var(--c-white); font-weight: 700; }
table.data-table th, table.data-table td { padding: 11px 16px; text-align: center; border-bottom: 1px solid var(--c-gray-300); white-space: nowrap; }
/* Cabeçalhos (title-case/EN/ES ficam bem mais longos que os originais abreviados em PT)
   podem quebrar em 2 linhas — assim a coluna não força a largura da tabela toda pra
   caber um rótulo comprido numa linha só, evitando o scroll horizontal no fim da tabela.
   Os valores do corpo (td) continuam em nowrap, já que são sempre curtos (números). */
table.data-table thead th { background: var(--c-gray-100); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; color: var(--c-primary); white-space: normal; line-height: 1.3; min-width: 90px; }
table.data-table tbody tr:nth-child(even) { background: var(--c-gray-100); }
table.data-table tbody tr:hover { background: rgba(95,200,174,0.16); }
table.data-table tbody tr:last-child td { border-bottom: none; }

.cta-banner { background: var(--c-primary); border-radius: var(--radius-lg); padding: 52px; text-align: center; color: var(--c-white); }
.cta-banner h2 { color: var(--c-white); }
.cta-banner p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto 24px; }

/* ---------- Home: faixa escura de destaque (selo + CTA + contatos em pill) ---------- */
.destaques { text-align: center; }
.destaques__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 999px;
  background: rgba(95,200,174,0.14); border: 1px solid rgba(95,200,174,0.32); color: var(--c-accent-light);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  margin-bottom: 22px;
}
.destaques__badge i { color: var(--c-accent); }
.destaques h2 { max-width: 640px; margin: 0 auto 36px; }
.destaques__contacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.destaques__pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: var(--c-white);
  font-weight: 600; font-size: 0.95rem; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.destaques__pill i { color: var(--c-accent); font-size: 1rem; }
a.destaques__pill:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.destaques__pill--static { cursor: default; }
@media (max-width: 560px) {
  .destaques__contacts { flex-direction: column; align-items: stretch; }
  .destaques__pill, .destaques .btn { justify-content: center; }
}

/* ---------- Tabela Técnica interativa ---------- */
.tabela-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-btn {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--c-white); border: 2px solid var(--c-gray-300); color: var(--c-gray-700);
  padding: 10px 18px; border-radius: 30px; font-size: 0.88rem; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--c-accent); }
.filter-btn.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
/* Cada linha de cabo ganha uma cor própria no filtro (tema, não a cor real da capa —
   náutico/naval usam capa preta e UL 1230/1232 é multicor, então uma paleta preta não
   funcionaria aqui). Fora do estado ativo, a cor entra na borda/texto; ativo, vira fundo. */
.filter-btn[data-tabela-filter="nautico-ul1426"] { --filter-color: #1f6f9c; }
.filter-btn[data-tabela-filter="ul-1230-1232"]   { --filter-color: #b5651d; }
.filter-btn[data-tabela-filter="naval"]          { --filter-color: #2c3e50; }
.filter-btn[data-tabela-filter="ferroviario"]    { --filter-color: #7d3c98; }
.filter-btn[data-tabela-filter="aeronautico"]    { --filter-color: #a93226; }
.filter-btn[data-tabela-filter="portuario"]      { --filter-color: #b8860b; }
.filter-btn[data-tabela-filter]:not([data-tabela-filter="all"]) { border-color: var(--filter-color); color: var(--filter-color); }
.filter-btn[data-tabela-filter]:not([data-tabela-filter="all"]):hover { border-color: var(--filter-color); opacity: 0.75; }
.filter-btn[data-tabela-filter]:not([data-tabela-filter="all"]).is-active { background: var(--filter-color); border-color: var(--filter-color); color: var(--c-white); }
.tabela-section { margin-bottom: 44px; }
.tabela-section.row-hidden { display: none; }
.tabela-section__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tabela-section__heading { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.tabela-section__heading i { color: var(--c-accent-dark); }
.tabela-section__badge { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--c-gray-100); color: var(--c-primary); padding: 4px 10px; border-radius: 20px; }
.tabela-empty { display: none; text-align: center; padding: 60px 0; color: var(--c-gray-500); font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tabela-empty.is-visible { display: block; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; color: var(--c-primary); margin-bottom: 6px; }
.form-field--honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon-wrap i { position: absolute; left: 14px; color: var(--c-gray-500); }
.input-icon-wrap input, .input-icon-wrap textarea, .input-icon-wrap select {
  width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--c-gray-300); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-ink);
}
.input-icon-wrap input:focus, .input-icon-wrap textarea:focus, .input-icon-wrap select:focus { outline: 2px solid var(--c-accent); border-color: var(--c-accent); }
.input-icon-wrap--textarea i { top: 14px; }
.input-icon-wrap--textarea textarea { resize: vertical; }

.form-alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.92rem; }
.form-alert--success { background: rgba(95,200,174,0.16); color: var(--c-primary-dark); border: 1px solid var(--c-accent); }
.form-alert--error { background: rgba(211,89,63,0.1); color: #8a3220; border: 1px solid var(--c-offline); }
.form-alert--error ul { margin: 0; padding-left: 18px; list-style: disc; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: stretch; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Info card gets the same dark hero gradient + glow used on dsx-cta/page-hero, so it
   reads as a highlight panel next to the plain white form card instead of a second,
   visually-empty white box. */
.contact-info {
  position: relative; overflow: hidden; border: none; display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary)); box-shadow: var(--shadow-lg);
}
.contact-info::after {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(143,224,203,0.35), transparent 70%); filter: blur(10px); pointer-events: none;
}
.contact-info h3 { position: relative; z-index: 1; color: var(--c-white); }
.contact-info__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; margin: 20px 0 26px; }
.contact-info__list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-info__icon {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.14); color: var(--c-accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.contact-info__list strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.contact-info__list span, .contact-info__list a { color: var(--c-white); }
.contact-info__list a:hover { color: var(--c-accent-light); }
.contact-info .btn--block { position: relative; z-index: 1; margin-top: auto; }

.attendance-box { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-size: 0.88rem; margin-top: 2px; }
.attendance-box--online { background: rgba(53,199,107,0.14); color: #1f7a45; }
.attendance-box--offline { background: rgba(211,89,63,0.12); color: #8a3220; }
.contact-info .attendance-box--online { background: rgba(53,199,107,0.22); color: #8ff0b8; }
.contact-info .attendance-box--offline { background: rgba(211,89,63,0.25); color: #ffb199; }

.contact-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.contact-form__head h3 { margin: 0; }

/* ---------- Calculadora de Cabos (app.php) ---------- */
.calc-tabs {
  display: flex; gap: 6px; background: var(--c-white); border: 1px solid var(--c-gray-300);
  border-radius: 999px; padding: 6px; margin-bottom: 32px; width: fit-content;
  box-shadow: var(--shadow-sm); overflow-x: auto; max-width: 100%;
}
.calc-tab {
  display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  color: var(--c-gray-700); font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.88rem; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: all 0.18s ease;
}
.calc-tab:hover { color: var(--c-primary); }
.calc-tab.is-active { background: var(--c-primary); color: var(--c-white); box-shadow: var(--shadow-sm); }

.calc-panel { display: none; animation: calc-fade-up 0.35s ease; }
.calc-panel.is-active { display: block; }
@keyframes calc-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; margin-bottom: 60px; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-field { margin-bottom: 22px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field label { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; color: var(--c-primary); margin-bottom: 8px; }
.calc-field label small, .calc-switch-row small { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--c-gray-700); font-size: 0.78rem; margin-top: 4px; }
.calc-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.calc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.calc-field-row:last-child { margin-bottom: 0; }
.calc-field-row .calc-field { margin-bottom: 0; }
@media (max-width: 560px) { .calc-field-row { grid-template-columns: 1fr; } }

.calc-field input[type="number"], .calc-field select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius); border: 1px solid var(--c-gray-300);
  background: var(--c-white); color: var(--c-ink); font-size: 0.95rem; font-weight: 600; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calc-field input[type="number"]:focus, .calc-field select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(95,200,174,0.22); }
.calc-field select { cursor: pointer; }

.calc-field__slider-row { display: flex; align-items: center; gap: 14px; }
.calc-field__number { max-width: 110px; flex: 0 0 110px; text-align: center; }

.calc-field input[type="range"] {
  flex: 1; -webkit-appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark)); outline: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-white); border: 4px solid var(--c-primary); cursor: pointer; box-shadow: var(--shadow-sm);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--c-white); border: 4px solid var(--c-primary); cursor: pointer;
}

.calc-input-toggle { display: flex; gap: 8px; }
.calc-input-toggle input { flex: 1; }

.calc-unit-toggle { display: inline-flex; background: var(--c-gray-100); border: 1px solid var(--c-gray-300); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.calc-unit-opt { border: none; background: transparent; color: var(--c-gray-700); font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; }
.calc-unit-opt.is-active { background: var(--c-primary); color: var(--c-white); }

.calc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; }
.calc-field-row--switches { grid-template-columns: 1fr; gap: 4px; }
.calc-switch-row--inline { padding: 0; }
.calc-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.calc-switch input { opacity: 0; width: 0; height: 0; }
.calc-switch i { position: absolute; inset: 0; background: var(--c-gray-300); border-radius: 999px; transition: background 0.2s ease; }
.calc-switch i::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: var(--c-white); border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 4px rgba(16,22,26,0.25); }
.calc-switch input:checked + i { background: var(--c-accent); }
.calc-switch input:checked + i::before { transform: translateX(20px); }

.calc-result { text-align: center; display: flex; flex-direction: column; gap: 16px; }
.calc-result__badge {
  display: inline-block; align-self: center; font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px;
  background: rgba(53,199,107,0.14); color: #1f7a45; margin: 0; transition: background 0.2s ease, color 0.2s ease;
}
.calc-result[data-severity="warning"] .calc-result__badge { background: rgba(180,103,10,0.14); color: #8a5209; }
.calc-result[data-severity="danger"] .calc-result__badge { background: rgba(211,89,63,0.12); color: #8a3220; }

.calc-result__exact { color: var(--c-gray-700); font-size: 0.85rem; margin: 0; min-height: 1.2em; }
.calc-result__headline { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-result__awg { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--c-primary); cursor: pointer; }
.calc-result__mm { font-weight: 600; color: var(--c-accent-dark); font-size: 1.05rem; }
.calc-result__amp { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--c-accent-dark); }

.calc-scale { margin: 6px 0; }
.calc-scale__track { position: relative; height: 8px; border-radius: 999px; background: var(--c-gray-300); overflow: visible; }
.calc-scale__fill { position: absolute; inset: 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark)); transition: width 0.45s ease; }
.calc-scale__marker {
  position: absolute; top: 50%; left: 0%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--c-primary); transform: translate(-50%, -50%);
  transition: left 0.45s ease; box-shadow: var(--shadow-sm);
}
.calc-scale__labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--c-gray-700); margin-top: 6px; }

.calc-result__note { font-size: 0.85rem; color: var(--c-gray-700); margin: 0; line-height: 1.5; }
.calc-result__note a { color: var(--c-accent-dark); font-weight: 700; }

.calc-table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.calc-table-head h2 { font-size: 1.1rem; margin: 0; }
table.calc-ref-table { min-width: 760px; }
.calc-ref-table td .er { display: none; color: var(--c-accent-dark); font-weight: 700; }
.calc-ref-table .ref-table__awg { text-align: left; }
#refTableWrap[data-mode="er"] .std { display: none; }
#refTableWrap[data-mode="er"] .er { display: inline; }
.calc-table-hint { color: var(--c-gray-700); font-size: 0.85rem; margin: 16px 0 0; }

.calc-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: var(--c-primary); color: var(--c-white); padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 100;
}
.calc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modals (WhatsApp / Cotação) ---------- */
.wa-modal, .cotacao-modal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
.wa-modal.is-open, .cotacao-modal.is-open { opacity: 1; visibility: visible; }
.wa-modal__backdrop, .cotacao-modal__backdrop {
  position: absolute; inset: 0; background: rgba(16,22,26,0.6); backdrop-filter: blur(2px);
}
.wa-modal__card, .cotacao-modal__card {
  position: relative; background: var(--c-white); border-radius: var(--radius-lg); width: min(420px, 92vw);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(16px); transition: transform 0.2s ease;
}
.wa-modal.is-open .wa-modal__card, .cotacao-modal.is-open .cotacao-modal__card { transform: none; }
.wa-modal__header, .cotacao-modal__header {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--c-gray-300);
}
.wa-modal__header h3, .cotacao-modal__header h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.wa-modal__close, .cotacao-modal__close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--c-gray-500); }
.wa-modal__list { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.wa-modal__list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); font-weight: 600; }
.wa-modal__list a:hover { background: var(--c-gray-100); }
.wa-modal__list i { width: 22px; text-align: center; color: var(--c-accent-dark); font-size: 1.15rem; }
.cotacao-modal__form { padding: 22px 24px; }
.cotacao-modal__sub { font-size: 0.92rem; color: var(--c-gray-700); margin-bottom: 18px; }
.cotacao-modal__alert { padding: 10px 14px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 14px; }
.cotacao-modal__alert.is-error { background: rgba(211,89,63,0.1); color: #8a3220; border: 1px solid var(--c-offline); }
.cotacao-modal__alert.is-success { background: rgba(95,200,174,0.16); color: var(--c-primary-dark); border: 1px solid var(--c-accent); }
/* Modal em formato paisagem a partir de telas médias — 2 colunas evitam que o card
   (antes só 420px de largura) fique alto demais e precise de scroll interno. Abaixo do
   breakpoint (celular) continua empilhado em 1 coluna, como antes. */
@media (min-width: 640px) {
  .cotacao-modal__card { width: min(760px, 94vw); }
  .cotacao-modal__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .cotacao-modal__grid-full { grid-column: 1 / -1; }
}
.cotacao-modal__card--select-open { overflow: visible; }

/* ---------- Seletor de linha de cabo customizado (com ícone por opção) ----------
   <select> nativo não tem como mostrar ícone dentro das <option> em nenhum navegador,
   então o <select> real fica visualmente oculto (só guarda o value pro submit via
   FormData) e é substituído por um botão + lista customizados controlados por
   assets/js/cotacao-select.js. */
.cotacao-select { position: relative; }
.cotacao-select__trigger {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 12px 14px 12px 40px; border: 1px solid var(--c-gray-300); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-ink); font: inherit; cursor: pointer; position: relative;
}
.cotacao-select__trigger:focus, .cotacao-select.is-open .cotacao-select__trigger { outline: 2px solid var(--c-accent); border-color: var(--c-accent); }
.cotacao-select__icon { position: absolute; left: 14px; color: var(--c-gray-500); }
.cotacao-select__trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotacao-select__caret { color: var(--c-gray-500); font-size: 0.78rem; transition: transform 0.15s; }
.cotacao-select.is-open .cotacao-select__caret { transform: rotate(180deg); }
.cotacao-select__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--c-white); border: 1px solid var(--c-gray-300); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto;
}
.cotacao-select__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 0.94rem; color: var(--c-ink); }
.cotacao-select__option i { width: 18px; text-align: center; color: var(--c-gray-500); }
.cotacao-select__option:hover, .cotacao-select__option.is-active { background: var(--c-gray-100); }
.cotacao-select__option.is-selected { color: var(--c-primary); font-weight: 600; }
.cotacao-select__option.is-selected i { color: var(--c-accent-dark); }
.cotacao-select__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--c-black); color: var(--c-gray-300); padding-top: 64px; }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; }
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer__col--brand img { height: 42px; margin-bottom: 14px; }
.site-footer__col--brand p { color: var(--c-gray-300); font-size: 0.92rem; }
.site-footer__social { display: flex; gap: 12px; margin-top: 10px; }
.site-footer__social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-gray-700); display: flex; align-items: center; justify-content: center; color: var(--c-gray-300); }
.site-footer__social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary-dark); }
.site-footer__col h4 { color: var(--c-white); font-size: 1rem; margin-bottom: 16px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col ul a, .site-footer__col ul li { color: var(--c-gray-300); font-size: 0.92rem; display: flex; gap: 10px; align-items: flex-start; }
.site-footer__col ul a:hover { color: var(--c-accent); }
.site-footer__col ul i { color: var(--c-accent-dark); margin-top: 3px; }
.site-footer__bottom { border-top: 1px solid var(--c-gray-900); padding: 20px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: var(--c-gray-500); }
.site-footer__legal a:hover { color: var(--c-accent); }

/* ---------- Floating elements ---------- */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white); border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--c-accent); color: var(--c-primary-dark); }

.floating-whatsapp {
  position: fixed; left: 24px; bottom: 24px; z-index: 90; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: var(--c-white); border: none; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5), var(--shadow-md); }
  70% { box-shadow: 0 0 0 12px rgba(37,211,102,0), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), var(--shadow-md); }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.eyebrow-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* ---------- Responsive nav ---------- */
@media (max-width: 900px) {
  .main-nav__toggle { display: flex; }
  .main-nav__menu {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--c-white);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px; overflow-y: auto;
    transform: translateX(-100%); transition: transform 0.25s ease; z-index: 55;
  }
  .main-nav__menu.is-open { transform: none; }
  .main-nav__item, .main-nav__link, .main-nav__menu > a { width: 100%; }
  .main-nav__link { justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--c-gray-300); }
  .main-nav__dropdown { position: static; border: none; box-shadow: none; padding: 0 0 0 14px; display: none; }
  .main-nav__item--dropdown.is-open .main-nav__dropdown { display: flex; }
  .main-nav__cta { margin-top: 16px; }
  :root { --header-h: 118px; }
}

@media (max-width: 620px) {
  .top-header__inner { justify-content: center; text-align: center; }
  .top-header__left, .top-header__right { width: 100%; justify-content: center; flex-wrap: wrap; }
  .section { padding: 56px 0; }
  .image-note { font-size: 0.65rem; padding: 7px 10px; }
  .image-note::before { width: 14px; height: 14px; font-size: 0.58rem; }
  .image-note--compact { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
}