/* ==========================================================================
   Turminha AMAI - folha de estilo do site
   Escrita sobre Bootstrap 5.3 (vendorizado em static/vendor/), sem build step.

   Regra de contraste desta base: o vermelho da marca (#EE021B) tem 4,21:1
   sobre o creme #FFF5F3, o que REPROVA em WCAG AA para texto normal. Por isso
   ele so aparece como PREENCHIMENTO (botoes, faixas, icones grandes) com texto
   branco por cima. Para texto e link vermelho use --ta-red-600 (6,25:1).
   Pelo mesmo motivo as cores semanticas do Bootstrap estao proibidas aqui:
   .text-warning (#ffc107) da 1,6:1 e .text-info (#0dcaf0) da 2,0:1.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* Marca. As duas cores saem do logotipo. */
    --ta-red: #EE021B;          /* preenchimento + texto branco   4,51:1 */
    --ta-red-600: #C4001A;      /* texto e link sobre claro       6,25:1 */
    --ta-red-700: #A80017;      /* enfase                         7,84:1 */
    --ta-red-050: #FFECEE;
    --ta-blue: #1D61D8;         /* preenchimento                  5,59:1 */
    --ta-blue-700: #123A85;     /* titulos, footer, faixa CTA    10,66:1 */
    --ta-blue-050: #E9F0FD;

    /* Acentos dos cartoes de diferencial */
    --ta-green-600: #167048;    /* 6,10:1 */
    --ta-green-050: #E6F4EC;
    --ta-amber-800: #7A4B00;    /* 6,74:1 sobre o proprio tint */
    --ta-amber-050: #FFF3DC;

    /* Neutros */
    --ta-ink: #2E3138;          /* corpo         13,02:1 */
    --ta-ink-muted: #5F646E;    /* secundario     5,94:1 */
    --ta-cream: #FFF5F3;
    --ta-line: #EADFDC;

    /* Sombras azuladas, nunca pretas: preto puro suja o creme */
    --ta-shadow-sm: 0 1px 2px rgba(18, 58, 133, .06), 0 2px 8px rgba(18, 58, 133, .06);
    --ta-shadow-md: 0 6px 24px rgba(18, 58, 133, .10);

    --ta-nav-h: 4.75rem;

    /* Escala tipografica fluida: dispensa media query por titulo */
    --ta-fs-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
    --ta-fs-h2: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
    --ta-fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    --ta-secao-y: clamp(3.5rem, 8vw, 7rem);
}

/* --- Bootstrap: variaveis globais ----------------------------------------- */
/* Em 5.3 .bg-primary/.text-primary/.link-primary leem estas. */

:root {
    --bs-primary: var(--ta-red);
    --bs-primary-rgb: 238, 2, 27;
    --bs-secondary: var(--ta-blue);
    --bs-secondary-rgb: 29, 97, 216;
    --bs-primary-bg-subtle: var(--ta-red-050);
    --bs-primary-border-subtle: #F8B9C0;
    --bs-primary-text-emphasis: var(--ta-red-700);

    --bs-body-color: var(--ta-ink);
    --bs-body-color-rgb: 46, 49, 56;
    --bs-body-bg: #fff;
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.7;

    --bs-heading-color: var(--ta-blue-700);
    --bs-link-color-rgb: 196, 0, 26;
    --bs-link-hover-color-rgb: 168, 0, 23;

    --bs-border-color: var(--ta-line);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .625rem;
    --bs-border-radius-lg: 1.5rem;
    --bs-border-radius-xl: 2rem;

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-color: rgba(18, 58, 133, .55);
}

/* --- Base ----------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: "Fredoka", "Nunito", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
}

h1, .h1 { font-size: var(--ta-fs-h1); }
h2, .h2 { font-size: var(--ta-fs-h2); }
h3, .h3 { font-size: var(--ta-fs-h3); }

/* Medida de linha. O site antigo usava max-width:80%, o que dava ~140
   caracteres por linha em desktop - praticamente ilegivel. */
.ta-medida { max-width: 65ch; }
.ta-medida-curta { max-width: 52ch; }

/* Toda ancora aterrissava por baixo do header fixo. */
:target,
section[id],
div[id] {
    scroll-margin-top: calc(var(--ta-nav-h) + 1rem);
}

.ta-secao { padding-block: var(--ta-secao-y); }
.ta-creme { background: var(--ta-cream); }

/* --- Foco ----------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--ta-blue-700);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sobre o vermelho o anel azul so daria 2,4:1; anel escuro + halo branco. */
.btn-primary:focus-visible,
.ta-fab:focus-visible {
    outline-color: var(--ta-ink);
    box-shadow: 0 0 0 2px #fff;
}

.ta-skip {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1090;
    padding: .75rem 1.25rem;
    border-radius: 50rem;
    background: var(--ta-blue-700);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* --- 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; }

/* --- Header --------------------------------------------------------------- */

.ta-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ta-line);
    min-height: var(--ta-nav-h);
}

.ta-header .navbar-brand img {
    height: 2.75rem;
    width: auto;
}

.ta-header .nav-link {
    font-weight: 700;
    color: var(--ta-ink);
    padding-inline: .9rem;
}

.ta-header .nav-link:hover,
.ta-header .nav-link:focus-visible {
    color: var(--ta-red-600);
}

