/* Portfolio visual consistency layer
   Global components stay consistent, while each page keeps its own composition. */

:root {
  --ls-content-width: min(1180px, calc(100% - 48px));
  --ls-section-space: clamp(72px, 7vw, 108px);
  --ls-card-radius: 24px;
  --ls-control-radius: 12px;
  --ls-soft-shadow: 0 18px 50px rgba(13, 26, 52, .07);
}

html[data-theme="dark"] {
  --ls-soft-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

body:not(.admin-body) {
  color: var(--theme-text, #0D1A34);
}

body:not(.admin-body) main {
  position: relative;
  min-height: 60vh;
}

/* Header */
body:not(.admin-body) .header {
  position: sticky;
  top: 0;
  z-index: 100;
}

body:not(.admin-body) .nav {
  min-height: 72px;
}

body:not(.admin-body) .brand {
  gap: 12px;
  color: var(--theme-text, #0D1A34);
  font-weight: 800;
}

body:not(.admin-body) .nav-links,
body:not(.admin-body) .nav-links a {
  border-radius: 999px;
}

/* Opening rhythm only. Page-specific layouts keep their own sizing. */
body:not(.admin-body) .page-hero,
body:not(.admin-body) .about-showcase,
body:not(.admin-body) .competencies-showcase,
body:not(.admin-body) .contact-showcase,
body:not(.admin-body) .projects-showcase__hero {
  background-image: none !important;
}

body:not(.admin-body) .page-hero > .container,
body:not(.admin-body) .about-showcase > .container,
body:not(.admin-body) .competencies-showcase > .container,
body:not(.admin-body) .contact-showcase > .container,
body:not(.admin-body) .projects-showcase__hero > .container {
  position: relative;
  z-index: 2;
}

/* Kickers */
body:not(.admin-body) .section-kicker,
body:not(.admin-body) .hero-eyebrow,
body:not(.admin-body) .about-label,
body:not(.admin-body) .cpx-group {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #9487E9) 26%, var(--theme-border, #D9E0E7));
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-accent-2, #B0A9F1) 13%, var(--theme-surface-strong, #FFFFFF));
  color: var(--theme-text, #0D1A34);
  font-family: Manrope, Arial, sans-serif !important;
  font-size: .79rem;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

body:not(.admin-body) .section-kicker::before {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--theme-accent, #9487E9) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-accent, #9487E9) 13%, transparent) !important;
}

/* Typography: family and color are global; scale stays page-specific. */
body:not(.admin-body) .page-title,
body:not(.admin-body) .about-title,
body:not(.admin-body) .contact-title,
body:not(.admin-body) .cpx-title,
body:not(.admin-body) .projects-showcase__title,
body:not(.admin-body) .section-head h2,
body:not(.admin-body) .about-section-head h2,
body:not(.admin-body) .about-objective h2,
body:not(.admin-body) .about-goals h2,
body:not(.admin-body) .cpx-level-head h2,
body:not(.admin-body) .resume-section__head h2 {
  font-family: Manrope, Arial, sans-serif !important;
}

body:not(.admin-body) .page-description,
body:not(.admin-body) .about-lead,
body:not(.admin-body) .contact-intro > p,
body:not(.admin-body) .cpx-desc,
body:not(.admin-body) .projects-showcase__description {
  color: var(--theme-text-soft, #344055) !important;
  font-family: Inter, Arial, sans-serif !important;
  line-height: 1.72 !important;
}

/* Cards and surfaces */
body:not(.admin-body) .card,
body:not(.admin-body) .project-card,
body:not(.admin-body) .timeline-card,
body:not(.admin-body) .cert-card,
body:not(.admin-body) .about-side,
body:not(.admin-body) .about-objective,
body:not(.admin-body) .about-edu,
body:not(.admin-body) .cpx-card,
body:not(.admin-body) .cpx-level-card,
body:not(.admin-body) .contact-message-card,
body:not(.admin-body) .resume-main,
body:not(.admin-body) .resume-sidebar,
body:not(.admin-body) .portfolio-pillar,
body:not(.admin-body) .projects-feature,
body:not(.admin-body) .quote-panel {
  border-radius: var(--ls-card-radius) !important;
  border-color: var(--theme-border, #D9E0E7) !important;
  box-shadow: var(--ls-soft-shadow) !important;
}

/* Restore intentionally dark feature cards. */
body:not(.admin-body) .about-side--dark {
  color: #F8FAFC !important;
  background: linear-gradient(145deg, #263142, #3D485C) !important;
  border-color: transparent !important;
}

body:not(.admin-body) .cpx-card--big {
  color: #F8FAFC !important;
  background: linear-gradient(145deg, #263142, #3D485C) !important;
  border-color: transparent !important;
}

body:not(.admin-body) .cpx-card--big .cpx-skill-title,
body:not(.admin-body) .cpx-card--big .cpx-skill-desc {
  color: #F8FAFC !important;
}

body:not(.admin-body) .cpx-card--big .cpx-skill-desc {
  opacity: .78;
}

body:not(.admin-body) .cpx-card--big .cpx-group {
  color: #F8FAFC !important;
  background: rgba(248, 250, 252, .08) !important;
  border-color: rgba(248, 250, 252, .16) !important;
}

/* Pills, filters and controls */
body:not(.admin-body) .chip,
body:not(.admin-body) .tech-list span,
body:not(.admin-body) .hero-sector-tags span,
body:not(.admin-body) .filter-btn,
body:not(.admin-body) .showcase-filter,
body:not(.admin-body) .timeline-status,
body:not(.admin-body) .timeline-meta span,
body:not(.admin-body) .about-chips span,
body:not(.admin-body) .cpx-chips span {
  border-radius: 999px !important;
  border-color: var(--theme-border, #D9E0E7) !important;
}

body:not(.admin-body) .btn,
body:not(.admin-body) input,
body:not(.admin-body) textarea,
body:not(.admin-body) select {
  border-radius: var(--ls-control-radius) !important;
}

/* Divider language */
body:not(.admin-body) main > section + section,
body:not(.admin-body) .about-objective,
body:not(.admin-body) .about-education,
body:not(.admin-body) .about-goals,
body:not(.admin-body) .cpx-level-section,
body:not(.admin-body) .cpx-summary,
body:not(.admin-body) .timeline-section,
body:not(.admin-body) .resume-page > .section {
  border-top: 0 !important;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 7%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 93%,
    transparent 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: var(--ls-section-divider-width, min(1180px, calc(100% - 48px))) 1px !important;
}

body:not(.admin-body) .projects-showcase__filters-divider {
  width: var(--ls-section-divider-width, min(1180px, calc(100% - 48px))) !important;
  max-width: none !important;
  height: 1px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 7%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 93%,
    transparent 100%
  ) !important;
}

/* Footer */
body:not(.admin-body) .footer {
  position: relative;
  border-top: 0 !important;
  background-color: color-mix(in srgb, var(--theme-surface-strong, #FFFFFF) 72%, transparent) !important;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 7%,
    var(--ls-section-divider, rgba(91, 100, 116, .22)) 93%,
    transparent 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: var(--ls-section-divider-width, min(1180px, calc(100% - 48px))) 1px !important;
}

body:not(.admin-body) .footer-grid {
  min-height: 88px;
  align-items: center;
}

body:not(.admin-body) .socials {
  gap: 22px;
}

body:not(.admin-body) .socials a {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--theme-text-soft, #344055) !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-weight: 700;
}

/* Shared opening rhythm: every internal page starts at the same vertical position. */
body:not(.admin-body) .page-hero,
body:not(.admin-body) .about-showcase,
body:not(.admin-body) .competencies-showcase,
body:not(.admin-body) .contact-showcase,
body:not(.admin-body) .projects-showcase__hero {
  padding-top: clamp(52px, 4.5vw, 68px) !important;
}

/* CONTACT: compact the first viewport without sacrificing form readability. */
body:not(.admin-body) .contact-showcase {
  min-height: 0 !important;
  padding-bottom: clamp(56px, 6vw, 80px) !important;
}

body:not(.admin-body) .contact-title {
  max-width: 820px !important;
  margin-top: 16px !important;
  font-size: clamp(2.75rem, 4vw, 4.5rem) !important;
  line-height: .98 !important;
}

body:not(.admin-body) .contact-intro > p {
  margin-top: 14px !important;
}

body:not(.admin-body) .contact-availability {
  margin-top: 18px !important;
  padding-block: 9px !important;
}

body:not(.admin-body) .contact-message-card {
  margin-top: 28px !important;
  padding: 24px !important;
}

body:not(.admin-body) .contact-message-card .form {
  gap: 14px !important;
}

body:not(.admin-body) .contact-message-card .field label {
  margin-bottom: 6px !important;
}

body:not(.admin-body) .contact-message-card .field input {
  min-height: 48px;
}

body:not(.admin-body) .contact-message-card .field textarea {
  min-height: 118px !important;
}

/* SOBRE: one-line headline without overflow or dark surface. */
body:not(.admin-body) .about-showcase {
  padding-top: clamp(52px, 4.5vw, 68px) !important;
}

body:not(.admin-body) .about-intro {
  max-width: 1180px !important;
}

body:not(.admin-body) .about-title {
  display: block !important;
  max-width: 1180px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  color: var(--theme-text, #0D1A34) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(2.75rem, 3.35vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

body:not(.admin-body) .about-lead {
  max-width: 860px !important;
  margin-top: 20px !important;
}

/* SOBRE: cards separated by a single clean vertical divider. */
body:not(.admin-body) .about-bridge {
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  margin-top: 34px !important;
}

body:not(.admin-body) .about-connector {
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
}

body:not(.admin-body) .about-connector span {
  display: block !important;
  width: 1px !important;
  height: min(310px, 82%) !important;
  min-height: 260px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-border, #D9E0E7) 88%, #5B6474 12%) 12%,
    color-mix(in srgb, var(--theme-border, #D9E0E7) 88%, #5B6474 12%) 88%,
    transparent 100%
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.admin-body) .about-connector span::before,
body:not(.admin-body) .about-connector span::after {
  display: none !important;
  content: none !important;
}

body:not(.admin-body) .about-objective,
body:not(.admin-body) .about-education,
body:not(.admin-body) .about-goals {
  margin-top: clamp(58px, 6vw, 84px) !important;
  padding-top: clamp(48px, 5vw, 72px) !important;
}

/* PROJETOS: preserve the editorial composition and lock intentional line breaks. */
body:not(.admin-body) .projects-showcase__top {
  grid-template-columns: minmax(470px, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(42px, 5vw, 72px) !important;
  align-items: start !important;
}

body:not(.admin-body) .projects-showcase__intro {
  max-width: 520px !important;
}

body:not(.admin-body) .projects-showcase__title {
  max-width: 520px !important;
  font-size: clamp(3.15rem, 4vw, 4.65rem) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
  white-space: nowrap !important;
}

body:not(.admin-body) .projects-showcase__description {
  max-width: 500px !important;
}

body:not(.admin-body) .portfolio-pillars {
  gap: 16px !important;
}

body:not(.admin-body) .projects-showcase__filters {
  gap: 10px !important;
}

body:not(.admin-body) .projects-showcase__grid {
  gap: 22px !important;
}

/* COMPETENCIAS: restore balanced hero and intended bento hierarchy. */
body:not(.admin-body) .cpx-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr) !important;
  gap: clamp(44px, 5vw, 76px) !important;
  align-items: center !important;
  margin-bottom: clamp(44px, 5vw, 66px) !important;
}

body:not(.admin-body) .cpx-title {
  max-width: 690px !important;
  font-size: clamp(3.15rem, 4vw, 4.25rem) !important;
  line-height: .95 !important;
  letter-spacing: -.058em !important;
}

body:not(.admin-body) .cpx-title em {
  display: block;
}

body:not(.admin-body) .cpx-desc {
  max-width: 500px !important;
}

body:not(.admin-body) .cpx-bento,
body:not(.admin-body) .cpx-level-grid {
  gap: 18px !important;
}

body:not(.admin-body) .cpx-level-section,
body:not(.admin-body) .cpx-summary {
  margin-top: clamp(58px, 6vw, 82px) !important;
  padding-top: clamp(48px, 5vw, 70px) !important;
}

/* Experiences, contact, resume and certificates keep their own type scale. */
body:not(.admin-body) .timeline-section {
  padding-top: clamp(58px, 6vw, 84px) !important;
}

body:not(.admin-body) .timeline-card {
  margin-bottom: 24px;
}

body:not(.admin-body) .contact-intro {
  max-width: 900px;
}

body:not(.admin-body) .contact-message-card {
  margin-top: 28px !important;
}

body:not(.admin-body) .resume-hero__grid,
body:not(.admin-body) .resume-layout {
  gap: clamp(28px, 4vw, 54px) !important;
}

body:not(.admin-body) .cert-grid {
  gap: 20px !important;
}

/* Home keeps its approved composition. */
.home-page-v2 .home-projects-section,
.home-page-v2 .home-method,
.home-page-v2 .home-contact-cta {
  padding-top: var(--ls-section-space) !important;
  padding-bottom: var(--ls-section-space) !important;
}

@media (min-width: 1101px) {
  body:not(.admin-body) .about-title {
    white-space: nowrap !important;
  }
}

@media (max-width: 1160px) {
  body:not(.admin-body) .projects-showcase__top {
    grid-template-columns: 1fr !important;
  }

  body:not(.admin-body) .projects-showcase__title {
    white-space: normal !important;
  }
}

@media (max-width: 1050px) {
  body:not(.admin-body) .cpx-hero {
    grid-template-columns: 1fr !important;
  }

  body:not(.admin-body) .cpx-title {
    max-width: 760px !important;
  }
}

@media (max-width: 980px) {
  :root {
    --ls-content-width: calc(100% - 32px);
  }

  body:not(.admin-body) .about-title {
    white-space: normal !important;
  }

  body:not(.admin-body) .about-bridge {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body:not(.admin-body) .about-connector {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body:not(.admin-body) .section-kicker,
  body:not(.admin-body) .hero-eyebrow,
  body:not(.admin-body) .about-label,
  body:not(.admin-body) .cpx-group {
    min-height: 33px;
    padding-inline: 12px;
    font-size: .7rem;
  }

  body:not(.admin-body) .page-hero,
  body:not(.admin-body) .about-showcase,
  body:not(.admin-body) .competencies-showcase,
  body:not(.admin-body) .contact-showcase,
  body:not(.admin-body) .projects-showcase__hero {
    padding-top: 42px !important;
  }

  body:not(.admin-body) .contact-title {
    font-size: clamp(2.4rem, 11vw, 3.35rem) !important;
  }

  body:not(.admin-body) .contact-message-card {
    padding: 18px !important;
  }

  body:not(.admin-body) .footer-grid {
    min-height: auto;
    padding-block: 28px;
  }

  body:not(.admin-body) .projects-showcase__title {
    font-size: clamp(3rem, 13vw, 4.1rem) !important;
  }

  body:not(.admin-body) .cpx-title {
    font-size: clamp(2.8rem, 12vw, 4rem) !important;
  }
}