/* ==========================================================================
   GLOBAL FIXES
   Evita el desbordamiento horizontal causado por anchos de 100vw
   ========================================================================== */
html, body {
    overflow-x: hidden;
    width: 100%;
}
footer img.custom-logo,
header img.custom-logo {
    width: 100%;
    height: auto;
    max-width: 200px;
}
/* ══════════════════════════════════════════
   BASE TIPOGRÁFICA Y DE COLOR (CONEXIÓN CON ELEMENTOR)
══════════════════════════════════════════ */

/* 1. Conectamos el cuerpo del sitio a la fuente "Text" */
body {
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: var(--e-global-typography-text-font-weight, 300);
    color: var(--nil-color-muted); /* Usa tu token mapeado */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Conectamos los encabezados a la fuente "Primary" */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.nil-cat-name {
    font-family: var(--e-global-typography-primary-font-family, sans-serif);
    color: var(--nil-color-primary); /* Usa tu token mapeado */
    margin-top: 0;
}

/* 3. Conectamos CTAs y enlaces especiales a la fuente "Accent" (Opcional) */
.nil-cat-cta {
    font-family: var(--e-global-typography-accent-font-family, sans-serif);
    font-weight: var(--e-global-typography-accent-font-weight, 500);
}

/* 4. Reseteo limpio de enlaces para heredar comportamiento */
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: var(--e-global-color-accent); /* Usa tu token mapeado */
}
/* ══════════════════════════════════════════
    LOGO EN HOME: INVERTIDO AUTOMÁTICO
    Si el logo es oscuro, se invierte para que resalte sobre el fondo claro.
══════════════════════════════════════════ */
.nil-home-logo img {
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════
   PÁGINA 404 — ESTILO UNIFICADO FLUIDO
══════════════════════════════════════════ */

.nil-404-wrapper {
    width: 100%;
    min-height: 90vh;
    background-color: #fff;
    box-sizing: border-box;
}

/* Identificadores tipográficos de la sección */
.nil-404-eyebrow {
    font-size: .68rem;
    letter-spacing: .25em;
    font-weight: 600;
    color: #aaa;
}

.nil-404-title {
    font-size: clamp(5rem, 12vw, 9rem); /* Escala proporcional líquida */
    font-weight: 200;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: #111;
}

.nil-404-subtitle {
    font-size: .85rem;
    line-height: 1.5;
    letter-spacing: .1em;
    color: #111;
    font-weight: 500;
}

.nil-404-description {
    font-size: .95rem;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

/* ══════════════════════════════════════════
   PÁGINAS INTERNAS (Contacto, Quiénes Somos)
   Componente: .nil-page  +  modificadores BEM
══════════════════════════════════════════ */

/* Eyebrow label: pequeño texto de agencia sobre el título */
.nil-page__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--nil-color-muted);
    font-weight: 500;
}

/* Divisor horizontal principal */
.nil-page__divider {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.15;
}

/* Divisor horizontal ligero (entre items) */
.nil-page__divider--light {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.08;
}

/* Línea vertical separadora (desktop) */
.nil-page__vline {
    width: 1px;
    height: 100%;
    background-color: currentColor;
    opacity: 0.1;
}

/* Texto introductorio */
.nil-page__intro {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: var(--nil-color-muted);
    font-weight: 300;
}

/* Etiqueta de nombre de contacto */
.nil-page__label {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--nil-color-primary);
    font-weight: 600;
    margin-bottom: 0;
}

/* Email / enlace de contacto */
.nil-page__email {
    font-size: clamp(0.8rem, 1.3vw, 0.95rem);
    color: var(--nil-color-muted);
    transition: color 0.2s ease;
}
.nil-page__email:hover {
    color: var(--nil-color-primary);
}

/* Enlace social */
.nil-page__social {
    color: var(--nil-color-muted);
    transition: color 0.2s ease;
}
.nil-page__social:hover {
    color: var(--nil-color-primary);
}

/* Contenido de página editorial */
.nil-page__content {
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.8;
    color: var(--nil-color-muted);
    font-weight: 300;
}
.nil-page__content p { margin-bottom: var(--nil-s-md); }
.nil-page__content p:last-child { margin-bottom: 0; }
.nil-page--quienes-somos p, .nil-page--contacto p {
    font-size: clamp(0.95rem, 1.5vw, 1.2rem) !important;
    line-height: 1.3;
    color: var(--e-global-color-primary);
}
/* ══════════════════════════════════════════
   CURSOR PERSONALIZADO GLOBAL
   Estilos base + estados. La lógica vive en assets/js/nil-cursor.js.
   Para añadir un nuevo estado: agrega una regla
   #nil-custom-cursor[data-state="nombre"] .nil-cursor-state--nombre { ... }
══════════════════════════════════════════ */

/* Sin cursor personalizado en táctil */
@media (pointer: coarse) {
    #nil-custom-cursor { display: none !important; }
}

#nil-custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    display: none; /* Activado por JS en dispositivos pointer:fine */
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

/* Cada estado oculto por defecto */
.nil-cursor-state {
    display: none;
    align-items: center;
    justify-content: center;
}

/* ── Estado: eye — galería de fotos ── */
#nil-custom-cursor[data-state="eye"] .nil-cursor-state--eye {
    display: flex;
}

/* Ocultar cursor nativo sobre elementos con cursor personalizado */
@media (pointer: fine) {
    .nil-gallery-item,
    #nil-lightbox-overlay { cursor: grab; }
}

/* ── Estado: drag — lightbox / sliders ── */
#nil-custom-cursor[data-state="drag"] .nil-cursor-state--drag {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ambas flechas semitransparentes por defecto */
#nil-custom-cursor[data-state="drag"] .nil-cursor-arrow {
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
}

/* Flecha activa según dirección del arrastre */
#nil-custom-cursor[data-state="drag"][data-drag-dir="prev"] .nil-cursor-arrow--prev,
#nil-custom-cursor[data-state="drag"][data-drag-dir="next"] .nil-cursor-arrow--next {
    transform: scale(1.5);
    opacity: 1;
}

/* Iconos Feather dentro del cursor */
#nil-custom-cursor svg {
    color: var(--nil-color-primary);
    stroke: var(--nil-color-primary);
    display: block;
    width: 28px;
    height: 28px;
}
/* Iconos Feather dentro del cursor */
#nil-custom-cursor .nil-cursor-arrow--prev svg,
#nil-custom-cursor .nil-cursor-arrow--next svg {
    color: var(--nil-color-white);
    stroke: var(--nil-color-white);

}