/* ============================================================
   Para Negócios (B2B) — общие стили раздела.
   Подключается ТОЛЬКО на 4 страницах /pt/para-negocios/*.
   Часть блоков (pp-*) перенесена из inline-стилей para-parceiros,
   чтобы новые страницы были самодостаточны.
   Шрифт/кнопки/флип-карточки (about-process-item) берутся из
   общего gelimo-group.webflow.shared.css.
   ============================================================ */

/* ---------- Нумерованный плейсхолдер картинки ----------
   Маркетолог смотрит рендер, подбирает фото под Nº, затем
   .img-ph заменяется на <img src alt> с тем же текстом alt. */
.img-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 200px;
  padding: 18px;
  text-align: center;
  border: 2px dashed #9fb2c2;
  border-radius: inherit;
  color: #5a6b7b;
  font-family: Poppins, system-ui, sans-serif;
  background:
    repeating-linear-gradient(45deg, #eef2f6 0, #eef2f6 12px, #e6ebf0 12px, #e6ebf0 24px);
}
.img-ph .n { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: .04em; color: #02528a; line-height: 1; }
.img-ph .d { font-size: 13px; font-weight: 700; opacity: .85; }
.img-ph .t { font-size: 12px; line-height: 1.4; max-width: 88%; opacity: .72; }
/* Вариант на всю площадь контейнера (hero, баннер-флип) */
.img-ph.cover { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; }
/* Тёмный вариант для hero — чтобы белый текст поверх читался */
.img-ph.cover.hero {
  background: repeating-linear-gradient(45deg, #0a2a47 0, #0a2a47 14px, #0c324f 14px, #0c324f 28px);
  border-color: rgba(255, 255, 255, .28); color: #aebfce;
}
.img-ph.cover.hero .n { color: #ffd68e; }

/* Реальные фото на месте плейсхолдеров — заполняют контейнер (object-fit).
   Контейнеры .neg-quem-media / .neg-realbanner-media / .home-hero-bg-content-wrap
   уже позиционирующие; .neg-sol-media делаем relative ниже. */
.neg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.neg-sol-media { position: relative; }

/* ---------- Hero, за которым идёт голубая секция ----------
   .home-hero-bg скруглён снизу (0 0 24px 60px), а .home-hero-section
   прозрачна → в вырезах углов просвечивает кремовый body. Красим саму
   секцию в тот же голубой, чтобы вырезы совпали со следующей секцией. */
.home-hero-section.neg-hero-blue { background-color: rgba(168, 219, 255, 0.8); }

/* ---------- Тонировка секций (ритм фонов) ----------
   Два класса (.home-service-section.pp-section-*), чтобы перебить
   дефолтный голубой фон .home-service-section из общего webflow CSS,
   который грузится позже. */
.home-service-section.pp-section-cream { background: #faf6ec; }
.home-service-section.pp-section-cool  { background: #eef2f6; }
.home-service-section.pp-section-white { background: #fff; }
.pp-section-cream { background: #faf6ec; }
.pp-section-cool  { background: #eef2f6; }

/* ---------- Quem somos: плашка маркеров + текст ---------- */
.neg-quem { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: stretch; margin-top: 8px; }
.neg-quem-media { border-radius: 24px; overflow: hidden; position: relative; min-height: 420px; display: flex; }
.neg-markers { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 26px; }
.neg-marker {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  color: #02528a; background: #e6effa; border: 1px solid #cfe0f2;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.neg-quem-text p { margin: 0 0 14px; }
.neg-quem-list { list-style: none; padding: 0; margin: 8px 0 0; }
.neg-quem-list li { position: relative; padding-left: 24px; margin-top: 12px; line-height: 1.5; color: #4a5b6c; }
.neg-quem-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: #ed1c24; }
@media (max-width: 991px) { .neg-quem { grid-template-columns: 1fr; gap: 24px; } .neg-quem-media { min-height: 280px; } }

/* ---------- Soluções: 3 карточки-ссылки ---------- */
.neg-sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.neg-sol-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #e6ecef; border-radius: 22px; overflow: hidden;
  box-shadow: 0 6px 30px rgba(2,42,73,.06); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.neg-sol-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(2,42,73,.12); }
.neg-sol-media { aspect-ratio: 4 / 3; display: flex; }
.neg-sol-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.neg-sol-title { font-size: 24px; font-weight: 800; color: #0c1f2c; letter-spacing: -.02em; }
.neg-sol-desc { font-size: 15px; color: #4a5b6c; line-height: 1.5; flex: 1; }
.neg-sol-cta { font-size: 15px; font-weight: 700; color: var(--_color---accent-color--accent-3, #ed1c25); display: inline-flex; align-items: center; gap: 8px; }
.neg-sol-cta svg { width: 18px; height: 18px; }
@media (max-width: 991px) { .neg-sol-grid { grid-template-columns: 1fr; } }

/* ---------- Portfólio: сетка линий (из para-parceiros) ---------- */
.pp-lines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.pp-line-card { border-radius: 18px; overflow: hidden; min-height: 360px; position: relative; display: flex; flex-direction: column; padding: 20px 16px; }
.pp-line-card .name { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #fff; }
.pp-line-card.dark .name { color: #1a1a1a; }
.pp-line-card .desc { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); margin-top: 8px; }
.pp-line-card.dark .desc { color: #3a3a3a; }
.pp-line-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 0; min-height: 0; }
.pp-line-img-wrap .img-ph { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; min-height: 160px; }
/* Formatos Família — три продукта стопкой друг над другом */
.neg-familia-stack { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; flex: 1; align-self: stretch; min-width: 0; }
.neg-familia-stack img { max-height: 145px; max-width: 94%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
/* Sem açúcar (последняя карточка) — тонкий вертикальный Velvet; ограничиваем
   высоту вровень с остальными одиночными карточками (~465px). */
.pp-lines-grid .pp-line-card:last-child img { max-height: 465px; }
.pp-line-card.dark .pp-line-img-wrap .img-ph { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.25); color: #2a2a2a; }
.pp-line-card.dark .pp-line-img-wrap .img-ph .n { color: #1a1a1a; }
@media (max-width: 1199px) { .pp-lines-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .pp-lines-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Иконочные карточки (Por que / Suporte / ganham) ---------- */
.pp-parc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pp-parc-card {
  border-radius: 20px; padding: 26px 28px; background: #fff;
  border: 1px solid #e6ecef; box-shadow: 0 6px 30px rgba(2,42,73,.06);
  display: flex; flex-direction: row; gap: 20px; align-items: flex-start;
}
.pp-parc-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pp-parc-card.red  .pp-parc-icon { background: #fdebe7; color: #ed1c24; }
.pp-parc-card.blue .pp-parc-icon { background: #e6effa; color: #02528a; }
.pp-parc-text { flex: 1; min-width: 0; }
.pp-parc-title { font-size: 21px; font-weight: 800; color: #0c1f2c; letter-spacing: -.015em; line-height: 1.15; }
.pp-parc-desc { font-size: 15px; color: #4a5b6c; margin-top: 8px; line-height: 1.5; }
.pp-parc-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 991px) { .pp-parc-grid, .pp-parc-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Тёмная секция Oportunidade / CTA (из para-parceiros) ---------- */
.pp-opp-section { background: linear-gradient(180deg, #051e36 0%, #02528a 100%); padding: 96px 0; position: relative; overflow: hidden; }
.pp-opp-section.pp-opp-compact { padding: 64px 0; }
.pp-opp-section::before { content: ""; position: absolute; right: 5%; top: 15%; width: 400px; height: 400px; border-radius: 50%; background: rgba(237,28,36,.2); filter: blur(80px); pointer-events: none; }
.pp-opp-section .container { position: relative; z-index: 1; }
.pp-opp-section .section-label-text, .pp-opp-section h2 { color: #fff !important; }
.pp-opp-section .section-label-dot { background: #ed1c24; }
.pp-opp-lead { font-size: 20px; color: rgba(255,255,255,.80); line-height: 1.5; margin-top: 20px; max-width: 920px; }
.pp-opp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.pp-opp-card { border-radius: 28px; padding: 34px 38px; min-height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pp-opp-card.red  { background: linear-gradient(165deg, rgba(237,28,36,.28) 0%, rgba(237,28,36,.08) 100%); border: 1px solid rgba(255,143,148,.35); }
.pp-opp-card.gold { background: linear-gradient(165deg, rgba(232,197,138,.25) 0%, rgba(197,154,78,.06) 100%); border: 1px solid rgba(232,197,138,.35); }
.pp-opp-card.blue { background: linear-gradient(165deg, rgba(95,143,180,.38) 0%, rgba(2,82,138,.12) 100%); border: 1px solid rgba(140,180,210,.35); }
.pp-opp-eyebrow { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; }
.pp-opp-card.red .pp-opp-eyebrow { color: #ff8f94; }
.pp-opp-card.gold .pp-opp-eyebrow { color: #ffd68e; }
.pp-opp-card.blue .pp-opp-eyebrow { color: #b8d4e8; }
.pp-opp-big { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.05; }
.pp-opp-card .pp-opp-sub { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.5; }
@media (max-width: 991px) { .pp-opp-grid { grid-template-columns: 1fr; } }
.pp-cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Como funciona a parceria: 6 карточек на тёмном фоне ---------- */
.neg-flow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.neg-flow-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, border-color .2s ease;
}
.neg-flow-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.3); }
.neg-flow-card .neg-flow-top { display: flex; align-items: center; gap: 14px; }
.neg-flow-card .neg-flow-emoji { font-size: 30px; line-height: 1; flex: none; }
.neg-flow-card .neg-flow-step-n { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ffd68e; margin-left: auto; }
.neg-flow-card h3 { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.neg-flow-card p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.5; margin: 0; }
@media (max-width: 991px) { .neg-flow-cards { grid-template-columns: 1fr; } }
@media (min-width: 992px) and (max-width: 1199px) { .neg-flow-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Блок-обёртка для CTA карты (Estamos no Brasil) ----------
   store-map.css позиционирует .store-map-cta абсолютно (под hero);
   здесь возвращаем её в поток и опускаем ниже заголовка/лида. */
.neg-map-cta-wrap { margin-top: 48px; }
.neg-map-cta-wrap .store-map-cta { position: static; right: auto; bottom: auto; max-width: none; width: fit-content; }

/* ---------- Чек-лист «operação real» (✔-теги) ---------- */
.neg-checks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.neg-check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #0c1f2c; background: #fff; border: 1px solid #e6ecef; border-radius: 999px; padding: 10px 18px; }
.neg-check::before { content: "✔"; color: #ed1c24; font-weight: 800; }
.neg-realbanner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; margin-top: 44px; }
.neg-realbanner-media { border-radius: 24px; overflow: hidden; position: relative; min-height: 360px; display: flex; }
.neg-realbanner-note { font-size: 18px; color: #4a5b6c; line-height: 1.5; margin-top: 22px; }
@media (max-width: 991px) { .neg-realbanner { grid-template-columns: 1fr; } }

/* ---------- Простой список-буллеты «Mais do que sorvetes» ---------- */
.neg-bullets { list-style: none; padding: 0; margin: 20px 0 0; columns: 2; column-gap: 40px; }
.neg-bullets li { position: relative; padding-left: 24px; margin: 0 0 14px; line-height: 1.5; color: #4a5b6c; break-inside: avoid; }
.neg-bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 2px; background: #ed1c24; }
@media (max-width: 767px) { .neg-bullets { columns: 1; } }

/* ---------- Возврат на хаб (хлебные крошки подстраниц) ---------- */
.neg-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7c8c; margin-bottom: 18px; }
.neg-crumbs a { color: #02528a; text-decoration: none; font-weight: 600; }
.neg-crumbs a:hover { text-decoration: underline; }
.neg-crumbs span { opacity: .6; }