/* ============================================================
   Visual do site e do painel
   ============================================================ */

:root{
  --terracota:#b0522c;
  --terracota-esc:#8f411f;
  --marrom:#3f3327;
  --papel:#f4efe8;
  --papel-2:#fbf8f4;
  --linha:#e5d9cb;
  --verde:#5d7a4a;
  --suave:rgba(63,51,39,.66);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans); font-size:16px; line-height:1.6;
  color:var(--marrom); background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--terracota); }
img{ max-width:100%; display:block; }

.env{ width:100%; max-width:1080px; margin:0 auto; padding:0 22px; }
.env-estreito{ max-width:560px; }

/* ---------------- topo ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,232,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo .env{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.marca{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--terracota);
        text-decoration:none; letter-spacing:.01em; white-space:nowrap; }
.topo nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------------- botões ---------------- */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border:0; border-radius:999px; cursor:pointer;
  font:600 15px/1 var(--sans); text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,var(--terracota),var(--terracota-esc));
  color:#fff; box-shadow:0 4px 12px rgba(143,65,31,.26);
  transition:transform .15s, box-shadow .15s;
}
.bt:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(143,65,31,.32); }
.bt:active{ transform:translateY(0); }
.bt.fantasma{ background:none; color:var(--terracota); box-shadow:none;
              border:1px solid rgba(176,82,44,.42); }
.bt.claro{ background:#fff; color:var(--terracota); box-shadow:none; border:1px solid var(--linha); }
.bt.pequeno{ padding:8px 14px; font-size:14px; }
.bt.largo{ width:100%; }
.bt[disabled]{ opacity:.45; pointer-events:none; }
.bt svg{ width:17px; height:17px; }

/* ---------------- landing ---------------- */
.heroi{ padding:76px 0 60px; text-align:center; }
.heroi h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(36px,6vw,60px);
  line-height:1.1; margin:0 0 18px; letter-spacing:-.01em;
}
.heroi h1 em{ font-style:italic; color:var(--terracota); }
.heroi p.sub{ font-size:clamp(17px,2.2vw,20px); color:var(--suave);
              max-width:600px; margin:0 auto 30px; }
.heroi .acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.selo{ display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
       color:var(--terracota); margin-bottom:18px; font-weight:600; }

.secao{ padding:62px 0; }
.secao.alt{ background:var(--papel-2); border-top:1px solid var(--linha);
            border-bottom:1px solid var(--linha); }
.secao h2{ font-family:var(--serif); font-size:clamp(28px,4vw,40px); font-weight:600;
           margin:0 0 12px; text-align:center; }
.secao .intro{ text-align:center; color:var(--suave); max-width:600px; margin:0 auto 40px; }

