.textual-leadership,
.textual-leadership-grid {
  --leadership-columns: 4;
  --leadership-gap: 24px;
}

.textual-leadership {
  display: grid;
  gap: var(--leadership-gap);
}

.textual-leadership-grid {
  display: grid;
  grid-template-columns: repeat(var(--leadership-columns), minmax(0, 1fr));
  gap: var(--leadership-gap);
}

/*
 * Featured leaders open the section on their own centered row. Flex keeps the
 * row centered for any number of cards, while the width matches one track of
 * the grid below, so both blocks read as a single grid.
 */
.textual-leadership-grid--destaques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.textual-leadership-grid--destaques > .textual-leader-card {
  flex: 0 0 calc(
    (100% - (var(--leadership-columns) - 1) * var(--leadership-gap)) / var(--leadership-columns)
  );
}

.textual-leader-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid #dadada;
  border-radius: 30px;
  box-shadow: 0 18px 42px -28px rgba(0, 0, 0,0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.textual-leader-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0,0.58);
}

.textual-leader-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
}

.textual-leader-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.textual-leader-card:hover .textual-leader-card__image {
  transform: scale(1.025);
}

.textual-leader-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
}

.textual-leader-card__name {
  margin: 0 0 6px;
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
}

.textual-leader-card__role,
.textual-leader-card__role p {
  margin: 0;
  color: #696969;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

.textual-leader-card__linkedin {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #000000;
  background: #fbb118;
  border-radius: 50%;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.textual-leader-card__linkedin:hover,
.textual-leader-card__linkedin:focus-visible {
  color: #fff;
  background: #000000;
  transform: translateY(-2px);
}

.textual-leader-card__linkedin svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.textual-associations-grid {
  display: flex;
  justify-content: center;
}

.textual-association-logo {
  display: grid;
  margin: 0;
  place-items: center;
}

.textual-association-logo__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .textual-leadership,
  .textual-leadership-grid {
    --leadership-columns: 3;
  }

  .textual-associations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .textual-leadership,
  .textual-leadership-grid {
    --leadership-columns: 2;
    --leadership-gap: 14px;
  }

  .textual-leader-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
  }

  .textual-leader-card__media {
    flex-shrink: 0;
  }

  /* Fill each row's card height so LinkedIn keeps the same bottom inset. */
  .textual-leader-card__body {
    flex: 1;
    flex-direction: column;
    padding: 16px;
  }

  .textual-leader-card__linkedin {
    margin-top: auto;
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .textual-leader-card__copy {
    width: 100%;
    overflow-wrap: anywhere;
  }

  .textual-associations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .textual-associations-grid > .textual-association-logo {
    grid-column: span 2;
    min-width: 0;
  }

  /* Center the middle logo in the five-association 2 / 1 / 2 composition. */
  .textual-associations-grid > .textual-association-logo:nth-child(3):nth-last-child(3) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 480px) {
  .textual-leadership,
  .textual-leadership-grid {
    --leadership-columns: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .textual-leader-card,
  .textual-leader-card__image,
  .textual-leader-card__linkedin {
    transition: none;
  }
}

/* Nosso DNA tiles
   ---------------------------------------------------------------------------
   Applied to Elementor containers on the Sobre page: `sobre-dna-grid` on the
   wrapper, `sobre-dna-tile` plus a per-value modifier on each of the 7 tiles.
   Each tile keeps a fixed square footprint: hovering swaps the background to
   the value's brand colour, lifts and shrinks the glyph, and fades the label
   in underneath it, all without changing the tile's size.

   The tiles render at roughly 78px, so vertical space, not width, is the
   binding constraint, and the three geometry variables below are derived per
   tile rather than shared:

   - `--dna-icon-scale` / `--dna-icon-shift` sit the glyph 4px below the top
     of the tile and size it to fill the room its own label leaves. None of
     the values reaches 1, so no glyph is drawn larger than its natural size.
   - `--dna-label-center` centres the label in the space left under that
     glyph, so a one-line label and a three-line one each sit balanced in
     their own tile.

   The values are measured, not derived in CSS: the label heights depend on
   where the text wraps and the glyph heights on the optical `--dna-scale`
   nudge, neither of which CSS can resolve into a length. */

.sobre-dna-grid {
  --dna-gray-light: #9b9b9b;
  --dna-gray-dark: #696969;
  --dna-duration: 250ms;
  --dna-duration-label: 200ms;
  --dna-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Fallbacks for the tightest tile; every tile overrides all three. */
  --dna-label-center: 73.3%;
  --dna-icon-scale: 0.67;
  --dna-icon-shift: -24.7%;

  /* Label defaults. Two tiles override them below, because their longest word
     is a single unbreakable token that would otherwise overflow the tile. */
  --dna-label-size: 11px;
  --dna-label-tracking: normal;
}

/* A geometria da grade — display, quebra de linha, alinhamento, gap e a largura
   do ladrilho — mora nos controles do Elementor, no contêiner `045d10d` da
   página Sobre e nos sete contêineres de ladrilho, e não aqui. Havia neste
   ponto uma tentativa de fazê-la em CSS, desligada por comentário: ela perdia
   para as custom properties que o Elementor escreve em `.e-con.e-flex`. Junto
   dela viviam `--dna-columns` e `--dna-gap`, que só aquele bloco lia, e por
   isso não tinham consumidor nenhum — inclusive os dois @media que redefiniam
   `--dna-columns` em 1024px e em 480px não faziam efeito algum (D5).
   Tudo removido em 2026-08-24; este arquivo cuida só da aparência do ladrilho.

   O que fica no Elementor, no breakpoint mobile (<=767px): `flex-wrap: wrap` na
   grade e `width: 84px` em cada ladrilho. Com largura definida a fita reflui
   sozinha — 3 por linha a 360px, 5 a 600px, 7 a 767px — sem contagem de colunas
   por breakpoint. Acima de 767px nada mudou. */

.sobre-dna-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--dna-gray-light);
  border-radius: 12%;
  transition:
    background-color var(--dna-duration) var(--dna-ease),
    transform var(--dna-duration) var(--dna-ease);
}