.navbar-toggler { border-color: var(--ta-line); }

/* --- Hero ----------------------------------------------------------------- */
/* O h1 fica FORA do carrossel, num painel solido. Antes havia um <h1> por
   slide (4 no total) e o texto ficava sobre a foto com overlay preto de 20%,
   que nao garante contraste nenhum. */

.ta-hero { background: var(--ta-blue-700); }

.ta-hero__painel {
    padding: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
}

.ta-hero__painel h1 { color: #fff; }

.ta-hero__selo {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 50rem;
    background: var(--ta-red);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ta-hero__midia {
    position: relative;
    min-height: 20rem;
    height: 100%;
}

.ta-hero__midia .carousel,
.ta-hero__midia .carousel-inner,
.ta-hero__midia .carousel-item {
    height: 100%;
}

.ta-hero__midia img {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    object-fit: cover;
}

/* A frase do slide fica numa faixa solida, nao solta sobre a foto. */
.ta-hero__frase {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem;
    background: rgba(18, 58, 133, .88);
    color: #fff;
    margin: 0;
    border: 0;
}

.ta-hero__frase p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.ta-hero__frase cite {
    display: block;
    margin-top: .35rem;
    font-size: .875rem;
    font-style: normal;
    opacity: .85;
}

@media (min-width: 992px) {
    .ta-hero__midia { min-height: 32rem; }
}

/* --- 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%; }

/* --- Principios ----------------------------------------------------------- */

.ta-principio__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .75rem;
    border-radius: 50%;
    background: var(--ta-blue-050);
    color: var(--ta-blue-700);
    font-size: .8rem;
    font-weight: 700;
    flex: none;
}

.ta-principio__imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--bs-border-radius);
    background: var(--ta-cream);
}

.ta-versiculo {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ta-red);
    color: var(--ta-blue-700);
    font-weight: 600;
}

/* --- Turmas --------------------------------------------------------------- */

.ta-turma {
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--ta-line);
    background: #fff;
}

.ta-turma h3 { margin-bottom: .25rem; }

.ta-turma__idade {
    display: inline-block;
    padding: .2rem .75rem;
    border-radius: 50rem;
    background: var(--ta-red-050);
    color: var(--ta-red-700);
    font-size: .85rem;
    font-weight: 700;
}

.ta-horarios {
    margin: 1.25rem 0 0;
    font-size: .95rem;
}

.ta-horarios div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-top: 1px solid var(--ta-line);
}

.ta-horarios dt { font-weight: 600; color: var(--ta-ink-muted); }
.ta-horarios dd { margin: 0; font-weight: 700; }

/* --- Faixa de matricula --------------------------------------------------- */

.ta-cta { background: var(--ta-blue-700); color: #fff; }
.ta-cta h2 { color: #fff; }
.ta-cta .form-control { border: 0; }
.ta-cta label { color: var(--ta-ink); }

/* --- Galeria -------------------------------------------------------------- */
/* Deixou de ser carrossel: 32 fotos num Owl sem lazy-loading eram o maior
   peso da pagina. Agora e grid, tudo lazy, com lightbox num modal so. */

.ta-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.ta-galeria__item {
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background: var(--ta-cream);
    aspect-ratio: 1;
    cursor: zoom-in;
}

.ta-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.ta-galeria__item:hover img,
.ta-galeria__item:focus-visible img { transform: scale(1.06); }

#lightbox .modal-content { background: transparent; border: 0; }
#lightbox img { width: 100%; height: auto; border-radius: var(--bs-border-radius); }

.ta-lightbox__nav {
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ta-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Professoras ---------------------------------------------------------- */

.ta-professora { text-align: center; }
.ta-professora h3 { margin: 1rem 0 .1rem; font-size: 1.15rem; }
.ta-professora p { margin: 0; color: var(--ta-ink-muted); font-weight: 600; }

/* --- Depoimentos ---------------------------------------------------------- */

.ta-depoimento {
    height: 100%;
    margin: 0;
    padding: 1.75rem;
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    border: 1px solid var(--ta-line);
}

.ta-depoimento__aspas { color: var(--ta-red); margin-bottom: .75rem; }
.ta-depoimento p { margin: 0; }

/* --- Contato -------------------------------------------------------------- */

.ta-contato-item {
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    border: 1px solid var(--ta-line);
}

.ta-contato-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.ta-contato-item a { font-weight: 700; text-decoration: none; }
.ta-contato-item a:hover { text-decoration: underline; }

/* --- Footer --------------------------------------------------------------- */
/* Escuro de proposito: no site antigo os titulos eram .text-white sobre
   .bg-white, ou seja, branco no branco - invisiveis. */

.ta-footer {
    background: var(--ta-blue-700);
    color: rgba(255, 255, 255, .85);
}

.ta-footer h2 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.ta-footer a { color: #fff; text-decoration: none; }
.ta-footer a:hover, .ta-footer a:focus-visible { text-decoration: underline; }
.ta-footer img { height: 3rem; width: auto; }

.ta-footer__nav a { display: block; padding: .25rem 0; font-weight: 600; }

.ta-footer__creditos {
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .9rem;
}

.ta-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
}

.ta-social:hover { background: #fff; color: var(--ta-blue-700); }

/* --- 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;
}