/* ===== resources/views/site/collectives/index.blade.php ===== */
/* Seus estilos CSS permanecem inalterados aqui */
        .collective-item {
            display: block;
            position: relative;
            aspect-ratio: 1 / 1;
            /*border: 2px solid var(--sulsul-gray, #333);*/
            border-radius: 50%;
            box-sizing: border-box;
            transition: all 0.3s ease-in-out;
        }

        .collective-item:hover {
            transform: scale(1.05);
            border-color: var(--sulsul-purple);
            box-shadow: 0 0 15px rgba(111, 30, 59, 0.5);
        }

        .collective-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Definição da classe .container-narrow, se ainda não existir */
        .container-narrow-collective {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        /* Seus estilos atuais para a página de coletivos... */
        /* ====== PÁGINA DE COLETIVOS ====== */
        .collective-item {
            /* ... seus estilos existentes ... */
        }
        /* ... etc. ... */
        /* Botão de carregar mais */
        .btn-load-more {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid var(--sulsul-green);
            background-color: transparent;
            color: var(--sulsul-green);
            font-size: 60px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .btn-load-more:hover {
            background-color: var(--sulsul-purple);
            color: #fff;
            transform: scale(1.1);
        }

/* ===== resources/views/site/collectives/show-static.blade.php ===== */
/* ====== PÁGINA DE COLETIVO ====== */

        /* Estilo para a seção hero */
        .collective-hero-image {
            width: 100%;
            height: 400px; /* Defina a altura fixa que desejar aqui (ex: 450px) */
            position: relative; /* Mantido para os elementos flutuantes */
            overflow: hidden; /* Esconde qualquer parte da imagem que exceda a altura fixa */
        }

        /* Estilo para a imagem dentro da seção hero */
        .collective-hero-image .collective-hero {
            width: 100%;
            height: 100%;

            /* A MÁGICA ACONTECE AQUI */
            object-fit: cover; /* Garante que a imagem cubra toda a área sem distorcer */

            /* Opcional: Centraliza a imagem dentro do quadro. Você pode usar 'top', 'bottom', etc. */
            object-position: center;
        }

        .collective-info-section {
            /* Padding no topo para dar espaço ao logo flutuante que vem de cima */
            padding-top: 100px;
        }

        .collective-type-tag {
            display: inline-block;
            background-color: #FAF4B7; /* Tom de amarelo/bege do layout */
            color: #000;
            padding: 0.25rem 1rem;
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        /* Garante que os títulos reutilizados tenham a margem correta nesta seção */
        .collective-info-section .producer-name,
        .collective-info-section .producer-subtitle,
        .collective-info-section .producer-location {
            margin-bottom: 0.5rem;
        }

        /* Substitua as regras existentes no seu custom.css por estas */

        .producer-hero {
            min-height: 50vh;
            position: relative; /* Essencial: torna esta section a referência de posicionamento */
            display: flex;
            align-items: flex-end; /* Alinha o container de texto na base */
            padding-bottom: 80px;
            color: #fff;
        }

        .container-narrow-collective {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }


        /*** PARA AVALIAR E REMOVER ****/
        /* ====== PÁGINA DE PERFIL DE USUÁRIO ====== */

        .profile-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--sulsul-purple);
        }

        .profile-name {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        .social-icons {
            display: flex;
            gap: 0.8rem;
        }
        .social-icons a {
            color: var(--sulsul-purple);
            font-size: 1.5rem;
            transition: color 0.2s ease;
        }
        .social-icons a:hover {
            color: var(--sulsul-green);
        }

        .container-narrow-profile {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            border-bottom: 2px solid var(--sulsul-purple);
        }

        .container-narrow-profile-border-none {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        .profile-subtitle {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--sulsul-green);
            letter-spacing: 2px;
            margin: 0.25rem 0;
        }

        .profile-location {
            font-family: 'Oswald', sans-serif;
            font-weight: 150;
            letter-spacing: 0.5px;
            color: var(--sulsul-light-gray);
            margin-bottom: 1rem;
        }

        .profile-bio {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-title-gray);
            font-size: 0.9rem;
        }

        /* --- Estatísticas do Perfil --- */
        .stat-item-profile {
            display: flex;
            align-items-baseline;
            gap: 0.5rem;
            justify-content: center; /* Alinha no centro em telas menores */
            color: var(--sulsul-green);
        }
        @media (min-width: 768px) {
            .stat-item-profile {
                justify-content: flex-start; /* Alinha à esquerda em telas maiores */
            }
        }

        .stat-number-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            color: var(--sulsul-green);
            line-height: 1;
        }
        .stat-label-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            padding-top: 10px;
            line-height: 1;
        }

        .hide-data-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-size: 0.9rem;
        }

        /* --- Link "Add More" --- */
        .add-more-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-weight: 700;
        }

        /* --- Linha Separadora --- */
        .hr-section-sep {
            display: block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 40px 0;
        }

        /* --- Efeito Hover para o Avatar do Usuário --- */

        /* 1. O contêiner principal que servirá de referência para o overlay */
        .avatar-container {
            position: relative; /* Essencial para posicionar o overlay */
            display: inline-block; /* Faz o contêiner ter o tamanho da imagem */
            cursor: pointer;
        }

        /* 2. O overlay que contém os ícones */
        .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%; /* Garante que o overlay seja circular como a imagem */
            background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */

            /* Centraliza os ícones dentro do overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px; /* Espaçamento entre os ícones */

            /* Esconde o overlay por padrão */
            opacity: 0;
            visibility: hidden;

            /* Efeito de transição suave */
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        /* 3. A MÁGICA: Revela o overlay quando o mouse passa sobre o contêiner */
        .avatar-container:hover .avatar-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* 4. (Opcional) Adiciona um efeito na imagem para destacar os ícones */
        .avatar-container:hover .profile-avatar {
            filter: brightness(0.7);
        }

        /* 5. Estilo dos ícones dentro do overlay */
        .avatar-action-icon {
            width: 35px;
            height: 35px;
            text-align: center;
            border-radius: 10%;
            color: var(--sulsul-rose-oss);
            background-color: var(--sulsul-purple);
            font-size: 20px;
            text-decoration: none;
            transition: transform 0.2s ease;
        }
        .avatar-action-icon:hover {
            transform: scale(1.1);
        }

        .btn-visit-website-overlay{
            position: absolute;
            top: 2rem;
            right: 2rem;
            background-color: var(--sulsul-purple);
            color: var(--sulsul-light-gray);
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--sulsul-title-gray);
            text-decoration: none;
            transition: all .2s ease;
            z-index: 3;
        }
        .btn-visit-website-overlay:hover{
            background-color: var(--sulsul-title-gray);
            color: var(--sulsul-purple);
        }

        /* Banner (full-width) */
        .producer-hero-image{
            position: relative;
            min-height: 240px;
        }
        .producer-hero-image > img{
            display: block;
            width: 100%;
            height: auto;
        }

        /* Faixa de título abaixo do banner, com largura limitada */
        .producer-title-section{
            /* background-color: var(--sulsul-purple); */
            color: var(--sulsul-light-gray);
            padding: 2.5rem 1rem;
            /* border-bottom: 2px solid var(--sulsul-purple); */
        }

        /* Contêiner estreito (800px) para o título e metadados */
        .container-narrow-producer{
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        /* Tipografia do título/subtítulo/local */
        .producer-name{
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1.05;
            letter-spacing: 2px;
            color: var(--sulsul-title-gray);
            margin-bottom: .25rem;
        }
        .producer-subtitle{
            font-family: 'Oswald', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            margin-bottom: .25rem;
        }
        .producer-location{
            font-family: 'Oswald', sans-serif;
            /* font-weight: 700; */
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        /* Elementos flutuantes ancorados ao banner e invadindo a faixa de título */
        .producer-logo-float,
        .btn-plus-float{
            position: absolute;
            z-index: 4;
        }


        .producer-logo-float{
            position: absolute;
            z-index: 3;
            bottom: -90px;           /* invade a faixa */
            right: 25%;
            width: 200px;
            height:200px;
            border-radius: 50%;
            /* border: 4px solid #000; */
            object-fit: cover;
            background: #000;
        }
        .btn-plus-float{
            bottom: -75px;           /* acompanha a borda do logo */
            right: calc(25% + 20px);
            transform: translateY(50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--sulsul-red);
            color: #fff;
            /*border: 2px solid #000;*/
            font-size: 2rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ====== Seções já existentes (ajustadas para conviver com o novo hero) ====== */

        .producer-stats{
            padding-top: 100px; /* respiro por causa do logo flutuante */
        }

        .upcoming-events-list{

        }

        .stat-item-producer{
            display: flex; align-items: flex-end; gap: 1rem;
        }
        .stat-prefix{
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem; font-weight: 700;
            color: var(--sulsul-title-gray);
            text-align: end;
        }
        .stat-number-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 6rem; font-weight: 700;
            color: var(--sulsul-green); line-height: 1;
        }
        .stat-label-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem; color: var(--sulsul-title-gray);
            text-transform: uppercase;
            line-height: 1.2;
        }

        .section-title-small{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            padding-bottom: .5rem;
        }

        .upcoming-event-item{
            display: flex;
            align-items: center;
            gap: 1.5rem;
            border: 2px solid var(--sulsul-purple);
        }
        .date-box{
            background-color: var(--sulsul-purple); color:#fff;
            font-family:'Oswald',sans-serif; text-align:center; padding:.5rem; min-width:70px;
        }
        .date-box .day{ display:block; font-size:2.5rem; font-weight:700; line-height:1; }
        .date-box .month{ display:block; font-size:1rem; font-weight:700; text-transform:uppercase; }
        .upcoming-event-item .info h3{
            font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; color:var(--sulsul-title-gray); margin:0;
        }
        .upcoming-event-item .info p{
            font-family:'Montserrat',sans-serif;
            color:var(--sulsul-light-gray);
            margin:0;
        }


        .events-conducted-carousel .caption{
            font-family:'Oswald',sans-serif;
            color:var(--sulsul-light-gray);
            margin-top:1rem; font-weight:700;
        }

        .connections-list{ display:flex; flex-wrap:wrap; gap:1rem; }
        .connections-list img{ width:80px; height:80px; border:3px solid var(--sulsul-gray); }

        /* Utilitário geral (se não existir): container estreito padrão */
        .container-narrow{
            max-width: 800px;
            margin-left: auto; margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, .75rem);
            padding-left: var(--bs-gutter-x, .75rem);
        }

        .hr-section-sep{
            display:block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 60px 0 0;  /* 2rem de espaço ACIMA do hr */
        }

        /* Responsivo */
        @media (max-width: 767px){
            .producer-name{ font-size: 2rem; }
            .producer-subtitle{ font-size: 1rem; }
            .producer-logo-float{ width:100px; height:100px; bottom:-30px; right:6%; }
            .btn-plus-float{ right: calc(6% + 80px); width:40px; height:40px; font-size:1.6rem; }
            .stat-number-producer{ font-size: 4rem; }
            .stat-item-producer{ justify-content:center; flex-direction:column; align-items:center; text-align:center; }
            .stat-label-producer{ padding-bottom:0; }
        }

