/* ============================================================
   RÁDIO PIRANGUINHO FM — "A Mais Doce do Brasil"
   Paleta oficial extraída da logo (amarelo-ouro > laranja > vermelho)
   Token system:
   Cor:   #3B1707 chocolate-queimado (bg escuro) · #FFF8EC creme (bg claro)
          #FFC72C amarelo-logo (accent claro) · #F6A21E ouro (accent principal)
          #EF7D1A laranja (accent secundário) · #E1432B vermelho-logo (CTA/live)
          #F4E3BE creme-doce (texto claro sobre escuro)
   Tipo:  Fraunces (display, curvas de doce derretido) + Manrope (corpo/UI)
   Assinatura: "fio de caramelo" (SVG de gotas escorrendo) como divisor
          + tarja "barracas coloridas" (listras multicoloridas, uma cor
          por barraca — referência direta às barracas da BR-459), agora
          nos tons quentes da marca (amarelo/ouro/laranja/vermelho)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --choc: #3B1707;
  --choc-2: #470F09;
  --cream: #FFF8EC;
  --cream-2: #FDE9C4;
  --caramel: #F6A21E;
  --caramel-lt: #FFC72C;
  --copper: #EF7D1A;
  --brick: #E1432B;
  --cream-soft: #FBE0B8;
  --ink: #3B1707;
  --line: rgba(59,23,7,0.14);
  --line-dark: rgba(255,199,44,0.18);

  --display: "Fraunces", serif;
  --body: "Manrope", sans-serif;

  --stripe-1: #FFC72C;
  --stripe-2: #E1432B;
  --stripe-3: #F6A21E;
  --stripe-4: #B92E1C;
  --stripe-5: #EF7D1A;
  --stripe-6: #FFE07A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ width:min(1120px, 92%); margin-inline:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line);
}
.topbar{
  background:var(--choc);
}
.topbar-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12.5px 0;
}
.topbar-listen{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:0.78rem; color:var(--choc);
  background:var(--caramel);
  padding:7px 16px;
  border-radius:100px;
  transition:background .2s ease, transform .2s ease;
}
.topbar-listen:hover{ background:var(--caramel-lt); color:var(--choc); transform:translateY(-1px); }
.topbar-listen svg{ width:14px; height:14px; flex-shrink:0; }
.topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar-social a{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  color:#FFFFFF;
  opacity:0.9; transition:opacity .2s ease;
}
.topbar-social a:hover{ opacity:1; }
.topbar-social svg{ width:20px; height:20px; }
.topbar-social img{
  width:20px; height:20px; object-fit:contain;
  filter:brightness(0) invert(1);
}
.navbar{
  background:rgba(255,248,236,0.92);
  backdrop-filter:blur(10px);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:21px 0;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:1.28rem;
  color:var(--choc);
}
.logo .dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--brick);
  box-shadow:0 0 0 4px rgba(225,67,43,0.14);
}
.logo small{
  display:block; font-family:var(--body); font-weight:700;
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--copper); margin-top:1px;
}
.logo-img{ height:52px; width:auto; display:block; }
.logo-img.on-dark{ filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
nav.links{ display:flex; align-items:center; gap:28px; }
nav.links a{
  font-weight:700; font-size:0.92rem; color:var(--choc);
  position:relative; padding:4px 0;
}
nav.links a.active, nav.links a:hover{ color:var(--brick); }
nav.links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--caramel); transition:width .25s ease;
}
nav.links a:hover::after, nav.links a.active::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:800; font-size:0.9rem;
  padding:12px 22px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--brick); color:var(--cream);
  box-shadow:0 8px 20px -8px rgba(225,67,43,0.6);
}
.btn-primary:hover{ background:#8f3722; }
.btn-cream{
  background:var(--cream); color:var(--choc);
}
.btn-cream:hover{ background:var(--cream-2); }
.btn-caramel{
  background:var(--caramel); color:var(--choc);
  box-shadow:0 8px 20px -8px rgba(246,162,30,0.7);
}
.btn-caramel:hover{ background:var(--caramel-lt); }

.menu-toggle{ display:none; }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--copper);
}
.eyebrow .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--brick);
  box-shadow:0 0 0 0 rgba(225,67,43,0.6); animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(225,67,43,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(225,67,43,0); }
  100%{ box-shadow:0 0 0 0 rgba(225,67,43,0); }
}

/* ---------- hero ---------- */
.hero{
  background:radial-gradient(120% 140% at 85% -10%, #452412 0%, var(--choc) 55%, var(--choc-2) 100%);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  padding:64px 0 92px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(251,224,184,0.10) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:0.5;
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
  padding-block:28px 12px;
}
.hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight:700;
  margin-top:14px;
  color:var(--cream);
}
.hero h1 em{ font-style:normal; color:var(--caramel-lt); }
.hero .underline-drip{ margin-top:6px; width:min(420px, 80%); }
.hero p.lead{
  margin-top:22px; max-width:52ch;
  font-size:1.08rem; line-height:1.6; color:var(--cream-soft);
}

