*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --navy:#0a2744;--navy2:#0d3a60;--gold:#e8b64c;--gold2:#c99a33;
  --white:#ffffff;--light:#cdd6e6;
}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--navy);color:var(--white);overflow-x:hidden}

/* NAV */
nav{
  background:var(--navy2);
  padding:14px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
  transition: all 0.3s ease;
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.1);
}
nav.scrolled a, nav.scrolled .nav-links span {
  color: var(--navy);
}
nav.scrolled .social-links a {
  color: var(--navy);
}

.nav-logo img {
  height: 40px;
  width: auto;
}
.nav-links {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav-links a{color:var(--light);text-decoration:none;margin:0 14px;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-links span{color:var(--gold);margin:0 4px;opacity:.5}

.social-links a {
  color: var(--white);
  margin-left: 15px;
  font-size: 1.1rem;
  transition: color 0.2s;
}
.social-links a:hover {
  color: var(--gold);
}

/* HERO */
.hero{position:relative;min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:100px 24px 60px}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,34,68,.75) 0%,rgba(13,42,82,.92) 55%,var(--navy) 100%),url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=1400&auto=format&fit=crop') center/cover no-repeat;z-index:0}
.logo-wrap{position:relative;z-index:1;display:flex;align-items:center;margin-bottom:30px;animation:fadeDown .7s ease both}
.logo-image {
  max-width: 280px;
  height: auto;
}
.hero-title{position:relative;z-index:1;text-align:center;animation:fadeUp .8s .2s ease both}
/* Selo com ponto dourado — mesmo componente .pill de inicio.php */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(232,182,76,.45);background:rgba(232,182,76,.08);color:#f3dca6;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:40px;margin-bottom:12px}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,182,76,.2)}
.hero-title h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1.1;color:var(--white);margin-bottom:16px;letter-spacing:-.01em}
.hero-title h1 em{font-style:italic;color:var(--gold)}
.hero-title p{font-size:1.05rem;font-weight:400;color:rgba(255,255,255,.78);line-height:1.6; max-width: 560px; margin: 0 auto;}

/* CTA */
.cta-section{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:44px 24px 36px}
.btn{padding:15px 44px;background:var(--gold);color:var(--navy2);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-align:center;border:none;border-radius:50px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 4px 18px rgba(232,182,76,.35)}
.btn:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 8px 28px rgba(232,182,76,.55)}

/* ════════════ TIMELINE ════════════ */
.tl-section{padding:60px 0 100px}
.tl-header{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.tl-subtitle{text-align:center;font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--white);margin-bottom:60px}
.tl-subtitle span{color:var(--gold)}

.tl-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(232,182,76,.1);
  border-radius:24px;
  max-width:900px;margin:0 auto;
  padding:60px 40px;
  position:relative;
}

.tl-card::before{
  content:'';position:absolute;
  left:50%;top:0;bottom:0;width:2px;
  background:rgba(232,182,76,.2);
  transform:translateX(-50%);z-index:0;
}

.tl-row{
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  align-items:center;
  position:relative;
  margin-bottom: 40px;
  opacity:0;transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease;
}
.tl-row.vis{opacity:1;transform:none}

.tl-center{
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:10;
}
.tl-year-lbl{
  font-size:.7rem;font-weight:800;
  color:var(--gold);margin-bottom:8px;text-align:center;
  background: var(--navy);
  padding: 2px 8px;
  border-radius: 4px;
}

.tl-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);
  border:3px solid var(--navy);
  box-shadow:0 0 0 2px var(--gold);
  z-index:3;
}

.tl-panel{padding:10px 20px;position:relative}
.tl-panel.empty{pointer-events:none}

.tl-hline{
  position:absolute;
  top:50%;
  height:2px;
  background:rgba(232,182,76,.3);
  z-index:1;
}
.tl-row.lc .tl-hline{right:-40px;width:40px}
.tl-row.rc .tl-hline{left:-40px;width:40px}

.tl-inner{display:flex;align-items:center;gap:20px}
.tl-row.rc .tl-inner{flex-direction:row-reverse;text-align:right}

.tl-av{
  width:80px;height:80px;border-radius:50%;
  border:3px solid var(--gold);
  overflow: hidden;
  flex-shrink:0;
  background:var(--navy2);
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  position:relative;z-index:5;
}
.tl-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-content-box {
  flex: 1;
}

.tl-period{font-size:.7rem;font-weight:800;color:var(--gold);margin-bottom:4px; text-transform: uppercase;}
.tl-name{font-size:1.1rem;font-weight:700;color:var(--white);line-height:1.2;margin-bottom:4px}
.tl-role{font-size:.75rem;color:var(--light);font-style:italic;margin-bottom:8px; display: block;}
.tl-desc{font-size:.75rem;color:rgba(255,255,255,.6);line-height:1.6}

