/* =========================================================
   KIVOR · Utilities (spacing, display, text, layout…)
   Coherente con /assets/css/tokens.css
   ========================================================= */

/* -------------- Spacing (tokens) -------------- */
/* Escala: --space-1 .. --space-10 */
.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

/* Margen total */
.m-1 {
    margin: var(--space-1) !important;
}

.m-2 {
    margin: var(--space-2) !important;
}

.m-3 {
    margin: var(--space-3) !important;
}

.m-4 {
    margin: var(--space-4) !important;
}

.m-5 {
    margin: var(--space-5) !important;
}

.m-6 {
    margin: var(--space-6) !important;
}

.m-8 {
    margin: var(--space-8) !important;
}

.m-10 {
    margin: var(--space-10) !important;
}

/* Padding total */
.p-1 {
    padding: var(--space-1) !important;
}

.p-2 {
    padding: var(--space-2) !important;
}

.p-3 {
    padding: var(--space-3) !important;
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-5 {
    padding: var(--space-5) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

.p-8 {
    padding: var(--space-8) !important;
}

.p-10 {
    padding: var(--space-10) !important;
}

/* Ejes lógicos */
.mx-1 {
    margin-inline: var(--space-1) !important;
}

.mx-2 {
    margin-inline: var(--space-2) !important;
}

.mx-3 {
    margin-inline: var(--space-3) !important;
}

.mx-4 {
    margin-inline: var(--space-4) !important;
}

.mx-5 {
    margin-inline: var(--space-5) !important;
}

.mx-6 {
    margin-inline: var(--space-6) !important;
}

.mx-8 {
    margin-inline: var(--space-8) !important;
}

.mx-10 {
    margin-inline: var(--space-10) !important;
}

.my-1 {
    margin-block: var(--space-1) !important;
}

.my-2 {
    margin-block: var(--space-2) !important;
}

.my-3 {
    margin-block: var(--space-3) !important;
}

.my-4 {
    margin-block: var(--space-4) !important;
}

.my-5 {
    margin-block: var(--space-5) !important;
}

.my-6 {
    margin-block: var(--space-6) !important;
}

.my-8 {
    margin-block: var(--space-8) !important;
}

.my-10 {
    margin-block: var(--space-10) !important;
}

.px-1 {
    padding-inline: var(--space-1) !important;
}

.px-2 {
    padding-inline: var(--space-2) !important;
}

.px-3 {
    padding-inline: var(--space-3) !important;
}

.px-4 {
    padding-inline: var(--space-4) !important;
}

.px-5 {
    padding-inline: var(--space-5) !important;
}

.px-6 {
    padding-inline: var(--space-6) !important;
}

.px-8 {
    padding-inline: var(--space-8) !important;
}

.px-10 {
    padding-inline: var(--space-10) !important;
}

.py-1 {
    padding-block: var(--space-1) !important;
}

.py-2 {
    padding-block: var(--space-2) !important;
}

.py-3 {
    padding-block: var(--space-3) !important;
}

.py-4 {
    padding-block: var(--space-4) !important;
}

.py-5 {
    padding-block: var(--space-5) !important;
}

.py-6 {
    padding-block: var(--space-6) !important;
}

.py-8 {
    padding-block: var(--space-8) !important;
}

.py-10 {
    padding-block: var(--space-10) !important;
}

/* Direcciones individuales (lógicas) */
.mt-1 {
    margin-block-start: var(--space-1) !important;
}

.mt-2 {
    margin-block-start: var(--space-2) !important;
}

.mt-3 {
    margin-block-start: var(--space-3) !important;
}

.mt-4 {
    margin-block-start: var(--space-4) !important;
}

.mt-5 {
    margin-block-start: var(--space-5) !important;
}

.mt-6 {
    margin-block-start: var(--space-6) !important;
}

.mt-8 {
    margin-block-start: var(--space-8) !important;
}

.mt-10 {
    margin-block-start: var(--space-10) !important;
}

.mb-1 {
    margin-block-end: var(--space-1) !important;
}

.mb-2 {
    margin-block-end: var(--space-2) !important;
}

.mb-3 {
    margin-block-end: var(--space-3) !important;
}

.mb-4 {
    margin-block-end: var(--space-4) !important;
}

.mb-5 {
    margin-block-end: var(--space-5) !important;
}

.mb-6 {
    margin-block-end: var(--space-6) !important;
}

.mb-8 {
    margin-block-end: var(--space-8) !important;
}

.mb-10 {
    margin-block-end: var(--space-10) !important;
}

.ml-1 {
    margin-inline-start: var(--space-1) !important;
}

.ml-2 {
    margin-inline-start: var(--space-2) !important;
}

.ml-3 {
    margin-inline-start: var(--space-3) !important;
}

.ml-4 {
    margin-inline-start: var(--space-4) !important;
}

.ml-5 {
    margin-inline-start: var(--space-5) !important;
}

.ml-6 {
    margin-inline-start: var(--space-6) !important;
}

.mr-1 {
    margin-inline-end: var(--space-1) !important;
}

.mr-2 {
    margin-inline-end: var(--space-2) !important;
}

.mr-3 {
    margin-inline-end: var(--space-3) !important;
}

.mr-4 {
    margin-inline-end: var(--space-4) !important;
}

.mr-5 {
    margin-inline-end: var(--space-5) !important;
}

.mr-6 {
    margin-inline-end: var(--space-6) !important;
}

/* Padding direccional */
.pt-1 {
    padding-block-start: var(--space-1) !important;
}

.pt-2 {
    padding-block-start: var(--space-2) !important;
}

.pt-3 {
    padding-block-start: var(--space-3) !important;
}

.pt-4 {
    padding-block-start: var(--space-4) !important;
}

.pb-1 {
    padding-block-end: var(--space-1) !important;
}

.pb-2 {
    padding-block-end: var(--space-2) !important;
}

.pb-3 {
    padding-block-end: var(--space-3) !important;
}

.pb-4 {
    padding-block-end: var(--space-4) !important;
}

.pl-1 {
    padding-inline-start: var(--space-1) !important;
}

.pl-2 {
    padding-inline-start: var(--space-2) !important;
}

.pr-1 {
    padding-inline-end: var(--space-1) !important;
}

.pr-2 {
    padding-inline-end: var(--space-2) !important;
}

/* Compatibilidad heredada (clases usadas antes) */
.mt-16 {
    margin-top: 1rem !important;
}

.mt-24 {
    margin-top: 1.5rem !important;
}

.mt-32 {
    margin-top: 2rem !important;
}

.mb-16 {
    margin-bottom: 1rem !important;
}

.mb-24 {
    margin-bottom: 1.5rem !important;
}

.mb-32 {
    margin-bottom: 2rem !important;
}

.p-16 {
    padding: 1rem !important;
}

.p-24 {
    padding: 1.5rem !important;
}

.p-32 {
    padding: 2rem !important;
}

/* Gap (grid/flex) */
.gap-1 {
    gap: var(--space-1) !important;
}

.gap-2 {
    gap: var(--space-2) !important;
}

.gap-3 {
    gap: var(--space-3) !important;
}

.gap-4 {
    gap: var(--space-4) !important;
}

.gap-5 {
    gap: var(--space-5) !important;
}

.gap-6 {
    gap: var(--space-6) !important;
}

/* -------------- Display -------------- */
.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.flex {
    display: flex !important;
}

.grid {
    display: grid !important;
}

.contents {
    display: contents !important;
}

/* -------------- Flexbox helpers -------------- */
.flex-row {
    flex-direction: row !important;
}

.flex-col {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.items-start {
    align-items: flex-start !important;
}

.items-center {
    align-items: center !important;
}

.items-end {
    align-items: flex-end !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.place-center {
    place-items: center !important;
}

/* -------------- Grid helpers -------------- */
.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Auto-fit con min ancho para tarjetas responsivas */
.grid-auto-fit-240 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.grid-auto-fit-320 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* -------------- Sizing -------------- */
.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

.max-w-prose {
    max-width: 75ch !important;
}

.max-w-screen {
    max-width: 100vw !important;
}

/* -------------- Text -------------- */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

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

.text-0 {
    font-size: var(--step-0) !important;
}

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

.text-2 {
    font-size: var(--step-2) !important;
}

.text-3 {
    font-size: var(--step-3) !important;
}

.font-regular {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 600 !important;
}

.font-semibold {
    font-weight: 700 !important;
}

.font-bold {
    font-weight: 800 !important;
}

.text-muted {
    color: var(--text-500) !important;
}

.text-100 {
    color: var(--text-100) !important;
}

.text-500 {
    color: var(--text-500) !important;
}

.text-700 {
    color: var(--text-700) !important;
}

.text-900 {
    color: var(--text-900) !important;
}

.text-brand {
    color: var(--brand-600) !important;
}

.text-brand-500 {
    color: var(--brand-500) !important;
}

/* Gradiente de texto reutilizable */
.text-gradient {
    background: var(--grad-highlight);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* -------------- Backgrounds -------------- */
.bg-transparent {
    background: transparent !important;
}

.bg-surface-0 {
    background: var(--surface-0) !important;
}

.bg-surface-1 {
    background: var(--surface-1) !important;
}

.bg-surface-2 {
    background: var(--surface-2) !important;
}

.bg-surface-3 {
    background: var(--surface-3) !important;
}

.bg-brand-600 {
    background: var(--brand-600) !important;
}

.bg-white {
    background: var(--surface-1) !important;
}

/* “Glass” breve reutilizable */
.glass {
    background: var(--surface-3) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--surface-border);
}

/* -------------- Borders & Radius -------------- */
.border {
    border: 1px solid var(--surface-border) !important;
}

.border-0 {
    border: 0 !important;
}

.border-t {
    border-top: 1px solid var(--surface-border) !important;
}

.border-b {
    border-bottom: 1px solid var(--surface-border) !important;
}

.border-l {
    border-left: 1px solid var(--surface-border) !important;
}

.border-r {
    border-right: 1px solid var(--surface-border) !important;
}

.border-brand {
    border-color: color-mix(in oklab, var(--brand-600) 40%, var(--surface-border)) !important;
}

.rounded {
    border-radius: var(--radius-md) !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-full {
    border-radius: 999px !important;
}

/* Gradiente borde (sin extra wrappers) */
.border-gradient {
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
        linear-gradient(180deg,
            color-mix(in oklab, var(--brand-600) 25%, transparent),
            color-mix(in oklab, var(--brand-600) 0%, transparent)) border-box !important;
    border-radius: inherit !important;
}

/* -------------- Shadows -------------- */
.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Hover elevación lista para usar */
.hover-raise {
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.hover-raise:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* -------------- Positioning -------------- */
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

.inset-0 {
    inset: 0 !important;
}

.top-0 {
    top: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.left-0 {
    left: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-modal {
    z-index: var(--z-modal) !important;
}

/* -------------- Overflow / Object-fit -------------- */
.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.object-cover {
    object-fit: cover !important;
}

.object-contain {
    object-fit: contain !important;
}

.object-scale-down {
    object-fit: scale-down !important;
}

/* -------------- Opacity / Interacción -------------- */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-50 {
    opacity: .5 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

.pointer-none {
    pointer-events: none !important;
}

.pointer-auto {
    pointer-events: auto !important;
}

.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

/* -------------- Aspect Ratio -------------- */
/* Útil para videos/imágenes sin salto de layout */
.ratio-16x9 {
    aspect-ratio: 16 / 9 !important;
}

.ratio-4x3 {
    aspect-ratio: 4 / 3 !important;
}

.ratio-1x1 {
    aspect-ratio: 1 / 1 !important;
}

/* -------------- Anim utils base -------------- */
.animate-in {
    animation: fade-up var(--speed-slow) var(--ease) both !important;
}

.fade-in {
    animation: fade-in var(--speed) var(--ease) both !important;
}

.delay-1 {
    animation-delay: .1s !important;
}

.delay-2 {
    animation-delay: .2s !important;
}

.delay-3 {
    animation-delay: .3s !important;
}

/* =========================================================
   PACK DE ANIMACIONES & TRANSICIONES (alta performance)
   (usar transform/opacity para 60fps) – web.dev
   ========================================================= */
.transition {
    transition: all var(--speed) var(--ease) !important;
}

.transition-none {
    transition: none !important;
}

.transition-color {
    transition: color var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease) !important;
}

.transition-transform {
    transition: transform var(--speed) var(--ease) !important;
}

.transition-opacity {
    transition: opacity var(--speed) var(--ease) !important;
}

.duration-150 {
    transition-duration: 150ms !important;
}

.duration-300 {
    transition-duration: 300ms !important;
}

.duration-500 {
    transition-duration: 500ms !important;
}

.duration-700 {
    transition-duration: 700ms !important;
}

.ease-smooth {
    transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important;
}

.ease-expo {
    transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

.ease-spring {
    transition-timing-function: cubic-bezier(.16, 1.1, .3, 1) !important;
}

.will-change-transform {
    will-change: transform !important;
}

.will-change-opacity {
    will-change: opacity !important;
}

.gpu-hint {
    transform: translateZ(0);
}

/* Entradas listas: */
.anim-fade-up {
    animation: k-fade-up .7s var(--ease) both;
}

.anim-zoom-in {
    animation: k-zoom-in .6s var(--ease) both;
}

.anim-blur-in {
    animation: k-blur-in .6s var(--ease) both;
}

.anim-slide-left {
    animation: k-slide-left .6s var(--ease) both;
}

.anim-slide-right {
    animation: k-slide-right .6s var(--ease) both;
}

.anim-pop {
    animation: k-pop .5s var(--ease) both;
}

/* Hover utilities vistosas (aplícalas al card/botón) */
.hover-scale {
    transition: transform var(--speed) var(--ease);
}

.hover-scale:hover {
    transform: scale(1.03);
}

.hover-float {
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.hover-float:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.hover-tilt {
    perspective: 800px;
    transform-style: preserve-3d;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.hover-tilt:hover {
    transform: rotateX(2.2deg) rotateY(-2.2deg) translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.18em;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--speed) var(--ease);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Keyframes de apoyo */
@keyframes k-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes k-zoom-in {
    from {
        opacity: 0;
        transform: scale(.96)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes k-blur-in {
    from {
        opacity: 0;
        filter: blur(6px)
    }

    to {
        opacity: 1;
        filter: none
    }
}

@keyframes k-slide-left {
    from {
        opacity: 0;
        transform: translateX(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes k-slide-right {
    from {
        opacity: 0;
        transform: translateX(-12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes k-pop {
    0% {
        transform: scale(.96)
    }

    60% {
        transform: scale(1.02)
    }

    100% {
        transform: none
    }
}

/* -------------- Marquee accesible (pausable) -------------- */
.marquee {
    --marquee-speed: 28s;
    display: flex;
    gap: var(--space-6);
    width: max-content;
    animation: k-marquee var(--marquee-speed) linear infinite;
}

@keyframes k-marquee {
    to {
        transform: translateX(-50%)
    }
}

/* Botón o wrapper que pause */
.is-paused,
.is-paused .marquee {
    animation-play-state: paused !important;
}

/* -------------- Scroll Snap (carruseles suaves) -------------- */
.snap-x {
    scroll-snap-type: x mandatory !important;
}

.snap-y {
    scroll-snap-type: y mandatory !important;
}

.snap-center>* {
    scroll-snap-align: center !important;
}

.snap-start>* {
    scroll-snap-align: start !important;
}

/* -------------- Filtros y Backdrop -------------- */
.blur-sm {
    filter: blur(4px) !important;
}

.blur-md {
    filter: blur(8px) !important;
}

.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* -------------- Auras / brillos -------------- */
.glow-soft {
    box-shadow:
        0 10px 30px color-mix(in oklab, var(--brand-600) 22%, transparent),
        0 1px 0 rgba(255, 255, 255, .04) inset;
}

.text-glow {
    text-shadow: 0 2px 16px color-mix(in oklab, var(--brand-600) 45%, transparent);
}

/* =========================================================
   SCROLL-DRIVEN ANIMATIONS (feature-detected)
   MDN: animation-timeline / view() / scroll-timeline
   ========================================================= */
@supports (animation-timeline: auto) {

    /* Fade-up ligado a la entrada en viewport */
    .sd-fade-up {
        animation: k-fade-up both;
        animation-duration: 1s;
        animation-timeline: view();
        /* de que entra hasta cubrir 35% */
        animation-range: entry 0% cover 35%;
    }

    /* Zoom-in suave al entrar */
    .sd-zoom-in {
        animation: k-zoom-in both;
        animation-duration: .9s;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    /* Parallax discreto (media sube un poco al hacer scroll) */
    .sd-parallax {
        transform: translateY(0);
        animation: k-parallax both linear;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes k-parallax {
        from {
            transform: translateY(10px);
        }

        to {
            transform: translateY(-10px);
        }
    }

    /* Stagger automático para grids: aplica a contenedor */
    .sd-stagger>* {
        animation: k-fade-up .7s var(--ease) both;
        animation-timeline: view();
        animation-range: entry-crossing 0% cover 40%;
        animation-delay: calc(var(--i, 0) * 80ms);
    }
}

/* -------------- Reduced motion (accesibilidad) -------------- */
/* Respeta preferencias del SO – MDN / WAI */
@media (prefers-reduced-motion: reduce) {

    .animate-in,
    .fade-in,
    .anim-fade-up,
    .anim-zoom-in,
    .anim-blur-in,
    .anim-slide-left,
    .anim-slide-right,
    .anim-pop,
    .sd-fade-up,
    .sd-zoom-in,
    .sd-parallax,
    .sd-stagger,
    .marquee {
        animation: none !important;
        transition: none !important;
    }
}

/* -------------- Responsive variants -------------- */
/* Breakpoints: sm ≥640px, md ≥880px, lg ≥1200px */
@media (min-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }

    .sm\:block {
        display: block !important;
    }

    .sm\:flex {
        display: flex !important;
    }

    .sm\:grid {
        display: grid !important;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sm\:text-left {
        text-align: left !important;
    }

    .sm\:text-center {
        text-align: center !important;
    }

    .sm\:text-right {
        text-align: right !important;
    }

    .sm\:flex-row {
        flex-direction: row !important;
    }

    .sm\:flex-col {
        flex-direction: column !important;
    }
}

@media (min-width: 880px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .md\:justify-between {
        justify-content: space-between !important;
    }

    .md\:items-center {
        align-items: center !important;
    }

    .md\:gap-4 {
        gap: var(--space-4) !important;
    }

    .md\:gap-6 {
        gap: var(--space-6) !important;
    }
}

@media (min-width: 1200px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .lg\:block {
        display: block !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:gap-6 {
        gap: var(--space-6) !important;
    }
}

/* ========= Reveal on scroll (site-wide) ========= */
.reveal,
[data-reveal] {
    --reveal-duration: .7s;
    --reveal-delay: 0ms;
    /* permite “stagger” */
    --reveal-distance: 14px;

    opacity: 0;
    transform: translateY(var(--reveal-distance)) scale(.985);
    filter: blur(.4px);
    will-change: transform, opacity;
    transition:
        transform var(--reveal-duration) var(--ease),
        opacity var(--reveal-duration) var(--ease),
        filter var(--reveal-duration) var(--ease);
    transition-delay: var(--reveal-delay);
}

/* Estado visible */
.reveal.in-view,
[data-reveal].in-view {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Variantes direccionales (opcional por data-attr) */
[data-reveal="up"] {
    --reveal-distance: 14px;
    transform: translateY(var(--reveal-distance)) scale(.985);
}

[data-reveal="down"] {
    --reveal-distance: -14px;
    transform: translateY(var(--reveal-distance)) scale(.985);
}

[data-reveal="left"] {
    transform: translateX(-14px) scale(.985);
}

[data-reveal="right"] {
    transform: translateX(14px) scale(.985);
}

[data-reveal="zoom"] {
    transform: scale(.96);
}


/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* Estado visible – deja ESTE bloque después de cualquier regla :not(.in-view) */
.reveal.in-view,
[data-reveal].in-view {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Boost de reveal para tarjetas: SOLO mientras NO estén en vista */
.card.reveal:not(.in-view),
.project-card.reveal:not(.in-view),
.ind-card.reveal:not(.in-view),
.feature.reveal:not(.in-view) {
    --reveal-duration: .8s;
    --reveal-distance: 24px;
    /* efecto más marcado pero elegante */
    transform: translateY(var(--reveal-distance)) scale(.98);
    filter: blur(.3px);
    /* 1px se nota mucho; .2–.4px da “suavidad” sin verse borroso */
}