/*
 * Atirao shared typography system
 *
 * This file is intentionally loaded after page-specific stylesheets.
 * It harmonizes the public website without flattening component hierarchy.
 */

@font-face {
    font-family: "Atirao Sans";
    src: url("../fonts/Axiforma-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Atirao Sans";
    src: url("../fonts/Axiforma-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Atirao Sans";
    src: url("../fonts/Axiforma-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Atirao Sans";
    src: url("../fonts/Axiforma-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --atirao-font-sans: "Atirao Sans", Arial, Helvetica, sans-serif;

    --atirao-text-xs: 0.75rem;
    --atirao-text-sm: 0.875rem;
    --atirao-text-base: 1rem;
    --atirao-text-lead: clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);
    --atirao-section-title-font: var(--atirao-font-sans);
    --atirao-section-title-size: var(--atirao-text-section);
    --atirao-section-title-weight: 700;
    --atirao-section-title-leading: var(--atirao-leading-heading);
    --atirao-section-title-letter-spacing: 0;
    --atirao-section-title-color: inherit;
    --atirao-section-title-color-light: #111114;
    --atirao-section-title-color-dark: #ffffff;
    --atirao-section-copy-size: var(--atirao-text-lead);
    --atirao-section-copy-color: #96979c;
    --atirao-section-copy-font: var(--atirao-font-sans);
    --atirao-section-copy-weight: 400;
    --atirao-section-copy-leading: 1.7;
    --atirao-section-copy-max-width: 760px;
    --atirao-section-eyebrow-size: var(--atirao-text-sm);
    --atirao-section-eyebrow-color: #e53740;
    --atirao-section-eyebrow-weight: 600;
    --atirao-text-card-title: clamp(1.125rem, 0.7vw + 0.95rem, 1.5rem);
    --atirao-text-section: clamp(2rem, 2.3vw + 1rem, 3.25rem);
    --atirao-text-hero: clamp(2.25rem, 2vw + 0.95rem, 3.5rem);
    --atirao-text-display: var(--atirao-text-hero);

    --atirao-leading-tight: 1.12;
    --atirao-leading-heading: 1.2;
    --atirao-leading-body: 1.65;

    /* Compatibility with the legacy public stylesheets. */
    --titleSize: var(--atirao-section-title-size);
    --discrSize: var(--atirao-text-base);
    --linksSize: 0.9375rem;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
.atirao-home {
    font-family: var(--atirao-font-sans);
    font-size: var(--atirao-text-base);
    font-weight: 400;
    line-height: var(--atirao-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: #f7f7f5;
    /* margin-bottom: 83px; */
}

body :where(button, input, select, textarea) {
    font: inherit;
}

body :where(h1, h2, h3, h4, h5, h6),
.atirao-home :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--atirao-font-sans) !important;
    text-wrap: balance;
}

body main :where(p, li),
.atirao-home main :where(p, li) {
    line-height: var(--atirao-leading-body);
}

/*
 * Shared style for section titles.
 * Use .section-heading or .section-title-text in new markup. Color is inherited
 * from the section so light/dark backgrounds can keep the right contrast.
 */
body :is(.section-heading, .section-title-text) {
    color: var(--atirao-section-title-color) !important;
    font-family: var(--atirao-section-title-font) !important;
    font-size: var(--atirao-section-title-size) !important;
    font-style: normal !important;
    font-weight: var(--atirao-section-title-weight) !important;
    letter-spacing: var(--atirao-section-title-letter-spacing) !important;
    line-height: var(--atirao-section-title-leading) !important;
}

/*
 * Shared text style for copy placed directly under page/section titles.
 * Use .section-copy or .section-undertitle in new markup; the selector below
 * also normalizes the legacy class names already used across the site.
 */
body :is(.section-copy, .section-undertitle, .section-description-text) {
    color: var(--atirao-section-copy-color) !important;
    font-family: var(--atirao-section-copy-font) !important;
    font-size: var(--atirao-section-copy-size) !important;
    font-weight: var(--atirao-section-copy-weight) !important;
    line-height: var(--atirao-section-copy-leading) !important;
    max-width: var(--atirao-section-copy-max-width);
}

/* Reusable section-heading level across legacy and rebuilt pages. */
body main :is(
    .pageTitles,
    .section-title,
    .sectionTitle,
    .section1_title,
    .title_center,
    .main-title,
    .contact-form-title,
    .cfs-title,
    .faq-main-title,
    .offers-section__title,
    .why-atirao__title,
    .methodology-title,
    .cs-cta__title,
    .explanationTopTitle,
    .formMsgtitle
),
.atirao-home :is(
    .atirao-value-proposition__headline,
    .atirao-section-heading h2,
    .atirao-reference-logos__header h2,
    .atirao-partners__title,
    .atirao-methodology__heading h2,
    .atirao-contact__details h2,
    .atirao-cases__heading h2,
    .atirao-contact-cta h2
) {
    color: var(--atirao-section-title-color) !important;
    font-family: var(--atirao-section-title-font) !important;
    font-size: var(--atirao-section-title-size) !important;
    font-style: normal !important;
    font-weight: var(--atirao-section-title-weight) !important;
    line-height: var(--atirao-section-title-leading) !important;
    letter-spacing: var(--atirao-section-title-letter-spacing) !important;
}

body main :is(.containerW, .containerG) :is(
    .pageTitles,
    .section-title,
    .sectionTitle,
    .section1_title,
    .title_center,
    .main-title,
    .contact-form-title,
    .cfs-title,
    .faq-main-title,
    .offers-section__title,
    .why-atirao__title,
    .methodology-title,
    .cs-values__title,
    .cs-cta__title
) {
    --atirao-section-title-color: var(--atirao-section-title-color-light);
}

body main :is(.containerB, .join-values-section, .join-team-section, .why-atirao, .methodology-section, .cs-detail-section--dark, .cs-detail-cta) :is(
    .pageTitles,
    .section-title,
    .sectionTitle,
    .section1_title,
    .title_center,
    .main-title,
    .contact-form-title,
    .cfs-title,
    .faq-main-title,
    .offers-section__title,
    .why-atirao__title,
    .methodology-title,
    .cs-values__title,
    .cs-cta__title
) {
    --atirao-section-title-color: var(--atirao-section-title-color-dark);
}

body main :is(.pageTitles.W) {
    --atirao-section-title-color: var(--atirao-section-title-color-dark);
}

body main :is(.pageTitles.B) {
    --atirao-section-title-color: var(--atirao-section-title-color-light);
}

body main :is(.containerB, .join-values-section, .join-team-section, .why-atirao, .methodology-section, .cs-detail-section--dark, .cs-detail-cta) :is(.pageTitles.B) {
    --atirao-section-title-color: var(--atirao-section-title-color-dark);
}

body main :is(
    .pageTitles,
    .section-title,
    .sectionTitle,
    .section1_title,
    .title_center,
    .main-title,
    .contact-form-title,
    .cfs-title,
    .faq-main-title,
    .offers-section__title,
    .why-atirao__title,
    .methodology-title,
    .cs-values__title,
    .cs-cta__title
) :where(span, strong, em),
.atirao-home :is(
    .atirao-value-proposition__headline,
    .atirao-section-heading h2,
    .atirao-reference-logos__header h2,
    .atirao-partners__title,
    .atirao-methodology__heading h2,
    .atirao-cases__heading h2,
    .atirao-contact-cta h2,
    .atirao-contact__details h2
) :where(span, strong, em) {
    font: inherit !important;
    font-style: normal !important;
}

/* Introductory copy directly supporting a page or section heading. */
body main :is(
    .section-description,
    .section1_description,
    .description,
    .context,
    .underTitle,
    .development-hero__intro,
    .why-atirao__lead,
    .offers-section__description,
    .faq-description,
    .cfs-subtitle,
    .prom-subtitle
),
.atirao-home :is(
    /* .atirao-hero__description, */
    .atirao-partners__intro,
    .atirao-references__intro,
    .atirao-section-heading > p,
    .atirao-value-proposition__copy > p,
    .atirao-contact__details > p,
    .atirao-cases__heading-right > p
) {
    color: var(--atirao-section-copy-color) !important;
    font-family: var(--atirao-section-copy-font) !important;
    font-size: var(--atirao-section-copy-size) !important;
    font-weight: var(--atirao-section-copy-weight) !important;
    line-height: var(--atirao-section-copy-leading) !important;
}

/* Card and content-block titles. */
body main :is(
    .job-title,
    .section1_card_title,
    .feature-title-maroc
),
.atirao-home :is(
    .atirao-blueprint-card h3,
    .atirao-expertise-card h3,
    .atirao-result-card h3,
    .atirao-testimonial h3,
    .atirao-case-card__body h3,
    .atirao-contact__form-heading h3
) {
    font-family: var(--atirao-font-sans) !important;
    font-size: var(--atirao-text-card-title) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.012em;
}

/* Eyebrows, labels, navigation, and buttons share one compact rhythm. */
body :is(
    .section-subtitle,
    .section-subtitleleft,
    .subtitle,
    .breadcrumb,
    .thm-btn,
    .links .menuLink
),
.atirao-home :is(
    .atirao-section-label,
    .atirao-header__nav-button,
    .atirao-header__link,
    .atirao-button
) {
    font-family: var(--atirao-font-sans) !important;
}

body :is(.section-subtitle, .section-subtitleleft, .subtitle),
.atirao-home .atirao-section-label {
    color: var(--atirao-section-eyebrow-color) !important;
    font-size: var(--atirao-section-eyebrow-size) !important;
    font-weight: var(--atirao-section-eyebrow-weight) !important;
    line-height: 1.35 !important;
}

body :where(small),
.atirao-home :where(small) {
    font-size: var(--atirao-text-xs);
    line-height: 1.5;
}

@media (max-width: 767px) {
    :root {
        --atirao-text-base: 0.9375rem;
        --atirao-text-lead: 1rem;
        --atirao-text-card-title: clamp(1.0625rem, 3.8vw, 1.25rem);
        --atirao-text-section: clamp(1.75rem, 7vw, 2.35rem);
        --atirao-text-hero: clamp(1.9rem, 7.5vw, 2.65rem);
        --atirao-text-display: var(--atirao-text-hero);
        --linksSize: 0.875rem;
    }

}

/* Shared hero-title level across legacy and rebuilt pages. */
body .topSection .titleTopSection,
body .titleTopSection,
body .development-hero h1,
body .expertise-hero__title,
body .agency-hero__title,
body .contact-hero-title,
body .cs-hero__title,
body .cs-detail-hero__title,
body .titleTopSectionBlog,
body .titleTopSectionDBlog,
.atirao-home .atirao-hero__title {
    font-family: var(--atirao-font-sans) !important;
    font-size: var(--atirao-text-hero) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

body .topSection .titleTopSection span,
body .titleTopSection span,
body .development-hero h1 span,
body .development-hero h1 strong,
body .expertise-hero__title span,
body .agency-hero__title span,
body .contact-hero-title span,
body .cs-hero__title span,
body .cs-detail-hero__title span,
body .titleTopSectionBlog span,
body .titleTopSectionDBlog span,
.atirao-home .atirao-hero__title span {
    font: inherit !important;
    font-style: normal !important;
}

/* Homepage major titles share one exact typography treatment. */
.atirao-home :is(
    .atirao-hero__title,
    .atirao-value-proposition__headline,
    .atirao-section-heading h2,
    .atirao-reference-logos__header h2,
    .atirao-partners__title,
    .atirao-methodology__heading h2,
    .atirao-cases__heading h2,
    .atirao-contact-cta h2,
    .atirao-contact__details h2
) {
    font-family: var(--atirao-section-title-font) !important;
    font-size: var(--atirao-section-title-size) !important;
    font-style: normal !important;
    font-weight: var(--atirao-section-title-weight) !important;
    letter-spacing: var(--atirao-section-title-letter-spacing) !important;
    line-height: var(--atirao-section-title-leading) !important;
}

.atirao-home :is(
    .atirao-hero__title,
    .atirao-value-proposition__headline,
    .atirao-section-heading h2,
    .atirao-reference-logos__header h2,
    .atirao-partners__title,
    .atirao-methodology__heading h2,
    .atirao-cases__heading h2,
    .atirao-contact-cta h2,
    .atirao-contact__details h2
) span {
    font: inherit !important;
    font-style: normal !important;
}

.atirao-home .atirao-hero__title {
    font-size: var(--atirao-text-hero) !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}