/* ==========================
   RESET GENERAL
========================== */

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


html{
    scroll-behavior:smooth;
}

body{


    background:#080808;

    color:#ffffff;

    font-family:Arial, Helvetica, sans-serif;  

 overflow-x:hidden;

}


.contenedor{

    width:min(92%,1280px);

    margin:auto;

}


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

header{

    position:sticky;

    top:0;

    z-index:1000;

 background:rgba(0,0,0,.92);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

   border-bottom:none;

    transition:.35s ease;

}

header{

    position:sticky;
    overflow:hidden;

}





header .contenedor{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100px;

}/* ==========================
        LOGO
========================== */


.logo h1{

    color:#ffffff;
    font-size:42px;
    font-weight:700;
    letter-spacing:8px;

}

.logo span{

    color:#d97b17;

}

.logo p{

    margin-top:8px;
    font-size:12px;
    letter-spacing:2px;
    color:#ffffff;

}

.logo-linea{

    position:relative;

    width:220px;

   height:1px;

  margin-top:16px;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(217,123,23,.45),
    transparent
);

    overflow:hidden;

}

.logo-linea span{

    position:absolute;

    top:0;

    left:-50px;

    width:50px;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    animation:haloLogo 3.5s linear infinite;

}

/* ==========================
        MENÚ
========================== */

.menu{

    display:flex;
    gap:45px;

}

.menu a{

    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:15px;
    transition:.3s;

}

.menu a:hover{

    color:#d97b17;

}/* ==========================
        ACCIONES
========================== */

.acciones{

    display:flex;
    gap:20px;

}

.acciones a{

    color:#ffffff;
    text-decoration:none;
    font-size:24px;
    transition:.3s;

}

.acciones a:hover{

    color:#d97b17;

}/* ===========================
            HERO
=========================== */

