/*
Theme Name: Proximal Portal
Theme URI: https://proximalpsi.com/
Author: Proximal · Alexandre Cunha de Oliveira
Description: Tema-portal para a Proximal Psicologia. Home em mosaico (bento) editável, paleta da marca (teal e vermelho) com apoio em âmbar. Blocos, podcast, leituras e ferramentas gerenciáveis pelo painel.
Version: 2.4
Text Domain: proximal
*/

:root{
  /* Paleta da marca Proximal */
  --t900:#053844;   /* teal profundo */
  --t700:#066077;
  --t600:#0097b2;   /* TEAL DA MARCA */
  --t500:#1aabc4;
  --t400:#46c2d6;
  --aqua:#c7ecf1;   /* teal claro */
  --aqua-deep:#9ddbe4;
  --mist:#eef7f8;   /* fundo levemente teal */
  --paper:#ffffff;
  --ink:#0b2d34;
  --ink-soft:#4d6c72;
  --red:#ff3131;        /* VERMELHO DA MARCA — ação */
  --red-deep:#e21f1f;
  --amber:#f2a531;      /* acento quente de apoio (harmônico) */
  --amber-deep:#dc8e16;
  --line:rgba(11,45,52,.10);
  --shadow:0 22px 60px -34px rgba(5,56,68,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(58,167,156,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(227,176,74,.14), transparent 60%),
    var(--mist);
  color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; padding:30px 22px 60px;
}
a{color:inherit}
img{max-width:100%;display:block}
.shell{max-width:1180px;margin:0 auto;background:var(--paper);border-radius:32px;box-shadow:var(--shadow);padding:34px 34px 40px;border:1px solid rgba(255,255,255,.6)}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--t600),var(--t900));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px -8px rgba(17,78,77,.6);flex-shrink:0}
.mark svg{width:26px;height:26px}
.mark img{width:30px;height:30px;object-fit:contain}
.wordmark h1,.wordmark .site{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.9rem;line-height:1;letter-spacing:.01em;color:var(--ink)}
.wordmark small{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--t600);display:block;margin-top:3px}
.topnav{display:flex;gap:8px;align-items:center;list-style:none;flex-wrap:wrap}
.topnav a{font-size:.86rem;color:var(--ink-soft);padding:.5rem .8rem;border-radius:100px;transition:.2s;text-decoration:none;display:inline-block}
.topnav a:hover{color:var(--ink);background:var(--mist)}
.topnav .cta a,.topnav a.cta{background:var(--t700);color:#fff;font-weight:500}
.topnav .cta a:hover{background:var(--t900)}

/* intro */
.intro{margin:6px 0 22px}
.intro h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;max-width:32rem}
.intro h2 em{font-style:italic;color:var(--t600)}
.intro p{color:var(--ink-soft);font-size:.96rem;margin-top:.4rem;max-width:34rem}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:16px}
.tile{position:relative;border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;cursor:pointer;text-decoration:none;color:#fff;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tile:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--shadow)}
.tile .corner{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);transition:.3s}
.tile:hover .corner{background:rgba(255,255,255,.32);transform:rotate(90deg)}
.tile .kicker{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:.35rem}
.tile h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.3rem;line-height:1.08}
.tile p{font-size:.82rem;opacity:.85;margin-top:.3rem;max-width:18rem}

/* tamanhos */
.tile--tall{grid-row:span 2}
.tile--wide{grid-column:span 2}
.tile--bar{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}

