/* ============================================================
   Calixto — camada de cor e movimento
   Azul petróleo continua dominante. As quatro cores de apoio
   entram só em ícones, bordas e brilhos, nunca em fundos de
   seção inteiros — o site ganha vida sem perder a sobriedade.
   ============================================================ */

:root {
  --c-petroleo: #0F4C5C;
  --c-ambar:    #E0972F;
  --c-coral:    #DE6A54;
  --c-violeta:  #6E5FBE;
  --c-agua:     #1F9E8C;

  --accent: var(--c-petroleo);
}

/* ── Rodízio de cor: cada card recebe a sua ─────────────── */
#servicos .grid > a:nth-child(5n + 1),
#segmentos .grid > a:nth-child(5n + 1),
#compromissos .grid > article:nth-child(5n + 1) { --accent: var(--c-petroleo); }

#servicos .grid > a:nth-child(5n + 2),
#segmentos .grid > a:nth-child(5n + 2),
#compromissos .grid > article:nth-child(5n + 2) { --accent: var(--c-ambar); }

#servicos .grid > a:nth-child(5n + 3),
#segmentos .grid > a:nth-child(5n + 3),
#compromissos .grid > article:nth-child(5n + 3) { --accent: var(--c-agua); }

#servicos .grid > a:nth-child(5n + 4),
#segmentos .grid > a:nth-child(5n + 4),
#compromissos .grid > article:nth-child(5n + 4) { --accent: var(--c-violeta); }

#servicos .grid > a:nth-child(5n + 5),
#segmentos .grid > a:nth-child(5n + 5),
#compromissos .grid > article:nth-child(5n + 5) { --accent: var(--c-coral); }

/* Diferenciais: a mesma sequência */
.section .grid > article.card:nth-child(6n + 1) { --accent: var(--c-petroleo); }
.section .grid > article.card:nth-child(6n + 2) { --accent: var(--c-ambar); }
.section .grid > article.card:nth-child(6n + 3) { --accent: var(--c-agua); }
.section .grid > article.card:nth-child(6n + 4) { --accent: var(--c-violeta); }
.section .grid > article.card:nth-child(6n + 5) { --accent: var(--c-coral); }
.section .grid > article.card:nth-child(6n + 6) { --accent: var(--c-petroleo); }

/* ── Selo do ícone ──────────────────────────────────────── */
#servicos .grid > a > span:first-child,
.section .grid > article.card > span:first-child,
#compromissos .grid > article > span:first-child {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -10px var(--accent);
  transition: transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .4s;
}

#segmentos .grid > a > span:first-child {
  background: color-mix(in srgb, var(--accent) 88%, transparent) !important;
  color: #fff !important;
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
}

/* ── Movimento no hover ─────────────────────────────────── */
.card,
#segmentos .grid > a {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* faixa colorida que cresce no topo */
#servicos .grid > a::after,
.section .grid > article.card::after,
#compromissos .grid > article::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
#servicos .grid > a:hover::after,
.section .grid > article.card:hover::after,
#compromissos .grid > article:hover::after { transform: scaleX(1); }

/* brilho e borda na cor do card */
#servicos .grid > a:hover,
.section .grid > article.card:hover,
#compromissos .grid > article:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 2px 6px rgba(11,32,46,.05),
              0 26px 52px -26px color-mix(in srgb, var(--accent) 60%, transparent);
}
#segmentos .grid > a:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
  box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ícone que salta */
#servicos .grid > a:hover > span:first-child,
.section .grid > article.card:hover > span:first-child,
#compromissos .grid > article:hover > span:first-child,
#segmentos .grid > a:hover > span:first-child {
  transform: translateY(-4px) rotate(-7deg) scale(1.06);
}

/* título e seta acompanham a cor */
#servicos .grid > a:hover h3 { color: var(--accent) !important; }
#servicos .grid > a:hover > span:last-child { color: var(--accent) !important; }
#segmentos .grid > a:hover > span:last-child { color: color-mix(in srgb, var(--accent) 70%, #fff) !important; }

