/* ==========================================================================
   Colégio Logosófico Botafogo — folha de estilo principal
   Reconstrução estática (HTML5 + CSS moderno) da landing page original.
   Medidas e cores extraídas do site em produção.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --navy:#12326e;
  --navy-soft:rgba(18,50,110,.75);
  --green:#a4e237;
  --green-dark:#65c967;
  --cyan:#26d0dd;
  --teal:#47bdd1;
  --teal-dark:#3aa8bb;
  --ink:#272727;
  --field-ink:#1b3766;
  --footer-bg:#252525;
  --footer-ink:#777;
  --footer-link:#ccc;
  --hero-bg:#f7f7f7;
  --font-body:'Open Sans',Helvetica,Arial,sans-serif;
  --font-head:'Source Sans Pro','Open Sans',Helvetica,Arial,sans-serif;
  --header-h:126px;
}

/* ---------- Ícones de linha (mesma fonte do site original) ---------- */
@font-face{
  font-family:'Linecons';
  src:url('../fonts/linecons.woff') format('woff'),
      url('../fonts/linecons.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:block;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:26px;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.spacer{display:block;width:100%}
[hidden]{display:none!important}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:#fff;color:var(--navy);padding:10px 16px;font-weight:600;
}
.skip-link:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ==========================================================================
   Grade
   ========================================================================== */
.container{
  width:100%;
  max-width:1425px;
  margin-inline:auto;
  padding:0 90px;
}
.full{width:100%}

.grid{display:flex;flex-wrap:wrap;margin:0 -1%}
.grid>.col{padding:0 1%;min-width:0}
.full .grid{margin:0}
.full .grid>.col{padding:0}

.grid--2>.col{flex:0 0 50%;max-width:50%}
.grid--4>.col{flex:0 0 25%;max-width:25%}
.grid--2-8-2>.col:nth-child(1),
.grid--2-8-2>.col:nth-child(3){flex:0 0 16.66667%;max-width:16.66667%}
.grid--2-8-2>.col:nth-child(2){flex:0 0 66.66667%;max-width:66.66667%}
.grid--2-4-6>.col:nth-child(1){flex:0 0 16.66667%;max-width:16.66667%}
.grid--2-4-6>.col:nth-child(2){flex:0 0 33.33333%;max-width:33.33333%}
.grid--2-4-6>.col:nth-child(3){flex:0 0 50%;max-width:50%}

.col--centered{text-align:center}
.grid--middle{align-items:center}
/* coluna com respiro de 1% da linha (seção full-width => 1vw) */
.col--pad1{padding-inline:1vw!important}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:transparent;
  transition:background-color .3s ease;
}
.site-header__inner{padding:28px 50px;display:flex;align-items:center}
.site-logo img{width:70px;height:70px}

/* ==========================================================================
   Seções
   ========================================================================== */
.section{position:relative}
.section--white{background:#fff}
.section--green{background:var(--green)}
.section--pad-3-1{padding:3vw 0 1vw}
.section--pad-3-3{padding:3vw 0}
.section--pad-1-3{padding:1vw 0 3vw}
.section--pad-0-3{padding:0 0 3vw}
.section--pad-0-5{padding:0 0 5vw}
.section--form{padding:3vw 0}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;display:flow-root;background:var(--hero-bg)}
.hero__bg{position:absolute;inset:0;background:var(--hero-bg);z-index:0}
.hero__bg--image{overflow:hidden}
.hero__bg--image::before{
  content:'';position:absolute;inset:0;
  background-image:url('../img/banner-hero.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  animation:hero-zoom-out 8s cubic-bezier(.1,.2,.7,1) forwards;
}
@keyframes hero-zoom-out{from{transform:scale(1.35)}to{transform:scale(1)}}
.hero__media{position:relative;z-index:1}
.hero__media img{width:100%;max-width:1502px;height:auto;margin-inline:auto}

.hero__actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center}
.hero__actions-col{flex:0 0 50%;max-width:50%;text-align:center}
.hero--desktop .hero__actions-col:first-child{margin-top:-15%}
.hero--mobile .hero__actions{margin-top:10%;padding-bottom:5%}
.hero--mobile .hero__actions-col:first-child{text-align:left}
.hero--mobile .hero__actions-col:first-child{margin-top:-15%}

