/* EXTENSIONES DE DISEÑO PARA TARJETAS NATIVUX */

/* Contenedor de la imagen con el fondo gris suave del mockup */
.ntx-product-img-box {
    position: relative;
    background-color: #f4f4f4;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    box-sizing: border-box;
}

/* Modificación controlada del cover para productos con fondo limpio */
.ntx-product-img-box img {
    max-width: 100%;
    max-height: 100%;
}

/* Badge flotante de categoría */
.ntx-product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #ffffff;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
}

/* Color exacto para las estrellas de review */
.ntx-stars {
    color: #f2a83a; /* Vinculado a tu paleta t-nar */
}

/* Color alternativo grisáceo para textos secundarios en tarjetas */
.t-flow {
    color: #9ca3af;
}

/* Ajuste sutil de los bordes del framework para dar aspecto UI minimalista */
.bt-s.lin-neg {
    border-width: 1px !important;
    color: #4b5563;
}
.bt-s.lin-neg:hover {
    color: #ffffff;
}


    .ntx-gen h4{
        margin: 0px;
    }
    /* EXTENSIONES DE MAQUETACIÓN PARA COMPONENTE SHOWCASE */

/* Contenedor de la imagen del producto con bordes muy redondeados como el mockup */
.ntx-showcase-img-wrap {
    width: 100%;
    aspect-ratio: 1.2 / 1; /* Mantiene la proporción horizontal del mockup */
    border-radius: 24px; /* Curvatura limpia y pronunciada */
    overflow: hidden;
    background-color: #f3f4f6; /* Fondo gris neutro de respaldo */
}

/* Forzar que la imagen abarque la caja perfectamente */
.ntx-showcase-img-wrap img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Círculos contenedores para los iconos de características */
.ntx-feature-icon {
    width: 48px;
    height: 48px;
    background-color: #f3f4f6; /* Fondo gris claro suave */
    color: #111827; /* Icono oscuro */
    flex-shrink: 0; /* Evita que el círculo se deforme si el texto crece */
}

/* Tamaño controlado para los vectores de los iconos */
.ntx-svg {
    width: 20px;
    height: 20px;
}

/* Color gris UI atenuado para descripciones secundarias */
.t-flow {
    color: #6b7280;
}

   /* COMPONENTE DE COLECCIONES - NATIVUX */

/* Contenedor relativo para fijar la proporción vertical del mockup */
.ntx-collection-card {
    position: relative;
    aspect-ratio: 4 / 5; /* Relación de aspecto vertical idéntica al mockup */
    overflow: hidden;
    background-color: #f3f4f6;
}

/* Efecto de aproximación suave al pasar el mouse por la tarjeta */
.ntx-collection-card:hover img {
    transform: scale(1.04);
}

/* Forzar transiciones fluidas en la imagen interna utilizando la base de tu framework */
.ntx-collection-card img {
    transition: transform 0.4s ease;
}

/* Capa superpuesta absoluta que genera contraste para el texto blanco */
.ntx-collection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente sutil en la base para rescatar legibilidad de tipografía */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none; /* Permite que el click traspase directamente al enlace */
    box-sizing: border-box;
}

   /* COMPONENTE DE SLIDER PRODUCTOS - NATIVUX */

/* Ajuste del cajón de imágenes del slider */
.ntx-slider-img-box {
    position: relative;
    background-color: #f3f4f6; /* Fondo gris claro idéntico al mockup */
    aspect-ratio: 3 / 4; /* Proporción vertical estilizada para vestuario */
    overflow: hidden;
}

/* Forzar render correcto de la imagen de banco */
.ntx-slider-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge de Descuento (Rojo Mockup) */
.ntx-save-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #be123c; /* Tonalidad roja deportiva */
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 2;
}

/* Botón flotante de Añadir al carrito */
.ntx-slider-cart-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
}

/* Interacción de elevación en hover del botón */
.ntx-slider-cart-btn:hover {
    transform: scale(1.08);
    background-color: #1f2937;
}

/* Iconografía interna */
.ntx-cart-svg {
    width: 20px;
    height: 20px;
}
.ntx-arrow-svg {
    width: 14px;
    height: 14px;
}

/* Opcional: Ocultar los puntos (dots) de Owl para ajustarse al mockup minimalista */
.ntx-carousel-wrapper .owl-dots {
    display: none !important;
}

    /* ESTRUCTURA HERO BANNER SLIDER - NATIVUX */

.position-relative {
    position: relative;
}

/* Altura fluida y controlada del espacio del banner */
.ntx-hero-slide {
    position: relative;
    width: 100%;
    height: clamp(550px, 60vw, 850px); /* Proporción ideal de pantalla sin romper cabeceras */
    overflow: hidden;
}

/* Imagen de fondo absoluta en la tarjeta */
.ntx-hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-position: center; /* Ajuste automático para centrar el enfoque del modelo */
}

/* Indexador para forzar el texto por encima de la foto */
.ntx-z-1 {
    z-index: 1;
}

