/*
Theme Name: Neat It
Author: Ingenima
Description: Block theme para Neat It
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: neatit
*/

:root {
    --celeste: #3DA2EA;
    --violeta: #6E42B1;
    --rosa: #F07FE5;
    --blancosuave: #FCFCFC;
    --negroprofundo: #090909;
    --grissuperficie: #F1F1F3;
    --blanco: #FFFFFF;
    --negro: #000000;
    --negrotarjeta: #150E20;
    --negrotarjeta-clara: #1C1424;

    /* Gradients */
    --gradiente-principal: linear-gradient(167.54deg, #6E42B1 14.43%, #F07FE5 53.91%, #3DA2EA 111.95%);
    /* Mismos 3 colores y stops que --gradiente-principal, pero en 180deg (vertical, de arriba
       hacia abajo) en vez de diagonal — usado en secciones donde el degradé diagonal se ve
       torcido en pantallas muy anchas (ej. bloque Clientes). */
    --gradiente-principal-horizontal: linear-gradient(90deg, #6E42B1 14.43%, #F07FE5 53.91%, #3DA2EA 111.95%);
    --gradiente-secundario: linear-gradient(268.66deg, #FFFFFF 24.39%, #6E42B1 39.24%, #F07FE5 54.69%, #3DA2EA 68.15%, #FFFFFF 83.1%);
    /* Línea divisoria vertical del bloque "Nuestro enfoque" — violeta → rosa (centro) → violeta,
       apagándose a transparente en las dos puntas. Extraído por muestreo de píxeles del PDF de
       diseño (no está documentado como estilo en el archivo Figma de referencia). */
    --gradiente-terciario: linear-gradient(180deg, transparent 0%, #6E42B1 25%, #F07FE5 50%, #6E42B1 75%, transparent 100%);
    /* Números grandes (01-04 en "Nuestro enfoque"): mismos 3 colores de marca que
       --gradiente-principal, pero con los stops en 0/50/100% en vez de 14.43/53.91/111.95%
       (esos stops están pensados para elementos altos como líneas y botones). Para que se vea
       vívido, el elemento tiene que ser inline-block (ver render.php) — si el <div> queda a
       ancho completo (bloque), el gradiente se calcula sobre esa caja ancha entera y el "01"
       (que solo ocupa el borde izquierdo) termina mostrando una franja angosta y lavada del
       degradé en vez del rango completo. */
    --gradiente-numero: linear-gradient(167.54deg, #6E42B1 0%, #F07FE5 50%, #3DA2EA 100%);
    /* Línea divisoria horizontal de ancho completo (ej. bloque Soluciones): mismos 3 colores de
       marca que --gradiente-secundario, pero con las zonas blancas de las puntas mucho más
       angostas (10% en vez de ~24%) para que el color llegue casi hasta el borde de la línea en
       vez de leerse "cortado" a los costados. */
    --gradiente-linea: linear-gradient(90deg, #FFFFFF 0%, #3DA2EA 10%, #F07FE5 50%, #6E42B1 90%, #FFFFFF 100%);
    /* Texto en degradé (palabra/frase destacada dentro de un título — Hero, Próximo paso):
       mismos 3 colores de marca, en horizontal y con los stops en 0/50/100% (sin blanco en
       las puntas, a diferencia de --gradiente-secundario). En spans cortos, un degradé con
       blanco en los extremos se lee casi todo pálido y solo el centro muestra color; este
       queda saturado de punta a punta, igual que la referencia que mandó el cliente. */
    --gradiente-texto: linear-gradient(90deg, #3DA2EA 0%, #6E42B1 50%, #F07FE5 100%);

    /* Layout */

    /* Transitions */
    --transition-base: all 0.3s ease;

    /* Fonts */
    --ffamily: 'Inter', sans-serif;
    --ffamily-heading: 'Space Grotesk', sans-serif;
    --fsize: 1rem;
    --fsize--1: clamp(0.6875rem, 0.6339rem + 0.2679vw, 0.875rem);  /* ~11–14px — Label Categoría, etiquetas en mayúsculas */
    --fsize-0:  clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);   /* ~14–18px — p (body) */
    --fsize-1:  clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);     /* ~18–24px — mismo tamaño que fsize-2, sin tipografía forzada (texto grande suelto, no heading; usado en subtítulo del Hero) */
    --fsize-2:  clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);     /* ~18–24px — h3 (H3 Cards) */
    --fsize-2-5: clamp(1.625rem, 1.4464rem + 0.8929vw, 2.25rem);   /* ~26–36px — texto grande suelto, sin tipografía forzada (ej. título de fila en listados) */
    --fsize-3:  clamp(1.875rem, 1.6964rem + 0.8929vw, 2.5rem);     /* ~30–40px — h2 (H2 Sección) */
    --fsize-4:  clamp(2.625rem, 2.3036rem + 1.6071vw, 3.75rem);    /* ~42–60px — h1 (hero H1) */
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/*
  ### Main Colors
*/

/*******
## BG Colors
*******/

.nt-bg--celeste {
    background-color: var(--celeste, #3DA2EA);
}

.nt-bg--violeta {
    background-color: var(--violeta, #6E42B1);
}

.nt-bg--rosa {
    background-color: var(--rosa, #F07FE5);
}

.nt-bg--blancosuave {
    background-color: var(--blancosuave, #FCFCFC);
}

.nt-bg--negroprofundo {
    background-color: var(--negroprofundo, #090909);
}

.nt-bg--grissuperficie {
    background-color: var(--grissuperficie, #F1F1F3);
}

.nt-bg--negro {
    background-color: var(--negro, #000000);
}

.nt-bg--blanco {
    background-color: var(--blanco, #FFFFFF);
}

.nt-bg--gradiente-principal {
    background-image: var(--gradiente-principal);
}

.nt-bg--gradiente-principal-horizontal {
    background-image: var(--gradiente-principal-horizontal);
}

.nt-bg--gradiente-secundario {
    background-image: var(--gradiente-secundario);
}

/*******
## Text Colors
*******/

.nt--celeste {
    color: var(--celeste, #3DA2EA) !important;
}

.nt--violeta {
    color: var(--violeta, #6E42B1) !important;
}

.nt--rosa {
    color: var(--rosa, #F07FE5) !important;
}

.nt--blancosuave {
    color: var(--blancosuave, #FCFCFC) !important;
}

.nt--negroprofundo {
    color: var(--negroprofundo, #090909) !important;
}

.nt--grissuperficie {
    color: var(--grissuperficie, #F1F1F3) !important;
}

.nt--negro {
    color: var(--negro, #000000) !important;
}

.nt--blanco {
    color: var(--blanco, #FFFFFF) !important;
}

/*
## Font Sizes
*/

.fsize--1 {
    font-size: var(--fsize--1) !important;
    font-weight: 500;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    line-height: 24px !important;
    letter-spacing: 2px !important;
}

.fsize-0,
p {
    font-size: var(--fsize-0) !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.fsize-1 {
    font-size: var(--fsize-1) !important;
}

.fsize-2-5 {
    font-size: var(--fsize-2-5) !important;
}

.fsize-2,
h3 {
    font-size: var(--fsize-2) !important;
    font-weight: 700 !important;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    line-height: 32px !important;
    letter-spacing: -0.5px !important;
}

.fsize-3,
h2 {
    font-size: var(--fsize-3) !important;
    font-weight: 700 !important;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    line-height: 48px !important;
    letter-spacing: -1px !important;
}

.fsize-4,
h1 {
    font-size: var(--fsize-4) !important;
    font-weight: 700 !important;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    line-height: 63px !important;
    letter-spacing: -1.2px !important;
}

/*******
## Buttons
*******/

.nt-btn,
.nt-btn-compact,
.gform_button {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.nt-btn,
.gform_button {
    font-size: var(--fsize-0, 18px) !important;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    color: var(--blanco, #FFFFFF) !important;
    background-color: var(--celeste, #3DA2EA) !important;
    min-height: 63px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    outline: none !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    display: inline-block !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    padding: 14px 28px !important;
    text-align: center !important;
    align-content: center !important;
    text-transform: none !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-transition: var(--transition-base) !important;
    transition: var(--transition-base) !important;
}

.gform_button {
    height: 48px !important;
    min-height: 48px !important;
}

.nt-btn:hover,
.gform_button:hover {
    border-color: var(--violeta, #6E42B1) !important;
    color: var(--blancosuave, #FCFCFC) !important;
}

/*******
## Buttons — compact variant (header)
*******/

.nt-btn-compact {
    font-size: 16px !important;
    font-family: var(--ffamily-heading, 'Space Grotesk', sans-serif) !important;
    color: var(--blanco, #FFFFFF) !important;
    background-color: var(--celeste, #3DA2EA) !important;
    height: 45px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    outline: none !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    padding: 8px 20px !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: var(--transition-base) !important;
}

.nt-btn-compact:hover {
    border-color: var(--violeta, #6E42B1) !important;
    color: var(--blancosuave, #FCFCFC) !important;
}

/*******
## Buttons — sweep hover fill
## (barrido de izquierda a derecha, referencia: https://uiverse.io/alexroumi/shy-sloth-91)
##
## !important en cada propiedad: el tema Orbital de Gravity Forms trae su
## propia regla para .gform_button::before (probablemente para su propio
## ícono/spinner) que pisa la nuestra con "content: none" — sin contenido
## generado, el pseudo-elemento del barrido no se pinta y el botón del
## formulario se queda sin la animación que sí tienen .nt-btn/.nt-btn-compact.
*******/

.nt-btn::before,
.nt-btn-compact::before,
.gform_button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 0 !important;
    background-color: var(--negroprofundo, #090909) !important;
    z-index: -1 !important;
    transition: width 0.25s ease !important;
}

.nt-btn:hover::before,
.nt-btn-compact:hover::before,
.gform_button:hover::before {
    width: 100% !important;
}

/*--------------------------------------------------------------
# Header / Hero
--------------------------------------------------------------*/

/*
 * Layout, spacing y colores del header y el hero viven como clases
 * Tailwind directo en blocks/neatit-header/render.php y
 * blocks/neatit-hero/render.php — no se duplican acá.
 *
 * .nt-header sigue existiendo como hook (sin reglas propias) solo para
 * el ajuste de admin bar más abajo (# Admin bar offset).
 */

/*
 * .nt-section-glow — fondo con dos manchas de color difuminadas en
 * esquinas opuestas (arriba-izq / abajo-der), sobre fondo oscuro.
 * Reutilizable en cualquier sección oscura: el color de cada mancha se
 * define con --glow-1 / --glow-2 inline en el elemento (ver Hero para
 * el uso). Un solo componente para las 4 secciones del sitio que usan
 * este patrón — cada una solo cambia el par de colores.
 * Pseudo-elementos + blur: no expresable en Tailwind sin plugin.
 *
 * Modificador .nt-section-glow--reverse: espeja la diagonal — mancha 1
 * arriba-derecha, mancha 2 centrada verticalmente a la izquierda (ver
 * Cómo trabajamos para el uso).
 */
.nt-section-glow {
    position: relative;
    isolation: isolate;
}
.nt-section-glow::before,
.nt-section-glow::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.nt-section-glow::before {
    background: var(--glow-1, var(--violeta, #6E42B1));
    top: -260px;
    left: -200px;
}
.nt-section-glow::after {
    background: var(--glow-2, var(--celeste, #3DA2EA));
    bottom: -300px;
    right: -220px;
}

.nt-section-glow--reverse::before {
    top: -260px;
    left: auto;
    right: -200px;
}
.nt-section-glow--reverse::after {
    top: auto;
    bottom: 0;
    right: auto;
    left: -220px;
    transform: translateY(50%);
}

/*
 * Modificador .nt-section-glow--soft: mismas manchas difuminadas, pero
 * pensado para fondos claros (Preguntas frecuentes usa --bg--blancosuave)
 * en vez de los fondos oscuros para los que se diseñó .nt-section-glow
 * originalmente — a opacidad 0.45 el color se ve como un blob sólido
 * sobre blanco, acá baja a 0.12 para quedar como una mancha apenas
 * insinuada. Se usa con --glow-2: transparent inline (ver FAQ) cuando la
 * sección solo necesita una mancha, no las dos.
 */
.nt-section-glow--soft::before,
.nt-section-glow--soft::after {
    opacity: 0.12;
}

/*--------------------------------------------------------------
# Soluciones
--------------------------------------------------------------*/

/*
 * Layout y estados de hover del listado (título/flecha/línea) viven
 * como clases Tailwind directo en render.php — incluida la variante
 * arbitraria [.is-active_&]: para reaccionar a la fila activa sin
 * duplicar reglas acá. Lo único que queda en este archivo es lo que
 * Tailwind no puede expresar sin plugin: el panel de ícono + conector
 * (fondo con borde degradado a dos capas, blobs difuminados por
 * pseudo-elementos, y el transform que calcula ntInitSoluciones() en
 * main.js según la posición real de la fila activa).
 */

.nt-sol-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 214px;
    height: 165px;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    will-change: transform, opacity;
}
.nt-sol-stage.is-visible {
    opacity: 1;
}

.nt-sol-box {
    position: absolute;
    inset: 0;
    border-radius: 15.5px;
    overflow: hidden;
    background:
        linear-gradient(var(--blanco, #fff), var(--blanco, #fff)) padding-box,
        linear-gradient(90deg, var(--celeste, #3DA2EA), var(--violeta, #6E42B1)) border-box;
    border: 2px solid transparent;
    transform: scale(0.88);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nt-sol-stage.is-visible .nt-sol-box {
    transform: scale(1);
}

.nt-sol-box::before,
.nt-sol-box::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    filter: blur(38px);
    opacity: 0.28;
    pointer-events: none;
}
.nt-sol-box::before {
    background: var(--violeta, #6E42B1);
    top: -35px;
    right: -35px;
}
.nt-sol-box::after {
    background: var(--celeste, #3DA2EA);
    bottom: -45px;
    left: -45px;
}

.nt-sol-box__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.nt-sol-box__icon.is-active {
    opacity: 1;
}

.nt-sol-connector {
    position: absolute;
    left: 214px;
    top: 20.5px;
    width: 82px;
    height: 62px;
    pointer-events: none;
}

/* título / flecha / línea de cada fila: clases Tailwind en render.php */

/*--------------------------------------------------------------
# Diagnóstico honesto / Resultados reales
--------------------------------------------------------------*/

/*
 * .nt-diagnostico__card se comparte entre las dos secciones que arma el
 * bloque blocks/neatit-diagnostico (ver comentario en su render.php):
 * "Diagnóstico honesto" (tarjetas con ícono) y "Resultados reales"
 * (tarjetas de caso de éxito). Mismo hover en ambas, a propósito.
 *
 * Layout 100% Tailwind en render.php. Lo único que queda acá es lo que
 * Tailwind no puede expresar con una sola clase (UI Kit → Efectos y
 * sombras → Tarjetas de riesgo):
 * - Card default (E1): drop shadow X0 Y20 Blur20 Spread0 #625D6A 15%.
 * - Card hover (E2): se le suma un segundo shadow más suave/grande y
 *   aparece el borde degradado — misma técnica de doble capa de fondo
 *   (padding-box + border-box) que .nt-sol-box en Soluciones.
 */

.nt-diagnostico__card {
    border: 2px solid transparent;
    box-shadow: 0 20px 20px 0 rgba(98, 93, 106, 0.15);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nt-diagnostico__card:hover {
    background:
        linear-gradient(var(--blanco, #fff), var(--blanco, #fff)) padding-box,
        var(--gradiente-principal) border-box;
    box-shadow:
        0 20px 20px 0 rgba(98, 93, 106, 0.15),
        0 20px 45px -15px rgba(9, 9, 9, 0.18);
}

/*--------------------------------------------------------------
# Cómo trabajamos
--------------------------------------------------------------*/

/*
 * Layout 100% Tailwind en render.php. La animación de hover (levantar la
 * tarjeta + borde degradado) reusa la misma técnica de doble capa de fondo
 * que .nt-diagnostico__card / .nt-sol-box — no expresable en Tailwind sin
 * plugin. Referencia de la animación: Uiverse.io by vk-uiux (se conserva
 * solo el lift, no el cambio de color del ícono).
 */

.nt-trabajo-card {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--negrotarjeta, #150E20), var(--negrotarjeta, #150E20)) padding-box,
        linear-gradient(var(--negrotarjeta, #150E20), var(--negrotarjeta, #150E20)) border-box;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.nt-trabajo-card:hover {
    transform: translateY(-8px);
    background:
        linear-gradient(var(--negrotarjeta, #150E20), var(--negrotarjeta, #150E20)) padding-box,
        var(--gradiente-principal) border-box;
    box-shadow: 0 20px 45px -15px rgba(110, 66, 177, 0.45);
}

/*--------------------------------------------------------------
# Explorá el desafío
--------------------------------------------------------------*/

/*
 * Layout 100% Tailwind en render.php. Lo único que queda acá:
 * - Pestaña activa: fondo degradado (no expresable como color plano de
 *   Tailwind) + texto oscuro para contraste.
 * - Marco del panel: borde degradado, misma técnica de doble capa de
 *   fondo que .nt-trabajo-card / .nt-sol-box.
 * El mostrar/ocultar panel según la pestaña activa lo maneja
 * ntInitDesafioTabs() en assets/js/main.js.
 */

.nt-desafio-tab {
    background:
        linear-gradient(var(--negroprofundo, #090909), var(--negroprofundo, #090909)) padding-box,
        var(--gradiente-principal) border-box;
}

.nt-desafio-tab.is-active {
    background:
        var(--gradiente-principal) padding-box,
        var(--gradiente-principal) border-box;
    border-color: transparent;
    font-weight: 700 !important;
}

.nt-desafio-panel-frame {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--negroprofundo, #090909), var(--negroprofundo, #090909)) padding-box,
        var(--gradiente-principal) border-box;
}

.nt-desafio-resultado {
    background-color: #171619;
    border: 1px  solid #2E2d30;
}

/*--------------------------------------------------------------
# Ecosistema
--------------------------------------------------------------*/

/*
 * Layout 100% Tailwind en render.php. Lo único que queda acá:
 * - Borde degradado permanente de la tarjeta de logo — misma técnica de
 *   doble capa de fondo (padding-box + border-box) que .nt-sol-box /
 *   .nt-trabajo-card, pero sin estado hover (siempre visible). El relleno
 *   (fondo gris superficie, para que la tarjeta se "funda" con la sección
 *   y solo se note el borde degradado) tiene que fijarse acá — el
 *   shorthand `background` resetea background-color, así que una clase
 *   Tailwind de fondo puesta en la tarjeta no tiene ningún efecto.
 * - El loop infinito de la columna: no expresable con Tailwind, necesita
 *   @keyframes. Vertical en desktop, horizontal en mobile/tablet (pedido
 *   del usuario 20/08/2026, corte movido de lg a md el mismo día) — mismo
 *   track HTML (render.php ya pone flex-row en mobile / md:flex-col en
 *   desktop vía Tailwind), acá solo se cambia qué keyframe corre según el
 *   breakpoint: nt-eco-scroll-x (translateX) por defecto, nt-eco-scroll-y
 *   (translateY) desde min-width:768px — mismo punto de corte que el md:
 *   de Tailwind. .nt-eco-track--down invierte el sentido del keyframe activo con
 *   animation-direction: reverse para que en desktop se desplace hacia
 *   abajo (en mobile no se usa — el carrusel horizontal siempre va en el
 *   mismo sentido). Antes había dos columnas en desktop (una para cada
 *   sentido); se dejó solo una — .nt-eco-track--down sigue existiendo por
 *   si en el futuro se vuelve a necesitar el sentido inverso.
 */

.nt-eco-card {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--grissuperficie, #F1F1F3), var(--grissuperficie, #F1F1F3)) padding-box,
        var(--gradiente-principal) border-box;
}

.nt-eco-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.nt-eco-track {
    animation: nt-eco-scroll-x 18s linear infinite;
    will-change: transform;
}

.nt-eco-viewport:hover .nt-eco-track {
    animation-play-state: paused;
}

@keyframes nt-eco-scroll-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (min-width: 768px) {
    .nt-eco-viewport {
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }

    .nt-eco-track {
        animation: nt-eco-scroll-y 5s linear infinite;
    }

    .nt-eco-track--down {
        animation-direction: reverse;
    }
}

@keyframes nt-eco-scroll-y {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .nt-eco-track {
        animation: none;
    }
}

/*--------------------------------------------------------------
# Clientes
--------------------------------------------------------------*/

/*
 * Layout 100% Tailwind en render.php. Lo único que queda acá:
 * - El loop horizontal infinito del carrusel: no expresable con Tailwind,
 *   necesita @keyframes. Misma técnica que .nt-eco-track (Ecosistema) pero
 *   en X en vez de Y — la lista se duplica en render.php y la animación
 *   traslada hasta -50%, que visualmente es idéntico al 0% inicial.
 * - El mask-image de fundido en los bordes del viewport, para que las
 *   tarjetas no corten en seco al entrar/salir del carrusel.
 */

.nt-clientes-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.nt-clientes-track {
    animation: nt-clientes-scroll 28s linear infinite;
    will-change: transform;
}

.nt-clientes-viewport:hover .nt-clientes-track {
    animation-play-state: paused;
}

@keyframes nt-clientes-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .nt-clientes-track {
        animation: none;
    }
}

/*--------------------------------------------------------------
# Alcance
--------------------------------------------------------------*/

/*
 * Layout 100% Tailwind en render.php. A diferencia de .nt-trabajo-card
 * (que levanta la tarjeta en hover), acá el pedido explícito es que el
 * hover "no anime, solo pinte" — por eso transition solo cubre
 * background/box-shadow, nunca transform. Misma técnica de doble capa de
 * fondo (padding-box + border-box) que .nt-trabajo-card / .nt-sol-box
 * para el borde degradado, pero sin el translateY.
 */

/*
 * Fondo 100% transparente (se ve el glow de la sección detrás) tanto en
 * reposo como en hover — por eso acá no sirve la técnica de doble capa de
 * fondo (padding-box/border-box) que usan .nt-trabajo-card / .nt-sol-box,
 * que necesita un relleno opaco en el padding-box para "tapar" el degradé
 * del centro. En su lugar, el borde degradado del hover es un
 * ::before independiente recortado con mask-composite: exclude — pinta
 * solo el anillo (grosor = padding) y dej a el interior realmente vacío,
 * no un color que imite transparencia.
 */
.nt-alcance__card {
    position: relative;
    border: 2px solid #4740532E;
    background: transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nt-alcance__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradiente-principal);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nt-alcance__card:hover {
    border-color: transparent;
    box-shadow: 0 20px 45px -15px rgba(110, 66, 177, 0.4);
}

.nt-alcance__card:hover::before {
    opacity: 1;
}

/* El tag/pill (fondo, borde, tamaño de texto) es 100% Tailwind en
   render.php — no necesita clase propia acá. */

/*--------------------------------------------------------------
# Preguntas frecuentes
--------------------------------------------------------------*/

/*
 * Layout, columnas y la animación de apertura/cierre del acordeón
 * (rotación del chevron + alto del panel) son 100% Tailwind en
 * render.php vía grid-rows-[0fr]/[1fr] con transition — ntInitFaq() en
 * main.js solo togglea la clase .is-open. Lo único que queda acá es el
 * borde degradado del item abierto: misma técnica de doble capa de fondo
 * (padding-box + border-box) que .nt-diagnostico__card, pero activada
 * por .is-open en vez de :hover (el item se queda abierto).
 */
.nt-faq-item {
    border: 2px solid transparent;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nt-faq-item.is-open {
    background:
        linear-gradient(var(--blanco, #fff), var(--blanco, #fff)) padding-box,
        var(--gradiente-principal) border-box;
    box-shadow: 0 20px 45px -15px rgba(110, 66, 177, 0.25);
}

/*--------------------------------------------------------------
# Próximo paso / Formulario de contacto
--------------------------------------------------------------*/

/*
 * Mancha violeta difuminada, centrada horizontalmente y apoyada sobre el
 * borde inferior del bloque — a diferencia de .nt-section-glow (dos
 * manchas en esquinas opuestas), acá es una sola mancha circular
 * centrada. Pseudo-elemento + blur: no expresable en Tailwind sin plugin.
 *
 * overflow: hidden en la sección para clipear la mitad inferior de la
 * mancha en el borde del bloque. Antes tenía overflow: visible (para que
 * "sangrara" hacia la página) pero el footer llegó justo después: el
 * derrame quedaba tapado por el fondo negro del footer de todos modos
 * (invisible) y el navegador seguía reservando ese alto extra al final
 * del documento, dejando una tira del fondo claro del body (#FCFCFC)
 * después del footer. Clipear acá es visualmente idéntico y no genera
 * scroll fantasma.
 */
.nt-formulario {
    overflow: hidden;
}
.nt-formulario__glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 288px;
    height: 288px;
    transform: translate(-50%, 50%);
    background: var(--violeta, #6E42B1);
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

/*
 * Restyling dark-mode del formulario de Gravity Forms embebido en este
 * bloque. El markup lo genera GF (tema "Orbital"), no admite clases
 * Tailwind directas — mismo caso que wp_nav_menu() documentado en
 * CLAUDE.md. El tema Orbital define sus colores como custom properties
 * en un <style> inline con selector #gform_wrapper_N de alta
 * especificidad; se pisa con !important en vez de pelear con
 * especificidad/orden de cascada.
 */
.nt-formulario__form .gform_wrapper {
    margin: 0 !important;
}

.nt-formulario__form .gform_required_legend {
    display: none !important;
}

.nt-formulario__form .gfield_required {
    display: none !important;
}

.nt-formulario__form .gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.nt-formulario__form .gfield {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
}

/*
   Floating label: por defecto el label queda centrado sobre el campo,
   haciendo de placeholder (pedido explícito de UX, ver ejemplo de
   referencia). Al enfocar o completar el campo (.gfield.is-active,
   togglead por ntInitFloatingLabels() en main.js — los campos de
   Gravity Forms no traen atributo placeholder, así que la detección
   de "campo con contenido" no puede resolverse solo con CSS
   :placeholder-shown) el label se achica y sube a una franja fija
   arriba del campo, dejando lugar para el texto ingresado.
*/
.nt-formulario__form .gfield_label,
.nt-formulario__form .gform-field-label__text {
    font-family: var(--ffamily, 'Inter', sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.nt-formulario__form .gfield_label {
    position: absolute !important;
    top: 50% !important;
    left: 17px !important;
    max-width: calc(100% - 34px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: translateY(-50%) !important;
    transform-origin: left top !important;
    transition: var(--transition-base) !important;
}

/* Los textarea son altos: el label arranca pegado arriba, no centrado. */
.nt-formulario__form .gfield--type-textarea .gfield_label {
    top: 24px !important;
    transform: translateY(0) !important;
}

.nt-formulario__form .gfield.is-active .gfield_label {
    top: 10px !important;
    transform: translateY(0) scale(0.75) !important;
    color: var(--celeste, #3DA2EA) !important;
}

.nt-formulario__form input[type="text"],
.nt-formulario__form input[type="email"],
.nt-formulario__form input[type="tel"],
.nt-formulario__form input[type="number"],
.nt-formulario__form textarea {
    width: 100% !important;
    min-height: 54px !important;
    padding: 22px 16px 8px !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: var(--blanco, #FFFFFF) !important;
    font-family: var(--ffamily, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    box-shadow: none !important;
    transition: var(--transition-base) !important;
}

.nt-formulario__form textarea {
    min-height: 128px !important;
    padding-top: 28px !important;
    resize: vertical !important;
}

.nt-formulario__form input:focus,
.nt-formulario__form textarea:focus {
    outline: none !important;
    border-color: var(--celeste, #3DA2EA) !important;
}

.nt-formulario__form .gform_footer {
    margin: 20px 0 0 !important;
    padding: 0 !important;
}

.nt-formulario__form .gform_button {
    width: 100% !important;
}

.nt-formulario__form .validation_message {
    color: var(--rosa, #F07FE5) !important;
    font-size: 13px !important;
}

.nt-formulario__form .gform_confirmation_message {
    color: var(--blanco, #FFFFFF) !important;
    font-family: var(--ffamily, 'Inter', sans-serif) !important;
    text-align: center !important;
}

/*--------------------------------------------------------------
# Double scrollbar fix
--------------------------------------------------------------*/

/*
 * overflow-x: hidden va en AMBOS html y body, no solo en body.
 *
 * Por qué: si el ancho de página se calcula a partir del contenido en vez
 * de partirlo relativo al viewport (ej. el track del carrusel infinito de
 * Clientes, w-max y más ancho que la pantalla, pensado para vivir dentro
 * de su propio overflow-hidden local), y solo `body` tiene overflow-x:hidden,
 * el navegador en emulación mobile/touch (Chrome DevTools → Toggle device
 * toolbar, y celulares reales) EXPANDE el layout viewport (window.innerWidth)
 * para acomodar ese contenido en vez de recortarlo — confirmado con
 * Puppeteer: con overflow-x:hidden solo en body, innerWidth pedido de 900px
 * terminaba midiendo 1120px bajo emulación mobile, empujando el header por
 * encima del breakpoint `lg` y mostrando el layout desktop apretado en una
 * pantalla angosta. En un resize manual de ventana de escritorio (sin
 * emulación touch) esto no pasa — el layout viewport nunca se separa del
 * tamaño real de la ventana ahí, por eso el bug es invisible resizeando a
 * mano y solo aparece con la herramienta de responsive de Chrome.
 * Agregar overflow-x:hidden también en html contiene ese ancho excedente
 * en la raíz del documento y el layout viewport deja de inflarse.
 *
 * No reintroduce el doble scrollbar (la razón original de este bloque):
 * acá solo se toca el eje X con `hidden` — un valor que nunca dibuja barra
 * — dejando overflow-y intacto en body, que sigue siendo el único que
 * scrollea verticalmente.
 */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--ffamily, 'Inter', sans-serif);
}

/*--------------------------------------------------------------
# Admin bar offset (fixed header)
--------------------------------------------------------------*/

.admin-bar .nt-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .nt-header {
        top: 46px;
    }
}

/*--------------------------------------------------------------
# Animation System
--------------------------------------------------------------*/

.mdz-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.mdz-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gutenberg (bloques ACF en modo "preview") renderiza el HTML del bloque
 * dentro del iframe del editor, pero nunca carga assets/js/main.js ahí —
 * ese script solo se enqueuea vía wp_enqueue_scripts (frontend). Sin
 * ntInitScrollAnimations() corriendo, el IntersectionObserver que agrega
 * .is-visible nunca se dispara, así que toda sección con .mdz-animate
 * (fondo incluido, no solo el texto) queda en opacity:0 para siempre al
 * editar — se ve como un bloque completamente en blanco. .editor-styles-wrapper
 * es la clase que WordPress agrega al body del iframe cuando el tema declara
 * add_editor_style(), así que este selector solo aplica ahí, nunca en el
 * frontend real.
 */
.editor-styles-wrapper .mdz-animate {
    opacity: 1 !important;
    transform: none !important;
}

@keyframes mdz-hero-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mdz-hero-el {
    opacity: 0;
    animation: mdz-hero-fadein 0.9s ease-out forwards;
}
.mdz-hero-el--1 { animation-delay: 0.15s; }
.mdz-hero-el--2 { animation-delay: 0.45s; }
.mdz-hero-el--3 { animation-delay: 0.7s;  }
.mdz-hero-el--4 { animation-delay: 0.95s; }