/*
Theme Name: Proposta
Description: Tema para publicar propostas comerciais. Cada proposta e um post do tipo "Proposta"; os campos ficam no editor. Autocontido, sem plugins.
Version: 1.0
Text Domain: proposta
*/
:root{
  --navy:    #1a3a52;
  --navy-2:  #0f2236;
  --teal:    #2db896;
  --teal-2:  #1e9875;
  --bg:      #f0f5f9;
  --bg-2:    #e8f1f8;

  --amber: #d97706;
  --red:   #dc2626;

  --card:      linear-gradient(to bottom left, var(--bg-2), var(--bg));
  --card-dark: linear-gradient(to bottom left, var(--navy), var(--navy-2));

  --r-lg: 2.5rem;
  --r-md: 2rem;
  --r-sm: 1rem;
  --max:  1200px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--navy); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:5rem 1.25rem; position:relative; z-index:1; }
@media(min-width:1024px){ .wrap{ padding:6rem 3rem; } }

.glow{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100%; height:600px; background:var(--teal); opacity:.1; filter:blur(120px);
  pointer-events:none; z-index:0; }

h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.02em; font-weight:800; color:var(--navy); }
h1{ font-size:clamp(2rem,6vw,3.75rem); font-weight:900; }
h2{ font-size:clamp(1.5rem,4vw,2rem); }
h3{ font-size:1.15rem; }
p{ color:color-mix(in srgb,var(--navy) 70%,transparent); }
strong{ color:var(--navy); font-weight:700; }

.rotulo{ display:flex; align-items:center; gap:.75rem; font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.15em; color:var(--teal); margin-bottom:1rem; }
.rotulo::before{ content:""; width:2rem; height:2px; border-radius:2px; background:var(--teal); }

.intro{ font-size:1.05rem; max-width:52rem; margin:.75rem 0 2.5rem; }
section{ margin-bottom:6rem; }

.grid{ display:grid; gap:1.5rem; }
@media(min-width:768px){ .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } }

.fio{ position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,var(--teal),transparent); opacity:.5; }

.card-dark{ position:relative; overflow:hidden; background:var(--card-dark);
  border:1px solid color-mix(in srgb,var(--teal) 25%,transparent);
  border-radius:var(--r-lg); padding:2.5rem; }
