/* COLAGEM 1: CSS Base - Reset e Variáveis */

/* Reset básico */
<style>
/* ======== BASE ======== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',sans-serif;background:#f8f9fa;color:#222;line-height:1.6}
h1,h2,h3,h4{color:#0f3b78}
img{max-width:100%;display:block}
a{text-decoration:none;color:#0b4abf}
a:hover{text-decoration:underline}
/* ======== CABEÇALHO ======== */
header{
  background:linear-gradient(135deg,#0f3b78,#1558a6);
  color:#fff;text-align:center;padding:2rem 1rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
header h1{font-size:2.2rem;font-weight:800;margin:0}
header p{margin:.2rem 0;font-size:1.05rem}
.hero-img{width:150px;height:150px;border-radius:16px;border:3px solid rgba(255,255,255,.5);
box-shadow:0 3px 10px rgba(0,0,0,.25);object-fit:cover;justify-self:center}
header address{grid-column:1/4;font-style:normal;opacity:.95;margin-top:.6rem}
header address a{color:#cfe3ff;text-decoration:none;font-weight:600}
nav{background:#0d2f61;position:sticky;top:0;z-index:50}
nav ul{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;gap:.8rem;margin:0;padding:.7rem 1rem}
nav a{color:#fff;font-weight:600;padding:.45rem .7rem;border-radius:8px;transition:background .3s}
nav a:hover{background:rgba(255,255,255,.15)}
main{max-width:1200px;margin:2rem auto;padding:0 1rem}
.card{background:#fff;padding:1.4rem;border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,.08);border:1px solid #e6e8ef;margin-bottom:2rem}
.fade{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s}
.fade.in{opacity:1;transform:none}
details.accordion{border:1px solid #e6e8ef;border-radius:.75rem;background:#fff;
box-shadow:0 2px 6px rgba(16,24,40,.06);margin-bottom:1rem;overflow:hidden}
details.accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:.6rem;padding:.9rem 1rem;font-weight:700;color:#0f3b78;background:#f7f9ff}
details.accordion summary::-webkit-details-marker{display:none}
details.accordion[open] summary{border-bottom:1px solid #e6e8ef;background:#eef4ff}
details.accordion .content{padding:1rem;color:#1d2433}
summary .chev{margin-left:auto;transition:transform .25s ease;font-size:1rem}
details[open] summary .chev{transform:rotate(90deg)}
.timeline{position:relative;margin:1rem 0;padding-left:40px}
.timeline::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:4px;
background:linear-gradient(#1558a6,#0ea5e9)}
.evento{position:relative;margin-bottom:14px;padding:10px 12px;background:#fff;
border:1px solid #e6e8ef;border-radius:.6rem;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.evento::before{content:"";position:absolute;left:-28px;top:14px;width:14px;height:14px;
border-radius:50%;background:#1558a6;box-shadow:0 0 0 4px #e8f1ff}
.pinboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.pin{background:#f7f9ff;border:1px solid #e6e8ef;border-left:5px solid #0f3b78;border-radius:10px;
padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.pin strong{display:block;color:#0f3b78}
.pin small{display:block;color:#555;margin-top:.2rem}
.frase-impacto{text-align:center;color:#0f3b78;font-weight:600;font-style:italic;margin-top:.3rem}
.sobre-fotos{display:flex;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin-top:1rem}
.sobre-fotos figure{width:300px;border:1px solid #e6e8ef;border-radius:12px;overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sobre-fotos img{width:100%;height:240px;object-fit:cover}
.sobre-fotos figcaption{background:#f7f9ff;padding:.6rem;text-align:center;font-weight:600;color:#0f3b78}
ul.lista{margin-left:1.2rem}
ul.lista li{margin-bottom:.3rem}
header div {
  max-width: 520px;
  margin: 0 auto;
  text-align: justify;
  z-index: 1;
}
header {
  grid-template-columns: auto 1fr auto;
}

/* Mapa */
.map-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid #cbd5e1;background:#eef4ff}
.map-img{width:100%;height:auto}
.pin-link{position:absolute;transform:translate(-50%,-100%);width:14px;height:14px;border-radius:50%;
background:#ef4444;border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.25);cursor:pointer}
.pin-link::before{content:attr(data-tooltip);position:absolute;left:50%;bottom:140%;
transform:translateX(-50%);white-space:nowrap;background:#0f172a;color:#fff;font-size:.8rem;
padding:.35rem .5rem;border-radius:.4rem;opacity:0;pointer-events:none;transition:opacity .2s}
.pin-link:hover::before{opacity:1}
.pin-tag{position:absolute;transform:translate(-50%,-50%);
background:rgba(255,255,255,.9);border:1px solid #cbd5e1;border-radius:.6rem;
padding:.3rem .5rem;font-size:.8rem;color:#0f3b78;font-weight:700}
/* ======== FORM/VALIDAÇÃO (Etapa 3) ======== */
.needs-validation { display:flex; flex-direction:column; gap:1rem; }
.form-label { display:block; font-weight:700; margin-bottom:.35rem; color:#0f3b78; }

.form-control, .form-select {
  width:100%; padding:.6rem; border:1px solid #cbd5e1; border-radius:.4rem; background:#fff;
}

.invalid-feedback, .valid-feedback { display:none; font-size:.9rem; margin-top:.35rem; }
.is-invalid { border-color:#ef4444 !important; }
.is-valid { border-color:#22c55e !important; }
.is-invalid ~ .invalid-feedback { display:block; color:#b91c1c; }
.is-valid ~ .valid-feedback { display:block; color:#166534; }

.form-text { font-size:.85rem; margin-top:.35rem; }
.text-muted { color:#64748b; }
.text-warning { color:#d97706; }
.text-danger { color:#b91c1c; }

.btn { display:inline-flex; align-items:center; justify-content:center; border:none; padding:.8rem 1.2rem; border-radius:.4rem; cursor:pointer; font-weight:700; }
.btn-primary { background:#0f3b78; color:#fff; }
.btn-primary:disabled { opacity:.65; cursor:not-allowed; }
.d-none { display:none !important; }
.me-2 { margin-right:.5rem; }

.spinner-border {
  width:1rem; height:1rem; border:.15em solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert { padding:.75rem 1rem; border-radius:.5rem; margin:.8rem 0; border:1px solid transparent; }
.alert-success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.alert-danger { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

</style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis CSS */
:root {
    --cor-primaria: #007bff;
    --cor-secundaria: #6c757d;
    --cor-sucesso: #28a745;
    --cor-perigo: #dc3545;
    --cor-aviso: #ffc107;
    --cor-info: #17a2b8;
    --cor-clara: #f8f9fa;
    --cor-escura: #343a40;
    
    --fonte-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fonte-secundaria: 'Courier New', monospace;
    
    --tamanho-base: 16px;
    --espacamento-pequeno: 0.5rem;
    --espacamento-medio: 1rem;
    --espacamento-grande: 2rem;
    
    --borda-radius: 8px;
    --sombra: 0 2px 4px rgba(0,0,0,0.1);
}