/* divisor "montanhas" */
.shape-divider{
  position:absolute;left:0;right:0;bottom:0;width:100%;z-index:3;pointer-events:none;
}
.shape-divider__svg{display:block;width:100%;height:100%}

/* alterna hero desktop / mobile no mesmo ponto de corte do original (1300px) */
.hero--desktop{display:none}
@media (min-width:1300px){
  .hero--desktop{display:block}
  .hero--mobile{display:none}
}

/* ==========================================================================
   Tipografia das seções
   ========================================================================== */
.heading-h5{
  font-family:var(--font-head);font-weight:700;font-style:normal;
  font-size:28px;line-height:32px;color:var(--navy);text-align:center;
  margin-bottom:7px;
}
.heading-h6{
  font-family:var(--font-head);font-weight:400;
  font-size:20px;line-height:26px;color:var(--navy);text-align:center;
  margin-bottom:7px;
}
.heading-h2{
  font-family:var(--font-head);font-weight:600;
  font-size:28px;line-height:44px;color:var(--navy);text-align:center;
  margin-bottom:7px;
}
.heading-h4{
  font-family:var(--font-head);font-weight:400;
  font-size:20px;line-height:26px;color:var(--navy);text-align:center;
  margin-bottom:8px;
}

/* separadores */
.rule{border:0;margin:0}
.rule--full{height:1px;background:rgba(0,0,0,.12);margin:9px 0;width:100%}
.rule--small{height:1px;background:var(--navy);width:20%;margin:35px auto}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn{
  display:inline-block;position:relative;
  font-family:var(--font-body);font-weight:600;line-height:20px;
  border-radius:4px;text-align:center;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  margin:0 0 10px;
}
.btn--large{font-size:14px;padding:15px 42px}
.btn--medium{font-size:12px;padding:10px 15px}

.btn--outline{background:transparent;border-style:solid}
.btn--large.btn--outline{padding:13px 22px;border-width:2px}
.btn--medium.btn--outline{padding:9px 15px;border-width:2px;margin:0 8px 10px}
.btn--navy{border-color:var(--navy-soft);color:var(--navy)}
.btn--navy:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--green{border-color:var(--green-dark);color:var(--green-dark)}
.btn--green:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}

