:root{
    --primary:#ff2d2d;      /* vermelho Malta */
    --bg:#0d0f12;
    --card:rgba(255,255,255,.08);
    --stroke:rgba(255,255,255,.12);
    --text:#e9eef6;

    --focus:rgba(255,45,45,.35);
    --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    --radius:18px;
  }

  /* Fundo - usa o background do tema "vitrine" */
  .section.bg-default{
    padding: 64px 0 92px;
  }

  .page-head{ text-align:center; margin-bottom: 28px; }
  .page-head h1{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; }
  .page-head p{ margin:0; }

  /* Cards */
  .contact-card{
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 3px solid rgb(231 13 13 / 22%);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
  }
  .contact-card h3{ margin: 0 0 14px; font-weight:700; }

  /* ======= CARD ESQUERDO NOVO (responsivo) ======= */
  .contacts-wrap{ text-align:left; }
  .contact-list{
    display:flex; flex-direction:column; gap:12px;
  }
  /* Cada item vira um "card botão" clicável */
  .contact-item{
    display:flex; align-items:flex-start; gap:12px;
    padding: 12px;
    background: rgba(255,255,255,.05);
    border:1px solid var(--stroke);
    border-radius: 14px;

    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .06s ease;
    word-break: break-word;
    hyphens: auto;
  }
  .contact-item:hover{
    background: rgba(255,255,255,.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    transform: translateY(-1px);
  }

  .contact-icon{
    width: 38px; height: 38px; min-width:38px;
    display:grid; place-items:center;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: var(--primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    font-size: 18px;
  }

  .contact-content{ flex:1; min-width: 0; }
  .contact-label{
    font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    margin-bottom: 2px;
  }
  .contact-value{
    line-height: 1.5;
  }

  /* Deixa o card esquerdo "grudado" no topo no desktop (opcional) */
  @media (min-width: 992px){
    .contacts-sticky{ position: sticky; top: 24px; }
  }

  /* ======= Form + labels flutuantes ======= */
  .rd-form{ text-align:left; }
  .form-wrap{ position:relative; margin-bottom:18px; }
  .form-input, textarea.form-input{
    width:100%;
        border: 3px solid rgb(231 13 13 / 22%);
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 14px 14px;
    outline:none;
    transition: border .2s ease, box-shadow .2s ease, background .2s ease;
    resize: vertical;

  }
  .form-input::placeholder, textarea.form-input::placeholder{ color: transparent; }
  .form-input:focus, textarea.form-input:focus{
    box-shadow: 0 0 0 6px var(--focus);
    background: rgba(255,255,255,.08);
  }
  .form-label{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    pointer-events:none; transition: all .18s ease; padding:0 6px;
  }
  .form-input:focus + .form-label,
  .form-input:not(:placeholder-shown) + .form-label,
  textarea.form-input:focus + .form-label,
  textarea.form-input:not(:placeholder-shown) + .form-label{
    top:-8px; transform:none; font-size:.75rem; color:var(--primary);
    background: var(--bg); border-radius:8px;
  }

  /* Botão */
  .button.button-primary{
    --btnh:48px;
    display:inline-flex; align-items:center; justify-content:center;
    height:var(--btnh); width:100%;
    border-radius:14px; border:1px solid rgba(0,0,0,.12);
    background: linear-gradient(180deg, var(--primary), #e11717);
    color:#fff; font-weight:700; letter-spacing:.2px;
    box-shadow: 0 8px 18px rgba(255,45,45,.35);
    transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
  }
  .button.button-primary:hover{ filter:brightness(1.03); box-shadow:0 10px 24px rgba(255,45,45,.42); }
  .button.button-primary:active{ transform:translateY(1px); }

  /* Mensagens Django */
  .messages{ list-style:none; padding:0; margin:0 0 16px; }
  .messages li{
    padding:12px 16px; border-radius:12px; margin-bottom:10px; font-weight:600;
    background: rgba(255,255,255,.06); border:1px solid var(--stroke); color:var(--text);
  }
  .messages li.success{ background:#dcfce7; border-color:#bbf7d0; color:#14532d; }
  .messages li.error{ background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }

  /* Loader */
  #form-loader{ display:none; margin-top:12px; color:var(--bs-heading-color); font-weight:700; }

  /* Mobile refinements */
  @media (max-width: 575.98px){
    .contact-card{ padding:20px; }
    .contact-icon{ width:34px; height:34px; min-width:34px; font-size:16px; }
  }

  /* Reordenar: no mobile o FORM vem primeiro (mais útil), contatos depois */
  @media (max-width: 991.98px){
    .col-lg-8{ order: 1; }
    .col-lg-4{ order: 2; }
  }

  
/*btn final*/
.botao-final {
    color: red;
    outline: none;
    border: none;
    font-size: 27px;
    padding: 0.6em 1em;
    position: relative;
    background: none;
    cursor: pointer;
}

.botao-final:active {
  transform: scale(.98);
  box-shadow: .1px .1px 2px red;
}

.botao-final span {
  position: absolute;
  background: red;
  transition: .5s;
  box-shadow: 1px 1px 20px red;
}

.botao-final span:nth-child(1) {
  top: 0;
  left: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(1) {
  height: 100%;
}

.botao-final span:nth-child(2) {
  top: 0;
  left: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(2) {
  width: 100%;
}

.botao-final span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(3) {
  height: 100%;
}

.botao-final span:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(4) {
  width: 100%;
}