/* ================================================
   RESPONSIVE FUNDO-INFERNO - GOUMA.ART
   Estilos responsivos para página Fundo-Inferno
   Encoding: UTF-8
   ================================================ */

/* ================================================
   DESKTOP GRANDE - ACIMA DE 1440px
   ================================================ */

@media screen and (min-width: 1441px) {
    /* Hero */
    .hero-circle-container {
        width: 150vh;
        height: 150vh;
        max-width: 1400px;
        max-height: 1400px;
    }
    
    .hero-title-main {
        font-size: 9rem;
    }
    
    .hero-title-sub {
        font-size: 2.25rem;
    }
    
    .fundo-section-title {
        font-size: clamp(3rem, 6vw, 5rem);
        margin-bottom: 40px;
    }
    
    .fundo-text-block p {
        font-size: 1.0625rem;
        line-height: 2;
    }
   
    .fundo-content-row {
        gap: 100px;
    }
   
    /* Quote sections */
    .fundo-section-quote {
        padding: 160px 80px;
    }

    .fundo-quote-title {
        font-size: clamp(3rem, 6vw, 5rem);
        margin: 0 0 40px 0;
    }
    
    .fundo-quote-content p {
        font-size: 1.125rem;
    }
}

/* ================================================
   DESKTOP MÉDIO - 1024px A 1440px
   ================================================ */

@media screen and (max-width: 1440px) {
    /* Hero */
    .hero-circle-container {
        width: 150vh;
        height: 150vh;
        max-width: 1100px;
        max-height: 1100px;
    }
    
    .hero-title-main {
        font-size: clamp(3.5rem, 7vw, 7rem);
    }
    
    .hero-title-sub {
        font-size: clamp(1rem, 2vw, 1.75rem);
    }

    .fundo-section-title {
        font-size: clamp(3rem, 6vw, 5rem);
    }
    
    /* Seção com imagem */
    .fundo-content-row {
        gap: 60px;
    }
    
    .fundo-content-image {
        max-width: 800px;
    }
    
    /* Quote sections */
    .fundo-section-quote {
        padding: 100px 60px;
    }
}

/* ================================================
   TABLETS E DESKTOP PEQUENO - 768px A 1024px
   ================================================ */

@media screen and (max-width: 1024px) {
    /* Hero */
    .fundo-hero {
        height: 100vh;
    }
    
    .hero-circle-container {
        width: 90vh;
        height: 90vh;
        max-width: 900px;
        max-height: 900px;
    }
    
    .hero-title-main {
        font-size: clamp(3rem, 8vw, 5rem);
    }
    
    .hero-title-sub {
        font-size: clamp(0.9rem, 2vw, 1.5rem);
        letter-spacing: 0.12em;
    }
    
    /* Slider */
    .fundo-slider {
        height: 70vh;
    }
    
    .fundo-section-title {
        font-size: clamp(3rem, 6vw, 5rem);
        margin-bottom: 40px;
    }
    
    .fundo-text-block p {
        font-size: 1rem;
        line-height: 1.85;
    }
    
    .fundo-content-row {
        gap: 50px;
    }
    
    .fundo-content-image {
        max-width: 500px;
    }
    
    .fundo-content-image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }

    .fundo-quote-title {
        font-size: clamp(3rem, 6vw, 5rem);
        margin: 0 0 40px 0;
    }
    
    .fundo-quote-content {
        padding: 0 20px;
    }
    
    .fundo-quote-content::before {
        left: -5px;
        top: -20px;
    }
    
    .fundo-quote-content::after {
        right: -5px;
        bottom: -50px;
    }
    
    .fundo-quote-content p {
        font-size: 1rem;
    }
    
    .fundo-quote-author {
        margin-top: 40px;
    }
}

/* ================================================
   MOBILE LANDSCAPE E TABLETS PEQUENOS - 480px A 768px
   ================================================ */

