/* Homepage — Galp Particulares (Figma Homepage / Particulares) — tokens GPower (:root) */

.hp {
  margin: 0;
  background: var(--color-background-neutral);
  color: var(--color-text-primary);
  font-family: var(--gpower-font-family), system-ui, sans-serif;
}

.hp-header {
  position: relative;
  z-index: 1100;
  background: var(--color-background-neutral);
}

.hp *,
.hp *::before,
.hp *::after {
  box-sizing: border-box;
}

.hp-container {
  width: 100%;
  max-width: 1168px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gpower-spacing-m);
  padding-right: var(--gpower-spacing-m);
}

.hp-util-wrap {
  padding-top: 0px
}

.hp-util-wrap gpower-utility-header {
  --uh-bg: transparent;
}

.hp-util-links {
  display: flex;
  gap: var(--gpower-spacing-m);
  align-items: center;
}

.hp-util-links a {
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-body);
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--gpower-spacing-xxs) var(--gpower-spacing-xxs);
  border-radius: var(--gpower-radius-xxs);
}

.hp-util-links a:hover {
  background: var(--color-action-secondary-hover);
}

.hp-nav-shell {
  margin-top: 0px
}

/* Fundo e forma da “pílula”: aplicado ao host do componente */
.hp-nav-shell gpower-nav-bar {
  background: var(--color-background-default);
  border-radius: var(--gpower-radius-full);
  box-shadow: none;
}

/* Logótipo no slot left — alinhamento vertical com os nav-items */
.hp-nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: var(--gpower-spacing-xs);
}

.hp-nav-brand__link {
  display: flex;
  align-items: center;
  line-height: 0;
}

.hp-nav-brand__logo {
  display: block;
  width: 88px;
  height: 40px;
  object-fit: contain;
}

/* Mega menu Eletricidade & Gás (Figma 1:10334 — markup/CSS à parte do DS) */
.hp-nav-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--gpower-spacing-xxxs);
  row-gap: var(--gpower-spacing-xxs);
}

.hp-mega-root[hidden] {
  display: none;
}

.hp-mega-root {
  position: relative;
}

.hp-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(17, 17, 16, 0.28);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.hp-mega-root--open .hp-mega-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.hp-mega-panel {
  position: fixed;
  left: var(--gpower-spacing-m);
  right: var(--gpower-spacing-m);
  z-index: 1050;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hp-mega-root--open .hp-mega-panel {
  pointer-events: auto;
}

.hp-mega-panel__inner {
  width: 100%;
  max-width: 1128px;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  transform: translateY(-10px);
  opacity: 0;
  transition:
    opacity 0.22s ease,
    transform 0.26s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.hp-mega-root--open .hp-mega-panel__inner {
  opacity: 1;
  transform: translateY(0);
}

.hp-mega-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background: var(--color-background-default);
  border-radius: var(--gpower-radius-l);
  box-shadow: 0 8px 16px rgba(57, 56, 58, 0.2);
  overflow: hidden;
}

.hp-mega-panel__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: var(--gpower-spacing-xl);
  padding: var(--gpower-spacing-m) var(--gpower-spacing-xl) var(--gpower-spacing-xl);
  background: var(--color-background-default);
}

.hp-mega-col {
  flex: 1 1 0;
  min-width: 0;
}

.hp-mega-col__heading {
  margin: 0 0 var(--gpower-spacing-xxxs);
  padding: var(--gpower-spacing-xs) var(--gpower-spacing-xxs) var(--gpower-spacing-xxxs);
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-text-s, 21px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary, rgba(57, 56, 58, 0.8));
}

.hp-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-xxxs);
}

.hp-mega-link {
  display: block;
  padding: var(--gpower-spacing-xxs);
  border-radius: var(--gpower-radius-xs);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.hp-mega-link:hover {
  background: var(--color-action-secondary-hover);
}

.hp-mega-link__title {
  display: block;
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-text-s, 21px);
  color: var(--color-text-primary);
}

