/* ============================================================
   DIAS — Piercer & Tattoo Artist
   Folha de estilo · mobile-first, responsiva e acessível.
   Paleta, fontes e ritmo seguem a identidade da marca.
   ============================================================ */

/* ---------- Tokens / variáveis ---------- */
:root {
  --green-dark:  #22361D;   /* principal */
  --green-forest:#213319;   /* superfícies alternadas */
  --gold:        #E4C58B;   /* destaque */
  --cream:       #F1EAD9;   /* texto sobre o verde */

  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1080px;
  --wrap-narrow: 680px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Fundo da marca: textura de linhas fluidas em verde, fixa sob toda a página.
     A cor verde escura permanece como fallback (e enquanto a imagem carrega). */
  background-color: var(--green-dark);
  background-image: url("assets/textura-fabiana.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Garante que o atributo [hidden] sempre esconda (vence regras de display). */
[hidden] { display: none !important; }

a { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--gold);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
}

/* ---------- Acessibilidade: link de pular ---------- */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);   /* escondido para cima (não cria rolagem lateral) */
  background: var(--gold);
  color: var(--green-dark);
  padding: .6rem 1rem;
  border-radius: 0 0 4px 0;
  z-index: 100;
  font-size: .85rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Foco visível e consistente para teclado */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout base ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
/* Seções alternadas em verde sólido — criam ritmo e contraste sobre a textura
   do fundo (que aparece nas seções "transparentes"). O leve translúcido deixa
   a textura insinuar por baixo, sem perder a legibilidade. */
.section--alt { background-color: rgba(33, 51, 25, .82); }

/* Seções de destaque (hero, CTA final, rodapé): a própria textura da marca,
   sem véu, para o fundo aparecer com mais presença. */
.section--texture {
  position: relative;
  background-color: transparent;
}

/* ---------- Eyebrow / rótulos ---------- */
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 400;
  color: var(--gold);
  opacity: .85;
  margin: 0 0 .9rem;
}

h2 { font-size: clamp(2rem, 6vw, 3rem); }
h3 { font-size: clamp(1.4rem, 4vw, 1.8rem); }

.section__lead {
  font-size: 1.08rem;
  max-width: 52ch;
  margin: .8rem 0 2.2rem;
  opacity: .92;
}
.section__close {
  margin-top: 1.8rem;
  font-style: italic;
  opacity: .9;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  text-decoration: none;
  padding: 1rem 2.1rem;
  border-radius: 2px;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* Dourado vazado → preenche no hover com texto verde */
.btn--gold {
  background: transparent;
  color: var(--gold);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--gold);
  color: var(--green-dark);
}
/* Variante discreta */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(241, 234, 217, .35);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Divisor delicado (linha fina dourada + losango central) ----------
   As duas linhas são os pseudo-elementos; o losango central (.flourish-mid)
   é injetado por JS em cada .flourish (ver script.js). */
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Altura zero + posição na emenda entre as seções: o losango e as linhas
     transbordam igualmente para os dois lados, ficando centrados exatamente
     sobre a troca de cor. z-index garante que apareça por cima do painel. */
  height: 0;
  padding-block: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.flourish::before,
.flourish::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(48px, 18vw, 90px);
  height: 1px;
  background: var(--gold);
  opacity: .5;
}
.flourish-mid {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .85;
}
/* Variante usada dentro da confirmação (não é divisor de seção): volta a ter altura. */
.flourish--sm {
  height: auto;
  padding-block: .6rem 1.2rem;
  z-index: auto;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem clamp(1.25rem, 5vw, 2.5rem);
}
.hero__inner { max-width: 720px; }

