/*
Theme Name: Criei Estrategia Criativa
Theme URI: https://agenciacriei.com.br
Author: Agencia Criei
Description: Tema personalizado da Agencia Criei - estrategia criativa e marketing digital no Rio de Janeiro.
Version: 1.0
Text Domain: criei
*/

@font-face {
  font-family: 'WildMango';
  src: url('assets/fonts/WildMango.otf') format('opentype');
  font-weight: normal;
}
@font-face {
  font-family: 'Gabarito';
  src: url('assets/fonts/Gabarito-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Gabarito';
  src: url('assets/fonts/Gabarito-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Gabarito';
  src: url('assets/fonts/Gabarito-Bold.ttf') format('truetype');
  font-weight: 800;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lime: #e2ed33;
  --coral: #f04d49;
  --coral-dark: #d43834;
  --preto: #111111;
  --creme: #F7F5EE;
  --branco: #FFFFFF;
  --cinza: #767676;
}

html { scroll-behavior: smooth; }
body { font-family: 'Gabarito', sans-serif; color: var(--preto); background: var(--lime); overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* NAV */
nav.criei-nav {
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.3rem 5%;
  background: rgba(247,245,238,0.98);
}
.nav-logo-img { height: 38px; }
.nav-logo {
  font-family:'WildMango', serif; font-size:1.7rem; color:var(--preto); text-decoration:none;
}
.nav-links { display:flex; align-items:center; gap:2.2rem; list-style:none; }
.nav-links a {
  font-family:'Gabarito',sans-serif; font-size:0.92rem; font-weight:600; color:var(--preto);
  text-decoration:none; letter-spacing:0.01em;
}
.nav-links a:hover { color: var(--coral); }
.nav-cta {
  background: var(--preto); color: var(--branco) !important;
  padding:0.7rem 1.5rem; border-radius:100px; font-weight:700 !important;
  display:flex; align-items:center; gap:6px;
}
.nav-cta:hover { background: var(--coral) !important; color:var(--branco) !important; }

/* HERO */
.hero { background: var(--lime); min-height: 100vh; padding: 160px 0 60px; position: relative; width: 100%; max-width: none; margin: 0; }
.hero-grid {
  display:grid; grid-template-columns: 1.3fr 0.8fr; gap: 3rem; align-items:center;
  max-width: 1300px; margin: 0 auto; padding: 0 5%;
}
.hero-eyebrow {
  font-family:'Gabarito',sans-serif; font-size:0.85rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--preto); opacity:0.55;
  margin-bottom: 0.6rem;
}
.hero h1 { font-family:'WildMango', serif; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.08; color: var(--preto); margin-bottom: 1.5rem; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }

.hero-sub { font-family:'Gabarito',sans-serif; font-weight:700; font-size:1.25rem; color: var(--preto); margin-bottom: 1rem; max-width: 480px; }
.hero-desc { font-size: 1rem; color: rgba(17,17,17,0.7); line-height:1.7; max-width: 460px; margin-bottom: 2.2rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--coral); color:var(--branco); font-weight:700; font-size:0.95rem;
  padding: 1rem 1.9rem; border-radius:100px; text-decoration:none;
  transition: transform 0.2s, background 0.2s;
}
.btn-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--preto); color:var(--preto); font-weight:700; font-size:0.95rem;
  padding: 1rem 1.9rem; border-radius:100px; text-decoration:none;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--preto); color: var(--branco); }
.hero-img { border-radius: 24px; overflow:hidden; aspect-ratio: 4/5; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3); }
.hero-img img { width:100%; height:100%; object-fit:cover; }

/* TICKER */
.ticker { background: var(--preto); padding: 0.9rem 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-block; animation: tk 22s linear infinite; }
.ticker-inner span { font-family:'WildMango',serif; font-size:1.05rem; color:var(--branco); margin:0 1.8rem; }
.ticker-inner span.dot { color: var(--lime); margin:0; }
@keyframes tk { from{transform:translateX(0);} to{transform:translateX(-50%);} }

section { padding: 6rem 5%; max-width:1300px; margin:0 auto; background: var(--branco); }
.tag-label {
  display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--coral); background: rgba(240,77,73,0.08);
  padding: 0.4rem 0.9rem; border-radius:100px; margin-bottom:1.2rem;
}
.sec-title { font-family:'WildMango',serif; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.12; margin-bottom:1rem; }
.sec-sub { font-size:1rem; color:var(--cinza); max-width:560px; line-height:1.7; }

/* SERVICOS */
.servicos-wrap { background: var(--preto); }
.servicos-wrap section { background: var(--preto); }
.servicos-wrap .tag-label { background: rgba(226,237,51,0.12); color: var(--lime); }
.servicos-wrap .sec-title { color: var(--branco); }
.servicos-wrap .sec-sub { color: rgba(255,255,255,0.5); }
.serv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.3rem; margin-top:1rem; }
.serv-card { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:20px; padding:2.2rem; transition: border-color .3s, background .3s; }
.serv-card:hover { border-color: var(--coral); background: rgba(240,77,73,0.06); }
.serv-icon { width:52px; height:52px; border-radius:14px; background:var(--lime); display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem; font-family:'WildMango',serif; font-size:1.4rem; color:var(--preto); }
.serv-img { width:52px; height:52px; border-radius:14px; overflow:hidden; margin-bottom:1.4rem; }
.serv-img img { width:100%; height:100%; object-fit:cover; }
.serv-card h3 { font-family:'WildMango',serif; font-size:1.3rem; color:var(--branco); margin-bottom:0.6rem; }
.serv-card p { font-size:0.9rem; color:rgba(255,255,255,0.55); line-height:1.7; }