.hp-mega-link__desc {
  display: block;
  margin-top: var(--gpower-spacing-xxxs);
  font-size: var(--gpower-font-size-1);
  line-height: var(--gpower-line-height-text-xs, 18px);
  color: var(--color-text-secondary, rgba(57, 56, 58, 0.8));
}

.hp-mega-aside {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--gpower-spacing-m) var(--gpower-spacing-m) var(--gpower-spacing-xl);
  background: var(--color-surface-contrast, #39383a);
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-xs);
}

.hp-mega-aside__heading {
  margin: 0;
  padding: var(--gpower-spacing-xs) var(--gpower-spacing-xxs) var(--gpower-spacing-xxxs);
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-text-s, 21px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.hp-mega-aside__art {
  margin: 0 var(--gpower-spacing-xxs);
  padding: 8px 24px;
  background: var(--color-background-neutral, #f7f4ed);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hp-mega-aside__art img {
  display: block;
  width: 131px;
  height: auto;
}

.hp-mega-aside__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--gpower-spacing-xxs);
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-s);
}

.hp-mega-aside__row {
  display: flex;
  align-items: flex-start;
  gap: var(--gpower-spacing-xxs);
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-text-s, 21px);
  color: var(--color-text-primary-on-color, #fff);
}

.hp-mega-aside__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}

.hp-mega-aside__text {
  flex: 1 1 0;
  min-width: 0;
}

.hp-mega-cta {
  align-self: flex-start;
  margin-top: auto;
  margin-left: var(--gpower-spacing-xxs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px var(--gpower-spacing-xxs);
  border-radius: var(--gpower-radius-full);
  background: var(--color-action-brand-default, #be2e00);
  color: var(--color-text-primary-on-color, #fff);
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-text-s, 21px);
  text-decoration: none;
  transition: background 0.15s ease;
}

.hp-mega-cta:hover {
  background: var(--color-action-brand-hover, #a82700);
}

body.hp-mega-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .hp-mega-card {
    flex-direction: column;
  }

  .hp-mega-aside {
    flex: none;
    width: 100%;
  }

  .hp-mega-panel__main {
    flex-direction: column;
    gap: var(--gpower-spacing-l);
  }
}

.hp-main {
  padding-bottom: 0;
}

.hp-section {
  padding-top: var(--gpower-spacing-xxxl);
  padding-bottom: var(--gpower-spacing-xxxl);
}

.hp-section--white {
  background: var(--color-background-default);
}

.hp-section--neutral {
  background: var(--color-background-neutral);
}

.hp-intro {
  max-width: 568px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hp-overline {
  display: block;
  margin: 0 0 var(--gpower-spacing-xxs);
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-brand-primary-dark);
  text-transform: uppercase;
}

.hp-hero {
  padding-top: var(--gpower-spacing-l);
  padding-bottom: var(--gpower-spacing-m);
}

.hp-hero__stage {
  position: relative;
}

/* Hero laranja: Figma 22:2517 — 520px altura útil, radius 40, padding 40; flex distribui bloco copy vs CTAs (~101px entre lead e botões) */
.hp-hero__orange {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 520px;
  padding: var(--gpower-spacing-xl);
  border-radius: 40px;
  background: var(--color-surface-primary-pure);
  overflow: visible;
}

.hp-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-s);
  /* Reserva ~468px + gap para a grelha à direita (largura = content box do laranja) */
  max-width: min(580px, max(280px, calc(100% - 508px)));
  z-index: 1;
}

@media (max-width: 900px) {
  .hp-hero__orange {
    height: auto;
    min-height: 0;
    padding: var(--gpower-spacing-m);
    display: block;
  }

  .hp-hero__copy {
    max-width: none;
    margin-bottom: var(--gpower-spacing-xl);
  }

  .hp-hero__title {
    margin: 0 0 var(--gpower-spacing-m) !important;
  }

  .hp-hero__lead {
    margin: 0 !important;
  }

  .hp-hero__actions {
    margin-bottom: var(--gpower-spacing-m);
  }

  .hp-hero__gallery-wrap {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: var(--gpower-spacing-m);
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }
}

