/*
Theme Name:   Colégio Oliveira Silva — Editorial
Theme URI:    https://colegiooliveirasilva.com
Description:  Child theme do Divi para o Colégio Oliveira Silva. Sistema de design editorial: tipografia fluida, tokens de cor, componentes, animações e correções de acessibilidade. Não altera nenhum conteúdo do site.
Author:       B2G
Template:     Divi
Version:      1.0.0
Text Domain:  oliveira-silva-child
*/

/* =========================================================================
   00 · TOKENS
   ========================================================================= */
:root{
  /* Cor — amostrada pixel a pixel do arquivo do logo:
     #244854 ardósia (monograma S / "SILVA") · #B4241C carmim (anel do selo)
     #C0441C vermelhão ("OLIVEIRA"). Mesmos tokens da home editorial. */
  --cos-ink:        #14242B;
  --cos-ink-soft:   #4A6B76;
  --cos-ink-mute:   #7A929B;
  --cos-red:        #B4241C;
  --cos-red-deep:   #8C1A14;
  --cos-ochre:      #C0441C;
  --cos-ochre-soft: #EFE4D2;
  --cos-sage:       #244854;
  --cos-paper:      #F5F0E6;
  --cos-paper-2:    #FCFAF5;
  --cos-line:       rgba(20,36,43,.14);
  --cos-line-soft:  rgba(20,36,43,.07);

  /* Tipografia — o mesmo par da home */
  --cos-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --cos-text:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --cos-t-hero:  clamp(2.1rem, 1.1rem + 3.2vw, 4.4rem);
  --cos-t-h1:    clamp(2.1rem, 1.3rem + 3.6vw, 4.2rem);
  --cos-t-h2:    clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem);
  --cos-t-h3:    clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  --cos-t-lead:  clamp(1.075rem, 1rem + .45vw, 1.35rem);
  --cos-t-body:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --cos-t-small: .9375rem;
  --cos-t-eyebrow: .78rem;

  /* Ritmo vertical */
  --cos-s-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --cos-s-block:   clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --cos-gutter:    clamp(1.25rem, .6rem + 2.4vw, 3rem);

  /* Superfície */
  --cos-radius:    18px;
  --cos-radius-lg: 28px;
  --cos-shadow:    0 1px 2px rgba(15,27,42,.04), 0 8px 24px -12px rgba(15,27,42,.14);
  --cos-shadow-lg: 0 2px 4px rgba(15,27,42,.04), 0 28px 60px -24px rgba(15,27,42,.28);

  /* Movimento */
  --cos-ease:    cubic-bezier(.16,1,.3,1);
  --cos-ease-io: cubic-bezier(.65,0,.35,1);

  --cos-header-h: 96px;
}
@media (max-width: 980px){ :root{ --cos-header-h: 76px; } }

/* =========================================================================
   01 · BASE / TIPOGRAFIA
   Substitui as 6 famílias que o Divi acumulou (Acme, Alatsi, Coustard,
   ABeeZee, Rubik, Open Sans) pelo par editorial: Instrument Serif + Instrument Sans.
   ========================================================================= */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body, #page-container, .et_pb_module, .et_pb_text, .et_pb_blurb_description,
