/* ==========================================================================
   Sistemas com IA: lista de espera (karinesackt.com.br/sistemas-espera/)
   Refeita em código a partir da página do Elementor (post 3884), com as mesmas medidas.
   Pontos de quebra iguais aos do Elementor: tablet até 1024 px, celular até 767 px.
   ========================================================================== */

/* ---------- Fontes (os mesmos arquivos que o WordPress usa) ---------- */
@font-face{font-family:"Neue Montreal";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/neue-montreal-regular.woff2") format("woff2")}
@font-face{font-family:"Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/neue-montreal-medium.woff2") format("woff2")}

/* ---------- Cores e medidas ---------- */
:root{
  --fonte:"Neue Montreal",sans-serif;
  --creme:#F8E9CB;          /* textos */
  --coral:#DB6348;          /* botão, ícones, destaque do título */
  --coral-claro:#ED755A;    /* fim do degradê do destaque */
  --coral-hover:#FE8652;    /* botão com o mouse em cima */
  --tinta:#151515;          /* texto do botão com o mouse em cima */
  --fundo:#050505;          /* fundo das seções */
  --fundo-topo:#09110F;     /* cor por trás da foto do topo */
  --verde-escuro:#010A0A;   /* degradês */
  --verde:#03251D;
  --petroleo:#02525C4D;
  --borda:#FFFFFF1F;        /* cartões e caixa do formulário */
  --borda-campo:#FFFFFF38;  /* campos do formulário */
  --linha:#D9D9D94A;        /* linhas entre os itens */
  --largura:1200px;         /* largura do conteúdo */
  --respiro:13px;           /* recuo interno dos blocos (10 px no celular) */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:#fff;color:var(--creme);font-family:var(--fonte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,p{margin:0}
img{max-width:100%;height:auto;border:0}
.w{max-width:var(--largura);margin:0 auto}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Títulos grandes das seções 2 e 3 */
.titulo{width:50%;font-size:46px;font-weight:500;line-height:122%;color:var(--creme)}

/* ==========================================================================
   1. TOPO
   ========================================================================== */
.hero{padding:60px 0;overflow:hidden;background:var(--fundo-topo) url("/wp-content/uploads/2026/09/capa-24-1.jpg") top center/cover no-repeat}
.hero__in{display:flex}
/* duas colunas de 51% e 50%: como passam de 100%, o navegador encolhe as duas na proporção (606 + 594 em 1200) */
.hero__txt{position:relative;flex:0 1 51%;min-width:0;display:flex;flex-direction:column;gap:20px;padding:var(--respiro)}
.hero__arte{position:relative;flex:0 1 50%;min-width:0}

/* logo "Karine Sackt / Web Designer": como no Elementor, ocupa uma linha de no mínimo 34,5 px e o centro dele
   fica 19,8 px abaixo do topo (3,17% = metade da altura do logo, que tem 25% da largura e proporção 280 × 71) */
.hero__logo{display:flex;align-items:flex-start;min-height:34.5px}
.hero__logo img{width:25%;margin-top:calc(19.8px - 3.17%)}

.hero h1{font-size:43px;font-weight:500;line-height:109%;color:var(--creme)}
.hero h1 .amarelo{display:inline-block;background:linear-gradient(var(--coral),var(--coral-claro));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* -0,6 px: no Elementor o parágrafo tem 14,4 px de margem e o bloco dele, -15 px (vale também para o texto dos cartões) */
.hero__sub{margin-bottom:-.6px;font-size:20px;line-height:130%}

/* pirâmide: só aparece em telas acima de ~1450 px (à esquerda do texto) */
.hero__piramide{position:absolute;left:-324px;top:396px;width:33%}
/* ícone de apps sobre a foto */
.hero__apps{position:absolute;top:259px;right:-83px;width:min(512px,100%)}
.hero__apps img{display:block;width:17%;margin:0 auto}

/* caixa do formulário */
.caixa{width:90%;padding:22px;border:1px solid var(--borda);border-radius:20px;background:linear-gradient(132deg,var(--verde-escuro) 0%,var(--verde) 100%)}

/* aviso com cadeado, abaixo do formulário */
.aviso{display:flex;align-items:flex-start;width:95%;font-size:20px;line-height:130%}
/* ícone numa caixa de 30 px (24 × 1,25) + 5 px antes do texto */
.aviso img{flex:0 0 auto;width:24px;height:24px;margin:2px 11px 0 0}

/* ---------- Formulário ---------- */
.form__campo{position:relative;margin-bottom:10px}
.form input{display:block;width:100%;min-height:47px;margin:0;padding:6px 16px;font-family:inherit;font-size:20px;font-weight:400;line-height:1.4;color:var(--creme);background:#F8E9CB08;border:1px solid var(--borda-campo);border-radius:100px;transition:all .3s;-webkit-appearance:none;appearance:none}
.form input::placeholder{color:inherit;font-family:inherit;opacity:.6}
.form input:focus{outline:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.form button{display:block;width:100%;margin:0;padding:22px;font-family:inherit;font-size:20px;font-weight:400;line-height:1;color:#fff;background:var(--coral);border:0;border-radius:100px;cursor:pointer;transition:all .3s}
.form button:hover{background:var(--coral-hover);color:var(--tinta)}
.form button:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}
.form button[disabled]{opacity:.6;cursor:wait}
/* aviso de telefone inválido (mesmo visual do plugin de máscara do WordPress) */
.form__erro{position:absolute;left:10px;bottom:-26px;z-index:9;display:flex;align-items:center;height:24px;padding:2px 4px;font-size:13px;line-height:13px;color:#ff3939;background:#fff;border:1px solid #ff6a6a;border-radius:3px}
.form__erro[hidden]{display:none}
.form__erro::after{content:"";position:absolute;top:-6px;left:12px;width:11px;height:11px;border-left:1px solid #ff6a6a;border-top:1px solid #ff6a6a;background-image:linear-gradient(135deg,#fff 50%,transparent 50%);transform:rotate(45deg)}
/* resposta do envio */
.form__msg{margin-top:10px;font-size:16px;line-height:130%;color:#fff}

/* ==========================================================================
   2. POR QUE ESSE TREINAMENTO
   ========================================================================== */
.porque{padding-top:20px;background:var(--fundo)}
.porque__topo{padding:var(--respiro)}
.item{padding:24px 10px}
.item--primeiro{padding-top:80px}
.item--faixa{border-block:1px solid var(--linha);background:linear-gradient(173deg,var(--verde-escuro) 0%,var(--petroleo) 100%)}
.item .w{display:flex;align-items:center;gap:20px}
.item__nome,.item__desc{flex:1 1 0;min-width:0;padding:var(--respiro)}
.item__nome{display:flex;align-items:center;font-size:32px;font-weight:500;line-height:109%}
/* ícone de 48 px numa caixa de 70 px (48 × 1,25 + 10) + 5 px antes do texto */
.item__nome img{flex:0 0 auto;width:48px;height:48px;margin-right:27px}
.item__desc h2{width:98%;font-size:20px;font-weight:400;line-height:130%;color:var(--creme)}

/* ==========================================================================
   3. CASOS
   ========================================================================== */
.casos{padding:60px 0 90px;background:var(--fundo)}
.casos__topo{padding:var(--respiro)}
.casos__topo .w{display:flex;flex-direction:column;gap:20px}
.casos__alvo{display:block;width:5%;margin-top:max(0px,calc(19.8px - 2.5%))}
/* ^ como no Elementor, um alvo com menos de 39,6 px (telas de 768 a 817 px) desce até o centro ficar a 19,8 px do topo */
.casos__grade{padding:var(--respiro)}
.casos__grade .w{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px}
.caso{min-width:0;display:flex;flex-direction:column;gap:20px;padding:68px 36px;border:1px solid var(--borda);border-radius:7px;background:linear-gradient(150deg,var(--verde-escuro) 0%,var(--verde) 100%)}
.etiqueta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:15px 24px 15px 20px;font-size:17px;line-height:1;color:var(--creme);background:#020101E0;border:1px solid #F2F5D8;border-radius:100px;transition:transform .3s,background-color .3s}
.etiqueta img{flex:0 0 auto;width:1em;height:1em}
.etiqueta:hover{transform:scale(1.1);background-color:#00191B}
.caso p{margin-bottom:-.6px;font-size:17px;line-height:130%}

/* ==========================================================================
   4. RODAPÉ
   ========================================================================== */
.rodape{padding:20px 0;background:var(--fundo);border-top:1px solid;border-image:linear-gradient(to right,#0E0E0E,#F2FA9D,#0E0E0E) 1}
.rodape h2{width:98%;margin:0 auto;font-size:20px;font-weight:400;line-height:130%;text-align:center;color:#fff}

/* ==========================================================================
   Movimento
   ========================================================================== */
/* entrada ao rolar (o JS põe .ativo; sem JS tudo fica visível) */
.js .rev{opacity:0;transition:all .9s}
.js .rev--baixo{transform:translate(0,80px)}
.js .rev--direita{transform:translate(30px,0)}
.js .rev.ativo{opacity:1;transform:translateY(0)}
/* pirâmide e ícone de apps flutuando */
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.flutua{animation:flutuar 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;transition:none}
  .flutua{animation:none}
  .etiqueta,.etiqueta:hover{transition:none;transform:none}
}

/* ==========================================================================
   Tablet (até 1024 px)
   ========================================================================== */
@media (max-width:1024px){
  .hero__piramide{display:none} /* fica fora da tela nessas larguras */
}

/* ==========================================================================
   Celular (até 767 px)
   ========================================================================== */
@media (max-width:767px){
  :root{--respiro:10px}
  .titulo{width:92%;font-size:34px}

  /* topo: a foto (com "Sistemas sob medida") fica no alto e o texto começa a 75% da largura */
  .hero{padding:0 3%;background-image:url("/wp-content/uploads/2026/09/capa-25-1.jpg");background-size:contain}
  .hero__in{flex-wrap:wrap;padding:75% 0 10%}
  .hero__txt{flex-basis:100%;gap:9px;padding:0}
  .hero__arte{flex-basis:100%;order:-1;min-height:20px}
  .hero__logo{display:none}
  .hero h1{font-size:27px;text-align:center}
  .hero__sub{width:90%;align-self:center;font-size:16px;text-align:center}
  .hero__apps{top:-104px;right:-70px}
  .hero__apps img{width:12%}
  .caixa{width:100%;padding:20px}
  .form input{font-size:16px}
  .form button{font-size:17px}
  .aviso{font-size:16px}
  .aviso img{width:20px;height:20px;margin-right:10px}

  .item .w{flex-wrap:wrap}
  .item__nome,.item__desc{flex-basis:100%}
  .item--primeiro{padding-top:24px}
  .item__nome{font-size:22px}
  .item__nome img{width:28px;height:28px;margin-right:22px}
  .item__desc h2{font-size:18px}

  .casos{padding:50px 10px 0}
  .casos__alvo{width:14%;margin-top:max(0px,calc(19.8px - 7%))}
  .casos__topo .titulo{width:100%}
  .casos__grade .w{grid-template-columns:1fr}
  .caso{padding:32px}
  .etiqueta{font-size:15px}
  .caso p{font-size:18px}

  .rodape{padding:15px 15px 20px}
  .rodape h2{width:85%;font-size:18px}
}