/* Per-value brand colour, an optical scale nudge so the seven glyphs read at
   the same visual weight despite their very different aspect ratios, and the
   hover glyph geometry this tile's own label leaves room for: two lines take
   more room than one, three more than two. */
.sobre-dna-tile--somos-um-time {
  --dna-color: #f3b313;
  --dna-scale: 1;
  --dna-icon-scale: 0.8;
  --dna-icon-shift: -20.8%;
  --dna-label-center: 76.6%;
}

/* Three lines — the tallest label of the seven, and the one that leaves the
   least room for its glyph. */
.sobre-dna-tile--energia-e-brilho-nos-olhos {
  --dna-color: #f58634;
  --dna-scale: 1.06;
  --dna-icon-scale: 0.67;
  --dna-icon-shift: -24.7%;
  --dna-label-center: 73.3%;
}

.sobre-dna-tile--atitude {
  --dna-color: #1bbc9b;
  --dna-scale: 1;
  --dna-icon-scale: 0.93;
  --dna-icon-shift: -16.9%;
  --dna-label-center: 80.5%;
}

.sobre-dna-tile--conectados-com-o-cliente {
  --dna-color: #e84c3d;
  --dna-scale: 0.95;
  --dna-icon-scale: 0.8;
  --dna-icon-shift: -20.8%;
  --dna-label-center: 76.0%;
}

/* "Surpreendemos" is one 13-character word: at the default 11px it is 85px
   wide against a 71.4px text box. Tightened tracking buys back part of the
   reduction the fit demands. */
