/* =========================================================
   ComTato — página Quem Somos
   ========================================================= */

/* ---------- Tipografia da página ---------- */
.ct-qs-h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

.ct-qs-text {
  font-size: clamp(1.05rem, 1.15vw, 1.15rem);
  line-height: 1.8;
  margin-bottom: 1.4rem;
}
.ct-qs-text:last-child { margin-bottom: 0; }
.ct-qs-text strong { font-weight: 700; }

/* =========================================================
   HERO
   ========================================================= */
.ct-qs-hero { padding-block: 0 clamp(2rem, 4vw, 3rem); }

.ct-qs-hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--ct-radius-lg);
  display: block;
}

.ct-qs-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: center;
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.ct-qs-hero__rule {
  border: 0;
  border-top: 1px solid var(--ct-ink);
  opacity: 1;
  margin: 0 auto;
  max-width: 68%;
}

/* =========================================================
   POR QUE COMTATO
   ========================================================= */
.ct-porque__row { row-gap: 2.5rem; }

/* Arte do layout: o traço azul com a peça atravessa as seções
   "Por que COMTATO?" e "A Origem", descendo sobre a faixa cinza. */
.ct-porque {
  position: relative;
  overflow-x: clip;
  /* respiro entre o texto e a divisa da seção seguinte */
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ct-porque__art {
  position: relative;
  min-height: clamp(420px, 44vw, 680px);
  background: url('../img/brand/QUEM-SOMOS.png') center top / contain no-repeat;
  /* estoura a coluna à direita, como no layout */
  width: 124%;
  margin-right: -24%;
  /* desce bastante: a ponta do traço passa por trás da foto da fundadora */
  margin-bottom: clamp(-26rem, -30vw, -14rem);
  z-index: 1;
  pointer-events: none;
}

/* a Origem fica atrás da arte, que passa por cima do fundo cinza */
.ct-origem { position: relative; }


/* =========================================================
   A ORIGEM
   ========================================================= */
.ct-origem__row { row-gap: 2.5rem; }

.ct-origem__fig {
  display: flex;
  justify-content: center;
  /* acima da arte que desce da seção anterior */
  position: relative;
  z-index: 2;
  /* sobe para encontrar a ponta do traço */
  margin-top: clamp(-6rem, -7vw, -3rem);
}

/* o texto também precisa ficar legível sobre a arte */
.ct-origem__row > [class*='col-'] { position: relative; z-index: 2; }

.ct-origem__img {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-photo);
}

/* =========================================================
   PROPÓSITO INSTITUCIONAL
   ========================================================= */
.ct-proposito__title { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.ct-proposito__row { row-gap: 1.5rem; }

.ct-pilar {
  height: 100%;
  border: 2px solid var(--ct-blue);
  border-radius: var(--ct-radius);
  padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
  text-align: center;
}

.ct-pilar__title {
  color: var(--ct-blue);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}

.ct-pilar__text {
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* =========================================================
   TRAJETÓRIA
   ========================================================= */
.ct-trajetoria { overflow: hidden; }

.ct-trajetoria__row { row-gap: 2rem; align-items: center; }

.ct-trajetoria__art {
  min-height: clamp(280px, 34vw, 520px);
  background: url('../img/brand/QUEM-SOMOS2.png') left center / contain no-repeat;
  margin-left: -8%;
}

.ct-trajetoria__list {
  padding-left: 1.15rem;
  margin-bottom: 1.5rem;
}
.ct-trajetoria__list li {
  font-size: clamp(1.05rem, 1.15vw, 1.15rem);
  line-height: 1.75;
  margin-bottom: .7rem;
}
.ct-trajetoria__list strong { font-weight: 700; }

/* =========================================================
   LINHA DO TEMPO
   ========================================================= */
.ct-tl {
  background: var(--ct-blue-dark);
  color: #fff;
  position: relative;
}

.ct-tl__heading {
  color: #fff;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ct-tl__heading { text-align: center; }

.ct-tl__list {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: grid;
  gap: clamp(2rem, 3.5vw, 3rem);
}

/* trilho vertical que conecta os marcos */
.ct-tl__list::before {
  content: '';
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom,
              transparent,
              rgba(255, 255, 255, .35) 8%,
              rgba(255, 255, 255, .35) 92%,
              transparent);
}

/* colunas fixas: o card nunca invade o lado oposto */
.ct-tl__item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  position: relative;
}

/* marcador redondo sobre o trilho */
.ct-tl__item::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ct-blue);
  box-shadow: 0 0 0 5px var(--ct-blue-dark), 0 0 0 7px rgba(255, 255, 255, .35);
  position: relative;
  z-index: 2;
}

/* o card alterna de lado a cada marco */
.ct-tl__body {
  grid-row: 1;
  grid-column: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ct-radius);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  text-align: right;
}
.ct-tl__item:nth-child(even) .ct-tl__body {
  grid-column: 3;
  text-align: left;
}

/* a coluna oposta fica vazia: o respiro é o próprio desenho */
.ct-tl__media { display: none; }

.ct-tl__year {
  display: inline-block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ct-blue);
  padding: .3rem .85rem;
  border-radius: var(--ct-radius-pill);
  margin-bottom: .75rem;
}

.ct-tl__title {
  color: #fff;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: .75rem;
}

.ct-tl__text {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 0;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (min-width: 992px) {
  .ct-porque__row > [class*='col-'],
  .ct-origem__row > [class*='col-'],
  .ct-trajetoria__row > [class*='col-'] { padding-inline: 1rem; }
}

@media (max-width: 991.98px) {
  .ct-qs-hero__title br,
  .ct-qs-h2 br { content: ''; }
  .ct-qs-hero__title br::after,
  .ct-qs-h2 br::after { content: ' '; }

  .ct-qs-hero__rule { max-width: 100%; }

  /* empilhado: a arte não transborda para não colidir com o texto */
  .ct-porque { padding-bottom: var(--ct-section-y); }
  .ct-porque__art {
    min-height: 220px;
    margin-bottom: 0;
    background-position: center;
  }
  .ct-trajetoria__art { min-height: 200px; margin-left: 0; background-position: center; }

  /* linha do tempo: trilho à esquerda, cards em coluna única */
  .ct-tl__list::before { left: 9px; transform: none; }

  .ct-tl__item {
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  .ct-tl__item::before {
    grid-column: 1;
    margin-top: 1.4rem;
  }
  .ct-tl__body,
  .ct-tl__item:nth-child(even) .ct-tl__body {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .ct-qs-hero__img { aspect-ratio: 4 / 3; }
  .ct-pilar__title br { content: ''; }
  .ct-pilar__title br::after { content: ' '; }
}