/* Cor do título: Garantir branco no laranja (evita herdar --color-text-primary do .hp) */
.hp-hero__title {
  margin: 0;
  max-width: 580px;
  color: var(--color-text-primary-on-color, #fff);
  font-weight: var(--gpower-font-weight-bold, 700);
  line-height: 1.25;
}

.hp-hero__title .hp-display-accent {
  color: var(--color-text-primary);
}

.hp-hero__lead {
  margin: 0;
  max-width: 528px;
  color: var(--color-text-primary);
}

.hp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpower-spacing-s);
  align-items: center;
  z-index: 1;
}

/* Grelha branca: 468×576, bottom −96, inset 12px, radius 40 (22:2524) */
.hp-hero__gallery-wrap {
  position: absolute;
  right: var(--gpower-spacing-xl);
  bottom: -96px;
  width: 468px;
  max-width: min(468px, max(260px, calc(100% - 400px)));
  height: 576px;
  background: var(--color-background-default);
  border-radius: 40px;
  padding: var(--gpower-spacing-xs);
  box-sizing: border-box;
  overflow: visible;
}

.hp-hero__strip {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-xs);
  height: 100%;
}

.hp-hero__strip-item {
  position: relative;
  flex-shrink: 0;
  height: 175px;
  overflow: visible;
  background: transparent;
}

.hp-hero__strip-item:nth-child(2) {
  height: 178px;
}

/* Foto + shapes + labels: tudo dentro deste bloco para border-radius + overflow:hidden (Figma 22:2525) */
.hp-hero__strip-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-surface-on-neutral);
  isolation: isolate;
}

/* Stack vertical: cantos exteriores 32px (como o cartão branco); junções entre faixas 8px */
.hp-hero__strip-item:first-child .hp-hero__strip-media {
  border-radius: 32px 32px var(--gpower-radius-xs) var(--gpower-radius-xs);
}

.hp-hero__strip-item:nth-child(2) .hp-hero__strip-media {
  border-radius: var(--gpower-radius-xs);
}

.hp-hero__strip-item:last-child .hp-hero__strip-media {
  border-radius: var(--gpower-radius-xs) var(--gpower-radius-xs) 32px 32px;
}

.hp-hero__strip-media .hp-strip-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancorar ao topo para o crop mostrar rostos (em vez do centro por defeito) */
  object-position: center top;
}

.hp-hero__strip-label {
  position: absolute;
  z-index: 3;
  padding: 0;
  border-radius: 0;
  font-size: var(--gpower-font-size-3);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-text-m, 24px);
  color: var(--color-text-primary-on-color);
  background: transparent;
  pointer-events: none;
  text-align: left;
}

/*
 * Labels — canto inferior; horizontal alinhado ao frame 444px.
 */
.hp-hero__strip-item:nth-child(1) .hp-hero__strip-media .hp-hero__strip-label {
  left: calc(346 * 100% / 444);
  right: auto;
  top: auto;
  bottom: 14px;
}

.hp-hero__strip-item:nth-child(2) .hp-hero__strip-media .hp-hero__strip-label {
  left: 8px;
  right: auto;
  top: auto;
  bottom: 14px;
}

.hp-hero__strip-item:nth-child(3) .hp-hero__strip-media .hp-hero__strip-label {
  left: calc(363 * 100% / 444);
  right: auto;
  top: auto;
  bottom: 20px;
}

