/* ======================================================
   RESET BÁSICO
====================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #050505;
    font-family: Arial, sans-serif;
    color: #fff;
}

/* ======================================================
   SEÇÃO PRINCIPAL
====================================================== */

.holding-section {
    position: relative;
    width: 100%;
    padding: 120px 0;
    overflow: hidden;
    background: radial-gradient(circle at top, #111 0%, #050505 60%);
}

/* ======================================================
   BACKGROUND
====================================================== */

.holding-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.holding-glow {
    display: none;
}

/* ======================================================
   CONTAINER
====================================================== */

.holding-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ======================================================
   HEADER
====================================================== */

.holding-header {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 1.2fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 30px;
}

/* título */
.holding-title span {
    font-size: 12px;
    letter-spacing: 3px;
    color: #b48c50;
    text-transform: uppercase;
}

.holding-title h2 {
    font-size: 52px;
    line-height: 1.1;
    margin-top: 15px;
}

/* logo */
.holding-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-box{

    display:flex;
    justify-content:center;
    align-items:center;

    background:transparent;

    border:none;

    box-shadow:none;

    width:180px;
    height:auto;

    padding:0;

}
/*=========================================
    GOLD GLOW
=========================================*/

.logo-box::before{

    content:"";

    position:absolute;

    width:90%;
    height:90%;

    border-radius:50%;

background:radial-gradient(

    ellipse at center,

    rgba(255,215,120,.20),

    rgba(255,180,50,.06),

    transparent 55%

);

    filter:blur(22px);

    z-index:-1;

    pointer-events:none;

}

/* texto */
.holding-text {
    font-size: 14px;
    line-height: 1.7;
    color: #bbb;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px;
}

/* ======================================================
   ORGANOGRAMA (SVG)
====================================================== */

.holding-org {
    position: relative;
    width: 100%;
    margin-bottom: -30px;
}

/* ESSENCIAL: sem isso o SVG some */
.holding-svg {
    width: 100%;
    height: 100px;
    display: block;
}

/* linhas */
.org-line{

    fill:none;

    stroke:#b08d57;

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:1000;

    stroke-dashoffset:1000;

    animation:drawLine 1.6s ease forwards;

}
@keyframes drawLine{

    to{

        stroke-dashoffset:0;

    }

}
.delay1{

    animation-delay:0s;

}

.delay2{

    animation-delay:.4s;

}

.delay3{

    animation-delay:.8s;

}

.delay4{

    animation-delay:1s;

}

.delay5{

    animation-delay:1.2s;

}

.delay6{

    animation-delay:1.4s;

}

/* ======================================================
   CARDS
====================================================== */

.holding-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* card base */
.holding-card {
    background: linear-gradient(180deg, #121212, #0b0b0b);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 30px;
    text-align: center;
    border-radius: 14px;
}

/* ícone */
.card-image{
    height:110px;
    margin:0 auto 24px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.card-image img{
    max-width:100%;
    max-height:100%;
    display:block;
    object-fit:contain;
}

/* tipografia */
.holding-card h3 {
    font-size: 28px;
    margin-bottom: 5px;
}

.holding-card span {
    font-size: 12px;
    color: #b48c50;
    letter-spacing: 2px;
}

.divider {
    width: 40px;
    height: 1px;
    background: rgba(180,140,80,0.5);
    margin: 15px auto;
}

.holding-card h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.holding-card p {
    font-size: 13px;
    color: #aaa;
    line-height: 1.6;
}

.holding-card a {
    display: inline-block;
    margin-top: 15px;
    color: #b48c50;
    text-decoration: none;
    font-size: 13px;
}

/* ======================================================
   RESPONSIVO BÁSICO (IMPORTANTE)
====================================================== */

@media (max-width: 1100px) {

    .holding-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .holding-cards {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 600px) {

    .holding-cards {
        grid-template-columns: 1fr;
    }

    .holding-title h2 {
        font-size: 36px;
    }

}
/* ======================================================
   FAÍSCAS DOURADAS
====================================================== */

.holding-org{
    position:relative;
}

.spark{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#ffd86b;

    box-shadow:
        0 0 6px #ffd86b,
        0 0 14px #ffcc55,
        0 0 25px rgba(255,215,80,.8);

    offset-rotate:0deg;

    pointer-events:none;

    z-index:50;

}

/* Linha Vertical */

.spark.main{

    offset-path:path("M600 0 L600 60");

    animation:sparkMain 3s linear infinite;

}

/* Horizontal */

.spark.horizontal{

    offset-path:path("M120 60 L1080 60");

    animation:sparkHorizontal 5s linear infinite;

}

/* Trust */

.spark.trust{

    offset-path:path("M120 60 L120 130");

    animation:sparkTrust 2.5s linear infinite;

}

/* Agro */

.spark.agro{

    offset-path:path("M440 60 L440 130");

    animation:sparkAgro 3.2s linear infinite;

}

/* Strategic */

.spark.strategic{

    offset-path:path("M760 60 L760 130");

    animation:sparkStrategic 2.8s linear infinite;

}

/* Capital */

.spark.capital{

    offset-path:path("M1080 60 L1080 130");

    animation:sparkCapital 3.6s linear infinite;

}

/* ======================================================
   ANIMAÇÕES
====================================================== */

@keyframes sparkMain{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}

@keyframes sparkHorizontal{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}

@keyframes sparkTrust{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}

@keyframes sparkAgro{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}

@keyframes sparkStrategic{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}

@keyframes sparkCapital{

    from{offset-distance:0%;}
    to{offset-distance:100%;}

}
.svg-spark{
    fill:#ffd36a;
    filter:drop-shadow(0 0 5px #ffd36a)
           drop-shadow(0 0 12px #ffb300);
}

.spark-1{ opacity:.95; }
.spark-2{ opacity:.75; }
.spark-3{ opacity:.85; }
.spark-4{ opacity:.7; }
.spark-5{ opacity:.9; }

/* ======================================================
   GLOW DINÂMICO DAS LINHAS
====================================================== */

.org-glow{
    fill:none;
    stroke:#ffd36a;
    stroke-width:3;
    stroke-linecap:round;
    opacity:0;

    stroke-dasharray:60 900;
    stroke-dashoffset:900;

    filter:
        drop-shadow(0 0 4px #ffd36a)
        drop-shadow(0 0 10px #ffb300)
        drop-shadow(0 0 20px rgba(255,179,0,.7));

    animation:lineGlowRun 4.8s linear infinite;
}

.glow-1{ animation-delay:0s; }
.glow-2{ animation-delay:.25s; }
.glow-3{ animation-delay:.7s; }
.glow-4{ animation-delay:1.1s; }
.glow-5{ animation-delay:1.5s; }
.glow-6{ animation-delay:1.9s; }

@keyframes lineGlowRun{

    0%{
        opacity:0;
        stroke-dashoffset:900;
    }

    8%{
        opacity:1;
    }

    45%{
        opacity:.9;
    }

    70%{
        opacity:0;
    }

    100%{
        opacity:0;
        stroke-dashoffset:-900;
    }

}
/*==================================================
  SPARK CARD
==================================================*/

.holding-card{
    position:relative;
    overflow:visible;
}

.holding-card::before{

    content:"";

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#ffd86b;

    box-shadow:
        0 0 8px #ffd86b,
        0 0 16px #ffcc55,
        0 0 28px rgba(255,210,80,.8);

    opacity:0;

    z-index:20;

    pointer-events:none;

}


/* gira enquanto houver hover */

.holding-card:hover::before{

    opacity:1;

    animation:borderSpark 5s linear infinite;

}


@keyframes borderSpark{

    0%{
        top:-1px;
        left:50%;
        transform:translateX(-50%);
    }

    20%{
        top:-1px;
        left:calc(100% + 1px);
        transform:translate(-50%,-50%);
    }

    45%{
        top:calc(100% + 1px);
        left:calc(100% + 1px);
        transform:translate(-50%,-50%);
    }

    70%{
        top:calc(100% + 1px);
        left:-1px;
        transform:translate(-50%,-50%);
    }

    90%{
        top:-1px;
        left:-1px;
        transform:translate(-50%,-50%);
    }

    100%{
        top:-1px;
        left:50%;
        transform:translateX(-50%);
    }

}
/* mantém a borda normal */
.holding-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

/* pedaços de borda animados */
.holding-card .border-piece{
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
}

/* primeiro pedaço */
.holding-card .border-piece::before,
.holding-card .border-piece::after{
    content:"";
    position:absolute;
    width:60%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        #ffd86b,
        transparent
    );
    box-shadow:
        0 0 6px #ffd86b,
        0 0 14px rgba(255,184,40,.8);
    opacity:0;
}

/* peça 1 */
.holding-card .border-piece::before{
    top:0;
    left:0;
}

/* peça 2 */
.holding-card .border-piece::after{
    bottom:0;
    right:0;
}

.holding-card:hover .border-piece{
    opacity:1;
}

.holding-card:hover .border-piece::before{
    animation:borderPieceOne 4s linear infinite;
}

.holding-card:hover .border-piece::after{
    animation:borderPieceTwo 4s linear infinite;
}

/* pedaço 1 circulando */
@keyframes borderPieceOne{

    0%{
        top:0;
        left:0;
        width:0;
        height:1px;
        opacity:0;
    }

    10%{
        width:20%;
        opacity:1;
    }

    25%{
        top:0;
        left:80%;
        width:10%;
        height:2px;
    }

    25.01%{
        top:0;
        left:calc(100% - 2px);
        width:2px;
        height:20%;
    }

    50%{
        top:80%;
        left:calc(100% - 2px);
        width:2px;
        height:20%;
    }

    50.01%{
        top:calc(100% - 2px);
        left:80%;
        width:20%;
        height:2px;
    }

    75%{
        top:calc(100% - 2px);
        left:0;
        width:20%;
        height:2px;
    }

    75.01%{
        top:80%;
        left:0;
        width:2px;
        height:20%;
    }

    95%{
        top:0;
        left:0;
        width:2px;
        height:20%;
        opacity:1;
    }

    100%{
        top:0;
        left:0;
        width:0;
        height:2px;
        opacity:0;
    }

}

/* pedaço 2 circulando no lado oposto */
@keyframes borderPieceTwo{

    0%{
        bottom:0;
        right:0;
        width:0;
        height:2px;
        opacity:0;
    }

    10%{
        width:20%;
        opacity:1;
    }

    25%{
        bottom:0;
        right:80%;
        width:20%;
        height:2px;
    }

    25.01%{
        bottom:0;
        right:calc(100% - 2px);
        width:2px;
        height:20%;
    }

    50%{
        bottom:80%;
        right:calc(100% - 2px);
        width:2px;
        height:20%;
    }

    50.01%{
        bottom:calc(100% - 2px);
        right:80%;
        width:20%;
        height:2px;
    }

    75%{
        bottom:calc(100% - 2px);
        right:0;
        width:20%;
        height:2px;
    }

    75.01%{
        bottom:80%;
        right:0;
        width:2px;
        height:20%;
    }

    95%{
        bottom:0;
        right:0;
        width:2px;
        height:20%;
        opacity:1;
    }

    100%{
        bottom:0;
        right:0;
        width:0;
        height:2px;
        opacity:0;
    }

}
/* ======================================================
   RESPONSIVO
====================================================== */

@media (max-width: 991px){

    /* Oculta o organograma */

    .holding-svg{
        display:none;
    }

    /* Remove o espaço deixado pelo SVG */

    .holding-org{
        margin-bottom:0;
    }

    /* Aproxima os cards do cabeçalho */

    .holding-cards{
        margin-top:0;
    }

}