.et_pb_slide_content, input, textarea, select, button{
  font-family: var(--cos-text) !important;
  font-size: var(--cos-t-body);
  line-height: 1.68;
  color: var(--cos-ink-soft);
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{ background: var(--cos-paper); overflow-x: clip; }

h1,h2,h3,h4,h5,
.et_pb_slide_title, .et_pb_module_header, .et_pb_blurb_container h4,
.et_pb_toggle_title, .et_pb_promo_title{
  font-family: var(--cos-display) !important;
  color: var(--cos-ink) !important;
  /* Instrument Serif tem um peso só — o contraste vem do tamanho, não do bold */
  font-weight: 400 !important;
  line-height: 1.02;
  letter-spacing: -.024em;
  text-wrap: balance;
  padding-bottom: 0;
}
h1, .et_pb_slide_title{ font-size: var(--cos-t-h1); }
h2, .et_pb_module_header{ font-size: var(--cos-t-h2); }
h3{ font-size: var(--cos-t-h3); letter-spacing:-.02em; }
h4{ font-size: 1.15rem; letter-spacing:-.015em; }

p{ margin-bottom: 1.15em; max-width: 68ch; }
/* Texto justificado do Divi cria "rios" brancos — alinhamos à esquerda. */
.et_pb_text_align_justified{ text-align: left !important; }

a{ color: var(--cos-red); text-decoration: none; transition: color .25s var(--cos-ease); }
a:hover{ color: var(--cos-red-deep); }

strong,b{ font-weight:600; color: var(--cos-ink); }
::selection{ background: var(--cos-ochre); color: var(--cos-ink); }

/* Eyebrow — os rótulos "SOBRE O INÍCIO", "NOSSA MISSÃO", "DEPOIMENTOS" */
.cos-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--cos-text) !important;
  font-size: var(--cos-t-eyebrow); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--cos-red) !important;
  margin-bottom: .9rem;
}
.cos-eyebrow::before{
  content:""; width:28px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--cos-red), var(--cos-ochre));
}

/* =========================================================================
   02 · ACESSIBILIDADE
   ========================================================================= */
.cos-skip{
  position:absolute; left:-9999px; top:0; z-index:100000;
  background:var(--cos-ink); color:#fff; padding:.85rem 1.4rem;
  border-radius:0 0 12px 0; font-weight:600;
}
.cos-skip:focus{ left:0; color:#fff; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline: 3px solid var(--cos-ochre);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Alvos de toque — 25 elementos estavam abaixo de 44px */
#top-menu a, #et-info a, .et_pb_social_media_follow li a,
.et-pb-slider-arrows a, .et-pb-controllers a, .et_pb_button{
  min-height: 44px;
  display: inline-flex; align-items:center; justify-content:center;
}
.et-pb-controllers a{ min-width:44px; }

/* =========================================================================
   03 · HEADER
   Corrige a sobreposição logo x menu (logo ocupava x=105→223, menu começava
   em x=131) e transforma a barra num header fixo translúcido.
   ========================================================================= */
#main-header{
  background: rgba(252,250,246,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--cos-line-soft);
  will-change: transform;
  transition: transform .45s var(--cos-ease), background .4s var(--cos-ease),
              box-shadow .4s var(--cos-ease), border-color .4s var(--cos-ease);
}
#main-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(1rem, 3vw, 3rem);
  width:min(1360px, 92vw); max-width:none;
  padding-inline: 0;
}
#main-header .logo_container{
  position: static !important;
  width:auto !important; height:auto !important;
  flex: 0 0 auto;
  padding: 14px 0;
}
#logo{
  max-height: 58px !important; width:auto !important;
  margin:0 !important; transition: max-height .4s var(--cos-ease);
  /* o PNG do logo tem fundo branco; o multiply o dissolve no papel do header */
  mix-blend-mode: multiply;
}
#et-top-navigation{
  padding: 0 !important; margin:0 !important;
  float:none !important;
  display:flex; align-items:center; gap:1rem;
  flex: 0 1 auto;
}
#top-menu-nav{ float:none !important; }
#top-menu{ display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(.25rem,1.1vw,1.1rem); }
#top-menu li{ padding-right:0 !important; }
#top-menu li a{
  font-family: var(--cos-text) !important;
  font-size: .945rem !important; font-weight:500;
  color: var(--cos-ink) !important;
  letter-spacing:-.01em; white-space:nowrap;
  padding: .55rem .7rem !important;
  border-radius: 10px;
  opacity:1 !important;
  transition: background .25s var(--cos-ease), color .25s var(--cos-ease);
}
#top-menu li a:hover{ background: var(--cos-paper-2); color: var(--cos-red) !important; }
#top-menu li.current-menu-item > a{ color: var(--cos-red) !important; font-weight:600; }
#top-menu li a::after{ display:none !important; }

/* Barra superior (Início · Biblioteca Virtual · Contato) */
#top-header{
  background: var(--cos-ink) !important;
  padding: .35rem 0;
  font-size: .82rem; letter-spacing:.02em;
}
#top-header a, #et-secondary-menu a{ color: rgba(255,255,255,.82) !important; font-weight:500; }
#top-header a:hover{ color:#fff !important; }

