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

   IMPORT FONT

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



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');



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

   ROOT

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



:root {

    --nr-green: #2f4f34;

    --nr-green-light: #446a4b;

    --nr-brown: #7b5a3a;

    --nr-beige: #f5f0e7;

    --nr-dark: #111111;

    --nr-white: #ffffff;

    --nr-shadow: 0 10px 35px rgba(0,0,0,.12);

    --nr-radius: 28px;

}



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

   RESET

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



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', sans-serif;

    background: var(--nr-beige);

    color: var(--nr-dark);

    overflow-x: hidden;

}



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

   HERO VIDEO OFERTAS

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



.hero-video-ofertas {

    position: relative;

    display: block;

    width: 100%;

    height: 340px;

    margin-top: 5px;

    overflow: hidden;

    text-decoration: none;

    isolation: isolate;

    background: #111;

    box-shadow: 0 18px 45px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);

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

}



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



    .hero-video-ofertas:hover {

        transform: translateY(-5px);

        box-shadow: 0 28px 60px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.10);

    }



/* ===  VIDEO  === */



.hero-video-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

    transition: transform 1.8s ease;

}



/* ZOOM SUAVE */



.hero-video-ofertas:hover

.hero-video-bg {

    transform: scale(1.04);

}



/* === OVERLAY OSCURO CINEMATOGRAFICO === */



.hero-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient( 90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.08) 100% );

}



/* === PARTICULAS SUAVES === */



.hero-particles {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background-image: radial-gradient( rgba(255,190,80,.22) 1px, transparent 1px );

    background-size: 120px 120px;

    opacity: .45;

    animation: particlesMove 18s linear infinite;

}



@keyframes particlesMove {



    from {

        transform: translateY(0px);

    }



    to {

        transform: translateY(-120px);

    }

}



/* === CONTENIDO === */



.hero-video-content {

    position: absolute;

    top: 50%;

    left: 7%;

    transform: translateY(-50%);

    z-index: 5;

    max-width: 420px;

    color: white;

}



/* ===  BADGE GLASSMORPHISM  === */



.hero-video-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

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

    backdrop-filter: blur(12px);

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

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    color: rgba(255,255,255,.92);

    box-shadow: 0 4px 14px rgba(0,0,0,.12);

}



    /* ICONO */



    .hero-video-badge i {

        color: #ffb347;

    }



/* ===  TITULO  === */



.hero-video-content h2 {

    font-size: 2rem;

    line-height: .95;

    font-weight: 700;

    letter-spacing: -1px;

    margin-bottom: 18px;

    color: #fff;

    text-shadow: 0 4px 12px rgba(0,0,0,.20);

}



/* ===  TEXTO  === */



.hero-video-content p {

    font-size: 1rem;

    line-height: 1.8;

    font-weight: 300;

    color: rgba(255,255,255,.88);

    margin-bottom: 24px;

    max-width: 390px;

}



/* ===  BOTON PREMIUM  === */



.hero-video-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 14px;

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

    color: #1b1b1b;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: transform .25s ease, gap .25s ease, background .25s ease, box-shadow .25s ease;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);

}



/* HOVER BOTON */



.hero-video-ofertas:hover

.hero-video-btn {

    transform: translateX(3px);

    gap: 14px;

    background: #ffffff;

}



/* ICONO */



.hero-video-btn i {

    font-size: .85rem;

}



/* ===  LOGO MARCA DESKTOP  === */



.hero-video-logo {

    position: absolute;

    right: 40px;

    top: 55%;

    bottom: auto;

    width: 360px;

    transform: translateY(-50%);

    opacity: .14;

    z-index: 4;

    pointer-events: none;

    user-select: none;

    transition: transform .6s ease, opacity .4s ease;

    mix-blend-mode: screen;

}



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



.hero-video-ofertas:hover

.hero-video-logo {

    transform: translateY(-50%) scale(1.03);

    opacity: .18;

}



/* ===  MOBILE  === */



