/* =========================================================
   Página "O Cartório"
   Usa o mesmo sistema da Home (styles.css / responsive.css):
   .container, --gutter, --container-width, escala --site-scale e
   breakpoints 1201–1330 · ≤1200 · ≤767. Medidas em px de layout (1920).
   ========================================================= */

.icon--check { --icon: url('../assets/icons/check-circle.svg'); }

/* =========================================================
   APRESENTAÇÃO (dentro do mesmo .hero da Home)
   ========================================================= */
.hero--page {
  height: auto;
  padding-bottom: 79px; /* mesmo respiro do hero de Serviços e Documentos */
}

.cartorio-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
  margin-top: 83px;
}

.cartorio-hero__title {
  font-size: 74px;
  font-weight: 600;
  line-height: 88px;
  text-transform: uppercase;
  color: var(--color-white);
}

.cartorio-hero__subtitle {
  margin-top: 42px;
  font-size: 42.5px;
  font-weight: 600;
  line-height: 51px;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.cartorio-hero__text {
  margin-top: 43px;
  font-size: 23px;
  line-height: 28px;
  color: var(--color-secondary);
}

.cartorio-hero__image {
  flex: none;
  width: 700px;
  height: 619px;
  border-radius: 30px;
  object-fit: cover;
  object-position: center 52%;
}

/* =========================================================
   O SERVIÇO REGISTRAL E NOTARIAL
   ========================================================= */
.services-intro {
  padding-top: 112px;
  padding-bottom: 111px;
  background: var(--color-background-light);
}

.services-intro__header,
.services-intro__cards {
  display: grid;
  grid-template-columns: 678fr 925fr;
  column-gap: 64px;
}

.services-intro__lead {
  padding-top: 27px;
  padding-left: 18px;
  font-size: 26px;
  line-height: 31px;
  color: var(--color-text-body);
}

.services-intro__lead strong {
  font-weight: 600;
  color: #303d3c;
}

.services-intro__cards {
  margin-top: 46px;
}

.registry-card,
.notary-card {
  position: relative;
  min-height: 606px;
  border-radius: 30px;
}

.registry-card {
  overflow: hidden;
  padding: 58px 58px 0 56px;
  border: 2px solid #c2cac9;
}

.registry-card__title,
.notary-card__title {
  font-size: 31px;
  font-weight: 600;
  line-height: 38px;
  text-transform: uppercase;
}

.registry-card__title {
  color: var(--color-primary-title);
}

.registry-card__text,
.notary-card__text {
  margin-top: 16px;
  font-size: 22.5px;
  line-height: 27px;
}

.registry-card__text {
  position: relative;
  z-index: 1;
  color: var(--color-primary-title);
}

.registry-card__text strong {
  font-weight: 600;
  color: #303d3c;
}

/* área da certidão (mesmo fundo da seção), recortada pela borda inferior do card */
.registry-card__media {
  position: absolute;
  left: 270px;
  right: 0;
  top: 270px;
  bottom: 0;
}

.registry-card__image {
  position: absolute;
  left: 55px;
  top: 98px;
  width: 323px;
  height: auto;
  aspect-ratio: 640 / 900;
  max-width: none;
  /* mostra só a certidão, sem as margens brancas do arquivo */
  object-fit: cover;
  object-position: center top;
}

.notary-card {
  padding: 58px 62px 0;
  background: linear-gradient(90deg, var(--color-banner-start) 0%, var(--color-banner-end) 100%);
}

.notary-card__title {
  color: var(--color-white);
}

.notary-card__text {
  color: var(--color-secondary);
}

.notary-card__services {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 21px 23px;
  margin-top: 35px;
}

.notary-service {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 67px;
  padding: 0 34px 0 28px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: rgba(46, 81, 76, 0.35);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.notary-service .icon {
  flex: none;
  width: 27px;
  height: 27px;
  background-color: #dfe7e6;
}

/* =========================================================
   HISTÓRICO DE TABELIÕES
   ========================================================= */
.history {
  padding: 122px 0;
  background: var(--color-background-dark);
}

.history__grid {
  display: grid;
  grid-template-columns: 1fr 644px;
  align-items: center;
  padding-left: 143px;
  padding-right: 137px;
}

.history__heading {
  position: relative;
  top: -7px;
}

.history__kicker {
  padding-left: 13px;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  white-space: pre;
  color: var(--color-secondary);
}

.history__title {
  margin-top: 12px;
  font-size: 76px;
  font-weight: 600;
  line-height: 94px;
  text-transform: uppercase;
  color: var(--color-white);
}

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 88px;
}

/* linha vertical */
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 7px;
  bottom: -9px;
  width: 2px;
  background: var(--color-secondary);
}