/* Texto blanco atenuado para el subtítulo */
.t-bla-muted {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   POSICIONAMIENTO DE CONTROLES
   ========================================== */

.ntx-hero-nav-container {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none; /* Permite clicks fuera de los botones */
}

.ntx-hero-controls {
    pointer-events: auto; /* Reactiva clicks en la botonera */
}

/* Fracción indicadora en círculo de borde fino */
.ntx-hero-fraction {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

/* Botones de navegación personalizados */
.ntx-hero-prev,
.ntx-hero-next {
    width: 44px;
    height: 44px;
    border: none;
    color: #000000;
    cursor: pointer;
}

.ntx-hero-prev:hover,
.ntx-hero-next:hover {
    transform: scale(1.05);
    background-color: #f3f4f6;
}

.ntx-nav-arrow {
    width: 16px;
    height: 16px;
}

/* Reset de elementos Owl que no se usan en este mockup */
.ntx-hero-carousel .owl-dots,
.ntx-hero-carousel .owl-nav {
    display: none !important;
}

   /* COMPONENTE BANNER PROMOCIONAL - NATIVUX */

.position-relative {
    position: relative;
}

/* Caja contenedora con altura fluida adaptativa */
.ntx-promo-banner {
    position: relative;
    width: 100%;
    height: clamp(380px, 40vw, 550px); /* Altura equilibrada para secciones intermedias */
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Posicionamiento absoluto de la imagen de ambientación */
.ntx-promo-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-position: center;
}

/* Capa de degradado sutil para asegurar el contraste del texto blanco */
.ntx-promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

/* Forzar el contenido de texto por encima del degradado */
.ntx-z-2 {
    z-index: 2;
}

/* Opacidad blanca suave para el subtítulo */
.t-bla-muted {
    color: rgba(255, 255, 255, 0.9);
}

   /* COMPONENTE MINI BANNERS TRIPLES - NATIVUX */

/* Base estructural del banner horizontal */
.ntx-mini-banner {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ntx-mini-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
}

/* Distribución interna del espacio de texto */
.ntx-banner-content {
    width: 55%;
    z-index: 2;
    position: relative;
}

/* Caja de imagen flotada a la derecha */
.ntx-banner-img-box {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

/* Forzar que las imágenes escalen y recorten estéticamente */
.ntx-banner-img-box img {
    width: 100%;
    height: 90%;
    object-fit: contain; /* Preserva siluetas de gadgets sin deformarlos */
    object-position: bottom right;
}

/* ==========================================
   PALETA CROMÁTICA ESPECÍFICA (MOCKUP)
   ========================================== */

.ntx-bg-cream {
    background-color: #f1e4d3; /* Crema suave */
}

.ntx-bg-pastel-blue {
    background-color: #b9d4e7; /* Azul pastel */
}

.ntx-bg-dark {
    background-color: #050505; /* Negro puro */
}

/* ==========================================
   DETALLES TIPOGRÁFICOS
   ========================================== */

/* Subrayado limpio y espaciado para los enlaces de llamado a la acción */
.ntx-banner-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    letter-spacing: 0.02em;
}

/* Opacidad controlada para texto secundario sobre fondo oscuro */
.t-bla-muted {
    color: rgba(255, 255, 255, 0.7);
}

  /* COMPONENTE GRID DE CATEGORÍAS - NATIVUX */

/* Enlace general del ítem */
.ntx-cat-item {
    text-decoration: none;
    box-sizing: border-box;
}

/* Caja gris contenedora de la silueta del producto */
.ntx-cat-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto idéntico al mockup */
    background-color: #f3f4f6; /* Tono gris claro del ecosistema de tarjetas */
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Comportamiento de la imagen flotante dentro del cuadro gris */
.ntx-cat-box img {
    max-width: 65%; /* Evita que los dispositivos toquen los extremos del cuadro */
    max-height: 65%;
    object-fit: contain; /* Mantiene la silueta y proporciones de fábrica del gadget */
}

/* Efecto interactivo al posar el mouse sobre el bloque de categoría */
.ntx-cat-item:hover .ntx-cat-box {
    transform: translateY(-5px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);
}

/* Escala del micro-icono de flecha en el encabezado */
.ntx-arrow-svg {
    width: 12px;
    height: 12px;
}

/* Suavizado en la transición de opacidad del enlace "View All" */
.ntx-view-all {
    transition: opacity 0.2s ease;
}
.ntx-view-all:hover {
    opacity: 0.7;
}

   /* ARQUITECTURA GENERAL DASHBOARD - NATIVUX */

/* Grilla principal asimétrica (Banner izquierdo toma 1.1 partes, grilla toma 2.4 partes) */
.ntx-dashboard-layout {
    display: grid;
    grid-template-columns: 1.1fr 2.4fr;
}

/* ==========================================
   ESTILOS DE LA TARJETA BANNER (IZQUIERDA)
   ========================================== */

.ntx-banner-blue-box {
    position: relative;
    background-color: #e2f0fd; /* Azul sutil idéntico al fondo del mockup */
    overflow: hidden;
    min-height: 340px; /* Asegura proporción vertical frente a las dos filas derechas */
}

/* Forzar capas superiores de texto */
.ntx-z-2 {
    position: relative;
    z-index: 2;
}

/* Imagen de producto absoluta y angulada saliendo de la esquina */
.ntx-banner-absolute-img {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 65%;
    height: 85%;
    object-fit: contain;
    object-position: bottom right;
    z-index: 1;
    transform: rotate(-10deg); /* Replica la inclinación dinámica del altavoz */
}

/* ==========================================
   ESTILOS DE MINI TARJETAS (GRILLA DERECHA)
   ========================================== */

.ntx-dashboard-cat-card {
    background-color: #f8fafc; /* Gris ultra claro minimalista */
    text-decoration: none;
    min-height: 140px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ntx-dashboard-cat-card:hover {
    background-color: #f1f5f9;
    transform: translateY(-2px);
}

/* Contenedor controlado para los gadgets derechos */
.ntx-dashboard-cat-img {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}

.ntx-dashboard-cat-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================
   UTILIDADES COMPLEMENTARIAS
   ========================================== */

.t-flow {
    color: #94a3b8; /* Tono atenuado para contador de ítems */
}

.ntx-dashboard-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.2s ease;
}

.ntx-dashboard-link:hover {
    opacity: 0.7;
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 992px) {
    /* Colapsa la estructura mixta a una sola columna en pantallas medianas/tablets */
    .ntx-dashboard-layout {
        grid-template-columns: 1fr;
    }
    .ntx-banner-blue-box {
        min-height: 280px;
    }
    .ntx-banner-absolute-img {
        width: 45%;
    }
}

   /* COMPONENTE ARCHIVO DE PRODUCTOS - NATIVUX */

/* Remueve decoraciones globales de enlace para las tarjetas */
.ntx-catalog-card {
    text-decoration: none;
    box-sizing: border-box;
}

/* Caja contenedora gris limpia para las zapatillas */
.ntx-catalog-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1 / 1; /* Relación de aspecto levemente horizontal del mockup */
    background-color: #f5f5f5; /* Tono gris claro plano de catálogo */
    overflow: hidden;
    box-sizing: border-box;
}

/* Manejo interno adaptativo para el calzado */
.ntx-catalog-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Evita recortes toscos en siluetas de calzado */
}