.hp-hero__strip-badge {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

/*
 * Shapes — 120×120; cantos inferiores (direita / esquerda / direita).
 * Mesmos offsets horizontais do frame; bottom negativo = ligeiro overflow para fora da faixa, cortado pelo media.
 */
.hp-hero__strip-item:nth-child(1) .hp-hero__strip-media .hp-hero__strip-badge {
  left: calc(334 * 100% / 444);
  right: auto;
  top: auto;
  bottom: -38px;
}

.hp-hero__strip-item:nth-child(2) .hp-hero__strip-media .hp-hero__strip-badge {
  left: -21px;
  right: auto;
  top: auto;
  bottom: -31px;
}

.hp-hero__strip-item:nth-child(3) .hp-hero__strip-media .hp-hero__strip-badge {
  left: calc(348 * 100% / 444);
  right: auto;
  top: auto;
  bottom: -44.5px;
}

/* Figma 22:2539: px-40 py-24, alinhado à esquerda com o conteúdo do hero (não centrado) */
.hp-hero__pagination {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  padding: var(--gpower-spacing-m) var(--gpower-spacing-xl);
  box-sizing: border-box;
}

.hp-hero__pagination gpower-pagination-dots {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

@media (max-width: 900px) {
  .hp-hero__strip-badge {
    width: clamp(72px, 28vw, 120px);
    height: clamp(72px, 28vw, 120px);
  }

  /* Faixas mais estreitas: mantém proporção 334/444 e 348/444 com o mesmo calc */
  .hp-hero__strip-item:nth-child(1) .hp-hero__strip-media .hp-hero__strip-badge {
    left: calc(334 * 100% / 444);
    right: auto;
    top: auto;
    bottom: clamp(-36px, -8vw, -20px);
  }

  .hp-hero__strip-item:nth-child(2) .hp-hero__strip-media .hp-hero__strip-badge {
    left: -16px;
    top: auto;
    bottom: -24px;
  }

  .hp-hero__strip-item:nth-child(3) .hp-hero__strip-media .hp-hero__strip-badge {
    left: calc(348 * 100% / 444);
    right: auto;
    top: auto;
    bottom: clamp(-40px, -9vw, -22px);
  }

  .hp-hero__strip-item:nth-child(1) .hp-hero__strip-media .hp-hero__strip-label,
  .hp-hero__strip-item:nth-child(3) .hp-hero__strip-media .hp-hero__strip-label {
    left: auto;
    right: var(--gpower-spacing-s);
    top: auto;
    bottom: var(--gpower-spacing-s);
  }

  .hp-hero__strip-item:nth-child(2) .hp-hero__strip-media .hp-hero__strip-label {
    left: var(--gpower-spacing-s);
    right: auto;
    top: auto;
    bottom: var(--gpower-spacing-s);
  }

  .hp-hero__pagination {
    justify-content: flex-start;
    padding: var(--gpower-spacing-m) var(--gpower-spacing-m);
  }
}

.hp-cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gpower-spacing-l);
  margin-top: var(--gpower-spacing-m);
}

@media (max-width: 960px) {
  .hp-cards3 {
    grid-template-columns: 1fr;
  }
}

.hp-card-start {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: var(--gpower-radius-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Overlay como gpower-card--clickable: semi-transparente + pressed no active */
.hp-card-start::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  display: none;
  background-color: transparent;
  transition: background-color 180ms ease-in-out;
}

.hp-card-start:hover::before {
  display: inline-flex;
  background-color: var(--color-action-secondary-hover);
}

.hp-card-start:active::before {
  display: inline-flex;
  background-color: var(--color-action-secondary-pressed);
}

.hp-card-start:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  z-index: 1;
}

.hp-card-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57, 56, 58, 0.12);
}

.hp-card-start__media {
  position: relative;
  z-index: 0;
  height: 240px;
  background: var(--color-background-neutral);
  border-radius: var(--gpower-radius-m);
  margin: 0;
  overflow: hidden;
}

.hp-card-start__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-card-start__body {
  position: relative;
  z-index: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-xl);
  padding: var(--gpower-spacing-m);
}

.hp-card-start__bd {
  border: 1px solid transparent;
}

.hp-card-start__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpower-spacing-xxs);
  margin-top: var(--gpower-spacing-s);
}

