/**
 * =========================================================
 * PLUXDOM HYDRA-SILO SEO GRID
 * ARCHIVO:
 * /wp-content/themes/PLUXDOM-ULTRA/hydra-silo-grid/pluxdom-hydra-silo.css
 *
 * FUNCIÓN:
 * HYDRA SILO SEO GRID
 * Zillow + Airbnb + Sotheby’s Luxury UX
 * =========================================================
 */


/* =====================================================
   CONTENEDOR PRINCIPAL / TOPIC AUTHORITY
===================================================== */
.pluxdom-hydra-silo-grid{
    width:100%;
    position:relative;
    margin-top:60px;
    padding:70px 0 70px;
    overflow:hidden;


}

/* =====================================================
   HEADER
===================================================== */
.pluxdom-hydra-silo-header{
    text-align:center;
    max-width:1480px;
    margin:0 auto 40px;
    padding:0 24px;
}

/* =====================================================
   H2 SILO / KEYWORD DOMINATION
===================================================== */
.pluxdom-hydra-silo-title{
    margin:0 auto;

    font-size:clamp(3rem,5vw,5.6rem);
    line-height:.96;
    font-weight:900;

    letter-spacing:-2.2px;

    color:#ffffff;

    max-width:1200px;
    text-wrap:balance;
}

.pluxdom-hydra-silo-title span{
    color:#d4a017;
}

/* =====================================================
   SUBTITLE
===================================================== */
.pluxdom-hydra-silo-subtitle{
    max-width:980px;

    margin:18px auto 0;
    padding:0 10px;

    font-size:1.15rem;
    line-height:1.7;

    color:rgba(255,255,255,.82);
}

/* =====================================================
   GRID CATEGORÍAS
===================================================== */
.pluxdom-hydra-silo-category-grid{
    max-width:1480px;

    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));

    gap:22px;

    margin:0 auto;
    padding:0 24px;
}

/* =====================================================
   CARD / SEO NODE
===================================================== */
.pluxdom-hydra-silo-card{
    position:relative;

    border-radius:26px;
    overflow:hidden;

    background:#061427;

    border:1px solid rgba(212,160,23,.16);

    box-shadow:
        0 14px 38px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.02);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.pluxdom-hydra-silo-card:hover{
    transform:translateY(-8px);

    border-color:rgba(212,160,23,.32);

    box-shadow:
        0 24px 50px rgba(0,0,0,.36),
        inset 0 0 0 1px rgba(255,255,255,.03);
}

/* =====================================================
   LINK
===================================================== */
.pluxdom-hydra-silo-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

/* =====================================================
   IMAGE WRAP / VISUAL SEMANTIC RELEVANCE
===================================================== */
.pluxdom-hydra-silo-image-wrap{
    position:relative;
    width:100%;
    overflow:hidden;
}

.pluxdom-hydra-silo-image-wrap img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;

    transition:transform .6s ease;
}

.pluxdom-hydra-silo-card:hover .pluxdom-hydra-silo-image-wrap img{
    transform:scale(1.04);
}

/* =====================================================
   CONTENT
===================================================== */
.pluxdom-hydra-silo-content{
    padding:26px 22px 28px;

    min-height:190px;

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

    text-align:center;

    background:#061427;
}

/* =====================================================
   EXACT MATCH ANCHOR
===================================================== */
.pluxdom-hydra-silo-content h3{
    margin:0;

    font-size:1.55rem;
    line-height:1.24;
    font-weight:800;

    letter-spacing:-0.5px;

    color:#ffffff;

    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:5px;

    text-wrap:balance;
}

/* =====================================================
   CTA ARROW
===================================================== */
.pluxdom-hydra-arrow{
    display:inline-block;

    margin-top:16px;

    font-size:2.6rem;
    line-height:1;

    color:#d4a017;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.pluxdom-hydra-silo-card:hover .pluxdom-hydra-arrow{
    transform:translateX(8px);
}

