.ec-page {
    --ec-blue: #264d7a;
    --ec-deep-blue: #304271;
    --ec-turquoise: #15a8ab;
    --ec-gray: #6d6d6d;
    --ec-pale: #f3f8fb;
    color: var(--ec-gray);
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    overflow: clip;

    &, & *, & *::before, & *::after { box-sizing: border-box; }
    & h1, & h2, & h3, & p, & ul { margin: 0; padding: 0; }
    & h1, & h2, & h3 { font-weight: 700; line-height: 1.25; }
    & img { display: block; max-width: 100%; }
    & a { text-decoration: none; }
    & section { scroll-margin-top: 90px; }
}

.ec-container {
    width: min(calc(100% - 40px), 1000px);
    margin-inline: auto;
}

.ec-hero {
    background: #f2f9fd;

    & .ec-hero-media { height: 200px; overflow: hidden; }
    & .ec-hero-mobile { display: block; width: 100%; height: 100%; }
    & .ec-hero-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: 84% center; }
    & .ec-hero-desktop { display: none; }
    & .ec-hero-content { display: grid; justify-items: start; gap: 16px; padding-block: 24px 32px; }
    & h1 { color: var(--ec-blue); font-size: 30px; }
    & h2 { max-width: 680px; color: var(--ec-turquoise); font-size: 22px; font-weight: 600; }
    & p { max-width: 690px; color: var(--ec-blue); font-size: 15px; }
}

.ec-section {
    padding-block: 32px;

    &:nth-of-type(odd) { background: var(--ec-pale); }
    & .ec-section-heading { max-width: 670px; margin: 0 auto 20px; text-align: center; }
    & h2 { color: var(--ec-turquoise); font-size: 28px; }
    & .ec-section-heading p { margin-top: 16px; font-size: 15px; text-wrap: pretty; }
}

.ec-platform-links {
    display: grid;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto 28px;
}

.ec-platform-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 20px;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 3px 7px #0002;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease, transform .28s ease;

    & svg { flex: none; width: 28px; height: 28px; }
    &:hover { box-shadow: 0 5px 12px #0003; transform: translateY(-3px); }
    &:focus-visible { outline: 3px solid var(--ec-deep-blue); outline-offset: 3px; }
}

