/*========================================================

NITHIDEZ WEB V2

HEADER

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

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

html{
    scroll-behavior:smooth;
}

/*====================================================
IDENTIDAD VISUAL NITHIDEZ
====================================================*/

:root{

    --negro:#080808;

    --negro-profundo:#050505;

    --blanco:#ffffff;

    --cobre:#D97B17;

    --gris:#9c9c9c;

    --transicion:.35s ease;

}

body{

 background:var(--negro-profundo);

color:var(--blanco);

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

    overflow-x:hidden;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    display:block;

    max-width:100%;

}

button{

    border:none;

    background:none;

    cursor:pointer;

}

/*========================================================

CONTENEDOR PRINCIPAL

========================================================*/

.contenedor{

    width:min(92%, 1500px);

    margin:auto;

}

/*========================================================

HEADER

========================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(217,123,23,.35);

    transition:.35s ease;

}

.header .contenedor{

    display:grid;

    grid-template-columns:300px 1fr 110px;

    align-items:center;

    height:90px;

}

/*========================================================

LOGO

========================================================*/

.logo{

    display:flex;

    align-items:flex-start;

}

.logo div{

    display:flex;

    flex-direction:column;

}

/*====================================================
LOGOTIPO NITHIDEZ
====================================================*/

.logo h1{

    color:#ffffff;

    font-size:42px;

    font-weight:700;

    letter-spacing:8px;

    text-transform:uppercase;

    line-height:1;

    transition:.35s ease;

}

.logo h1 span{

    color:#D97B17;

}

.logo p{

    margin-top:8px;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

    color:#ffffff;

}

.logo-linea{

    position:relative;

  width:220px;

 height: 2px;

  margin-top:12px;

    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;

}

.logo:hover h1{

    transform:scale(1.02);

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

TIPOGRAFÍA HEADER

========================================================*/

.header{

    font-size:14px;

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

}

/*========================================================

MENÚ

========================================================*/

.menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:55px;

}

.menu a{

    position:relative;

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:.35s ease;

}
.menu a:hover{

    color:#D97B17;

}

body:has(#galeria:target) .menu a[href="#galeria"] {

    color: #D97B17;

}


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

.acciones{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:22px;

}

.acciones button{

    color:#ffffff;

    font-size:17px;

    transition:.35s ease;

}

.acciones button:hover{

  color:#D97B17;

    transform:translateY(-2px);

}

/*========================================================
ANIMACIÓN HALO LOGO
========================================================*/

@keyframes haloLogo{

    0%{

        left:-60px;

    }

    100%{

        left:220px;

    }

}

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

.hero{

    padding:90px 0 60px;

}

.hero-contenido{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;

}

.hero-texto{

    flex:0 0 42%;

    max-width:620px;

    opacity:1;

    transform:none;

}

.hero-render{

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    opacity:1;

    transform:none;

}



/*========================================================
TIPOGRAFÍA HERO
========================================================*/

.hero-etiqueta{

    color:var(--blanco);

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:26px;

}

.hero h2{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-bottom:30px;

}

.hero h2 span{

    font-size:82px;

    font-weight:900;

    line-height:.95;

    letter-spacing:-2px;

    color:var(--blanco);

}

.hero h2 span:nth-child(2),

.hero h2 span:nth-child(3),

.hero h2 span:nth-child(4){

    color:var(--cobre);

}

.hero-descripcion{

    width:580px;

    max-width:100%;

    font-size:21px;

    line-height:1.8;

    color:#d8d8d8;

}

/*========================================================
BOTÓN HERO
========================================================*/

.btn-principal{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:42px;

    padding:18px 42px;

    background:var(--cobre);

    color:var(--blanco);

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    border-radius:10px;

    transition:var(--transicion);

 opacity:1;

transform:none;

}

.btn-principal:hover{

    transform:translateY(-4px);

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

}

/*========================================================
FILOSOFÍA
========================================================*/

.filosofia{
    padding:100px 0 70px;
    background:#090909;
}

.filosofia .contenedor{

    max-width:900px;

    text-align:center;

}