.brand-mark {
  font-family: var(--font-title);
  color: var(--gold);
  font-weight: 500;
  font-size: clamp(64px, 17vw, 150px);
  letter-spacing: .05em;
  line-height: 1;
  margin: 0;
}
.brand-sub {
  font-family: var(--font-body);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: clamp(.7rem, 2.4vw, .95rem);
  font-weight: 400;
  margin: .4rem 0 0;
}
/* Logo da marca no hero (PNG transparente) */
.hero__logo {
  width: min(440px, 78vw);
  height: auto;
  margin: 0 auto;
}
.hero__lead {
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 300;
  color: var(--cream);
  max-width: 30ch;
  margin: 2rem auto 1.4rem;
}
.hero__local { margin-bottom: 2.4rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---------- Portfólio: conteúdo centralizado ---------- */
.portfolio { text-align: center; }
.portfolio .section__lead { margin-left: auto; margin-right: auto; }
.portfolio .tabs__nav { justify-content: center; }

/* Cabeçalho centralizado acima de seções em duas colunas (Sobre, Biossegurança) */
.section__head { margin-bottom: 2.6rem; }

/* Centraliza só o cabeçalho do Formulário e do FAQ (campos e acordeão ficam à esquerda) */
#form > .wrap > .eyebrow,
#form > .wrap > h2,
#form > .wrap > .section__lead,
#faq > .wrap > .eyebrow,
#faq > .wrap > h2 { text-align: center; }
#form > .wrap > .section__lead { margin-left: auto; margin-right: auto; }

/* ---------- Utilitário: seção centralizada ---------- */
.is-centered { text-align: center; }
.is-centered .section__lead,
.is-centered .section__close { margin-left: auto; margin-right: auto; }
/* listas: bloco centralizado, mas o texto de cada item fica alinhado à esquerda */
.is-centered .icon-list,
.is-centered .locations {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.is-centered .details__item dd { margin-inline: auto; }

/* ---------- Portfólio: abas + galeria ---------- */
.tabs__nav {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.tab {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(241, 234, 217, .25);
  border-radius: 2px;
  padding: .7rem 1.4rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.tab[aria-selected="true"] {
  color: var(--green-dark);
  background: var(--gold);
  border-color: var(--gold);
}
.tab:hover:not([aria-selected="true"]) { border-color: var(--gold); color: var(--gold); }

/* ---------- Carrossel do portfólio ---------- */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.carousel__track {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .4rem;        /* espaço para a barra de rolagem fina */
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 197, 139, .5) transparent;
}
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: rgba(228, 197, 139, .4); border-radius: 3px; }
.carousel__track::-webkit-scrollbar-track { background: transparent; }

.carousel__item {
  margin: 0;
  flex: 0 0 100%;               /* uma foto por vez (todos os tamanhos) */
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(228, 197, 139, .25);
  scroll-snap-align: start;
}
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }

/* Setas de navegação — dourado vazado, no estilo dos botões */
.carousel__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(34, 54, 29, .55);
  color: var(--gold);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.carousel__btn:hover,
.carousel__btn:focus-visible { background: var(--gold); color: var(--green-dark); }
.carousel__btn:disabled { opacity: .25; cursor: default; }
.carousel__btn:disabled:hover { background: rgba(34, 54, 29, .55); color: var(--gold); }

/* Placeholders elegantes (fáceis de trocar por fotos) */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(228,197,139,.06), rgba(228,197,139,.02));
  color: var(--gold);
}
.placeholder span {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .68rem;
  opacity: .65;
}

/* ---------- Meu estúdio: carrossel de fotos ---------- */
.studio-carousel { margin-top: 2.4rem; }

/* ---------- Depoimentos ---------- */
.depoimentos { text-align: center; }
.depoimentos .section__lead { margin-left: auto; margin-right: auto; }
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2.4rem;
  text-align: left;
}
.testimonial {
  margin: 0;
  border: 1px solid rgba(228, 197, 139, .25);
  border-radius: 4px;
  padding: 1.8rem;
  background: rgba(228, 197, 139, .03);
  position: relative;
}
/* aspas decorativas em Cormorant dourado */
.testimonial::before {
  content: "\201C";
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 3rem;
  line-height: 1;
  opacity: .45;
  position: absolute;
  top: .6rem;
  left: 1rem;
}
.testimonial__text {
  margin: 1.1rem 0 1rem;
  font-style: italic;
  opacity: .95;
}
.testimonial__author {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold);
  font-size: .9rem;
}
.testimonial__stars {
  color: var(--gold);
  letter-spacing: .15em;
  font-size: .95rem;
  margin-bottom: .9rem;
}

