/* Site público (tema escuro do mockup). Sem estilos inline nem scripts: a CSP só aceita ficheiros próprios.
   Fontes: Archivo (títulos) e Inter (texto), servidas por nós em assets/fonts.css; a pilha seguinte só entra
   enquanto carregam ou se falharem. */
:root {
  --dark: #06120e;
  --dark-surface: #0e241d;
  --line-dark: #1c3a30;
  --accent: #2ed9a8;
  --accent-dim: #1c8a68;
  --on-dark: #f4faf8;
  --stone-dark: #93b0a7;
  --font-head: "Archivo", "Archivo Black", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dark); color: var(--on-dark); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #06120e; padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
/* Só para leitores de ecrã (ex. «abre num novo separador» a seguir ao texto de uma ligação externa). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.accent { color: var(--accent); }
.preview-bar { background: #f2b632; color: #1a1200; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 16px; }

/* ---- botões (ligações com aspeto de botão) ---- */
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; font-family: var(--font-body); }
.btn-primary { background: var(--accent); color: #06120e; border: none; box-shadow: 0 0 0 rgba(46, 217, 168, 0); transition: box-shadow .2s; }
.btn-primary:hover { box-shadow: 0 0 28px rgba(46, 217, 168, .45); }
.btn-ghost { background: transparent; color: var(--on-dark); border: 1px solid var(--line-dark); }
.btn-ghost:hover { border-color: var(--accent); }
a:focus-visible, label:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- cabeçalho ---- */
nav.bar { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; position: relative; }
/* Logótipo (2026-10-13), no topo e no rodapé: o «fotoclub.» manuscrito, branco sobre transparente — o mesmo ficheiro da barra da loja
   (assets/img/logo.png, 489 × 194); a altura dá-se aqui e a largura acompanha. */
.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: auto; height: 40px; }
@media (max-width: 640px) { .site-logo img { height: 34px; } }
.navlinks { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.navlinks a { color: var(--stone-dark); text-decoration: none; font-size: 14px; font-weight: 600; }
.navlinks a:hover { color: var(--accent); }
.bar-right { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; align-items: center; gap: 2px; background: var(--dark-surface); border: 1px solid var(--line-dark); border-radius: 999px; padding: 3px; }
.lang-btn { font-size: 12px; font-weight: 600; color: var(--stone-dark); padding: 5px 9px; border-radius: 999px; text-decoration: none; }
.lang-btn.active { background: var(--accent); color: #06120e; }
.navlinks-lang { display: none; }
.menu-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menu-toggle { display: none; color: var(--on-dark); cursor: pointer; padding: 6px; }
.menu-check:focus-visible ~ .bar-right .menu-toggle { outline: 2px solid var(--accent); border-radius: 6px; }
@media (max-width: 760px) {
  .navlinks { display: none; }
  .menu-check:checked ~ .navlinks {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--dark-surface); border: 1px solid var(--line-dark); border-radius: 14px; padding: 16px 20px; gap: 16px; z-index: 50; margin: 0;
  }
  .menu-toggle { display: flex; }
}
@media (max-width: 480px) {
  .lang-top { display: none; }
  .navlinks-lang { display: block; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-dark); }
}