/* Estado rolado */
#main-header.cos-scrolled{
  background: rgba(252,250,246,.94) !important;
  box-shadow: 0 1px 0 var(--cos-line), 0 14px 34px -22px rgba(15,27,42,.35) !important;
}
#main-header.cos-scrolled #logo{ max-height: 46px !important; }
body.cos-nav-hidden #main-header{ transform: translateY(-100%); }

/* Ponto de quebra do menu sobe para 1180px: nunca mais sobrepõe o logo */
@media (max-width: 1180px){
  #et_top_search, #top-menu-nav{ display:none !important; }
  #et_mobile_nav_menu{ display:block !important; float:none !important; margin:0 !important; }
  .mobile_menu_bar{ padding-bottom:0 !important; }
  .mobile_menu_bar::before{ color: var(--cos-ink) !important; top:0; }
}
.et_mobile_menu{
  border-top: 3px solid var(--cos-red) !important;
  background: var(--cos-paper) !important;
  box-shadow: var(--cos-shadow-lg) !important;
  border-radius: 0 0 var(--cos-radius) var(--cos-radius);
  padding: .6rem !important;
}
.et_mobile_menu li a{
  font-family: var(--cos-text) !important;
  font-size: 1.05rem !important; font-weight:500;
  color: var(--cos-ink) !important;
  padding: .95rem 1rem !important;
  border-bottom: 1px solid var(--cos-line-soft) !important;
  border-radius: 10px;
}
.et_mobile_menu li:last-child a{ border-bottom:none !important; }
.et_mobile_menu li a:hover{ background: var(--cos-paper-2) !important; color: var(--cos-red) !important; opacity:1; }

/* O Divi já calcula o padding-top do #page-container para o header fixo —
   não sobrescrevemos, só garantimos o offset das âncoras. */
:target{ scroll-margin-top: 130px; }

/* =========================================================================
   04 · HERO / SLIDER
   O título era branco sobre foto clara — sumia no mobile. Overlay + escala.
   ========================================================================= */
.et_pb_slide{ position:relative; }
.et_pb_slide_overlay_container{ display:none; }

/* Overlay duplo: garante contraste em qualquer foto */
.et_pb_slide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,18,30,.88) 0%, rgba(10,18,30,.55) 38%, rgba(10,18,30,.18) 70%, rgba(10,18,30,.35) 100%),
    linear-gradient(105deg, rgba(10,18,30,.72) 0%, rgba(10,18,30,.25) 55%, transparent 80%);
}
.et_pb_slide_description{ position:relative; z-index:2; }

/* Ken Burns lento no fundo */
.et_pb_slide .et_parallax_bg, .et_pb_slide_image img{
  animation: cosKen 22s var(--cos-ease-io) infinite alternate;
}
@keyframes cosKen{ from{ transform:scale(1) } to{ transform:scale(1.09) } }

/* Altura cinematográfica e centralização vertical */
.et_pb_slider, .et_pb_slider .et_pb_slides, .et_pb_slider .et_pb_slide{
  min-height: clamp(420px, 58vh, 640px) !important;
}
.et_pb_slider .et_pb_slide{ display:flex !important; align-items:center; }
/* Usamos o container do Divi para a medida — mexer na largura da description
   quebra o layout dos slides que têm imagem. */
.et_pb_slider .et_pb_container{
  width: min(1320px, 92vw) !important; max-width:none !important; margin-inline:auto !important;
}
.et_pb_slider .et_pb_slide_description{
  padding: clamp(1.75rem,3.5vw,3rem) 0 !important;
  width:auto !important; max-width:none !important; margin:0 !important;
  text-align:left !important;
}
.et_pb_slide_title, .et_pb_slider h2.et_pb_slide_title, .et_pb_slide_title a{
  font-family: var(--cos-display) !important;
  font-size: var(--cos-t-hero) !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  color: #fff !important;
  text-shadow: 0 2px 40px rgba(0,0,0,.45) !important;
  max-width: 22ch !important;
  margin-bottom: .6rem !important;
  text-transform: none !important;
  /* sem isto, "AGROPECUÁRIA" quebra no meio da palavra */
  overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important;
}
.et_pb_slide_content, .et_pb_slide_content p{
  font-size: var(--cos-t-lead) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.88) !important;
  max-width: 52ch !important;
  text-align:left !important;
  text-shadow: 0 1px 24px rgba(0,0,0,.4);
  font-weight: 400 !important;
}
.et_pb_slide_with_image .et_pb_slide_title,
.et_pb_slide_with_image .et_pb_slide_content{ max-width:none !important; }