/* ════════════ VIDEOS ════════════ */
.video-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
}
.video-grid {
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}
.video-card {
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(232,182,76,0.1);
  transition: transform 0.3s ease;
}
.video-card:hover {
  transform: translateY(-10px);
  border-color: var(--gold);
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-info {
  padding: 20px;
}
.video-info h3 {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 8px;
}
.video-info p {
  font-size: 0.8rem;
  color: var(--light);
}

/* ════════════ FORM ════════════ */
.form-section{background:var(--navy2);padding:80px 24px;border-top:1px solid rgba(232,182,76,0.2)}
.form-inner{max-width:900px;margin:0 auto; background: rgba(255,255,255,0.02); padding: 50px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.05);}
.form-badge{display:inline-block;background:var(--gold);color:var(--navy2);font-size:.63rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:6px 20px;border-radius:40px;margin-bottom:24px}
.form-section h2{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:700;color:var(--white);margin-bottom:15px;line-height:1.2}
.form-section h2 span{color:var(--gold)}
.sub{color:var(--light);font-size:.95rem;line-height:1.6;margin-bottom:40px}
.form-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.field input,.field textarea{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;padding:15px 20px;outline:none;width:100%;transition:all .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.2)}
.field input:focus,.field textarea:focus{border-color:var(--gold);background:rgba(232,182,76,.05);box-shadow: 0 0 15px rgba(232,182,76,0.1);}
.field textarea{resize:vertical;min-height:140px}
.char-count{text-align:right;font-size:.67rem;color:var(--light);margin-top:-8px}
.btn-submit{width:100%;padding:20px;background:var(--gold);color:var(--navy2);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border:none;border-radius:50px;cursor:pointer;box-shadow:0 6px 20px rgba(232,182,76,.3);transition:all .2s}
.btn-submit:hover{background:var(--gold2);transform:translateY(-3px);box-shadow:0 10px 30px rgba(232,182,76,.5)}

.ok{display:none;background:rgba(232,182,76,.1);border:1.5px solid var(--gold);border-radius:8px;padding:22px 24px;text-align:center;margin-top:24px;animation:fadeUp .5s ease both}
.ok.show{display:block}
.ok .icon{font-size:2.2rem;margin-bottom:8px}
.ok p{color:var(--white);font-size:.9rem;line-height:1.5}
.ok strong{color:var(--gold)}

footer{background:#051226;text-align:center;padding:40px 24px;font-size:.75rem;color:rgba(255,255,255,0.4);border-top: 1px solid rgba(255,255,255,0.05);}

@keyframes fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* MOBILE */
@media(max-width:768px){
  nav { padding: 10px 20px; }
  .nav-links { display: none; }
  .tl-card::before{left:40px}
  .tl-row{grid-template-columns:40px 1fr; margin-bottom: 30px;}
  .tl-panel.empty{display:none}
  .tl-row.lc,.tl-row.rc{grid-template-areas:"center content"}
  .tl-center{grid-area:center; align-items: flex-start;}
  .tl-panel:not(.empty){grid-area:content;padding:0 0 20px 20px}
  .tl-row.rc .tl-inner{flex-direction:row;text-align:left}
  .tl-hline{display:none}
  .tl-av{width:60px;height:60px}
  .tl-inner { gap: 15px; }
  .form-inner { padding: 30px 20px; }
  .form-section h2{font-size:1.8rem}
}

/* NOVOS ESTILOS */
.nav-actions { display: flex; align-items: center; gap: 20px; }
.btn-member { background: var(--gold); color: var(--navy2); padding: 8px 20px; border-radius: 50px; font-size: 0.7rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; box-shadow: 0 4px 10px rgba(232,182,76,0.3); }
.btn-member:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(232,182,76,0.5); }

.hero-bg { background-image: linear-gradient(180deg,rgba(10,34,68,.6) 0%,rgba(13,42,82,.8) 55%,var(--navy) 100%), url('../img/hero-bg-modern.jpg') !important; }
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-btns { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 15px; margin-top: 30px; max-width: 100%; }
.btn-outline { background: transparent; border: 2px solid var(--gold); color: var(--gold); box-shadow: none; }
.btn-outline:hover { background: var(--gold); color: var(--navy2); }

.history-section { background: linear-gradient(135deg, rgba(13,42,82,0.5) 0%, rgba(10,34,68,0.7) 100%); padding: 100px 24px; color: var(--white); border-top: 1px solid rgba(232,182,76,0.2); border-bottom: 1px solid rgba(232,182,76,0.2); }
.container { max-width: 1100px; margin: 0 auto; }
.history-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; margin-top: 40px; }
.history-text p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 20px; color: var(--light); }
.history-text strong { color: var(--gold); }
.history-stats { display: grid; grid-template-columns: 1fr; gap: 20px; }
.stat-item { background: rgba(255,255,255,0.03); padding: 30px; border-radius: 20px; border: 1px solid rgba(232,182,76,0.2); text-align: center; transition: all 0.3s; }
.stat-item:hover { background: rgba(232,182,76,0.08); border-color: var(--gold); }
.stat-num { font-size: 2.5rem; font-weight: 900; color: var(--gold); margin-bottom: 5px; }
.stat-desc { font-size: 0.85rem; font-weight: 700; color: var(--light); text-transform: uppercase; letter-spacing: 1px; }


.more-container { text-align: center; margin-top: 50px; }

.testimonials-section { padding: 100px 24px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.testimonial-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(232,182,76,0.1); padding: 40px 30px; border-radius: 24px; text-align: center; transition: all 0.3s; }
.testimonial-card:hover { transform: translateY(-10px); border-color: var(--gold); background: rgba(255,255,255,0.05); }
.testi-photo { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 3px solid var(--gold); }
.testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card h3 { color: var(--gold); font-size: 1.2rem; margin-bottom: 15px; }
.testi-story { font-size: 0.9rem; line-height: 1.6; color: var(--light); font-style: italic; }

@media(max-width: 768px) {
  .nav-actions { display: none; }
  .history-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-btns { display: flex; flex-direction: column; width: 100%; }
  .hero-btns .btn { width: 100%; }
}