/*
Theme Name: Trativo
Theme URI: https://trativo.pt
Author: Eduardo Rodrigues
Author URI: https://zipdesign.pt
Description: Landing page da Trativo — serviços, consultoria e gestão de ativos imobiliários.
Version: 3.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietário
Text Domain: trativo
*/

:root{
  --navy: #003E51;
  --navy-dark: #012E3D;
  --sky: #59CBE8;
  --sky-soft: #B9DFEC;
  --sky-pale: #EAF7FB;
  --ink: #0B2A35;
  --grey: #55707B;
  --line: rgba(4,40,52,.14);
  --line-light: rgba(255,255,255,.2);

  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0 0 .5em; font-weight:600; line-height:1.15; letter-spacing:-.025em; }
p{ margin:0 0 1em; }

.container{
  max-width: 1040px;
  margin-inline:auto;
  padding-inline: clamp(1.5rem,5vw,2.5rem);
}
a:focus-visible,.btn:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ---------- ETIQUETA (utility face) ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--sky);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-bottom:1.4rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--mono);
  font-size:.85rem;
  letter-spacing:.02em;
  padding:.95em 1.5em;
  border-radius:3px;
  text-decoration:none;
  transition: transform .16s ease, background .2s ease, color .2s ease;
}
.btn::after{ content:"→"; transition: transform .16s ease; }
.btn:hover{ transform: translateY(-2px); }
.btn:hover::after{ transform: translateX(3px); }
.btn-primary{ background: var(--sky); color: var(--navy-dark); }
.btn-primary:hover{ background:#fff; }
.btn-ghost{ border:1px solid var(--line-light); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.1); border-color: var(--sky); }
.btn-dark{ background: var(--navy-dark); color:#fff; }
.btn-dark:hover{ background: var(--navy); }

/* ---------- TOPO ---------- */
.hero{
  background: linear-gradient(170deg, var(--navy-dark), var(--navy));
  color:#fff;
  padding: clamp(2.5rem,6vw,3.5rem) 0 clamp(4rem,9vw,6rem);
}
.hero .logo img,
.hero img.custom-logo{
  height:46px;
  width:auto;
  margin-bottom: clamp(3rem,8vw,5rem);
}
.hero h1{
  font-size: clamp(2.1rem,5.4vw,3.5rem);
  max-width: 17ch;
}
.hero .lede{
  color: var(--sky-soft);
  font-size:1.08rem;
  max-width: 48ch;
  margin-top:1.3em;
}
.hero-tagline{
  font-family: var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--sky);
  margin-top:2.2em;
  padding-top:1.4em;
  border-top:1px solid var(--line-light);
}
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }

/* ---------- BLOCOS ---------- */
.block{ padding: clamp(3.5rem,8vw,5.5rem) 0; }
.block h2{ font-size: clamp(1.6rem,3.6vw,2.3rem); }
.block > .container > p{ color: var(--grey); max-width:56ch; }

