@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ==========================================
     PALETA DE COLORES - NUTRISS
     ========================================== */

    /* --- Orange --- */
    --nl-orange-100: #ffc48c;
    --nl-orange-300: #e9a03d;
    --nl-orange-500: #f18a00;
    --nl-orange-700: #a76815;
    --nl-orange-900: #68481e;

    /* --- Cream --- */
    --nl-cream-100: #ffedde;
    --nl-cream-300: #fce4c5;
    /* Valor aproximado (falta el hex en la imagen) */
    --nl-cream-500: #fadcb1;
    --nl-cream-700: #e3b169;
    --nl-cream-900: #b1813d;

    /* --- Black / Grays --- */
    --nl-black-100: #e6e6e5;
    --nl-black-300: #a09d99;
    --nl-black-400: #4a453f;
    --nl-black-500: #241f18;
    --nl-black-900: #100e0a;

    /* ==========================================
     TONOS SECUNDARIOS - NUTRISS PERROS (np-)
     ========================================== */

    /* --- Green (Al Natural) --- */
    --np-green-500: #83cf07;
    --np-green-700: #006e35;
    --np-green-900: #004019;

    /* --- Cachorros --- */
    --np-cyan-500: #0fdfef;

    /* --- Adulto rojo --- */
    --np-red-700: #e70d29;

    /* --- Adulto amarillo --- */
    --np-yellow-900: #f7b300;


    /* ==========================================
     TONOS PRINCIPALES - NUTRISS GATOS (ng-)
     ========================================== */

    /* --- Blue (Azules) --- */
    --ng-blue-100: #8f96bb;
    --ng-blue-300: #38458b;
    --ng-blue-500: #182151;
    --ng-blue-700: #181d3a;
    --ng-blue-900: #141726;

    /* --- Salmon (Salmón) --- */
    --ng-salmon-100: #f07d70;
    --ng-salmon-300: #f76757;
    --ng-salmon-500: #ff503c;
    --ng-salmon-700: #da2f1b;
    --ng-salmon-900: #af3123;

    /* --- White Cat (Blancos/Grises) --- */
    --ng-whitecat-100: #f2f2f2;
    --ng-whitecat-300: #eeeeee;
    --ng-whitecat-500: #eaeaea;
    --ng-whitecat-700: #b0b0b0;
    --ng-whitecat-900: #757575;

    /* ==========================================
     TONOS DE ESTADO (Alertas, Formularios, etc.)
     ========================================== */

    /* --- Wrong (Rojos / Error) --- */
    --nl-wrong-100: #df7a83;
    --nl-wrong-300: #d95362;
    --nl-wrong-500: #e31828;
    --nl-wrong-700: #b91c2a;
    --nl-wrong-900: #7b2229;

    /* --- Positive (Verdes / Éxito) --- */
    --nl-positive-100: #abda5f;
    --nl-positive-300: #a0e038;
    --nl-positive-500: #83cf07;
    --nl-positive-700: #72ae10;
    --nl-positive-900: #629017;

    /* --- Warning (Amarillos / Precaución) --- */
    --nl-warning-100: #eec583;
    --nl-warning-300: #f4ba48;
    --nl-warning-500: #ffb624;
    --nl-warning-700: #f0a312;
    --nl-warning-900: #c9880d;

    /* --- Black / Grays --- */
    --nl-gray-light: #f6f6f6;
    /* NUEVA VARIABLE */
    --nl-black-100: #e6e6e5;
    /* ... resto de variables grises ... */

    /* ==========================================
     ESTADOS NEUTROS (blanco, gris y negro)
     ========================================== */

    --nl-neutral-white: #ffffff;
    --nl-white: #ffffff;
    --nl-gray-100: #f6f6f6;
    --nl-gray-300: #E9E9E9;
    --nl-gray-500: #C6C6C6;
    --nl-gray-700: #9A9A9A;
    --nl-gray-900: #6E6E6E;
    --nl-neutral-black: #000;

    /* --- TIPOGRAFÍA --- */
    --font-family-primary: 'Montserrat', sans-serif;
    --font-family-secondary: 'Roboto-slap', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* --- LINE HEIGHT --- */
    --line-height-tight: 110%;

    /* --- TAMAÑOS (FONT SIZES) --- */
    --font-size-hero-l: 3.0rem;
    --font-size-hero-s: 2.25rem;
    --font-size-display-l: 2.25rem;
    --font-size-display-s: 1.75rem;
    --font-size-display-xs: 1.25rem;
    --font-size-lead-l: 1.75rem;
    --font-size-lead-s: 1.375rem;
    --font-size-body: 1rem;
    --font-size-caption: 0.875rem;
}