/* O Divi grava cor e alinhamento por módulo, com !important, dentro de media
   queries — daí o #page-container: só assim o sistema vence no celular, onde
   o título estava saindo azul (#0942A3) sobre foto escura. */
#page-container .et_pb_slider .et_pb_slide .et_pb_slide_title,
#page-container .et_pb_slider .et_pb_slide .et_pb_slide_title a{ color:#fff !important; }
#page-container .et_pb_slider .et_pb_slide .et_pb_slide_content,
#page-container .et_pb_slider .et_pb_slide .et_pb_slide_content *{ color: rgba(255,255,255,.9) !important; }
#page-container .et_pb_slider .et_pb_slide_description{ text-align:left !important; }
#page-container .et_pb_slider .et_pb_slides,
#page-container .et_pb_slider .et_pb_slide{ height:auto !important; }

/* No celular o Divi deixa a descrição do slide ativo em opacity:0 — era esta
   a razão do herói aparecer como uma foto muda no telefone. */
#page-container .et_pb_slider .et-pb-active-slide .et_pb_slide_description{ opacity:1 !important; }

#page-container .et_pb_slider .et_pb_slide_description .et_pb_button{
  background:#fff !important; color: var(--cos-ink) !important; border:none !important;
}
#page-container .et_pb_slider .et_pb_slide_description .et_pb_button:hover{
  background: var(--cos-ochre) !important; color: var(--cos-ink) !important;
}

@media (max-width: 980px){
  #page-container .et_pb_slider,
  #page-container .et_pb_slider .et_pb_slides,
  #page-container .et_pb_slider .et_pb_slide{ min-height: 74vh !important; }
  #page-container .et_pb_slider .et_pb_slide .et_pb_slide_title{
    font-size: clamp(1.9rem, 7.4vw, 2.7rem) !important; max-width:none !important;
  }
  #page-container .et_pb_slider .et_pb_slide .et_pb_slide_content,
  #page-container .et_pb_slider .et_pb_slide .et_pb_slide_content *{
    font-size: 1rem !important; line-height:1.5 !important;
  }
  #page-container .et_pb_slider .et_pb_slide_description{ padding: 2.5rem 0 3.5rem !important; }
  /* No telefone o gesto de arrastar já navega; as setas só cobriam o texto. */
  .et-pb-slider-arrows{ display:none !important; }
  .et-pb-controllers{ bottom: 16px !important; }
}
.et_pb_slider .et_pb_slide_description .et_pb_button{ margin-top: 1.9rem; }