/* Etiquetas flotantes minimalistas (SALE / NEW) */
.ntx-catalog-status {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* Micro-iconografía e interfaces de filtrado */
.ntx-filter-svg {
    width: 16px;
    height: 16px;
}

.ntx-sort-arrow {
    width: 10px;
    height: 10px;
    color: #9ca3af;
}

.cursor-pointer {
    cursor: pointer;
}

/* Tipografía de énfasis para el selector activo */
.t-negsecon {
    color: #111827;
}

/* Tono grisáceo atenuado para precios base y descripciones */
.t-flow {
    color: #71717a;
}

/* Precio rebajado/antiguo con línea central */
.text-through {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Suavizado interactivo al posar el mouse en la tarjeta */
.ntx-catalog-card:hover .ntx-catalog-img-box img {
    transform: scale(1.03);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

   /* EXTENSIONES DE DISEÑO PARA CABECERA Y RUTA DE NAVEGACIÓN - NATIVUX */

/* Dimensionamiento controlado de la marca/icono izquierdo */
.ntx-brand-icon {
    width: 60px;
    height: auto;
    display: block;
}

/* Tracking y transiciones para enlaces superiores estilo deportivo */
.ntx-menu-link {
    letter-spacing: 0.06em;
    transition: opacity 0.2s ease;
}

.ntx-menu-link:hover {
    opacity: 0.5;
}

/* ==========================================
   ESTILOS DE BREADCRUMBS / ENLACES DE RUTA
   ========================================== */

/* Línea sutil superior que segmenta el área de contenido con la cabecera */
.ntx-breadcrumb-wrapper {
    border-top: 1px solid #f3f4f6;
}

/* Colores fluidos atenuados para las rutas secundarias */
.t-flow {
    color: #a1a1aa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.t-flow:hover {
    color: #111827;
}

/* Tono gris extra-claro para los caracteres separadores (/) */
.t-flow-separator {
    color: #e4e4e7;
    user-select: none;
}

/* Color destacado u oscuro para marcar el eslabón final activo */
.t-flow-active {
    color: #d4d4d8; /* Color gris suave del mockup para el texto inactivo final */
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (TABLET / MOBILE)
   ========================================== */
@media (max-width: 813px) {
    /* Reajuste dinámico de la cabecera a 2 columnas para centrar la visual */
    .site-header .grid.col-3 {
        grid-template-columns: 1fr 1fr;
    }
}

   /* ARQUITECTURA DE PANEL PREMIUM RECTIFICADA - NATIVUX */

/* Grilla maestra asimétrica: 52% de la pantalla exacto a la izquierda, el resto fluido a la derecha */
.ntx-pdp-premium-layout {
 
}

/* ==========================================
   VISOR IZQUIERDO CORREGIDO (SIN PADDING - COVER TOTAL)
   ========================================== */
.ntx-pdp-hero-cover {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5; /* Color gris de respaldo del catálogo */
    position: relative;
}

/* Forzado de comportamiento cover puro sin aire interno */
.ntx-pdp-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   PANEL DERECHO DE CONTROL E INTERFACES
   ========================================== */

/* Alineación de las sub-columnas del panel de compra */
.ntx-pdp-controls-panel {
    box-sizing: border-box;
}

/* Columna de miniaturas vertical calibrada */
.ntx-pdp-thumbs-lane {
    width: 100%;
}

/* Cuadrados de navegación de fotos */
.ntx-pdp-thumb-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}

/* Muestras cuadradas de variantes de color */
.ntx-color-swatch-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}

/* Botón dashed "Create your design" */
.ntx-color-swatch-custom-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    border: 1px dashed #d4d4d8;
    cursor: pointer;
    color: #71717a;
    box-sizing: border-box;
}

/* Bordes de selección activos ultra nítidos (Mockup) */
.ntx-pdp-thumb-square.active,
.ntx-color-swatch-box.active {
}

/* ==========================================
   DROPWDOWN DE TALLAS Y BOTONERA
   ========================================== */

.ntx-size-selector-dropdown {
    border: 1px solid #e4e4e7;
    height: 46px;
    min-width: 180px;
    box-sizing: border-box;
}

.ntx-dropdown-chevron {
    width: 12px;
    height: 12px;
    color: #71717a;
}

.ntx-underline-link {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ntx-wide-cta {
    min-width: 200px;
}

/* Colores de tono UI */
.t-flow {
    color: #a1a1aa;
}
.t-flow-dark {
    color: #42424a;
}
.cursor-pointer {
    cursor: pointer;
}

/* ==========================================
   ADAPTABILIDAD RESPONSIVA
   ========================================== */

@media (max-width: 992px) {
    /* Colapsa la estructura asimétrica en pantallas verticales */
    .ntx-pdp-premium-layout {
        grid-template-columns: 1fr;
    }
    .ntx-pdp-hero-cover {
        height: 50vh; /* Toma la mitad superior de la pantalla en tablets */
    }
}

@media (max-width: 640px) {
    /* Reorientación de miniaturas en smartphones */
    .ntx-pdp-controls-panel {
        flex-direction: column !important;
    }
    .ntx-pdp-thumbs-lane {
        width: 100%;
        flex-direction: row !important;
    }
    .ntx-pdp-thumb-square {
        width: 22%;
    }
}

/* COMPONENTE SUGGESTED PRODUCTS CAROUSEL - NATIVUX */

.ntx-suggested-card {
    text-decoration: none;
    box-sizing: border-box;
}

/* Cajas de imagen estilo catálogo sin bordes redondeados (rad-0) */
.ntx-suggested-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    background-color: #f5f5f5; /* Fondo gris claro idéntico */
    box-sizing: border-box;
}

.ntx-suggested-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* ==========================================
   BOTONES DE CONTROL (NAV ARROWS)
   ========================================== */

.ntx-rc-prev, 
.ntx-rc-next {
    width: 32px;
    height: 32px;
    border: 1px solid #e4e4e7;
    color: #111827;
    cursor: pointer;
    padding: 0;
}

.ntx-rc-prev:hover, 
.ntx-rc-next:hover {
    background-color: #f4f4f5;
}

.ntx-arrow-icon {
    width: 14px;
    height: 14px;
}

/* ==========================================
   LINEA DE PROGRESO INFERIOR
   ========================================== */

.ntx-carousel-progress-container {
    width: 100%;
    height: 2px;
    background-color: #f4f4f5;
    position: relative;
    box-sizing: border-box;
}

/* Indicador que emula el scroll horizontal */
.ntx-carousel-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 33.333%; /* Representa la primera página del total de 3 ítems */
    height: 100%;
    background-color: #71717a; /* Gris oscuro activo */
    transition: left 0.3s ease;
}

.t-flow {
    color: #71717a;
}

/* Ocultar elementos nativos sobrantes de Owl */
.ntx-related-carousel .owl-dots {
    display: none !important;
}

  /* COMPONENTE WIDE COLLECTION BANNER - NATIVUX */

/* Contenedor principal de la tarjeta promocional */
.ntx-wide-collection-card {
    background-color: #ededed; /* Gris neutro claro idéntico al mockup */
    overflow: hidden; /* Garantiza que la imagen respete el rad-10 del contenedor parent */
    min-height: 280px;
}

/* Caja de la imagen configurada para cubrir su área al 100% */
.ntx-wide-card-img-box {
    width: 100%;
    position: relative;
    max-height: 400px;
    overflow: hidden;
}