.hp-card-start__title {
  margin: var(--gpower-spacing-xxs) 0 0;
}

.hp-card-start__link {
  margin-top: auto;
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  text-decoration: none;
}

.hp-card-start--a {
  background: var(--color-surface-primary-bright);
}

.hp-card-start--a .hp-card-start__link {
  color: var(--color-text-brand-primary-dark);
}

.hp-card-start--b {
  background: var(--color-surface-secondary1-bright);
}

.hp-card-start--b .hp-card-start__title {
  color: var(--color-text-brand-secondary1-dark);
}

.hp-card-start--b .hp-card-start__link {
  color: var(--color-text-brand-secondary1-dark);
}

.hp-card-start--c {
  background: var(--color-surface-secondary2-bright);
}

.hp-card-start--c .hp-card-start__title {
  color: var(--color-text-brand-secondary2-dark);
}

.hp-card-start--c .hp-card-start__link {
  color: var(--color-text-brand-secondary2-dark);
}

/*
 * Campaign Combina — Figma 1:9533
 * Padding 40; grelha 473 | 32 | 257 | 32 | 380; cartões 380×208 gap 24; overflow-clip no frame.
 */
.hp-combina {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 40px;
  background: var(--color-surface-contrast);
  color: var(--color-text-primary-on-color);
  padding: var(--gpower-spacing-xl);
  padding-right:0px;
  overflow: hidden;
}

.hp-combina__grid {
  display: grid;
  grid-template-columns: minmax(0, 473fr) minmax(0, 257fr) minmax(0, 380px);
  gap: var(--gpower-spacing-l);
  align-items: start;
  min-width: 0;
  width: 106%;
}

@media (max-width: 1100px) {
  .hp-combina__grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .hp-combina__lead {
    min-height: 0;
  }

  .hp-combina__cta {
    margin-top: var(--gpower-spacing-xl);
  }

  .hp-combina__cards {
    width: 100%;
    max-width: none;
  }

  .hp-combina__visual {
    width: 100%;
    max-width: 257px;
    height: auto;
    aspect-ratio: 257 / 440;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .hp-combina__visual img {
    height: 100%;
    min-height: 100%;
  }

  .hp-mini-card {
    height: auto;
    min-height: 208px;
    padding-right: 71px;
  }
}

.hp-combina__lead {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-m);
  align-self: stretch;
  justify-content: flex-start;
  min-width: 0;
  /* Altura da faixa visual = 208 + 24 + 208 (cartões) = 440 no Figma */
  min-height: 440px;
}

.hp-combina__tag-wrap {
  margin-bottom: 0;
}

.hp-combina__title {
  margin: 0;
  max-width: 473px;
  color: var(--color-text-primary-on-color);
}

.hp-combina__accent {
  color: var(--color-surface-primary-pure);
}

.hp-combina__cta {
  margin-top: auto;
}

.hp-combina__visual {
  border-radius: var(--gpower-radius-l);
  width: 100%;
  max-width: 257px;
  height: 440px;
  justify-self: start;
  box-sizing: border-box;
  flex-shrink: 0;
  background: transparent;
}

.hp-combina__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Coluna 3 — Figma 1:9553 / 1:9556 */
.hp-combina__cards {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-m);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.hp-mini-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-background-default);
  border-radius: var(--gpower-radius-l);
  padding: var(--gpower-spacing-m);
  color: var(--color-text-primary);
  width: 100%;
  min-height: 208px;
  height: 208px;
  padding-right: 71px;
  box-sizing: border-box;
  box-shadow: 0 1px 1px rgba(57, 56, 58, 0.2);
}

.hp-mini-card__logo {
  display: block;
  flex-shrink: 0;
  margin-bottom: var(--gpower-spacing-m);
  object-fit: contain;
  object-position: left center;
}

/* Figma 1:9553 GalpLogo: 88×40; 1:9558 continente: área 268×31 */
.hp-mini-card__logo--galp {
  height: 40px;
  width: auto;
  max-width: 88px;
  max-height: 40px;
}