@media screen and (max-width: 768px) {
    /* Hero */
    .fundo-hero {
        height: 100vh;
        min-height: 500px;
    }
    
    .hero-circle-container {
        width: 110vw;
        height: 110vw;
        max-width: 700px;
        max-height: 700px;
    }
    
    .hero-title-main {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    
    .hero-title-sub {
        font-size: clamp(0.75rem, 2.5vw, 1.125rem);
        letter-spacing: 0.1em;
        margin-top: 0.3em;
    }
    
    /* Slider */
    .fundo-slider {
        height: 60vh;
    }
    
    .fundo-slider .slide-placeholder span {
        font-size: 1.125rem;
    }

    .fundo-section-title {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }
    
    .fundo-text-block p {
        font-size: 0.9375rem;
        line-height: 1.8;
        text-align: justify;
    }

    .fundo-content-row {
        gap: 40px;
    }
    
    .fundo-content-image {
        max-width: 400px;
    }
    
    .fundo-content-image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }
    
    /* Quote sections */
    .fundo-section-quote {
        padding: 70px 25px;
    }
    
    .fundo-quote-block::before {
        width: 40px;
    }
    
    .fundo-quote-title {
        font-size: 2.5rem;
        margin: 0 0 30px 0;
    }
    
    .fundo-quote-content {
        padding: 0 10px;
    }
    
    .fundo-quote-content::before,
    .fundo-quote-content::after {
        font-size: clamp(3rem, 10vw, 4rem);
    }
    
    .fundo-quote-content::before {
        top: -15px;
        left: -5px;
    }
    
    .fundo-quote-content::after {
        bottom: -40px;
        right: -5px;
    }
    
    .fundo-quote-content p {
        font-size: 0.9375rem;
        line-height: 1.8;
        text-align: justify;
    }
    
    .fundo-quote-author {
        margin-top: 35px;
    }
    
    .fundo-quote-author::before {
        width: 30px;
        margin-bottom: 20px;
    }
    
    .fundo-quote-author .author-name {
        font-size: 0.9375rem;
    }
    
    .fundo-quote-author .author-title {
        font-size: 0.8125rem;
    }
    
    .fundo-quote-author .author-note {
        font-size: 0.75rem;
    }

    .page-fundo-inferno .site-footer {
        margin-top: 0;
    }
}

/* ================================================
   MOBILE PORTRAIT - ATÉ 480px
   ================================================ */

@media screen and (max-width: 480px) {
    /* Hero */
    .fundo-hero {
        height: 100vh;
        min-height: 450px;
    }
    
    .hero-circle-container {
        width: 130vw;
        height: 130vw;
        max-width: 560px;
        max-height: 560px;
    }
    
    .hero-title-main {
        font-size: clamp(2rem, 12vw, 3rem);
    }
    
    .hero-title-sub {
        font-size: clamp(0.65rem, 3vw, 0.9rem);
        letter-spacing: 0.08em;
    }
    
    /* Slider */
    .fundo-slider {
        height: 50vh;
    }
    
    .fundo-slider .slide-placeholder span {
        font-size: 1rem;
    }

    .fundo-section-title {
        font-size: 2rem;
    }
    
    .fundo-text-block p {
        font-size: 0.9375rem;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .fundo-content-row {
        gap: 35px;
    }
    
    .fundo-content-image {
        max-width: 320px;
    }
    
    .fundo-content-image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }
    
    /* Quote sections */
    .fundo-section-quote {
        padding: 60px 20px;
    }
    
    .fundo-quote-block::before {
        width: 30px;
        height: 1px;
    }
    
    .fundo-quote-title {
        font-size: 2rem;
        margin: 0 0 30px 0;
    }
    
    .fundo-quote-content {
        padding: 0;
    }
    
    .fundo-quote-content::before,
    .fundo-quote-content::after {
        font-size: 2.5rem;
        opacity: 0.7;
    }
    
    .fundo-quote-content::before {
        top: -10px;
        left: 0;
    }
    
    .fundo-quote-content::after {
        bottom: -30px;
        right: 0;
    }
    
    .fundo-quote-content p {
        font-size: 0.9375rem;
        line-height: 1.75;
        margin-bottom: 18px;
    }
    
    .fundo-quote-author {
        margin-top: 30px;
    }
    
    .fundo-quote-author::before {
        margin-bottom: 18px;
    }
    
    .fundo-quote-author .author-name {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }
    
    .fundo-quote-author .author-title {
        font-size: 0.8125rem;
        margin-bottom: 4px;
    }
    
    .fundo-quote-author .author-note {
        font-size: 0.75rem;
    }

    .page-fundo-inferno .site-footer {
        margin-top: 0;
    }
}