@media(min-width:768px){ .card-dark{ padding:3.5rem; } }
.card-dark h2,.card-dark h3,.card-dark h4{ color:#fff; }
.card-dark p{ color:rgba(255,255,255,.82); }
.card-dark strong{ color:#fff; }

.selo{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; border-radius:999px;
  background:color-mix(in srgb,var(--teal) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.15em; margin-bottom:2rem; }
.selo::before{ content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--teal);
  animation:pulso 2s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .selo::before{ animation:none; } }

.cabecalho{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:2.5rem;
  margin-bottom:5rem; background:var(--card);
  border:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
@media(min-width:768px){ .cabecalho{ padding:3.5rem; } }

.meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1rem; padding-top:2rem; margin-top:2rem;
  border-top:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
@media(min-width:768px){ .meta{ grid-template-columns:repeat(4,1fr); } }
.meta dt{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  color:color-mix(in srgb,var(--navy) 55%,transparent); margin-bottom:.4rem; }
.meta dd{ font-weight:700; font-size:.95rem; }

.problema{ border-radius:var(--r-md); padding:1.75rem; background:var(--card); }
.problema.alerta{ border:1px solid color-mix(in srgb,var(--amber) 32%,transparent); }
.problema.erro{ border:1px solid color-mix(in srgb,var(--red) 28%,transparent); }
.problema .titulo{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; margin-bottom:.85rem; }
.problema.alerta .titulo{ color:var(--amber); }
.problema.erro .titulo{ color:var(--red); }
.problema p{ font-size:.93rem; }

.raiox{ border-radius:var(--r-md); overflow:hidden; border:1px solid color-mix(in srgb,var(--navy) 12%,transparent); background:#fff; }
.raiox-top{ padding:1.5rem 1.75rem; border-bottom:1px solid color-mix(in srgb,var(--navy) 8%,transparent); }
.raiox-top .t{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--teal); margin-bottom:.35rem; }
.raiox-top .s{ font-weight:800; color:var(--navy); font-size:1.05rem; }
.gauges{ display:flex; flex-wrap:wrap; gap:2rem; padding:2rem 1.75rem; }
.gauge{ display:flex; flex-direction:column; align-items:center; gap:.65rem; width:120px; }
.dial{ --v:0; --c:var(--teal); width:84px; height:84px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:conic-gradient(var(--c) calc(var(--v)*1%), color-mix(in srgb,var(--navy) 10%,transparent) 0); }
.dial::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.dial b{ position:relative; font-size:1.35rem; font-weight:900; color:var(--c); }
.gauge .lab{ font-size:.78rem; font-weight:700; color:var(--navy); text-align:center; }
.gauge .st{ font-size:.68rem; font-weight:700; }
.raiox-list{ padding:0 1.75rem 1.75rem; display:grid; gap:.5rem; }
.raiox-list div{ display:flex; gap:.6rem; align-items:flex-start; padding:.6rem 0; border-top:1px solid color-mix(in srgb,var(--navy) 6%,transparent); font-size:.85rem; }
.raiox-list b{ color:var(--navy); }
.raiox-list span{ color:color-mix(in srgb,var(--navy) 60%,transparent); }

.feat{ padding:1.5rem; border-radius:var(--r-md); background:var(--card);
  border:1px solid color-mix(in srgb,var(--teal) 15%,transparent); }
.feat .em{ font-size:1.6rem; margin-bottom:.75rem; }
.feat h3{ font-size:1rem; margin-bottom:.4rem; }
.feat p{ font-size:.88rem; color:color-mix(in srgb,var(--navy) 60%,transparent); }

.eco{ border-radius:var(--r-md); overflow:hidden; background:#fff; border:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
.eco-top{ padding:2rem; background:linear-gradient(to right, color-mix(in srgb,var(--teal) 10%,transparent), transparent);
  border-bottom:1px solid color-mix(in srgb,var(--teal) 10%,transparent); }
@media(min-width:768px){ .eco-top{ padding:2.5rem; } }
.eco-top .t{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--teal); margin-bottom:.35rem; }
.eco-top .s{ font-size:1.35rem; font-weight:800; color:var(--navy); }
.eco-body{ padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
@media(min-width:768px){ .eco-body{ padding:2.5rem; } }
.eco-row{ padding:1.5rem; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--teal) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 15%,transparent); }
.eco-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.eco-head .ico{ width:1.4rem; height:1.4rem; color:var(--teal); flex:0 0 auto; }
.eco-head .ico svg{ width:100%; height:100%; stroke-width:2; }
.eco-head .nome{ font-weight:800; color:var(--navy); }
.eco-head .ct{ font-size:.68rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb,var(--teal) 15%,transparent); color:var(--teal-2); }
.eco-row p{ font-size:.9rem; color:color-mix(in srgb,var(--navy) 60%,transparent); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; padding:.4rem .7rem; border-radius:.6rem;
  background:rgba(255,255,255,.6); border:1px solid color-mix(in srgb,var(--teal) 12%,transparent);
  color:color-mix(in srgb,var(--navy) 72%,transparent); }
.chip::before{ content:""; width:.75rem; height:.75rem; flex:0 0 auto; background:var(--teal);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.stats{ padding:1.5rem; border-radius:var(--r-sm); display:grid; grid-template-columns:repeat(3,1fr);
  background:color-mix(in srgb,var(--teal) 10%,transparent); border:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
.stats div{ text-align:center; }
.stats div+div{ border-left:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
.stats b{ display:block; font-size:2rem; font-weight:900; color:var(--navy); line-height:1; }
.stats span{ font-size:.72rem; font-weight:600; color:color-mix(in srgb,var(--navy) 60%,transparent); }

.callout{ display:flex; flex-direction:column; gap:1.25rem; padding:1.5rem; border-radius:var(--r-md); margin-bottom:2rem;
  background:color-mix(in srgb,var(--amber) 9%,transparent); border:1px solid color-mix(in srgb,var(--amber) 25%,transparent); }
@media(min-width:768px){ .callout{ flex-direction:row; align-items:flex-start; padding:1.75rem; } }
.callout .ic{ width:3rem; height:3rem; border-radius:999px; flex:0 0 auto; display:grid; place-items:center;
  background:color-mix(in srgb,var(--amber) 16%,transparent); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); color:var(--amber); }
.callout .ic svg{ width:1.3rem; height:1.3rem; stroke-width:2; }
.callout h4{ color:#8a5300; margin-bottom:.4rem; }
.callout p{ color:#8a5300cc; font-size:.92rem; }

.etapa{ display:flex; gap:1.25rem; align-items:flex-start; padding:1.5rem; border-radius:var(--r-sm);
  background:var(--card); border:1px solid color-mix(in srgb,var(--teal) 15%,transparent); }
.etapa .num{ flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:999px; display:grid; place-items:center;
  font-weight:900; color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 25%,transparent); }
.etapa h3{ font-size:1rem; margin-bottom:.35rem; }
.etapa p{ font-size:.9rem; }

.checks{ list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.checks li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:color-mix(in srgb,var(--navy) 72%,transparent); }
.checks li::before{ content:""; flex:0 0 auto; width:1rem; height:1rem; margin-top:.25rem; background:var(--teal);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.card-dark .checks li{ color:rgba(255,255,255,.85); }

.ymyl{ display:flex; flex-direction:column; gap:1.5rem; }
@media(min-width:768px){ .ymyl{ flex-direction:row; align-items:flex-start; gap:2rem; } }
.ymyl .ic{ width:3.5rem; height:3.5rem; border-radius:var(--r-sm); flex:0 0 auto; display:grid; place-items:center;
  background:color-mix(in srgb,var(--amber) 15%,transparent); border:1px solid color-mix(in srgb,var(--amber) 25%,transparent); color:var(--amber); }
.ymyl .ic svg{ width:1.6rem; height:1.6rem; stroke-width:2; }
.badge{ display:inline-flex; padding:.35rem .8rem; border-radius:999px; font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.13em; color:var(--amber); margin-bottom:1rem;
  background:color-mix(in srgb,var(--amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber) 22%,transparent); }
.ymyl-box{ margin-top:1.75rem; padding:1.5rem; border-radius:var(--r-sm); display:flex; gap:1.25rem; align-items:flex-start;
  background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb,var(--teal) 22%,transparent); }
.ymyl-box .ic2{ width:2.75rem; height:2.75rem; border-radius:.7rem; flex:0 0 auto; display:grid; place-items:center;
  background:color-mix(in srgb,var(--teal) 16%,transparent); border:1px solid color-mix(in srgb,var(--teal) 25%,transparent); color:var(--teal); }
.ymyl-box .ic2 svg{ width:1.2rem; height:1.2rem; stroke-width:2; }

.plano{ position:relative; overflow:hidden; border-radius:var(--r-md); padding:2.25rem; background:var(--card);
  border:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }
.plano.destaque{ border-color:color-mix(in srgb,var(--teal) 42%,transparent); }
.plano .label{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--teal); margin-bottom:1.5rem; }
.plano .valor{ font-size:clamp(2.25rem,7vw,3rem); font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--navy); }
.plano .periodo{ font-size:.88rem; font-weight:600; color:color-mix(in srgb,var(--navy) 55%,transparent); margin:.4rem 0 1.75rem; }
.plano .checks{ padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--teal) 20%,transparent); }