/* Setas e bullets */
.et-pb-slider-arrows a{
  width:56px; height:56px; border-radius:50%;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color:#fff !important; opacity:1 !important;
  transition: background .3s var(--cos-ease), transform .3s var(--cos-ease);
}
.et-pb-slider-arrows a:hover{ background: rgba(255,255,255,.26) !important; transform: scale(1.08); }
.et-pb-slider-arrows .et-pb-arrow-prev{ left: 18px !important; }
.et-pb-slider-arrows .et-pb-arrow-next{ right: 18px !important; }
.et-pb-controllers{ bottom: 28px !important; z-index:5; }
.et-pb-controllers a{
  width:auto !important; height:auto !important; padding:12px 6px !important;
  background:none !important; text-indent:-9999px; position:relative;
}
.et-pb-controllers a::after{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:28px; height:3px; border-radius:3px;
  background: rgba(255,255,255,.35);
  transition: background .35s var(--cos-ease), width .35s var(--cos-ease);
}
.et-pb-controllers .et-pb-active-control::after{ background:#fff; width:46px; }

/* Botão de pausa do slider (injetado pelo JS) */
.cos-slider-pause{
  position:absolute; right:22px; bottom:26px; z-index:6;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; line-height:1;
}
.cos-slider-pause:hover{ background:rgba(255,255,255,.28); }

/* Hero de página interna */
.et_pb_fullwidth_header .et_pb_fullwidth_header_container{ text-align:left; }
.et_pb_fullwidth_header h1.et_pb_module_header{
  font-size: var(--cos-t-h1) !important; color:#fff !important;
}

/* =========================================================================
   05 · SEÇÕES E RITMO
   Uma seção tinha 2951px de altura para 841 caracteres. Normalizamos.
   ========================================================================= */
.et_pb_section{ padding: var(--cos-s-section) 0 !important; position:relative; }
.et_pb_section.et_pb_fullwidth_section{ padding:0 !important; }
.et_pb_row{
  width: min(1240px, 92vw) !important;
  max-width:none !important;
  padding: 0 !important;
}
.et_pb_row_inner{ width:100% !important; }
.et_pb_column{ margin-bottom:0 !important; }
.et_pb_row .et_pb_column:not(:last-child){ margin-right: var(--cos-gutter) !important; }
@media (max-width: 980px){
  .et_pb_row .et_pb_column:not(:last-child){ margin-right:0 !important; margin-bottom: var(--cos-s-block) !important; }
}
.et_pb_text{ margin-bottom: 1.25rem; }

/* Alternância de fundo — ritmo editorial sem tocar no conteúdo */
.et_pb_section:nth-of-type(even){ background: var(--cos-paper-2) !important; }
.et_pb_section.cos-dark{ background: var(--cos-ink) !important; }
.cos-dark, .cos-dark p, .cos-dark li{ color: rgba(255,255,255,.78) !important; }
.cos-dark h1, .cos-dark h2, .cos-dark h3, .cos-dark h4, .cos-dark .et_pb_module_header{ color:#fff !important; }

/* Textura de papel — toque "premium" com custo zero de rede.
   Sem mix-blend-mode: no celular ele força repaint da seção inteira a cada
   scroll. Desligada abaixo de 980px pelo mesmo motivo. */
.et_pb_section::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.et_pb_section > *{ position:relative; z-index:1; }
.et_pb_fullwidth_section::after{ display:none; }
@media (max-width: 980px){
  .et_pb_section::after{ display:none; }
  .et_pb_slide .et_parallax_bg, .et_pb_slide_image img{ animation:none !important; }
}

/* =========================================================================
   06 · BOTÕES
   ========================================================================= */
/* Forma e tipografia dos botões: isto é do sistema.
   A COR, não. Cada botão do Divi já traz o seu par fundo/texto, e
   repintar só o fundo produzia texto carmim sobre fundo carmim quando o
   botão original era branco com letra colorida. Deixamos a cor em paz e
   só garantimos contraste onde o par colapsa (mais abaixo). */
.et_pb_button, .et_pb_button:hover,
input[type=submit], .wpcf7 input[type=submit], button[type=submit]{
  font-family: var(--cos-text) !important;
  font-size: 1rem !important; font-weight:600 !important;
  letter-spacing:-.01em !important;
  padding: .95rem 1.9rem !important;
  border-radius: 999px !important;
  position:relative;
  transition: transform .35s var(--cos-ease), box-shadow .35s var(--cos-ease);
  cursor:pointer;
}

/* Os botões que não têm cor própria seguem o padrão da marca. */
input[type=submit], .wpcf7 input[type=submit], button[type=submit]{
  border:none !important;
  background: var(--cos-red) !important;
  color: var(--cos-paper-2) !important;
}
.et_pb_button::after{ display:none !important; }
.et_pb_button > .cos-sheen{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .8s var(--cos-ease);
  pointer-events:none;
}
.et_pb_button:hover{
  transform: translateY(-2px);
  padding: .95rem 1.9rem !important;
}
.et_pb_button:hover > .cos-sheen{ transform: translateX(120%); }

/* Variante clara: dentro de seção escura ou do slider */
.cos-dark .et_pb_button, .et_pb_slide_description .et_pb_button{
  background: #fff !important; color: var(--cos-ink) !important;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.6);
}
.cos-dark .et_pb_button:hover, .et_pb_slide_description .et_pb_button:hover{
  background: var(--cos-ochre) !important; color: var(--cos-ink) !important;
}

/* =========================================================================
   07 · CARDS / BLURBS
   ========================================================================= */
.et_pb_blurb{
  background:#fff;
  border: 1px solid var(--cos-line-soft);
  border-radius: var(--cos-radius);
  padding: clamp(1.5rem, 2.2vw, 2.25rem) !important;
  box-shadow: var(--cos-shadow);
  height:100%;
  transition: transform .5s var(--cos-ease), box-shadow .5s var(--cos-ease), border-color .5s var(--cos-ease);
  position:relative; overflow:hidden;
}
.et_pb_blurb::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background: linear-gradient(90deg, var(--cos-red), var(--cos-ochre));
  transition: width .6s var(--cos-ease);
}
.et_pb_blurb:hover{
  transform: translateY(-6px);
  box-shadow: var(--cos-shadow-lg);
  border-color: transparent;
}
.et_pb_blurb:hover::before{ width:100%; }
.et_pb_blurb h4, .et_pb_blurb .et_pb_module_header{
  font-size: 1.22rem !important; margin-bottom:.6rem !important;
}
.et_pb_blurb_description{ font-size: 1rem !important; color: var(--cos-ink-soft) !important; }
.et_pb_main_blurb_image{ margin-bottom: 1.1rem !important; }
.et_pb_blurb .et-pb-icon{
  width:60px; height:60px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(140deg, var(--cos-ochre-soft), #fff);
  color: var(--cos-red) !important;
  font-size: 30px !important;
  border: 1px solid var(--cos-line-soft);
}

/* Normalização: os blocos de contato vinham em cinza #6B6B6B, verde-limão
   #7CDA24 e azul #2B76DF, cada um por conta própria. Entram todos no sistema
   como cartão branco, diferenciados só pela faixa de topo. */
.et_pb_blurb[class*="et_pb_blurb_"]{ background:#fff !important; }
.et_pb_blurb[class*="et_pb_blurb_"] h4,
.et_pb_blurb[class*="et_pb_blurb_"] .et_pb_module_header{
  color: var(--cos-ink) !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  font-size: 1.22rem !important;
}
.et_pb_blurb[class*="et_pb_blurb_"] .et_pb_blurb_description,
.et_pb_blurb[class*="et_pb_blurb_"] .et_pb_blurb_description *{ color: var(--cos-ink-soft) !important; }
.et_pb_blurb[class*="et_pb_blurb_"] a{ color: var(--cos-red) !important; font-weight:600; }

/* Faixa de topo sempre visível nos três cartões de contato da home */
.et_pb_blurb_0::before{ background: linear-gradient(90deg, var(--cos-ink), var(--cos-ink-mute)) !important; width:100% !important; }
.et_pb_blurb_1::before{ background:#25D366 !important; width:100% !important; }
.et_pb_blurb_2::before{ background: linear-gradient(90deg, var(--cos-red), var(--cos-ochre)) !important; width:100% !important; }

/* =========================================================================
   08 · DEPOIMENTOS — tratamento editorial
   ========================================================================= */
.et_pb_testimonial{
  background:#fff !important;
  border:1px solid var(--cos-line-soft) !important;
  border-radius: var(--cos-radius-lg) !important;
  padding: clamp(2rem,3vw,3rem) !important;
  box-shadow: var(--cos-shadow);
  position:relative;
}
.et_pb_testimonial::before{
  content:"\201C";
  font-family: var(--cos-display); font-size: 6rem; line-height:1;
  color: var(--cos-ochre); opacity:.42;
  position:absolute; top:.35rem; left:1.4rem;
}
.et_pb_testimonial_description, .et_pb_testimonial p{
  font-family: var(--cos-display) !important;
  font-size: clamp(1.15rem,.95rem + .8vw,1.6rem) !important;
  line-height: 1.42 !important;
  color: var(--cos-ink) !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing:-.018em;
  position:relative; z-index:1;
  max-width:none;
}
.et_pb_testimonial_author{
  font-family: var(--cos-text) !important;
  font-size: .9rem !important; font-weight:600 !important;
  color: var(--cos-red) !important; font-style:normal !important;
  letter-spacing:.04em; text-transform:uppercase;
  margin-top: 1.2rem !important;
}
.et_pb_testimonial_meta{ color: var(--cos-ink-mute) !important; font-size:.85rem !important; }

/* =========================================================================
   09 · IMAGENS E GALERIAS
   ========================================================================= */
.et_pb_image, .et_pb_image .et_pb_image_wrap{
  border-radius: var(--cos-radius); overflow:hidden; display:block;
}
.et_pb_image img, .et_pb_gallery_image img{
  border-radius: var(--cos-radius);
  transition: transform .9s var(--cos-ease), filter .6s var(--cos-ease);
  will-change: transform;
}
.et_pb_image:hover img{ transform: scale(1.045); }

.et_pb_gallery_items{
  display:grid !important; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,240px),1fr));
}
.et_pb_gallery_item{ width:auto !important; margin:0 !important; float:none !important; }
.et_pb_gallery_item .et_pb_gallery_image{
  border-radius: var(--cos-radius); overflow:hidden;
  aspect-ratio: 4/3; box-shadow: var(--cos-shadow);
}
.et_pb_gallery_item .et_pb_gallery_image img{ width:100%; height:100%; object-fit:cover; }
.et_pb_gallery_item:hover .et_pb_gallery_image{ box-shadow: var(--cos-shadow-lg); }
.et_overlay{ border-radius: var(--cos-radius) !important; background: rgba(15,27,42,.42) !important; border:none !important; }

/* =========================================================================
   10 · FORMULÁRIOS (Contact Form 7 + login Moodle)
   ========================================================================= */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel],