/* Forzado de proporciones de la fotografía de ropa */
.ntx-wide-card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================
   PALETA DE COLORES UI ESPECÍFICOS
   ========================================== */

/* Color gris atenuado para el indicador "- Collections" */
.t-flow-muted {
    color: #6b7280;
    letter-spacing: 0.02em;
}

/* Color gris oscuro suave para el párrafo de descripción */
.t-flow-dark {
    color: #4b5563;
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 812px) {
    /* Al bajar a 1 columna en mobile (col-tp-1), fijamos una proporción armónica para la foto */
    .ntx-wide-card-img-box {
        aspect-ratio: 16 / 10;
    }
}

    /* COMPONENTE LOOKBOOK CATALOG GRID - NATIVUX */

.ntx-fashion-card {
    box-sizing: border-box;
}

/* Caja contenedora para las fotos de catálogo */
.ntx-fashion-img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Formato cuadrado del mockup */
    overflow: hidden;
    background-color: #f3f4f6;
}

.ntx-fashion-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   BADGES DE PRECIO ESTILO CAPSULA
   ========================================== */

.ntx-price-tag-solid {
    background-color: #111827;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    line-height: 1;
}

.ntx-price-tag-outline {
    background-color: transparent;
    color: #111827;
    border: 1px solid #e4e4e7;
    padding: 8px 16px;
    border-radius: 6px;
    line-height: 1;
}

/* ==========================================
   BOTONES DE INTERACCIÓN (WISH LIST / CART)
   ========================================== */

/* Botón transparente para enlaces de icono simples (como el corazón) */
.ntx-action-btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ntx-action-btn-link:hover {
    transform: scale(1.1);
}

/* Botón circular sólido (Carrito activo) */
.ntx-action-btn-circle-solid {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

/* Botón circular delineado (Carrito inactivo) */
.ntx-action-btn-circle-outline {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid #e4e4e7;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ntx-action-btn-circle-outline:hover {
    border-color: #111827;
    color: #111827;
}

/* Dimensionamiento controlado de los SVGs */
.ntx-interaction-svg {
    width: 18px;
    height: 18px;
}
.m-0{
    margin: 0px;
    padding: 0px;
}

/* ==========================================
   VARIACIONES DE COLOR E INTERFACES UI
   ========================================== */

.t-flow {
    color: #71717a; /* Color de las descripciones secundarias */
}

.t-rose {
    color: #e11d48; /* Tono carmín del corazón activo */
}

   /* COMPONENTE COSMETIC CATEGORIES GRID - NATIVUX */

/* Base estructural de la tarjeta adaptativa */
.ntx-cosmetic-card {
    position: relative;
    aspect-ratio: 1 / 1.15; /* Proporción vertical sutil idéntica al mockup */
    border-radius: 28px; /* Curvatura orgánica muy pronunciada */
    overflow: hidden;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efecto de elevación e interacción al posar el mouse */
.ntx-cosmetic-card:hover {
    transform: translateY(-4px);
}

.ntx-cosmetic-card:hover .ntx-cat-arrow-icon {
    transform: translate(2px, -2px);
}

/* Vector de flecha de acción diagonal */
.ntx-cat-arrow-icon {
    width: 16px;
    height: 16px;
    color: #111827;
    transition: transform 0.25s ease;
}

/* ==========================================
   CAJA CONTENEDORA DE FOTOGRAFÍA CENTRAL
   ========================================== */

.ntx-cosmetic-img-container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* El tamaño de la imagen se comprime levemente para que respire en el centro */
.ntx-cosmetic-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Preserva las siluetas de los frascos y texturas */
}

/* ==========================================
   PALETA CROMÁTICA MUTED (TONOS ORGÁNICOS MOCKUP)
   ========================================== */

.ntx-skin-lavender {
    background-color: #bcaec4; /* Lavanda grisáceo */
}

.ntx-skin-taupe {
    background-color: #aba6a2; /* Taupe / Tierra suave */
}

.ntx-skin-slate {
    background-color: #8da2a6; /* Azul pizarra / Teal atenuado */
}

.ntx-skin-clay {
    background-color: #bdafa6; /* Arcilla pálida / Warm grey */
}

/* COMPONENTE INTERACTIVO DE SUPLEMENTOS - NATIVUX */

.ntx-supp-card {
    box-sizing: border-box;
}

/* Caja de imagen neutra con la proporción del mockup */
.ntx-supp-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.12; /* Formato levemente verticalizado */
    background-color: #fff; /* Gris ultra claro plano */
    overflow: hidden;
    padding: 0px;
    box-sizing: border-box;
}

/* Manejo adaptativo interno para las botellas y frascos de mockup */
.ntx-supp-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Preserva las siluetas cilíndricas sin cortes */
}

/* ==========================================
   BADGES DE SECCIÓN INTERNOS
   ========================================== */

.ntx-supp-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    line-height: 1;
    z-index: 2;
}

/* Tonalidades orgánicas del mockup */
.ntx-bg-brick {
    background-color: #ba4325; /* Tono arcilla / ladrillo para ofertas */
}

.ntx-bg-olive {
    background-color: #798e74; /* Tono verde oliva suave para recomendados */
}

/* ==========================================
   INTERFACES DE ACCIÓN (CART BUTTON & CONTROLS)
   ========================================== */

/* Botón flotante circular de añadir al carro */
.ntx-supp-cart-btn {
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.ntx-supp-cart-btn:hover {
    transform: scale(1.08);
}

.ntx-supp-cart-svg {
    width: 18px;
    height: 18px;
}

/* ==========================================
   LÍNEA DE NAVEGACIÓN Y CONTROLES INFERIORES
   ========================================== */

/* Carril estático inferior */
.ntx-supp-progress-wrapper {
    width: 140px; /* Dimensionamiento corto idéntico a la captura */
    height: 2px;
    background-color: #e4e4e7;
    position: relative;
    box-sizing: border-box;
}

/* Indicador móvil oscuro */
.ntx-supp-progress-bar-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%; /* Cambia proporcionalmente al número de ítems */
    height: 100%;
    background-color: #111827;
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Botones de flecha minimalistas */
.ntx-supp-arrow-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e4e4e7;
    color: #111827;
    cursor: pointer;
    padding: 0;
}

.ntx-supp-arrow-btn:hover {
    background-color: #f4f4f5;
    border-color: #a1a1aa;
}

.ntx-supp-nav-svg {
    width: 14px;
    height: 14px;
}

/* Clases de texto UI */
.t-flow {
    color: #8c8c8c;
}

