/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Reciprocidalismo
   Breakpoints progressivos para todos os componentes.
   Header e Footer possuem seus próprios responsivos nos
   arquivos header.css e footer.css. Este arquivo cobre
   todos os demais componentes e utilidades globais.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1. DESKTOP GRANDE (até 1280px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .error-nav-grid {
        gap: var(--s-3);
    }
}

/* ═══════════════════════════════════════════════════════════
   2. TABLET / DESKTOP PEQUENO (até 1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* ── Tokens ── */
    :root {
        --fs-hero: clamp(2.2rem, 5vw, 3.5rem);
    }

    /* ── Grids de cards ── */
    .cards-grid,
    .cards-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Featured post ── */
    .featured-post {
        grid-template-columns: 1fr;
    }

    .featured-post-media {
        aspect-ratio: 16/9;
    }

    /* ── Hero interior (single, page) ── */
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        max-width: 340px;
        margin: var(--s-6) auto 0;
    }

    /* ── CTA inner ── */
    .cta-inner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    /* ── Article ── */
    .article-content p:first-of-type::first-letter {
        font-size: 4rem;
    }

    /* ── Page header ── */
    .page-header {
        padding: 8rem 0 3.5rem;
    }

    /* ── Pilares ── */
    .pilares-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pilar-card-title {
        font-size: clamp(0.85rem, 1.2vw, 1rem);
    }

    /* ── Hero home ── */
    .home-hero {
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }

    .home-hero-grid {
        padding-left: 0;
        padding-right: 0;
        min-height: auto;
    }

    .home-hero-content {
        max-width: 100%;
        padding: 0 20px;
    }

    .home-hero-title {
        font-size: clamp(1.75rem, 5vw, 3rem);
    }

    .home-hero-subtitle {
        font-size: 1.05rem;
    }

    .home-hero-desc {
        max-width: 100%;
    }

    .home-hero-timeline-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .home-hero-media {
        height: 78vh;
        max-height: 720px;
    }

    /* ── Error 404 nav ── */
    .error-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Container overflow protection ── */
    .container,
    .container *:not(.pagination a):not(.pagination span):not(.filter-search) {
        min-width: 0;
    }

    .container img,
    .container svg,
    .container video,
    .container iframe,
    .container table {
        max-width: 100%;
    }

    .about-band-text p,
    .article-content p,
    .home-hero-desc,
    .hero-lead,
    .featured-post-excerpt,
    .card-excerpt,
    .pilar-card-text,
    .book-title,
    .content-col-title,
    .video-band-text p,
    .newsletter-privacy,
    .newsletter-card p {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ── Article overflow protection ── */
    .article-content table,
    .article-content .wp-block-table table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
    }

    .article-content iframe,
    .article-content embed,
    .article-content video,
    .article-content .wp-block-embed,
    .article-content .wp-block-embed__wrapper {
        max-width: 100%;
    }

    .article-content .wp-block-embed iframe,
    .article-content .wp-block-embed__wrapper iframe {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
    }

    .article-content pre,
    .article-content code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* ── Global media lock ── */
    img, svg, video, iframe, embed, object, table {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   3. TABLET MOBILE (até 900px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* ── Video band ── */
    .video-band-inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: 3rem;
    }

    .video-list-light {
        justify-self: center;
        max-width: 340px;
    }

    .video-band-text p {
        max-width: none;
    }

    /* ── Materials / Newsletter ── */
    .materials-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-card {
        max-width: 500px;
        margin: 0 auto;
    }

    /* ── Books grid ── */
    .books-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ── About band ── */
    .about-band-grid {
        grid-template-columns: 1fr;
        gap: var(--s-8);
    }

    .about-band-media {
        max-width: 480px;
        margin: 0 auto;
    }

    .about-band-content {
        max-width: none;
        text-align: center;
    }

    .about-band-content .eyebrow-standalone {
        justify-content: center;
    }

    /* ── Join band ── */
    .join-band-inner {
        flex-direction: column;
        text-align: center;
    }

    /* ── Pilares ── */
    .pilares-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Filters ── */
    .filters-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search {
        min-width: 100%;
    }

    /* ── Hero media height ── */
    .home-hero-grid {
        min-height: auto;
    }

    /* ── Recent posts row ── */
    .recent-posts-row {
        grid-template-columns: 1fr;
        margin-top: 1rem !important;
    }

    /* ── Error 404 ── */
    .error-hero {
        min-height: 75vh;
    }

    .error-hero-icon {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }

    .error-hero-icon svg {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════
   4. MOBILE (até 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Tokens globais ── */
    :root {
        --s-11: 4rem;
        --s-12: 5rem;
        --fs-base: 1rem;
    }

    body {
        font-size: 1rem;
    }

    /* ── Tipografia ── */
    h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.15rem, 4vw, 1.5rem); }

    /* ── Section padding ── */
    .section {
        padding: var(--s-11) 0;
    }

    .section-sm {
        padding: var(--s-9) 0;
    }

    /* ── Cards grid ── */
    .cards-grid,
    .cards-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .card-body {
        padding: var(--s-5);
    }

    .card-title {
        font-size: var(--fs-lg);
    }

    /* ── Featured post ── */
    .featured-post-media {
        aspect-ratio: 16/10;
    }

    .featured-post-body {
        padding: clamp(1.25rem, 4vw, 2rem);
        gap: var(--s-4);
    }

    .featured-post-title {
        font-size: clamp(1.25rem, 4vw, 1.65rem);
    }

    .featured-post-excerpt {
        font-size: var(--fs-sm);
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Hero interior (single, page) ── */
    .hero {
        min-height: auto;
        padding: 7rem 0 4rem;
    }

    .hero-footer {
        display: none;
    }

    /* ── Home hero ── */
    .home-hero {
        padding-top: 6.5rem;
        padding-bottom: 2rem;
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }

    .home-hero-grid {
        min-height: auto;
        padding-bottom: 2.5rem;
    }

    .home-hero-title {
        font-size: clamp(1.6rem, 7vw, 2.25rem);
        margin-bottom: var(--s-3);
    }

    .home-hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--s-4);
    }

    .home-hero-desc {
        font-size: var(--fs-sm);
        max-width: none;
        margin-bottom: var(--s-5);
    }

    .home-hero-badge {
        margin-bottom: var(--s-4);
        font-size: 0.65rem;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-4);
    }

    .home-hero-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .home-hero-play {
        justify-content: center;
    }

    /* ── Timeline: vertical list ── */
    .home-hero-timeline-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .home-hero-timeline {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .home-hero-timeline-label {
        text-align: left;
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .home-hero-timeline-track {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .home-hero-timeline-track::before {
        display: none;
    }

    .home-hero-timeline-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
    }

    .home-hero-timeline-dot {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .home-hero-timeline-dot svg {
        width: 16px;
        height: 16px;
    }

    .home-hero-timeline-text {
        flex: 1;
        flex-direction: column;
        gap: 0.1rem;
    }

    .home-hero-timeline-text strong {
        font-size: 0.85rem;
    }

    .home-hero-timeline-text span {
        font-size: 0.72rem;
    }

    /* ── Hero media ── */
    .home-hero-media {
        height: 62vh;
        max-height: 560px;
    }

    /* ── Ater band ── */
    .hero-ater-band {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .hero-ater-band-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.25rem;
        border-radius: 14px;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .hero-ater-band-text {
        margin-bottom: 20px;
    }

    .hero-ater-band-icon {
        margin: 0 auto;
    }

    .hero-ater-band-cta {
        justify-self: center;
    }

    /* ── About band ── */
    .about-band-grid {
        padding: var(--s-8) var(--container-pad);
        gap: var(--s-7);
    }

    .about-band-media-frame {
        display: none;
    }

    .about-band-text {
        font-size: 16px;
    }

    /* ── Pilares ── */
    .pilares {
        padding: clamp(2.5rem, 6vh, 4rem) var(--container-pad);
    }

    .pilares-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pilares-header-text {
        max-width: none;
    }

    .pilar-card {
        padding: 0.75rem !important;
        flex-direction: row;
        align-items: center;
        gap: 0.85rem;
        border-radius: 0;
        border-bottom: 1px solid #2d4539;
    }

    .pilar-card:last-child {
        border-bottom: none;
    }

    .pilar-card-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .pilar-card-icon-wrap svg {
        width: 20px;
        height: 20px;
    }

    .pilar-card-body {
        gap: 0.1rem;
        flex: 1;
        min-width: 0;
    }

    .pilar-card-title {
        font-size: 0.88rem;
    }

    .pilar-card-text {
        display: none;
    }

    .pilar-card-footer {
        display: none;
    }

    .pilar-card-bg-num {
        display: none;
    }

    /* ── Video band ── */
    .video-band {
        padding: var(--s-8) 0;
    }

    .video-band-play {
        width: 76px;
        height: 76px;
    }

    .video-band-play-icon svg {
        width: 22px;
        height: 22px;
    }

    .video-band-text h2 {
        font-size: clamp(1.3rem, 5vw, 1.75rem);
    }

    .video-band-text p {
        font-size: var(--fs-sm);
    }

    .video-list {
        gap: var(--s-3);
    }

    /* ── Materials / Books ── */
    .books-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-3) var(--s-2);
    }

    .book-title {
        font-size: 0.72rem;
    }

    .book-meta {
        font-size: 0.62rem;
    }

    /* ── Newsletter card ── */
    .newsletter-card {
        padding: var(--s-6);
    }

    .newsletter-card h2 {
        font-size: 1.15rem;
    }

    /* ── Join band ── */
    .join-band-inner {
        padding: var(--s-7) var(--container-pad);
        gap: var(--s-5);
    }

    .join-band-text h2 {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .join-band-text p {
        font-size: var(--fs-sm);
    }

    /* ── Page header ── */
    .page-header {
        padding: 7rem 0 3rem;
    }

    /* ── Article ── */
    .article-content p:first-of-type::first-letter {
        font-size: 3.2rem;
    }

    .article-content blockquote {
        font-size: var(--fs-lg);
        padding-left: var(--s-5);
    }

    .article-content h2 {
        font-size: var(--fs-xl);
    }

    .article-content h3 {
        font-size: var(--fs-lg);
    }

    .article-content ul,
    .article-content ol {
        padding-left: var(--s-5);
    }

    .article-content {
        padding: 0 var(--container-pad);
    }

    /* ── Newsletter input ── */
    .newsletter-input-group {
        flex-direction: column;
        padding: 8px;
    }

    .newsletter-submit {
        width: 100%;
    }

    /* ── Section header inline ── */
    .section-header-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }

    /* ── Recent posts row ── */
    .recent-post-mini {
        grid-template-columns: 100px 1fr;
    }

    /* ── Error 404 ── */
    .error-hero {
        min-height: 70vh;
    }

    .error-hero-code {
        font-size: 120px !important;
        margin-top: 30px !important;
    }

    .error-hero-title {
        font-size: clamp(1.5rem, 5vw, 2.25rem);
    }

    .error-hero-actions {
        flex-direction: column;
    }

    .error-hero-actions .btn,
    .error-hero-search-toggle {
        width: 100%;
        max-width: 280px;
    }

    /* ── Error 404 nav ── */
    .error-nav-card {
        padding: var(--s-4);
    }

    /* ── Video modal ── */
    .video-modal-close {
        top: -10px;
        right: -10px;
        width: 40px;
        height: 40px;
    }

    .video-modal-frame {
        border-radius: 10px;
    }

    /* ── Pagination ── */
    .pagination {
        flex-wrap: wrap;
    }

    /* ── Article meta ── */
    .article-meta {
        flex-direction: column;
        gap: var(--s-3);
    }

    .recent-posts-row {
        gap: 1rem !important;
    }

    .video-item {
        gap: 0.8rem;
    }

}

/* ═══════════════════════════════════════════════════════════
   5. MOBILE PEQUENO (até 640px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Grids ── */
    .error-nav-grid {
        grid-template-columns: 1fr;
    }

    /* ── Hero actions ── */
    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero-actions .btn {
        width: 100%;
        text-align: center;
        padding: 0.45rem 1.45rem;
    }

    .home-hero-play {
        justify-content: center;
    }

    /* ── Timeline: compact vertical list ── */
    .home-hero-timeline-track {
        gap: 0.5rem;
    }

    /* ── Ater band ── */
    .hero-ater-band-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--s-3);
        padding: 1.25rem 1rem;
    }

    .hero-ater-band-icon {
        margin: 0 auto;
    }

    .hero-ater-band-cta {
        justify-self: center;
        width: 100%;
        justify-content: center;
    }

    /* ── Video band ── */
    .video-band-text h2 {
        font-size: var(--fs-xl);
    }

    /* ── Join band ── */
    .join-band-text h2 {
        font-size: var(--fs-xl);
    }

    /* ── Error 404 ── */
    .error-hero-icon {
        width: 60px;
        height: 60px;
    }

    .error-hero-icon svg {
        width: 30px;
        height: 30px;
    }

    .error-hero-code {
        font-size: clamp(3.5rem, 10vw, 5rem);
    }

    .error-nav-card-desc {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   6. MOBILE MÉDIO (até 560px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .home-hero-scroll {
        display: none;
    }

    .home-hero-timeline {
        padding: 1rem clamp(1rem, 2vw, 1.25rem);
    }

    .home-hero-timeline-label {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .home-hero-timeline-dot {
        width: 36px;
        height: 36px;
    }

    .home-hero-timeline-dot svg {
        width: 16px;
        height: 16px;
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════
   7. MOBILE PEQUENO (até 480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* ── Tokens ── */
    :root {
        --container-pad: 1rem;
        --s-9: 3rem;
        --s-10: 4rem;
        --s-11: 3.5rem;
    }

    /* ── Tipografia ── */
    h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 6vw, 1.75rem); }

    .section-title {
        font-size: clamp(1.3rem, 5vw, 1.75rem);
    }

    /* ── Botões full-width ── */
    .btn {
        width: 100%;
    }

    .btn-lg {
        padding: 0.8rem 1.5rem;
    }

    .join-band .btn {
        width: auto;
    }

    /* ── Hero actions (páginas internas) ── */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* ── Article ── */
    .article-content p:first-of-type::first-letter {
        font-size: 2.8rem;
    }

    .article-featured-image img {
        border-radius: var(--radius);
    }

    /* ── Card ── */
    .card-body {
        padding: var(--s-4);
        gap: var(--s-3);
    }

    .card-meta {
        flex-wrap: wrap;
    }

    /* ── Featured post ── */
    .featured-post-media {
        aspect-ratio: 16/9;
    }

    .featured-post-body {
        padding: 1.1rem;
    }

    .featured-post-title {
        font-size: 1.15rem;
    }

    .featured-post-excerpt {
        font-size: var(--fs-xs);
        -webkit-line-clamp: 3;
    }

    /* ── Home hero ── */
    .home-hero {
        padding-top: 6rem;
        padding-bottom: 1.5rem;
    }

    .home-hero-title {
        font-size: clamp(1.4rem, 8vw, 1.85rem);
    }

    .home-hero-subtitle {
        font-size: 0.85rem;
    }

    .home-hero-desc {
        font-size: var(--fs-xs);
        line-height: 1.6;
    }

    .home-hero-badge {
        font-size: 0.6rem;
        padding: 0.3rem 0.7rem 0.3rem 0.6rem;
    }

    .home-hero-play-icon {
        width: 38px;
        height: 38px;
    }

    .home-hero-play-text strong {
        font-size: var(--fs-xs);
    }

    .home-hero-play-text em {
        font-size: 0.65rem;
    }

    .home-hero-timeline {
        padding: 1rem;
    }

    .home-hero-timeline-item {
        gap: 0.7rem;
        /* padding: 0.6rem 0; */
    }

    .home-hero-timeline-dot {
        width: 34px;
        height: 34px;
    }

    .home-hero-timeline-dot svg {
        width: 14px;
        height: 14px;
    }

    .home-hero-timeline-text strong {
        font-size: 0.8rem;
    }

    .home-hero-timeline-text span {
        font-size: 0.68rem;
    }

    /* ── Timeline: compact vertical list ── */
    .home-hero-timeline-track {
        gap: 0.5rem;
    }

    .hero-ater-band-icon {
        width: 42px;
        height: 42px;
    }

    .hero-ater-band-text p:first-child strong {
        font-size: 0.82rem;
    }

    .hero-ater-band-text p {
        font-size: var(--fs-xs);
    }

    .hero-ater-band-cta {
        padding: 0.55rem 1rem;
        font-size: var(--fs-xs);
    }

    /* ── Hero media ── */
    .home-hero-media {
        height: 52vh;
        max-height: 440px;
    }

    /* ── About band ── */
    .about-band-grid {
        padding: var(--s-6) var(--container-pad);
        gap: var(--s-6);
    }

    .about-band-media {
        max-width: 280px;
    }

    .about-band-media img {
        aspect-ratio: 3/4;
    }

    .about-band-text {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ── Pilares ── */
    .pilares {
        padding: clamp(2rem, 5vh, 3rem) var(--container-pad);
    }

    .pilares-title {
        font-size: clamp(1.3rem, 5vw, 1.75rem);
    }

    .pilares-header-text {
        font-size: var(--fs-xs);
    }

    .pilar-card {
        padding: 0.85rem 0;
        gap: 0.75rem;
    }

    .pilar-card-icon-wrap {
        width: 36px;
        height: 36px;
    }

    .pilar-card-icon-wrap svg {
        width: 18px;
        height: 18px;
    }

    .pilar-card-title {
        font-size: 0.82rem;
    }

    /* ── Video band ── */
    .video-band {
        padding: var(--s-6) 0;
    }

    .video-band-play {
        width: 64px;
        height: 64px;
    }

    .video-list-light {
        max-width: 100%;
    }

    .video-item-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* ── Materials / Books ── */
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-4) var(--s-3);
    }

    .book-title {
        font-size: 0.72rem;
    }

    .book-meta {
        font-size: 0.65rem;
    }

    /* ── Newsletter card ── */
    .newsletter-card {
        padding: var(--s-5);
    }

    .newsletter-card h2 {
        font-size: 1.05rem;
    }

    .newsletter-card-form {
        flex-direction: column;
        gap: var(--s-3);
    }

    .newsletter-card-form input[type="email"] {
        width: 100%;
    }

    .newsletter-card-form button {
        width: 100%;
        justify-content: center;
    }

    /* ── Join band ── */
    .join-band-inner {
        padding: var(--s-6) var(--container-pad);
    }

    .join-band-text h2 {
        font-size: 1.25rem;
    }

    .join-band-text p {
        font-size: var(--fs-xs);
    }

    .join-band .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── Error 404 ── */
    .error-hero {
        min-height: 65vh;
    }

    .error-hero-inner {
        padding: 5rem 0 3rem;
    }

    .error-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-bottom: var(--s-4);
    }

    .error-hero-icon svg {
        width: 26px;
        height: 26px;
    }

    .error-hero-code {
        font-size: clamp(3rem, 14vw, 5rem);
        margin-bottom: var(--s-3);
    }

    .error-hero-desc {
        font-size: var(--fs-sm);
    }

    .error-hero-search-toggle {
        padding: 0.75rem 1.75rem;
        font-size: var(--fs-sm);
    }

    .error-search-form input {
        padding: 0.7rem 1rem;
        font-size: var(--fs-sm);
    }

    .error-nav-card {
        padding: var(--s-3);
        border-radius: var(--radius);
    }

    .error-nav-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .error-nav-card-title {
        font-size: var(--fs-sm);
    }

    /* ── Video modal ── */
    .video-modal {
        padding: 0.75rem;
    }

    .video-modal-close {
        top: 8px;
        right: 8px;
        width: 38px;
        height: 38px;
        background: rgba(15, 20, 18, 0.75);
        color: #fff;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .video-modal-close:hover,
    .video-modal-close:focus-visible {
        background: var(--color-accent);
        color: var(--color-primary);
    }

    .video-modal-frame {
        border-radius: 8px;
    }

    /* ── Share buttons ── */
    .share-buttons {
        flex-wrap: wrap;
    }

    .share-btn {
        font-size: var(--fs-xs);
        padding: 0.5rem 0.8rem;
    }

    /* ── Breadcrumbs ── */
    .breadcrumbs {
        font-size: 10px;
        flex-wrap: wrap;
    }

    /* ── Touch targets ── */
    .footer-social a,
    .book-item,
    .filter-chip,
    .card-link,
    .link-more {
        min-height: 40px;
    }

    
    .video-item-icon {
        min-height: 32px;
    }
}

/* ═══════════════════════════════════════════════════════════
   8. MOBILE PEQUENO (até 420px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pilares {
        padding: clamp(2rem, 5vh, 3rem) 12px;
    }

    .pilar-card {
        padding: 0.75rem 0;
        gap: 0.65rem;
    }

    .pilar-card-icon-wrap {
        width: 34px;
        height: 34px;
    }

    .pilar-card-icon-wrap svg {
        width: 16px;
        height: 16px;
    }

    .pilar-card-title {
        font-size: 0.78rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   9. MOBILE EXTREMAMENTE PEQUENO (até 360px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    :root {
        --container-pad: 0.875rem;
    }

    .home-hero-media img {
        object-position: right 55%;
    }

    /* ── Home hero ── */
    .home-hero-title {
        font-size: 1.35rem;
    }

    .home-hero-timeline-dot {
        width: 30px;
        height: 30px;
    }

    .home-hero-timeline-dot svg {
        width: 12px;
        height: 12px;
    }

    /* ── Ater band ── */
    .hero-ater-band-text p {
        font-size: var(--fs-xs);
    }

    .hero-ater-band-text p:first-child strong {
        font-size: 0.85rem;
    }

    /* ── Error 404 ── */
    .error-hero-actions .btn,
    .error-hero-search-toggle {
        font-size: var(--fs-xs);
        padding: 0.7rem 1.25rem;
    }

    .error-nav-card {
        padding: var(--s-3);
    }

    .error-nav-card-icon {
        width: 36px;
        height: 36px;
    }

    .error-nav-card-title {
        font-size: var(--fs-xs);
    }

    /* ── Newsletter card ── */
    .newsletter-card {
        padding: var(--s-5);
    }

    .newsletter-card h2 {
        font-size: var(--fs-md);
    }

    /* ── Pilares ── */
    .pilar-card {
        padding: 0.65rem 0;
        gap: 0.6rem;
    }

    .pilar-card-icon-wrap {
        width: 32px;
        height: 32px;
    }

    .pilar-card-icon-wrap svg {
        width: 15px;
        height: 15px;
    }

    .pilar-card-title {
        font-size: 0.75rem;
    }

    /* ── Books ── */
    .books-grid {
        gap: var(--s-3);
    }

    .book-item {
        padding: 0.6rem;
    }

    .book-cover {
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════
   10. RECENT POST MINI — empilha em telas muito pequenas
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .recent-post-mini {
        grid-template-columns: 1fr;
    }

    .recent-post-mini-media {
        aspect-ratio: 16/10;
    }
}

/* ═══════════════════════════════════════════════════════════
   11. LANDSCAPE — altura pequena
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
    .error-hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .error-hero-inner {
        padding: 3rem 0 2rem;
    }

    .error-hero-icon {
        width: 48px;
        height: 48px;
        margin-bottom: var(--s-3);
    }

    .error-hero-icon svg {
        width: 24px;
        height: 24px;
    }

    .error-hero-code {
        font-size: 3rem;
    }

    .error-hero-title {
        font-size: 1.5rem;
        margin-bottom: var(--s-3);
    }

    .error-hero-desc {
        margin-bottom: var(--s-5);
    }

    .video-modal {
        padding: 0.5rem;
    }

    .video-modal-dialog {
        max-width: min(1100px, 85vh * (16 / 9));
    }
}

/* ═══════════════════════════════════════════════════════════
   12. VIDEO MODAL — Landscape especial
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 400px) and (orientation: landscape) {
    .video-modal {
        padding: 0.25rem;
    }

    .video-modal-frame {
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════
   13. PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .home-hero-scroll-icon,
    .video-band-play-ring,
    .hero-scroll-line::after {
        animation: none;
    }

    .reveal-init {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .video-modal,
    .video-modal-dialog,
    .video-modal-close {
        transition: none;
    }

    .video-modal-loader {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   14. ALTO CONTRASTE
   ═══════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    .btn {
        border: 2px solid ButtonText;
    }

    .error-nav-card {
        border: 2px solid ButtonText;
    }

    .footer-social a {
        border: 2px solid ButtonText;
    }
}