/* Maxsign shared design tokens and responsive type scale. */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.75rem, 1.45rem + 1.25vw, 2rem);
    --text-4xl: clamp(2rem, 1.6rem + 1.7vw, 2.5rem);
    --text-5xl: clamp(2.25rem, 1.55rem + 3vw, 3rem);
    --text-display: clamp(2rem, 1.3rem + 3.2vw, 3rem);

    --leading-tight: 1.15;
    --leading-heading: 1.2;
    --leading-body: 1.55;
    --leading-relaxed: 1.65;

    --control-min-size: 2.75rem;
    --control-min-size-comfortable: 3rem;
    --page-gutter: clamp(1.25rem, 5vw, 4rem);
}

html {
    font-family: var(--font-sans);
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Keep heading hierarchy consistent even where page markup uses Tailwind sizes. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    font-family: var(--font-sans);
    text-wrap: balance;
}

main h1,
main h1[class] {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
}

main h2,
main h2[class] {
    font-size: var(--text-4xl);
    line-height: var(--leading-heading);
}

main h3,
main h3[class] {
    font-size: var(--text-2xl);
    line-height: var(--leading-heading);
}

main h4,
main h4[class] {
    font-size: var(--text-xl);
    line-height: var(--leading-heading);
}

main p {
    text-wrap: pretty;
}

main .max-w-container-max {
    padding-inline: var(--page-gutter);
}

main p,
main p[class] {
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

/* Reusable design-system hooks for future content and incremental migration. */
.type-display[class] {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
}

.type-heading-1[class] {
    font-size: var(--text-4xl);
    line-height: var(--leading-heading);
}

.type-heading-2[class] {
    font-size: var(--text-2xl);
    line-height: var(--leading-heading);
}

.type-body[class] {
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

.type-body-large[class] {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.type-label[class] {
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* High-specificity component rules harmonize Tailwind-based button variants. */
site-button > a,
site-button > a[class] {
    box-sizing: border-box;
    min-block-size: var(--control-min-size-comfortable);
    max-inline-size: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    justify-content: center;
}

site-button[variant="cta"] > a {
    padding-block: 1rem;
    padding-inline: clamp(1rem, 5vw, 2.5rem);
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    line-height: 1.3;
}

site-button[variant="whatsapp"] > a,
site-button[variant="whatsapp-pill"] > a {
    padding-block: 0.875rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

site-button a:focus-visible,
site-header a:focus-visible,
site-header button:focus-visible,
site-footer a:focus-visible,
site-whatsapp-float a:focus-visible {
    outline: 3px solid #001256;
    outline-offset: 3px;
}

site-header #mobile-menu-btn {
    box-sizing: border-box;
    min-inline-size: var(--control-min-size-comfortable);
    min-block-size: var(--control-min-size-comfortable);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

site-header nav > div:last-child > a {
    box-sizing: border-box;
    min-block-size: var(--control-min-size-comfortable);
    justify-content: center;
    font-size: var(--text-sm);
}

site-header #mobile-menu-dropdown a {
    min-block-size: var(--control-min-size);
    display: flex;
    align-items: center;
}

site-header #mobile-menu-dropdown a[href*="certificados"] {
    padding-block: 0.625rem;
}

site-header nav ul a {
    min-block-size: var(--control-min-size);
}

site-footer a[aria-label],
site-footer a[href^="tel:"],
site-footer a[href^="mailto:"] {
    box-sizing: border-box;
    min-block-size: var(--control-min-size);
    align-items: center;
}

site-footer a[aria-label] {
    min-inline-size: var(--control-min-size);
    display: inline-flex;
    justify-content: center;
}

site-footer a[href^="tel:"],
site-footer a[href^="mailto:"] {
    display: inline-flex;
}

site-footer a[href^="mailto:"] span {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

site-whatsapp-float a {
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
}

@media (max-width: 639px) {
    :root {
        --page-gutter: 1.25rem;
    }

    site-button[variant="hero"] > a,
    site-button[variant="primary"] > a,
    site-button[variant="whatsapp"] > a,
    site-button[variant="whatsapp-pill"] > a,
    site-button[variant="cta"] > a {
        inline-size: 100%;
    }

    main h1 {
        max-inline-size: 100%;
    }
}

@media (min-width: 768px) {
    site-header #mobile-menu-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-pulse {
        animation: none !important;
    }
}

.hexagon-pattern {
    background-color: #1B2A6B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.91v12.18l10.99 6.34 11-6.34V17.91l-11-6.34L3 17.91zM0 15l12.98-7.5V0h2v7.5L28 15v1h-2v15h2v1L14.98 39.5V49h-2v-9.5L0 32v-1h2V16H0v-1z'/%3E%3C/svg%3E");
}