.hero{

    padding:90px 0;

    background:
    radial-gradient(circle at right center,
    rgba(217,123,23,.12),
    transparent 45%),

    linear-gradient(
    180deg,
    #090909 0%,
    #050505 100%);

}

.hero-contenido{

    position:relative;
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.hero-fondo{

    position:absolute;

    left:-120px;

    top:-40px;

    width:520px;

    height:520px;

    background-image:url("../img/panal.png");

    background-repeat:no-repeat;

    background-size:contain;

    opacity:.08;

    pointer-events:none;

}

.hero-texto{

    flex:1;

}

.hero-texto h2{

    font-size:72px;
    line-height:1.05;
    font-weight:800;
    margin-bottom:25px;
    display:flex;
    flex-direction:column;

}

.hero-texto h2 span{

    color:#d97b17;

}

.hero-texto p{

    color:#cfcfcf;
    font-size:18px;
    line-height:1.8;
    margin-bottom:35px;

}

.btn{

    display:inline-block;

    padding:16px 40px;

    background:#d97b17;

    color:#ffffff;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.btn:hover{

    background:#f39c38;

}

.hero-imagen{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}


.hero-imagen img{

    width:100%;

    max-width:760px;

    filter:drop-shadow(0 35px 60px rgba(0,0,0,.65));

    transition:.5s ease;

    animation: flotar 4s ease-in-out infinite;
}
.hero-imagen img:hover{

    transform:translateY(-10px) scale(1.02);

}

@keyframes flotar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}
/* ==========================
        BENEFICIOS
========================== */

.beneficios{

    padding:90px 0;

    background:#0b0b0b;

}

.beneficios-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.beneficio{

    background:#141414;

    border:1px solid #2a2a2a;

    border-radius:15px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

}

.beneficio:hover{

    transform:translateY(-8px);

    border-color:#d97b17;

    box-shadow:0 20px 40px rgba(217,123,23,.20);

}

.icono{

    font-size:42px;

    margin-bottom:18px;

}

.beneficio h3{

    color:#ffffff;

    margin-bottom:15px;

}

.beneficio p{

    color:#bdbdbd;

    line-height:1.7;

}

/* ==========================
      PRODUCTO DESTACADO
========================== */

.producto{

    padding:120px 0;

    background:#0d0d0d;

}

.producto-contenido{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.producto-imagen{

    flex:1;

}

.producto-imagen img{

    width:100%;

    border-radius:18px;

    box-shadow:0 35px 70px rgba(0,0,0,.55);

    transition:.45s;

}

.producto-imagen img:hover{

    transform:scale(1.03);

}

.producto-texto{

    flex:1;

}

.subtitulo{

    color:#d97b17;

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:20px;

}

.producto-texto h2{

    color:white;

    font-size:56px;

    line-height:1.1;

    margin-bottom:25px;

}

.producto-texto h2 span{

    display:block;

    color:#d97b17;

}

.descripcion{

    color:#cfcfcf;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.producto-texto ul{

    list-style:none;

    margin-bottom:40px;

}

.producto-texto ul li{

    color:white;

    margin-bottom:18px;

    font-size:18px;

}

/*==============================
        DETALLES
==============================*/

.detalles{

    padding:120px 0;

    background:#080808;

    text-align:center;

}

.detalles h2{

    font-size:64px;

    color:white;

    line-height:1.1;

    margin:25px 0;

}


/*==========================
      FILOSOFÍA
==========================*/
.detalles h2 span{

    color:#d97b17;

}

.detalles-texto{

    max-width:750px;

    margin:0 auto;

    color:#cfcfcf;

    font-size:20px;

    line-height:1.9;

}
.filosofia{

    padding:120px 0;

    background:#050505;

    text-align:center;

}

.filosofia h2{

    font-size:64px;

    color:white;

    line-height:1.1;

    margin:25px 0;

}

.filosofia h2 span{

    color:#d97b17;

}

.filosofia-texto{

    max-width:800px;

    margin:auto;

    color:#cfcfcf;

    font-size:21px;

    line-height:1.9;

}

/*==========================
        GALERÍA
==========================*/

.galeria{

    padding:80px 0 90px;

    background:#080808;

    text-align:center;

}

.galeria h2{

    font-size:56px;

    color:white;

    margin:18px 0 28px;

    line-height:1.08;

}

.galeria h2 span{

    color:#d97b17;

}


.galeria-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:70px;

    align-items:stretch;

}


/*==========================
    ESPECIFICACIONES
==========================*/

.especificaciones{

    padding:120px 0;

    background:#050505;

    text-align:center;

}

.especificaciones h2{

    font-size:64px;

    color:white;

    line-height:1.1;

    margin:25px 0 60px;

}

.especificaciones h2 span{

    color:#d97b17;

}

.especificaciones-grid{

    display:grid;

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

    gap:25px;

}

.spec-card{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:40px 25px;

    transition:.4s;

}

.spec-card:hover{

    transform:translateY(-10px);

    border-color:#d97b17;

    box-shadow:0 0 35px rgba(217,123,23,.25);

}

.spec-icono{

    font-size:42px;

    margin-bottom:20px;

}

.spec-card h3{

    color:white;

    font-size:24px;

    margin-bottom:18px;

}

.spec-card p{

    color:#cfcfcf;

    line-height:1.8;

    font-size:17px;

}

/*==============================
        ¿POR QUÉ NITHIDEZ?
===============================*/

.porque{

    padding:120px 0;

    background:#080808;

    text-align:center;

}

.porque h2{

    font-size:64px;

    color:white;

    line-height:1.1;

    margin:25px 0 70px;

}

.porque h2 span{

    color:#d97b17;

}

.porque-grid{

    display:grid;

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

    gap:25px;

}

.porque-item{

    position:relative;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:45px 28px;

    transition:.45s;

    overflow:hidden;

}

.porque-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#d97b17;

    transform:scaleX(0);

    transition:.45s;

}

.porque-item:hover{

    transform:translateY(-10px);

    border-color:#d97b17;

    box-shadow:0 0 40px rgba(217,123,23,.20);

}

.porque-item:hover::before{

    transform:scaleX(1);

}

.porque-item h3{

    color:white;

    font-size:25px;

    margin-bottom:18px;

}

.porque-item p{

    color:#cfcfcf;

    line-height:1.9;

    font-size:17px;

}

/*==============================
        LEGADO
==============================*/

.legado{

   padding:170px 0;

    background:#050505;

    text-align:center;

}

