/* Rodada de melhorias: acessibilidade, destaque visual e detalhes criativos.
   Fica por último para ajustar o que vem de style.css e creative.css.
   Para desfazer tudo, basta remover a linha deste arquivo no index.html. */

/* ---------- Acessibilidade ---------- */

/* Textos de apoio cinza ficavam um pouco abaixo do contraste mínimo. */
body.creative{--muted:#4a5a4e}
.creative .muted,
.creative .section-heading>p,
.creative .service-item p,
.creative .event-option p,
.creative details p,
.creative .video-credit,
.creative .category-count{color:var(--muted)}
.creative .video-category{color:#3f5236}

/* Etiquetas pequenas ficam legíveis (mínimo de 12px). */
.creative .eyebrow,
.creative .section-kicker,
.creative .hero-bottom,
.creative .video-category,
.creative .option-top,
.creative .order-total>span{font-size:12px}
.creative .video-credit{font-size:13px}

/* Áreas de toque maiores no menu, no rodapé e no link do projeto. */
.creative header nav a{padding:8px 2px}
.project-short-link a,footer a{display:inline-block;padding:6px 0}

/* O contorno de foco dos cartões de pacote era branco sobre creme e sumia. */
.build-option input:focus-visible+.option-surface{outline:3px solid var(--green);outline-offset:4px}

/* Link "Pular para o conteúdo" visível e na identidade. */
.creative .skip:focus{left:12px;top:12px;background:var(--lime);color:var(--green);font-weight:700;border-radius:10px;border:2px solid var(--green)}

/* O botão de pausar o movimento fica fácil de achar e de tocar. */
.creative .motion-toggle{padding:7px 13px;font-size:12px;font-weight:700}

/* ---------- Vídeos com cara de claquete ---------- */

.creative .video-work .video-grid{counter-reset:take}
.creative .video-card{position:relative}
.creative .video-work .video-card{counter-increment:take}
.creative .video-work .video-card::before{content:'TAKE 0' counter(take);position:absolute;top:12px;left:12px;z-index:2;
  background:var(--paper);color:var(--green);border:2px solid var(--green);border-radius:8px;padding:3px 9px;
  font:700 11px/1.4 monospace;letter-spacing:1px;pointer-events:none}
.creative .video-card video{transition:box-shadow .3s,transform .3s}
.creative .video-card:hover video,.creative .video-card:focus-within video{box-shadow:7px 7px 0 var(--lime),7px 7px 0 2px var(--green)}
.creative .video-feedback .video-card::before{content:'“';position:absolute;top:-22px;left:-10px;z-index:2;
  font:800 110px/1 Georgia,serif;color:var(--orange);pointer-events:none}

/* ---------- Serviços em cartões ---------- */

.creative .service-item{display:flex;flex-direction:column;background:#fbf6ef;border:2px solid var(--green);border-radius:20px;
  padding:28px 26px 30px;box-shadow:5px 5px 0 var(--green);transition:transform .25s,box-shadow .25s}
.creative .service-item:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--green)}
.creative .service-item:nth-child(2){background:var(--lime)}
.creative .service-item .number{color:#88532a}
.creative .service-item h3{margin:14px 0 12px}
.creative .service-item .text-link{margin-top:auto;align-self:flex-start}
.service-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--green);color:var(--lime);margin-bottom:20px}
.service-icon svg{width:30px;height:30px}
.creative .service-item:nth-child(2) .service-icon{background:var(--paper);color:var(--green);border:2px solid var(--green)}

/* ---------- Eventos e dúvidas ---------- */

.creative .event-option{background:#fbf6ef;border:2px solid var(--green);border-radius:18px;padding:22px 24px;margin-bottom:16px;box-shadow:4px 4px 0 #a7b98d}
.creative .event-option span{background:var(--lime);color:var(--green);font-weight:700;border:1px solid var(--green)}
.creative details{transition:background .2s}
.creative summary{padding:4px 0;font-size:17px}
.creative summary:after{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  border:2px solid var(--green);color:var(--green);font-size:20px;line-height:1;transition:transform .25s,background .25s}
.creative details[open] summary:after{background:var(--lime);transform:rotate(180deg)}

/* ---------- Encerramento como créditos de filme ---------- */

.creative .contact{position:relative;overflow:hidden}
.creative .contact::before,.creative .contact::after{content:'';position:absolute;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 30px)}
.creative .contact::before{top:12px}.creative .contact::after{bottom:12px}

/* ---------- Celular ---------- */

@media(max-width:640px){
  .creative .service-item{padding:24px 20px 26px}
  .creative .video-work .video-card::before{top:8px;left:8px;font-size:10px;padding:2px 7px}
  .creative .video-feedback .video-card::before{font-size:84px;top:-16px;left:-4px}
  .creative header nav a{padding:6px 0}
}

@media(prefers-reduced-motion:reduce){
  .creative .service-item,.creative .video-card video,.creative summary:after{transition:none}
  .creative .service-item:hover{transform:none}
}

/* O conteúdo principal recebe o foco do link de pular sem mostrar contorno. */
main:focus{outline:none}

/* ---------- Página de fotografia no mesmo visual da inicial ---------- */

/* Botão principal em verde-claro: o laranja fica só nos detalhes. */
.creative .photo-intro .button.lime{background:var(--lime);color:var(--green)}
/* Sem a barra flutuante de navegação, o rodapé não precisa de espaço extra. */
.photography-page.creative footer{padding-bottom:30px}
/* Fotos com moldura e sombra, como os vídeos da inicial. */
.creative .portfolio-grid a{border:2px solid var(--green);border-radius:14px;transition:box-shadow .3s,transform .3s}
.creative .portfolio-grid a:hover,.creative .portfolio-grid a:focus-visible{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--lime),7px 7px 0 2px var(--green)}
.creative .photo-about img{border:2px solid var(--green);border-radius:12px;box-shadow:-12px 12px 0 #a7b98d}
.creative .portfolio-grid figcaption{font-size:13px;color:var(--muted)}

/* ---------- Página "Conteúdo do mês" ---------- */

/* Etapas do processo em cartões, como os serviços da inicial. */
.creative .journey-grid article{background:#fbf6ef;border:2px solid var(--green);border-radius:18px;padding:22px 18px;box-shadow:4px 4px 0 var(--green)}
.creative .journey-grid article>span{font:700 12px monospace;color:#88532a}
.creative .journey-grid p{color:var(--muted)}
.creative .journey-grid .shoot-day{background:var(--green);box-shadow:4px 4px 0 #a7b98d}
.creative .journey-grid .shoot-day>span{color:var(--lime)}
.creative .journey-grid .shoot-day p{color:#e4e7d8}
.creative .small-note{font-size:13px}

@media(prefers-reduced-motion:reduce){.creative .portfolio-grid a{transition:none}.creative .portfolio-grid a:hover{transform:none}}

/* Em seções de fundo verde-escuro, o texto de apoio continua claro. */
.creative .launch-offers .section-heading>p,.creative .packages .section-heading>p{color:#d4ded4}

/* Legendas sobre as fotos de capa com no mínimo 12px. */
.creative .photo-label span{font-size:12px}
/* Textos de apoio da página de fotografia com contraste suficiente. */
.creative .photo-other p:not(.section-kicker),.creative .photo-food .muted{color:var(--muted)}
/* Botão do pacote de 4 vídeos em verde-claro: o laranja fica só nos detalhes. */
.creative .offer:not(.featured) .button{background:var(--lime);color:var(--green);border-color:var(--lime)}