/* =====================================================
   TABLET
===================================================== */
@media (max-width:1024px){

    .pluxdom-hydra-silo-grid{
        padding:56px 0 56px;
    }

    .pluxdom-hydra-silo-category-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .pluxdom-hydra-silo-image-wrap img{
        height:360px;
    }
}


/* =====================================================
   MOBILE ULTRA FINAL
===================================================== */
@media (max-width:768px){

   .pluxdom-hydra-silo-grid {
    width: 100%;
    margin-top: 25px;
    padding: 0px 0px 0px;
    overflow: hidden;
    position: relative;
}

    /* =====================================================
       HEADER
    ===================================================== */
    .pluxdom-hydra-silo-header{
        padding:0 14px;
        margin-bottom:16px;
        text-align:center;
    }

    /* =====================================================
       H2 SOLO 2 LÍNEAS
    ===================================================== */
    .pluxdom-hydra-silo-title{
        margin:0 auto;

        font-size:30px;
        line-height: 1.2;
        font-weight:900;

        letter-spacing:-2.4px;

        color:#ffffff;

        max-width:88%;

        text-align:center;

        white-space:normal;
        text-wrap:balance;
    }

    .pluxdom-hydra-silo-title span{
        color:#d4a017;
    }

   

    /* =====================================================
       HORIZONTAL SNAP
    ===================================================== */
    .pluxdom-hydra-silo-category-grid{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;

        gap:12px;

        overflow-x:auto;
        overflow-y:hidden;

        padding:0 14px 8px;

        scroll-snap-type:x mandatory;
        scroll-padding-left:14px;
        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .pluxdom-hydra-silo-category-grid::-webkit-scrollbar{
        display:none;
    }

    /* =====================================================
       CARD
    ===================================================== */
    .pluxdom-hydra-silo-card{
        flex:0 0 76%;
        min-width:76%;

        scroll-snap-align:start;

        border-radius:24px;
        overflow:hidden;

        background:#061427;
        border:1px solid rgba(212,160,23,.18);

        box-shadow:
            0 10px 26px rgba(0,0,0,.26),
            inset 0 0 0 1px rgba(255,255,255,.02);
    }

    /* =====================================================
       IMAGE GRANDE
    ===================================================== */
    .pluxdom-hydra-silo-image-wrap img{
        width:100%;
        height:250px;
        object-fit:cover;
        display:block;
    }

    /* =====================================================
       CONTENT ULTRA COMPACT
    ===================================================== */
    .pluxdom-hydra-silo-content{
        padding:10px 12px 10px;
        min-height:78px;

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

        text-align:center;

        background:#061427;
    }

    /* =====================================================
       TITLE CARD
    ===================================================== */
    .pluxdom-hydra-silo-content h3{
        margin:0;

        font-size:16px;
        line-height:1.08;
        letter-spacing:-0.35px;
        font-weight:800;

        color:#ffffff;

        text-decoration:underline;
        text-decoration-thickness:2px;
        text-underline-offset:3px;

        white-space:normal;
        word-break:normal;
        overflow-wrap:break-word;
        text-wrap:balance;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;

        overflow:hidden;

        max-width:100%;
    }

    /* =====================================================
       ARROW
    ===================================================== */
    .pluxdom-hydra-arrow{
        display:inline-block;

        margin-top:4px;

        font-size:1.7rem;
        line-height:1;

        color:#d4a017;
    }

    /* =====================================================
       FINAL SPACE
    ===================================================== */
    .pluxdom-hydra-silo-category-grid::after{
        content:"";
        flex:0 0 4px;
    }
}



/* --- LÍNEA DECORATIVA SUPERIOR --- */
.linea-sutil-silo {
    position: relative;
    top: 15px; /* 👈 Ajustado para no interferir con flujo */
    left: 0;
    z-index: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgb(255 215 0), transparent);
    pointer-events: none;
}