/* DIFERENCIAIS */
.dif-wrap { background: var(--lime); }
.dif-wrap section { background: var(--lime); padding-bottom: 0; }
.dif-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.dif-card { background:var(--preto); border-radius:20px; padding:2.2rem; }
.dif-num { font-family:'WildMango',serif; font-size:2.6rem; color: var(--lime); line-height:1; margin-bottom:0.8rem; }
.dif-card h3 { font-family:'WildMango',serif; font-size:1.2rem; color:var(--branco); margin-bottom:0.6rem; }
.dif-card p { font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.7; }

/* PORTFOLIO */
#portfolio { background: var(--branco); }
.port-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:1rem; }
.port-card { border-radius:20px; overflow:hidden; background:var(--creme); transition: transform .3s; }
.port-card:hover { transform: translateY(-5px); }
.port-thumb { height:200px; overflow: hidden; background: var(--coral); display:flex; align-items:center; justify-content:center; }
.port-thumb img { width:100%; height:100%; object-fit:cover; }
.port-body { padding:1.6rem; }
.port-tag { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--coral); display:block; margin-bottom:0.5rem; }
.port-body h3 { font-family:'WildMango',serif; font-size:1.25rem; margin-bottom:0.5rem; }
.port-body p { font-size:0.87rem; color:var(--cinza); line-height:1.65; }

/* SOBRE */
.sobre-wrap { background: var(--preto); }
.sobre-wrap section { background: var(--preto); }
.sobre-wrap .tag-label { background: rgba(226,237,51,0.12); color: var(--lime); }
.sobre-wrap .sec-title { color: var(--branco); }
.sobre-wrap .sec-sub { color: rgba(255,255,255,0.45); }
.sobre-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3rem; }
.pessoa { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:24px; overflow:hidden; }
.pessoa-foto { height:300px; background:var(--coral); overflow:hidden; }
.pessoa-foto img { width:100%; height:100%; object-fit:cover; }
.pessoa-body { padding:1.8rem; }
.pessoa-nome { font-family:'WildMango',serif; font-size:1.6rem; color:var(--branco); margin-bottom:0.3rem; }
.pessoa-role { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--lime); display:block; margin-bottom:1rem; }
.pessoa-body p { font-size:0.9rem; color:rgba(255,255,255,0.55); line-height:1.75; }

/* CONTATO */
.contato-wrap { background: var(--coral); text-align:center; padding:7rem 5%; }
.contato-wrap .tag-label { background: rgba(255,255,255,0.15); color:var(--branco); }
.contato-wrap h2 { font-family:'WildMango',serif; font-size:clamp(2.2rem,5vw,4rem); color:var(--branco); margin-bottom:1.2rem; max-width:700px; margin-left:auto; margin-right:auto; }
.contato-wrap p { font-size:1.05rem; color:rgba(255,255,255,0.85); line-height:1.7; max-width:520px; margin:0 auto 2.5rem; }
.btn-branco { display:inline-block; background:var(--branco); color:var(--coral); font-weight:800; font-size:1rem; padding:1.1rem 2.4rem; border-radius:100px; text-decoration:none; transition: transform .2s; }
.btn-branco:hover { transform: translateY(-2px); }

/* FOOTER */
footer.criei-footer { background: var(--preto); padding:3rem 5%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-logo { font-family:'WildMango',serif; font-size:1.4rem; color:var(--branco); }
.footer-logo small { display:block; font-family:'Gabarito',sans-serif; font-size:0.68rem; color:rgba(255,255,255,0.35); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }
.footer-links { display:flex; gap:1.4rem; list-style:none; flex-wrap:wrap; }
.footer-links a { font-size:0.85rem; color:rgba(255,255,255,0.45); text-decoration:none; }
.footer-links a:hover { color: var(--lime); }
.footer-copy { font-size:0.78rem; color:rgba(255,255,255,0.25); width:100%; text-align:center; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.07); margin-top:1rem; }

/* BLOG */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2rem; }
.blog-card { background:var(--creme); border-radius:20px; overflow:hidden; transition: transform .3s; }
.blog-card:hover { transform: translateY(-5px); }
.blog-thumb { height:200px; overflow:hidden; background: var(--lime); }
.blog-thumb img { width:100%; height:100%; object-fit:cover; }
.blog-body { padding:1.6rem; }
.blog-date { font-size:0.78rem; color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.5rem; display:block; }
.blog-body h3 { font-family:'WildMango',serif; font-size:1.2rem; margin-bottom:0.6rem; }
.blog-body h3 a { color: var(--preto); text-decoration:none; }
.blog-body p { font-size:0.88rem; color:var(--cinza); line-height:1.6; }
.single-post-content { max-width: 760px; margin: 0 auto; padding-top: 140px; }
.single-post-content h1 { font-family:'WildMango',serif; font-size: clamp(2rem,4vw,3rem); margin-bottom: 1rem; }
.single-post-content .post-meta { color: var(--cinza); font-size:0.85rem; margin-bottom: 2rem; }
.single-post-content .post-body { font-size: 1.05rem; line-height: 1.8; color: #333; }
.single-post-content .post-body p { margin-bottom: 1.2rem; }
.single-post-content img { border-radius: 16px; margin: 1.5rem 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-img { max-width:340px; margin:0 auto; }
  .dif-grid { grid-template-columns:1fr; }
  .sobre-grid { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .nav-links { display:none; }
  footer.criei-footer { flex-direction:column; text-align:center; }
}