.ec-platform-link--youtube {
    --ec-platform-surface: #ff0000;
    background: #ff0000;
    color: #fff;

    & svg path { transition: fill .28s ease; }
    &:hover { border-color: #ff0000; background: #fff; color: #ff0000; }
    &:hover svg path { fill: #fff; }
}

.ec-platform-link--spotify {
    --ec-platform-surface: #1db954;
    background: #1db954;
    color: #191414;

    &:hover { border-color: #1db954; background: #fff; color: #191414; font-weight: 700; }
    &:hover svg { color: #191414; }
}

.ec-year-grid {
    display: grid;
    gap: 20px;
    max-width: 970px;
    margin-inline: auto;
    align-items: stretch;
}

.ec-year-card {
    min-width: 0;
    padding: 20px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 3px 7px #0002;

    & h3 { margin-bottom: 16px; color: var(--ec-blue); font-size: 22px; text-align: center; }
}

.ec-info-card {
    max-width: 970px;
    margin-inline: auto;
    text-align: center;

    & p { max-width: 780px; margin-inline: auto; font-size: 15px; text-wrap: pretty; }
}

.ec-events {
    display: grid;
    align-content: start;
    gap: 16px;
    list-style: none;

    & li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
    & img { flex: none; width: 28px; height: 28px; object-fit: contain; }
    & li > span { display: grid; min-width: 0; align-content: start; }
    & strong { color: var(--ec-gray); font-size: 16px; font-weight: 600; line-height: 1.3; }
    & small { color: var(--ec-gray); font-size: 15px; font-weight: 500; line-height: 1.3; }
}

.ec-section--treinamentos {
    & .ec-section-heading { margin-bottom: 17px; }
    & .ec-training-subtitle { margin-bottom: 21px; color: var(--ec-blue); font-size: 22px; text-align: center; }
}

.ec-training-list {
    display: grid;
    gap: 14px;
    max-width: 970px;
    margin-inline: auto;
}

.ec-training-month {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 3px 7px #0002;

    & summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 58px;
        padding: 15px 20px;
        color: var(--ec-blue);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
        list-style: none;
        cursor: pointer;
    }

    & summary::-webkit-details-marker { display: none; }
    & summary:focus-visible { outline: 3px solid var(--ec-deep-blue); outline-offset: -3px; }
    & .ec-accordion-icon {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--ec-turquoise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
        transition: transform .2s ease;
    }
    &[open] .ec-accordion-icon { transform: rotate(90deg); }
    & .ec-training-events { padding: 20px 20px 22px; border-top: 1px solid #e8e8e8; }
}

.ec-more {
    padding-block: 36px 50px;
    text-align: center;

    & .ec-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding: 10px 16px;
        border-radius: 18px;
        background: var(--ec-deep-blue);
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        text-align: left;

        & img { flex: none; width: 28px; height: 28px; object-fit: contain; }
    }

    & .ec-more-copy { max-width: 720px; margin: 15px auto 0; font-size: 15px; }
}

.ec-button {
    width: fit-content;
    max-width: 100%;
    min-height: 43px;
    margin: 19px auto 0;
    padding: 9px 22px;
    border-radius: 10px;
    background: var(--ec-turquoise);
    color: #fff !important;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    transition: background-color .2s ease, transform .2s ease;

    &:hover { background: #128e91; transform: scale(1.035); }
    &:focus-visible { outline: 3px solid var(--ec-deep-blue); outline-offset: 3px; }
}

.ec-contact-grid {
    display: grid;
    gap: 13px;
    max-width: 905px;
    margin: 28px auto 0;
    text-align: left;
}

.ec-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 70px;
    padding: 13px 17px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 7px #0002;
    color: var(--ec-gray);
    transition: box-shadow .2s ease, transform .2s ease;

    &:hover { color: var(--ec-gray); box-shadow: 0 5px 12px #0003; transform: translateY(-3px); }
    &:focus-visible { outline: 3px solid var(--ec-deep-blue); outline-offset: 3px; }
    & img { flex: none; width: 30px; height: 30px; object-fit: contain; }
    & span { display: grid; min-width: 0; gap: 2px; }
    & strong { color: var(--ec-turquoise); font-size: 16px; line-height: 1.25; }
    & small { min-width: 0; color: var(--ec-gray); font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
}

@media (min-width: 480px) {
    .ec-container { width: min(calc(100% - 48px), 1000px); }
    .ec-hero { & .ec-hero-media { height: 235px; } }
}

@media (min-width: 576px) {
    .ec-hero { & .ec-hero-media { height: 280px; } }
    .ec-platform-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-contact:last-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
    .ec-container { width: min(calc(100% - 56px), 1000px); }
    .ec-hero {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 420px;
        overflow: hidden;

        & .ec-hero-media { position: absolute; inset: 0; height: 100%; }
        & .ec-hero-media::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #f2f9fdf2 0%, #f2f9fddd 35%, #f2f9fd52 56%, transparent 72%); pointer-events: none; }
        & .ec-hero-mobile { height: 100%; }
        & .ec-hero-mobile img { object-position: center; }
        & .ec-hero-content { position: relative; z-index: 2; width: min(calc(100% - 56px), 1000px); max-width: 1000px; padding-block: 36px; }
        & .ec-hero-content > * { max-width: 470px; }
        & h1 { font-size: 36px; }
        & p { font-size: 16px; }
    }
    .ec-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ec-contact:last-child { grid-column: auto; }
}

@media (min-width: 992px) {
    .ec-hero {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 469px;
        overflow: hidden;

        & .ec-hero-media { position: absolute; inset: 0; height: 100%; }
        & .ec-hero-media::after { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90.8deg, #efefef 0.2%, #efefefe6 21.4%, #efefeff5 41.6%, #efefef40 53%, transparent 62.3%); pointer-events: none; }
        & .ec-hero-mobile { display: none; }
        & .ec-hero-desktop { position: absolute; inset: 0; display: block; }
        & .ec-hero-layer { position: absolute; max-width: none; }
        & .ec-hero-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
        & .ec-hero-layer--main { left: 41.85%; top: 0; width: 58.16%; height: 100%; }
        & .ec-hero-layer--overlay { left: 34.81%; top: -29.31%; width: 48.25%; height: 158.69%; opacity: .4; }
        & .ec-hero-layer--photo { left: 41.85%; top: 0; width: 58.16%; height: 100%; }
        & .ec-hero-layer--texture { left: -73.75%; top: -49.47%; width: 115.63%; height: 198.79%; opacity: .8; }
        & .ec-hero-content { position: relative; z-index: 3; width: min(calc(100% - 56px), 1064px); gap: 12px; padding-block: 40px; }
        & .ec-hero-content > * { max-width: 530px; }
        & h1 { font-size: 39px; }
        & h2 { font-size: 22px; }
        & p { font-size: 16px; }
    }

    .ec-section { padding-block: 46px 50px; }
    .ec-section { & h2 { font-size: 32px; } & .ec-section-heading p { font-size: 16px; } }
    .ec-year-card { border-radius: 36px; & h3 { font-size: 26px; } }
    .ec-info-card { & p { font-size: 16px; } }
    .ec-events { & strong { font-size: 18px; } & small { font-size: 16.875px; } }
    .ec-section--palestras, .ec-section--podcast {
        & .ec-events { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    }
    .ec-section--workshops {
        & .ec-year-card--workshops-2026 .ec-events { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    }
    .ec-training-month {
        & summary { padding: 20px 30px; font-size: 26px; }
        & .ec-training-events { padding: 30px; }
    }
    .ec-more { padding-block: 45px 58px; }
    .ec-contact-grid { gap: 22px; }
}

@media (min-width: 1200px) {
    .ec-hero { & .ec-hero-content { width: min(calc(100% - 56px), 1064px); } }
    .ec-section { & .ec-section-heading { margin-bottom: 26px; } }
    .ec-year-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-page { &, & *, & *::before, & *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
}

@media (prefers-reduced-motion: no-preference) {
    .ec-motion-preparing .ec-hero-content,
    .ec-motion-preparing .ec-reveal,
    .ec-motion-preparing .ec-list-item { visibility: hidden; }
}