/* cores */
.tile--teal-deep{background:linear-gradient(160deg,var(--t700),var(--t900))}
.tile--teal{background:linear-gradient(135deg,var(--t500),var(--t600))}
.tile--red{background:linear-gradient(160deg,var(--red),var(--red-deep))}
.tile--amber{background:linear-gradient(160deg,var(--amber),var(--amber-deep));color:#3a2f12}
.tile--aqua{background:linear-gradient(160deg,var(--aqua),var(--aqua-deep));color:var(--ink)}
.tile--light{background:linear-gradient(160deg,#eef5f3,#dfeeea);color:var(--ink);border:1px solid var(--line)}
.tile--perfil{background:linear-gradient(160deg,#f3f8f7,#e4efec);color:var(--ink);border:1px solid var(--line);justify-content:center}
.tile--photo{background:#1a3a39}

/* corners contextuais */
.tile--light .corner,.tile--aqua .corner,.tile--perfil .corner{background:rgba(14,43,42,.10);color:var(--ink)}
.tile--light:hover .corner,.tile--aqua:hover .corner,.tile--perfil:hover .corner{background:rgba(14,43,42,.2)}
.tile--amber .corner{background:rgba(58,47,18,.16);color:#3a2f12}
.tile--amber:hover .corner{background:rgba(58,47,18,.28)}
.tile--teal-deep .corner,.tile--photo .corner{background:var(--red);color:#fff}
.tile--teal-deep:hover .corner,.tile--photo:hover .corner{background:var(--red-deep)}

/* perfil */
.tile--perfil .mark{width:42px;height:42px;margin-bottom:10px}
.tile--perfil h3{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.2rem}
.tile--perfil p{color:var(--ink-soft);opacity:1;font-size:.74rem}

/* foto */
.tile--photo .tile__img{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.05)}
.tile--photo .tile__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,58,57,.15),rgba(11,58,57,.85))}
.tile--photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;color:#fff}
.tile--photo .ph .ic{font-size:1.8rem}
.tile--photo .ph small{font-size:.74rem;opacity:.92;line-height:1.3}

/* barra contato */
.tile--bar .corner{position:static;width:auto;height:auto;background:none;backdrop-filter:none;font-family:"Bricolage Grotesque";font-weight:600;font-size:.95rem;padding:.6rem 1.1rem;border:1px solid rgba(255,255,255,.5);border-radius:100px}
.tile--bar:hover .corner{transform:none;background:rgba(255,255,255,.15)}

/* deco */
.tile--teal-deep::after{content:"";position:absolute;width:200px;height:200px;border:1px solid rgba(255,255,255,.12);border-radius:50%;top:-70px;right:-70px}

/* paginas internas */
.page-body{max-width:760px;margin:10px auto 0;line-height:1.75}
.page-body h1,.page-body h2{font-family:"Cormorant Garamond",serif;font-weight:600;line-height:1.12;margin:1.4rem 0 .6rem}
.page-body h1{font-size:clamp(2rem,4vw,3rem)}
.page-body p{margin-bottom:1rem;color:var(--ink-soft)}
.eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red-deep);font-weight:500}
.back{display:inline-block;margin-bottom:1rem;font-size:.85rem;color:var(--t600);text-decoration:none}

/* embed / agenda */
.embed-area{background:var(--mist);border:1px dashed var(--t500);border-radius:18px;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--ink-soft)}
.embed-area iframe{width:100%;min-height:600px;border:0;border-radius:14px}

/* listas (podcast/leituras) */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:20px}
.card-item{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);transition:transform .3s}
.card-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-item .cv{aspect-ratio:16/10;background:linear-gradient(135deg,var(--t500),var(--t400));display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Cormorant Garamond";font-size:1.3rem;text-align:center;padding:1rem}
.card-item .bd{padding:20px}
.card-item .bd span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep)}
.card-item .bd h3{font-family:"Bricolage Grotesque";font-size:1.2rem;margin:.3rem 0 .4rem}
.card-item .bd p{font-size:.88rem;color:var(--ink-soft)}