@media (max-width: 768px) {



    .hero-video-ofertas {

        height: 420px;

        border-radius: 24px;

    }



    .hero-video-overlay {

        background: linear-gradient( 180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.78) 100% );

    }



    .hero-video-content {

        left: 25px;

        right: 25px;

        top: auto;

        bottom: 30px;

        transform: none;

        max-width: 100%;

    }



        .hero-video-content h2 {

            font-size: 2rem;

        }



        .hero-video-content p {

            font-size: .90rem;

            line-height: 1.6;

        }



    .hero-video-btn {

        width: 100%;

        justify-content: center;

    }



    .hero-video-badge {

        font-size: .72rem;

    }



    /* ===  LOGO MOBILE  === */



    .hero-video-logo {

        width: 125px;

        top: 14px;

        left: 50%;

        right: auto;

        bottom: auto;

        transform: translateX(-50%);

        opacity: .20;

    }



    .hero-video-ofertas:hover

    .hero-video-logo {

        transform: translateX(-50%) scale(1.03);

    }

}



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

   FIX GENERAL ESPACIADO PAGINA

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



.nr-page-container {

    width: 100%;

    max-width: 1600px;

    margin: auto;

    padding-left: 28px;

    padding-right: 28px;

    overflow: hidden;

}



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



.nr-hero {

    width: 100%;

    min-height: calc(100vh - 120px);

    height: auto;

    top: 0 !important;

    margin-bottom: 20px;

}



/* ===  FIX CONTENIDO GENERAL  === */



.nr-content {

    width: 100%;

    overflow: hidden;

    padding-bottom: 40px;

}



/* ===  FIX HERO VIDEO  === */



.hero-video-ofertas {

    width: 100%;

    margin-left: auto;

    margin-right: auto;

}



/* ===  FIX HERO PROMOS  === */



.hero-promos-nr {

    margin-left: auto;

    margin-right: auto;

    padding-left: 0;

    padding-right: 0;

}



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



.productos-destacados {

    margin-left: 0 !important;

    margin-right: 0 !important;

}



/* ===  FIX MOBILE  === */



@media(max-width:768px) {



    .nr-page-container {

        padding-left: 14px;

        padding-right: 14px;

    }



    .nr-hero {

        min-height: calc(100vh - 90px);

    }



    .hero-video-ofertas {

        border-radius: 22px;

    }



    .categorias-pro {

        padding-left: 0;

        padding-right: 0;

    }

}



/* ===  FIX EXTRA MOBILE HERO  === */



@media(max-width:768px) {



    .nr-page-container {

        padding-left: 12px !important;

        padding-right: 12px !important;

    }



    .hero-promos-nr {

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

}



/* Celulares */

@media (max-width: 768px) {



    .bi-hand-index-thumb {

        display: none !important;

    }

}





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

   SECTION

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



section {

    position: relative;

    padding: 60px 0;

}



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

   PRESENTATION

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



.nr-presentation {

    background: linear-gradient( to bottom, #f8f3ea, #f3ede2 );

}



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

   TEXT BLOCK

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



.nr-text-block {

    max-width: 620px;

}



.nr-section-subtitle {

    display: inline-block;

    margin-bottom: 20px;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--nr-green);

}



.nr-text-block h2 {

    font-size: clamp(2.5rem, 5vw, 4.4rem);

    line-height: 1.05;

    font-weight: 800;

    color: var(--nr-green);

    margin-bottom: 35px;

}



.nr-text-block p {

    font-size: 1.15rem;

    line-height: 1.9;

    margin-bottom: 25px;

    color: #444;

}



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

   IMAGE

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



.nr-image-wrapper {

    position: relative;

}



    .nr-image-wrapper img {

        border-radius: 36px;

        box-shadow: 0 30px 80px rgba(0,0,0,.15);

    }



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

   SERVICES

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



.nr-services {

    background: white;

}



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

   SECTION TITLE

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



.nr-section-title {

    text-align: center;

    margin-bottom: 30px;

}



    .nr-section-title span {

        display: inline-block;

        margin-bottom: 18px;

        color: var(--nr-green);

        font-weight: 700;

        letter-spacing: 3px;

    }



    .nr-section-title h2 {

        font-size: clamp(2.5rem, 5vw, 4rem);

        font-weight: 800;

        color: var(--nr-green);

    }



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

   CARD

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



.nr-card {

    background: rgba(255,255,255,.75);

    border-radius: 32px;

    padding: 45px;

    height: 100%;

    transition: .4s ease;

    border: 1px solid rgba(0,0,0,.06);

    box-shadow: 0 10px 35px rgba(0,0,0,.06);

}



    .nr-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 20px 60px rgba(0,0,0,.12);

    }



    .nr-card i {

        font-size: 3rem;

        color: var(--nr-green);

        margin-bottom: 30px;

    }



    .nr-card h3 {

        font-size: 1.5rem;

        font-weight: 800;

        margin-bottom: 20px;

        color: var(--nr-green);

    }



    .nr-card p {

        line-height: 1.8;

        color: #555;

    }



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

   COMMITMENT

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