/* Nota geral do Google */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .2rem .7rem;
  margin: 0 0 .6rem;
}
.rating__stars { color: var(--gold); letter-spacing: .12em; font-size: 1.15rem; }
.rating__score {
  font-family: var(--font-title);
  color: var(--gold);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
}
.rating__count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  opacity: .9;
}
.rating__g { flex: 0 0 auto; }

/* Botão "Ver todas no Google" */
.testimonials__cta { text-align: center; margin-top: 3.4rem; }

/* ---------- Formulário ---------- */
.form { display: grid; gap: 1.3rem; margin-top: .5rem; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--cream);
}
.req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--cream);
  background: rgba(241, 234, 217, .05);
  border: 1px solid rgba(241, 234, 217, .22);
  border-radius: 3px;
  padding: .85rem 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(241, 234, 217, .4); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(241, 234, 217, .08);
  outline: none;
}
/* seta do select em dourado */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) center,
    calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field select option { color: #20301a; } /* legível em fundos brancos dos SOs */

/* Grupo DDI + telefone (WhatsApp) */
.phone-group { display: flex; gap: .6rem; }
.field .phone-group__ddi { flex: 0 0 auto; width: 8.6rem; min-width: 8.6rem; }
.field .phone-group input { flex: 1 1 auto; width: auto; min-width: 0; }

/* Campo inválido */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #e0a3a3; }

.field__error {
  margin: 0;
  font-size: .78rem;
  color: #f0b9b9;
}

/* Checkbox de consentimento */
.field--check { margin-top: .2rem; }
.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9rem;
  cursor: pointer;
  line-height: 1.5;
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--gold);
  flex: 0 0 auto;
}

.form__submit { justify-self: center; margin-top: .4rem; }

.form__feedback {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 3px;
  font-size: .9rem;
  background: rgba(224, 163, 163, .12);
  border: 1px solid rgba(224, 163, 163, .4);
  color: #f0c9c9;
}

/* Estado de envio */
.form.is-sending .form__submit { opacity: .6; pointer-events: none; }

/* Confirmação pós-envio */
/* ---------- Página de obrigada (obrigada.html) ---------- */
.obrigada {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem clamp(1.25rem, 5vw, 2.5rem);
}
.obrigada__inner { max-width: 620px; }
.obrigada__logo-link { display: inline-block; }
.obrigada__logo { width: min(300px, 70vw); height: auto; margin: 0 auto; }
.obrigada__title {
  font-family: var(--font-title);
  color: var(--gold);
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0 0 1rem;
}
.obrigada__text { max-width: 46ch; margin: 0 auto 2rem; opacity: .95; }
.obrigada__back-wrap { margin: 1.8rem 0 0; }
.obrigada__back {
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .8;
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 197, 139, .4);
  padding-bottom: 2px;
  transition: opacity .25s var(--ease);
}
.obrigada__back:hover { opacity: 1; }

/* ---------- Sobre ---------- */
.about {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}
.about__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;          /* recorta sem distorcer (a <img> é o próprio elemento) */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(228, 197, 139, .25);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text p { margin: 1rem 0 0; }
.about__text p:first-of-type { margin-top: 1.2rem; }

/* ---------- Biossegurança: texto + foto (duas colunas) ---------- */
.safety {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}
.safety__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;          /* recorta sem distorcer (a <img> é o próprio elemento) */
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(228, 197, 139, .25);
}
.safety__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Listas com ícone dourado ---------- */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  max-width: 60ch;
}
.icon-list__mark {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: .55rem;
  background: var(--gold);
  transform: rotate(45deg);   /* pequeno losango dourado */
  opacity: .9;
}