/* ================================================
   MOBILE MUITO PEQUENO - ATÉ 360px
   ================================================ */

@media screen and (max-width: 360px) {
    /* Hero */
    .fundo-hero {
        min-height: 400px;
    }
    
    .hero-circle-container {
        width: 140vw;
        height: 140vw;
        max-width: 480px;
        max-height: 480px;
    }
    
    .hero-title-main {
        font-size: 2rem;
    }
    
    .hero-title-sub {
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }
    
    /* Slider */
    .fundo-slider {
        height: 45vh;
    }

    .fundo-section-title {
        font-size: 1.75rem;
    }
    
    .fundo-text-block p {
        font-size: 0.875rem;
    }
    
    /* Seção com imagem - crop 1:1 */
    .fundo-content-image {
        max-width: 280px;
    }
    
    .fundo-content-image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
    }
    
    /* Quote sections */
    .fundo-section-quote {
        padding: 50px 15px;
    }
    
    .fundo-quote-title {
        font-size: 1.75rem;
    }
    
    .fundo-quote-content p {
        font-size: 0.875rem;
    }
}

/* ================================================
   SEÇÃO "DO TEXTO À CENA" - RESPONSIVO
   ================================================ */

/* Tablet Landscape (max-width: 1200px) */
@media (max-width: 1200px) {
    .fundo-texto-cena-grid {
        gap: 60px;
    }

    .fundo-creditos-container {
        padding: 30px;
    }
}

/* Tablet Portrait (max-width: 1024px) */
@media (max-width: 1024px) {
    .fundo-texto-cena-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .fundo-texto-cena-text {
        position: relative;
        top: 0;
    }

    .fundo-tabs-content {
        min-height: auto;
    }

    .fundo-poster-container img {
        max-width: 350px;
    }

    /* Video player vertical centralizado */
    .fundo-reels-container .gouma-video-container {
        max-width: 320px;
    }
}