.legado h2{

    font-size:64px;

    color:#fff;

    line-height:1.1;

    margin:25px 0;

}

.legado h2 span{

    color:#d97b17;

}

.legado-texto{
    

   max-width:900px;

    margin:auto;

    color:#cfcfcf;

    font-size:24px;

    line-height:2;

}

    .linea-premium{

    width:120px;

    height:2px;

    background:#d97b17;

    margin:70px auto 0;

    border-radius:20px;

}

/*============================
        EXPERIENCIA
============================*/

.experiencia{

    padding:140px 0;

    background:#080808;

    text-align:center;

}

.experiencia h2{

    font-size:64px;

    color:#fff;

    line-height:1.1;

    margin:25px 0;

}

.experiencia h2 span{

    color:#d97b17;

}

.experiencia-texto{

    max-width:850px;

    margin:auto;

    color:#cfcfcf;

    font-size:22px;

    line-height:2;


}

@keyframes haloLogo{

    from{

        left:-50px;

    }

    to{

        left:220px;

    }
}


.whatsapp:hover{

    transform:translateY(-6px) scale(1.08);

}

/* ===========================
        WHATSAPP
=========================== */

.whatsapp{

    position:fixed;

    right:35px;

    bottom:45px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#0f0f0f;

    border:2px solid #d97b17;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:34px;

    box-shadow:
    0 0 18px rgba(217,123,23,.20),
    0 12px 35px rgba(0,0,0,.45);

    transition:.35s ease;

    z-index:9999;

}



.whatsapp:hover{

    background:#25D366;

    border-color:#25D366;

    color:#fff;

    transform:translateY(-8px) scale(1.08);

    box-shadow:
    0 0 30px rgba(37,211,102,.55),
    0 20px 45px rgba(0,0,0,.45);

}

/* ===========================
      TOOLTIP WHATSAPP
=========================== */

.tooltip-whatsapp{

    position:absolute;

    right:82px;

    top:50%;

    transform:translateY(-50%) translateX(15px);

    white-space:nowrap;

    background:#111;

    color:#fff;

    border:1px solid #d97b17;

    padding:12px 18px;

    border-radius:14px;

    font-size:14px;

    letter-spacing:.5px;

    opacity:0;

    pointer-events:none;

    transition:.35s ease;

    box-shadow:0 15px 35px rgba(0,0,0,.45);

}

.whatsapp:hover .tooltip-whatsapp{

    opacity:1;

    transform:translateY(-50%) translateX(0);

}

/*======================================
            FOOTER
======================================*/

.footer{

    background:#070707;

    border-top:1px solid rgba(217,123,23,.18);

    padding:90px 20px 45px;

}

.footer-contenedor{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.footer h2{

    color:#ffffff;

    font-size:42px;

    letter-spacing:8px;

    margin-bottom:18px;

}

.footer h2 span{

    color:#d97b17;

}

.footer-eslogan{

    color:#cfcfcf;

    font-size:18px;

    letter-spacing:1px;

    margin-bottom:35px;

}

.footer-linea{

    position:relative;

    width:90px;

    height:2px;

    margin:35px auto;

    background:rgba(217,123,23,.35);

    overflow:hidden;

}

.footer-linea::after{

    content:"";

    position:absolute;

    top:0;

    left:-40px;

    width:40px;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    animation:haloFooter 7s linear infinite;

}

.footer-contacto{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

}

.footer-contacto a{

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    transition:.35s;

}

.footer-contacto i{

    color:#d97b17;

    margin-right:10px;

}

.footer-contacto a:hover{

    color:#d97b17;

}

.copyright{

    color:#8b8b8b;

    font-size:14px;

    letter-spacing:1px;

    margin-top:20px;

}

@keyframes haloFooter{

    0%{

        left:-40px;

    }

    100%{

        left:130px;

    }

}

.tooltip-whatsapp{

    position:absolute;

    right:82px;

    white-space:nowrap;

    background:#0f0f0f;

    color:#ffffff;

    border:1px solid #d97b17;

    padding:12px 18px;

    border-radius:12px;

    font-size:14px;

    letter-spacing:.5px;

    opacity:0;

    transform:translateX(15px);

    pointer-events:none;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.45);

}