.nr-commitment {

    background: linear-gradient( 135deg, #26422b, #1f2e22 );

}



.nr-commitment-box {

    max-width: 900px;

    margin: auto;

    text-align: center;

    padding: 80px 60px;

    border-radius: 40px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);

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

}



    .nr-commitment-box span {

        display: inline-block;

        margin-bottom: 25px;

        color: rgba(255,255,255,.7);

        letter-spacing: 3px;

        font-weight: 700;

    }



    .nr-commitment-box h2 {

        font-size: clamp(3rem, 5vw, 4.4rem);

        font-weight: 800;

        color: white;

        margin-bottom: 30px;

    }



    .nr-commitment-box p {

        font-size: 1.2rem;

        line-height: 2;

        color: rgba(255,255,255,.85);

    }



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

   CTA

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



.nr-cta {

    text-align: center;

    background: var(--nr-beige);

}



    .nr-cta h2 {

        font-size: clamp(2.5rem, 5vw, 4rem);

        font-weight: 800;

        color: var(--nr-green);

        max-width: 900px;

        margin: auto auto 45px;

    }



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

   RESPONSIVE

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



@media (max-width: 991px) {



    .nr-hero {

        min-height: 780px;

    }



    .nr-hero-content {

        text-align: center;

        margin: auto;

    }



    .nr-buttons {

        justify-content: center;

    }



    .nr-logo {

        width: 220px;

    }



    .nr-text-block {

        margin-bottom: 60px;

    }



    section {

        padding: 40px 0;

    }

}



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

   REVEAL

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



.nr-reveal {

    opacity: 0;

    transform: translateY(80px);

    transition: opacity 1s ease, transform 1s ease;

}



.nr-reveal-active {

    opacity: 1;

    transform: translateY(0);

}



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

   NAVBAR SCROLLED

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



.nr-navbar-scrolled {

    background: rgba(20,20,20,.72) !important;

    backdrop-filter: blur(14px);

    transition: .4s ease;

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

}



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

   BUTTON GLOW

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



.nr-btn-primary,

.nr-btn-secondary {

    position: relative;

    overflow: hidden;

}



    .nr-btn-primary::before,

    .nr-btn-secondary::before {

        content: '';

        position: absolute;

        inset: 0;

        background: radial-gradient( circle at var(--x) var(--y), rgba(255,255,255,.25), transparent 40% );

        opacity: 0;

        transition: opacity .25s ease;

    }



    .nr-btn-primary:hover::before,

    .nr-btn-secondary:hover::before {

        opacity: 1;

    }



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

   IMAGE FLOAT

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



.nr-image-wrapper {

    animation: nrFloat 7s ease-in-out infinite;

}



@keyframes nrFloat {



    0% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-12px);

    }



    100% {

        transform: translateY(0px);

    }

}



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

   CARD HOVER GLOW

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



.nr-card {

    position: relative;

    overflow: hidden;

}



    .nr-card::before {

        content: '';

        position: absolute;

        inset: 0;

        background: linear-gradient( 135deg, rgba(255,255,255,.15), transparent );

        opacity: 0;

        transition: .35s ease;

    }



    .nr-card:hover::before {

        opacity: 1;

    }



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

   STORYTELLING

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



.nr-storytelling {

    background: linear-gradient( to bottom, #f7f2e9, #efe7db );

}



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

   TOP

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



.nr-story-top {

    max-width: 950px;

    margin: auto auto 30px;

    text-align: center;

}



    .nr-story-top span {

        display: inline-block;

        margin-bottom: 20px;

        letter-spacing: 4px;

        font-weight: 700;

        color: var(--nr-green);

    }



    .nr-story-top h2 {

        font-size: clamp(3rem, 5vw, 4.4rem);

        line-height: .95;

        font-weight: 800;

        color: var(--nr-green);

    }



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

   STORY IMAGE

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



.nr-story-image {

    position: relative;

}



    .nr-story-image img {

        border-radius: 36px;

        box-shadow: 0 30px 90px rgba(0,0,0,.16);

    }





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

   STORY TEXT

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



.nr-about-text p {

    font-size: 1.25rem;

    line-height: 2;

    color: #444;

}



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

   STATS

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



.nr-stats {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 50px;

}



.nr-stat {

    flex: 1;

    min-width: 220px;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255,255,255,.6);

    backdrop-filter: blur(10px);

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

}



    .nr-stat h3 {

        font-size: 3rem;

        font-weight: 800;

        color: var(--nr-green);

        margin-bottom: 10px;

    }



    .nr-stat span {

        color: #555;

        font-weight: 600;

    }



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

   WIDE IMAGE

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