/* ---- hero ---- */
.hero { padding: 40px 0 0; }
.hero-top { max-width: 760px; }
h1 { font-family: var(--font-head); font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -0.03em; margin: 0 0 22px; }
.sub { font-size: 18px; color: var(--stone-dark); max-width: 46ch; line-height: 1.6; margin: 0 0 32px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.contact-link { margin: 0 0 56px; }
.contact-link a { color: var(--stone-dark); font-size: 13px; font-weight: 600; text-decoration: underline; }
.contact-link a:hover { color: var(--accent); }

/* ---- manta (mosaico inclinado) ---- */
.mosaic { position: relative; height: 340px; margin: 0 0 64px; }
@media (max-width: 760px) { .mosaic { height: 520px; } }
.tile { position: absolute; border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); overflow: hidden; transition: transform .25s ease; }
.tile:hover { transform: scale(1.04) rotate(0deg) !important; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t1 { width: 340px; height: 280px; left: 0; top: 20px; transform: rotate(-6deg); background: linear-gradient(135deg, #e0473e, #8f1f1f); z-index: 3; }
.t2 { width: 220px; height: 220px; left: 300px; top: 80px; transform: rotate(5deg); background: linear-gradient(135deg, #2ed9a8, #0f5c46); z-index: 2; }
.t3 { width: 260px; height: 240px; left: 480px; top: 10px; transform: rotate(-3deg); background: linear-gradient(135deg, #f2b632, #a86a10); z-index: 1; }
.t4 { width: 230px; height: 230px; left: 690px; top: 70px; transform: rotate(7deg); background: linear-gradient(135deg, #3f7fe0, #132f66); z-index: 2; }
.t5 { width: 200px; height: 200px; left: 900px; top: 30px; transform: rotate(-8deg); background: linear-gradient(135deg, #c454d6, #5a1c66); z-index: 1; }
@media (max-width: 760px) {
  .t1 { left: 0; top: 0; width: 60%; height: 220px; }
  .t2 { left: 45%; top: 130px; width: 50%; height: 180px; }
  .t3 { left: 5%; top: 300px; width: 55%; height: 190px; }
  .t4 { left: 50%; top: 340px; width: 48%; height: 170px; }
  .t5 { display: none; }
}
.tile-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 14px, rgba(255, 255, 255, 0) 14px 28px); }

/* ---- números ---- */
.stats { display: flex; gap: 0; border-top: 1px solid var(--line-dark); padding-top: 36px; padding-bottom: 60px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 140px; padding-right: 24px; }
.stat .num { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--accent); letter-spacing: -0.02em; line-height: 1; }
.stat .label { font-size: 13px; color: var(--stone-dark); margin-top: 6px; font-weight: 600; }

/* ---- logótipos ---- */
.logos-section { padding: 60px 0; border-top: 1px solid var(--line-dark); }
.logos-section .kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--stone-dark); text-transform: uppercase; margin: 0 0 24px; }
.logo-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.logo-chip { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 22px; border-radius: 12px; background: var(--dark-surface); border: 1px solid var(--line-dark); }
.logo-chip img { width: auto; height: auto; max-height: 40px; max-width: 160px; object-fit: contain; } /* o width/height do HTML (Fase 12.3) só reserva a proporção */

/* ---- produtos (seletor Família / Clube em CSS puro) ---- */
.products-section { padding: 60px 0 70px; border-top: 1px solid var(--line-dark); }
.products-section h2, .testimonials-section h2, .faq h2, .closing-cta h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.02em; }
.products-section h2 { margin: 0 0 10px; }
.products-section .sub { margin: 0 0 26px; }
.aud-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 999px; padding: 4px; margin-bottom: 32px; }
.segmented label { border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: var(--stone-dark); cursor: pointer; }
#aud-family:checked ~ .segmented label[for="aud-family"], #aud-club:checked ~ .segmented label[for="aud-club"] { background: var(--accent); color: #06120e; }
#aud-family:focus-visible ~ .segmented label[for="aud-family"], #aud-club:focus-visible ~ .segmented label[for="aud-club"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { background: var(--dark-surface); border: 1px solid var(--line-dark); border-radius: 16px; overflow: hidden; display: none; }
#aud-family:checked ~ .product-grid .family, #aud-club:checked ~ .product-grid .club { display: block; }
.product-photo { aspect-ratio: 4/3; position: relative; }
.product-photo .pattern { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 12px, rgba(255, 255, 255, 0) 12px 24px); }
.pg1 { background: linear-gradient(135deg, #3f7fe0, #132f66); }
.pg2 { background: linear-gradient(135deg, #e0473e, #8f1f1f); }
.pg3 { background: linear-gradient(135deg, #f2b632, #a86a10); }
.pg4 { background: linear-gradient(135deg, #2ed9a8, #0f5c46); }
.pg5 { background: linear-gradient(135deg, #c454d6, #5a1c66); }
.pg6 { background: linear-gradient(135deg, #7a7a7a, #2b2b2b); }
.product-body { padding: 18px 20px 22px; }
.product-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.product-body p { color: var(--stone-dark); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.product-cta { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.product-cta:hover { text-decoration: underline; }

/* ---- depoimentos ---- */
.testimonials-section { padding: 20px 0 80px; border-top: 1px solid var(--line-dark); }
.testimonials-section h2 { margin: 40px 0 28px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: var(--dark-surface); border: 1px solid var(--line-dark); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.testimonial-card p.quote { font-size: 14.5px; line-height: 1.65; margin: 0 0 20px; flex: 1; }
.testimonial-who { display: flex; align-items: center; gap: 12px; }
.t-photo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: repeating-linear-gradient(135deg, var(--dark-surface) 0 6px, #123028 6px 12px); border: 1px solid var(--line-dark); }
.t-name { font-size: 13.5px; font-weight: 700; }
.t-role { font-size: 12.5px; color: var(--stone-dark); }

/* ---- Instagram (mosaicos de exemplo até haver feed) ---- */
.insta-section { padding: 20px 0 70px; border-top: 1px solid var(--line-dark); }
.insta-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 40px 0 24px; }
.insta-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.insta-head h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 8px; letter-spacing: -0.02em; }
.insta-tag { color: var(--stone-dark); margin: 0 0 4px; font-size: 16px; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 820px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }
.insta-tile { aspect-ratio: 1; border-radius: 10px; }

/* ---- FAQ (<details>) ---- */
.faq { padding: 20px 0 90px; border-top: 1px solid var(--line-dark); margin-top: 10px; }
.faq h2 { margin: 40px 0 28px; }
.faq-list { display: flex; flex-direction: column; gap: 1px; }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-item:first-child { border-top: 1px solid var(--line-dark); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; padding: 20px 4px; cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-chevron { flex-shrink: 0; color: var(--accent); transition: transform .2s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a p { color: var(--stone-dark); font-size: 14.5px; line-height: 1.65; margin: 0 4px 20px; max-width: 70ch; }

/* ---- fecho ---- */
.closing-cta { padding: 30px 0 90px; border-top: 1px solid var(--line-dark); text-align: center; }
.closing-cta h2 { margin: 40px 0 10px; }
.closing-cta .sub { margin: 0 auto 28px; }
.closing-cta .cta-row { justify-content: center; margin-bottom: 0; }

/* ---- banners (inseridos pelo backoffice) ---- */
.banner { position: relative; margin: 0 0 40px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-dark); }
.banner img { display: block; width: 100%; height: auto; }
.banner-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(0deg, rgba(6, 18, 14, .85), rgba(6, 18, 14, 0)); }
.banner-text strong { font-family: var(--font-head); font-size: clamp(1.1rem, 2.4vw, 1.6rem); }

/* ---- páginas simples (legais, 404) ---- */
.legal { max-width: 760px; padding: 40px 0 100px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 28px; }
.legal p { color: var(--stone-dark); line-height: 1.7; }
.not-found { text-align: left; }

/* ---- formulários (contacto, candidatura) ---- */
.form-page { display: flex; justify-content: center; padding: 30px 0 100px; }
.form-card { width: 100%; max-width: 460px; background: var(--dark-surface); border: 1px solid var(--line-dark); border-radius: 20px; padding: 36px 32px; }
.form-card h1 { font-size: 26px; margin: 0 0 8px; line-height: 1.1; }
.form-card .sub { font-size: 14px; margin: 0 0 26px; line-height: 1.5; max-width: none; }
.site-form .field { margin-bottom: 16px; }
.site-form label, .site-form .label { display: block; font-size: 13px; font-weight: 600; color: var(--stone-dark); margin-bottom: 6px; }
.site-form .opt { font-weight: 400; }
.site-form input[type="text"], .site-form input[type="email"], .site-form input[type="tel"], .site-form textarea, .site-form select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-dark); background: var(--dark); color: var(--on-dark); font-family: var(--font-body); font-size: 14px;
}
.site-form ::placeholder { color: #5d7d72; }
.site-form input:focus, .site-form textarea:focus, .site-form select:focus { outline: none; border-color: var(--accent); }
.site-form select { color-scheme: dark; cursor: pointer; }
.site-form textarea { resize: vertical; min-height: 70px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.btn-primary.block { width: 100%; padding: 14px; font-size: 15px; margin-top: 6px; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.form-notice { margin: 12px 0 0; font-size: 12.5px; color: var(--stone-dark); text-align: center; }
/* "Quem és?": 2 radios escondidos + labels (o texto do campo seguinte muda com o escolhido) */
.kind-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.form-seg { display: flex; margin-bottom: 0; border-radius: 10px; padding: 0; overflow: hidden; }
.site-form .form-seg label { flex: 1; margin: 0; text-align: center; padding: 11px 8px; border-radius: 0; background: var(--dark); border-right: 1px solid var(--line-dark); }
.site-form .form-seg label:last-child { border-right: none; }
#kind-club:checked ~ .field .form-seg label[for="kind-club"], #kind-parent:checked ~ .field .form-seg label[for="kind-parent"] { background: var(--accent); color: #06120e; }
#kind-club:focus-visible ~ .field .form-seg label[for="kind-club"], #kind-parent:focus-visible ~ .field .form-seg label[for="kind-parent"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.field-entity .lbl-parent { display: none; }
#kind-parent:checked ~ .field-entity .lbl-club { display: none; }
#kind-parent:checked ~ .field-entity .lbl-parent { display: inline; }

/* ---- rodapé ---- */
.site-footer { border-top: 1px solid var(--line-dark); padding: 56px 0 0; background: var(--dark-surface); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 44px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--stone-dark); font-size: 13.5px; line-height: 1.6; margin: 12px 0 18px; max-width: 32ch; }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a { color: var(--stone-dark); }
.footer-socials a:hover { color: var(--accent); }
.footer-col h4 { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--stone-dark); margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--on-dark); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-col ul.footer-langs { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding: 20px 0; }
.footer-bottom p { color: var(--stone-dark); font-size: 12.5px; margin: 0; }

/* ---- formulários: honeypot, consentimento, erros, ecrã de sucesso (Fase 3) ---- */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.site-form .consent { margin-bottom: 14px; }
.site-form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; line-height: 1.45; margin: 0; cursor: pointer; }
.site-form label.check input { margin-top: 2px; flex: none; accent-color: var(--accent); }
.form-error { border: 1px solid #7a3b3b; background: #2a1414; color: #ffb4b4; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px; }
.form-error ul { margin: 0; padding-left: 18px; }
.form-success .btn-primary { display: block; text-align: center; text-decoration: none; }

/* ---- Instagram estático: imagens carregadas no backoffice (Fase 3b) ---- */
.insta-photo { display: block; overflow: hidden; background: var(--dark-surface); }
.insta-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.insta-photo:hover img, a.insta-photo:focus-visible img { opacity: .85; }

/* ---- páginas legais: elementos do texto formatado (Fase 3b) ---- */
.legal h2 { font-family: var(--font-head); font-size: 20px; margin: 30px 0 10px; }
.legal h3 { font-family: var(--font-head); font-size: 16px; margin: 22px 0 8px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 4px 0; line-height: 1.6; }
.legal blockquote { margin: 0 0 16px; padding: 4px 16px; border-left: 3px solid var(--accent); color: var(--stone-dark); }
.legal hr { border: 0; border-top: 1px solid var(--line-dark); margin: 26px 0; }
.legal a { color: var(--accent); }
.legal-updated { margin-top: 30px; font-size: 13px; color: var(--stone-dark); }

/* ---- texto formatado nos textos do site (negrito, itálico, ligações, listas nas respostas do FAQ) ---- */
.sub a, .faq-a a, .product-card a, .site-footer p a { color: var(--accent); }
.faq-a ul, .faq-a ol { margin: 0 0 12px; padding-left: 22px; }
.faq-a li { margin: 4px 0; line-height: 1.6; }
.faq-a p + p, .faq-a p + ul, .faq-a p + ol { margin-top: 10px; }

/* ---- scrollbar com o estilo do site (2026-10-16): fina, pista invisível, polegar verde-menta (35% em repouso, 60% ao passar o rato, cheio ao arrastar).
   O MESMO bloco está em site.css, store.css e backoffice.css (cada folha tem os seus valores; tests/test_css_scrollbar.php confere que não divergem).
   Chrome/Edge/Safari: ::-webkit-scrollbar (permite o hover). Firefox: scrollbar-width/scrollbar-color — só onde o -webkit não existe, porque o Chrome
   recente ignora o ::-webkit-scrollbar se o padrão estiver definido. ---- */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(46, 217, 168, .45) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(46, 217, 168, .35); background-clip: padding-box; border: 2px solid transparent; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46, 217, 168, .6); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: #2ed9a8; background-clip: padding-box; }