.wpcf7 textarea, .wpcf7 select,
input[type=text], input[type=password], input[type=email], input[type=search], textarea{
  width:100%;
  font-family: var(--cos-text) !important;
  font-size: 1rem !important;
  color: var(--cos-ink) !important;
  background:#fff !important;
  border: 1.5px solid var(--cos-line) !important;
  border-radius: 12px !important;
  padding: .9rem 1.1rem !important;
  min-height: 52px;
  transition: border-color .25s var(--cos-ease), box-shadow .25s var(--cos-ease);
}
input:focus, textarea:focus{
  border-color: var(--cos-red) !important;
  box-shadow: 0 0 0 4px rgba(183,32,37,.12) !important;
  outline:none;
}
::placeholder{ color: var(--cos-ink-mute); opacity:1; }
.wpcf7 label{ display:block; font-weight:600; color:var(--cos-ink); font-size:.92rem; margin-bottom:.4rem; }
.wpcf7 p{ margin-bottom:1.1rem; max-width:none; }

/* Caixa do Moodle — estava flutuando solta por cima do conteúdo */
.cos-moodle-box{
  position: static !important;
  background:#fff;
  border:1px solid var(--cos-line-soft);
  border-radius: var(--cos-radius-lg);
  box-shadow: var(--cos-shadow-lg);
  padding: clamp(1.5rem,2.5vw,2.25rem) !important;
  max-width: 460px;
  margin-inline: auto;
}
.cos-moodle-box input[type=submit]{ width:100%; }