.nr-wide-image {

    margin-top: 140px;

    overflow: hidden;

}



    .nr-wide-image img {

        width: 100%;

        height: 720px;

        object-fit: cover;

    }



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

   BOTTOM

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



.nr-story-bottom {

    padding-top: 120px;

    text-align: center;

}



    .nr-story-bottom h2 {

        font-size: clamp(3rem, 7vw, 6rem);

        line-height: .95;

        font-weight: 900;

        color: var(--nr-green);

    }



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

   MOBILE

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



@media (max-width: 767px) {



    .nr-story-top {

        margin-bottom: 70px;

    }



    .nr-story-text p {

        font-size: 1.05rem;

    }



    .nr-wide-image img {

        height: 420px;

    }



    .nr-story-bottom {

        padding-top: 80px;

    }

}



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

   PREMIUM SERVICES

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



.nr-service-grid {

    display: grid;

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

    gap: 35px;

}



.nr-service-card {

    position: relative;

    height: 520px;

    overflow: hidden;

    border-radius: 36px;

    text-decoration: none;

    box-shadow: 0 25px 60px rgba(0,0,0,.12);

}



    .nr-service-card img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform .9s ease;

    }



    .nr-service-card::before {

        content: '';

        position: absolute;

        inset: 0;

        background: linear-gradient( to top, rgba(0,0,0,.75), rgba(0,0,0,.05) );

        z-index: 1;

    }



    .nr-service-card:hover img {

        transform: scale(1.08);

    }



.nr-service-content {

    position: absolute;

    bottom: 40px;

    left: 40px;

    right: 40px;

    z-index: 2;

}



    .nr-service-content h3 {

        color: white;

        font-size: 2rem;

        font-weight: 800;

        margin-bottom: 15px;

    }



    .nr-service-content span {

        color: white;

        opacity: .85;

    }



.nr-service-options {

    display: flex;

    gap: 0;

    margin-top: 15px;

}



    .nr-service-options a {

        color: #fff;

        text-decoration: none;

        padding: 0 12px;

        font-size: 1rem;

        font-weight: 500;

        transition: .3s;

    }



        .nr-service-options a:first-child {

            padding-left: 0;

        }



        .nr-service-options a:not(:last-child) {

            border-right: 1px solid rgba(255,255,255,.3);

        }



        .nr-service-options a:hover {

            color: #d8e9d0;

        }



.nr-agro-card {

    display: flex;

    align-items: flex-end;

}



.nr-agro-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;

}



    .nr-agro-buttons a {

        text-decoration: none;

        color: white;

        font-weight: 600;

        font-size: .95rem;

        padding: 12px 18px;

        border-radius: 16px;

        background: rgba(255,255,255,.12);

        backdrop-filter: blur(12px);

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

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

        transition: .35s ease;

    }



        .nr-agro-buttons a:hover {

            background: rgba(255,255,255,.22);

            transform: translateY(-3px);

        }



@media (max-width:768px) {



    .nr-agro-card .nr-service-content {

        left: 20px;

        right: 20px;

        bottom: 25px;

    }



    .nr-agro-buttons {

        display: flex;

        flex-direction: column;

        gap: 12px;

        margin-top: 20px;

    }



        .nr-agro-buttons a {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            min-height: 52px;

            border-radius: 18px;

            font-size: 1rem;

            font-weight: 700;

            color: white;

            text-decoration: none;

            background: rgba(255,255,255,.14);

            backdrop-filter: blur(18px);

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

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

            box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);

            transition: .3s ease;

        }



            .nr-agro-buttons a:active {

                transform: scale(.97);

            }



    .nr-service-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }



    .nr-service-card {

        height: 420px;

    }



    .nr-service-content {

        left: 24px;

        right: 24px;

        bottom: 24px;

    }



        .nr-service-content h3 {

            font-size: 2.2rem;

            margin-bottom: 15px;

        }

}



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

   STORY VIDEOS

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