.whatsapp:hover .tooltip-whatsapp{

    opacity:1;

    transform:translateX(0);

}

/*==========================
 ORGANIZADOR PRINCIPAL
==========================*/



/*==========================
HUB NITHIDEZ
==========================*/

.hub-nithidez{

    padding:120px 0;

    background:#050505;

}

.hub-nithidez .contenedor{

    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

.hub-header{

    text-align:center;

    margin-bottom:70px;

}

.hub-intro{

    font-size:30px;

    font-weight:700;

    color:#ffffff;

    margin-top:35px;

}

.hub-texto{

    max-width:760px;

    margin:25px auto 0;

    font-size:20px;

    line-height:1.8;

    color:#bdbdbd;

}

.hub-render{

    text-align:center;

    margin:70px 0;

}

.hub-render img{

    width:100%;

    max-width:1550px;

    display:block;

    margin:0 auto;

    border-radius:22px;

    box-shadow:0 40px 90px rgba(0,0,0,.60);

}

.hub-beneficios{

    display:grid;

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

    gap:30px;

    margin-top:45px;

}

.hub-card{

    background:#0b0b0b;

    border:1px solid rgba(217,123,23,.18);

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

}

.hub-card:hover{

    transform:translateY(-8px);

    border-color:#d97b17;

    box-shadow:0 20px 45px rgba(217,123,23,.18);

}

.hub-card h3{

    color:#ffffff;

    margin:18px 0 12px;

    font-size:24px;

}

.hub-card p{

    color:#bdbdbd;

    line-height:1.7;

    font-size:17px;

}

.hub-firma{

    margin-top:120px;

    text-align:center;

}

.hub-firma p{

    color:#bdbdbd;

    font-size:22px;

    margin-bottom:10px;

}

.hub-firma h3{

    font-size:42px;

    font-weight:400;

    color:#d97b17;

    font-style:italic;

    letter-spacing:1px;

}

/*=========================================
        COLECCIÓN NITHIDEZ 2.0
=========================================*/

.coleccion-descripcion{

    max-width:760px;

    margin:0 auto 42px;

    color:#cfcfcf;

    font-size:19px;

    line-height:1.7;

}

.galeria-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    align-items:stretch;

}

.card-coleccion{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#101010;

    border:1px solid rgba(255,255,255,.08);

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

}

.card-coleccion img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
    transform .65s ease,
    filter .55s ease;

}

.card-coleccion:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:#d97b17;

    box-shadow:
        0 18px 45px rgba(0,0,0,.55),
        0 0 22px rgba(217,123,23,.18);

}

.card-coleccion::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:1px solid rgba(217,123,23,0);

    pointer-events:none;

    transition:.45s;

}

.card-coleccion:hover::before{

    border-color:rgba(217,123,23,.75);

}

.card-coleccion:hover img{

    transform:scale(1.04);

    filter:

    brightness(.35)

    contrast(1.12)

    saturate(1.08);

}

.card-coleccion:hover .card-premium{

    opacity:1;

    transform:translateY(0);

}

.card-coleccion .card-premium{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    min-height:260px;

    padding:26px 28px;

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

   background:linear-gradient(
    to top,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.92) 42%,
    rgba(0,0,0,.68) 68%,
    rgba(0,0,0,.18) 88%,
    transparent 100%

    );

    opacity:0;

    transform:translateY(100%);

    transition:
        transform .45s ease,
        opacity .35s ease;

}
 

.card-coleccion h3{

    color:#d97b17;

  font-size:26px;

margin-bottom:8px;

text-shadow:0 2px 8px rgba(0,0,0,.55);

}

.card-coleccion span{

    color:#d9d9d9;

    letter-spacing:2px;

    font-size:12px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.card-coleccion ul{

    margin:0;
padding-left:24px;
    

}

.card-coleccion li{

    margin-bottom:14px;

    line-height:1.8;

    font-size:15px;

}
.card-coleccion p{

    margin-top:26px;

    color:#ececec;

    font-size:15px;

    line-height:1.8;

}

@media(max-width:1100px){

    .galeria-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:720px){

    .galeria-grid{

        grid-template-columns:1fr;

    }

}