/* =========================================================================
   11 · RODAPÉ
   ========================================================================= */
#main-footer{ background: var(--cos-ink) !important; }
#footer-widgets{ padding: var(--cos-s-section) 0 3rem !important; }
#footer-widgets .footer-widget, #footer-widgets .footer-widget li,
#main-footer .et_pb_widget div, #main-footer p{ color: rgba(255,255,255,.72) !important; }
#footer-widgets h4, #main-footer h4.title{
  font-family: var(--cos-display) !important; color:#fff !important;
  font-size:1.15rem !important; letter-spacing:-.02em;
}
#footer-bottom{ background: rgba(0,0,0,.28) !important; padding: 1.2rem 0 !important; }
#footer-info, #footer-info a{ color: rgba(255,255,255,.5) !important; font-size:.85rem; }
.et-social-icons a{ color: rgba(255,255,255,.7) !important; font-size:1.3rem; }
.et-social-icons a:hover{ color: var(--cos-ochre) !important; }

.et_pb_social_media_follow li a.icon{
  width:46px !important; height:46px !important; border-radius:14px !important;
  transition: transform .35s var(--cos-ease);
}
.et_pb_social_media_follow li a.icon:hover{ transform: translateY(-3px) scale(1.06); }

/* =========================================================================
   12 · WHATSAPP FLUTUANTE
   Substitui o banner whatsapp.jpg (77 KB, baixa resolução).
   ========================================================================= */