.nr-story-videos {

    background: white;

}



.nr-story-header {

    text-align: center;

    max-width: 900px;

    margin: auto auto 40px;

}



    .nr-story-header span {

        color: var(--nr-green);

        font-weight: 700;

        letter-spacing: 4px;

    }



    .nr-story-header h2 {

        font-size: clamp(3rem,5vw,4rem);

        font-weight: 800;

        color: var(--nr-green);

        margin-top: 40px;

    }



.nr-story-row {

    display: flex;

    align-items: center;

    gap: 80px;

}



    .nr-story-row.reverse {

        flex-direction: row-reverse;

    }



.nr-video-box {

    flex: 1;

}



    .nr-video-box video {

        width: 100%;

        border-radius: 36px;

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

    }



.nr-story-text {

    flex: 1;

}



    .nr-story-text h3 {

        font-size: clamp(2rem,4vw,3rem);

        font-weight: 800;

        color: var(--nr-green);

        margin-bottom: 30px;

    }



    .nr-story-text p {

        font-size: 1.15rem;

        line-height: 2;

        color: #555;

    }



/* ====  SCROLL REVEAL  ===== */



.reveal-text {

    opacity: 0;

    transform: translateY(40px);

    will-change: transform, opacity;

    transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);

}



    .reveal-text.active {

        opacity: 1;

        transform: translateY(0);

    }



/* Título */



.nr-story-text h3 {

    transition-delay: .15s;

}



/* Párrafo */



.nr-story-text p {

    transition-delay: .35s;

}



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

   MOBILE STORY VIDEOS

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



@media (max-width:768px) {



    .nr-story-row,

    .nr-story-row.reverse {

        display: flex;

        flex-direction: column;

        gap: 30px;

        margin-bottom: 10px;

    }



    .nr-video-box {

        width: 100%;

    }



    .nr-story-text {

        width: 100%;

        text-align: center;

    }



        .nr-story-text h3 {

            font-size: 2rem;

            margin-bottom: 18px;

        }



        .nr-story-text p {

            font-size: 1rem;

            line-height: 1.8;

            margin-bottom: 0;

        }



    .nr-video-box video {

        width: 100%;

        border-radius: 28px;

        display: block;

    }

}



.nr-story-text h3 {

    opacity: 0;

    transform: translateY(40px);

}



.nr-story-text p {

    opacity: 0;

    transform: translateY(50px);

}



.nr-story-text h3.active {

    opacity: 1;

    transform: translateY(0);

}



.nr-story-text p.active {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .2s;

}



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

   BOTONES DJI PRO

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



.dji-buttons {

    display: flex;

    justify-content: center;

    gap: 22px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}



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

   BOTONES BASE

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



.btn-dji-mail,

.btn-dji-whatsapp {

    position: relative;

    overflow: hidden;

    width: 430px;

    max-width: 100%;

    min-height: 88px;

    border-radius: 24px;

    padding: 18px 24px;

    text-decoration: none !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-weight: 700;

    backdrop-filter: blur(10px);

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

    isolation: isolate;

}



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

   EFECTO BRILLO

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



    .btn-dji-mail::before,

    .btn-dji-whatsapp::before {

        content: "";

        position: absolute;

        top: 0;

        left: -120%;

        width: 70%;

        height: 100%;

        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent );

        transform: skewX(-25deg);

        transition: .9s ease;

        z-index: 1;

    }



    .btn-dji-mail:hover::before,

    .btn-dji-whatsapp:hover::before {

        left: 150%;

    }



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

   MAIL

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