.hp-mini-card__logo--continente {
  width: auto;
  height: 31px;
  max-width: 268px;
  max-height: 31px;
}

.hp-mini-card p {
  margin: 0;
  margin-top: auto;
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-body);
}

/* Oferta grid */
/* Figma frame 1:14923: gap vertical entre linhas = var(--m, 24px) */
.hp-offer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-m);
  margin-top: var(--gpower-spacing-m);
  width: 100%;
  min-width: 0;
}

/* Oferta — blocos <a>: overlay + hover / active como hp-card-start (gpower-card) */
a.hp-offer-card,
a.hp-offer-tile,
a.hp-offer-purple,
a.hp-offer-green-stat {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.hp-offer-card::before,
a.hp-offer-tile::before,
a.hp-offer-purple::before,
a.hp-offer-green-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  display: none;
  background-color: transparent;
  transition: background-color 180ms ease-in-out;
}

a.hp-offer-card:hover::before,
a.hp-offer-tile:hover::before,
a.hp-offer-purple:hover::before,
a.hp-offer-green-stat:hover::before {
  display: inline-flex;
  background-color: var(--color-action-secondary-hover);
}

a.hp-offer-card:active::before,
a.hp-offer-tile:active::before,
a.hp-offer-purple:active::before,
a.hp-offer-green-stat:active::before {
  display: inline-flex;
  background-color: var(--color-action-secondary-pressed);
}

a.hp-offer-card:focus-visible,
a.hp-offer-tile:focus-visible,
a.hp-offer-purple:focus-visible,
a.hp-offer-green-stat:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  z-index: 1;
}

a.hp-offer-card:hover,
a.hp-offer-tile:hover,
a.hp-offer-purple:hover,
a.hp-offer-green-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57, 56, 58, 0.12);
}

a.hp-offer-card > img.hp-offer-card__bg {
  z-index: 0;
}

a.hp-offer-tile > *,
a.hp-offer-purple > *,
a.hp-offer-green-stat > * {
  position: relative;
  z-index: 0;
}

.hp-offer-row {
  display: grid;
  gap: var(--gpower-spacing-l);
  align-items: stretch;
  min-width: 0;
}

/*
 * Linha 1: 368 + gap + 768 (=1168 no Figma). Proporções em fr para caber dentro do
 * .hp-container (max 1168px com padding) sem overflow horizontal.
 */
.hp-offer-row--1 {
  grid-template-columns: minmax(0, 368fr) minmax(0, 768fr);
  align-items: stretch;
}

/* Linha 2: duas colunas iguais (568+568 no Figma) */
.hp-offer-row--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.hp-offer-row--3 {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

@media (max-width: 1100px) {
  .hp-offer-row--1,
  .hp-offer-row--2,
  .hp-offer-row--3 {
    grid-template-columns: 1fr;
  }
}

/* Figma 1:13976: linha1 = 468+32+268; linha2 = 368+32+368 — proporções, não células iguais */
.hp-offer-subgrid {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-m);
  width: 100%;
  min-width: 0;
}

.hp-offer-subgrid__row {
  display: grid;
  gap: var(--gpower-spacing-l);
  width: 100%;
  min-width: 0;
}

.hp-offer-subgrid__row--top {
  grid-template-columns: minmax(0, 468fr) minmax(0, 268fr);
}

.hp-offer-subgrid__row--bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hp-offer-subgrid__row .hp-offer-tile {
  min-width: 0;
}

@media (max-width: 900px) {
  .hp-offer-subgrid__row--top,
  .hp-offer-subgrid__row--bottom {
    grid-template-columns: 1fr;
  }
}

.hp-offer-card {
  border-radius: var(--gpower-radius-l);
  box-shadow: 0 1px 2px rgba(57, 56, 58, 0.2);
  overflow: hidden;
  position: relative;
}