/* PORTFÓLIO — cartão escuro com painel */
.block-portfolio{ background: var(--sky-pale); }
.portfolio-card{
  background: var(--navy);
  border-radius:3px;
  padding: clamp(2.2rem,5vw,3.4rem);
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.5rem;
  align-items:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.portfolio-card:hover{ transform: translateY(-3px); box-shadow:0 22px 46px rgba(1,37,49,.28); }
.portfolio-card h2{ color:#fff; }
.portfolio-card p{ color: var(--sky-soft); max-width:44ch; }
.portfolio-card .btn{ margin-top:.8rem; }
.portfolio-panel{
  border:1px dashed var(--line-light);
  border-radius:3px;
  padding:1.6rem;
  font-family: var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color: var(--sky);
  transition: border-color .2s ease;
}
.portfolio-card:hover .portfolio-panel{ border-color: var(--sky); }
.portfolio-panel .url{ color:#fff; font-size:1.05rem; letter-spacing:0; margin-top:.5rem; }
.portfolio-panel .row{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line-light);
  margin-top:1.1rem; padding-top:1.1rem;
  color: var(--sky-soft);
}
.platforms{
  display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.4rem;
  margin-top:2.2rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.platforms-label{
  font-family: var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--grey);
}
.pill{
  font-family: var(--mono); font-size:.8rem;
  padding:.5em 1.1em; border:1px solid var(--line);
  border-radius:999px; color: var(--navy); text-decoration:none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pill:hover{ border-color: var(--sky); background:#fff; transform: translateY(-2px); }

/* ARRENDAMENTO */
.block-university{ background: var(--sky); }
.block-university .container{
  display:grid; grid-template-columns:1fr auto;
  gap:2rem; align-items:center;
}
.block-university .eyebrow{ color: var(--navy-dark); }
.block-university h2{ color: var(--navy-dark); }
.block-university p{ color: var(--navy-dark); max-width:50ch; margin:0; }

/* SERVIÇOS — cartões com cantos */
.block-services h2{ color: var(--navy); }
.services{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background: var(--line);
  border:1px solid var(--line);
  margin-top:2.5rem;
}
.service{
  background:#fff; padding:2.2rem 1.8rem; position:relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service::before,.service::after{
  content:""; position:absolute; width:10px; height:10px;
}
.service::before{ top:14px; left:14px; border-top:2px solid var(--sky); border-left:2px solid var(--sky); }
.service::after{ bottom:14px; right:14px; border-bottom:2px solid var(--sky); border-right:2px solid var(--sky); }
.service:hover{ transform: translateY(-5px); box-shadow:0 16px 32px rgba(0,62,81,.1); z-index:2; }
.service-icon{
  width:48px; height:48px; border-radius:50%;
  border:1.5px solid var(--sky); color: var(--sky);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.service-icon svg{ width:23px; height:23px; }
.service:hover .service-icon{ background: var(--sky); color:#fff; transform: scale(1.08) rotate(-4deg); }
.service h3{ font-size:1.02rem; color: var(--navy); }
.service p{ font-size:.92rem; color: var(--grey); margin:0; }

/* SOBRE */
.block-about{ background: var(--navy); }
.block-about h2{ color:#fff; }
.block-about p{ color: var(--sky-soft) !important; }
.about-call{
  font-family: var(--mono);
  color: var(--sky) !important;
  font-size:1rem; letter-spacing:.06em;
  margin-top:1.8em !important; padding-top:1.4em;
  border-top:1px solid var(--line-light);
}

/* RODAPÉ */
.site-footer{
  background: var(--navy-dark); color:#8FB6C4;
  padding:2.6rem 0; font-size:.85rem;
}
.site-footer .logo img,
.site-footer img.custom-logo{ height:28px; width:auto; margin-bottom:1.3rem; }
.footer-legal{
  font-family: var(--mono); font-size:.74rem;
  line-height:1.95; margin-bottom:1.2rem;
}
.footer-legal a{ color: var(--sky-soft); border-bottom:1px dotted currentColor; text-decoration:none; }
.footer-legal a:hover{ color: var(--sky); }
.footer-bottom{
  margin:0; padding-top:1.2rem;
  border-top:1px solid var(--line-light);
  font-family: var(--mono); font-size:.72rem; color:#6D95A3;
}


/* ---------- CONTACTO NO TOPO ---------- */
.hero-contact{
  margin-top:1.6rem;
  font-family: var(--mono);
  font-size:.85rem;
}
.hero-contact a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(89,203,232,.5);
  padding-bottom:1px;
  transition: border-color .2s ease, color .2s ease;
}
.hero-contact a:hover{ color: var(--sky); border-color: var(--sky); }
.hero-contact span{ margin:0 .7rem; color: var(--line-light); }
.hero-contact small{
  display:block; margin-top:.5rem;
  font-size:.68rem; letter-spacing:.06em;
  color: rgba(185,223,236,.6);
}

/* ---------- APONTAMENTO DE SCROLL ---------- */
.scroll-cue{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:3rem;
  font-family: var(--mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--sky-soft); text-decoration:none;
  opacity:.75;
  transition: opacity .2s ease, color .2s ease;
}
.scroll-cue:hover{ opacity:1; color: var(--sky); }
.scroll-cue svg{ width:18px; height:18px; animation: cue 2s ease-in-out infinite; }
@keyframes cue{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(5px); }
}

/* ---------- RODAPÉ: CONTACTOS ---------- */
.footer-top{
  display:flex; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
  padding-bottom:1.8rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--line-light);
}
.footer-brand p{ max-width:32ch; margin:0; }
.footer-contact .eyebrow{ margin-bottom:.9rem; }
.contact-line{
  display:block;
  font-family: var(--mono); font-size:.95rem;
  color:#fff; text-decoration:none;
  margin-bottom:.35rem;
  transition: color .2s ease;
}
.contact-line:hover{ color: var(--sky); }
.call-note{
  display:block;
  font-family: var(--mono); font-size:.68rem;
  letter-spacing:.05em; color:#6D95A3;
}
.socials{ display:flex; gap:.7rem; margin-top:1.2rem; }
.socials a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-light);
  display:flex; align-items:center; justify-content:center;
  color: var(--sky-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.socials a:hover{
  background: var(--sky); color: var(--navy-dark);
  border-color: var(--sky); transform: translateY(-2px);
}
.socials svg{ width:17px; height:17px; }

/* ---------- BARRA FIXA (TELEMÓVEL) ---------- */
.mobile-bar{ display:none; }
@media (max-width:760px){
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:99;
    background: var(--navy-dark);
    border-top:1px solid var(--line-light);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.95rem 1rem;
    font-family: var(--mono); font-size:.82rem;
    color:#fff; text-decoration:none;
  }
  .mobile-bar a:first-child{ background: var(--sky); color: var(--navy-dark); }
  .mobile-bar svg{ width:17px; height:17px; }
  body{ padding-bottom:56px; }
}

/* RESPONSIVO */
@media (max-width:860px){
  .portfolio-card{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
  .block-university .container{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .hero-actions .btn{ width:100%; justify-content:center; }
}