.filosofia-etiqueta{

    color:var(--cobre);

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.filosofia h2{

    font-size:58px;

    line-height:1.15;

    font-weight:900;

    color:var(--blanco);

    margin-bottom:35px;

}

.filosofia h2 span{

    display:block;

    color:var(--cobre);

}

.filosofia-texto{

    font-size:22px;

    line-height:1.9;

    color:#cfcfcf;

    max-width:780px;

    margin:auto;

}

/*========================================================
PILARES NITHIDEZ
========================================================*/

.pilares{

    padding:90px 0;

    background:#050505;

}

.pilares .contenedor{

    display:grid;

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

    gap:60px;

}

.pilar{

    text-align:center;

    padding:35px 25px;

    background:#141414;

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

    border-radius:16px;

    transition:all .45s ease;

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

.pilar h3{

    color:var(--cobre);

   font-size:34px;
font-weight:800;

    letter-spacing:3px;

    margin-bottom:25px;

}

.pilar p{

    color:#d0d0d0;

    font-size:19px;

    line-height:1.8;

}

.pilar:hover{

    background:#111111;

    transform:translateY(-8px);

}

.pilar::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:var(--cobre);

    transform:translateX(-50%);

    transition:.45s ease;

}

.pilar:hover{

    transform:translateY(-12px);

    border-color:rgba(255,145,0,.45);

    box-shadow:
    0 0 25px rgba(255,145,0,.15),
    0 15px 40px rgba(0,0,0,.45);

}

.pilar:nth-child(1):hover{

    border-color:#ff9800;

}

.pilar:nth-child(2):hover{

    box-shadow:
        0 0 35px rgba(255,210,120,.35);

}

.pilar:nth-child(3):hover{

    transform:
        translateY(-12px)
        scale(1.03);

}

.pilar:hover::before{

    width:100%;

}

.pilar:hover h3{

    letter-spacing:5px;

}

.pilar:hover p{

    color:#ffffff;

}

/*========================================================
PERSONALIDAD PROPIA — TARJETAS NITHIDEZ
========================================================*/

/* BASE PARA LOS EFECTOS */

.pilar{
    isolation:isolate;
}

.pilar h3,
.pilar p{
    position:relative;
    z-index:2;
}


/*========================================================
01 — ORGANIZA
ORDEN / RETÍCULA / ESTRUCTURA
========================================================*/

.pilar:nth-child(1)::after{

    content:"";

    position:absolute;

    inset:18px;

    background:
        linear-gradient(
            90deg,
            transparent 49.5%,
            rgba(217,123,23,.22) 50%,
            transparent 50.5%
        ),
        linear-gradient(
            0deg,
            transparent 49.5%,
            rgba(217,123,23,.22) 50%,
            transparent 50.5%
        );

    background-size:18px 18px;

    opacity:0;

    transform:scale(.92);

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

    pointer-events:none;

    z-index:1;
}

.pilar:nth-child(1):hover::after{

    opacity:.65;

    transform:scale(1);

}


/*========================================================
02 — ILUMINA
LUZ / HALO / CALIDEZ
========================================================*/

.pilar:nth-child(2)::after{

    content:"";

    position:absolute;

    inset:-35px;

    background:
        radial-gradient(
            circle,
            rgba(217,123,23,.22) 0%,
            rgba(217,123,23,.10) 28%,
            transparent 68%
        );

    opacity:0;

    transform:scale(.75);

    transition:
        opacity .55s ease,
        transform .55s ease;

    pointer-events:none;

    z-index:0;
}

.pilar:nth-child(2):hover::after{

    opacity:1;

    transform:scale(1);

}

.pilar:nth-child(2):hover{

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

}


/*========================================================
03 — IMPRESIONA
PRESENCIA / IMPACTO
========================================================*/
.pilar:nth-child(3)::after{

    content:"";

    position:absolute;

    inset:-40%;

    background:
        linear-gradient(
            120deg,
            transparent 42%,
            rgba(217,123,23,.12) 47%,
            rgba(217,123,23,.45) 50%,
            rgba(217,123,23,.12) 53%,
            transparent 58%
        );

    opacity:0;

    transform:translateX(-35%) rotate(-8deg);

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

    pointer-events:none;

    z-index:1;
}

.pilar:nth-child(3):hover{

    transform:
        translateY(-12px)
        scale(1.035);

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

}

.pilar:nth-child(3):hover::after{

    opacity:1;

    transform:scale(1);

}


/*========================================================
DETALLE FINAL — TÍTULO CON PERSONALIDAD
========================================================*/

.pilar:nth-child(1):hover h3{
    letter-spacing:6px;
}

.pilar:nth-child(2):hover h3{
    letter-spacing:5px;
    text-shadow:
        0 0 12px rgba(217,123,23,.45);
}

.pilar:nth-child(3):hover h3{
    letter-spacing:6px;
    transform:scale(1.04);
}

/*==================================================
PRODUCTOS
==================================================*/

.productos{

  padding: 80px 0 40px;

    background:#050505;

}

.productos-header{

    max-width:900px;

   margin: 0 auto 40px;

    text-align:center;

}

.productos-etiqueta{

    color:var(--cobre);

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.productos-header h2{

    font-size:64px;

    line-height:1.05;

    color:var(--blanco);

    font-weight:900;

    margin-bottom:35px;

}

.productos-header h2 span{

    display:block;

    color:var(--cobre);

}

.productos-texto{

    font-size:22px;

    color:#cfcfcf;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}

/*==================================================
SHOWROOM PRODUCTOS
==================================================*/

.showroom-productos {
    padding: 60px 0 80px;
    background: #050505;
    border-top: 1px solid rgba(255,145,0,.08);
}

.showroom-productos{
    position:relative;
}

.showroom-productos::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.showroom-productos::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}

.showroom-productos .contenedor{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:70px;

    align-items:center;

}

.selector-productos{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*====================================================

SHOWROOM NITHIDEZ

====================================================*/

.showroom-productos{

    padding:160px 0;

    background:#050505;

}

.showroom-productos .contenedor{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:80px;

    align-items:center;

}

.selector-productos{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.selector-productos button{

    background:none;

    border:none;

    color:#666;

    font-size:15px;

    text-align:left;

    cursor:pointer;

    position:relative;

    transition:.35s;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.selector-productos button::after{

    content:"";

    position:absolute;

    left:calc(100% + 18px);

    top:50%;

    width:75px;

    height:42px;

    transform:translateY(-50%);

    opacity:0;

    pointer-events:none;

    clip-path:polygon(
        0 45%,
        72% 45%,
        72% 20%,
        100% 50%,
        72% 80%,
        72% 55%,
        0 55%
    );

    background:
        repeating-linear-gradient(
            135deg,
            rgba(217,123,23,.65) 0,
            rgba(217,123,23,.65) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            45deg,
            rgba(217,123,23,.45) 0,
            rgba(217,123,23,.45) 1px,
            transparent 1px,
            transparent 6px
        );

   transition: opacity .35s ease, transform .35s ease;
}
.selector-productos button:hover::after{

    opacity:.75;

    transform:
        translate(8px,-50%);
}

.selector-productos .producto-activo{

    color:var(--cobre);

    transform:translateX(18px);

}

/*====================================================
PERSONALIDAD TARJETAS — SHOWROOM NITHIDEZ
====================================================*/

.selector-productos button{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:12px 0;
    overflow:visible;
}

.selector-productos button span{
    transition:
        color .35s ease,
        transform .35s ease,
        letter-spacing .35s ease;
}

/* Flecha-malla */

.selector-productos button::after{
    content:"";
    position:absolute;
    right:-10px;
    top:50%;
    width:42px;
    height:18px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 5px,
            rgba(217,123,23,.65) 5px 6px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 5px,
            rgba(217,123,23,.65) 5px 6px
        );

    clip-path:polygon(
        0 42%,
        70% 42%,
        70% 10%,
        100% 50%,
        70% 90%,
        70% 58%,
        0 58%
    );

    opacity:0;
    transform:translateY(-50%) translateX(-12px);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

/* Interacción */

.selector-productos button:hover{
    color:#ffffff;
}

.selector-productos button:hover span{
    color:var(--cobre);
    transform:translateX(7px);
    letter-spacing:2.5px;
}

.selector-productos button:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

/* El activo mantiene su presencia */

.selector-productos .producto-activo span{
    color:var(--cobre);
}

.selector-productos .producto-activo::after{
    opacity:.35;
    transform:translateY(-50%) translateX(0);
}

.visor-producto{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

}

.producto-escena{

    background:#111111;

    border:1px solid rgba(255,145,0,.18);

    border-radius:22px;

    overflow:hidden;

    min-height:620px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

}

.producto-escena img{

    width:100%;

    height:auto;

    object-fit:contain;

    transition:.5s ease;

}

/*====================================================
PERSONALIDAD — ORGANIZADOR
ORDEN / ESTRUCTURA / PRECISIÓN
====================================================*/

.producto-escena{
    position:relative;
}

.producto-escena::after{
    content:"";
    position:absolute;
    inset:35px;

    background:
        linear-gradient(
            90deg,
            transparent 49.5%,
            rgba(217,123,23,.12) 50%,
            transparent 50.5%
        ),
        linear-gradient(
            0deg,
            transparent 49.5%,
            rgba(217,123,23,.12) 50%,
            transparent 50.5%
        );

    background-size:24px 24px;

    opacity:0;
    transform:scale(.96);

    transition:
        opacity .5s ease,
        transform .5s ease;

    pointer-events:none;
    z-index:2;
}

.producto-escena:hover::after{
    opacity:.55;
    transform:scale(1);
}

.producto-escena:hover{
    border-color:rgba(217,123,23,.45);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.45);
}

.producto-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.producto-info .producto-categoria{

    color:var(--cobre);

    font-size:14px;

    letter-spacing:4px;

    text-transform:uppercase;

}

.producto-info h3{

    font-size:56px;

    line-height:1.05;

    color:white;

}

.producto-info p{

    font-size:20px;

    line-height:1.8;

    color:#d8d8d8;

}

/*====================================================
WHATSAPP NITHIDEZ
BOTÓN FLOTANTE — ESTADO COMPACTO + HOVER EXPANSIVO
====================================================*/

.whatsapp-flotante{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:9999;

    width:52px;
    height:52px;

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

    gap:14px;

    padding:0;

    overflow:hidden;

    background:#111111;
    border:1px solid var(--cobre);
    border-radius:40px;

    color:#ffffff;

    box-sizing:border-box;

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

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


/* TEXTO OCULTO EN ESTADO NORMAL */

.whatsapp-texto{
    width:0;
    max-width:0;

    opacity:0;

    overflow:hidden;
    white-space:nowrap;

    font-size:14px;
    font-weight:700;

    color:#ffffff;

    transition:
        width .35s ease,
        max-width .35s ease,
        opacity .25s ease,
        color .35s ease;
}


/* CÍRCULO WHATSAPP */

.whatsapp-icono{
    width:52px;
    height:52px;

    min-width:52px;

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

    border-radius:50%;

    background:var(--cobre);
    color:#ffffff;

    font-size:27px;

    box-sizing:border-box;

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


/*====================================================
HOVER
====================================================*/

.whatsapp-flotante:hover{
    width:280px;

    background:#111111;

    border-color:var(--cobre);

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(217,123,23,.20),
        0 10px 30px rgba(0,0,0,.45);
}


.whatsapp-flotante:hover .whatsapp-texto{
    width:195px;
    max-width:195px;

    opacity:1;

    color:#ffffff;
}


.whatsapp-flotante:hover .whatsapp-icono{
    background:#25D366;

    transform:scale(1.05);

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

/* ========================================
   SEPARADOR NITHIDEZ
   Línea cobre + rombo central
======================================== */

.nithidez-divider {
    width: 220px;
    margin: 34px auto 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.nithidez-divider::before,
.nithidez-divider::after {
    content: "";
    height: 1px;
    width: 82px;
    background: var(--cobre);
    opacity: 0.9;
}

.nithidez-divider span {
    width: 9px;
    height: 9px;
    background: var(--cobre);
    display: block;
    transform: rotate(45deg);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(217, 123, 23, 0.25);
}

/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}/* ========================================================
   EXPERIENCIA NITHIDEZ
   RECIBIR · DESCUBRIR · VIVIR
======================================================== */

.experiencia-nithidez{
    padding:160px 0 150px;
    background:#080808;
    position:relative;
    overflow:hidden;
}

/* Línea superior decorativa */

.experiencia-nithidez::before{
    content:"";
    position:absolute;
    top:80px;
    left:50%;
    width:180px;
    height:1px;
    background:var(--cobre);
    transform:translateX(-50%);
    box-shadow:0 0 10px rgba(217,123,23,.25);
}

.experiencia-nithidez::after{
    content:"";
    position:absolute;
    top:76px;
    left:50%;
    width:8px;
    height:8px;
    background:var(--cobre);
    transform:translateX(-50%) rotate(45deg);
    box-shadow:0 0 8px rgba(217,123,23,.25);
}


/* ========================================================
   ENCABEZADO
======================================================== */

.experiencia-header{
    max-width:900px;
    margin:0 auto 85px;
    text-align:center;
}

.experiencia-etiqueta{
    color:var(--cobre);
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:25px;
}

.experiencia-header h2{
    font-size:64px;
    line-height:1.05;
    color:var(--blanco);
    font-weight:900;
    margin-bottom:35px;
}

.experiencia-header h2 span{
    display:block;
    color:var(--cobre);
}

.experiencia-texto{
    font-size:21px;
    line-height:1.8;
    color:#cfcfcf;
    max-width:760px;
    margin:auto;
}


/* ========================================================
   GRID DE EXPERIENCIAS
======================================================== */

.experiencia-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}


/* ========================================================
   TARJETAS
======================================================== */

.experiencia-card{
    position:relative;
    background:#111111;
    border:1px solid rgba(217,123,23,.16);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.experiencia-card:hover{
    transform:translateY(-10px);
    border-color:rgba(217,123,23,.55);
    box-shadow:
        0 0 30px rgba(217,123,23,.12),
        0 20px 45px rgba(0,0,0,.55);
}


/* ========================================================
   IMÁGENES
======================================================== */

.experiencia-imagen{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    background:#0d0d0d;
}

.experiencia-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.45)
    );
    pointer-events:none;
}

.experiencia-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .7s ease,
        filter .5s ease;
}

.experiencia-card:hover .experiencia-imagen img{
    transform:scale(1.04);
}


/* ========================================================
   CONTENIDO
======================================================== */

.experiencia-contenido{
    position:relative;
    padding:28px 30px 32px;
    background:#111111;
}

.experiencia-numero{
    display:block;
    color:var(--cobre);
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:12px;
}

.experiencia-contenido h3{
    color:#ffffff;
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:15px;
    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.experiencia-contenido p{
    color:#c8c8c8;
    font-size:16px;
    line-height:1.7;
}

.experiencia-card:hover .experiencia-contenido h3{
    color:var(--cobre);
    letter-spacing:4px;
}


/* ========================================================
   DETALLE COBRE INFERIOR
======================================================== */

.experiencia-contenido::after{
    content:"";
    position:absolute;
    left:30px;
    bottom:0;
    width:0;
    height:2px;
    background:var(--cobre);
    transition:width .45s ease;
}

.experiencia-card:hover .experiencia-contenido::after{
    width:calc(100% - 60px);
}

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

.galeria-nithidez {
    padding: 100px 0 120px;
    background: #050505;
    border-top: 1px solid rgba(217,123,23,.12);
}

.galeria-nithidez .contenedor {
    width: min(1400px, 92%);
    margin: 0 auto;
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* =========================================================
   TÍTULO — HECHO EN NITHIDEZ
   ========================================================= */

.galeria-nithidez .titulo-seccion {
    text-align: center;
    margin: 0 auto 45px;
    max-width: 850px;
}

.galeria-nithidez .titulo-seccion span {
    display: block;
    color: var(--cobre);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.galeria-nithidez .titulo-seccion h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0 0 14px;
}

.galeria-nithidez .titulo-seccion p {
    color: #c8c8c8;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 650px;
}

/* Línea cobre */
.galeria-nithidez .titulo-seccion::after {
    content: "◆";
    display: block;
    width: 180px;
    height: 2px;
    color: var(--cobre);
    border-top: 2px solid var(--cobre);
    margin: 30px auto 0;
    line-height: 0;
    font-size: 12px;
}

.galeria-grid img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(217,123,23,.28);
    border-radius: 18px;
    background: #111;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.galeria-grid img:hover {
    transform: translateY(-6px);
    border-color: var(--cobre);
    box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

.galeria-grid img{
    border-bottom: 1px solid var(--cobre);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

/* ================================
   VIDEO NITHIDEZ
================================ */

.video-nithidez {
    width: 100%;
    padding: 70px 0;
}

.video-nithidez .contenedor {
    width: min(1200px, 92%);
    margin: 0 auto;
}

.video-nithidez-contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(217, 123, 23, 0.28);
    border-radius: 18px;
    background: #050505;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
}

.video-nithidez-contenedor video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* =========================================================
   CONTACTO NITHIDEZ
   ========================================================= */

.contacto-nithidez {
    position: relative;
    padding: 120px 0 130px;
    background: var(--negro-profundo);
    overflow: hidden;
}

/* Luz ambiental sutil */
.contacto-nithidez::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -280px;
    top: 20%;
    background: radial-gradient(
        circle,
        rgba(217, 123, 23, 0.10) 0%,
        rgba(217, 123, 23, 0.03) 38%,
        transparent 72%
    );
    pointer-events: none;
}

/* Línea superior */
.contacto-nithidez::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    height: 1px;
    background: var(--cobre);
    transform: translateX(-50%);
    opacity: 0.8;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.contacto-header {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.contacto-etiqueta {
    margin: 0 0 18px;
    color: var(--cobre);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.contacto-header h2 {
    margin: 0 0 24px;
    color: var(--blanco);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 1px;
}

.contacto-header h2 span {
    display: block;
    color: var(--cobre);
}

.contacto-descripcion {
    max-width: 680px;
    margin: 0 auto;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   CUERPO
   ========================================================= */

.contacto-grid {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: stretch;
}

/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 105px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(217, 123, 23, 0.20);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.contacto-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--cobre);
    transition: height 0.35s ease;
}

.contacto-item:hover {
    transform: translateX(6px);
    border-color: rgba(217, 123, 23, 0.55);
    background: rgba(217, 123, 23, 0.045);
}

.contacto-item:hover::before {
    height: 100%;
}

/* =========================================================
   ICONOS
   ========================================================= */

.contacto-icono {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cobre);
    font-size: 21px;
    border: 1px solid rgba(217, 123, 23, 0.65);
    background: rgba(217, 123, 23, 0.035);
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.contacto-item:hover .contacto-icono {
    background: rgba(217, 123, 23, 0.12);
    transform: scale(1.05);
}

.contacto-item h3 {
    margin: 0 0 8px;
    color: var(--blanco);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.contacto-item p {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   LLAMADO A LA ACCIÓN
   ========================================================= */

.contacto-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
    background:
        linear-gradient(
            145deg,
            rgba(217, 123, 23, 0.10),
            rgba(255, 255, 255, 0.018) 55%,
            rgba(255, 255, 255, 0.008)
        );
    border: 1px solid rgba(217, 123, 23, 0.28);
    overflow: hidden;
}

.contacto-cta::before {
    content: "N";
    position: absolute;
    right: -20px;
    bottom: -75px;
    color: rgba(217, 123, 23, 0.035);
    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.contacto-cta p {
    position: relative;
    z-index: 1;
    margin: 0 0 34px;
    color: var(--blanco);
    font-size: 20px;
    line-height: 1.65;
}

/* =========================================================
   BOTÓN
   ========================================================= */

.contacto-boton {
    position: relative;
    z-index: 1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 17px 30px;
    color: var(--blanco);
    background: var(--cobre);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 1px solid var(--cobre);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contacto-boton:hover {
    transform: translateY(-3px);
    background: #b96812;
    box-shadow: 0 14px 35px rgba(217, 123, 23, 0.20);
}

.contacto-boton i {
    transition: transform 0.3s ease;
}

.contacto-boton:hover i {
    transform: translateX(6px);
}/* =========================================================
   CONTACTO NITHIDEZ
   ========================================================= */

.contacto-nithidez {
    position: relative;
    padding: 120px 0 130px;
    background: var(--negro-profundo);
    overflow: hidden;
}

/* Luz ambiental sutil */
.contacto-nithidez::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -280px;
    top: 20%;
    background: radial-gradient(
        circle,
        rgba(217, 123, 23, 0.10) 0%,
        rgba(217, 123, 23, 0.03) 38%,
        transparent 72%
    );
    pointer-events: none;
}

/* Línea superior */
.contacto-nithidez::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    height: 1px;
    background: var(--cobre);
    transform: translateX(-50%);
    opacity: 0.8;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.contacto-header {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.contacto-etiqueta {
    margin: 0 0 18px;
    color: var(--cobre);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.contacto-header h2 {
    margin: 0 0 24px;
    color: var(--blanco);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 1px;
}

.contacto-header h2 span {
    display: block;
    color: var(--cobre);
}

.contacto-descripcion {
    max-width: 680px;
    margin: 0 auto;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   CUERPO
   ========================================================= */

.contacto-grid {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: stretch;
}

/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 105px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(217, 123, 23, 0.20);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.contacto-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--cobre);
    transition: height 0.35s ease;
}

.contacto-item:hover {
    transform: translateX(6px);
    border-color: rgba(217, 123, 23, 0.55);
    background: rgba(217, 123, 23, 0.045);
}

.contacto-item:hover::before {
    height: 100%;
}

/* =========================================================
   ICONOS
   ========================================================= */

.contacto-icono {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cobre);
    font-size: 21px;
    border: 1px solid rgba(217, 123, 23, 0.65);
    background: rgba(217, 123, 23, 0.035);
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.contacto-item:hover .contacto-icono {
    background: rgba(217, 123, 23, 0.12);
    transform: scale(1.05);
}

.contacto-item h3 {
    margin: 0 0 8px;
    color: var(--blanco);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.contacto-item p {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   LLAMADO A LA ACCIÓN
   ========================================================= */

.contacto-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
    background:
        linear-gradient(
            145deg,
            rgba(217, 123, 23, 0.10),
            rgba(255, 255, 255, 0.018) 55%,
            rgba(255, 255, 255, 0.008)
        );
    border: 1px solid rgba(217, 123, 23, 0.28);
    overflow: hidden;
}

.contacto-cta::before {
    content: "N";
    position: absolute;
    right: -20px;
    bottom: -75px;
    color: rgba(217, 123, 23, 0.035);
    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.contacto-cta p {
    position: relative;
    z-index: 1;
    margin: 0 0 34px;
    color: var(--blanco);
    font-size: 20px;
    line-height: 1.65;
}

/* =========================================================
   BOTÓN
   ========================================================= */

.contacto-boton {
    position: relative;
    z-index: 1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 17px 30px;
    color: var(--blanco);
    background: var(--cobre);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 1px solid var(--cobre);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contacto-boton:hover {
    transform: translateY(-3px);
    background: #b96812;
    box-shadow: 0 14px 35px rgba(217, 123, 23, 0.20);
}

.contacto-boton i {
    transition: transform 0.3s ease;
}

.contacto-boton:hover i {
    transform: translateX(6px);
}/* =========================================================
   CONTACTO NITHIDEZ
   ========================================================= */

.contacto-nithidez {
    position: relative;
    padding: 120px 0 130px;
    background: var(--negro-profundo);
    overflow: hidden;
}

/* Luz ambiental sutil */
.contacto-nithidez::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -280px;
    top: 20%;
    background: radial-gradient(
        circle,
        rgba(217, 123, 23, 0.10) 0%,
        rgba(217, 123, 23, 0.03) 38%,
        transparent 72%
    );
    pointer-events: none;
}

/* Línea superior */
.contacto-nithidez::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    height: 1px;
    background: var(--cobre);
    transform: translateX(-50%);
    opacity: 0.8;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.contacto-header {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.contacto-etiqueta {
    margin: 0 0 18px;
    color: var(--cobre);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.contacto-header h2 {
    margin: 0 0 24px;
    color: var(--blanco);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 1px;
}

.contacto-header h2 span {
    display: block;
    color: var(--cobre);
}

.contacto-descripcion {
    max-width: 680px;
    margin: 0 auto;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   CUERPO
   ========================================================= */

.contacto-grid {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: stretch;
}

/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 105px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(217, 123, 23, 0.20);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.contacto-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--cobre);
    transition: height 0.35s ease;
}

.contacto-item:hover {
    transform: translateX(6px);
    border-color: rgba(217, 123, 23, 0.55);
    background: rgba(217, 123, 23, 0.045);
}

.contacto-item:hover::before {
    height: 100%;
}

/* =========================================================
   ICONOS
   ========================================================= */

.contacto-icono {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cobre);
    font-size: 21px;
    border: 1px solid rgba(217, 123, 23, 0.65);
    background: rgba(217, 123, 23, 0.035);
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.contacto-item:hover .contacto-icono {
    background: rgba(217, 123, 23, 0.12);
    transform: scale(1.05);
}

.contacto-item h3 {
    margin: 0 0 8px;
    color: var(--blanco);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.contacto-item p {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   LLAMADO A LA ACCIÓN
   ========================================================= */

.contacto-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
    background:
        linear-gradient(
            145deg,
            rgba(217, 123, 23, 0.10),
            rgba(255, 255, 255, 0.018) 55%,
            rgba(255, 255, 255, 0.008)
        );
    border: 1px solid rgba(217, 123, 23, 0.28);
    overflow: hidden;
}

.contacto-cta::before {
    content: "N";
    position: absolute;
    right: -20px;
    bottom: -75px;
    color: rgba(217, 123, 23, 0.035);
    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.contacto-cta p {
    position: relative;
    z-index: 1;
    margin: 0 0 34px;
    color: var(--blanco);
    font-size: 20px;
    line-height: 1.65;
}

/* =========================================================
   BOTÓN
   ========================================================= */

.contacto-boton {
    position: relative;
    z-index: 1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 17px 30px;
    color: var(--blanco);
    background: var(--cobre);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 1px solid var(--cobre);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contacto-boton:hover {
    transform: translateY(-3px);
    background: #b96812;
    box-shadow: 0 14px 35px rgba(217, 123, 23, 0.20);
}

.contacto-boton i {
    transition: transform 0.3s ease;
}

.contacto-boton:hover i {
    transform: translateX(6px);
}

/* =========================================================
   CONTACTO NITHIDEZ
   ========================================================= */

.contacto-nithidez {
    position: relative;
    padding: 120px 0 130px;
    background: var(--negro-profundo);
    overflow: hidden;
}

/* Luz ambiental sutil */
.contacto-nithidez::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -280px;
    top: 20%;
    background: radial-gradient(
        circle,
        rgba(217, 123, 23, 0.10) 0%,
        rgba(217, 123, 23, 0.03) 38%,
        transparent 72%
    );
    pointer-events: none;
}

/* Línea superior */
.contacto-nithidez::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 180px;
    height: 1px;
    background: var(--cobre);
    transform: translateX(-50%);
    opacity: 0.8;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.contacto-header {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.contacto-etiqueta {
    margin: 0 0 18px;
    color: var(--cobre);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.contacto-header h2 {
    margin: 0 0 24px;
    color: var(--blanco);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 1px;
}

.contacto-header h2 span {
    display: block;
    color: var(--cobre);
}

.contacto-descripcion {
    max-width: 680px;
    margin: 0 auto;
    color: var(--gris);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   CUERPO
   ========================================================= */

.contacto-grid {
    position: relative;
    z-index: 1;
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: stretch;
}

/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 105px;
    padding: 24px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(217, 123, 23, 0.20);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.contacto-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--cobre);
    transition: height 0.35s ease;
}

.contacto-item:hover {
    transform: translateX(6px);
    border-color: rgba(217, 123, 23, 0.55);
    background: rgba(217, 123, 23, 0.045);
}

.contacto-item:hover::before {
    height: 100%;
}

/* =========================================================
   ICONOS
   ========================================================= */

.contacto-icono {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cobre);
    font-size: 21px;
    border: 1px solid rgba(217, 123, 23, 0.65);
    background: rgba(217, 123, 23, 0.035);
    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.contacto-item:hover .contacto-icono {
    background: rgba(217, 123, 23, 0.12);
    transform: scale(1.05);
}

.contacto-item h3 {
    margin: 0 0 8px;
    color: var(--blanco);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.contacto-item p {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   LLAMADO A LA ACCIÓN
   ========================================================= */

.contacto-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px;
    background:
        linear-gradient(
            145deg,
            rgba(217, 123, 23, 0.10),
            rgba(255, 255, 255, 0.018) 55%,
            rgba(255, 255, 255, 0.008)
        );
    border: 1px solid rgba(217, 123, 23, 0.28);
    overflow: hidden;
}

.contacto-cta::before {
    content: "N";
    position: absolute;
    right: -20px;
    bottom: -75px;
    color: rgba(217, 123, 23, 0.035);
    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.contacto-cta p {
    position: relative;
    z-index: 1;
    margin: 0 0 34px;
    color: var(--blanco);
    font-size: 20px;
    line-height: 1.65;
}

/* =========================================================
   BOTÓN
   ========================================================= */

.contacto-boton {
    position: relative;
    z-index: 1;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 17px 30px;
    color: var(--blanco);
    background: var(--cobre);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 1px solid var(--cobre);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.contacto-boton:hover {
    transform: translateY(-3px);
    background: #b96812;
    box-shadow: 0 14px 35px rgba(217, 123, 23, 0.20);
}

.contacto-boton i {
    transition: transform 0.3s ease;
}

.contacto-boton:hover i {
    transform: translateX(6px);
}