/* Tablet Small (max-width: 900px) */
@media (max-width: 900px) {
    .fundo-texto-cena-grid {
        gap: 40px;
        margin-top: 40px;
    }

    .fundo-tabs-nav {
        margin-bottom: 25px;
    }

    .fundo-tab-btn {
        padding: 14px 16px;
        font-size: 0.8125rem;
    }

    .fundo-creditos-container {
        padding: 25px;
        max-height: 500px;
    }

    .fundo-creditos-title {
        font-size: 1.5rem;
    }

    .fundo-creditos-item {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .fundo-creditos-value {
        text-align: left;
    }
}

/* Mobile Large (max-width: 768px) */
@media (max-width: 768px) {
    .fundo-texto-cena-grid {
        gap: 35px;
        margin-top: 35px;
    }

    .fundo-texto-cena-text .fundo-text-block p {
        font-size: 0.9375rem;
        line-height: 1.8;
    }

    .fundo-tabs-nav {
        margin-bottom: 20px;
    }

    .fundo-tab-btn {
        padding: 12px 12px;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .fundo-poster-container img {
        max-width: 300px;
    }

    .fundo-poster-caption {
        font-size: 0.8125rem;
        margin-top: 15px;
    }

    /* Video player vertical */
    .fundo-reels-container .gouma-video-container {
        max-width: 280px;
        border-radius: 10px;
    }

    .fundo-creditos-container {
        padding: 20px;
        max-height: 450px;
    }

    .fundo-creditos-title {
        font-size: 1.375rem;
    }

    .fundo-creditos-subtitle {
        font-size: 0.9375rem;
    }

    .fundo-creditos-label {
        font-size: 0.75rem;
    }

    .fundo-creditos-value {
        font-size: 0.875rem;
    }

    .fundo-creditos-divider {
        margin: 20px 0;
    }

    .fundo-creditos-elenco-title {
        font-size: 1rem;
    }

    .fundo-creditos-elenco-note {
        font-size: 0.6875rem;
        margin-bottom: 15px;
    }

    .fundo-creditos-elenco-list .fundo-creditos-label {
        font-size: 0.6875rem;
    }

    .fundo-creditos-elenco-list .fundo-creditos-value {
        font-size: 0.8125rem;
    }
}

/* Mobile Medium (max-width: 600px) */
@media (max-width: 600px) {
    .fundo-texto-cena-grid {
        gap: 30px;
        margin-top: 30px;
    }

    .fundo-texto-cena-text .fundo-text-block p {
        font-size: 0.875rem;
        margin-bottom: 20px;
    }

    .fundo-tab-btn {
        padding: 10px 8px;
        font-size: 0.6875rem;
    }

    /* Video player vertical - ajuste para telas menores */
    .fundo-reels-container .gouma-video-container {
        max-width: 260px;
        border-radius: 8px;
    }

    .fundo-reels-container .gouma-video-controls {
        padding: 0 10px 8px;
        height: 50px;
    }

    .fundo-reels-container .gouma-control-btn {
        width: 30px;
        height: 30px;
    }

    .fundo-reels-container .gouma-control-btn svg {
        width: 16px;
        height: 16px;
    }

    .fundo-reels-container .gouma-time-display {
        font-size: 10px;
    }

    .fundo-reels-container .gouma-play-overlay-icon {
        width: 50px;
        height: 50px;
    }

    .fundo-reels-container .gouma-play-overlay-icon svg {
        width: 22px;
        height: 22px;
    }

    .fundo-creditos-container {
        padding: 16px;
        max-height: 400px;
        border-radius: 6px;
    }

    .fundo-creditos-header {
        margin-bottom: 20px;
    }

    .fundo-creditos-title {
        font-size: 1.25rem;
    }

    .fundo-creditos-subtitle {
        font-size: 0.875rem;
    }

    .fundo-creditos-info,
    .fundo-creditos-equipe,
    .fundo-creditos-elenco-list {
        gap: 8px;
    }

    .fundo-creditos-item {
        padding: 6px 0;
    }
}

/* Mobile Small (max-width: 480px) */
@media (max-width: 480px) {
    .fundo-texto-cena-grid {
        gap: 25px;
        margin-top: 25px;
    }

    .fundo-texto-cena-text .fundo-text-block p {
        font-size: 0.8125rem;
        line-height: 1.75;
        margin-bottom: 16px;
    }

    .fundo-tabs-nav {
        margin-bottom: 16px;
        border-bottom-width: 1px;
    }

    .fundo-tab-btn {
        padding: 10px 6px;
        font-size: 0.625rem;
        letter-spacing: 0.03em;
    }

    .fundo-tab-btn::after {
        height: 2px;
    }

    .fundo-poster-caption {
        font-size: 0.75rem;
        margin-top: 12px;
    }

    /* Video player vertical - mobile small */
    .fundo-reels-container .gouma-video-container {
        max-width: 240px;
    }

    .fundo-reels-container .gouma-video-controls {
        padding: 0 8px 6px;
        height: 45px;
    }

    .fundo-reels-container .gouma-progress-container {
        margin-bottom: 6px;
    }

    .fundo-reels-container .gouma-control-btn {
        width: 28px;
        height: 28px;
    }

    .fundo-reels-container .gouma-control-btn svg {
        width: 14px;
        height: 14px;
    }

    .fundo-reels-container .gouma-time-display {
        font-size: 9px;
    }

    .fundo-reels-container .gouma-play-overlay-icon {
        width: 44px;
        height: 44px;
    }

    .fundo-reels-container .gouma-play-overlay-icon svg {
        width: 20px;
        height: 20px;
    }

    .fundo-reels-container .gouma-play-overlay-text {
        font-size: 11px;
    }

    .fundo-creditos-container {
        padding: 14px;
        max-height: 350px;
    }

    .fundo-creditos-title {
        font-size: 1.125rem;
        letter-spacing: 0.08em;
    }

    .fundo-creditos-subtitle {
        font-size: 0.8125rem;
    }

    .fundo-creditos-label {
        font-size: 0.6875rem;
    }

    .fundo-creditos-value {
        font-size: 0.8125rem;
    }

    .fundo-creditos-divider {
        margin: 15px 0;
    }

    .fundo-creditos-elenco-title {
        font-size: 0.9375rem;
    }

    .fundo-creditos-elenco-note {
        font-size: 0.625rem;
        margin-bottom: 12px;
    }

    .fundo-creditos-elenco-list .fundo-creditos-label {
        font-size: 0.625rem;
    }

    .fundo-creditos-elenco-list .fundo-creditos-value {
        font-size: 0.75rem;
    }
}

/* Mobile Extra Small (max-width: 360px) */
@media (max-width: 360px) {
    .fundo-texto-cena {
        padding: 35px 12px;
    }

    .fundo-texto-cena-text .fundo-text-block p {
        font-size: 0.75rem;
    }

    .fundo-tab-btn {
        padding: 8px 4px;
        font-size: 0.5625rem;
    }

    /* Video player vertical - extra small */
    .fundo-reels-container .gouma-video-container {
        max-width: 200px;
    }

    .fundo-reels-container .gouma-video-controls {
        padding: 0 6px 5px;
        height: 40px;
    }

    .fundo-reels-container .gouma-control-btn {
        width: 24px;
        height: 24px;
    }

    .fundo-reels-container .gouma-control-btn svg {
        width: 12px;
        height: 12px;
    }

    .fundo-reels-container .gouma-time-display {
        font-size: 8px;
    }

    .fundo-reels-container .gouma-play-overlay-icon {
        width: 40px;
        height: 40px;
    }

    .fundo-reels-container .gouma-play-overlay-icon svg {
        width: 18px;
        height: 18px;
    }

    .fundo-reels-container .gouma-play-overlay-text {
        font-size: 10px;
    }

    .fundo-creditos-container {
        padding: 12px;
        max-height: 320px;
    }

    .fundo-creditos-title {
        font-size: 1rem;
    }

    .fundo-creditos-subtitle {
        font-size: 0.75rem;
    }
}

/* ================================================
   CRÉDITOS DO VÍDEO AUTOMÁTICO - RESPONSIVO
   ================================================ */

/* Tablet - 1024px */
@media screen and (max-width: 1024px) {
    .fundo-video-credits {
        padding: 18px 25px;
        gap: 18px;
    }
    
    .fundo-video-credits-label {
        font-size: 0.625rem;
    }
    
    .fundo-video-credits-name {
        font-size: 0.8125rem;
    }
}

/* Mobile - 768px */
@media screen and (max-width: 768px) {
    .fundo-video-credits {
        flex-direction: column;
        padding: 20px;
        gap: 12px;
    }
    
    .fundo-video-credits-item {
        flex-direction: row;
        gap: 8px;
    }
    
    .fundo-video-credits-label {
        font-size: 0.625rem;
    }
    
    .fundo-video-credits-name {
        font-size: 0.8125rem;
    }
    
    .fundo-video-credits-separator {
        display: none;
    }
}

/* Mobile pequeno - 480px */
@media screen and (max-width: 480px) {
    .fundo-video-credits {
        padding: 16px 15px;
        gap: 10px;
    }
    
    .fundo-video-credits-label {
        font-size: 0.5625rem;
        letter-spacing: 0.06em;
    }
    
    .fundo-video-credits-name {
        font-size: 0.75rem;
    }
}

/* Mobile muito pequeno - 360px */
@media screen and (max-width: 360px) {
    .fundo-video-credits {
        padding: 14px 12px;
        gap: 8px;
    }
    
    .fundo-video-credits-item {
        gap: 6px;
    }
    
    .fundo-video-credits-label {
        font-size: 0.5rem;
    }
    
    .fundo-video-credits-name {
        font-size: 0.6875rem;
    }
}