/* ferramenta: roda da vida */
.tool-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center;margin-top:20px}
.wheel-wrap{display:flex;justify-content:center}
#roda{max-width:100%;height:auto;filter:drop-shadow(0 16px 40px rgba(11,58,57,.2))}
.sliders{display:grid;gap:13px}
.slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center}
.slider-row label{font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.slider-row label i{width:12px;height:12px;border-radius:3px;display:inline-block}
.slider-row input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--aqua-deep);outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff}
.slider-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--red);cursor:pointer;border:3px solid #fff}
.slider-row .val{font-family:"Cormorant Garamond";font-size:1.4rem;min-width:28px;text-align:center;color:var(--t600)}
.reflect{margin-top:22px;background:var(--mist);border-left:3px solid var(--red);border-radius:8px;padding:18px 20px}
.reflect h4{font-family:"Bricolage Grotesque";font-size:1.15rem;margin-bottom:.3rem}
.reflect p{font-size:.9rem;color:var(--ink-soft)}
.disclaimer{font-size:.78rem;color:var(--ink-soft);margin-top:16px;font-style:italic}

/* foot */
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft)}
.foot .crp{font-weight:500;color:var(--t600)}
.foot .social a{margin-left:12px;color:var(--t600);text-decoration:none}

/* responsivo */
@media(max-width:880px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:148px}
  .tool-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  body{padding:16px 12px 40px}
  .shell{padding:22px 18px 28px;border-radius:24px}
  .bento{grid-template-columns:1fr;grid-auto-rows:140px}
  .tile--tall{grid-row:span 1}.tile--wide{grid-column:span 1}
  .topnav li:not(.cta){display:none}
}

/* logo horizontal na topbar */
.logo-full{height:46px;width:auto;display:block}
.mark--img{background:none !important;box-shadow:none !important;padding:0;width:auto;height:auto}
.mark--img img{width:46px;height:46px;object-fit:contain;border-radius:0}
.tile--perfil .mark--img img{width:46px;height:46px}
@media(max-width:520px){ .logo-full{height:38px} }
.card-item .bd .card-cta{display:inline-block;margin-top:.6rem;font-family:"Bricolage Grotesque";font-weight:600;font-size:.82rem;color:var(--red-deep)}

/* WhatsApp corner icon */
.corner--whatsapp{font-size:0}
.tile:hover .corner--whatsapp{transform:none}

/* photo tile: nome sobre o gradiente */
.tile--photo h3{position:relative;z-index:1;color:#fff}


/* === Hero Banner (imagem destacada nas páginas) === */
.page-hero {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.page-hero__img {
  width: 100%;
  height: 420px;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .page-hero {
    border-radius: 8px;
    margin-bottom: 1.25rem;
  }
  .page-hero__img {
    height: 260px;
    max-height: 260px;
  }
}

@media (max-width: 480px) {
  .page-hero__img {
    height: 200px;
    max-height: 200px;
  }
}


/* =========================================
   Contato — hero reduzido à metade
   ========================================= */
.page-id-9 .page-hero,
.page-id-9 .page-hero__img {
  max-height: 210px;
  height: 210px;
}
@media (max-width: 768px) {
  .page-id-9 .page-hero,
  .page-id-9 .page-hero__img { max-height: 130px; height: 130px; }
}

/* =========================================
   Podcast — alto contraste dentro dos tiles
   ========================================= */
.page-id-119 .tile h3,
.page-id-119 .tile h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.page-id-119 .tile p,
.page-id-119 .tile li {
  color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
}
.page-id-119 .kicker {
  color: rgba(255,255,255,0.85) !important;
}

/* =========================================
   Blog — card com título fora do tile
   ========================================= */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blog-card .tile {
  border-radius: 22px 22px 0 0;
  min-height: 160px;
}
.blog-card .tile h3 { display: none; }
.blog-card .tile p  { display: none; }
.blog-card__meta {
  padding: 0.75rem 1rem 1.25rem;
  background: var(--surface, #fff);
  border-radius: 0 0 22px 22px;
  border: 1px solid rgba(0,0,0,0.07);
  border-top: none;
}
.blog-card__title {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #1a3a40);
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.blog-card__title:hover { color: var(--teal, #0d9488); }
.blog-card__excerpt {
  font-size: 0.85rem;
  color: var(--ink-soft, #4d6c72);
  line-height: 1.5;
  margin: 0;
}