/* ===========================================================================
   Los módulos, en carrusel — la landing
   ===========================================================================
   Compañera de dk-modulos.js. Es la caja del aviso «Lo nuevo en tu Dkard» del
   panel, puesta en la página de ventas y sin velo: la misma tarjeta con la
   escena a un lado y el texto al otro, pero pegada a la página, con las
   pestañas de los nueve módulos encima.

   POR QUÉ PESTAÑAS CON NOMBRE Y NO PUNTOS. Un carrusel en una landing tiene
   un defecto conocido: casi nadie pasa de la primera pantalla, y lo que hay
   en las demás es como si no existiera. Con los nueve nombres a la vista
   el visitante sabe de un vistazo qué trae el producto aunque no toque nada,
   y quien busca una cosa concreta —«¿y los pagos?»— va directo.

   Los tokens son los de landing.css (los mismos del panel). Las escenas
   están en dk-escenas.css.
   =========================================================================== */

.dk-mod {
    --mod-duracion: 7s;   /* lo que dura cada pantalla cuando avanza sola */
    position: relative;
}

/* ---------------------------------------------------------------------------
   Las pestañas
   ---------------------------------------------------------------------------
   En pantalla ancha, nueve iguales con el icono encima del nombre. En el
   teléfono, una tira que se desplaza de lado y se centra sola en la activa. */

.dk-mod-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.dk-mod-tabs::-webkit-scrollbar { display: none; }

.dk-mod-tab {
    all: unset;
    box-sizing: border-box;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.5rem 0.9rem;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.dk-mod-tab svg {
    width: 20px;
    height: 20px;
    flex: none;
    transition: color 0.15s ease, transform 0.2s ease;
}
.dk-mod-tab:hover { color: var(--text); background: rgb(255 255 255 / 0.035); }
.dk-mod-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.dk-mod-tab.es-aqui { color: var(--text); }
.dk-mod-tab.es-aqui svg { color: var(--mod-acento, var(--accent-2)); transform: translateY(-1px); }

/* La raya de abajo: dice cuál es la activa y, cuando el carrusel avanza solo,
   cuánto falta para la siguiente. La barra crece con una animación de CSS de
   la misma duración que el temporizador del JS; pausarla es pausar las dos. */
.dk-mod-avance {
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dk-mod-tab.es-aqui .dk-mod-avance { opacity: 1; }
.dk-mod-avance::after {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(1);
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.dk-mod.en-marcha .dk-mod-tab.es-aqui .dk-mod-avance::after {
    animation: dk-mod-avanza var(--mod-duracion) linear both;
}
.dk-mod.en-marcha.esta-pausado .dk-mod-tab.es-aqui .dk-mod-avance::after {
    animation-play-state: paused;
}
@keyframes dk-mod-avanza {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
   La caja
   --------------------------------------------------------------------------- */

.dk-mod-caja {
    position: relative;
    border-radius: var(--radio-lg, 22px);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    box-shadow:
        0 30px 80px rgb(0 0 0 / 0.45),
        0 2px 0 rgb(255 255 255 / 0.04) inset;
    overflow: hidden;
}

/* La chispa de la marca: el hilo del degradado del logo cruzando el borde de
   arriba, el mismo del aviso del panel y del globo del recorrido. */
.dk-mod-caja::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 1.6rem;
    right: 1.6rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
    z-index: 2;
}

/* Las pantallas van APILADAS en la misma celda de una rejilla: la caja mide
   lo que mide la más alta y no da un salto al pasar de una a otra. */
.dk-mod-pista {
    display: grid;
    /* El desplazamiento vertical sigue siendo del navegador; el gesto
       horizontal llega a los `pointer` del JS, que es el que pasa de
       pantalla. */
    touch-action: pan-y;
}

.dk-mod-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition:
        opacity 0.3s ease,
        transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1),
        visibility 0s linear 0.38s;
}
.dk-mod-slide.se-fue { transform: translateX(-28px); }
.dk-mod-slide.es-actual {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.3s ease,
        transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1),
        visibility 0s linear 0s;
}

/* La escena (dk-escenas.css) va a la izquierda, con su filete. En la landing
   la caja es más ancha que en el panel, así que la escena se ve un punto más
   grande. */
.dk-mod-slide .dk-esc {
    min-height: 420px;
    font-size: 15px;
    border-right: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   Dos escenas en una pantalla (18/10, los módulos que se juntaron)
   ---------------------------------------------------------------------------
   La primera de base y la segunda encima, más chica y ladeada, abajo a la
   derecha: se leen las dos sin que ninguna tape lo que la otra dice. Cada una
   en su caja (`position: relative`), para que sus tarjetas flotantes se midan
   contra su escena. */
.dk-esc-dos {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 31em;
    padding-bottom: 6em;
}
.dk-esc-dos-a,
.dk-esc-dos-b { position: relative; }
.dk-esc-dos-a { width: 84%; }
.dk-esc-dos-b {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 70%;
    font-size: 0.8em;
    transform: rotate(1.5deg);
}
.dk-esc-dos-b .dk-esc-mini { box-shadow: 0 22px 48px rgb(0 0 0 / 0.6); }
/* En el teléfono la escena tiene alto fijo (dk-escenas.css): el par entero
   más chico, para que la de encima no se corte abajo. */
@media (max-width: 860px) {
    .dk-esc-dos { font-size: 0.72em; max-width: 27em; padding-bottom: 3.5em; }
    .dk-esc-dos-a { width: 86%; }
    .dk-esc-dos-b { width: 72%; font-size: 0.74em; }
}

/* ---------------------------------------------------------------------------
   El texto
   --------------------------------------------------------------------------- */

.dk-mod-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 2rem 2.2rem 2rem;
}