.cos-wa{
  position: fixed; right: clamp(14px,2.5vw,28px); bottom: clamp(14px,2.5vw,28px);
  z-index: 9998;
  display:inline-flex; align-items:center; gap:.6rem;
  height:60px; padding: 0 1.25rem 0 .9rem;
  background:#25D366; color:#fff !important;
  border-radius:999px; font-weight:600; font-size:.98rem;
  box-shadow: 0 14px 34px -12px rgba(37,211,102,.75);
  transition: transform .4s var(--cos-ease), box-shadow .4s var(--cos-ease);
}
.cos-wa:hover{ transform: translateY(-3px) scale(1.03); color:#fff !important; box-shadow:0 20px 44px -14px rgba(37,211,102,.8); }
.cos-wa svg{ width:28px; height:28px; flex:0 0 28px; }
.cos-wa::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55); animation: cosPulse 2.6s infinite;
}
@keyframes cosPulse{ 70%{ box-shadow:0 0 0 18px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }
@media (max-width:600px){ .cos-wa span{ display:none; } .cos-wa{ padding:0; width:60px; justify-content:center; } }

/* O banner antigo em JPG sai de cena (o conteúdo continua no WP, só oculto).
   Para trazê-lo de volta, remova as 2 linhas abaixo. */
img[src*="whatsapp.jpg"]{ display:none !important; }

/* =========================================================================
   13 · ANIMAÇÕES DE ENTRADA
   ========================================================================= */
[data-cos-reveal]{
  opacity:0; transform: translateY(26px);
  transition: opacity .9s var(--cos-ease), transform .9s var(--cos-ease);
  transition-delay: calc(var(--cos-i, 0) * 90ms);
}
[data-cos-reveal].is-visible{ opacity:1; transform:none; }
[data-cos-reveal="left"]{ transform: translateX(-32px); }
[data-cos-reveal="scale"]{ transform: scale(.96); }

/* Linha que se desenha sob os títulos de seção */
.cos-underline{ position:relative; display:inline-block; }
.cos-underline::after{
  content:""; position:absolute; left:0; bottom:-.18em; height:.14em; width:0;
  background: linear-gradient(90deg, var(--cos-red), var(--cos-ochre));
  border-radius:99px; transition: width 1.1s var(--cos-ease) .25s;
}
.cos-underline.is-visible::after{ width:100%; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-cos-reveal]{ opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   14 · CONSENTIMENTO DE COOKIES (Complianz)
   ========================================================================= */
#cmplz-document, .cmplz-cookiebanner{
  border-radius: var(--cos-radius-lg) !important;
  box-shadow: var(--cos-shadow-lg) !important;
  border: 1px solid var(--cos-line-soft) !important;
  font-family: var(--cos-text) !important;
}
.cmplz-cookiebanner .cmplz-title{ font-family: var(--cos-display) !important; color: var(--cos-ink) !important; }
.cmplz-cookiebanner .cmplz-btn{ border-radius:999px !important; font-weight:600 !important; min-height:44px; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{ background: var(--cos-red) !important; border-color: var(--cos-red) !important; }

/* =========================================================================
   15 · AJUSTES FINOS / IMPRESSÃO
   ========================================================================= */
.et_pb_widget_area h4.title, .widget h4{ font-family: var(--cos-display) !important; }
hr{ border:none; border-top:1px solid var(--cos-line); margin: var(--cos-s-block) 0; }
.et_pb_divider::before{ border-top-color: var(--cos-line) !important; }

@media print{
  #main-header, #top-header, .cos-wa, .et-social-icons, .cmplz-cookiebanner{ display:none !important; }
  .et_pb_section{ padding: 1rem 0 !important; }
  body{ background:#fff; }
}