h1,
.h1 {
    font-size: var(--font-size-hero-l);
    font-weight: var(--font-weight-black);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

h2,
.h2 {
    font-size: var(--font-size-display-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

h3,
.h3 {
    font-size: var(--font-size-lead-l);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

h4,
.h4 {
    font-size: var(--font-size-lead-s);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

h5,
.h5 {
    font-size: var(--font-size-display-xs);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

p,
.p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

span,
.span {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

.text-bold {
    font-weight: var(--font-weight-bold);
}

.text-black {
    font-weight: var(--font-weight-black);
}


/* ==========================================
   SISTEMA DE BOTONES 
   ========================================== */

/* Estructura Base */
.nl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Separación automática entre texto e icono */
    padding: 14px 32px;
    font-family: var(--font-family-primary);
    /* Montserrat */
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    /* Previene saltos visuales si luego hay botones con borde */
    border-radius: 6px;
    /* Ajusta según el radio exacto de Figma */
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

/* Control del Icono dentro del botón */
.nl-btn .nl-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    /* El icono hereda mágicamente el color del texto */
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

/* Variante: Primario */
.nl-btn-primary {
    background-color: var(--nl-orange-500);
    color: var(--nl-neutral-white);
    /* Texto e icono blancos */
}

/* Estado Hover (Botón Primario) */
.nl-btn-primary:hover {
    background-color: var(--nl-cream-500);
    /* El fondo crema que definimos */
    color: var(--nl-orange-500);
    /* Texto e icono naranjas */
}

/* Variante: Oscuro / Negro */
.nl-btn-dark {
    background-color: var(--nl-black-500);
    color: var(--nl-neutral-white);
}

/* Estado Hover (Botón Oscuro) */
.nl-btn-dark:hover {
    background-color: var(--nl-cream-500);
    /* Usamos el crema de fondo */
    color: var(--nl-black-500);
    /* Texto/Icono oscuro */
}

/* Variante: Salmón (Gatos) */
.nl-btn-salmon {
    background-color: var(--ng-salmon-500);
    color: var(--nl-neutral-white);
}

/* Estado Hover (Botón Salmón) */
.nl-btn-salmon:hover {
    background-color: var(--nl-cream-500);
    /* o var(--nl-white) si prefieres blanco puro */
    color: var(--ng-salmon-500);
    /* Texto/Icono salmón */
}


/* ==========================================
   BOTONES SECUNDARIOS (OUTLINE)
   ========================================== */

/* 1. Variante: Outline Oscuro */
.nl-btn-outline-dark {
    background-color: transparent;
    color: var(--nl-black-500);
    border-color: var(--nl-black-500);
}

.nl-btn-outline-dark:hover {
    background-color: var(--nl-black-500);
    color: var(--nl-neutral-white);
}

/* 2. Variante: Outline Azul (Gatos) */
.nl-btn-outline-blue {
    background-color: transparent;
    color: var(--ng-blue-500);
    border-color: var(--ng-blue-500);
}

.nl-btn-outline-blue:hover {
    background-color: var(--ng-blue-500);
    color: var(--nl-neutral-white);
}

/* 3. Variante: Outline Salmón (Gatos) */
.nl-btn-outline-salmon {
    background-color: transparent;
    color: var(--ng-salmon-500);
    border-color: var(--ng-salmon-500);
}

.nl-btn-outline-salmon:hover {
    background-color: var(--ng-salmon-500);
    color: var(--nl-neutral-white);
}

/* ==========================================
   GRUPO DE BOTONES (SEGMENTED CONTROL / TABS)
   ========================================== */

/* Contenedor Flexbox */
.nl-btn-group {
    display: inline-flex;
    align-items: stretch;
}

/* Estructura base de cada botón del grupo (Estado Desactivado) */
.nl-btn-group .nl-btn-tab {
    background-color: transparent;
    color: var(--nl-black-400);
    /* Gris oscuro para el texto */
    border: 1px solid var(--nl-black-300);
    /* Borde gris */
    padding: 12px 32px;
    font-family: var(--font-family-primary);
    /* Montserrat */
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-left: -1px;
    /* Evita que los bordes se sumen y se vean más gruesos */
    text-align: center;
    border-radius: 0;
    /* Por defecto, cuadrados en el centro */
}

/* Redondeado automático solo para el PRIMERO */
.nl-btn-group .nl-btn-tab:first-child {
    margin-left: 0;
    border-radius: 50px 0 0 50px;
    /* Ajusta el 50px según el diseño exacto */
}

/* Redondeado automático solo para el ÚLTIMO */
.nl-btn-group .nl-btn-tab:last-child {
    border-radius: 0 50px 50px 0;
}

/* Estado Hover (Desactivado) */
.nl-btn-group .nl-btn-tab:hover {
    background-color: var(--nl-black-100);
    z-index: 1;
    /* Sube la capa visualmente en el hover */
}

/* ------------------------------------------
   ESTADOS ACTIVOS
   ------------------------------------------ */

/* Activo por defecto (Naranja Primario) */
.nl-btn-group .nl-btn-tab.active {
    background-color: var(--nl-orange-500);
    color: var(--nl-white);
    border-color: var(--nl-orange-500);
    z-index: 2;
    /* El botón activo siempre se superpone a los bordes grises adyacentes */
}

/* Variante Activa: Oscuro */
.nl-btn-group .nl-btn-tab.active.nl-btn-dark {
    background-color: var(--nl-black-500);
    border-color: var(--nl-black-500);
}

/* Variante Activa: Salmón (Gatos) */
.nl-btn-group .nl-btn-tab.active.nl-btn-salmon {
    background-color: var(--ng-salmon-500);
    border-color: var(--ng-salmon-500);
}

/* Variante: Outline Gris Claro (Para fondos oscuros) */
.nl-btn-outline-gray-light {
    background-color: transparent;
    color: var(--nl-gray-light);
    border-color: var(--nl-gray-light);
}

.nl-btn-outline-gray-light:hover {
    background-color: var(--nl-gray-light);
    color: var(--nl-black-500);
    /* Invertimos a texto oscuro por accesibilidad y contraste */
}

a,
a:visited {
    color: none;
    text-decoration: none;
    outline: 0;
}

/* ==========================================
   SISTEMA DE INPUTS Y FORMULARIOS (AJUSTADO)
   ========================================== */

.nl-form-group {
    display: flex;
    flex-direction: column;
    /* 4. Reducimos el margen inferior para que el form sea más compacto */
    margin-bottom: 16px;
    width: 100%;
}

/* --- Label Superior --- */
.nl-form-label {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    color: var(--nl-black-500);
    margin-bottom: 8px;
    font-weight: var(--font-weight-regular);
}

/* --- Contenedor Principal --- */
.nl-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* --- El Input (Base y Medidas exactas) --- */
.nl-input {
    width: 100%;
    height: 44px;
    padding: 12px 16px;
    /* 2. Bordes color Crema 700 por defecto */
    border: 1px solid var(--nl-cream-700);
    border-radius: 8px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    color: var(--nl-black-500);
    background-color: transparent;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.nl-input::placeholder {
    color: var(--nl-black-300);
}

/* Ajuste específico para el Textarea (Para que no quede de 44px de alto) */
textarea.nl-input {
    height: auto !important;
}

/* --- Iconos Absolutos --- */
.nl-input-icon-left,
.nl-input-icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* 3. Icono izquierdo SIEMPRE naranja por defecto */
.nl-input-icon-left {
    left: 16px;
    fill: var(--nl-orange-500);
    color: var(--nl-orange-500);
}

/* 1. Icono derecho (Warning) OCULTO por defecto */
.nl-input-icon-right {
    right: 16px;
    opacity: 0;
    visibility: hidden;
}

/* --- Matemáticas de Padding para el texto --- */
.nl-input-wrapper.has-icon-left .nl-input {
    padding-left: 44px;
}

.nl-input-wrapper.has-icon-right .nl-input {
    padding-right: 44px;
}

/* ==========================================
   ESTADOS DE INTERACCIÓN Y VALIDACIÓN
   ========================================== */

/* INTERACTIVO Y LLENO (Fondo gris suave y borde naranja) */
.nl-input:focus,
.nl-input:not(:placeholder-shown) {
    background-color: rgba(246, 246, 246, 0.3);
    border-color: var(--nl-orange-500);
}

/* ESTADO ERROR (.is-invalid) */
.nl-input-wrapper.is-invalid .nl-input {
    border-color: var(--ng-salmon-700);
}

/* Forzamos el borde rojo incluso si está en focus pero tiene error */
.nl-input-wrapper.is-invalid .nl-input:focus {
    border-color: var(--ng-salmon-700);
    box-shadow: 0 0 0 3px rgba(218, 47, 27, 0.1);
}

/* 1. Hacemos APARECER el icono de warning y lo pintamos de salmón */
.nl-input-wrapper.is-invalid .nl-input-icon-right {
    opacity: 1;
    visibility: visible;
    fill: var(--ng-salmon-700);
    color: var(--ng-salmon-700);
}

/* Mantenemos el icono izquierdo naranja en caso de error */
.nl-input-wrapper.is-invalid .nl-input-icon-left {
    fill: var(--nl-orange-500);
}

/* --- Mensaje Aclaratorio (Error Helper) --- */
.nl-input-error-msg {
    margin-top: 8px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-caption);
    color: var(--ng-salmon-700);
    display: none;
}

.nl-input-wrapper.is-invalid~.nl-input-error-msg {
    display: block;
}

/* ==========================================
   ESTILOS PARA EL BUSCADOR (BLOG)
   ========================================== */

/* Tarjeta contenedora blanca */
.nl-search-card {
    background-color: var(--nl-neutral-white);
    border-radius: 16px;
    /* Múltiplo de 4 */
    padding: 32px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
    /* Sombra muy sutil */
    width: 100%;
}

/* Etiqueta del buscador (Título + Icono) */
.nl-search-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-primary);
    /* Montserrat */
    font-size: var(--font-size-display-xs);
    /* 20px aprox */
    font-weight: var(--font-weight-bold);
    color: var(--nl-black-500);
    margin-bottom: 24px;
    cursor: pointer;
}

/* Modificador de color para el icono del título */
.nl-search-label .nl-icon-orange {
    width: 28px;
    height: 28px;
    fill: var(--nl-orange-500);
}

/* Envoltura del input para posicionar la flecha */
.nl-search-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

/* El campo de texto (Input) */
.nl-search-input {
    width: 100%;
    padding: 16px 48px 16px 20px;
    /* Padding derecho de 48px para que el texto no pise la flecha */
    font-family: var(--font-family-primary);
    /* Según el diseño parece Montserrat o similar, sin serifa */
    font-size: var(--font-size-body);
    color: var(--nl-black-400);
    background-color: transparent;
    border: 1px solid var(--nl-orange-500);
    /* Borde naranja */
    border-radius: 8px;
    outline: none;
    transition: box-shadow 0.3s ease;
    /* Evitar estilos por defecto de webkit para inputs de tipo search */
    -webkit-appearance: none;
}

/* Estado Focus del Input */
.nl-search-input:focus {
    box-shadow: 0 0 0 3px rgba(241, 138, 0, 0.15);
    /* Halo naranja suave */
}

/* Placeholder del Input */
.nl-search-input::placeholder {
    color: var(--nl-gray-700);
    /* Un gris más claro para el ejemplo */
    font-weight: var(--font-weight-regular);
}

/* Icono de flecha dentro del input */
.nl-icon-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: var(--nl-orange-500);
    pointer-events: none;
    /* Evita que el SVG bloquee el clic en esa zona del input */
}

/* Contador inferior */
.nl-search-counter {
    font-family: var(--font-family-secondary);
    /* Roboto Slab (Serifa) como se ve en el diseño */
    font-size: var(--font-size-body);
    color: var(--nl-black-400);
    margin: 0;
}

/* ==========================================================================
   MENU NEW - MOBILE FIRST
   ========================================================================== */

/* ==========================================================================
   1. RESET Y ESTRUCTURA BASE
   ========================================================================== */
.Menu-New {
    background-color: var(--nl-neutral-white, #ffffff);
    width: 100%;
    position: relative;
    z-index: 1040;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.Menu-New .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* MICRO-AJUSTE MÓVIL: Permite que el contenedor del menú baje si es necesario */
    flex-wrap: wrap;
    padding: 15px;
}

/* Estilos nativos del Botón Hamburguesa */
.nl-hamburger-btn {
    display: block;
    /* Visible por defecto en móvil */
    order: 2;
    /* Se posiciona después del logo */
    margin-left: auto;
    /* Empuja el botón al borde derecho */
    background: var(--nl-black-500);
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1060;
    border-radius: 52px;
}

.nl-hamburger-btn span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--nl-gray-light);
    margin: 5px 0;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;

    pointer-events: none;
}

/* Animación de la "X" al abrir el menú móvil */
.nl-hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nl-hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}

.nl-hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Contenedor invisible en móvil, actúa como ancla */
.Menu-New_container {
    order: 3;
    width: 100%;
}

/* Reset de tipografía y listas */
.Menu-New ul {
    list-style: none;
    margin: 0;
    text-align: center;
    padding: 0 32px 0 32px;
    padding-top: 48px;
    text-align: left;
}

.Menu-New a {
    text-decoration: none;
    font-family: var(--font-family-primary, 'Montserrat', sans-serif);
}

/* ==========================================================================
   2. NAVEGACIÓN MÓVIL (Off-Canvas / Acordeón)
   ========================================================================== */
.nl-nav-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: -100%;
    /* Oculto fuera de pantalla */
    width: 100%;
    height: calc(100vh - 70px);
    background-color: var(--nl-neutral-white, #ffffff);
    padding: 20px;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
}

.nl-nav-list.is-open {
    left: 0;
}

.nl-nav-item {
    width: 100%;
    border-bottom: 1px solid var(--nl-gray-300, #E9E9E9);
}

.nl-nav-item>.nav-link {
    display: block;
    padding: 15px 0;
    color: var(--nl-black-500, #241f18);
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.125rem;
}

/* Capas de Nivel 2 y 3 (Fondo Rojo Móvil) */
.nl-megamenu-wrapper,
.nl-products-list {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background-color: var(--np-red-700, #e70d29);
    transition: left 0.3s ease-in-out;
    z-index: 1050;
    overflow-y: auto;
    padding: 24px;
}

.nl-megamenu-wrapper.is-open,
.nl-products-list.is-open {
    left: 0;
}

.nl-megamenu-content .nav-link,
.nl-products-list .nav-link {
    color: var(--nl-neutral-white, #ffffff);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold, 700);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* UI Móvil Exclusiva */
.nl-mobile-back {
    color: var(--nl-neutral-white, #ffffff);
    font-weight: var(--font-weight-bold, 700);
    cursor: pointer;
    padding: 10px 0;
    display: block;
}

.nl-mobile-back hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 10px 0 20px 0;
}

/* ==========================================================================
   3. NAVEGACIÓN DESKTOP
   ========================================================================== */
@media (min-width: 992px) {

    /* Restaurar alineación de la barra principal */
    .Menu-New .container {
        flex-wrap: nowrap;
    }

    .Menu-New_container {
        order: 2;
        margin-left: 0;
        flex-grow: 1;
        display: flex;
    }

    .nl-hamburger-btn {
        display: none;
    }

    /* Ocultar hamburguesa */
    .Menu-New ul {
        padding: 0;
    }

    ul#nav_list {
        text-align: end;
    }

    /* 3.1 Nivel 1: Lista Principal */
    .nl-nav-list {
        position: static;
        flex-direction: row;
        align-items: center;
        height: auto;
        padding: 0;
        background-color: transparent;
        overflow-y: visible;
        width: 100%;
        justify-content: space-evenly;
        gap: 0;
    }

    .nl-nav-item {
        border-bottom: none;
    }

    .nl-nav-item>.nav-link {
        padding: 10px 0;
        font-size: var(--font-size-body, 1rem);
        transition: color 0.3s ease;
    }

    .nl-nav-item>.nav-link:hover {
        color: var(--nl-orange-500, #f18a00);
    }

    /* 3.2 Nivel 2: Mega Menú (Contenedor de Fondo) */
    .nl-megamenu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        height: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        padding: 40px 0;
        background-color: var(--np-red-700, #e70d29);
    }

    .nl-nav-item.has-megamenu:hover .nl-megamenu-wrapper {
        visibility: visible;
        opacity: 1;
    }

    /* ----------------------------------------------------------------------
       ESTRUCTURA FLEXBOX + ABSOLUTE (Desktop)
       ---------------------------------------------------------------------- */
    .nl-megamenu-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        position: relative;
        /* Clave: Este es el ancla principal */
        min-height: 400px;
        display: flex;
    }

    /* COLUMNA 1: Categorías */
    .nl-subcategories {
        width: 250px;
        flex-shrink: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding-right: 20px;
    }

    .nl-subcategories,
    .nl-sub-item {
        position: static !important;
    }

    .nl-subcategories>.nl-sub-item>.nav-link {
        font-size: 1.3rem;
        font-weight: var(--font-weight-bold);
        padding: 12px 16px;
        margin-bottom: 8px;
        border-radius: 4px;
        color: var(--nl-neutral-white, );
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /*     .nl-subcategories .nav-link:hover {
        opacity: 0.8;
    }
 */
    .nl-subcategories>.nl-sub-item:hover>.nav-link,
    .nl-subcategories>.nl-sub-item.is-active>.nav-link {
        background-color: var(--nl-gray-light);
        color: var(--nl-black-500);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }


    /* ======================================================================
       COLUMNA 2: Lista de Productos (NIVEL 3 - Texto limpio)
       ====================================================================== */

    .nl-products-list {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 300px;
        width: calc(100% - 550px);
        padding: 0 0 0 30px;
        margin: 0;
        background-color: transparent !important;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        align-content: start;
        gap: 15px;
    }

    /* Aparece solo cuando el JS le inyecta la clase activa al padre */
    .nl-sub-item.is-active>.nl-products-list {
        visibility: visible;
        opacity: 1;
    }

    .nl-products-list .nav-link {
        font-size: 1.1rem;
        font-weight: var(--font-weight-regular, 500);
        color: var(--nl-neutral-white, #ffffff);
        padding: 6px 0;
        border-bottom: none;
        background-color: transparent;
        border-radius: 0;
    }

    .nl-products-list .nav-link:hover {
        opacity: 0.7;
        background-color: transparent;
        color: var(--nl-neutral-white, #ffffff);
    }

    /* Ocultar elementos exclusivos móviles */
    .nl-mobile-back,
    .nl-mobile-arrow {
        display: none !important;
    }
}

/* ==========================================================================
   4. ESTILOS GLOBALES COMPLEMENTARIOS (Botón Atrás en móvil)
   ========================================================================== */
.Menu-New .nl-mobile-back span {
    font-size: 16px;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
}

.Menu-New .nl-mobile-back hr {
    color: var(--nl-neutral-white, #ffffff);
    background-color: var(--nl-neutral-white, #ffffff);
}

.container_home {
    background: var(--nl-gray-light);
}


/* ==========================================
   COMPONENTE: TARJETA DE EXPERTO / ARTÍCULO / CARD EXPERTOS
   ========================================== */

.nl-expert-card {
    background-color: var(--nl-neutral-white);
    /* Fondo blanco según diseño */
    width: 100%;
    max-width: 420px;
    /* Ancho solicitado */
    border-radius: 12px;
    /* Redondeo solicitado */
    padding: 24px 18px;
    /* Padding: 24px arriba/abajo, 18px lados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Sombra sutil opcional */
    font-family: var(--font-family-primary);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* --- 1. Imagen Superior --- */
.nl-expert-card__img-box {
    width: 100%;
    height: 200px;
    /* Puedes ajustar la altura según necesites */
    border-radius: 8px;
    /* Redondeo interno para la imagen */
    overflow: hidden;
    margin-bottom: 20px;
}

.nl-expert-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. Título y Extracto --- */
.nl-expert-card__content {
    margin-bottom: 20px;
}

.nl-expert-card__title {
    font-size: var(--font-size-display-xs);
    /* Aprox 20px */
    font-weight: var(--font-weight-black);
    /* Peso fuerte según imagen */
    color: var(--nl-black-500);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 12px;
}

.nl-expert-card__excerpt {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--nl-black-400);
    margin: 0;
    line-height: 1.4;
}

/* --- 3. Divisor --- */
.nl-expert-card__divider {
    border: none;
    border-top: 1px solid var(--nl-black-300);
    /* Color gris de tu paleta */
    margin: 0 0 20px 0;
    opacity: 0.5;
}

/* --- 4. Bloque del Experto --- */
.nl-expert-card__author-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Empuja el botón hacia abajo si las tarjetas varían en altura */
}

/* Cabecera del experto (Foto + Textos) */
.nl-expert-card__author-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* Foto redonda 70x70 */
.nl-expert-card__author-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    /* Evita que la foto se aplaste */
}

.nl-expert-card__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Ajusta según el encuadre de tus fotos */
}

/* Textos al lado de la foto */
.nl-expert-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nl-expert-card__author-role {
    font-size: var(--font-size-caption);
    color: var(--nl-gray-700);
    /* Gris medio para "Especialidad" */
}

.nl-expert-card__author-name {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--nl-black-500);
    margin: 0;
}

/* Cita o resumen inferior */
.nl-expert-card__author-quote {
    font-size: 0.95rem;
    color: var(--nl-black-400);
    margin-top: 0;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Botón inferior */
.nl-expert-card__btn {
    width: 100%;
    margin-top: auto;
    /* Empuja el botón al final de la tarjeta */
}