/*
Theme Name: Localoeste
Theme URI: https://localoeste.com.br
Author: Localoeste
Description: Tema do site da Localoeste — software house de apps Android, iOS e sistemas web. Tema de blocos: tudo se edita pelo editor do WordPress (Aparência → Editor).
Version: 2.0.1
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: localoeste
*/

/* ── faixas escuras ───────────────────────────────────────────────────── */
.lo-escuro { background:
    radial-gradient(ellipse 60% 55% at 85% 0%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(242,140,56,.16), transparent 60%),
    #070b18; color: #e8edf8; }
.lo-escuro h1, .lo-escuro h2, .lo-escuro h3 { color: #fff; }
.lo-escuro p { color: #aab4cc; }
.lo-hero { position: relative; overflow: hidden; }
.lo-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
.lo-hero > * { position: relative; }
.lo-grad { background: linear-gradient(90deg, #60a5fa, #f28c38); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* selo pequeno acima do título */
.lo-selo { display: block; width: fit-content; font-family: Manrope, sans-serif; font-weight: 700; font-size: .8rem !important;
  letter-spacing: .12em; text-transform: uppercase; color: #93b4ff !important; border: 1px solid rgba(147,180,255,.35);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 8px !important; }
/* alinhado à esquerda do conteúdo (1200px); nos topos centralizados, ao meio */
.wp-block-group > .lo-selo { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
.wp-block-group > .lo-selo.centro { margin-left: auto !important; margin-right: auto !important; }
.lo-claro .lo-selo, .lo-selo-claro { color: #2563eb !important; border-color: rgba(37,99,235,.3); }

/* botões */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; }
.lo-escuro .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.35); }
.lo-escuro .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #fff; }
.wp-block-button__link { transition: transform .15s ease, background .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* ── vitrine do topo: três telas em camadas ───────────────────────────── */
.lo-vitrine { position: relative; height: clamp(260px, 38vw, 520px); margin-top: 48px !important; }
.lo-vitrine .wp-block-image { position: absolute; margin: 0; width: 58%; border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.lo-vitrine .wp-block-image img { display: block; width: 100%; height: auto; }
.lo-vitrine .wp-block-image:nth-child(1) { left: 0; top: 14%; transform: rotate(-4deg); z-index: 1; }
.lo-vitrine .wp-block-image:nth-child(2) { left: 21%; top: 0; z-index: 3; }
.lo-vitrine .wp-block-image:nth-child(3) { right: 0; top: 16%; transform: rotate(4deg); z-index: 2; }

/* números */
.lo-numeros p { margin: 0; }
.lo-numeros .lo-n { font-family: Manrope, sans-serif; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff !important; line-height: 1.1; }

/* ── cartões ──────────────────────────────────────────────────────────── */
.lo-cartao { background: #fff; border: 1px solid #e6eaf2; border-radius: 18px; padding: 28px !important; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lo-cartao:hover { transform: translateY(-4px); border-color: #c9d6f5; box-shadow: 0 24px 48px -28px rgba(15,23,42,.35); }
.lo-cartao h3 { margin-top: 14px; }
.lo-icone { width: 48px; height: 48px; border-radius: 14px; display: grid !important; place-items: center; margin: 0 !important;
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem !important; color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 10px 24px -10px rgba(37,99,235,.7); }
.lo-icone.laranja { background: linear-gradient(135deg, #f28c38, #f6a55f); box-shadow: 0 10px 24px -10px rgba(242,140,56,.7); }

/* cartão de projeto */
.lo-projeto { background: #0e1630; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; height: 100%;
  transition: transform .2s ease, border-color .2s ease; }
.lo-projeto:hover { transform: translateY(-4px); border-color: rgba(147,180,255,.4); }
.lo-projeto .wp-block-image { margin: 0; }
.lo-projeto .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lo-projeto-texto { padding: 22px 24px 26px !important; }
.lo-projeto-texto h3 { margin: 10px 0 6px; color: #fff; }
.lo-projeto-texto p { color: #aab4cc; font-size: .98rem; margin: 0 0 10px; }
.lo-claro .lo-projeto { background: #fff; border-color: #e6eaf2; }
.lo-claro .lo-projeto-texto h3 { color: #0f172a; }
.lo-claro .lo-projeto-texto p { color: #5b6478; }

/* selo de situação */
.lo-status { display: inline-block; margin: 0 !important; font-family: Manrope, sans-serif; font-weight: 700; font-size: .74rem !important;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.lo-status.no-ar { color: #34d399 !important; background: rgba(52,211,153,.12); }
.lo-status.lancamento { color: #fbbf24 !important; background: rgba(251,191,36,.12); }
.lo-status.dev { color: #93b4ff !important; background: rgba(147,180,255,.12); }
.lo-claro .lo-status.no-ar { color: #059669 !important; background: #d1fae5; }
.lo-claro .lo-status.lancamento { color: #b45309 !important; background: #fef3c7; }
.lo-claro .lo-status.dev { color: #1d4ed8 !important; background: #dbeafe; }
.lo-tags { font-family: Manrope, sans-serif; font-size: .82rem !important; font-weight: 600; color: #7f8bab !important; letter-spacing: .01em; }

/* projeto em destaque (página de projetos) */
.lo-detalhe .wp-block-image img { border-radius: 18px; box-shadow: 0 30px 60px -32px rgba(15,23,42,.55); }
.lo-detalhe ul { padding-left: 1.1rem; color: #5b6478; }
.lo-detalhe li { margin-bottom: 6px; }
.lo-detalhe li::marker { color: #2563eb; }

/* apps publicados */
.lo-app { text-align: center; background: #fff; border: 1px solid #e6eaf2; border-radius: 18px; padding: 24px 18px !important; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease; }
.lo-app:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(15,23,42,.35); }
.lo-app .lo-app-icone { margin: 0 auto 6px; }
.lo-app .lo-app-icone img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 12px 26px -14px rgba(15,23,42,.55); }
.lo-app h3 { font-size: 1.05rem; margin: 10px 0 4px; }
.lo-app h3 a { color: #0f172a; text-decoration: none; }
.lo-app p { font-size: .92rem; margin: 0; }

/* passos */
.lo-passo { border-top: 3px solid #2563eb; padding-top: 18px !important; }
.lo-passo .lo-num { font-family: Manrope, sans-serif; font-weight: 800; color: #2563eb !important; font-size: .9rem !important;
  letter-spacing: .12em; margin: 0 !important; }

/* tecnologias */
.lo-chips p { display: inline-block; margin: 0 8px 10px 0 !important; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #e2e7f0; font-family: Manrope, sans-serif; font-weight: 700; font-size: .92rem !important; color: #0f172a !important; }
.lo-chips { display: block !important; text-align: center; }

/* chamada final */
.lo-cta { border-radius: 24px; padding: clamp(36px, 6vw, 64px) !important; color: #fff;
  background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(242,140,56,.55), transparent 60%), linear-gradient(135deg, #1d4ed8, #2563eb 50%, #3b82f6); }
.lo-cta h2, .lo-cta p { color: #fff !important; }
.lo-cta .wp-block-button__link { background: #fff; color: #1d4ed8; }
.lo-cta .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* foto arredondada */
.wp-block-image.lo-arredondada img { border-radius: 20px; box-shadow: 0 30px 60px -32px rgba(15,23,42,.55); }

/* ── cabeçalho e rodapé ───────────────────────────────────────────────── */
.lo-cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(7,11,24,.82); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07); }
.lo-cabecalho .wp-block-site-logo img { max-height: 46px; width: auto; }   /* PNG transparente: sem caixa branca atrás */
.lo-cabecalho .wp-block-navigation a { color: #d7deef; }
.lo-cabecalho .wp-block-navigation a:hover { color: #fff; }
.lo-cabecalho .wp-block-button__link { padding: .6rem 1.1rem; font-size: .92rem; }
.lo-cabecalho .wp-block-navigation__responsive-container.is-menu-open { background: #070b18; color: #fff; }
.lo-rodape a { text-decoration: none; }
.lo-rodape a:hover { color: #fff !important; }
.lo-rodape p { margin: 0 0 8px; }

/* perguntas frequentes */
.lo-faq details { border-bottom: 1px solid #e2e7f0; padding: 18px 0; }
.lo-faq summary { cursor: pointer; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.08rem; color: #0f172a; list-style: none; }
.lo-faq summary::-webkit-details-marker { display: none; }
.lo-faq summary::after { content: "+"; float: right; color: #2563eb; font-size: 1.4rem; line-height: 1; }
.lo-faq details[open] summary::after { content: "–"; }
.lo-faq details p { margin: 10px 0 0; color: #5b6478; }

/* formulários (Contact Form 7) */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #d5dbe7; border-radius: 12px; padding: 13px 15px;
  font: inherit; font-size: 1rem; background: #fff; color: #0f172a; }
.wpcf7 textarea { min-height: 140px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
.wpcf7 label { display: block; font-size: .92rem; font-weight: 600; color: #0f172a; margin-bottom: 16px; }
.wpcf7 input[type=submit] { background: #2563eb; color: #fff; border: 0; border-radius: 12px; padding: 14px 28px;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; }
.wpcf7 input[type=submit]:hover { background: #1d4ed8; }
.lo-form { background: #fff; border: 1px solid #e6eaf2; border-radius: 20px; padding: 30px !important; box-shadow: 0 24px 48px -32px rgba(15,23,42,.35); }

@media (max-width: 781px) {
  .lo-vitrine { height: 300px; }
  .lo-vitrine .wp-block-image { width: 78%; }
  .lo-vitrine .wp-block-image:nth-child(1) { display: none; }
  .lo-vitrine .wp-block-image:nth-child(2) { left: 0; }
}