.hp-offer-card--tall {
  height: 488px;
  min-height: 488px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hp-offer-card--tall > img.hp-offer-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-offer-card__bottom {
  position: relative;
  padding: var(--gpower-spacing-m);
  z-index: 1;
}

/* Card alto “Eletricidade & Gás”: Figma — título e CTA em text-primary (preto), não brand primary-dark */
.hp-offer-card--tall .hp-offer-card__bottom .hp-offer-tile__title,
.hp-offer-card--tall .hp-offer-card__bottom .hp-offer-tile__link {
  color: var(--color-text-primary);
}

.hp-offer-tile {
  position: relative;
  padding: var(--gpower-spacing-m);
  min-height: 232px;
  height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--gpower-radius-l);
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .hp-offer-tile {
    height: auto;
    min-height: 200px;
  }
}

.hp-offer-tile--peach {
  background: var(--color-surface-primary-bright);
  box-shadow: 0 1px 2px rgba(57, 56, 58, 0.2);
}

.hp-offer-tile--white {
  background: var(--color-background-default);
  box-shadow: 0 1px 2px rgba(57, 56, 58, 0.2);
}

.hp-offer-tile__title {
  margin: var(--gpower-spacing-xs) 0 var(--gpower-spacing-xs);
}

.hp-offer-tile__desc {
  margin: 0;
  flex: 1;
  color: var(--color-text-primary);
}

.hp-offer-tile__link {
  margin-top: var(--gpower-spacing-s);
  font-size: var(--gpower-font-size-2);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-body);
  text-decoration: none;
}

/* Figma: títulos/links castanho brand só em “Em casa” branco/peach; descrição sempre texto primário */
.hp-offer-tile--peach .hp-offer-tile__title {
  color: var(--color-text-brand-primary-dark);
}

.hp-offer-tile--peach .hp-offer-tile__link {
  color: var(--color-text-brand-primary-dark);
}

.hp-offer-tile--white .hp-offer-tile__title:not(.hp-blue-title) {
  color: var(--color-text-brand-primary-dark);
}

.hp-offer-tile--white .hp-offer-tile__link:not(.hp-blue-title) {
  color: var(--color-text-brand-primary-dark);
}

.hp-offer-tile--white .hp-offer-tile__title.hp-blue-title,
.hp-offer-tile--white .hp-offer-tile__link.hp-blue-title {
  color: var(--color-text-brand-secondary1-dark);
}

.hp-offer-purple {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface-secondary3-dark);
  color: var(--color-text-primary-on-color);
  padding: var(--gpower-spacing-m);
  border-radius: var(--gpower-radius-l);
  min-height: 220px;
  height: 220px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(57, 56, 58, 0.2);
}

@media (max-width: 1100px) {
  .hp-offer-purple {
    height: auto;
    min-height: 220px;
  }
}

.hp-offer-purple .hp-offer-tile__title {
  color: var(--color-text-brand-secondary3-bright);
  margin-top: var(--gpower-spacing-s);
}

.hp-offer-purple .hp-offer-tile__link {
  color: var(--color-text-brand-secondary3-bright);
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-body);
}

.hp-offer-purple p {
  color: var(--color-text-primary-on-color);
}

.hp-offer-photo {
  position: relative;
  height: 220px;
  min-height: 220px;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .hp-offer-photo {
    height: auto;
    min-height: 220px;
    aspect-ratio: 568 / 220;
  }
}

.hp-offer-photo img.hp-offer-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-offer-photo .hp-offer-card__bottom {
  color: var(--color-text-primary-on-color);
}

.hp-offer-photo .hp-offer-tile__title {
  color: var(--color-text-primary-on-color);
}

.hp-offer-photo .hp-offer-tile__link {
  color: var(--color-text-primary-on-color);
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-body);
}

.hp-offer-green-stat {
  position: relative;
  background: var(--color-surface-secondary2-bright);
  padding: var(--gpower-spacing-m);
  border-radius: var(--gpower-radius-l);
  box-shadow: 0 1px 2px rgba(57, 56, 58, 0.2);
  min-height: 232px;
  height: 232px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .hp-offer-green-stat {
    height: auto;
  }
}

