/* ==========================================================================
   Tul Bordado — componentes propios de /telas/tul/bordado
   Arletex Design System v3.5 · prefijo `tb-`
   --------------------------------------------------------------------------
   Tres componentes, cada uno con registro, marco y hover DISTINTOS entre sí
   y distintos de los `tc-*`/`tarjeta-beneficio` que ya usa la página (N-09):

     · .tb-statement → banda ink con el claim del producto.
                       Registro @manifest · Marco Bleed-edge · sin hover.

     · .tb-weaves    → "Dos bordados en un mismo rollo": 2 fichas técnicas
                       con número en mono sobre el borde.
                       Registro @technical · Marco Index-tab · hover side-shift.

     · .tb-colors    → "Colores del tul bordado": fichas con foto sangrada,
                       nombre siempre visible (SEO) y CTA de cotización.
                       Registro @gallery · Marco Bleed-edge · hover lift-orange.

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

/* ==========================================================================
   .tb-statement — banda ink de apertura (Manifiesto)
   ========================================================================== */

.tb-statement {
    background: var(--ax-ink, #1F2530);
    border-top: 1px solid var(--ax-orange, #F15A29);
    border-bottom: 1px solid var(--ax-orange, #F15A29);
    padding: clamp(48px, 7vw, 80px) 0;
}

.tb-statement__inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: grid;
    gap: var(--ax-space-8, 32px);
    align-items: center;
}

@media (min-width: 992px) {
    .tb-statement__inner {
        grid-template-columns: 7fr 5fr;
        gap: clamp(32px, 5vw, 64px);
    }
}

.tb-statement__label {
    margin: 0 0 var(--ax-space-4, 16px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ax-font-mono, ui-monospace, monospace);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ax-orange, #F15A29);
}

.tb-statement__label::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--ax-orange, #F15A29);
    flex: none;
}

.tb-statement__claim {
    margin: 0;
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.94;
    font-size: clamp(2rem, 5.6vw, 3.6rem);
    color: var(--ax-white, #FFFFFF);
}

.tb-statement__claim em {
    font-family: var(--ax-font-accent, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--ax-orange, #F15A29);
}

.tb-statement__facts {
    display: grid;
    gap: var(--ax-space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-statement__facts li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: baseline;
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: var(--ax-space-3, 12px);
}

.tb-statement__num {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    line-height: 1;
    color: var(--ax-yellow, #FFEB3B);
}

.tb-statement__fact {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ax-muted-dark, #A8A39A);
}

.tb-statement__fact strong {
    color: var(--ax-white, #FFFFFF);
}

/* ==========================================================================
   .tb-weaves — los dos bordados (Index-tab + side-shift)
   ========================================================================== */

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

.tb-weave {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 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. */
.tb-weave__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, color 200ms ease;
}

/* Barra acento del hover side-shift. */
.tb-weave::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);
}

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

.tb-weave:hover::before {
    width: 5px;
}

.tb-weave:hover .tb-weave__tab {
    background: var(--ax-orange, #F15A29);
    color: var(--ax-ink, #1F2530);
}

.tb-weave__media {
    margin: 0 0 18px;
    border: 1px solid var(--ax-ink, #1F2530);
    overflow: hidden;
}

.tb-weave__media img {
    display: block;
    width: 100%;
    height: clamp(180px, 22vw, 260px);
    object-fit: cover;
}

.tb-weave__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);
}

.tb-weave__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) {
    .tb-weaves {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .tb-weave:hover {
        transform: translateX(3px);
    }
}

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

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

.tb-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);
}

.tb-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. */
.tb-color__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;   /* los assets de color son cuadrados 500x500 */
    background: var(--ax-cream, #F2EDE4);
}

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

.tb-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;
}

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

.tb-color__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 24px;
    text-align: left;
}

.tb-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);
}

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

/* CTA por color — cotiza ese tono concreto por WhatsApp. */
.tb-color__cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 20px;
    background: var(--ax-whatsapp, #25D366);
    border: 2px solid var(--ax-ink, #1F2530);
    border-radius: 0;
    box-shadow: 0 4px 0 #128C4B;
    color: var(--ax-ink, #1F2530);
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.tb-color__cta:hover,
.tb-color__cta:focus {
    color: var(--ax-ink, #1F2530);
    text-decoration: none;
    transform: translateY(3px);
    box-shadow: 0 1px 0 #128C4B;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    .tb-weave,
    .tb-weave::before,
    .tb-weave__tab,
    .tb-color,
    .tb-color__cta {
        transition: none;
    }
    .tb-weave:hover,
    .tb-color:hover,
    .tb-color__cta:hover {
        transform: none;
    }
}

/* ==========================================================================
   .tb-usos — rejilla de usos con icono (reusa `.tc-uso-card` global).
   Solo corrige el tamaño del label: el global queda en 13px y la regla
   de legibilidad de Arletex es que nada visible baje de 14px.
   ========================================================================== */

.tb-usos .tc-uso-label {
    font-size: 15px;
}