.sobre-dna-tile--surpreendemos {
  --dna-color: #9b58b5;
  --dna-scale: 0.92;
  --dna-label-size: 9.75px;
  --dna-label-tracking: -0.04em;
  --dna-icon-scale: 0.95;
  --dna-icon-shift: -16.3%;
  --dna-label-center: 80.0%;
}

.sobre-dna-tile--entrega {
  --dna-color: #336799;
  --dna-scale: 0.95;
  --dna-icon-scale: 0.93;
  --dna-icon-shift: -16.9%;
  --dna-label-center: 79.8%;
}

/* Same case as "Surpreendemos", and the longest word of the seven at 16
   characters, so it sets the smallest label size in the row. */
.sobre-dna-tile--sustentabilidade {
  --dna-color: #8daf3f;
  --dna-scale: 1;
  --dna-label-size: 9.25px;
  --dna-label-tracking: -0.04em;
  --dna-icon-scale: 0.95;
  --dna-icon-shift: -16.3%;
  --dna-label-center: 81.1%;
}

.sobre-dna-tile > .elementor-widget-image {
  position: absolute;
  inset: 0;
  padding: 20%;
  transition: transform var(--dna-duration) var(--dna-ease);
}

/* Depending on the Elementor version the image is either a direct child or is
   wrapped in `.elementor-widget-container`; size whichever child is present so
   the glyph always resolves its height against the padded box. */
.sobre-dna-tile > .elementor-widget-image > * {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.sobre-dna-tile > .elementor-widget-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--dna-scale, 1));
}

/* Kept in the DOM at all times so assistive technology still announces the
   value; only its opacity is animated.

   The label is centred on `--dna-label-center` rather than anchored to the
   bottom, so labels of one, two and three lines share a centre line across
   the row. Centring uses the `translate` property so the entry animation can
   keep using `transform` without the two composing into each other. */
.sobre-dna-tile > .elementor-widget-heading {
  position: absolute;
  top: var(--dna-label-center);
  right: 0;
  left: 0;
  opacity: 0;
  translate: 0 -50%;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity var(--dna-duration-label) var(--dna-ease),
    transform var(--dna-duration-label) var(--dna-ease);
}

.sobre-dna-tile .elementor-heading-title {
  margin: 0;
  padding: 0 4%;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: var(--dna-label-size);
  font-weight: 700;
  letter-spacing: var(--dna-label-tracking);
  line-height: 1.1;
  text-align: center;
  text-transform: none;
}

@media (hover: hover) {
  .sobre-dna-tile:hover {
    background-color: var(--dna-color);
    transform: translateY(-4px);
  }

  .sobre-dna-tile:hover > .elementor-widget-image {
    transform: translateY(var(--dna-icon-shift)) scale(var(--dna-icon-scale));
  }

  .sobre-dna-tile:hover > .elementor-widget-heading {
    opacity: 1;
    transform: none;
  }
}

/* The alternating light/dark checker. The tiles now sit on a single row, so
   these three are positions 2, 4 and 6 at every width and the alternation
   holds unconditionally. */
.sobre-dna-tile--energia-e-brilho-nos-olhos,
.sobre-dna-tile--conectados-com-o-cliente,
.sobre-dna-tile--entrega {
  background-color: var(--dna-gray-dark);
}

/* Without hover there is no way to reach the coloured state, so every tile
   renders in its own colour with its label visible. */
@media (hover: none) {
  .sobre-dna-tile {
    /*background-color: var(--dna-color);*/
  }

  .sobre-dna-tile > .elementor-widget-image {
    transform: translateY(var(--dna-icon-shift)) scale(var(--dna-icon-scale));
  }

  .sobre-dna-tile > .elementor-widget-heading {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-dna-tile,
  .sobre-dna-tile > .elementor-widget-image,
  .sobre-dna-tile > .elementor-widget-heading {
    transition-duration: 1ms;
  }

  .sobre-dna-tile:hover {
    transform: none;
  }
}