.text-through {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Ocultar elementos sobrantes nativos de Owl */
.ntx-supplements-carousel .owl-dots {
    display: none !important;
}   

.ntx-supp-filter-btn {
    border: 1px solid var(--ntx-supp-filter-border, #111111) !important;
    background: #ffffff !important;
    color: var(--ntx-supp-filter-inactive-color, #111111) !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ntx-supp-filter-btn.is-active {
    background: var(--ntx-supp-filter-active-bg, #111111) !important;
    color: var(--ntx-supp-filter-active-color, #ffffff) !important;
}

.ntx-supp-filter-btn:hover {
    transform: translateY(-1px);
}

  /* COMPONENTE BANNER PROMO KIT MINIMALISTA - NATIVUX */

.ntx-promo-kit-section {
    background-color: #faf7f2; /* Tono crema cálido ultra-suave idéntico al mockup */
    position: relative;
}

/* Contenedor controlado para la silueta del producto */
.ntx-promo-kit-img-box {
    width: 100%;
    aspect-ratio: 1.2 / 1; /* Formato horizontal idéntico para albergar salpicaduras o botellas */
    box-sizing: border-box;
}

/* Configuración interna para que las botellas respiren sin tocar bordes drásticos */
.ntx-promo-kit-img-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Permite que el fondo de la fotografía se acople de manera invisible */
}

/* ==========================================
   ELEMENTOS DE COLOR Y TEXTO UI
   ========================================== */

/* Tono gris oscuro suave de la paleta para textos de cuerpo descriptor */
.t-flow-dark {
    color: #4b5563;
}

/* ==========================================
   ADAPTABILIDAD RESPONSIVA (BREAKPOINTS)
   ========================================== */

@media (max-width: 812px) {
    /* En teléfonos móviles (col-tp-1) reordenamos para colocar la foto arriba de los textos */
    .ntx-promo-kit-img-box {
        aspect-ratio: 1 / 1; /* Formato cuadrado óptimo para móvil */
        order: -1; /* Invierte el flujo visual de la grilla */
    }
}

    /* EXTENSIONES DE DISEÑO PARA MINI COMPONENTES - NATIVUX */

/* ==========================================
   INTERFACES DE LA BARRA DE ANUNCIO
   ========================================== */

/* Botón de la barra superior para que rellene el alto total de forma limpia */
.ntx-announcement-btn {
    padding: 0 30px;
    text-decoration: none;
    box-sizing: border-box;
    transition: filter 0.2s ease;
}

.ntx-announcement-btn:hover {
    filter: brightness(1.1);
}

/* ==========================================
   ESTILOS GENERALES DEL LISTÓN DE BENEFICIOS
   ========================================== */

/* Tamaño y color blanco puro para los iconos del listón */
.ntx-benefit-svg {
    width: 44px;
    height: 44px;
    color: #ffffff;
    stroke-width: 1.2px; /* Mantiene la estética del trazo fino del mockup */
}

/* Color blanco opaco para suavizar las descripciones inferiores */
.t-bla-muted {
    color: rgba(255, 255, 255, 0.85);
}

/* Generación automatizada de las líneas verticales separadoras */
.ntx-benefit-column {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Agrega el borde derecho divisor a todas las columnas excepto a la última */
.ntx-benefit-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px; /* Centrado en el gap-30 del contenedor parent */
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.35); /* Blanco traslúcido elegante */
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 813px) {
    /* Oculta los separadores verticales en tablets y móviles para evitar cortes visuales raros */
    .ntx-benefit-column::after {
        display: none !important;
    }
    
    /* Pequeño ajuste de padding interno para equilibrar las celdas en modo grilla colapsada */
    .ntx-benefit-column {
        padding: 10px;
    }
}

  /* COMPONENTE DE OFERTAS FLASH - NATIVUX */

.ntx-deal-card {
    box-sizing: border-box;
}

/* Caja contenedora limpia para el producto rebajado */
.ntx-deal-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f4f4f4;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

.ntx-deal-img-box img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

/* Badge flotante de porcentaje de descuento */
.ntx-deal-discount-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 1;
    z-index: 2;
}

/* Etiqueta de tiempo / Countdown superior */
.ntx-countdown-wrapper {
    background-color: #f3f4f6;
    height: 36px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
}
.tracking-wide {
    letter-spacing: 0.04em;
}

/* ==========================================
   TERMÓMETRO DE RESTRICCIÓN DE STOCK (URGENCIA)
   ========================================== */

/* Carril estático gris */
.ntx-deal-stock-bar-wrapper {
    width: 100%;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

/* Barra indicadora base */
.ntx-deal-stock-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
}

/* Estados de urgencia del color del termómetro */
.ntx-stock-critical {
    width: 15%;
    background-color: #ef4444; /* Rojo peligro / Stock casi nulo */
}

.ntx-stock-medium {
    width: 45%;
    background-color: #f59e0b; /* Amarillo/Ámbar intermedio */
}

.ntx-stock-stable {
    width: 75%;
    background-color: #10b981; /* Verde estable / Stock saludable */
}

/* ==========================================
   UTILIDADES TIPOGRÁFICAS UI
   ========================================== */

.t-flow {
    color: #9ca3af;
}
.t-flow-dark {
    color: #4b5563;
}

.text-through {
    text-decoration: line-through;
    opacity: 0.6;
}

.ntx-deals-view-all {
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.2s ease;
}
.ntx-deals-view-all:hover {
    opacity: 0.7;
}

    /* ARQUITECTURA DE PORTADA CINEMÁTICA DIVIDIDA - NATIVUX */

.position-relative {
    position: relative;
}
.tracking-wide {
    letter-spacing: 0.06em;
}

/* Grilla maestra de pantalla completa fluida */
.ntx-split-hero-layout {
    display: grid;
    grid-template-columns: 50vw 50vw;
    min-height: 100vh;
    overflow: hidden;
}

/* ==========================================
   ESTILOS BLOQUE IZQUIERDO (LIFESTYLE ELEMENT)
   ========================================== */

.ntx-split-media-pane {
    position: relative;
    width: 100%;
    height: 100%;
}

.ntx-media-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlays posicionado sobre la fotografía */
.ntx-media-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

/* Botón de hamburguesa minimalista */
.ntx-hamburger-btn {
    background: none;
    border: none;
    width: 24px;
    cursor: pointer;
    padding: 0;
}
.ntx-hamburger-btn .ntx-line {
    height: 2px;
    width: 100%;
    display: block;
}

/* Flecha flotante izquierda */
.ntx-media-back-btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    cursor: pointer;
    z-index: 2;
}
.ntx-media-back-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.ntx-nav-arrow-svg {
    width: 18px;
    height: 18px;
}

/* Contador inferior izquierdo */
.ntx-media-counter {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.t-bla-muted {
    color: rgba(255, 255, 255, 0.4);
}

/* Línea de progreso de reproducción del slide */
.ntx-media-progress-bar {
    width: 80px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
}
.ntx-media-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%; /* Seteado dinámicamente según la carga */
    background-color: #be123c; /* Acento rojo de progreso mockup */
}

/* Botonera de control rígida inferior derecha */
.ntx-media-nav-block {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}
.ntx-nav-block-btn {
    width: 70px;
    height: 70px;
    background-color: #111827;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ntx-nav-block-btn.active,
.ntx-nav-block-btn:hover {
    background-color: #1f2937;
}

/* ==========================================
   ESTILOS BLOQUE DERECHO (WORKSPACE PANEL)
   ========================================== */

.ntx-split-workspace-pane {
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Caja contenedora interna con ancho máximo controlado para preservar la elegancia */
.ntx-workspace-inner {
    max-width: 440px;
    width: 90%;
    margin: 0 auto;
}

/* Indicador de bolsa superior derecho absoluto */
.ntx-mini-bag-indicator {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 110px;
    height: 60px;
    box-sizing: border-box;
}

/* Tono coral/terracota exclusivo del calzado mockup */
.t-coral {
    color: #cc7d75;
}

/* Contenedor central del producto aislado */
.ntx-product-isolated-wrapper {
    width: 100%;
}
.ntx-isolated-img-box {
    width: 100%;
    aspect-ratio: 1.2 / 1;
}
.ntx-isolated-img-box img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Selector de variantes circular flotante */
.ntx-vertical-color-picker {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.ntx-dot-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
}
.ntx-dot-swatch.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #111827; /* Anillo delimitador limpio */
}
.ntx-color-soft-pink { background-color: #e2c0be; }
.ntx-color-grey-sage { background-color: #cbd5e1; }

/* Separador técnico sutil superior a la metadata */
.ntx-border-top {
    border-top: 1px solid #f1f5f9;
}
.t-flow {
    color: #94a3b8;
}

/* Barra de llamado a la acción inferior absoluta */
.ntx-absolute-action-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

/* ==========================================
   ADAPTABILIDAD RESPONSIVA (BREAKPOINTS NATIVUX)
   ========================================== */

@media (max-width: 992px) {
    /* Colapsa la estructura paralela a una sola fila vertical en tablets/móviles */
    .ntx-split-hero-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ntx-split-media-pane {
        height: 50vh; /* Bloque de estilo de vida toma la mitad superior */
    }
    .ntx-split-workspace-pane {
        padding-top: 80px !important;
        padding-bottom: 120px !important;
    }
    .ntx-absolute-action-bar {
        position: relative;
        justify-content: center !important;
        padding-top: 40px;
    }
}

   /* COMPONENTE EDITORIAL MANIFESTO - NATIVUX */

.ntx-editorial-brand-section {
    background-color: #f7f7f7; /* Tono de fondo neutro pálido idéntico a la captura */
    position: relative;
}

/* Espaciado de caracteres extendido para el tag superior izquierdo */
.tracking-wider {
    letter-spacing: 0.08em;
}

/* ==========================================
   ESTILO PARA LOS NÚMEROS EDITORIALES
   ========================================== */

.ntx-editorial-number {
    /* Forzado de familia tipográfica Serif de alta fidelidad para el look de revista */
    font-family: "Playfair Display", "Didot", "Georgia", serif;
    font-style: italic;
    letter-spacing: -0.02em;
}

/* Separador horizontal tenue previo a la grilla de métricas */
.ntx-border-top {
    border-top: 1px solid #e5e7eb;
}

/* ==========================================
   PALETA DE COLORES UI
   ========================================== */

/* Gris intermedio texturizado para las leyendas de los contadores */
.t-flow-dark {
    color: #4b5563;
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 992px) {
    /* En tablets o pantallas menores, la sub-grilla se abre a gap de 30px */
    .ntx-border-top {
        grid-gap: 30px;
    }
}
  /* COMPONENTE CONVERSION FOOTER - NATIVUX */

.position-relative {
    position: relative;
}
.tracking-wide {
    letter-spacing: 0.04em;
}

/* Color corporativo verde oscuro profundo para el fondo del Footer */
.ntx-footer-dark {
    background-color: #16362f; /* Tono bosque nórdico del mockup */
}

/* Opacidad blanca traslúcida y suave para textos de cuerpo e informativos */
.t-bla-muted {
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================
   INTERFACES DE ENLACES DEL PIE DE PÁGINA
   ========================================== */

.ntx-footer-link {
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.ntx-footer-link:hover {
    opacity: 0.6;
    transform: translateX(2px); /* Micro-interacción premium de desplazamiento */
}

/* ==========================================
   CÁPSULA INPUT DE NEWSLETTER (BARRA BLANCA)
   ========================================== */

.ntx-newsletter-capsule {
    width: 100%;
    max-width: 520px; /* Limita la elongación horizontal del input */
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
}

/* Reset de estilos del campo nativo de entrada de e-mail */
.ntx-newsletter-input {
    border: none;
    background: transparent;
    outline: none;
    padding-left: 14px;
    box-sizing: border-box;
}

.ntx-newsletter-input::placeholder {
    color: #9ca3af;
}

/* Botón interno que adopta el fondo verde del footer de forma exacta */
.ntx-btn-footer-submit {
    background-color: #16362f;
    color: #ffffff;
    border: none;
}
.ntx-btn-footer-submit:hover {
    background-color: #1e493f;
}

/* ==========================================
   WIDGET FLOTANTE DE SOPORTE INFERIOR
   ========================================== */

.ntx-support-floating-card {
    border: 1px solid #f1f5f9;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.ntx-widget-icon-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.ntx-widget-svg {
    width: 16px;
    height: 16px;
}

.ntx-widget-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 813px) {
    /* Centra los bloques en pantallas móviles y tablets para mejorar el balance */
    .ntx-footer-dark .grid {
        text-align: center;
    }
    .ntx-footer-dark .flex {
        align-items: center;
        justify-content: center;
    }
    .ntx-footer-dark p {
        margin-inline: auto;
    }
    .ntx-newsletter-capsule {
        margin: 0 auto;
    }
    .ntx-widget-box-wrapper {
        justify-content: center !important;
        width: 100%;
    }
}

   /* COMPONENTE EDITORIAL FABRID FOOTER - NATIVUX */

.position-relative {
    position: relative;
}
.tracking-wide {
    letter-spacing: 0.04em;
}
.tracking-tighter {
    letter-spacing: -0.04em;
}
.valign-top {
    vertical-align: super;
}

/* Fondo lavanda pastel con superposición de ondas abstractas fluidas */
.ntx-fabrid-footer {
    background-color: #e1dbf5; /* Tono pastel idéntico a la captura */
    background-image: radial-gradient(at 80% 20%, rgba(255, 255, 255, 0.45) 0px, transparent 50%),
                      radial-gradient(at 20% 80%, rgba(131, 148, 210, 0.25) 0px, transparent 60%);
    box-sizing: border-box;
    overflow: hidden;
}

/* Micro-interacción fluida para enlaces editoriales */
.ntx-link-hover {
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.ntx-link-hover:hover {
    opacity: 0.5;
}

/* ==========================================
   FORMULARIO CÁPSULA DE SUSCRIPCIÓN
   ========================================== */

.ntx-newsletter-pill {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Limpieza del campo nativo de e-mail */
.ntx-pill-input {
    border: none;
    background: transparent;
    outline: none;
    padding-left: 10px;
    box-sizing: border-box;
}
.ntx-pill-input::placeholder {
    color: #6b7280;
}

/* Botón de acento morado sólido de la captura */
.ntx-btn-purple {
    background-color: #6d44d4;
    color: #ffffff;
    border: none;
    transition: background-color 0.2s ease;
}
.ntx-btn-purple:hover {
    background-color: #5533ab;
}

/* ==========================================
   PASTILLA FLOTANTE DE MARCAS ALIADAS
   ========================================== */

.ntx-brand-badge-capsule {
    /* Esquinas asimétricas redondeadas exclusivas estilo pastilla de dock */
    border-radius: 20px 0px 20px 20px; 
    box-sizing: border-box;
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 813px) {
    /* Reajuste de alineación en pantallas verticales para preservar orden */
    .ntx-tp-align-start {
        align-items: flex-start !important;
    }
    .ntx-tp-text-left {
        text-align: left !important;
    }
}

/* COMPONENTE CATEGORÍAS PREMIUM CON RECORTE - NATIVUX */

.position-relative {
    position: relative;
}

/* Base de la tarjeta con tinte grisáceo/lavanda pálido del mockup */
.ntx-premium-cat-card {
    background-color: #f1eff9; /* Tono pastel ultra-suave exacto */
    border-radius: 28px; /* Curvatura limpia en los extremos exteriores */
    text-decoration: none;
    box-sizing: border-box;
    min-height: 380px; /* Consistencia de altura vertical */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ntx-premium-cat-card:hover {
    transform: translateY(-6px);
}

/* ==========================================
   MECÁNICA DEL RECORTE DE ESQUINA INVERTIDO (NOTCH)
   ========================================== */

/* Bloque absoluto que "muerde" la esquina superior derecha */
.ntx-card-notch-corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 76px;
    height: 76px;
    background-color: #ffffff; /* Seteado al color de fondo de la sección parent */
    border-radius: 0px 0px 0px 24px; /* Genera la entrada del corte hacia la tarjeta */
}

/* Pseudo-elementos para esculpir las curvas inversas suaves arriba y a la derecha */
.ntx-card-notch-corner::before,
.ntx-card-notch-corner::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
}

/* Curva invertida superior */
.ntx-card-notch-corner::before {
    top: 1px;
    left: -24px;
    box-shadow: 12px -12px 0 12px #ffffff;
}

/* Curva invertida lateral derecha */
.ntx-card-notch-corner::after {
    bottom: -24px;
    right: 1px;
    box-shadow: 12px -12px 0 12px #ffffff;
}

/* Círculo interno flotante que contiene la flecha */
.ntx-card-arrow-badge {
    width: 46px;
    height: 46px;
    background-color: #e5def4; /* Tono lila complementario del mockup */
    color: #111827;
    cursor: pointer;
}

/* Rotación o escala reactiva al pasar el mouse por la tarjeta */
.ntx-premium-cat-card:hover .ntx-card-arrow-badge {
    transform: scale(1.06);
    background-color: #111827;
    color: #ffffff;
}

/* ==========================================
   GESTIÓN DEL ESPACIO DE IMAGEN
   ========================================== */

.ntx-cat-img-space {
    width: 100%;
}

.ntx-cat-img-space img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain; /* Garantiza siluetas perfectas sin cortes toscos */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.05)); /* Le da realismo 3D al producto */
}

/* ==========================================
   UTILIDADES TIPOGRÁFICAS E ICONOGRAFÍA UI
   ========================================== */

.t-flow {
    color: #71717a;
}

.ntx-cat-diagonal-svg {
    width: 16px;
    height: 16px;
}

.ntx-header-arrow-svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Enlace superior de acción */
.ntx-global-cat-link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ntx-global-cat-link:hover {
    opacity: 0.6;
}

.ntx-global-cat-link:hover .ntx-header-arrow-svg {
    transform: translateX(4px);
}

  /* COMPONENTE DUAL BRAND SHOWCASE - NATIVUX */

.position-relative {
    position: relative;
}

.ntx-z-2 {
    position: relative;
    z-index: 2;
}

/* ==========================================
   ESTILOS DE BLOQUES DE REFUERZO (TRUST BAR)
   ========================================== */

.ntx-trust-item {
    box-sizing: border-box;
}

.ntx-trust-svg {
    width: 32px;
    height: 32px;
    color: #111827;
    flex-shrink: 0;
}

.t-flow-dark {
    color: #4b5563; /* Gris intermedio para las descripciones */
}

/* ==========================================
   ESTILOS DE LAS TARJETA DE CAMPAÑA DUALES
   ========================================== */

.ntx-dual-campaign-card {
    min-height: 440px; /* Altura ideal del mockup */
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

/* Forzado de imagen de fondo adaptativa */
.ntx-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Capa de degradado oscuro inferior automático para asegurar legibilidad */
.ntx-dual-campaign-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badges de descuento superiores */
.ntx-campaign-discount {
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
    line-height: 1;
}

/* Micro-icono del botón Shop Now */
.ntx-arrow-btn-svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Efecto hover interactivo sobre el botón */
.ntx-btn-campaign:hover .ntx-arrow-btn-svg {
    transform: translateX(4px);
}

/* Animación de zoom controlado al posar el mouse sobre la tarjeta */
.ntx-dual-campaign-card:hover .ntx-card-bg {
    transform: scale(1.03);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

   /* COMPONENTE HERO EDITORIAL BRUTALISTA - NATIVUX */

.position-relative { position: relative; }
.w-100 { width: 100%; }
.ntx-z-2 { position: relative; z-index: 2; }
.tracking-wide { letter-spacing: 0.04em; }
.tracking-wider { letter-spacing: 0.08em; }
.tracking-widest { letter-spacing: 0.15em; }

/* ==========================================
   ARQUITECTURA DE GRID EDITORIAL ASIMÉTRICO
   ========================================== */

.ntx-editorial-hero-layout {
    display: grid;
    /* Columnas proporcionales: Izquierda (31%), Centro (46%), Derecha (23%) */
    grid-template-columns: 3.1fr 4.6fr 2.3fr;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    background-color: #f4f4f4;
}

/* ==========================================
   ESTILOS DE TIPOGRAFÍAS CONDENSADAS (DISPLAY)
   ========================================== */

.ntx-ed-display-title {
    font-family: 'Impact', 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(60px, 7vw, 100px); /* Escalado fluido sin romper layouts */
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.ntx-ed-display-title-lg {
    font-family: 'Impact', 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.ntx-ed-display-title-md {
    font-family: 'Impact', 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    text-transform: uppercase;
}

.ntx-ed-sub-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ==========================================
   PANEL IZQUIERDO (DARK MODE EDITORIAL)
   ========================================== */

.ntx-ed-left-pane {
    background-color: #222222; /* Tono grafito oscuro del mockup */
    box-sizing: border-box;
}

.t-bla-muted {
    color: rgba(255, 255, 255, 0.45);
}

.ntx-border-top-trans {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ntx-ed-chevron-svg {
    width: 14px;
    height: 14px;
}

/* Mecánica de superposición para desplazar "Stylist" hacia la columna central */
.ntx-overlap-container {
    position: relative;
    width: 100%;
}

.ntx-absolute-bridge {
    position: absolute;
    right: -60px; /* Cruza el límite del bloque oscuro de manera controlada */
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}

/* ==========================================
   PANEL CENTRAL (HERO IMAGE & SEARCH OVERLAY)
   ========================================== */

.ntx-ed-center-pane {
    width: 100%;
    height: 100%;
}

.ntx-ed-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Capa de botón circular translúcido centrado */
.ntx-ed-search-circle-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
}

.ntx-ed-circle-btn {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); /* Micro-efecto esmerilado premium */
    cursor: pointer;
}

.ntx-ed-circle-btn:hover {
    transform: scale(1.06);
    background-color: rgba(255, 255, 255, 0.8);
    border-color: #111827;
}

/* ==========================================
   PANEL DERECHO (PORTRAIT DUAL + CONTACT BOX)
   ========================================== */

.ntx-ed-right-pane {
    width: 100%;
    height: 100%;
}

/* Fila superior toma el 75% de la altura vertical */
.ntx-ed-portrait-top {
    width: 100%;
    height: 75%;
    box-sizing: border-box;
}

/* Capa oscura superior sutil para no perder la visibilidad del menú hamburguesa */
.ntx-ed-portrait-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 30%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
    z-index: 2;
}

/* Menú hamburguesa minimalista del flanco derecho */
.ntx-ed-menu-toggle {
    background: none;
    border: none;
    width: 28px;
    cursor: pointer;
    padding: 0;
}

.ntx-ed-burger-line {
    height: 2px;
    width: 100%;
    display: block;
}

/* Enlace/Bloque inferior de contacto (Ocupa el 25% de la altura vertical) */
.ntx-ed-contact-bottom {
    width: 100%;
    height: 25%;
    text-decoration: none;
    box-sizing: border-box;
    border-top: 1px solid #f1f5f9;
}

.ntx-ed-contact-bottom:hover {
    background-color: #111827;
}

.ntx-ed-contact-bottom:hover .ntx-ed-display-title-lg {
    color: #ffffff;
}

.ntx-ed-diagonal-arrow {
    width: 28px;
    height: 28px;
    color: #111827;
    transition: transform 0.25s ease, color 0.2s ease;
}

.ntx-ed-contact-bottom:hover .ntx-ed-diagonal-arrow {
    color: #ffffff;
    transform: translate(3px, -3px);
}

/* ==========================================
   COMPORTAMIENTO RESPONSIVO (BREAKPOINTS)
   ========================================== */

@media (max-width: 992px) {
    /* Colapsa la portada a una sola columna fluida en tablets y teléfonos */
    .ntx-editorial-hero-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .ntx-ed-left-pane {
        min-height: 480px;
    }
    .ntx-absolute-bridge {
        position: relative;
        right: 0;
    }
    .ntx-ed-center-pane {
        height: 60vh;
    }
    .ntx-ed-portrait-top {
        height: 50vh;
    }
    .ntx-ed-contact-bottom {
        height: 120px;
    }
}

  /* COMPONENTE MOSAICO LOOKBOOK EDITORIAL - NATIVUX */

.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.tracking-widest { letter-spacing: 0.15em; }

/* ==========================================
   GEOMETRÍA Y TRATAMIENTO DE LOS VESTIDORES (TILES)
   ========================================== */

.ntx-lookbook-tile {
    width: 100%;
    /* Proporción vertical editorial estilizada idéntica al mockup original */
    aspect-ratio: 1 / 1.35; 
    box-sizing: border-box;
}

.ntx-lookbook-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Forzado de padding para los productos en plano estudio aislado */
.ntx-lookbook-tile img.p-pad-20 {
    object-fit:  cover;
    padding: 0%; /* Genera el margen interno equilibrado para que respire la ropa */
}

/* Color de fondo estudio neutro gris claro/crema del mockup */
.ntx-bg-studio {
    background-color: #f6f6f6;
}

/* ==========================================
   INTERFACES MULTIMEDIA (VIDEO REEL CASILLA CENTRAL)
   ========================================== */

/* Filtro cinemático translúcido permanente sobre la casilla de video */
.ntx-video-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.04);
    z-index: 2;
}

/* Caja circular del botón de play */
.ntx-play-button {
    width: 64px;
    height: 64px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
}

.ntx-play-svg {
    width: 22px;
    height: 22px;
    color: #111827;
    transform: translateX(2px); /* Centrado óptico del triángulo de reproducción */
}

/* ==========================================
   MICRO-INTERACCIONES DINÁMICAS
   ========================================== */

/* Escalado sutil de las fotos al pasar el mouse por los cuadros */
.ntx-lookbook-tile:hover img {
    transform: scale(1.02);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animación de expansión para el accionador del video */
.ntx-video-tile:hover .ntx-play-button {
    transform: scale(1.08);
    background-color: #111827;
}

.ntx-video-tile:hover .ntx-play-svg {
    color: #ffffff;
}