/* ==========================================================================
   Tricot Adherible — componentes propios de /telas/tricot-adherible
   Arletex Design System v3.5 · prefijo `tra-`
   --------------------------------------------------------------------------
   Solo dos componentes, ambos con marco y hover DISTINTOS a los `tc-*`
   que ya usa la página (lift-ink), para cumplir N-09 (variación):

     · .tra-uses  → "¿Para qué sirve?": 4 usos con H3 + prosa.
                    Marco Index-tab (número en mono sobresaliendo) +
                    hover side-shift (desplazamiento lateral + barra orange).

     · .tra-colors → "Colores del tricot adherible": 2 fichas de color con
                    imagen sangrada (Bleed-edge) + hover lift-orange.

   Reglas duras respetadas: radius 0, sombras sólidas sin blur,
   nada visible <14px, tap-size ≥44px, prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   .tra-uses — usos del tricot adherible (Index-tab + side-shift)
   ========================================================================== */

.tra-uses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    margin: 34px 0 8px;
}

.tra-use {
    position: relative;
    padding: 26px 22px 22px;
    background: var(--ax-white, #FFFFFF);
    border: 2px solid var(--ax-ink, #1F2530);
    border-radius: 0;
    text-align: left;
    transition:
        transform 200ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 200ms cubic-bezier(.2, .7, .2, 1);
}

/* Pestaña de archivador: número en mono montado sobre el borde superior. */
.tra-use__tab {
    position: absolute;
    top: 0;
    left: 18px;
    transform: translateY(-50%);
    display: inline-block;
    padding: 5px 12px;
    background: var(--ax-ink, #1F2530);
    color: var(--ax-paper, #FAF6EE);
    font-family: var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color 200ms ease;
}

/* Barra acento del hover side-shift. */
.tra-use::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 14px;
    bottom: 14px;
    width: 0;
    background: var(--ax-orange, #F15A29);
    transition: width 200ms cubic-bezier(.2, .7, .2, 1);
}

.tra-use:hover {
    transform: translateX(5px);
    box-shadow: -5px 0 0 rgba(31, 37, 48, 0.08);
}

.tra-use:hover::before {
    width: 5px;
}

.tra-use:hover .tra-use__tab {
    background: var(--ax-orange, #F15A29);
    color: var(--ax-ink, #1F2530);
}

.tra-use__title {
    margin: 0 0 10px;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ax-ink, #1F2530);
}

.tra-use__text {
    margin: 0;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ax-ink, #1F2530);
}

@media (max-width: 767px) {
    .tra-uses {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .tra-use:hover {
        transform: translateX(3px);
    }
}

/* ==========================================================================
   .tra-colors — fichas de color (Bleed-edge + lift-orange)
   ========================================================================== */

.tra-colors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 30px 0 8px;
}

.tra-color {
    display: flex;
    flex-direction: column;
    background: var(--ax-paper, #FAF6EE);
    border: 2px solid var(--ax-ink, #1F2530);
    border-radius: 0;
    overflow: hidden;
    transition:
        transform 200ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 200ms cubic-bezier(.2, .7, .2, 1);
}

.tra-color:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--ax-orange, #F15A29);
}

/* Imagen sangrada al borde de la ficha — sin marco propio. */
.tra-color__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;   /* los assets de color son cuadrados 500×500 */
    background: var(--ax-cream, #F2EDE4);
}

.tra-color__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tra-color__swatch {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--ax-ink, #1F2530);
    color: var(--ax-paper, #FAF6EE);
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.tra-color__dot {
    width: 16px;
    height: 16px;
    border: 1px solid var(--ax-paper, #FAF6EE);
    border-radius: 0;
}

.tra-color__body {
    padding: 20px 22px 24px;
    text-align: left;
}

.tra-color__title {
    margin: 0 0 10px;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ax-ink, #1F2530);
}

.tra-color__text {
    margin: 0;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ax-ink, #1F2530);
}

@media (max-width: 767px) {
    .tra-colors {
        grid-template-columns: 1fr;
    }
    .tra-color:hover {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 var(--ax-orange, #F15A29);
    }
}

/* ==========================================================================
   .tra-lead-media — imagen de apertura de sección, acotada en alto
   (los banners de /telas-assets/tela-tricot son muy verticales y, a ancho
   completo, empujan la retícula de usos fuera del primer scroll).
   ========================================================================== */

.tra-lead-media {
    margin: 0 0 8px;
    border: 2px solid var(--ax-ink, #1F2530);
    border-radius: 0;
    overflow: hidden;
}

.tra-lead-media img {
    display: block;
    width: 100%;
    height: clamp(220px, 26vw, 340px);
    object-fit: cover;
    object-position: center top;   /* los banners llevan el titular arriba */
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

.tra-use:focus-visible,
.tra-color:focus-visible {
    outline: 3px solid var(--ax-purple, #6A52A2);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tra-use,
    .tra-use::before,
    .tra-use__tab,
    .tra-color {
        transition: none;
    }
    .tra-use:hover,
    .tra-color:hover {
        transform: none;
    }
}