/* dial / wave art on hero */
.hero-art{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dial-wrap{
  position:relative; display:block; width:min(360px, 100%); aspect-ratio:1/1;
  transition:transform .25s ease;
}
.dial-wrap:hover{ transform:scale(1.03); }
.dial-wrap:hover .dial-core{ box-shadow:0 24px 56px -14px rgba(0,0,0,0.6), inset 0 0 0 6px rgba(59,23,7,0.25); }
.dial-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(251,224,184,0.28);
  animation:spin 40s linear infinite;
}
.dial-ring.r2{ inset:26px; border-color:rgba(246,162,30,0.35); animation-duration:60s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes heroEq{
  0%, 100%{ height:16%; }
  50%{ height:100%; }
}
.dial-core{
  position:absolute; inset:70px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--caramel-lt), var(--copper) 70%);
  box-shadow:0 20px 50px -12px rgba(0,0,0,0.55), inset 0 0 0 6px rgba(59,23,7,0.25);
  display:flex; align-items:center; justify-content:center;
}
.dial-core svg{ width:46%; height:46%; }

/* ---------- equalizador do herói (assinatura em movimento, de ponta a ponta) ---------- */
.hero-eq-band{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:flex-end; gap:3px;
  height:52px; padding:0;
  pointer-events:none;
}
.hero-eq-band span{
  flex:1; min-width:2px; border-radius:3px 3px 0 0;
  animation:heroEq ease-in-out infinite;
  opacity:0.85;
}
.hero-eq-band span:nth-child(6n+1){ background:var(--stripe-1); }
.hero-eq-band span:nth-child(6n+2){ background:var(--stripe-2); }
.hero-eq-band span:nth-child(6n+3){ background:var(--stripe-3); }
.hero-eq-band span:nth-child(6n+4){ background:var(--stripe-4); }
.hero-eq-band span:nth-child(6n+5){ background:var(--stripe-5); }
.hero-eq-band span:nth-child(6n+6){ background:var(--stripe-6); }

/* ---------- section basics ---------- */
section{ padding:88px 0; }
.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-top:12px; }
.section-head p{ margin-top:16px; font-size:1.03rem; line-height:1.65; color:#4A3320; }

/* ---------- city section ---------- */
.city{ background:var(--cream); }
.city-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.city-copy p{ font-size:1.03rem; line-height:1.7; color:#4A3320; margin-bottom:16px; }
.city-copy .tag{
  display:inline-block; background:var(--cream-2); color:var(--brick);
  font-weight:800; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; margin-bottom:16px;
}
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-card{
  background:var(--choc); color:var(--cream);
  border-radius:18px; padding:22px 20px;
  position:relative; overflow:hidden;
}
.stat-card::after{
  content:""; position:absolute; right:-18px; bottom:-18px; width:90px; height:90px;
  border-radius:50%; background:radial-gradient(circle, rgba(246,162,30,0.35), transparent 70%);
}
.stat-card .n{ font-family:var(--display); font-weight:800; font-size:2rem; color:var(--caramel-lt); }
.stat-card .l{ font-size:0.86rem; color:var(--cream-soft); margin-top:6px; line-height:1.35; }

/* ---------- why / trio cards ---------- */
.why{ background:var(--choc); color:var(--cream); }
.why .section-head h2{ color:var(--cream); }
.why .section-head p{ color:var(--cream-soft); }
.why .eyebrow{ color:var(--caramel-lt); }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.trio-card{
  background:rgba(255,248,236,0.06);
  border:1px solid var(--line-dark);
  border-radius:20px; padding:30px 26px;
  transition:transform .25s ease, background .25s ease;
}
.trio-card:hover{ transform:translateY(-6px); background:rgba(255,248,236,0.1); }
.trio-card .ico{
  width:46px; height:46px; border-radius:12px;
  background:var(--caramel); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.trio-card .ico svg{ width:24px; height:24px; }
.trio-card h3{ font-size:1.2rem; color:var(--cream); font-weight:700; margin-bottom:8px; }
.trio-card p{ color:var(--cream-soft); font-size:0.95rem; line-height:1.55; }

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--caramel) 0%, var(--copper) 100%);
  color:var(--choc);
}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:var(--choc); }
.cta-band p{ margin-top:8px; color:#3A2410; font-weight:600; }

/* ---------- footer ---------- */
footer.site{
  background:var(--choc-2); color:var(--cream-soft); padding:56px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid var(--line-dark);
}
.footer-grid h4{
  font-family:var(--body); font-weight:800; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--caramel-lt); margin-bottom:14px;
}
.footer-grid p, .footer-grid a{ display:block; font-size:0.92rem; line-height:1.9; color:var(--cream-soft); }
.footer-grid a:hover{ color:var(--caramel-lt); }
.foot-bottom{
  padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.8rem; color:rgba(251,224,184,0.55);
}
.dev-credit{
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(251,224,184,0.7); font-weight:600;
  transition:color .2s ease;
}
.dev-credit:hover{ color:var(--caramel-lt); }

