/*
  sections.css · cavemans.app
  One block per section, in the same order as the page (index.html):
  hero → manifesto → services → process → products → history → projects (and player)
  → founder → contact (and form). Section anchors keep their public Portuguese names.
  Use the variables from base.css (var(--phosphor), var(--panel)…), never a raw color.
*/

/* --- Hero (#inicio) ---------------------------------------------------- */
.hero {
  padding-block: clamp(40px,6vw,80px) clamp(56px,7vw,96px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(32px,4vw,56px);
  align-items: center;
}
@media (max-width:900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--phosphor);
  border: 1px solid var(--deep);
  border-radius: 999px;
  padding: 7px 14px;
}
.pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 10px var(--phosphor);
}
.hero h1 {
  font-size: clamp(40px,6.2vw,64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-top: 22px;
}
.hero h1 em {
  font-style: normal;
  color: var(--phosphor);
  text-shadow: 0 0 22px rgba(62,224,106,.35);
}
.hero .lede {
  color: var(--muted);
  font-size: clamp(17px,1.6vw,19px);
  margin-top: 22px;
  max-width: 44ch;
}
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.screen {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(62,224,106,.04);
}
.screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--label);
}
.dots {
  display: flex;
  gap: 6px;
}
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-2);
}
.dots i:first-child {
  background: var(--deep);
}
.screen-body {
  position: relative;
  aspect-ratio: 16/9;
  max-width: 100%;
  background: var(--video);
}
.screen-body video,
.screen-body img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screen-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode: multiply;
}
.replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone);
  background: rgba(5,7,5,.75);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.replay:hover {
  border-color: var(--phosphor);
  color: var(--phosphor);
}
.proof {
  margin-top: clamp(40px,5vw,64px);
}
.proof .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}
.proof .names {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* --- Manifesto --------------------------------------------------------- */
.manifesto .wrap {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px,5vw,72px);
  align-items: end;
}
@media (max-width:860px) {
  .manifesto .wrap {
    grid-template-columns: 1fr;
  }
}
.manifesto blockquote {
  margin: 0;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(30px,4.6vw,52px);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.manifesto blockquote span {
  color: var(--phosphor);
}
.manifesto .copy {
  display: grid;
  gap: 16px;
  color: var(--muted);
  max-width: 52ch;
}
.manifesto .copy strong {
  color: var(--bone);
  font-weight: 500;
}

/* --- Services (#servicos) ---------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
@media (max-width:960px) {
  .grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.card h3 {
  font-size: 18px;
  font-weight: 700;
}
.card p {
  color: var(--dim);
  font-size: 15px;
}
.card .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}
.card.alt {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-2);
}
.card.alt .tag {
  color: var(--phosphor);
}

/* --- Process (#processo) ----------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width:900px) {
  .steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.step {
  padding: 26px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.step .n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--phosphor);
}
.step h3 {
  font-size: 17px;
  font-weight: 700;
}
.step p {
  color: var(--dim);
  font-size: 15px;
}
.note {
  margin-top: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--deep);
  background: rgba(29,92,49,.12);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--muted);
  font-size: 15px;
}
.note b {
  font-family: var(--mono);
  color: var(--phosphor);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width:600px) {
  .note {
    flex-direction: column;
    gap: 6px;
  }
}

/* --- Products (#produtos) ---------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
@media (max-width:820px) {
  .products {
    grid-template-columns: 1fr;
  }
}
.product {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.product .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.product h3 {
  font-size: 26px;
  font-weight: 800;
}
.status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--phosphor);
  border: 1px solid var(--deep);
  border-radius: 999px;
  padding: 4px 10px;
}
.product p {
  color: var(--muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 4px 9px;
}
.by {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--label);
}
.by b {
  color: var(--bone);
  font-weight: 700;
}

/* --- History (#historico) ---------------------------------------------- */
.log {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.log-bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--label);
  overflow-x: auto;
  white-space: nowrap;
}
.log-bar b {
  color: var(--phosphor);
  font-weight: 400;
}
.log ol {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.log li {
  display: grid;
  grid-template-columns: 7.5em minmax(0,1fr);
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--line);
}
.log li:last-child {
  border-bottom: 0;
}
.log time {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--phosphor);
  font-variant-numeric: tabular-nums;
}
.log strong {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--bone);
  margin-bottom: 2px;
}
.log span {
  color: var(--dim);
  font-size: 15px;
}
@media (max-width:560px) {
  .log li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.disclaim {
  margin-top: 14px;
  font-size: 13px;
  color: var(--label);
  font-family: var(--mono);
}

/* --- Projects (#projetos) and video player ----------------------------- */
.cases {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
@media (max-width:1060px) {
  .cases {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px) {
  .cases {
    grid-template-columns: 1fr;
  }
}
.case {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color .15s;
}
.case:hover,
.case:focus-visible {
  border-color: var(--deep);
}
.case:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}
.case .thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--video);
  overflow: hidden;
}
.case .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85);
}
.case .thumb::after {
  content: "\25B6";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--cave);
  background: var(--phosphor);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(62,224,106,.45);
}
.case .body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.case .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.case .meta b {
  color: var(--phosphor);
  font-weight: 700;
}
.case h3 {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--bone);
}
.case p {
  color: var(--dim);
  font-size: 14px;
}
.cases-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.cases-foot a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--bone);
}
.cases-foot a:hover {
  color: var(--phosphor);
}
/* player: dialog over the page, with the YouTube video created only on click */
dialog.player {
  width: min(960px,calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
  color: var(--bone);
  overflow: hidden;
}
dialog.player.vertical {
  width: min(calc((100vh - 120px) * 9 / 16),calc(100vw - 32px));
}
dialog.player::backdrop {
  background: rgba(5,7,5,.86);
}
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--label);
}
.player-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-close {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  flex: none;
}
.player-close:hover,
.player-close:focus-visible {
  border-color: var(--phosphor);
  color: var(--phosphor);
}
.player-body {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--video);
}
dialog.player.vertical .player-body {
  aspect-ratio: 9/16;
}
.player-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Founder (#fundador) ----------------------------------------------- */
.founder .wrap {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(32px,5vw,64px);
}
@media (max-width:900px) {
  .founder .wrap {
    grid-template-columns: 1fr;
  }
}
.founder h2 {
  font-size: clamp(28px,4vw,38px);
  font-weight: 700;
  margin-top: 10px;
}
.founder .role {
  font-family: var(--mono);
  color: var(--phosphor);
  font-size: 14px;
  margin-top: 8px;
}
.founder .bio {
  display: grid;
  gap: 16px;
  color: var(--muted);
}
.founder .bio strong {
  color: var(--bone);
  font-weight: 500;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 8px;
}
@media (max-width:560px) {
  .facts {
    grid-template-columns: 1fr;
  }
}
.fact {
  border-top: 1px solid var(--line-2);
  padding-top: 12px;
}
.fact b {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.fact span {
  font-size: 14px;
  color: var(--dim);
}

/* --- Contact (#contato) and form --------------------------------------- */
.contact .wrap {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(32px,5vw,64px);
  align-items: start;
}
@media (max-width:900px) {
  .contact .wrap {
    grid-template-columns: 1fr;
  }
}
.contact h2 {
  font-size: clamp(30px,4.4vw,44px);
  font-weight: 800;
  margin-top: 10px;
  line-height: 1.1;
}
.contact .side {
  display: grid;
  gap: 18px;
  color: var(--muted);
}
/* e-mail with Copy button */
.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.mail code {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--bone);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 14px;
  user-select: all;
}
/* form */
form.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(20px,3vw,32px);
  display: grid;
  gap: 16px;
}
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.two {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
@media (max-width:560px) {
  .two {
    grid-template-columns: 1fr;
  }
}
/* form fields */
.contact-form label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-size: 16px; /* 16px prevents iPhone auto-zoom when the field is tapped */
  color: var(--bone);
  background: var(--cave);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--phosphor);
  box-shadow: 0 0 0 3px rgba(62,224,106,.15);
}
/* honeypot field against bots: off-screen, never display:none (some bots skip those) */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* anti-bot check (Turnstile): reserves the height so the page does not jump */
#f-turnstile {
  min-height: 65px;
}

/* form footer: data notice and button */
.form-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.form-foot small {
  color: var(--label);
  font-size: 13px;
  max-width: 40ch;
}
.form-foot small a {
  color: var(--muted);
}
.form-foot .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* short messages (e-mail copied, sending, error) */
.toast {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--phosphor);
  min-height: 1.2em;
}
.toast.err {
  color: var(--error);
}