.timeline__item {
  position: relative;
  min-height: 163px;
  padding: 40px 48px 24px;
  border: 2px solid var(--color-border);
  border-radius: 30px;
  background: linear-gradient(135deg, #222b2b 0%, #283131 100%);
}

/* marcador: o "halo" na cor do fundo interrompe a linha ao redor do ponto */
.timeline__item::before {
  content: '';
  position: absolute;
  left: -88px;
  top: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #9cb8b6;
  box-shadow: 0 0 0 28px var(--color-background-dark);
  transform: translateY(-50%);
}

.timeline__year {
  font-size: 46px;
  font-weight: 600;
  line-height: 54px;
  text-transform: uppercase;
  color: var(--color-white);
}

.timeline__name {
  margin-top: 7px;
  padding-left: 3px;
  font-size: 24px;
  line-height: 30px;
  color: var(--color-secondary);
}

.timeline__item--current {
  border-color: #9cb8b6;
  background: #9cb8b6;
}

.timeline__item--current .timeline__year,
.timeline__item--current .timeline__name {
  color: #242d2d;
}

/* Animação fade in up (ativada por js/main.js ao entrar na tela).
   Sem JS ou com "reduzir movimento", tudo aparece normalmente. */
.js-reveal .history__heading,
.js-reveal .timeline__item,
.js-reveal .notary-service {
  opacity: 0;
  translate: 0 24px;
}

/* a transição só existe na entrada (nunca esmaece ao carregar) */
.js-reveal .history.is-visible .history__heading,
.js-reveal .history.is-visible .timeline__item,
.js-reveal .notary-card.is-visible .notary-service {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), translate 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.history__heading { --reveal-delay: 0s; }
.timeline__item:nth-child(1) { --reveal-delay: 0.25s; }
.timeline__item:nth-child(2) { --reveal-delay: 0.5s; }
.timeline__item:nth-child(3) { --reveal-delay: 0.75s; }
.timeline__item:nth-child(4) { --reveal-delay: 1s; }

/* serviços: da esquerda para a direita, linha por linha */
.notary-service:nth-child(1) { --reveal-delay: 0.1s; }
.notary-service:nth-child(2) { --reveal-delay: 0.25s; }
.notary-service:nth-child(3) { --reveal-delay: 0.4s; }
.notary-service:nth-child(4) { --reveal-delay: 0.55s; }
.notary-service:nth-child(5) { --reveal-delay: 0.7s; }
.notary-service:nth-child(6) { --reveal-delay: 0.85s; }

/* =========================================================
   DEPOIMENTOS (grade fixa, variante clara do card da Home)
   ========================================================= */
.reviews {
  padding-top: 122px;
  padding-bottom: 87px;
  background: var(--color-background-light);
}

/* duas faixas em loop: mesmo componente .testimonials da Home (js/main.js) */
.reviews__row {
  --marquee-gap: 49px;
  margin-top: 0;
  /* respiro para a sombra dos cards não ser cortada pela janela da faixa */
  padding: 4px 0 20px;
}

.reviews__row + .reviews__row {
  margin-top: 16px;
}

/* faixa de cima vai para a esquerda; a de baixo, para a direita */
.reviews__row + .reviews__row .testimonials__track {
  animation-direction: reverse;
}

.testimonial--light {
  width: 523px;
  height: 204px;
  padding: 24px 31px 0;
  border: 0;
  background: var(--color-white);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.035);
}

.testimonial--light .testimonial__avatar {
  background: #1a2424;
  color: var(--color-secondary);
}

.testimonial--light .testimonial__name {
  color: #1a2424;
}

.testimonial--light .testimonial__date {
  color: #4e4e4e;
}

.testimonial--light .testimonial__text {
  margin-top: 22px;
  color: var(--color-secondary);
}

.testimonial--light .testimonial__stars {
  margin-top: 20px;
}

/* =========================================================
   RESPONSIVO — mesmos breakpoints da Home
   ========================================================= */

/* Notebooks menores (1201–1330px): mesmo ajuste intermediário da Home */
@media (min-width: 1201px) and (max-width: 1330px) {
  .history__grid {
    padding-left: 60px;
    padding-right: 40px;
  }
}