/* ---------- generic page hero (subpages) ---------- */
.page-hero{
  background:var(--choc); color:var(--cream); padding:60px 0 54px;
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size:clamp(2.2rem,4.4vw,3.2rem); color:var(--cream); margin-top:10px; }
.page-hero .underline-drip{ margin-top:10px; width:min(360px, 70%); }
.page-hero p{ margin-top:14px; max-width:56ch; color:var(--cream-soft); font-size:1.05rem; line-height:1.6; }

/* ---------- a radio page ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{
  background:var(--cream-2); border-radius:18px; padding:26px 22px;
  border:1px solid var(--line);
}
.value-card .n{ font-family:var(--display); font-weight:800; color:var(--brick); font-size:1.1rem; }
.value-card h3{ font-size:1.05rem; margin-top:8px; margin-bottom:8px; }
.value-card p{ font-size:0.9rem; line-height:1.5; color:#5A4127; }

.history-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.history-row .stat-grid{ grid-template-columns:1fr; }

/* ---------- contato page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.contact-card{
  background:var(--cream-2); border-radius:22px; padding:34px 30px;
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.contact-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--caramel); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.contact-icon svg{ width:24px; height:24px; }
.contact-card .tagline{
  font-weight:800; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--copper);
}
.contact-card h3{ font-size:1.5rem; margin-top:10px; margin-bottom:12px; }
.contact-card p{ color:#4A3320; line-height:1.6; margin-bottom:22px; }
.contact-card .num{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--choc); margin-bottom:22px; }
.insta-card{
  background:var(--choc); color:var(--cream); border-radius:22px; padding:34px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.insta-card h3{ color:var(--cream); font-size:1.3rem; }
.insta-card p{ color:var(--cream-soft); margin-top:6px; }

/* ---------- drip svg divider ---------- */
.drip-divider{ display:block; width:100%; height:auto; margin-top:-1px; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-art{ order:-1; }
  .dial-wrap{ width:min(260px,72%); margin-inline:auto; }
  .city-grid, .history-row, .contact-grid{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .cta-band-inner{ justify-content:center; text-align:center; }
  nav.links{
    position:fixed; inset:64px 16px auto 16px; background:var(--cream);
    border:1px solid var(--line); border-radius:18px; padding:18px;
    flex-direction:column; align-items:flex-start; gap:14px;
    box-shadow:0 20px 40px -20px rgba(0,0,0,0.3);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .25s ease;
  }
  nav.links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:1.5px solid var(--choc);
    background:transparent; cursor:pointer;
  }
  .menu-toggle svg{ width:20px; height:20px; }
  .topbar-listen span{ display:none; }
  .topbar-listen{ padding:8px; }
}
@media (max-width: 620px){
  .values-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--brick); outline-offset:2px; border-radius:6px;
}