.grade{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.cartao{ background:#fff; border:1px solid var(--linha); border-radius:14px; padding:26px; }
.cartao h3{ font-family:var(--serif); font-size:22px; margin:0 0 8px; font-weight:600; }
.cartao p{ margin:0; color:var(--suave); font-size:15px; }
.cartao .ico{ width:40px; height:40px; color:var(--terracota); margin-bottom:14px; }
.cartao .ico svg{ width:100%; height:100%; }

/* passos */
.passos{ counter-reset:p; display:grid; gap:20px;
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.passo{ position:relative; padding-left:52px; }
.passo::before{
  counter-increment:p; content:counter(p);
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font:600 16px var(--sans);
  background:var(--terracota); color:#fff;
}
.passo h3{ font-family:var(--serif); font-size:20px; margin:4px 0 6px; font-weight:600; }
.passo p{ margin:0; color:var(--suave); font-size:15px; }

/* planos */
.planos{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.plano{ background:#fff; border:1px solid var(--linha); border-radius:14px;
        padding:26px 22px; text-align:center; position:relative; }
.plano.destaque{ border-color:var(--terracota); box-shadow:0 10px 28px rgba(143,65,31,.13); }
.plano .fita{ position:absolute; top:-11px; left:50%; transform:translateX(-50%);
              background:var(--terracota); color:#fff; font-size:12px; font-weight:600;
              letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.plano h3{ font-family:var(--serif); font-size:19px; margin:0 0 10px; font-weight:600; }
.plano .valor{ font-family:var(--serif); font-size:38px; color:var(--terracota);
               font-weight:600; line-height:1; }
.plano .valor small{ font-size:16px; }
.plano ul{ list-style:none; padding:0; margin:18px 0 0; text-align:left; font-size:14.5px;
           color:var(--suave); }
.plano li{ padding:5px 0 5px 22px; position:relative; }
.plano li::before{ content:"✓"; position:absolute; left:0; color:var(--verde); font-weight:700; }

.rodape{ border-top:1px solid var(--linha); padding:34px 0; text-align:center;
         color:var(--suave); font-size:14px; }

/* ---------------- formulários ---------------- */
.painel-cx{ background:#fff; border:1px solid var(--linha); border-radius:14px; padding:28px; }
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.campo .dica{ font-weight:400; color:var(--suave); font-size:13px; }
input[type=text], input[type=email], input[type=password], input[type=file], textarea, select{
  width:100%; padding:11px 13px; border:1px solid var(--linha); border-radius:9px;
  font:15px/1.5 var(--sans); color:var(--marrom); background:#fff;
}
textarea{ min-height:86px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--terracota); box-shadow:0 0 0 3px rgba(176,82,44,.13);
}
.linha2{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .linha2{ grid-template-columns:1fr; } }

/* ---------------- avisos ---------------- */
.aviso{ padding:13px 16px; border-radius:10px; margin-bottom:20px; font-size:15px; }
.aviso.ok{ background:#eaf5e6; border:1px solid #bcd9ae; color:#39602a; }
.aviso.erro{ background:#fdecea; border:1px solid #f0b4ac; color:#8f2015; }
.aviso.info{ background:#fff6e6; border:1px solid #e8cf9a; color:#7a5a1c; }

/* ---------------- painel ---------------- */
.painel{ display:grid; grid-template-columns:232px 1fr; gap:28px; padding:30px 0 60px; align-items:start; }
@media (max-width:860px){ .painel{ grid-template-columns:1fr; } }
.menu{ background:#fff; border:1px solid var(--linha); border-radius:14px; padding:10px;
       position:sticky; top:84px; }
@media (max-width:860px){ .menu{ position:static; } }
.menu a{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:9px;
         text-decoration:none; color:var(--marrom); font-size:15px; font-weight:500; }
.menu a:hover{ background:var(--papel); }
.menu a.on{ background:var(--terracota); color:#fff; }
.menu a svg{ width:17px; height:17px; opacity:.8; }
.menu hr{ border:0; border-top:1px solid var(--linha); margin:8px 4px; }

h1.titulo{ font-family:var(--serif); font-size:32px; font-weight:600; margin:0 0 6px; }
p.legenda{ color:var(--suave); margin:0 0 24px; }

.estado{ display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px;
         font-size:13px; font-weight:600; }
.estado::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.estado.rascunho{ background:#f0ebe4; color:#7a6a58; }
.estado.aguardando{ background:#fff3dc; color:#9a6b12; }
.estado.ativo{ background:#e6f4e2; color:#3d6b2c; }

.secao-form{ margin-bottom:30px; }
.secao-form h2{ font-family:var(--serif); font-size:21px; font-weight:600;
                margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--linha); }
.secao-form .nota{ color:var(--suave); font-size:14px; margin:6px 0 16px; }

table.lista{ width:100%; border-collapse:collapse; font-size:15px; }
table.lista th{ text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
                color:var(--suave); padding:8px 10px; border-bottom:1px solid var(--linha); }
table.lista td{ padding:11px 10px; border-bottom:1px solid var(--linha); vertical-align:middle; }
table.lista tr:last-child td{ border-bottom:0; }
table.lista .mono{ font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--suave);
                   word-break:break-all; }
.acoes-linha{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.vazio{ text-align:center; padding:40px 20px; color:var(--suave); }

/* galeria de modelos */
.modelos{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.modelo{ border:2px solid var(--linha); border-radius:14px; overflow:hidden; background:#fff;
         cursor:pointer; text-align:center; padding:0 0 14px; transition:border-color .15s; }
.modelo:hover{ border-color:rgba(176,82,44,.5); }
.modelo.on{ border-color:var(--terracota); }
.modelo img{ width:100%; aspect-ratio:9/16; object-fit:cover; border-bottom:1px solid var(--linha); }
.modelo h3{ font-family:var(--serif); font-size:18px; margin:12px 0 4px; font-weight:600; }
.modelo input{ display:none; }
.modelo .marca-sel{ font-size:13px; color:var(--suave); }
.modelo.on .marca-sel{ color:var(--terracota); font-weight:600; }

/* chave pix */
.pix-chave{ font-family:ui-monospace,Consolas,monospace; font-size:15px; background:var(--papel);
            border:1px dashed rgba(176,82,44,.5); border-radius:9px; padding:14px;
            word-break:break-all; margin:10px 0 14px; user-select:all; }

/* link do convite, na lista de convidados */
.link-convite{
  display:inline-flex; align-items:flex-start; gap:7px;
  text-decoration:none; color:var(--terracota); line-height:1.4;
}
.link-convite svg{ width:13px; height:13px; flex:none; margin-top:3px; opacity:.75; }
.link-convite span{ text-decoration:underline; text-underline-offset:2px; }
.link-convite:hover span{ color:var(--terracota-esc); }

/* player da música enviada */
.player{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.player audio{ flex:1 1 240px; min-width:0; height:38px; }
.player .arq{ font-size:13.5px; color:var(--suave); word-break:break-all; }

/* ajuste rápido de plano no admin */
.ajuste{ border:0; margin:0; padding:0; }
.ajuste summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
                 font-size:14px; font-weight:600; color:var(--terracota); }
.ajuste summary::-webkit-details-marker{ display:none; }
.ajuste summary::after{ content:"▾"; font-size:11px; }
.ajuste[open] summary::after{ content:"▴"; }
.ajuste .corpo{ margin-top:12px; padding:14px; background:var(--papel); border-radius:10px;
                display:grid; gap:10px; }
.ajuste .corpo label{ font-size:13px; font-weight:600; }
.ajuste .marcar{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; font-weight:400;
                 line-height:1.45; }
.ajuste .marcar input{ width:auto; margin-top:3px; flex:none; }

/* ============================================================
   RESPONSIVO — celular e tablet
   ============================================================ */

@media (max-width:860px){

  .env{ padding:0 16px; }

  /* topo compacto, sem quebrar em duas alturas */
  .topo .env{ height:58px; gap:10px; }
  .marca{ font-size:20px; }
  .topo nav{ gap:6px; flex-wrap:nowrap; }
  .topo .bt{ padding:8px 13px; font-size:13.5px; }

  /* menu do painel vira barra de abas deslizante */
  .painel{ gap:18px; padding:18px 0 48px; }
  .menu{
    display:flex; gap:6px; padding:7px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  .menu::-webkit-scrollbar{ display:none; }
  .menu a{ white-space:nowrap; flex:none; padding:9px 14px; font-size:14px; scroll-snap-align:center; }
  .menu hr{ display:none; }

  h1.titulo{ font-size:26px; }
  .painel-cx{ padding:20px 16px; }
  .cartao{ padding:20px 18px; }

  /* tabelas viram cartões empilhados */
  table.lista, table.lista tbody, table.lista tr, table.lista td{ display:block; width:100%; }
  table.lista thead{ display:none; }
  table.lista tr{
    border:1px solid var(--linha); border-radius:12px;
    padding:14px; margin-bottom:12px; background:#fff;
  }
  table.lista td{ border:0; padding:5px 0; }
  table.lista td[data-r]::before{
    content:attr(data-r); display:block; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.07em; color:var(--suave); margin-bottom:2px; font-weight:600;
  }
  table.lista td:empty{ display:none; }
  table.lista .mono{ font-size:12.5px; }

  /* botões de linha ocupam a largura, com alvo de toque confortável */
  .acoes-linha{ justify-content:stretch; gap:8px; margin-top:10px; }
  .acoes-linha > *{ flex:1 1 auto; }
  .acoes-linha form{ display:flex; }
  .acoes-linha .bt{ width:100%; padding:11px 12px; font-size:14px; }

  /* formulários mais largos ao toque */
  input[type=text], input[type=email], input[type=password], textarea, select{
    padding:13px; font-size:16px;   /* 16px evita o zoom automático do iOS */
  }
  .bt{ padding:12px 20px; }

  .secao{ padding:44px 0; }
  .heroi{ padding:52px 0 44px; }
  .planos, .modelos{ grid-template-columns:1fr; }
  .plano{ padding:22px 18px; }
  .passo{ padding-left:46px; }
}

@media (max-width:420px){
  .marca{ font-size:18px; }
  .topo .bt{ padding:7px 11px; font-size:13px; }
  .grade{ grid-template-columns:1fr; }
}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion:reduce){
  .bt{ transition:none; }
  .bt:hover{ transform:none; }
}