/* ── Inclinação suave seguindo o mouse (via JS) ─────────── */
.tilt {
  transition: transform .18s cubic-bezier(.16,.84,.44,1),
              box-shadow .4s, border-color .4s;
}
.tilt-on {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(-6px);
}

/* ── Fundos vivos nas seções azuis ──────────────────────── */
.bolhas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bolha {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .30;
  animation: flutua 26s ease-in-out infinite;
}
.bolha--1 { width: 30rem; height: 30rem; left: -8rem;  top: -6rem;   background: var(--c-petroleo); }
.bolha--2 { width: 24rem; height: 24rem; right: 6%;    top: 8%;      background: var(--c-agua);     animation-delay: -7s;  animation-duration: 32s; }
.bolha--3 { width: 20rem; height: 20rem; left: 34%;    bottom: -6rem;background: var(--c-violeta);  animation-delay: -14s; animation-duration: 29s; }
.bolha--4 { width: 16rem; height: 16rem; right: 18%;   bottom: 4%;   background: var(--c-ambar);    animation-delay: -20s; animation-duration: 35s; opacity: .18; }

@keyframes flutua {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(4%, -6%, 0) scale(1.12); }
  66%      { transform: translate3d(-5%, 4%, 0) scale(.94); }
}

/* o conteúdo fica sempre acima das bolhas */
#segmentos > .container,
#compromissos > .container { position: relative; z-index: 1; }

/* ── Passo a passo e FAQ coloridos ──────────────────────── */
#como-funciona ol > li:nth-child(1) { --accent: var(--c-petroleo); }
#como-funciona ol > li:nth-child(2) { --accent: var(--c-ambar); }
#como-funciona ol > li:nth-child(3) { --accent: var(--c-agua); }
#como-funciona ol > li:nth-child(4) { --accent: var(--c-violeta); }
#como-funciona ol > li:nth-child(5) { --accent: var(--c-coral); }

#como-funciona ol > li span:first-child {
  border-color: var(--accent) !important;
  color: #fff !important;
  background: var(--accent) !important;
  box-shadow: 0 8px 20px -10px var(--accent);
}

#faq [data-faq-ico] { transition: transform .4s cubic-bezier(.16,.84,.44,1), background .3s, color .3s, border-color .3s; }
#faq h3 button:hover [data-faq-ico] {
  border-color: var(--c-ambar);
  color: var(--c-ambar);
}

/* ── Quem prefere menos movimento ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bolha { animation: none; }
  .tilt, .tilt-on { transform: none !important; transition: none; }
}

/* ── Cartões de escolha da Área do Cliente ──────────────── */
.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,.84,.44,1), border-color .4s, background .4s, box-shadow .4s;
}
.portal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.portal-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: rgba(255,255,255,.09);
  box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--accent) 80%, transparent);
}
.portal-card:hover::before { transform: scaleX(1); }

.portal-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: .9rem;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 26px -12px var(--accent);
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.portal-card:hover .portal-card__ico { transform: translateY(-3px) rotate(-7deg) scale(1.06); }