.nota{ text-align:center; font-size:.8rem; max-width:44rem; margin:1.5rem auto 0; padding:1rem; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--navy) 6%,transparent); color:color-mix(in srgb,var(--navy) 55%,transparent); }

.cta{ text-align:center; }
.cta .rotulo{ justify-content:center; color:var(--teal); }
.cta h2{ margin-bottom:1rem; }
.cta p{ max-width:36rem; margin:0 auto 2.25rem; }
.botao{ display:inline-flex; align-items:center; gap:.6rem; padding:1rem 2rem; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:1rem; color:#fff; border:1px solid rgba(255,255,255,.25);
  background:radial-gradient(120% 120% at 50% 0%, var(--teal) 0%, var(--teal-2) 100%);
  transition:transform .2s ease, opacity .2s ease; }
.botao:hover{ transform:translateY(-2px); opacity:.92; }
.botao svg{ width:1.1rem; height:1.1rem; stroke-width:2.5; }
@media (prefers-reduced-motion:reduce){ .botao:hover{ transform:none; } }

.rodape{ text-align:center; padding-top:3rem; font-size:.8rem; color:color-mix(in srgb,var(--navy) 45%,transparent); }

.tabela-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--teal) 20%,transparent);
  background:#fff; -webkit-overflow-scrolling:touch; }