/* ===== resources/views/site/collectives/show.blade.php ===== */
/* ====== PÁGINA DE COLETIVO ====== */

        /* Estilo para a seção hero */
        .collective-hero-image {
            width: 100%;
            height: 400px; /* Defina a altura fixa que desejar aqui (ex: 450px) */
            position: relative; /* Mantido para os elementos flutuantes */
            overflow: hidden; /* Esconde qualquer parte da imagem que exceda a altura fixa */
        }

        /* Estilo para a imagem dentro da seção hero */
        .collective-hero-image .collective-hero {
            width: 100%;
            height: 100%;

            /* A MÁGICA ACONTECE AQUI */
            object-fit: cover; /* Garante que a imagem cubra toda a área sem distorcer */

            /* Opcional: Centraliza a imagem dentro do quadro. Você pode usar 'top', 'bottom', etc. */
            object-position: center;
        }

        .collective-info-section {
            /* Padding no topo para dar espaço ao logo flutuante que vem de cima */
            padding-top: 100px;
        }

        .collective-type-tag {
            display: inline-block;
            background-color: #FAF4B7; /* Tom de amarelo/bege do layout */
            color: #000;
            padding: 0.25rem 1rem;
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        /* Garante que os títulos reutilizados tenham a margem correta nesta seção */
        .collective-info-section .producer-name,
        .collective-info-section .producer-subtitle,
        .collective-info-section .producer-location {
            margin-bottom: 0.5rem;
        }

        /* Substitua as regras existentes no seu custom.css por estas */

        .producer-hero {
            min-height: 50vh;
            position: relative; /* Essencial: torna esta section a referência de posicionamento */
            display: flex;
            align-items: flex-end; /* Alinha o container de texto na base */
            padding-bottom: 80px;
            color: #fff;
        }

        .container-narrow-collective {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }


        /*** PARA AVALIAR E REMOVER ****/
        /* ====== PÁGINA DE PERFIL DE USUÁRIO ====== */

        .profile-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--sulsul-purple);
        }

        .profile-name {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        .social-icons {
            display: flex;
            gap: 0.8rem;
        }
        .social-icons a {
            color: var(--sulsul-purple);
            font-size: 1.5rem;
            transition: color 0.2s ease;
        }
        .social-icons a:hover {
            color: var(--sulsul-green);
        }

        .container-narrow-profile {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            border-bottom: 2px solid var(--sulsul-purple);
        }

        .container-narrow-profile-border-none {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        .profile-subtitle {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--sulsul-green);
            letter-spacing: 2px;
            margin: 0.25rem 0;
        }

        .profile-location {
            font-family: 'Oswald', sans-serif;
            font-weight: 150;
            letter-spacing: 0.5px;
            color: var(--sulsul-light-gray);
            margin-bottom: 1rem;
        }

        .profile-bio {
            font-family: 'Oswald', sans-serif;
            color: var(--sulsul-title-gray);
            font-size: 0.9rem;
        }

        /* --- Estatísticas do Perfil --- */
        .stat-item-profile {
            display: flex;
            align-items-baseline;
            gap: 0.5rem;
            justify-content: center; /* Alinha no centro em telas menores */
            color: var(--sulsul-green);
        }
        @media (min-width: 768px) {
            .stat-item-profile {
                justify-content: flex-start; /* Alinha à esquerda em telas maiores */
            }
        }

        .stat-number-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            color: var(--sulsul-green);
            line-height: 1;
        }
        .stat-label-profile {
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            padding-top: 10px;
            line-height: 1;
        }

        .hide-data-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-size: 0.9rem;
        }

        /* --- Link "Add More" --- */
        .add-more-link {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            text-decoration: none;
            font-weight: 700;
        }

        /* --- Linha Separadora --- */
        .hr-section-sep {
            display: block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 40px 0;
        }

        /* --- Efeito Hover para o Avatar do Usuário --- */

        /* 1. O contêiner principal que servirá de referência para o overlay */
        .avatar-container {
            position: relative; /* Essencial para posicionar o overlay */
            display: inline-block; /* Faz o contêiner ter o tamanho da imagem */
            cursor: pointer;
        }

        /* 2. O overlay que contém os ícones */
        .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%; /* Garante que o overlay seja circular como a imagem */
            background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */

            /* Centraliza os ícones dentro do overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px; /* Espaçamento entre os ícones */

            /* Esconde o overlay por padrão */
            opacity: 0;
            visibility: hidden;

            /* Efeito de transição suave */
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        /* 3. A MÁGICA: Revela o overlay quando o mouse passa sobre o contêiner */
        .avatar-container:hover .avatar-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* 4. (Opcional) Adiciona um efeito na imagem para destacar os ícones */
        .avatar-container:hover .profile-avatar {
            filter: brightness(0.7);
        }

        /* 5. Estilo dos ícones dentro do overlay */
        .avatar-action-icon {
            width: 35px;
            height: 35px;
            text-align: center;
            border-radius: 10%;
            color: var(--sulsul-rose-oss);
            background-color: var(--sulsul-purple);
            font-size: 20px;
            text-decoration: none;
            transition: transform 0.2s ease;
        }
        .avatar-action-icon:hover {
            transform: scale(1.1);
        }

        .btn-visit-website-overlay{
            position: absolute;
            top: 2rem;
            right: 2rem;
            background-color: var(--sulsul-purple);
            color: var(--sulsul-light-gray);
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--sulsul-title-gray);
            text-decoration: none;
            transition: all .2s ease;
            z-index: 3;
        }
        .btn-visit-website-overlay:hover{
            background-color: var(--sulsul-title-gray);
            color: var(--sulsul-purple);
        }

        /* Banner (full-width) */
        .producer-hero-image{
            position: relative;
            min-height: 240px;
        }
        .producer-hero-image > img{
            display: block;
            width: 100%;
            height: auto;
        }

        /* Faixa de título abaixo do banner, com largura limitada */
        .producer-title-section{
            /* background-color: var(--sulsul-purple); */
            color: var(--sulsul-light-gray);
            padding: 2.5rem 1rem;
            /* border-bottom: 2px solid var(--sulsul-purple); */
        }

        /* Contêiner estreito (800px) para o título e metadados */
        .container-narrow-producer{
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        /* Tipografia do título/subtítulo/local */
        .producer-name{
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 3rem;
            line-height: 1.05;
            letter-spacing: 2px;
            color: var(--sulsul-title-gray);
            margin-bottom: .25rem;
        }
        .producer-subtitle{
            font-family: 'Oswald', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--sulsul-purple);
            margin-bottom: .25rem;
        }
        .producer-location{
            font-family: 'Oswald', sans-serif;
            /* font-weight: 700; */
            color: var(--sulsul-light-gray);
            margin: 0;
        }

        /* Elementos flutuantes ancorados ao banner e invadindo a faixa de título */
        .producer-logo-float,
        .btn-plus-float{
            position: absolute;
            z-index: 4;
        }


        .producer-logo-float{
            position: absolute;
            z-index: 3;
            bottom: -90px;           /* invade a faixa */
            right: 25%;
            width: 200px;
            height:200px;
            border-radius: 50%;
            /* border: 4px solid #000; */
            object-fit: cover;
            background: #000;
        }
        .btn-plus-float{
            bottom: -75px;           /* acompanha a borda do logo */
            right: calc(25% + 20px);
            transform: translateY(50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--sulsul-red);
            color: #fff;
            /*border: 2px solid #000;*/
            font-size: 2rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ====== Seções já existentes (ajustadas para conviver com o novo hero) ====== */

        .producer-stats{
            padding-top: 100px; /* respiro por causa do logo flutuante */
        }

        .upcoming-events-list{

        }

        .stat-item-producer{
            display: flex; align-items: flex-end; gap: 1rem;
        }
        .stat-prefix{
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem; font-weight: 700;
            color: var(--sulsul-title-gray);
            text-align: end;
        }
        .stat-number-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 6rem; font-weight: 700;
            color: var(--sulsul-green); line-height: 1;
        }
        .stat-label-producer{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem; color: var(--sulsul-title-gray);
            text-transform: uppercase;
            line-height: 1.2;
        }

        .section-title-small{
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            color: var(--sulsul-green);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            padding-bottom: .5rem;
        }

        .upcoming-event-item{
            display: flex;
            align-items: center;
            gap: 1.5rem;
            border: 2px solid var(--sulsul-purple);
        }
        .date-box{
            background-color: var(--sulsul-purple); color:#fff;
            font-family:'Oswald',sans-serif; text-align:center; padding:.5rem; min-width:70px;
        }
        .date-box .day{ display:block; font-size:2.5rem; font-weight:700; line-height:1; }
        .date-box .month{ display:block; font-size:1rem; font-weight:700; text-transform:uppercase; }
        .upcoming-event-item .info h3{
            font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; color:var(--sulsul-title-gray); margin:0;
        }
        .upcoming-event-item .info p{
            font-family:'Montserrat',sans-serif;
            color:var(--sulsul-light-gray);
            margin:0;
        }


        .events-conducted-carousel .caption{
            font-family:'Oswald',sans-serif;
            color:var(--sulsul-light-gray);
            margin-top:1rem; font-weight:700;
        }

        .connections-list{ display:flex; flex-wrap:wrap; gap:1rem; }
        .connections-list img{ width:80px; height:80px; border:3px solid var(--sulsul-gray); }

        /* Utilitário geral (se não existir): container estreito padrão */
        .container-narrow{
            max-width: 800px;
            margin-left: auto; margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, .75rem);
            padding-left: var(--bs-gutter-x, .75rem);
        }

        .hr-section-sep{
            display:block;
            height: 2px;
            background-color: var(--sulsul-purple);
            border: 0;
            opacity: 1;
            margin: 60px 0 0;  /* 2rem de espaço ACIMA do hr */
        }

        /* Responsivo */
        @media (max-width: 767px){
            .producer-name{ font-size: 2rem; }
            .producer-subtitle{ font-size: 1rem; }
            .producer-logo-float{ width:100px; height:100px; bottom:-30px; right:6%; }
            .btn-plus-float{ right: calc(6% + 80px); width:40px; height:40px; font-size:1.6rem; }
            .stat-number-producer{ font-size: 4rem; }
            .stat-item-producer{ justify-content:center; flex-direction:column; align-items:center; text-align:center; }
            .stat-label-producer{ padding-bottom:0; }
        }

