/* ==========================================================================
   Turminha AMAI - camada 2: componentes
   Carregar DEPOIS de base.css (os tokens --ta-* vem de la) e ANTES de
   site.css. Ver o cabecalho de base.css para a ordem das tres camadas.

   Aqui fica o que nao pertence a uma secao so: os overrides de componente
   do Bootstrap, os icones, os cards de diferencial, as formas organicas, os
   botoes flutuantes (WhatsApp e voltar ao topo), o reveal e o campo isca.
   ========================================================================== */

/* --- Bootstrap: variaveis de componente ----------------------------------- */
/* .btn-primary NAO le --bs-primary: o Sass compila hexes literais dentro de
   --bs-btn-bg, entao cada componente precisa ser sobrescrito na mao. */

.btn {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 50rem;
    font-family: "Nunito", system-ui, sans-serif;
}

.btn-primary {
    --bs-btn-bg: var(--ta-red);
    --bs-btn-border-color: var(--ta-red);
    --bs-btn-hover-bg: var(--ta-red-600);
    --bs-btn-hover-border-color: var(--ta-red-600);
    --bs-btn-active-bg: var(--ta-red-700);
    --bs-btn-active-border-color: var(--ta-red-700);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--ta-red);
    --bs-btn-disabled-border-color: var(--ta-red);
}

.btn-azul {
    --bs-btn-bg: var(--ta-blue);
    --bs-btn-border-color: var(--ta-blue);
    --bs-btn-hover-bg: var(--ta-blue-700);
    --bs-btn-hover-border-color: var(--ta-blue-700);
    --bs-btn-active-bg: var(--ta-blue-700);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-contorno-claro {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .7);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--ta-blue-700);
    --bs-btn-hover-border-color: #fff;
}

.accordion {
    --bs-accordion-border-color: var(--ta-line);
    --bs-accordion-border-radius: 1rem;
    --bs-accordion-btn-padding-y: 1.15rem;
    --bs-accordion-btn-padding-x: 1.35rem;
    --bs-accordion-active-color: var(--ta-blue-700);
    --bs-accordion-active-bg: var(--ta-blue-050);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(18, 58, 133, .4);
    /* Os icones do accordion sao data-URI SVG: para mudar a cor do chevron e
       obrigatorio reescrever o data-URI inteiro, com %23 no lugar do #. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123A85'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23123A85'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
    font-family: "Fredoka", "Nunito", sans-serif;
    font-size: var(--ta-fs-h3);
    font-weight: 600;
}

.accordion-item { margin-bottom: .75rem; }

.form-control {
    --bs-border-color: var(--ta-line);
    padding: 1rem;
}

.form-control:focus {
    border-color: var(--ta-blue);
    box-shadow: 0 0 0 3px rgba(29, 97, 216, .2);
}

.offcanvas { --bs-offcanvas-width: 19rem; }

.modal { --bs-modal-border-radius: 1.25rem; }

/* --- Icones --------------------------------------------------------------- */
/* Sprite SVG inline substitui Font Awesome + Bootstrap Icons: ~4 KB no HTML
   contra ~400 KB de duas webfonts, para os 10 icones que o site usa. */

.ta-icone {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -.125em;
}

.ta-icone-md { width: 1.5rem; height: 1.5rem; }
.ta-icone-lg { width: 2rem; height: 2rem; }

/* --- Cartoes de diferencial ----------------------------------------------- */
/* Antes eram 5 blocos solidos usando .bg-warning/.bg-info com texto escuro -
   1,6:1 e 2,0:1. Agora: fundo tint claro + tinta escura + faixa colorida. */

.ta-diferencial {
    height: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--ta-line);
    background: #fff;
    border-top: 4px solid var(--ta-cor, var(--ta-red));
    transition: box-shadow .18s ease, transform .18s ease;
}

.ta-diferencial:hover { box-shadow: var(--ta-shadow-md); transform: translateY(-2px); }

.ta-diferencial h3 { color: var(--ta-tinta, var(--ta-red-700)); margin-bottom: .5rem; }

.ta-diferencial__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--ta-tint, var(--ta-red-050));
    color: var(--ta-tinta, var(--ta-red-700));
}

.ta-tema-vermelho { --ta-cor: var(--ta-red); --ta-tinta: var(--ta-red-700); --ta-tint: var(--ta-red-050); }
.ta-tema-azul     { --ta-cor: var(--ta-blue); --ta-tinta: var(--ta-blue-700); --ta-tint: var(--ta-blue-050); }
.ta-tema-verde    { --ta-cor: var(--ta-green-600); --ta-tinta: var(--ta-green-600); --ta-tint: var(--ta-green-050); }
.ta-tema-ambar    { --ta-cor: #F2A007; --ta-tinta: var(--ta-amber-800); --ta-tint: var(--ta-amber-050); }

/* --- Formas organicas ----------------------------------------------------- */
/* Ecoam as letras do logotipo, que sao manchas arredondadas sem contorno. */

.ta-blob {
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    overflow: hidden;
}

.ta-blob-alt { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; }

.ta-retrato {
    border-radius: 28%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
}

.ta-foto { object-fit: cover; width: 100%; height: 100%; }

/* --- Botao flutuante de WhatsApp ------------------------------------------ */
/* Substitui o widget JivoChat, que era script de terceiro e trazia o telefone
   hardcoded num quarto lugar do projeto. */

.ta-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.2rem;
    border-radius: 50rem;
    background: #25D366;
    color: #06331a;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--ta-shadow-md);
}

.ta-fab:hover { background: #1eb455; color: #06331a; }

.ta-topo {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 1035;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 0;
    background: var(--ta-blue-700);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ta-shadow-sm);
}

.ta-topo.is-visivel { display: inline-flex; }

/* --- Reveal --------------------------------------------------------------- */
/* Substitui WOW.js + Waypoints + animate.css. O gate `.js` e essencial: um
   script inline no <head> adiciona a classe, entao se o JS falhar nada fica
   invisivel - que era o risco de aplicar opacity:0 direto. */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .5s ease, transform .5s ease;
}

.js [data-reveal].is-visivel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Anti-spam ------------------------------------------------------------ */
/* Nao usa display:none nem visibility:hidden de proposito: parte dos bots
   ignora campos escondidos assim, e a isca deixaria de funcionar. */

.campo-isca {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}