.tabela{ width:100%; border-collapse:collapse; font-size:.9rem; text-align:left; }
.tabela thead th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; white-space:nowrap;
  color:color-mix(in srgb,var(--navy) 55%,transparent); background:color-mix(in srgb,var(--teal) 8%,transparent);
  padding:1rem 1.25rem; border-bottom:1px solid color-mix(in srgb,var(--teal) 15%,transparent); }
.tabela th.r, .tabela td.r{ text-align:right; }
.tabela tbody td{ padding:1rem 1.25rem; border-bottom:1px solid color-mix(in srgb,var(--navy) 6%,transparent); vertical-align:top; }
.tabela .item{ font-weight:700; color:var(--navy); white-space:nowrap; }
.tabela .desc{ color:color-mix(in srgb,var(--navy) 58%,transparent); min-width:15rem; }
.tabela .preco{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace; }
.tabela .setup{ color:var(--navy); }
.tabela .mensal{ color:var(--teal-2); font-weight:700; }
.tabela .vazio{ color:color-mix(in srgb,var(--navy) 26%,transparent); font-weight:400; }
.tabela tbody tr:last-child td{ border-bottom:0; }
.tabela .total td{ background:color-mix(in srgb,var(--teal) 10%,transparent);
  border-top:2px solid color-mix(in srgb,var(--teal) 25%,transparent); border-bottom:0;
  padding:1.15rem 1.25rem; font-size:1rem; }
.tabela .total .lbl{ font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--teal-2); }
.tabela .total .setup{ font-weight:800; color:var(--navy); }
.tabela .total .mensal{ font-weight:800; color:var(--teal-2); }

@property --v{ syntax:'<number>'; inherits:false; initial-value:0; }

@keyframes enterUp{ from{ opacity:0; transform:translateY(38px); } to{ opacity:1; transform:none; } }
.cabecalho > *:not(.fio){ animation:enterUp 1.1s cubic-bezier(.16,1,.3,1) both; }
.cabecalho .selo{ animation-delay:.15s; }
.cabecalho h1{ animation-delay:.38s; }
.cabecalho .intro{ animation-delay:.62s; }
.cabecalho .meta{ animation-delay:.86s; }

.reveal > .rotulo, .reveal > h2, .reveal > .intro, .up{
  opacity:0; transform:translateY(38px);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
.reveal > .rotulo.vis, .reveal > h2.vis, .reveal > .intro.vis, .up.vis{
  opacity:1; transform:none;
}

.dial{ transition:--v 1.6s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion:reduce){
  .cabecalho > *{ animation:none !important; }
  .reveal > .rotulo, .reveal > h2, .reveal > .intro, .up{ opacity:1; transform:none; transition:none; }
  .dial{ transition:none; }
}

@media print{
  @page{ margin:1.2cm; }
  body{ background:#fff; }
  .glow{ display:none; }
  .wrap{ padding:0; max-width:none; }
  .cabecalho > *{ animation:none !important; }
  .reveal > .rotulo, .reveal > h2, .reveal > .intro, .up{ opacity:1 !important; transform:none !important; transition:none !important; }
  .dial{ transition:none !important; }
  section{ margin-bottom:2rem; break-inside:avoid; }
  .card-dark,.plano,.feat,.cabecalho,.etapa,.eco,.raiox,.callout,.eco-row,.tabela-wrap{ break-inside:avoid; }
  .card-dark{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .botao{ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; word-break:break-all; }
}