/* ==========================================================================
   SOBRE MIM
   Contida no mesmo .shell do hero, para as bordas esquerda e
   direita baterem com a seção de cima. Três colunas: texto · foto · painel.
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .66fr) minmax(0, 1.1fr);
  align-items: stretch;
}

/* ── coluna de texto ─────────────────────────────────────────────────── */
.about__text {
  padding-right: clamp(1.4rem, 2.6vw, 2.8rem);
  padding-block: clamp(.4rem, 1vw, 1rem);
}

.about__title {
  position: relative;
  display: inline-block;
  padding-right: 2.4rem;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.6rem);
}

.about__body {
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  display: grid;
  gap: .9em;
  max-width: 44ch;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--muted);
}

.about__body strong {
  font-weight: 600;
  color: var(--ink-soft);
}

/* riscos diagonais ao lado do título */
.doodle--tick {
  position: absolute;
  top: .1em;
  right: 0;
  width: clamp(18px, 1.7vw, 24px);
  opacity: .45;
}

/* ── foto central ────────────────────────────────────────────────────── */
.about__photo {
  position: relative;
  overflow: hidden;
  background: var(--cream-lo);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ── painel escuro ───────────────────────────────────────────────────── */
.about__services {
  padding: clamp(1.7rem, 1rem + 1.9vw, 2.8rem) clamp(1.5rem, 2.4vw, 2.5rem);
  background: var(--ink-panel);
  color: var(--cream-hi);
}

.about__services-label { color: color-mix(in srgb, var(--cream-hi) 62%, transparent); }

.services {
  display: grid;
  gap: clamp(1rem, 1.35vw, 1.6rem);
  margin-top: clamp(1rem, 1.6vw, 1.6rem);
}

.service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 1.1vw, 1.1rem);
}

.service__icon svg {
  width: clamp(34px, 2.9vw, 46px);
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service__icon .frame { stroke-width: 1.4; opacity: .55; }

.service__text h3 {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.service__text p {
  margin-top: .2em;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: color-mix(in srgb, var(--cream-hi) 62%, transparent);
}

/* escalona a entrada dos itens */
.service:nth-child(1) { transition-delay: .04s; }
.service:nth-child(2) { transition-delay: .12s; }
.service:nth-child(3) { transition-delay: .2s;  }
.service:nth-child(4) { transition-delay: .28s; }
.service:nth-child(5) { transition-delay: .36s; }


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* ── laptop: a foto sai, sobram texto + painel ────────────────────────── */
@media (max-width: 1080px) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
  .about__photo { display: none; }
  .about__body { max-width: 46ch; }
}

/* ── tablet: empilha; a foto vira faixa entre os dois blocos ──────────── */
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }

  .about__text {
    padding-right: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
  }

  .about__body { max-width: 62ch; }

  .about__photo {
    display: block;
    height: clamp(170px, 26vw, 230px);
  }

  .about__photo img { object-position: center 38%; }

  /* duas colunas de serviços aproveitam a largura */
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.8rem;
  }
}

/* ── celular ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .about__photo { height: clamp(150px, 38vw, 200px); }

  .services { grid-template-columns: 1fr; }

  .service { align-items: start; }
  .service__icon svg { width: 34px; }

  .doodle--tick { display: none; }
}