.hp-offer-green-stat .hp-stat-num {
  margin: 0;
  color: var(--color-text-brand-secondary2-dark);
}

.hp-offer-green-stat .hp-stat-desc {
  margin: var(--gpower-spacing-xs) 0 0;
  color: var(--color-text-primary);
}

.hp-offer-green-stat .hp-offer-tile__link {
  color: var(--color-text-brand-secondary2-dark);
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-body);
}

.hp-blue-title {
  color: var(--color-text-brand-secondary1-dark);
}

/* Intro “Oferta Galp”: Figma — overline text-s; título e parágrafo text-primary */
.hp-section--offer .hp-intro .hp-overline {
  font-size: var(--gpower-font-size-2);
  line-height: var(--gpower-line-height-body);
}

.hp-section--offer .hp-intro .gpower-text__heading-xl,
.hp-section--offer .hp-intro .gpower-text__paragraph-m {
  color: var(--color-text-primary);
}

/* KPIs */
.hp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gpower-spacing-l);
  width: 100%;
  margin-top: var(--gpower-spacing-m);
}

@media (max-width: 900px) {
  .hp-kpis {
    grid-template-columns: 1fr;
  }
}

.hp-kpi {
  text-align: center;
  padding: var(--gpower-spacing-m) 0;
}

.hp-kpi__bar {
  width: 80px;
  height: 4px;
  margin: 0 auto var(--gpower-spacing-xxs);
  border-radius: 2px;
}

.hp-kpi__bar--neutral {
  background: var(--color-surface-contrast);
}

.hp-kpi__bar--blue {
  background: var(--color-surface-secondary1-pure);
}

.hp-kpi__bar--green {
  background: var(--color-surface-secondary2-pure);
}

.hp-kpi__num {
  margin: 0;
}

.hp-kpi__label {
  margin: 0;
  color: var(--color-text-secondary);
}

.hp-kpi--blue .hp-kpi__num {
  color: var(--color-text-brand-secondary1-pure);
}

.hp-kpi--green .hp-kpi__num {
  color: var(--color-text-brand-secondary2-pure);
}

/* Compromisso */
.hp-split {
  display: grid;
  grid-template-columns: 668px 1fr;
  gap: var(--gpower-spacing-l);
  align-items: center;
  margin-top: var(--gpower-spacing-m);
}

@media (max-width: 1100px) {
  .hp-split {
    grid-template-columns: 1fr;
  }
}

.hp-split__figure {
  margin: 0;
  height: 480px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--color-surface-on-neutral);
}

.hp-split__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-commit-list {
  display: flex;
  flex-direction: column;
  gap: var(--gpower-spacing-s);
  max-width: 468px;
}

.hp-commit-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gpower-spacing-m);
  padding-bottom: var(--gpower-spacing-s);
  border-bottom: 1px solid var(--color-border-default);
}

.hp-commit-item:last-child {
  border-bottom: none;
}

.hp-commit-item__title {
  margin: 0 0 var(--gpower-spacing-xxs);
  font-size: var(--gpower-font-size-4);
  font-weight: var(--gpower-font-weight-medium);
  line-height: var(--gpower-line-height-title);
}

.hp-commit-item__title--a {
  color: var(--color-text-brand-primary-dark);
}

.hp-commit-item__title--b {
  color: var(--color-text-brand-secondary3-dark);
}

.hp-commit-item__title--c {
  color: var(--color-text-brand-secondary2-dark);
}

.hp-commit-item p {
  margin: 0;
}

.hp-commit-item gpower-button {
  flex-shrink: 0;
}

.hp-split__cta {
  margin-top: var(--gpower-spacing-xl);
}

/* Footer region spacing when using custom block before gpower-footer */
.hp-footer-spacer {
  height: var(--gpower-spacing-m);
}