.btn--navy-solid{background:var(--navy);color:#fff;border:0}
.btn--navy-solid.btn--medium{margin:0 8px 10px 0}
.btn--navy-solid:hover{background:#0d2551;color:#fff}

/* botão em gradiente (hero mobile) */
.btn--solid-outline{
  background-image:linear-gradient(to right bottom,var(--green-dark),var(--green));
  color:var(--navy);border:0;border-radius:0;padding:10px 18px;
}
.btn--solid-outline:hover{
  background-image:linear-gradient(to right bottom,var(--green),var(--green-dark));
  color:var(--navy);
}

.btn span{white-space:nowrap}
.btn--has-icon{position:relative;padding:15px 42px}
.btn__icon{position:absolute;right:29px;top:50%;width:16px;height:16px;margin-top:-8px}

/* ==========================================================================
   Coluna de texto do bloco verde
   ========================================================================== */
@media (min-width:1000px){
  .col--pad10{padding-right:calc(10% + 1%)!important}
}

/* ==========================================================================
   Formulário
   ========================================================================== */
.col--form{scroll-margin-top:var(--header-h)}
.form-card{background:#fff;border-radius:10px;padding:5%;container-type:inline-size}

.field{position:relative;margin-bottom:30px}
.field:not(.field--select){padding-top:20px}
.field__label{
  display:block;height:20px;
  font-size:16px;line-height:20px;color:var(--field-ink);font-weight:400;
}
.field__required{color:var(--green)}
.field__input,
.field__select{
  display:block;width:100%;
  font-size:16px;line-height:20.8px;color:var(--field-ink);
  background:transparent;border:0;border-bottom:1px solid rgba(27,55,102,.4);
  border-radius:0;padding:10px 0 9px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field__input::placeholder{color:transparent}
.field__input:focus,
.field__select:focus{outline:0;border-bottom-color:var(--field-ink);box-shadow:0 1px 0 0 var(--field-ink)}

/* rótulo flutuante, como no formulário original (Material) */
.field:not(.field--select) .field__label{
  position:absolute;left:0;top:30px;width:100%;
  transform-origin:left top;
  transition:transform .2s ease,color .2s ease;
  pointer-events:none;
}
.field:not(.field--select) .field__input:focus ~ .field__label,
.field:not(.field--select) .field__input:not(:placeholder-shown) ~ .field__label{
  transform:translateY(-26px) scale(.8);
  color:#8a8a8a;
}

.field--select{margin-bottom:30px}
.field--select .field__label--static{margin-bottom:0;font-size:14px;line-height:20px;color:#777}
.field--select .field__select{height:39px;padding:9px 0}
.field__select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b3766' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:16px 16px;
  padding-right:24px;cursor:pointer;
}
.field__error{display:block;margin-top:6px;font-size:12px;line-height:16px;color:#c0392b}
.field--invalid .field__input,
.field--invalid .field__select{border-bottom-color:#c0392b}

.form-submit{
  display:inline-block;cursor:pointer;
  background:var(--teal);color:#fff;border:0;border-radius:4px;
  font-size:14px;font-weight:500;line-height:20.3px;padding:10px;
  min-width:133px;margin-bottom:30px;
  transition:background-color .2s ease;
}
.form-submit:hover{background:var(--teal-dark)}
.form-submit[disabled]{opacity:.6;cursor:default}
.form-response{margin-top:-16px;font-size:14px;line-height:20px;color:var(--field-ink)}
.form-response--error{color:#c0392b}

/* ==========================================================================
   Ícones "O que fazemos?"
   ========================================================================== */
.icon-circle{
  position:relative;display:inline-block;
  width:100px;height:100px;padding:20px;border-radius:150px;
  margin:0 0 24px;line-height:0;
}
.icon-circle::before{
  content:'';position:absolute;inset:0;
  background:var(--green);border-radius:100px;opacity:.11;
}
.lc{
  position:relative;display:inline-block;
  font-family:'Linecons';font-style:normal;font-weight:400;
  font-size:40px;line-height:60px;width:60px;height:60px;
  color:var(--green);
  -webkit-font-smoothing:antialiased;
}
.lc-heart::before{content:"\e000"}
.lc-bulb::before{content:"\e00e"}
.lc-eye::before{content:"\e013"}
.lc-like::before{content:"\e01a"}

/* ==========================================================================
   Mosaico de imagens
   ========================================================================== */
.tile{
  position:relative;display:flex;flex-wrap:wrap;overflow:hidden;
  min-height:400px;padding:11%;color:#fff;text-align:center;
  transition:transform .65s cubic-bezier(.05,.2,.1,1),box-shadow .65s cubic-bezier(.05,.2,.1,1);
}
.tile__bg{
  position:absolute;top:0;left:0;height:100.2%;width:100.2%;
  background-size:cover;background-position:center;z-index:1;
  transition:transform 1s ease;
}
.tile__bg::before{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:85%;z-index:10;
  background:linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75) 100%);
  transition:opacity .65s cubic-bezier(.05,.2,.1,1);
}
.tile__inner{position:relative;z-index:10;width:100%;align-self:flex-end}
.tile__title{
  font-family:var(--font-body);font-weight:600;
  font-size:34px;line-height:44px;color:#fff;text-align:center;
}
.tile__title b{font-weight:600}
@media (hover:hover){
  .tile:hover{transform:translateY(-10px);box-shadow:0 25px 55px rgba(0,0,0,.22)}
  .tile:hover .tile__bg{transform:scale(1.2);transition:transform 9s cubic-bezier(.1,.2,.7,1)}
}

/* ==========================================================================
   Missão
   ========================================================================== */
.grid>.col--mission-title{margin-top:3%;padding-top:24px}
.highlighted-text h2{
  font-family:var(--font-body);font-weight:600;
  font-size:34px;line-height:44px;color:var(--navy);text-align:left;
  margin-bottom:7px;
}
.highlight{
  font-style:normal;padding:0 3px;
  background-image:linear-gradient(to right,var(--cyan) 0,var(--cyan) 100%);
  background-repeat:no-repeat;
  background-size:0 80%;
  background-position:0 70%;
  transition:background-size 1s cubic-bezier(.1,.7,.3,1);
}
.highlight.is-visible{background-size:100% 80%}
.highlight strong{font-weight:600}

.mission-text{
  font-family:var(--font-body);font-weight:600;
  font-size:18px;line-height:32px;color:var(--navy);
}
.col--mission-text{text-align:left}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer{background:var(--footer-bg);color:var(--footer-link)}
.site-footer__inner{
  width:100%;max-width:1425px;margin-inline:auto;padding:32px 90px 70px;
  text-align:center;font-size:12px;line-height:26px;color:var(--footer-ink);
}
.social li{display:inline-block;margin:0 10px 25px}
.social li a{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;
  border:1px solid var(--footer-ink);color:var(--footer-ink);
  transition:color .2s linear,border-color .2s linear;
}
.social li a svg{width:20px;height:20px}
.social li a:hover{color:#fff;border-color:#fff}
.site-footer__credit p{margin-top:3px;font-size:12px;line-height:22px}
.site-footer__credit a{color:var(--footer-link)}
.site-footer__credit a:hover{color:#fff}

/* ==========================================================================
   Aviso de cookies
   ========================================================================== */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:10000;
  background:#202020;color:#fff;
  font-family:'Nunito',var(--font-body);font-size:13px;line-height:1.4;
}
.cookie-bar__inner{
  max-width:1425px;margin-inline:auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
}
.cookie-bar__text{font-weight:700;margin:0}
.cookie-bar__text a{text-decoration:underline}
.cookie-bar__accept{
  background:#0d5bbd;color:#fff;border:0;border-radius:2px;
  padding:6px 26px;font-size:13px;font-weight:700;cursor:pointer;
}
.cookie-bar__accept:hover{background:#0a4a9c}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* --- tablet e abaixo: colunas empilham (breakpoint do site original) --- */
@media (max-width:999px){
  :root{--header-h:59px}
  .container{max-width:88%;padding:0}
  .site-header__inner{padding:12px 28px}
  .site-logo img{width:35px;height:35px}
  .site-footer__inner{max-width:88%;padding:32px 0 70px}

  .grid--2>.col:nth-child(n),
  .grid--2-8-2>.col:nth-child(n),
  .grid--2-4-6>.col:nth-child(n){flex:0 0 100%;max-width:100%;margin-bottom:0}
  .grid--2-8-2>.col:nth-child(1),
  .grid--2-8-2>.col:nth-child(3){display:none}
  .grid--2>.col:nth-child(1),
  .grid--2-4-6>.col:nth-child(1),
  .grid--2-4-6>.col:nth-child(2){margin-bottom:25px}
  /* espaçador vazio da seção "missão" (mantém o mesmo respiro do original) */
  .grid--2-4-6>.col:nth-child(1){flex:0 0 31.25%;max-width:31.25%;padding:36px 0}
  .grid--4>.col:nth-child(n){flex:0 0 50%;max-width:50%;margin-bottom:0}

  .hero__actions-col{flex:0 0 100%;max-width:100%}
  .hero--mobile .hero__actions-col:first-child{padding-right:179.82px;text-align:center}
  .hero--mobile .hero__actions-col:last-child{display:none}

  .section--form{padding:7.04vw 0}
  .col--form{padding-top:8.8vw}
  .form-card{padding:36px}

  .hero--mobile .hero__actions-col:first-child{margin-top:-40%}

  .col--centered,
  .col--mission-text,
  .highlighted-text h2{text-align:center}

  .grid>.col--mission-title{margin-top:3%;padding-top:0;padding-bottom:24px}
}

/* --- celular --- */
@media (max-width:690px){
  .grid--4>.col:nth-child(n){flex:0 0 100%;max-width:100%}
  .grid--2-4-6>.col:nth-child(1){flex:0 0 50%;max-width:50%;padding:6vw 0}
  .site-header__inner{padding:12px 18px}
  .form-card{padding:6vw}
  .hero--mobile .hero__actions-col:first-child{padding-right:124.2px}
  .site-footer__credit p{margin-top:25px}
}

/* cartão estreito: espaçamento menor entre os campos (igual ao original) */
@container (max-width:480px){
  .field,
  .field--select{margin-bottom:20px}
  .form-submit{margin-bottom:20px}
}

/* campos mais compactos e botão de largura total, como no formulário original */
@media (max-width:782px){
  .field,
  .field--select{margin-bottom:20px}
  .form-submit{width:100%;margin-bottom:10px}
  .lead-form{padding-bottom:20px}
}

/* --- telas muito largas: mantém a moldura do original --- */


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}