.portal-card__nome { margin-top: 1.4rem; font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.portal-card__sub  { margin-top: .3rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--accent) 55%, #fff); }
.portal-card__txt  { margin-top: 1rem; flex: 1; font-size: .93rem; line-height: 1.65; color: rgba(255,255,255,.6); }
.portal-card__cta  {
  margin-top: 1.75rem; display: inline-flex; align-items: center; gap: .55rem;
  font-size: .88rem; font-weight: 800; color: #fff;
}
.portal-card:hover .portal-card__cta svg { transform: translateX(5px); }
.portal-card__cta svg { transition: transform .35s cubic-bezier(.16,.84,.44,1); }

@media (prefers-reduced-motion: reduce) {
  .portal-card, .portal-card__ico, .portal-card__cta svg { transition: none; transform: none !important; }
}

/* ============================================================
   Páginas dos portais: cada uma vestida com a cor do sistema.
   A cor vem do atributo style="--sistema:#xxxxxx" no <section>.
   ============================================================ */
.portal-hero {
  --sistema: var(--c-petroleo);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--sistema) 55%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, #0B1B2B 0%, color-mix(in srgb, var(--sistema) 38%, #0B1B2B) 100%);
}
.portal-hero .bolha--1 { background: var(--sistema); opacity: .34; }
.portal-hero .bolha--2 { background: color-mix(in srgb, var(--sistema) 60%, #fff); opacity: .16; }
.portal-hero .bolha--3 { background: var(--sistema); opacity: .22; }
.portal-hero .bolha--4 { background: color-mix(in srgb, var(--sistema) 70%, #000); opacity: .20; }

/* faixa fina da cor do sistema no rodapé do hero */
.portal-hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 4px;
  background: linear-gradient(90deg, var(--sistema), color-mix(in srgb, var(--sistema) 35%, #fff), var(--sistema));
}

/* logo do sistema */
.portal-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.5rem; padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.portal-logo img { max-height: 2.6rem; width: auto; display: block; }

/* enquanto o arquivo oficial não chega, um selo tipográfico */
.portal-logo--texto {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.5rem;
  gap: .7rem;
}
.portal-logo--texto b { color: var(--sistema); filter: brightness(1.7); }

/* botão principal na cor do sistema */
.btn-sistema {
  background: var(--sistema) !important;
  box-shadow: 0 14px 34px -14px var(--sistema);
}
.btn-sistema:hover { filter: brightness(1.08); box-shadow: 0 18px 40px -14px var(--sistema); }

/* detalhes do corpo da página herdam a cor */
.portal-body .eyebrow { color: var(--sistema) !important; }
.portal-body .eyebrow::before { background: var(--sistema) !important; }
.portal-body h2 span { color: var(--sistema) !important; }
.portal-body li > span:first-child { background: color-mix(in srgb, var(--sistema) 14%, #fff) !important; color: var(--sistema) !important; }
.portal-body a[data-evt$="-web"],
.portal-body .btn-primary { background: var(--sistema) !important; }
.portal-body details summary svg:last-child { color: var(--sistema); }

/* ── Botão grande de entrar no sistema ──────────────────── */
.btn-entrar {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.6rem 1.1rem 1.2rem;
  border-radius: 1.1rem;
  background: var(--sistema);
  color: #fff;
  box-shadow: 0 18px 44px -16px var(--sistema);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s, filter .3s;
}
.btn-entrar:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 24px 54px -16px var(--sistema); }
.btn-entrar__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: .8rem;
  background: rgba(255,255,255,.22);
}
.btn-entrar__ico svg { width: 1.4rem; height: 1.4rem; }
.btn-entrar__txt { display: flex; flex-direction: column; text-align: left; }
.btn-entrar__t1 { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
.btn-entrar__t2 { margin-top: .15rem; font-size: .78rem; font-weight: 600; opacity: .8; }
.btn-entrar__seta { width: 1.3rem; height: 1.3rem; transition: transform .35s cubic-bezier(.16,.84,.44,1); }
.btn-entrar:hover .btn-entrar__seta { transform: translateX(5px); }

/* ── Cartão da página de escolha: logo + entrar direto ──── */
.portal-card__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; border-radius: 1.1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .45s cubic-bezier(.16,.84,.44,1), background .4s;
}
.portal-card__logo img { max-height: 3.4rem; width: auto; display: block; }
.portal-card:hover .portal-card__logo { transform: translateY(-3px) scale(1.05); background: rgba(255,255,255,.12); }

.portal-card__entrar {
  margin-top: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 14px 32px -14px var(--accent);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), filter .3s;
}
.portal-card__entrar svg { width: 1.15rem; height: 1.15rem; transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.portal-card__entrar:hover { filter: brightness(1.08); transform: translateY(-2px); }
.portal-card__entrar:hover svg { transform: translateX(4px); }

.portal-card__ajuda {
  margin-top: .85rem; text-align: center;
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.5);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .3s;
}
.portal-card__ajuda:hover { color: #fff; }