/* ---------- Serviços: cards + detalhes ---------- */
.cards {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 2.6rem;
}
.card {
  border: 1px solid rgba(228, 197, 139, .25);
  border-radius: 4px;
  padding: 1.8rem;
  background: rgba(228, 197, 139, .03);
}
.card h3 { margin-bottom: .6rem; }

.details { display: grid; gap: 1.4rem; margin: 0; }
.details__item dt {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 500;
}
.details__item dd { margin: .25rem 0 0; opacity: .92; max-width: 60ch; }

/* ---------- Localização ---------- */
.locations { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.locations li { font-size: 1.08rem; }
.locations strong { color: var(--gold); font-weight: 400; }

/* ---------- FAQ / acordeão ---------- */
.accordion { display: grid; gap: .2rem; margin-top: 1rem; }
.accordion__item {
  border-bottom: 1px solid rgba(228, 197, 139, .22);
}
.accordion__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 2rem 1.2rem 0;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 500;
  position: relative;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  transition: transform .3s var(--ease);
}
.accordion__item[open] summary::after { content: "–"; }
.accordion__body { padding: 0 0 1.3rem; }
.accordion__body p { margin: 0; max-width: 62ch; opacity: .92; }

/* ---------- CTA final ---------- */
.cta { text-align: center; }
.cta .section__lead { margin-inline: auto; }
.cta h2 { max-width: 18ch; margin-inline: auto; }

/* ---------- Rodapé ---------- */
.footer {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid rgba(228, 197, 139, .18);
}
.footer__logo {
  width: min(240px, 60vw);
  height: auto;
  margin: 0 auto 1.4rem;
}
.footer__brand {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 .3rem;
}
.footer__role {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--gold);
  opacity: .9;
}
.footer__cities { margin: 0; opacity: .9; }
.footer__social {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin: 1.6rem 0 1rem;
}
.footer__social a { color: var(--gold); display: inline-flex; transition: opacity .25s var(--ease); }
.footer__social a:hover { opacity: .65; }
.footer__note { font-size: .85rem; opacity: .7; margin: .4rem 0 0; }

/* ============================================================
   Revelações suaves ao rolar (fade/slide up)
   ============================================================ */
/* Só esconde para revelar quando há JS — sem JS, tudo aparece normalmente. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Lightbox (foto ampliada)
   ============================================================ */
/* Indica que as fotos do carrossel são clicáveis para ampliar */
.carousel__item img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: rgba(15, 23, 12, .94);
  animation: lb-fade .25s var(--ease);
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(34, 54, 29, .55);
  color: var(--gold);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible { background: var(--gold); color: var(--green-dark); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ============================================================
   Responsivo (mobile-first → ampliações)
   ============================================================ */

/* No celular: uma foto por vez, ocupando a largura toda e centralizada.
   As setas ficam sobrepostas nas bordas da foto (não tiram espaço). */
@media (max-width: 699px) {
  /* Celular: foto ocupando a largura toda, setas sobrepostas nas bordas */
  .carousel { gap: 0; }
  .carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
  .carousel__btn--prev { left: 8px; }
  .carousel__btn--next { right: 8px; }

  /* Texto da Fabiana centralizado só no celular */
  .about__text { text-align: center; }

  /* Um respiro a mais entre o título e o texto (todas as seções) */
  h2 { margin-bottom: .7rem; }
}

@media (min-width: 700px) {
  .carousel__item { flex-basis: calc((100% - .9rem) / 2); }  /* 2 fotos por vez */
  .cards { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .about {
    grid-template-columns: 5fr 6fr;
    gap: 3rem;
  }
  .safety {
    grid-template-columns: 6fr 5fr;   /* texto à esquerda, foto à direita */
    gap: 3rem;
  }
}

@media (min-width: 980px) {
  .carousel__item { flex-basis: calc((100% - 1.8rem) / 3); } /* 3 fotos por vez */
  .details {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* ============================================================
   Respeita quem prefere menos movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}