/* ===== resources/views/site/collectives/partials/form.blade.php ===== */
/* Herdando seu estilo de form + textarea */
        .avatar-img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
        .cover-img  { width: 100%; max-width: 640px; height: 135px; object-fit: cover; border-radius: 8px; }
        .loader-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 10000; }
        .loader-box { color: #fff; text-align: center; padding: 18px 22px; background: rgba(0,0,0,.6); border-radius: 12px; backdrop-filter: blur(2px); }
        .d-none { display: none !important; }

        .form-textarea-oss {
            width: 100%;
            min-height: 10lh; /* 10 linhas visuais */
            background-color: var(--sulsul-purple);
            border: 1px solid var(--sulsul-purple);
            padding: 12px 15px;
            color: var(--sulsul-rose-oss);
            font-family: 'Oswald', sans-serif;
            font-size: 20px;
            letter-spacing: 2px;
            resize: vertical;
        }
        .form-textarea-oss::placeholder { color: var(--sulsul-rose-oss); opacity: .85; }

        /* Lista de redes: */
        .links-repeater .link-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; }
        .links-repeater .remove-link { background:#384942; color:#dea2c8; }

        /* Chips (mesmo padrão do registro) */
        .topics-container { display:flex; flex-wrap:wrap; gap:5px; }
        .chip { font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; display:inline-block; position:relative; }
        .chip input[type="checkbox"] { display:none; }
        .chip span { display:block; padding:8px 16px; border-radius:50px; background:var(--sulsul-purple); color:var(--sulsul-rose-oss); cursor:pointer; letter-spacing:4px; text-transform:uppercase; transition:.2s; }
        .chip span:hover { background:var(--sulsul-green); color:var(--sulsul-ink-oss); }
        .chip.active span { background:var(--sulsul-green); color:var(--sulsul-ink-oss); }

        .invalid-feedback { color:#ff6b6b; margin-top:6px; font-size:.9rem; }

        .social-section {
            padding: 10px 0 0;
        }
        .active-socials-inputs {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 12px;
        }
        .social-input-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .social-input-wrapper > div {
            position: relative;
            width: 100%;
        }
        .social-input-wrapper input.form-control-oss {
            padding-left: 40px;
        }
        .social-input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sulsul-rose-oss, #dea2c8);
            font-size: 1rem;
        }
        .social-icons-selector {
            display: flex;
            gap: 10px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        .social-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--wizard-pink, #6f1e3b);
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.7;
        }
        .social-icon-btn:hover,
        .social-icon-btn.active {
            opacity: 1;
            transform: scale(1.05);
        }
        .btn-remove-social {
            background: transparent;
            border: none;
            color: #ff6b6b;
            font-size: 1.2rem;
            cursor: pointer;
        }
        .socials-empty {
            margin-top: 8px;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.65);
        }