.dk-mod-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mod-acento, var(--accent-2));
}
/* El número de la pantalla, en el color del texto y con aire: dice «esto es
   una serie» sin que haga falta un «1 de 7» aparte. */
.dk-mod-num {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mod-acento, var(--accent-2)) 45%, transparent);
    color: var(--text);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

/* Blinker, como los titulares grandes de la landing: a este tamaño se lee
   como fuerza. Es el titular de la pantalla, no el de una tarjeta. */
.dk-mod-texto h3 {
    margin: 0;
    font-family: 'Blinker', 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--text);
    text-wrap: balance;
}

.dk-mod-lead {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text);
}

.dk-mod-puntos {
    list-style: none;
    margin: 0.1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.dk-mod-puntos li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted);
}
.dk-mod-puntos svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.22rem;
    color: var(--mod-acento, var(--accent-2));
}

/* Las pasarelas, por su nombre. Las que vienen llevan «Pronto» y el borde a
   rayas: se ven, pero no como algo que se pueda conectar hoy. */
.dk-mod-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.dk-mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.03);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}
.dk-mod-chip--pronto { color: var(--muted); border-style: dashed; }
.dk-mod-chip i {
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mod-acento, var(--accent-2)) 20%, transparent);
    color: var(--text);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   El pie: el contador a la izquierda, las flechas a la derecha
   --------------------------------------------------------------------------- */

.dk-mod-pie {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.4rem 0.85rem;
    border-top: 1px solid var(--border);
    background: var(--panel);
}

.dk-mod-contador {
    margin-right: auto;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.dk-mod-contador b { color: var(--text); font-weight: 700; }

.dk-mod-flecha {
    all: unset;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dk-mod-flecha svg { width: 18px; height: 18px; }
.dk-mod-flecha:hover { border-color: var(--accent); background: rgb(242 96 12 / 0.1); }
.dk-mod-flecha:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* La llamada, debajo de la caja. Es el mismo botón del resto de la página. */
.dk-mod-cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   En el teléfono y en la tableta
   ---------------------------------------------------------------------------
   Una sola columna: la escena arriba, encogida entera (es todo `em`), y el
   texto debajo. Las pestañas pasan a una tira horizontal con el icono al
   lado del nombre, que se desplaza y se centra sola en la activa.

   EL CORTE ESTÁ EN 860 y no en 720 por la escena: por debajo, la columna
   izquierda no alcanza los 300 px y la lista de productos sale apretada. */

@media (max-width: 860px) {
    .dk-mod-tabs {
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        /* Aire a los lados para que la primera y la última puedan centrarse. */
        padding-inline: 0.75rem;
        scroll-padding-inline: 0.75rem;
    }
    .dk-mod-tab {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 0.4rem;
        /* 44 px de alto para el pulgar: medía ~37 y una pestaña fallada abre el
           módulo de al lado. El relleno de abajo es más grande que el de arriba
           porque ahí va la barrita de avance (.dk-mod-avance); por eso se pide
           el alto en vez de subir el relleno. */
        min-height: 44px;
        padding: 0.55rem 0.85rem 0.75rem;
        font-size: 0.84rem;
        white-space: nowrap;
    }
    .dk-mod-tab svg { width: 16px; height: 16px; }
    .dk-mod-avance { left: 0.85rem; right: 0.85rem; bottom: 0.3rem; }

    .dk-mod-caja { border-radius: 18px; }
    .dk-mod-caja::before { left: 1.1rem; right: 1.1rem; }

    /* LA CAJA MIDE LO QUE MIDE LA PANTALLA ACTIVA, no la más alta de las
       nueve. Apiladas a la misma altura, como en escritorio, una pantalla
       corta dejaba su texto flotando con un hueco arriba —el texto va
       centrado— y otro abajo, en una pantalla donde el espacio es lo que
       falta. Las que no se ven quedan encima, absolutas, solo para el fundido;
       la caja cambia de alto al pasar de pantalla, que en el teléfono es lo
       normal en cualquier carrusel. */
    .dk-mod-pista { display: block; position: relative; }
    .dk-mod-slide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        grid-template-columns: minmax(0, 1fr);
    }
    .dk-mod-slide.es-actual { position: relative; }
    .dk-mod-slide .dk-esc {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dk-mod-texto { justify-content: flex-start; gap: 0.65rem; padding: 1.25rem 1.2rem 1.3rem; }
    .dk-mod-texto h3 { font-size: 1.5rem; }
    .dk-mod-lead { font-size: 0.96rem; }
    .dk-mod-puntos li { font-size: 0.9rem; }

    .dk-mod-pie { padding: 0.65rem 1rem 0.75rem; }
    .dk-mod-cta { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dk-mod-slide,
    .dk-mod-slide.es-actual { transition: none; }
    .dk-mod-tab svg,
    .dk-mod-avance { transition: none; }
    .dk-mod.en-marcha .dk-mod-tab.es-aqui .dk-mod-avance::after { animation: none; }
}