/* ITPD — Shared base styles (tokens, resets, reusable components).
   Enqueued on EVERY page — do not put page-specific rules here.
   Every page's root wrapper div must carry class="itpd-page" for resets/typography
   below to apply — but color TOKENS live on :root so they're available anywhere on
   the page, including site-wide chrome like the footer bar that sits outside any
   .itpd-page wrapper. */

:root{ --ink:#01092D; --paper:#FFFFFF; --primary:#276ED6; --secondary:#1B50A4; --pale:#D4E2F7; --accent:#01BDEB; --slate:#4A5670; --line:#D7E1F0; }

.itpd-page{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif; box-sizing:border-box; color:var(--ink); }
.itpd-page *, .itpd-page *::before, .itpd-page *::after{ box-sizing:inherit; }
.itpd-page ul{ list-style:none; margin:0; padding:0; }
.itpd-page a{ text-decoration:none; }
.itpd-page img{ max-width:100%; display:block; }
.itpd-page h1, .itpd-page h2, .itpd-page h3{ font-family:'Space Grotesk',-apple-system,sans-serif; font-weight:600; line-height:1.15; margin:0 0 .5em; }
.itpd-page p{ margin:0 0 1em; overflow-wrap:break-word; }

.itpd-container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.itpd-eyebrow{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin:0 0 16px; }
.itpd-eyebrow--ink{ color:var(--secondary); }

/* ---- Buttons & links ---- */
.itpd-btn{ display:inline-block; padding:14px 28px; font-weight:600; font-size:15px; border-radius:2px; transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.itpd-btn--brass{ background:var(--primary) !important; color:#fff !important; }
.itpd-btn--brass:hover{ transform:translateY(-2px); background:var(--secondary) !important; }
.itpd-btn--ghost{ border:1px solid rgba(255,255,255,.35); color:#fff !important; }
.itpd-btn--ghost:hover{ border-color:var(--accent); color:var(--accent) !important; }
.itpd-btn--outline{ border:1px solid var(--ink); color:var(--ink) !important; }
.itpd-btn--outline:hover{ background:var(--ink) !important; color:#fff !important; }

.itpd-link{ color:var(--secondary); font-weight:600; font-size:15px; border-bottom:1px solid transparent; }
.itpd-link:hover{ border-bottom-color:var(--secondary); }
.itpd-link--onnavy{ color:var(--accent); }
.itpd-link--onnavy:hover{ border-bottom-color:var(--accent); }

/* ---- Section shells ---- */
.itpd-section{ padding:88px 0; border-bottom:1px solid var(--line); }
.itpd-section--tight{ padding:56px 0; }
.itpd-section--paper{ background:var(--paper); }
.itpd-section--navy{ background:#081B45; border-bottom-color:#14285C; }
.itpd-section--ink{ background:var(--ink); border-bottom-color:#14285C; }
.itpd-section--navy .itpd-body, .itpd-section--ink .itpd-body,
.itpd-body--light{ color:#C9D2E0; }
.itpd-h2{ font-size:clamp(24px,3vw,34px); }
.itpd-h2--light{ color:#fff; }
.itpd-body{ color:var(--slate); font-size:16px; line-height:1.7; max-width:640px; }
.itpd-intro{ max-width:680px; }

.itpd-grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
@media (max-width:820px){ .itpd-grid-2{ grid-template-columns:1fr; gap:40px; } }

/* ---- Tiles (Missão/Visão-style cards, reused wherever a short highlighted block is needed) ---- */
.itpd-tiles{ display:grid; gap:20px; }
.itpd-tile{ background:#fff; border:1px solid var(--line); padding:28px; border-radius:2px; }
.itpd-tile__mark{ display:block; margin-bottom:18px; }
.itpd-tile__mark svg{ display:block; height:30px; width:auto; }
.itpd-tile__title{ font-size:18px; margin-bottom:8px; }
.itpd-tile__text{ font-size:14px; color:var(--slate); line-height:1.6; margin:0; }

/* ---- Value/tag chips ---- */
.itpd-values-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:40px 0 16px; }

/* ---- Two-up modality cards (used on homepage teaser AND the Cursos hub page) ---- */
.itpd-modalities{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#14285C; margin-top:48px; }
.itpd-mcard{ background:#081B45; padding:36px 30px; }
.itpd-mcard__title{ color:#fff; font-size:22px; margin:0 0 12px; position:relative; display:inline-block; z-index:1; }
.itpd-mcard__title::before{ content:''; position:absolute; left:-4px; right:-4px; bottom:-5px; height:3px; background:var(--accent); opacity:.9; z-index:-1; border-radius:2px; }
.itpd-mcard__text{ color:#C9D2E0; font-size:14px; line-height:1.65; margin-bottom:20px; }
@media (max-width:820px){ .itpd-modalities{ grid-template-columns:1fr; } }

/* ---- Generic card grid — used ONLY by the [itpd_posts] and [itpd_cursos]
   shortcode listings (Artigos, Notícias e Eventos, course listings). Real
   surface cards now: white, rounded, soft shadow, gentle hover lift — instead
   of a bare thumbnail with floating text under it. The thumb bleeds to the
   card's edges (its own radius removed; the card's overflow:hidden rounds the
   top corners), and text content gets inset padding individually since the
   shortcode markup has no inner body wrapper to pad once. ---- */
.itpd-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.itpd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; }
@media (max-width:820px){ .itpd-cards{ grid-template-columns:1fr; } }
.itpd-card{ background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; padding-bottom:20px; box-shadow:0 2px 12px rgba(1,9,45,.05); transition:transform .25s ease, box-shadow .25s ease; }
.itpd-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(1,9,45,.10); }
.itpd-card__thumb{ position:relative; background:linear-gradient(135deg,var(--pale),#A9C8ED); aspect-ratio:4/3; margin-bottom:16px; overflow:hidden; border-radius:0; }
.itpd-card__thumb--photo{ background:none; }
.itpd-card__thumb--photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block; margin:0 !important; max-width:none !important; }
.itpd-card__badge{ position:absolute; bottom:10px; right:10px; z-index:2; background:var(--accent); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.itpd-card__eyebrow{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:8px; }
.itpd-card .itpd-card__eyebrow{ padding:0 20px; }
.itpd-card__title{ font-size:17px; line-height:1.4; margin-bottom:10px; padding:0 20px; }
.itpd-card > .itpd-link{ margin:0 20px; }

.itpd-photogrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.itpd-photogrid span{ display:block; aspect-ratio:1; background:linear-gradient(135deg,var(--secondary),var(--primary)); overflow:hidden; border-radius:4px; }
.itpd-photogrid__photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block; margin:0 !important; max-width:none !important; }

.itpd-logostrip{ display:flex; flex-wrap:wrap; gap:44px; margin-top:24px; align-items:center; }
.itpd-logoslot{ border:1px dashed var(--line); color:var(--slate); font-size:13px; padding:22px 32px; border-radius:2px; }
.itpd-logostrip__img{ max-height:5rem !important; height:5rem !important; width:auto !important; max-width:none !important; display:block; margin:0 !important; }

/* ---- CTA band ---- */
.itpd-cta__inner{ text-align:center; max-width:600px; }
.itpd-cta__actions{ display:flex; gap:24px; align-items:center; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* ---- Scroll-reveal (paired with itpd-base.js) ---- */
.itpd-page .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.itpd-page .reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .itpd-page .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Breadcrumb + sub-hero banner (used by every inner section: O Instituto, Cursos, etc.
   Deliberately calmer than the homepage hero — the big animated mark stays a homepage-only moment) ---- */
.itpd-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.04em; color:#9FB4DE; margin-bottom:28px; }
.itpd-crumbs a{ color:#9FB4DE; border-bottom:1px solid transparent; }
.itpd-crumbs a:hover{ border-bottom-color:#9FB4DE; }
.itpd-crumbs span{ color:#5A6E96; }
.itpd-crumbs em{ font-style:normal; color:#fff; }

.itpd-subhero{ position:relative; background:linear-gradient(135deg,#01092D 0%,#0A1D4C 60%,#0E255C 100%); color:#fff; padding:150px 0 64px; }
.itpd-subhero__title{ font-size:clamp(30px,4.4vw,46px); color:#fff; max-width:760px; margin:0; }
.itpd-subhero__intro{ color:#B9C7E6; font-size:16px; line-height:1.7; max-width:640px; margin-top:18px; }

/* ---- Photo hero variant (Featured Image becomes the subhero's own background instead
   of a separate floating photo block — used by course pages AND blog posts) ---- */
.itpd-subhero--photo{ background-size:cover; background-position:center; padding-bottom:88px; }
.itpd-subhero--photo::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(1,9,45,.95) 0%, rgba(1,9,45,.88) 30%, rgba(1,9,45,.6) 60%, rgba(1,9,45,.32) 100%); }
.itpd-subhero--photo .itpd-container{ position:relative; z-index:2; }

.itpd-post-meta{ font-size:13px; color:#9FB4DE; margin-top:14px; }

/* ---- Force full width on custom PHP-template pages (single-curso.php, single.php,
   single-album.php) ---- Each bypasses Elementor's own "Full Width" page mechanism, so
   Astra falls back to its default single-post layout (sidebar + boxed content).
   WordPress core always adds a "single-{post_type}" body class (single-curso,
   single-post, single-album), so this targets exactly those templates without
   touching Pages built normally through Elementor. */
body.single-curso #secondary, body.single-post #secondary, body.single-album #secondary,
body.single-curso .widget-area, body.single-post .widget-area, body.single-album .widget-area{ display:none !important; }
body.single-curso #primary, body.single-post #primary, body.single-album #primary,
body.single-curso .ast-container, body.single-post .ast-container, body.single-album .ast-container,
body.single-curso #content, body.single-post #content, body.single-album #content{ max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
/* .ast-container is display:flex by default (for its content+sidebar layout) — that
   makes our content div a flex item, which does NOT auto-stretch to fill the row.
   Switching it to block here is simpler and more reliable than fighting flex-grow/basis. */
body.single-curso .ast-container, body.single-post .ast-container, body.single-album .ast-container{ display:block !important; }

/* ---- Sibling-page sidebar nav (the "Ver também" pattern) ---- */
.itpd-subnav{ border-top:1px solid var(--line); padding-top:20px; }
.itpd-subnav__label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:14px; }
.itpd-subnav ul{ display:flex; flex-direction:column; gap:2px; }
.itpd-subnav a{ display:block; padding:12px 4px; font-size:15px; color:var(--ink); border-left:2px solid transparent; padding-left:16px; transition:border-color .2s ease, color .2s ease; }
.itpd-subnav a:hover{ color:var(--primary); }
.itpd-subnav a.is-current{ border-left-color:var(--primary); color:var(--primary); font-weight:600; }

/* ---- Prose column typography (long-form body copy inside a grid-2 layout) ---- */
.itpd-article{ padding:72px 0 96px; }
.itpd-article__body{ max-width:680px; }
.itpd-article__body p{ color:var(--slate); font-size:16px; line-height:1.75; }
.itpd-article__body h2{ font-size:22px; margin-top:40px; }

/* ---- Generic stacked-block list (hairline-divided rows) — repeatable content from
   Pods fields (Módulos, Docentes, FAQ) all render through this, plus reusable anywhere
   similar "N items, unknown count" content shows up. ---- */
.itpd-stacklist{ border-top:1px solid var(--line); margin-top:8px; }
.itpd-stack-item{ padding:20px 0; border-bottom:1px solid var(--line); }
.itpd-stack-item--link{ display:block; text-decoration:none; transition:padding-left .2s ease; }
.itpd-stack-item--link:hover{ padding-left:6px; }
.itpd-stack-item--media{ display:flex; align-items:center; gap:16px; }
.itpd-stack-item__thumb{ flex:0 0 72px; width:72px; height:72px; border-radius:4px; overflow:hidden; background:linear-gradient(135deg,var(--pale),#A9C8ED); }
.itpd-stack-item__thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block; margin:0 !important; max-width:none !important; }
.itpd-stack-item__body{ flex:1; min-width:0; }
.itpd-stack-item p{ margin:0 0 .6em; }
.itpd-stack-item p:last-child{ margin-bottom:0; }

/* ---- Facts — bento-grid treatment (the dominant 2026 feature-section
   pattern: asymmetric cells, hierarchy by size AND color, ghost numerals,
   generous rounding, hover micro-interaction). First fact = full-width hero
   cell in navy gradient with the site's own cyan hero-glow; facts 2-3 side
   by side in white. Auto-numbered via CSS counters — zero markup changes.
   Used on: Quem Somos, Cooperação, Presencial/Online, In Company. ---- */
.itpd-facts{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:36px 0 36px; }
@media (max-width:640px){ .itpd-facts{ grid-template-columns:1fr; } }
.itpd-fact{ position:relative; overflow:hidden; border-radius:16px; padding:26px; background:#fff; border:1px solid var(--line); box-shadow:0 2px 12px rgba(1,9,45,.05); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.itpd-fact:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(1,9,45,.10); }
.itpd-fact::after{ content:''; position:absolute; right:20px; top:20px; width:32px; height:22px; background:repeating-linear-gradient(90deg, var(--pale) 0 4px, transparent 4px 11px); z-index:0; pointer-events:none; }
.itpd-fact__label, .itpd-fact__text{ position:relative; z-index:1; }
.itpd-fact__label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:10px; }
.itpd-fact__text{ font-size:15px; color:var(--slate); line-height:1.7; margin:0; }

/* Hero cell — full-width, navy gradient, cyan glow, highest contrast */
.itpd-fact:first-child{ grid-column:1 / -1; background:linear-gradient(135deg,#0A1D4C 0%,#01092D 100%); border-color:rgba(1,189,235,.25); }
.itpd-fact:first-child::before{ content:''; position:absolute; top:-70px; right:-40px; width:240px; height:240px; background:radial-gradient(circle, rgba(1,189,235,.28), transparent 68%); pointer-events:none; }
.itpd-fact:first-child::after{ background:repeating-linear-gradient(90deg, rgba(1,189,235,.4) 0 4px, transparent 4px 11px); }
.itpd-fact:first-child .itpd-fact__label{ color:var(--accent); }
.itpd-fact:first-child .itpd-fact__text{ color:#C9D2E0; max-width:560px; }
.itpd-fact:first-child:hover{ box-shadow:0 12px 30px rgba(1,9,45,.30); border-color:rgba(1,189,235,.5); }

/* ---- Lede — a larger opening paragraph, distinct from body copy, so long-form
   articles have a clear entry point instead of starting flat ---- */
.itpd-lede{ font-size:19px; line-height:1.7; color:var(--ink); font-weight:500; }

/* ---- Pull quote — extracts one strong sentence as a visual break in long prose ---- */
.itpd-pullquote{ border-left:3px solid var(--primary); padding:2px 0 2px 28px; margin:40px 0; }
.itpd-pullquote p{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; line-height:1.5; color:var(--ink); margin:0; }

/* ---- Site-wide footer (injected via astra_footer_before) — multi-column,
   editorial layout: brand / navegação / contato / redes sociais, plus its own
   copyright line (Astra's default footer is hidden to avoid a duplicate). ---- */
.itpd-footer-extra{ background:var(--ink); padding:56px 0 0; }
.itpd-footer-extra__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; }
@media (max-width:820px){ .itpd-footer-extra__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .itpd-footer-extra__grid{ grid-template-columns:1fr; } }

.itpd-footer-col{ display:flex; flex-direction:column; gap:12px; }
.itpd-footer-col--brand{ justify-content:flex-start; }
.itpd-footer-col__label{ font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5A6E96; margin:0 0 6px; }

.itpd-footer-logo-img{ width:180px; max-width:100%; height:auto; align-self:flex-start; }

.itpd-footer-link{ color:#C9D2E0; font-size:14px; border-bottom:1px solid transparent; width:fit-content; }
.itpd-footer-link:hover{ color:#fff; border-bottom-color:currentColor; }
.itpd-footer-link--caps{ font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

.itpd-footer-extra__bottom{ border-top:1px solid #14285C; padding:20px 0; }
.itpd-footer-extra__bottom p{ margin:0; font-size:12px; color:#5A6E96; }

/* ---- LGPD cookie consent banner — fixed bottom bar, hidden by default,
   shown via JS (itpd-cookie-banner.is-visible) only on first visit. Uses
   .itpd-btn--ghost for the secondary action since it sits on a dark
   background — .itpd-btn--outline's dark border/text would be invisible here. ---- */
.itpd-cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:10000; background:var(--ink); padding:20px 24px; display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:0 -4px 20px rgba(0,0,0,.15); }
.itpd-cookie-banner.is-visible{ display:flex; }
.itpd-cookie-banner__text{ flex:1 1 320px; min-width:0; }
.itpd-cookie-banner__text p{ margin:0; font-size:13px; line-height:1.6; color:#C9D2E0; }
.itpd-cookie-banner__text a{ color:var(--accent); border-bottom:1px solid currentColor; }
.itpd-cookie-banner__actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.itpd-cookie-banner__actions .itpd-btn{ padding:11px 20px; font-size:14px; white-space:nowrap; }
@media (max-width:600px){
  .itpd-cookie-banner{ justify-content:center; padding:16px 18px; gap:14px; }
  .itpd-cookie-banner__actions{ justify-content:stretch; }
  .itpd-cookie-banner__actions .itpd-btn{ flex:1; text-align:center; }
}

/* ---- Plain bulleted list — a general-purpose version of what was previously
   only scoped to .itpd-course-layout, since prose pages elsewhere (Política
   de Privacidade, etc.) need basic bulleted lists too. The base reset above
   strips all <ul> styling by default, so this restores it deliberately. ---- */
.itpd-article__body ul.itpd-plain-list{ list-style:disc; padding-left:20px; color:var(--slate); font-size:16px; line-height:1.8; margin:0 0 1.2em; }
.itpd-article__body ul.itpd-plain-list li{ margin-bottom:.5em; }

.abagge-logo { max-height: 3.8rem !important; }