.btn-dji-mail {

    background: linear-gradient( 135deg, #ffffff, #f7fff1 );

    border: 2px solid rgba(103,180,55,.25);

    color: #4d9f22 !important;

    box-shadow: 0 8px 25px rgba(0,0,0,.08), 0 0 0 rgba(103,180,55,0);

}



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

   WHATSAPP

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



.btn-dji-whatsapp {

    background: linear-gradient( 135deg, #67b437, #4f9626 );

    border: 2px solid rgba(255,255,255,.15);

    color: white !important;

    box-shadow: 0 10px 30px rgba(103,180,55,.28), 0 0 0 rgba(103,180,55,0);

}



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

   HOVER ULTRA PRO

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



    .btn-dji-mail:hover,

    .btn-dji-whatsapp:hover {

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

        text-decoration: none !important;

    }



/* MAIL HOVER */



.btn-dji-mail:hover {

    border-color: #67b437;

    box-shadow: 0 20px 45px rgba(103,180,55,.18), 0 0 30px rgba(103,180,55,.18);

    background: linear-gradient( 135deg, #ffffff, #efffe3 );

}



/* WHATSAPP HOVER */



.btn-dji-whatsapp:hover {

    box-shadow: 0 22px 50px rgba(103,180,55,.38), 0 0 35px rgba(103,180,55,.45);

    background: linear-gradient( 135deg, #74c942, #58a62b );

}



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

   CONTENIDO

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



.btn-dji-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

}



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

   ICONOS

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



    .btn-dji-content i {

        width: 58px;

        height: 58px;

        min-width: 58px;

        border-radius: 18px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 1.7rem;

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

    }



/* ICONO MAIL */



.btn-dji-mail i {

    background: linear-gradient( 135deg, #67b437, #4f9626 );

    color: white;

    box-shadow: 0 10px 25px rgba(103,180,55,.28);

}



/* ICONO WHATSAPP */



.btn-dji-whatsapp i {

    background: rgba(255,255,255,.16);

    color: white;

    backdrop-filter: blur(8px);

}



/* ICONOS HOVER */



.btn-dji-mail:hover i,

.btn-dji-whatsapp:hover i {

    transform: scale(1.12) rotate(-6deg);

}



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

   TEXOS

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



.btn-dji-content div {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

    font-size: 1.08rem;

    letter-spacing: -.2px;

}



.btn-dji-content small {

    display: block;

    margin-top: 6px;

    font-weight: 500;

    font-size: .88rem;

    opacity: .82;

}



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

   EFECTO CLICK

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



.btn-dji-mail:active,

.btn-dji-whatsapp:active {

    transform: scale(.98);

}



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

   RESPONSIVE

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



@media(max-width:768px) {



    .btn-dji-mail,

    .btn-dji-whatsapp {

        width: 100%;

        padding: 16px 18px;

        border-radius: 20px;

    }



    .btn-dji-content i {

        width: 52px;

        height: 52px;

        min-width: 52px;

        font-size: 1.5rem;

    }



    .btn-dji-content div {

        font-size: 1rem;

    }

}



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

   MODAL NORTE RAICES

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



.nr-modal {

    border: 0;

    border-radius: 32px;

    overflow: hidden;

    background: white;

    box-shadow: 0 40px 100px rgba(0,0,0,.18);

    position: relative;

}



.nr-modal-body {

    padding: 55px;

    text-align: center;

}



/* ICONO */



.nr-modal-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient( 135deg, #3a6b45, #6d9b53 );

    display: flex;

    align-items: center;

    justify-content: center;

}



    .nr-modal-icon i {

        color: white;

        font-size: 2rem;

    }



/* TITULO */



.nr-modal h2 {

    font-size: 2rem;

    font-weight: 800;

    color: #20452b;

    margin-bottom: 15px;

}



/* TEXTO */



.nr-modal p {

    color: #6b7280;

    font-size: 1rem;

    line-height: 1.7;

    max-width: 420px;

    margin: auto auto 35px;

}



/* INPUTS */



.nr-input {

    height: 60px;

    border-radius: 18px;

    border: 1px solid #e5e7eb;

    font-size: 1rem;

    padding-left: 20px;

    box-shadow: none !important;

    transition: .25s;

}



    .nr-input:focus {

        border-color: #6d9b53;

        box-shadow: 0 0 0 5px rgba(109,155,83,.15) !important;

    }



/* BOTON */



.nr-btn-enviar {

    width: 100%;

    margin-top: 25px;

    height: 62px;

    border: 0;

    border-radius: 18px;

    background: linear-gradient( 135deg, #2f5d3b, #6d9b53 );

    color: white;

    font-size: 1.05rem;

    font-weight: 700;

    transition: .35s;

}



    .nr-btn-enviar:hover {

        transform: translateY(-3px);

        box-shadow: 0 20px 40px rgba(47,93,59,.25);

    }



/* CERRAR */



.nr-close {

    position: absolute;

    right: 20px;

    top: 20px;

    z-index: 10;

}



/* BACKDROP */



.modal-backdrop.show {

    opacity: .75;

}



/* MOBILE */



@media (max-width:768px) {



    .nr-modal-body {

        padding: 35px 25px;

    }



    .nr-modal h2 {

        font-size: 1.7rem;

    }



    .nr-modal-icon {

        width: 75px;

        height: 75px;

    }



        .nr-modal-icon i {

            font-size: 1.6rem;

        }



    .nr-btn-enviar {

        height: 58px;

    }

}



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

   SILVER GLASS BUTTONS

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



.nr-glass-nav {

    padding: 5px 0;

}



.nr-glass-buttons {

    display: flex;

    justify-content: center;

    gap: 24px;

    flex-wrap: wrap;

}



/* ===  BOTON  === */



.nr-glass-btn {

    position: relative;

    width: 120px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-decoration: none;

    color: black;

    font-size: 0.8rem;

    font-weight: 700;

    border-radius: 30px;

    overflow: hidden;

    background: rgba(255,255,255,.06);

    backdrop-filter: blur(18px);

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

    border: 2px solid rgba(255,255,255,.45);

    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 30px rgba(0,0,0,.12);

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

}



    /* ===  BORDE PLATEADO  === */



    .nr-glass-btn::before {

        content: "";

        position: absolute;

        inset: 0;

        border-radius: 30px;

        padding: 2px;

        background: linear-gradient( 135deg, #ffffff, #d9d9d9, #9b9b9b, #ffffff );

        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

        -webkit-mask-composite: xor;

        mask-composite: exclude;

        pointer-events: none;

    }



    /* ===  BRILLO QUE RECORRE EL BORDE  === */



    .nr-glass-btn::after {

        content: "";

        position: absolute;

        top: 0;

        left: -150%;

        width: 50%;

        height: 100%;

        background: linear-gradient( 120deg, transparent, rgba(255,255,255), transparent );

        transform: skewX(-25deg);

        animation: silverSweep 5s linear infinite;

    }



@keyframes silverSweep {



    0% {

        left: -150%;

    }



    100% {

        left: 180%;

    }

}



/* ===  ICONO  === */



.nr-glass-btn i {

    font-size: 1.3rem;

    color: #ffffff;

    text-shadow: 0 0 10px rgba(255,255,255,.6);

}



/* ===  HOVER  === */



.nr-glass-btn:hover {

    transform: translateY(-6px);

    color: #2F6B3C;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 45px rgba(0,0,0,.18), 0 0 25px rgba(255,255,255,.20);

}



.nr-glass-mobile-menu {

    display: none;

}



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

   MOBILE MENU

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



@media(max-width:768px) {



    /* OCULTA LOS BOTONES GRANDES */



    .nr-glass-buttons {

        display: none;

    }



    /* MUESTRA EL MENÚ */



    .nr-glass-mobile-menu {

        display: block;

        width: 100%;

        max-width: 420px;

        margin: auto;

    }



    .nr-mobile-toggle {

        width: 100%;

        height: 50px;

        border: none;

        border-radius: 25px;

        color: black;

        font-weight: 700;

        background: rgba(255,255,255,.12);

        backdrop-filter: blur(18px);

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

        border: 2px solid rgba(255,255,255,.35);

        box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 30px rgba(0,0,0,.15);

    }



    .nr-mobile-dropdown {

        max-height: 0;

        overflow: hidden;

        transition: .35s ease;

        margin-top: 10px;

        border-radius: 20px;

        background: white;

    }



        .nr-mobile-dropdown.active {

            max-height: 300px;

        }



        .nr-mobile-dropdown a {

            display: block;

            padding: 16px 20px;

            text-decoration: none;

            color: #2f4f34;

            font-weight: 600;

            border-bottom: 1px solid #ececec;

        }



            .nr-mobile-dropdown a:last-child {

                border-bottom: none;

            }

}



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

   BOTÓN VOLVER ARRIBA

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



.btn-scroll-top {

    position: fixed;

    /* CENTRADO EN DESKTOP */

    left: 50%;

    bottom: 15px;

    transform: translateX(-50%);

    width: 55px;

    height: 55px;

    border-radius: 50%;

    border: 2px solid rgba(0,0,0,.2);

    background: rgba(255,255,255,.25);

    backdrop-filter: blur(8px);

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    color: #198754;

    cursor: pointer;

    z-index: 9999;

    transition: all .3s ease;

}



    /* HOVER */



    .btn-scroll-top:hover {

        transform: translateX(-50%) scale(1.1);

        background: rgba(255,255,255,.4);

    }



    /* OCULTO */



    .btn-scroll-top.hide {

        opacity: 0;

        visibility: hidden;

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

        pointer-events: none;

    }



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

   MOBILE

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



@media (max-width:768px) {



    .btn-scroll-top {

        width: 50px;

        height: 50px;

        /* DERECHA ABAJO EN CELULAR */

        left: auto;

        right: 15px;

        bottom: 15px;

        transform: none;

    }



        .btn-scroll-top:hover {

            transform: scale(1.05);

        }



        .btn-scroll-top.hide {

            transform: translateY(20px);

        }

}



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

   MODAL CONTACTO PRO

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



.nr-contact-modal {

    border: none;

    border-radius: 30px;

    overflow: hidden;

    background: rgba(255,255,255,.85);

    backdrop-filter: blur(20px);

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

    box-shadow: 0 25px 80px rgba(0,0,0,.18);

}



.nr-contact-body {

    padding: 25px;

    text-align: center;

}



.nr-contact-icon {

    width: 90px;

    height: 90px;

    margin: auto auto 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient( 135deg, #198754, #28c76f);

    color: white;

    font-size: 40px;

    box-shadow: 0 15px 35px rgba(25,135,84,.35);

}



.nr-contact-body h2 {

    font-weight: 800;

}



.nr-contact-body p {

    color: #6c757d;

}



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

   TARJETAS

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



.nr-contact-card {

    display: flex;

    align-items: center;

    gap: 8px;

    text-align: left;

    margin-bottom: 16px;

    padding: 8px;

    border-radius: 20px;

    background: rgba(255,255,255,.65);

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

    transition: .35s;

}



    .nr-contact-card:hover {

        transform: translateY(-3px);

        box-shadow: 0 10px 30px rgba(0,0,0,.08);

    }



.nr-contact-card-icon {

    min-width: 55px;

    height: 55px;

    border-radius: 16px;

    background: rgba(25,135,84,.1);

    color: #198754;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}



.nr-contact-card span {

    display: block;

    color: #777;

    font-size: 13px;

}



.nr-contact-card strong {

    display: block;

    color: #222;

    font-size: 15px;

}



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

   BOTONES CONTACTO PREMIUM

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



.nr-contact-actions {

    display: flex;

    gap: 14px;

    margin-top: 35px;

    flex-wrap: wrap;

}



.nr-contact-btn {

    flex: 1;

    min-width: 150px;

    height: 62px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none !important;

    font-weight: 600;

    font-size: .95rem;

    color: white !important;

    position: relative;

    overflow: hidden;

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

    backdrop-filter: blur(12px);

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

    transition: all .35s ease;

}



    /* BRILLO */



    .nr-contact-btn::before {

        content: '';

        position: absolute;

        top: 0;

        left: -120%;

        width: 70%;

        height: 100%;

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

        transition: .8s;

    }



    .nr-contact-btn:hover::before {

        left: 140%;

    }



    /* HOVER */



    .nr-contact-btn:hover {

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

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

    }



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

   TELÉFONO

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



    .nr-contact-btn.phone {

        background: linear-gradient( 135deg, #b31217, #e52d27 );

        box-shadow: 0 12px 28px rgba(179,18,23,.30);

    }



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

   WHATSAPP

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



    .nr-contact-btn.whatsapp {

        background: linear-gradient( 135deg, #1db954, #25D366 );

        box-shadow: 0 12px 28px rgba(37,211,102,.30);

    }



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

   MAIL

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



    .nr-contact-btn.mail {

        background: linear-gradient( 135deg, #8ec5fc, #74b9ff );

        box-shadow: 0 12px 28px rgba(116,185,255,.30);

    }



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

   CARD CAMPOS DESTACADA

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



.nr-campos-card {

    grid-column: 1 / -1;

}



    .nr-campos-card img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .nr-campos-card h3 {

        font-size: 2.5rem;

        font-weight: 800;

    }



    .nr-campos-card span {

        font-size: 1.1rem;

    }



@media (max-width: 768px) {



    .nr-campos-card {

        min-height: 240px;

    }



        .nr-campos-card img {

            height: 100%;

        }



        .nr-campos-card h3 {

            font-size: 1.8rem;

        }

}