/* Tablet (≤ 1200px, sem zoom) */
@media (max-width: 1200px) {
  .hero--page {
    padding-bottom: 64px;
  }

  .cartorio-hero {
    flex-direction: column;
    gap: 48px;
    margin-top: 72px;
  }

  .cartorio-hero__content {
    padding: 0;
  }

  .cartorio-hero__title {
    font-size: 48px;
    line-height: 58px;
  }

  .cartorio-hero__subtitle {
    margin-top: 28px;
    font-size: 30px;
    line-height: 38px;
  }

  .cartorio-hero__text {
    margin-top: 28px;
    max-width: 720px;
    font-size: 18px;
    line-height: 27px;
  }

  .cartorio-hero__image {
    width: 100%;
    height: auto;
    margin-right: 0;
    aspect-ratio: 700 / 619;
  }

  .services-intro,
  .reviews {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .services-intro__header,
  .services-intro__cards {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .services-intro__lead {
    padding: 0;
    font-size: 19px;
    line-height: 28px;
  }

  .services-intro__cards {
    margin-top: 40px;
  }

  .registry-card,
  .notary-card {
    min-height: 0;
  }

  .registry-card {
    display: flex;
    flex-direction: column;
    padding: 40px 40px 0;
  }

  .notary-card {
    padding: 40px;
  }

  .registry-card__title,
  .notary-card__title {
    font-size: 24px;
    line-height: 32px;
  }

  .registry-card__text,
  .notary-card__text {
    font-size: 18px;
    line-height: 27px;
  }

  /* a certidão vira um bloco ao final do card, ainda recortado pela borda */
  .registry-card__media {
    position: relative;
    inset: auto;
    align-self: center;
    width: min(395px, 100%);
    height: 260px;
    margin-top: 32px;
  }

  .registry-card__image {
    left: 50%;
    top: 40px;
    width: min(323px, 82%);
    transform: translateX(-50%);
  }

  .notary-card__services {
    gap: 14px 16px;
    margin-top: 28px;
  }

  .notary-service {
    height: 56px;
    padding: 0 24px 0 20px;
    font-size: 16px;
  }

  .notary-service .icon {
    width: 22px;
    height: 22px;
  }

  .history {
    padding: 88px 0;
  }

  .history__grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0;
  }

  .history__kicker {
    padding-left: 0;
    font-size: 15px;
  }

  .history__title {
    margin-top: 10px;
    font-size: 48px;
    line-height: 58px;
  }

  .timeline {
    gap: 20px;
    padding-left: 64px;
  }

  .timeline::before {
    top: 0;
    bottom: 0;
  }

  .timeline__item {
    min-height: 0;
    padding: 28px 32px;
    border-radius: 24px;
  }

  .timeline__item::before {
    left: -64px;
    box-shadow: 0 0 0 14px var(--color-background-dark);
  }

  .timeline__year {
    font-size: 32px;
    line-height: 40px;
  }

  .timeline__name {
    font-size: 18px;
    line-height: 26px;
  }

  .reviews__row {
    --marquee-gap: 28px;
  }

  .reviews__row + .reviews__row {
    margin-top: 24px;
  }

  .testimonial--light {
    width: min(440px, 82vw);
    height: auto;
    padding-bottom: 28px;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .hero--page {
    padding-bottom: 48px;
  }

  .cartorio-hero {
    gap: 36px;
    margin-top: 48px;
  }

  .cartorio-hero__title {
    font-size: min(38px, calc((100vw - 32px) / 7));
    line-height: 1.22;
  }

  .cartorio-hero__subtitle {
    margin-top: 20px;
    font-size: min(24px, calc((100vw - 32px) / 14));
    line-height: 1.3;
  }

  .cartorio-hero__text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .cartorio-hero__image {
    border-radius: 20px;
  }

  .services-intro,
  .history,
  .reviews {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .services-intro__lead {
    font-size: 16px;
    line-height: 24px;
  }

  .registry-card,
  .notary-card {
    border-radius: 22px;
  }

  .registry-card {
    padding: 28px 24px 0;
  }

  .notary-card {
    padding: 28px 24px;
  }

  .registry-card__title,
  .notary-card__title {
    font-size: 20px;
    line-height: 28px;
  }

  .registry-card__text,
  .notary-card__text {
    font-size: 15px;
    line-height: 23px;
  }

  .registry-card__media {
    height: 220px;
  }

  .notary-card__services {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .notary-service {
    height: auto;
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }

  .history__title {
    font-size: min(38px, calc((100vw - 32px) / 8));
    line-height: 1.22;
  }

  .timeline {
    padding-left: 44px;
  }

  .timeline::before {
    left: 9px;
  }

  .timeline__item {
    padding: 22px 22px;
    border-radius: 20px;
  }

  .timeline__item::before {
    left: -44px;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 10px var(--color-background-dark);
  }

  .timeline__year {
    font-size: 26px;
    line-height: 32px;
  }

  .timeline__name {
    font-size: 15px;
    line-height: 22px;
  }

  .reviews__row + .reviews__row {
    margin-top: 16px;
  }

  .testimonial--light {
    padding: 20px 20px 24px;
    border-radius: 22px;
  }
}