.widescreen-sections,
.wp-block-headcore-widescreen-sections {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: transparent !important;
}

.widescreen-sections > *,
.wp-block-headcore-widescreen-sections > * {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 4rem 0 !important;
    background-color: #111 !important;
    background: #111 !important;
    color: #ffffff;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: none;
    /* Estado inicial da animação */
    opacity: 0 !important;
    transition: opacity 0.8s ease-out;
}

.widescreen-sections > *:last-child,
.wp-block-headcore-widescreen-sections > *:last-child {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.widescreen-sections > .wp-block-group,
.wp-block-headcore-widescreen-sections > .wp-block-group,
.widescreen-sections > .wp-block-group__inner-container,
.wp-block-headcore-widescreen-sections > .wp-block-group__inner-container,
.widescreen-sections > .wp-block-group.has-background,
.wp-block-headcore-widescreen-sections > .wp-block-group.has-background {
    background-color: transparent !important;
    background: transparent !important;
}

/* Alinha TODO o conteúdo interno com o container do site - mesma lógica do main */
.widescreen-sections > * > *,
.wp-block-headcore-widescreen-sections > * > * {
    max-width: var(--container-max, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-padding, clamp(1.5rem, 4vw, 3rem)) !important;
    padding-right: var(--container-padding, clamp(1.5rem, 4vw, 3rem)) !important;
    box-sizing: border-box;
}

/* Exceções: elementos que devem ocupar largura total */
.widescreen-sections > * > .alignfull,
.wp-block-headcore-widescreen-sections > * > .alignfull,
.widescreen-sections > * .alignfull,
.wp-block-headcore-widescreen-sections > * .alignfull {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Alinha conteúdo numerado (listas) com o texto superior */
.widescreen-sections > * ol,
.widescreen-sections > * ul,
.wp-block-headcore-widescreen-sections > * ol,
.wp-block-headcore-widescreen-sections > * ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style-position: outside;
}

.widescreen-sections > * ol li,
.widescreen-sections > * ul li,
.wp-block-headcore-widescreen-sections > * ol li,
.wp-block-headcore-widescreen-sections > * ul li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0;
}

.widescreen-sections > * *,
.wp-block-headcore-widescreen-sections > * * {
    color: #ffffff;
}

.widescreen-sections > * a,
.wp-block-headcore-widescreen-sections > * a {
    color: #ffffff;
}

.widescreen-sections > * h1,
.widescreen-sections > * h2,
.widescreen-sections > * h3,
.widescreen-sections > * h4,
.widescreen-sections > * h5,
.widescreen-sections > * h6,
.widescreen-sections > * .wp-block-heading,
.wp-block-headcore-widescreen-sections > * h1,
.wp-block-headcore-widescreen-sections > * h2,
.wp-block-headcore-widescreen-sections > * h3,
.wp-block-headcore-widescreen-sections > * h4,
.wp-block-headcore-widescreen-sections > * h5,
.wp-block-headcore-widescreen-sections > * h6,
.wp-block-headcore-widescreen-sections > * .wp-block-heading {
    color: #ffffff;
}

.widescreen-sections > * p,
.widescreen-sections > * .wp-block-paragraph,
.wp-block-headcore-widescreen-sections > * p,
.wp-block-headcore-widescreen-sections > * .wp-block-paragraph {
    color: #ffffff;
}

/* Estado animado - aplicado via JavaScript quando o elemento entra no viewport */
.widescreen-sections > *.headcore-animated,
.wp-block-headcore-widescreen-sections > *.headcore-animated {
    opacity: 1 !important;
}

/* Estilos para animação de texto caractere por caractere */
.widescreen-sections .char-reveal,
.wp-block-headcore-widescreen-sections .char-reveal {
    opacity: 0;
    transition: opacity 0.4s ease;
    display: inline-block;
    white-space: nowrap;
}

/* Garante que a quebra de linha aconteça em palavras, não em caracteres */
.widescreen-sections p,
.widescreen-sections .wp-block-paragraph,
.widescreen-sections h1,
.widescreen-sections h2,
.widescreen-sections h3,
.widescreen-sections h4,
.widescreen-sections h5,
.widescreen-sections h6,
.widescreen-sections .wp-block-heading,
.wp-block-headcore-widescreen-sections p,
.wp-block-headcore-widescreen-sections .wp-block-paragraph,
.wp-block-headcore-widescreen-sections h1,
.wp-block-headcore-widescreen-sections h2,
.wp-block-headcore-widescreen-sections h3,
.wp-block-headcore-widescreen-sections h4,
.wp-block-headcore-widescreen-sections h5,
.wp-block-headcore-widescreen-sections h6,
.wp-block-headcore-widescreen-sections .wp-block-heading {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.widescreen-sections .char-reveal[style*="opacity: 1"],
.wp-block-headcore-widescreen-sections .char-reveal[style*="opacity: 1"] {
    opacity: 1 !important;
}