/* =========================================================================
   Arletex Design System v3.5 — Tela Tul (/telas/tela-tul)
   Hoja editorial por página. Prefijo de clase y de token: tul- / --tul-*.
   Tokens locales con fallback a --ax-* global y, si no, a hex del sistema.
   ─────────────────────────────────────────────────────────────────────────
   TEMA: TSG madre del tul. El tul tampoco es "una" tela: es una FAMILIA de
   mallas (15, 70, glitter, bordado, crinolina) que se elige por el
   RESULTADO buscado —volumen, brillo, ornamento, estructura—, no por el
   nombre. Por eso la página se organiza POR PROYECTO (vestidos de novia,
   tutús, decoración, acabados, capas ligeras) y remata con el catálogo por
   tipo. Esqueleto portado de /telas/tela-poliester (pol-), con dos
   componentes propios: .tul-compare (tabla comparativa que colapsa a
   fichas en móvil) y .tul-catcard--lead (ficha destacada a doble ancho).
   ≥55% blanco; ink como puntuación (banda mayoreo + footer).

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     01 Hero              Vitrina    · Dossier + hero fig   · Top-rule   · white · press-chunky
     02 Selector proyecto Almanaque  · Dossier + parrilla   · Index-tab  · paper · ink-flood
     03 ¿Qué es el tul?   Periódico  · DropCap              · Double     · paper · rule-draw
     04 Tipos de tul      Dossier    · NumberProtagonist    · Index-tab  · white · lift-orange
     05 Novia y XV años   Periódico  · Zigzag               · —          · white · lift-orange
     06 Tutús y ballet    Periódico  · Zigzag rev           · Double     · paper · lift-orange
     07 Decoración        Galería    · hscroll + banner     · —          · white · lift-orange
     08 Acabados          Vitrina    · Band (media+texto)   · Double     · cream · press-chunky
     09 Capas ligeras     Vitrina    · Ribbon enlazable     · —          · white · lift-orange
     10 Comparativa       Almanaque  · IndexRow + tabla     · Double     · paper · ink-flood
     11 Características   Técnico    · LabelLateral + icons · Side-rule  · white · —
     12 Precio por rollo  Almanaque  · RunIn + picks        · —          · white · side-shift
     13 Mayoreo           Manifiesto · MegaTextBg           · Bleed      · INK   · press-chunky
     14 Tul por rollo     Galería    · RunIn + gcards       · Full-frame · cream · lift-orange
     15 FAQ               Dossier    · RunIn + acordeón     · Top-rule   · white · side-shift
   ========================================================================= */

/* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */
.tul-page,
.tul-section {
    --tul-ink:          var(--ax-ink, #1F2530);
    --tul-paper:        var(--ax-paper, #FAF6EE);
    --tul-cream:        var(--ax-cream, #F2EDE4);
    --tul-white:        var(--ax-white, #FFFFFF);
    --tul-orange:       var(--ax-orange, #F15A29);
    --tul-orange-deep:  var(--ax-orange-deep, #B0401A);
    --tul-purple:       var(--ax-purple, #6A52A2);
    --tul-yellow:       var(--ax-yellow, #FFEB3B);
    --tul-muted:        var(--ax-muted, #6E6A60);
    --tul-muted-dark:   var(--ax-muted-dark, #A8A39A);
    --tul-rule:         rgba(31, 37, 48, 0.16);
    --tul-rule-on-dark: rgba(250, 246, 238, 0.18);
    --tul-whatsapp:     var(--ax-whatsapp, #25D366);
    --tul-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --tul-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --tul-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --tul-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    --tul-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --tul-motion-fast:  0.16s;
}

/* Envuelve solo las secciones rediseñadas (NO el slide/breadcrumb legacy).
   overflow-x:clip contiene sombras offset y mega-text sin romper el sticky. */
.tul-page { overflow-x: clip; }
.tul-page *,
.tul-page *::before,
.tul-page *::after { box-sizing: border-box; }

/* Anclas del selector de uso por debajo del header fixed (113/104/158px) */
.tul-section[id] { scroll-margin-top: 116px; }
@media (max-width: 991px) { .tul-section[id] { scroll-margin-top: 108px; } }
@media (max-width: 767px) { .tul-section[id] { scroll-margin-top: 162px; } }

/* ─── Section base ──────────────────────────────────────────────────────── */
.tul-section {
    width: 100%;
    position: relative;
    background: var(--tul-white);
    color: var(--tul-ink);
    font-family: var(--tul-font-body);
    padding: clamp(48px, 8vw, 96px) 0;
}
.tul-section--paper { background: var(--tul-paper); }
.tul-section--cream { background: var(--tul-cream); color: var(--tul-ink); }
.tul-section--tight { padding: clamp(26px, 4vw, 44px) 0; }
.tul-section--snug  { padding: clamp(38px, 6vw, 68px) 0; }

.tul-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.tul-container--narrow { max-width: 780px; }

/* ─── Marcos de Section (§8.3) ─────────────────────────────────────────── */
.tul-section--top-rule    { border-top: 2px solid var(--tul-orange); }
.tul-section--double-rule {
    border-top: 1px solid var(--tul-rule);
    border-bottom: 1px solid var(--tul-rule);
}
.tul-section--side-rule {
    border-left: 3px solid var(--tul-orange);
}
.tul-section--side-rule > .tul-container { padding-left: clamp(20px, 4vw, 44px); }

/* Index-tab (pestaña de archivador) */
.tul-section--index-tab { border-top: 2px solid var(--tul-ink); }
.tul-tab {
    position: absolute;
    top: 0;
    /* Alineada con el borde de texto del .tul-container (max-width 1600px
       centrado + su padding), no con el borde de la viewport. */
    left: calc(max(0px, (100% - 1600px) / 2) + clamp(20px, 4vw, 48px));
    transform: translateY(-100%);
    background: var(--tul-ink);
    color: var(--tul-paper);
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    z-index: 2;
    white-space: nowrap;
}

/* Full-frame (máx 1 por página — sección de económicas) */
.tul-section--full-frame {
    border: 2px solid var(--tul-ink);
    margin: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 32px);
    width: auto;
}

/* ─── Eyebrow stamp (rectángulo recto — firma editorial, radius 0) ──────── */
.tul-eyebrow {
    font-family: var(--tul-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--tul-muted);
    line-height: 1.4;
    margin: 0 0 clamp(16px, 2vw, 22px);
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.tul-eyebrow[data-stamp]:not([data-stamp=""])::before {
    content: attr(data-stamp);
    font-family: var(--tul-font-display);
    font-style: normal;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    line-height: 1;
    border: 1px solid var(--tul-orange-deep);
    color: var(--tul-orange-deep);   /* AA 5.84:1 sobre blanco — orange puro da 3.37:1 */
    flex-shrink: 0;
}
/* Variante purple — señal "mayoreo / producción" */
.tul-eyebrow--mayoreo[data-stamp]:not([data-stamp=""])::before {
    border-color: var(--tul-purple);
    color: var(--tul-purple);
}

/* Cabecera de sección sin apertura propia (solo eyebrow + título) */
.tul-arthead { margin-bottom: clamp(18px, 2.6vw, 26px); }

/* ─── Display title Anton + <em> Fraunces (N-04/N-05) ──────────────────── */
.tul-title {
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tul-ink);
    line-height: 0.92;
    letter-spacing: -0.005em;
    margin: 0;
}
.tul-title--xl { font-size: clamp(2.5rem, 7.2vw, 5.5rem) !important; }
.tul-title--lg { font-size: clamp(2.1rem, 5.4vw, 4.1rem) !important; }
.tul-title--md { font-size: clamp(1.85rem, 4.2vw, 3.2rem) !important; }
.tul-title--sm { font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important; }
.tul-title em {
    font-family: var(--tul-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--tul-orange);
}
.tul-title a { color: inherit; text-decoration: none; transition: color var(--tul-motion-fast) var(--tul-ease); }
.tul-title a:hover { color: var(--tul-orange); }

/* ─── Lead / prosa ──────────────────────────────────────────────────────── */
.tul-lead {
    font-family: var(--tul-font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.65;
    color: var(--tul-ink);
    max-width: 66ch;
    margin: 0;
}
.tul-lead + .tul-lead { margin-top: clamp(12px, 1.8vw, 18px); }
.tul-lead strong { font-weight: 800; }
.tul-lead a {
    color: var(--tul-ink);
    text-decoration: underline;
    text-decoration-color: var(--tul-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
.tul-lead a:hover { color: var(--tul-orange-deep); }

.tul-prose { max-width: 74ch; }
.tul-prose--gap { margin-top: clamp(14px, 2vw, 20px); }
.tul-prose p {
    font-family: var(--tul-font-body);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
    color: var(--tul-ink);
    margin: 0 0 1.1em;
}
.tul-prose p:last-child { margin-bottom: 0; }
.tul-prose strong { font-weight: 800; }
.tul-prose a {
    color: var(--tul-ink);
    text-decoration: underline;
    text-decoration-color: var(--tul-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: text-underline-offset var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-prose a:hover { color: var(--tul-orange-deep); text-underline-offset: 4px; }

/* ─── Puente al cotizador dentro del hero ───────────────────────────────
   Para el visitante que llega sin saber el nombre del tejido: la página se
   navega por uso, pero muchos solo saben QUÉ van a fabricar. Va antes de la
   barra de garantías —primero resolvemos la duda, luego los datos
   comerciales— y baja al formulario del cotizador (#tul-mayoreo).
   Marco Side-rule purple + hover side-shift: no compite con el CTA ink ni
   con el verde WhatsApp que quedan justo debajo. */
.tul-hbanner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(13px, 1.7vw, 19px);
    margin: clamp(26px, 3.4vw, 36px) 0 0;
    padding: clamp(13px, 1.8vw, 18px) clamp(15px, 2vw, 21px);
    background: var(--tul-cream);
    border: 2px solid var(--tul-ink);
    border-left: 6px solid var(--tul-purple);
    box-shadow: 5px 5px 0 var(--tul-ink);
    color: var(--tul-ink);
    text-decoration: none;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                background-color var(--tul-motion-fast) var(--tul-ease);
}
.tul-hbanner:hover,
.tul-hbanner:focus-visible {
    transform: translateX(5px);
    box-shadow: 5px 5px 0 var(--tul-purple);
    background: var(--tul-white);
    color: var(--tul-ink);
    text-decoration: none;
}
.tul-hbanner:focus-visible { outline-color: var(--tul-purple); }

.tul-hbanner__icon {
    display: grid;
    place-items: center;
    width: clamp(42px, 5vw, 50px);
    height: clamp(42px, 5vw, 50px);
    background: var(--tul-purple);
    color: var(--tul-white);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1;
}

.tul-hbanner__body { min-width: 0; }
.tul-hbanner__lbl {
    display: block;
    text-wrap: balance;
    font-family: var(--tul-font-display);
    font-weight: 400;
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    letter-spacing: 0.015em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--tul-ink);
}
.tul-hbanner__txt {
    display: block;
    margin-top: 5px;
    font-family: var(--tul-font-body);
    font-size: clamp(0.94rem, 1.1vw, 1.02rem);
    line-height: 1.55;
    color: var(--tul-ink);
}
.tul-hbanner__txt strong { font-weight: 800; }

.tul-hbanner__cue {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--tul-font-display);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--tul-purple);
    white-space: nowrap;
}
.tul-hbanner__cue i { transition: transform var(--tul-motion-fast) var(--tul-ease); }
.tul-hbanner:hover .tul-hbanner__cue i,
.tul-hbanner:focus-visible .tul-hbanner__cue i { transform: translateY(3px); }

/* Móvil: el cue baja a su propia línea, separado por hairline, para que el
   texto no se estrangule entre el ícono y la flecha. */
@media (max-width: 640px) {
    .tul-hbanner {
        grid-template-columns: auto 1fr;
        row-gap: clamp(11px, 2.2vw, 14px);
    }
    .tul-hbanner__cue {
        grid-column: 1 / -1;
        justify-content: space-between;
        padding-top: clamp(10px, 2vw, 12px);
        border-top: 1px solid var(--tul-rule);
    }
}

/* Barra de garantías del hero (compra por rollo · envíos · factura) */
/* Barra de garantías del hero — Compra por rollo · Envíos · Factura.
   Es el dato que el cliente busca de un vistazo, así que va como tres fichas
   con el mismo lenguaje de las cards (borde ink 2px, top-rule orange, sombra
   sólida) en lugar de una línea de texto pequeño. */
.tul-meta {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: clamp(10px, 1.3vw, 14px);
    margin: clamp(26px, 3.4vw, 36px) 0 0;
    padding: 0;
}
.tul-meta li {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 13px);
    min-height: 74px;
    padding: clamp(13px, 1.7vw, 17px) clamp(12px, 1.5vw, 16px);
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 4px 4px 0 var(--tul-ink);
    font-family: var(--tul-font-display);
    font-weight: 400;
    font-size: clamp(0.86rem, 1.05vw, 1.02rem);
    letter-spacing: 0.015em;
    text-transform: uppercase;
    line-height: 1.08;
    color: var(--tul-ink);
}
.tul-meta li i {
    flex: 0 0 auto;
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    line-height: 1;
    color: var(--tul-orange);
}
/* En móvil el auto-fit dejaba 2+1 con una ficha huérfana: mejor apiladas,
   cada una en una línea. */
@media (max-width: 560px) {
    .tul-meta { grid-template-columns: 1fr; }
    .tul-meta li { min-height: 62px; }
}

/* ─── Acciones + CTA WhatsApp chunky (press-chunky · radius 0) ─────────── */
.tul-actions {
    margin-top: clamp(24px, 3.6vw, 34px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.tul-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    min-height: 48px;
    font-family: var(--tul-font-display);
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    text-decoration: none;
    border: 2px solid var(--tul-ink);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-cta--whatsapp {
    background: var(--tul-whatsapp);
    color: #fff;
    box-shadow: 8px 8px 0 var(--tul-ink);
}
.tul-cta--whatsapp i { font-size: 1.3em; line-height: 1; }
.tul-cta--whatsapp:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--tul-ink);
    color: #fff;
    text-decoration: none;
}
.tul-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tul-ink); }
.tul-cta--ink {
    background: var(--tul-ink);
    color: var(--tul-paper);
    box-shadow: 8px 8px 0 var(--tul-orange);
}
.tul-cta--ink:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--tul-orange);
    color: var(--tul-paper);
    text-decoration: none;
}
.tul-cta--ink:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tul-orange); }
/* Variante verde del CTA de hero que baja al cotizador (no abre WhatsApp
   directo, pero el formulario termina ahí). Texto en ink: blanco sobre el
   verde da 1.98:1. */
.tul-cta--quote {
    background: var(--tul-whatsapp);
    color: var(--tul-ink);
    box-shadow: 8px 8px 0 var(--tul-ink);
}
.tul-cta--quote:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--tul-ink);
    color: var(--tul-ink);
    text-decoration: none;
}
.tul-cta--quote:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tul-ink); }
.tul-cta--quote i { font-size: 1.15em; line-height: 1; }

.tul-cta--sm { padding: 12px 22px; font-size: clamp(0.95rem, 1.3vw, 1.1rem); box-shadow: 6px 6px 0 var(--tul-ink); }
.tul-cta--sm:hover  { box-shadow: 8px 8px 0 var(--tul-ink); }
.tul-cta--sm:active { box-shadow: 3px 3px 0 var(--tul-ink); }
.tul-cta:focus-visible { outline: 3px solid var(--tul-orange); outline-offset: 3px; }

/* ─── Botón (navegación a otra TSG / ver producto) ──────────────────────── */
.tul-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 13px 24px;
    min-height: 44px;
    font-family: var(--tul-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 2px solid var(--tul-ink);
    border-radius: 0;
    cursor: pointer;
    color: var(--tul-ink);
    background: transparent;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-btn i { transition: transform var(--tul-motion-fast) var(--tul-ease); }
.tul-btn--outline:hover { background: var(--tul-ink); color: var(--tul-white); text-decoration: none; }
.tul-btn--outline:hover i { transform: translateX(4px); }
.tul-btn--solid {
    background: var(--tul-orange);
    color: #fff;
    border-color: var(--tul-ink);
    box-shadow: 0 6px 0 var(--tul-orange-deep);
}
.tul-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--tul-orange-deep); color: #fff; text-decoration: none; }
.tul-btn--solid:hover i { transform: translateX(4px); }
.tul-btn--solid:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--tul-orange-deep); }
/* Botón "Cotiza ahora": se repite al cierre de cada sección y baja al
   formulario, que termina abriendo WhatsApp — de ahí el verde. Texto en ink,
   no en blanco: blanco sobre el verde de WhatsApp da 1.98:1 y falla AA;
   ink da 7.75:1. */
.tul-btn--quote {
    background: var(--tul-whatsapp);
    color: var(--tul-ink);
    border-color: var(--tul-ink);
    box-shadow: 0 5px 0 #128C4B;
}
.tul-btn--quote:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #128C4B;
    color: var(--tul-ink);
    text-decoration: none;
}
.tul-btn--quote:active { transform: translateY(2px); box-shadow: 0 2px 0 #128C4B; }
.tul-btn--quote i { color: var(--tul-ink); }
.tul-btn--quote:hover i { transform: none; }

.tul-btn:focus-visible { outline: 3px solid var(--tul-orange); outline-offset: 3px; }

/* ─── Figura editorial (frame-chunky · radius 0) ───────────────────────── */
.tul-figure {
    margin: 0;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 10px 10px 0 var(--tul-ink);
    line-height: 0;
}
.tul-figure img { display: block; width: 100%; height: auto; }
/* Los usos-*.jpg del tul miden ~480px de ancho nativo; con el
   container al 95% la columna los estiraba ~1.4× y se veían pixelados. */
.tul-zz__media,
.tul-band__media { max-width: 660px; margin-inline: auto; }
.tul-figure--link { display: block; transition: transform var(--tul-motion-fast) var(--tul-ease), box-shadow var(--tul-motion-fast) var(--tul-ease); }
.tul-figure--link:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--tul-orange); }
/* Banner ancho de sección (par de slide 1900×400 / 700×500): la figura no
   recorta, deja que cada variante mande su propia proporción. */
.tul-banner {
    margin-top: clamp(26px, 3.4vw, 38px);
}
.tul-banner img { width: 100%; height: auto; }

.tul-figcaption {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--tul-muted);
    margin: clamp(10px, 1.6vw, 14px) 0 0;
}

/* =========================================================================
   01 · Hero — Vitrina · Dossier + figura · Top-rule · white
   ========================================================================= */
.tul-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}
.tul-hero__text { min-width: 0; }
.tul-hero__side { min-width: 0; }
.tul-hero__media { min-width: 0; margin: 0; }
@media (max-width: 900px) {
    .tul-hero { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); }
    /* El aside se disuelve para poder reordenar: figura arriba del texto y
       el botón de compartir al final de todo el hero. */
    .tul-hero__side { display: contents; }
    .tul-hero__media { order: -1; }
    .tul-hero__side .tul-share { order: 1; margin: 0; margin-inline: 0; }
}
.tul-hero__head { margin-bottom: clamp(18px, 2.4vw, 26px); }

/* El slide legacy es clicable y baja al índice de usos (sección 02). El <a>
   va dentro de .slider-nav para no alterar el selector del chrome legacy. */
.tul-slide-link { display: block; line-height: 0; }
.tul-slide-link:focus-visible { outline: 3px solid var(--tul-orange); outline-offset: -3px; }


/* Botón compartir discreto (abre el modal legacy de Bootstrap) */
.tul-share {
    margin-top: clamp(18px, 2.4vw, 24px);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 8px 0;
    background: none;
    border: 0;
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tul-muted);
    cursor: pointer;
    background-image: linear-gradient(var(--tul-orange) 0 0);
    background-repeat: no-repeat;
    background-position: left bottom 6px;
    background-size: 0% 2px;
    transition: background-size var(--tul-motion-fast) var(--tul-ease), color var(--tul-motion-fast) var(--tul-ease);
}
.tul-share:hover, .tul-share:focus-visible { background-size: 100% 2px; color: var(--tul-ink); }
/* En el hero vive sobre la figura, alineado al borde derecho del marco:
   display:flex (nivel de bloque) + max-content para que el margin-left:auto
   empuje; en inline-flex el margen auto no tendría efecto. */
.tul-hero__side .tul-share {
    display: flex;
    max-width: max-content;
    margin: 0 0 clamp(8px, 1.2vw, 12px) auto;
    padding-bottom: 0;
    background-position: left bottom 2px;
}

/* =========================================================================
   02 · Selector de uso — FIRMA de la página
   Índice de archivador: 10 fichas que anclan a cada sección de uso.
   Mobile-first: 2 columnas en móvil, hasta 5 en desktop. Hover side-shift.
   ========================================================================= */
.tul-usebar__head {
    display: flex;
    align-items: baseline;
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: clamp(6px, 1.2vw, 10px);
}
.tul-usebar__leader {
    flex: 1;
    min-width: 24px;
    border-bottom: 2px dotted var(--tul-rule);
    transform: translateY(-0.25em);
}
.tul-usebar__tally {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tul-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.tul-usebar__note {
    font-family: var(--tul-font-body);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    color: var(--tul-muted);
    max-width: 62ch;
    margin: 0 0 clamp(22px, 3vw, 30px);
}
@media (max-width: 560px) {
    .tul-usebar__head { flex-wrap: wrap; }
    .tul-usebar__leader { display: none; }
    .tul-usebar__tally { flex-basis: 100%; }
}

/* Tabla-índice sin gaps: hairlines compartidas (mismo tratamiento que la
   parrilla de familias de /nosotros, .nx-fabrics). Registro Almanaque,
   hover ink-flood. 12 celdas = 11 usos + acceso al catálogo, así la
   parrilla cierra exacta a 4, 3 y 2 columnas. */
.tul-usegrid {
    list-style: none;
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--tul-ink);
    border-left: 1px solid var(--tul-ink);
}
@media (max-width: 640px) { .tul-usegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El <li> es el grid-item; el <a> lo rellena para que las hairlines y el
   ink-flood cubran toda la celda. */
.tul-usegrid > li { display: flex; min-width: 0; }

.tul-usechip {
    flex: 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(12px, 1.8vw, 18px);
    min-height: 148px;
    padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2.5vw, 28px);
    background: var(--tul-ink);
    border-right: 1px solid var(--tul-ink);
    border-bottom: 1px solid var(--tul-ink);
    color: var(--tul-paper);
    text-decoration: none;
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
/* Foto del uso: la pasa el Blade como --tul-usechip-img (con cache-buster).
   Va en un pseudo para poder hacerle zoom en hover sin mover el texto. */
.tul-usechip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--tul-usechip-img, none) center / cover no-repeat;
    transition: transform 0.5s var(--tul-ease),
                filter 0.35s var(--tul-ease);
}
/* Velo de tinta: garantiza AA del nombre sobre cualquier foto y deja la
   esquina inferior (donde vive el título) más oscura que la superior. */
.tul-usechip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Degradado fijo; lo que se anima es la opacidad (los gradientes no
       transicionan). Reposo 0.3 ≈ 16%→28% de tinta: la foto se ve casi
       limpia; la legibilidad del nombre la sostiene su text-shadow. */
    background: linear-gradient(180deg, rgba(31, 37, 48, 0.55) 0%, rgba(31, 37, 48, 0.92) 100%);
    opacity: 0.3;
    transition: opacity 0.35s var(--tul-ease);
}
.tul-usechip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tul-usechip__num {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    color: var(--tul-paper);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
/* Flecha: única señal de que la ficha baja a una sección de esta misma
   página en lugar de navegar fuera. */
.tul-usechip__cue {
    font-size: 0.8rem;
    color: var(--tul-paper);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-usechip__name {
    color: inherit;
    transition: color var(--tul-motion-fast) var(--tul-ease);
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem);
    line-height: 1.05;
    letter-spacing: 0.005em;
    margin: 0;
    text-shadow: 0 1px 2px rgba(31, 37, 48, 0.7), 0 0 12px rgba(31, 37, 48, 0.55);
}
.tul-usechip:hover,
.tul-usechip:focus-visible {
    color: var(--tul-white);
    text-decoration: none;
}
.tul-usechip:hover::before,
.tul-usechip:focus-visible::before { transform: scale(1.06); }
/* Hover: el velo se aclara (la ficha activa "se enciende" frente al resto),
   el nombre pasa a naranja y la sombra del texto sube para sostener la
   legibilidad sobre la foto más visible. */
.tul-usechip:hover::after,
.tul-usechip:focus-visible::after { opacity: 0.3; }
/* Las fichas hermanas se apagan mientras hay una activa (hover o foco en la
   parrilla): el velo sube y la foto se desatura, para que la encendida resalte. */
.tul-usegrid:has(.tul-usechip:hover, .tul-usechip:focus-visible) .tul-usechip:not(:hover, :focus-visible)::after { opacity: 1; }
.tul-usegrid:has(.tul-usechip:hover, .tul-usechip:focus-visible) .tul-usechip:not(:hover, :focus-visible)::before {
    filter: saturate(0.6);
}
.tul-usechip:hover .tul-usechip__name,
.tul-usechip:focus-visible .tul-usechip__name {
    color: var(--tul-orange);
    text-shadow: 0 1px 2px rgba(31, 37, 48, 0.7), 0 0 12px rgba(31, 37, 48, 0.55);
}
.tul-usechip:hover .tul-usechip__num,
.tul-usechip:focus-visible .tul-usechip__num { color: var(--tul-orange); opacity: 1; }
.tul-usechip:hover .tul-usechip__cue,
.tul-usechip:focus-visible .tul-usechip__cue { color: var(--tul-orange); transform: translateY(3px); }

/* Última celda: acceso al catálogo (no es un ancla, no lleva flecha abajo).
   Sin foto: fondo neutro de tela y texto en tinta, como remate de la parrilla. */
.tul-usechip--all { background: var(--tul-ink); color: var(--tul-paper); transition: background var(--tul-motion-fast) var(--tul-ease), color var(--tul-motion-fast) var(--tul-ease); }
.tul-usechip--all::before,
.tul-usechip--all::after { display: none; }
.tul-usechip--all .tul-usechip__num { color: var(--tul-paper); opacity: 0.85; }
.tul-usechip--all .tul-usechip__cue { display: none; }
.tul-usechip--all .tul-usechip__name { text-shadow: none; }
.tul-usechip--all:hover,
.tul-usechip--all:focus-visible { background: var(--tul-white); color: var(--tul-ink); }
.tul-usechip--all:hover .tul-usechip__name,
.tul-usechip--all:focus-visible .tul-usechip__name { color: var(--tul-ink); text-shadow: none; }
/* Etiqueta más larga que un nombre de uso: baja un punto para que quepa
   en la celda de 2 columnas del móvil. */
.tul-usechip--all .tul-usechip__name { font-size: clamp(1.1rem, 1.7vw, 1.45rem); }

/* =========================================================================
   Composiciones: Zigzag · Split · Band
   ========================================================================= */
.tul-zz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}
.tul-zz__text  { min-width: 0; }
.tul-zz__media { min-width: 0; order: 2; margin: 0; }
.tul-zz--rev .tul-zz__text  { order: 2; }
.tul-zz--rev .tul-zz__media { order: 1; }
.tul-zz__text .tul-title   { margin-bottom: clamp(16px, 2vw, 22px); }
.tul-zz__text .tul-prose   { max-width: 58ch; }
@media (max-width: 860px) {
    .tul-zz { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); }
    .tul-zz__media, .tul-zz--rev .tul-zz__media,
    .tul-zz__text,  .tul-zz--rev .tul-zz__text { order: 0; }
}

/* Band — media compacta + texto (más apretado que el zigzag) */
.tul-band {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.tul-band__media { margin: 0; min-width: 0; }
.tul-band__text  { min-width: 0; }
@media (max-width: 860px) {
    .tul-band { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 30px); }
}

/* =========================================================================
   Productos destacados — mini-fichas con miniatura (más peso que un chip)
   Fila horizontal: thumb cuadrada + nombre + composición. Hover ink-flood,
   coherente con la parrilla del selector.
   ========================================================================= */
.tul-featured {
    margin: clamp(24px, 3vw, 32px) 0 0;
    padding: clamp(18px, 2.4vw, 24px) 0 0;
    border-top: 2px solid var(--tul-ink);
}
/* Mismo tamaño que la etiqueta de "otros tejidos": a 0.68rem se perdía. */
.tul-featured__lbl {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--tul-font-mono);
    font-size: clamp(0.86rem, 1.1vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tul-ink);
    margin: 0 0 clamp(16px, 2vw, 20px);
}
.tul-featured__lbl::before {
    content: "";
    width: 12px; height: 12px;
    background: var(--tul-orange);
    flex-shrink: 0;
}
.tul-featured__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: clamp(10px, 1.4vw, 14px);
}
.tul-feat {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    box-shadow: 4px 4px 0 var(--tul-ink);
    text-decoration: none;
    color: var(--tul-ink);
    overflow: hidden;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
/* Miniatura completa arriba: los abanicos de tela se recortaban a una tira
   vertical en el formato horizontal y no se leía el tejido. */
.tul-feat__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--tul-cream);
    border-bottom: 2px solid var(--tul-ink);
    overflow: hidden;
    line-height: 0;
}
.tul-feat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s var(--tul-ease);
}
.tul-feat__body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    padding: clamp(11px, 1.5vw, 14px) clamp(12px, 1.6vw, 15px);
}
.tul-feat__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tul-feat__name {
    font-family: var(--tul-font-body);
    font-weight: 800;
    font-size: clamp(0.92rem, 1.15vw, 1.02rem);
    line-height: 1.25;
}
.tul-feat__note {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tul-muted);
    line-height: 1.35;
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
.tul-feat__cue {
    flex: 0 0 auto;
    font-size: 0.9rem;
    color: var(--tul-muted);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-feat:hover,
.tul-feat:focus-visible {
    background: var(--tul-ink);
    color: var(--tul-paper);
    text-decoration: none;
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--tul-orange);
}
.tul-feat:hover .tul-feat__note,
.tul-feat:focus-visible .tul-feat__note { color: var(--tul-muted-dark); }
.tul-feat:hover .tul-feat__cue,
.tul-feat:focus-visible .tul-feat__cue { color: var(--tul-orange); transform: translateX(3px); }
.tul-feat:hover .tul-feat__media img,
.tul-feat:focus-visible .tul-feat__media img { transform: scale(1.07); }

/* =========================================================================
   05 · Galería de vestidos / 12 · brick — tarjetas foto con pie
   ========================================================================= */
.tul-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 22px);
    margin-top: clamp(24px, 3vw, 34px);
}
/* Los cinco tipos de tul caben en una sola fila: partirlos en 4+1 dejaba una
   ficha huérfana y rompía la lectura de catálogo. */
.tul-gallery--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1240px) { .tul-gallery--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .tul-gallery--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .tul-gallery--5 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .tul-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tul-gallery { grid-template-columns: 1fr; } }

.tul-gcard {
    position: relative;
    display: block;
    line-height: 0;
    background: var(--tul-cream);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 6px 6px 0 var(--tul-ink);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-gcard:hover,
.tul-gcard:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 var(--tul-orange);
    text-decoration: none;
}
.tul-gcard__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.tul-gcard__img img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    /* Las miniaturas del catálogo son cuadradas y traen el nombre impreso en
       la franja inferior: anclando arriba, el recorte 4:3 la deja fuera y no
       choca con el pie superpuesto de la tarjeta. */
    object-position: top;
    transition: transform 0.45s var(--tul-ease);
}
.tul-gcard:hover .tul-gcard__img img,
.tul-gcard:focus-visible .tul-gcard__img img { transform: scale(1.05); }
/* El pie ES el nombre de la tela (el recorte deja fuera el rótulo impreso),
   así que va en Anton y a tamaño de titular: a 0.82rem no se leía. */
.tul-gcard__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(34px, 5vw, 52px) clamp(13px, 2vw, 18px) clamp(12px, 1.8vw, 16px);
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.08rem, 1.6vw, 1.4rem);
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: #fff;
    background: linear-gradient(to top,
        rgba(31, 37, 48, 0.96) 0%,
        rgba(31, 37, 48, 0.82) 45%,
        rgba(31, 37, 48, 0) 100%);
}
.tul-gcard__cap small {
    display: block;
    font-family: var(--tul-font-mono);
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 6px;
}

/* =========================================================================
   06 · Scroll horizontal de tejidos para decoración (composición disruptiva)
   ========================================================================= */
.tul-hscroll {
    display: flex;
    gap: clamp(14px, 2vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px clamp(18px, 2.4vw, 24px);
    margin: clamp(24px, 3vw, 34px) -4px 0;
    scrollbar-width: thin;
}
.tul-hscroll > * {
    flex: 0 0 clamp(210px, 30vw, 268px);
    scroll-snap-align: start;
}
.tul-hscroll::-webkit-scrollbar { height: 8px; }
.tul-hscroll::-webkit-scrollbar-track { background: var(--tul-rule); }
.tul-hscroll::-webkit-scrollbar-thumb { background: var(--tul-ink); }
/* Pista de uso del carrusel: es una instrucción, no un pie decorativo —
   a 0.68rem en muted pasaba desapercibida y el usuario no descubría que
   quedaban tejidos fuera de pantalla. */
.tul-hscroll__hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--tul-font-mono);
    font-size: clamp(0.86rem, 1.1vw, 1rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tul-ink);
    margin: clamp(6px, 1vw, 10px) 0 0;
}
.tul-hscroll__hint i {
    color: var(--tul-orange-deep);
    font-size: 1.05em;
    line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes tul-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }
    .tul-hscroll__hint i { animation: tul-nudge 1.8s var(--tul-ease) infinite; }
}

/* =========================================================================
   11 · Ribbon (forro) — strip enlazable con miniatura
   ========================================================================= */
.tul-ribbon {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 3vw, 30px);
    background: var(--tul-ink);
    color: var(--tul-paper);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 8px 8px 0 var(--tul-orange);
    padding: clamp(16px, 2.4vw, 24px) clamp(18px, 3vw, 30px);
    text-decoration: none;
    overflow: hidden;
    margin-top: clamp(26px, 3.4vw, 36px);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-ribbon:hover,
.tul-ribbon:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 var(--tul-orange);
    text-decoration: none;
    color: var(--tul-paper);
}
.tul-ribbon__media {
    flex-shrink: 0;
    /* Con el container al 95% el cintillo es muy ancho y la miniatura de
       160px quedaba perdida: proporción fija y ancho generoso. */
    width: clamp(160px, 24vw, 340px);
    aspect-ratio: 4 / 3;
    align-self: center;
    border: 2px solid var(--tul-paper);
    background: var(--tul-cream);
    overflow: hidden;
    line-height: 0;
}
.tul-ribbon__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--tul-ease); }
.tul-ribbon:hover .tul-ribbon__media img { transform: scale(1.05); }
.tul-ribbon__body { display: block; min-width: 0; }
.tul-ribbon__kicker {
    display: block;
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tul-muted-dark);
    margin: 0 0 6px;
}
.tul-ribbon__title {
    display: block;
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    line-height: 1;
    color: var(--tul-paper);
    margin: 0 0 8px;
}
.tul-ribbon__title em { display: inline;
    font-family: var(--tul-font-accent); font-style: italic;
    text-transform: lowercase; color: var(--tul-orange); letter-spacing: -0.025em;
}
.tul-ribbon__desc {
    display: block;
    font-family: var(--tul-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(250, 246, 238, 0.82);
    margin: 0;
    max-width: 72ch;
}
.tul-ribbon__cue {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--tul-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tul-orange);
    white-space: nowrap;
}
.tul-ribbon__cue i { transition: transform var(--tul-motion-fast) var(--tul-ease); }
.tul-ribbon:hover .tul-ribbon__cue i { transform: translateX(4px); }
@media (max-width: 760px) {
    .tul-ribbon { grid-template-columns: 1fr; gap: 16px; }
    .tul-ribbon__media { width: 100%; }   /* el aspect-ratio 4:3 ya fija el alto */
    .tul-ribbon__cue { justify-content: flex-start; }
}

/* =========================================================================
   10 · Nota de precisión (Técnico · LabelLateral) — sub-bloque cream/white
   ========================================================================= */
.tul-lateral {
    display: grid;
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
}
.tul-lateral__rail {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tul-muted);
    line-height: 1.5;
    padding-top: 0.5em;
    border-top: 2px solid var(--tul-ink);
}
.tul-lateral__body { min-width: 0; }
@media (max-width: 820px) {
    .tul-lateral { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 20px); }
}

.tul-note {
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    border-left: 5px solid var(--tul-purple);
    box-shadow: 5px 5px 0 var(--tul-ink);
    padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
    margin-top: clamp(22px, 3vw, 30px);
}
.tul-note__lbl {
    display: inline-block;
    font-family: var(--tul-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tul-purple);
    border: 1px solid var(--tul-purple);
    padding: 3px 8px;
    line-height: 1;
    margin-bottom: clamp(10px, 1.4vw, 12px);
}
.tul-note p {
    font-family: var(--tul-font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--tul-ink);
    margin: 0;
}
.tul-note p + p { margin-top: 0.8em; }
.tul-note strong { font-weight: 800; }
.tul-note a {
    color: var(--tul-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tul-purple);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.tul-note a:hover { color: var(--tul-purple); }

/* =========================================================================
   04 · Tipos de tul — fichas con datos comerciales
   ========================================================================= */
.tul-numhead {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    align-items: end;
    margin-bottom: clamp(20px, 3vw, 30px);
    padding-bottom: clamp(14px, 2vw, 20px);
    border-bottom: 2px solid var(--tul-ink);
}
@media (min-width: 760px) {
    .tul-numhead { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
}
.tul-numhead__num {
    font-family: var(--tul-font-display);
    font-size: clamp(3.6rem, 11vw, 8rem);
    line-height: 0.78;
    letter-spacing: -0.04em;
    color: var(--tul-orange);
    font-variant-numeric: tabular-nums;
    display: block;
}
.tul-numhead__num small {
    display: block;
    font-family: var(--tul-font-accent);
    font-style: italic;
    font-size: 0.19em;
    letter-spacing: 0;
    color: var(--tul-muted);
    text-transform: lowercase;
    margin-top: 0.25em;
}
.tul-numhead__body { min-width: 0; }

.tul-catgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
    margin-top: clamp(24px, 3vw, 34px);
}
@media (max-width: 940px) { .tul-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tul-catgrid { grid-template-columns: 1fr; } }

.tul-catcard {
    display: flex;
    flex-direction: column;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 6px 6px 0 var(--tul-ink);
    overflow: hidden;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-catcard:hover,
.tul-catcard:focus-within { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--tul-orange); }
.tul-catcard__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; line-height: 0; background: var(--tul-cream); }
.tul-catcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s var(--tul-ease); }
.tul-catcard:hover .tul-catcard__media img { transform: scale(1.05); }
.tul-catcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(16px, 2.2vw, 22px);
}
.tul-catcard__kicker {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tul-muted);
    margin: 0 0 6px;
    line-height: 1.4;
}
.tul-catcard__desc {
    font-family: var(--tul-font-body);
    font-size: clamp(0.95rem, 1.2vw, 1.02rem);
    line-height: 1.6;
    color: var(--tul-ink);
    margin: 0 0 clamp(14px, 2vw, 18px);
}
.tul-catcard__desc strong { font-weight: 800; }
.tul-catcard__title {
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.02;
    color: var(--tul-ink);
    margin: 0 0 clamp(12px, 1.6vw, 14px);
}
.tul-catcard__specs {
    margin: 0 0 clamp(14px, 2vw, 18px);
    padding: 0;
    border-top: 1px solid var(--tul-rule);
}
.tul-catcard__specs > div {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 7px 0;
    border-bottom: 1px solid var(--tul-rule);
}
.tul-catcard__specs dt {
    flex: 0 0 auto;
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tul-muted);
    font-weight: 400;
    margin: 0;
    min-width: 6.5em;
}
.tul-catcard__specs dd {
    margin: 0;
    flex: 1;
    font-family: var(--tul-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tul-ink);
}
.tul-catcard__foot { margin-top: auto; }

/* Ficha destacada: con cinco tipos, una parrilla de 3 columnas dejaba la
   segunda fila coja (2 de 3). El Tul 70 —el más buscado— ocupa dos
   columnas y la foto pasa a media horizontal, así ambas filas cierran. */
.tul-catcard--lead { grid-column: span 2; }
@media (min-width: 941px) {
    .tul-catcard--lead {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .tul-catcard--lead .tul-catcard__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
    .tul-catcard--lead .tul-catcard__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
    .tul-catcard--lead .tul-catcard__specs { margin-top: auto; }
}
@media (max-width: 600px) { .tul-catcard--lead { grid-column: auto; } }

/* =========================================================================
   15 · Mezclas — ledger de índice (Almanaque · dot-leader)
   ========================================================================= */
.tul-ledger {
    display: flex;
    flex-direction: column;
    margin-top: clamp(22px, 3vw, 32px);
    border-top: 2px solid var(--tul-ink);
}
.tul-ledger__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(14px, 2vw, 20px) clamp(10px, 1.6vw, 16px);
    border-bottom: 1px solid var(--tul-rule);
    text-decoration: none;
    color: var(--tul-ink);
    transition: background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-ledger__row:hover,
.tul-ledger__row:focus-visible {
    background: var(--tul-ink);
    color: var(--tul-paper);
    text-decoration: none;
}
.tul-ledger__media {
    flex: 0 0 auto;
    display: block;
    width: clamp(112px, 13vw, 168px);
    aspect-ratio: 4 / 3;
    background: var(--tul-cream);
    border: 1px solid var(--tul-ink);
    overflow: hidden;
    line-height: 0;
    align-self: center;
    margin-right: clamp(10px, 1.4vw, 14px);
}
.tul-ledger__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tul-ledger__row:hover .tul-ledger__media { border-color: var(--tul-paper); }

.tul-ledger__name {
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.05;
    flex: 0 0 auto;
    color: inherit;
}
.tul-ledger__row:hover .tul-ledger__name { color: var(--tul-paper); }
.tul-ledger__lead {
    flex: 1;
    min-width: 20px;
    border-bottom: 2px dotted var(--tul-rule);
}
.tul-ledger__row:hover .tul-ledger__lead { border-bottom-color: var(--tul-rule-on-dark); }
.tul-ledger__val {
    flex: 0 0 auto;
    font-family: var(--tul-font-mono);
    font-size: clamp(0.78rem, 1.2vw, 0.92rem);
    letter-spacing: 0.06em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tul-orange-deep);   /* AA 5.42:1 sobre paper */
    text-align: right;
}
.tul-ledger__cue {
    flex: 0 0 auto;
    color: var(--tul-muted);
    font-size: 0.95rem;
    margin-left: 0.4rem;
    transition: transform var(--tul-motion-fast) var(--tul-ease), color var(--tul-motion-fast) var(--tul-ease);
}
.tul-ledger__row:hover .tul-ledger__cue { color: var(--tul-orange); transform: translateX(4px); }
@media (max-width: 620px) {
    .tul-ledger__row { flex-wrap: wrap; }
    .tul-ledger__lead { display: none; }
    .tul-ledger__val { flex-basis: 100%; text-align: left; margin-top: 6px; }
}

/* =========================================================================
   16 · Mayoreo (INK · MegaTextBg · Manifiesto)
   ========================================================================= */
.tul-section--ink {
    background: var(--tul-ink);
    color: var(--tul-paper);
    overflow: hidden;
}
.tul-section--ink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(250, 246, 238, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(250, 246, 238, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.tul-section--ink > .tul-container { position: relative; z-index: 1; }
.tul-section--ink .tul-title { color: var(--tul-paper); }
.tul-section--ink .tul-eyebrow { color: rgba(250, 246, 238, 0.62); }
.tul-section--ink .tul-lead { color: rgba(250, 246, 238, 0.84); }
.tul-section--ink .tul-lead strong { color: var(--tul-paper); }
.tul-section--ink .tul-prose p { color: rgba(250, 246, 238, 0.84); }
.tul-section--ink .tul-prose strong { color: var(--tul-paper); }
.tul-section--ink .tul-cta--whatsapp { border-color: var(--tul-paper); box-shadow: 8px 8px 0 var(--tul-orange); }
.tul-section--ink .tul-cta--whatsapp:hover  { box-shadow: 11px 11px 0 var(--tul-orange); }
.tul-section--ink .tul-cta--whatsapp:active { box-shadow: 4px 4px 0 var(--tul-orange); }
.tul-section--ink .tul-btn--outline { color: var(--tul-paper); border-color: var(--tul-paper); }
/* El purple sobre ink cae a 2.45:1; sobre oscuro la señal de mayoreo va en
   yellow (único elemento yellow de la página). */
.tul-section--ink .tul-eyebrow--mayoreo[data-stamp]:not([data-stamp=""])::before {
    border-color: var(--tul-yellow);
    color: var(--tul-yellow);
}
.tul-section--ink .tul-btn--outline:hover { background: var(--tul-paper); color: var(--tul-ink); }

.tul-megahead {
    position: relative;
    isolation: isolate;
    /* El mega-text mide ~0.78em de alto: el padding debe dejarlo pasar o
       el eyebrow queda ilegible encima de la palabra de fondo. */
    padding-top: clamp(46px, 10vw, 118px);
    margin-bottom: clamp(18px, 2.6vw, 28px);
}
.tul-megahead__bg {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--tul-font-display);
    font-size: clamp(3.4rem, 14vw, 10rem);
    line-height: 0.78;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--tul-rule-on-dark);
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
}
.tul-megahead__fg { position: relative; max-width: 34ch; }

/* =========================================================================
   16b · Cotizador (FormCard §10.6) — vive dentro de la banda ink
   Card en paper sobre ink: el contraste lo separa del fondo sin
   necesitar otro color. Sin backend: arma el mensaje y abre WhatsApp.
   ========================================================================= */
.tul-quote {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 60px);
    align-items: start;
}
@media (min-width: 1040px) {
    .tul-quote { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.tul-quote__text { min-width: 0; }

.tul-form {
    position: relative;
    background: var(--tul-paper);
    color: var(--tul-ink);
    border: 2px solid var(--tul-ink);
    border-top: 4px solid var(--tul-orange);
    box-shadow: 12px 12px 0 var(--tul-orange);
    padding: clamp(22px, 3.2vw, 40px);
    min-width: 0;
}
/* Reset del reboot de Bootstrap dentro del formulario. `label` trae
   margin-bottom:.5rem y `legend` además font-size:1.5rem: por eso los
   campos cuya fila de etiqueta es un <label> (Tela, Cantidad de rollos)
   bajaban 8px respecto a los que usan <span> (Proyecto, Color) y las dos
   columnas quedaban desalineadas. :where() no aporta especificidad, así
   que las reglas propias de más abajo siguen mandando. */
.tul-form :where(label, legend) { margin-bottom: 0; }
.tul-form :where(legend) { font-size: inherit; line-height: inherit; }

.tul-form__head { margin-bottom: clamp(20px, 2.8vw, 30px); }
.tul-form__eyebrow {
    display: inline-block;
    font-family: var(--tul-font-display);
    background: var(--tul-orange);
    color: #fff;
    padding: 7px 13px 6px;
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 14px;
}
.tul-form__title {
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tul-ink);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 0.98;
    margin: 0 0 12px;
}
.tul-form__title em {
    font-family: var(--tul-font-accent); font-style: italic;
    text-transform: lowercase; color: var(--tul-orange-deep); letter-spacing: -0.02em;
}
.tul-form__lead {
    font-family: var(--tul-font-accent);
    font-style: italic;
    color: var(--tul-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    line-height: 1.5;
    margin: 0;
    max-width: 46ch;
}

/* ─── Selector de ruta del cotizador ────────────────────────────────────
   Primer paso del formulario: separa a quien ya sabe qué tejido quiere de
   quien solo sabe qué va a fabricar. Sin él, el campo "Tela" era un muro
   para el segundo grupo. Dos fichas grandes (no radios de línea) porque es
   la decisión que define el resto del formulario. */
.tul-modes {
    border: 0;
    padding: 0;
    margin: 0 0 clamp(20px, 2.8vw, 28px);
    min-width: 0;
}
.tul-modes__legend {
    float: left;              /* legend + display:flex del contenedor no se llevan */
    width: 100%;
    padding: 0;
    margin: 0 0 11px;
    font-family: var(--tul-font-display);
    text-transform: uppercase;
    color: var(--tul-ink);
    font-size: clamp(0.92rem, 1.3vw, 1.05rem);
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.tul-modes__opts {
    clear: both;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 520px) { .tul-modes__opts { grid-template-columns: 1fr 1fr; } }

.tul-mode { position: relative; display: block; margin: 0; cursor: pointer; }
.tul-mode input {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.tul-mode__in {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "box title" "box desc";
    align-items: center;
    column-gap: 13px;
    row-gap: 2px;
    height: 100%;
    min-height: 62px;
    padding: 13px 15px;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    box-shadow: 3px 3px 0 transparent;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                border-color var(--tul-motion-fast) var(--tul-ease);
}
/* Casilla dibujada: el input real está oculto, así que este cuadro es el
   único indicador de estado. Palomita hecha con dos bordes girados 45°
   (sin asset ni fuente de íconos). */
.tul-mode__box {
    grid-area: box;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    transition: background var(--tul-motion-fast) var(--tul-ease);
}
.tul-mode__box::after {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -3px;
    border: solid var(--tul-white);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0.5);
    opacity: 0;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                opacity var(--tul-motion-fast) var(--tul-ease);
}
.tul-mode__t {
    grid-area: title;
    font-family: var(--tul-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.1;
    color: var(--tul-ink);
}
.tul-mode__d {
    grid-area: desc;
    font-family: var(--tul-font-body);
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--tul-muted);
}
.tul-mode:hover .tul-mode__in { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--tul-ink); }
.tul-mode:hover .tul-mode__box { background: var(--tul-cream); }
.tul-mode:has(input:checked) .tul-mode__in {
    border-color: var(--tul-ink);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--tul-orange);
}
.tul-mode:has(input:checked) .tul-mode__box { background: var(--tul-orange-deep); }
.tul-mode:has(input:checked) .tul-mode__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.tul-mode:focus-within .tul-mode__in { outline: 3px solid var(--tul-orange); outline-offset: 3px; }

/* Campos exclusivos de una ruta. `display:none` (y no [hidden]) para que el
   contador de numeración los salte solo; el JS además los deshabilita para
   que su `required` no bloquee el envío de la otra ruta. */
form[data-modo="sabe"]  [data-solo="ayuda"],
form[data-modo="ayuda"] [data-solo="sabe"] { display: none; }

/* En la ruta "ayuda" el proyecto ocupa la fila completa, así que la
   categoría se queda sola: mejor a todo lo ancho que con un hueco al lado. */
form[data-modo="ayuda"] .tul-field--cat { grid-column: 1 / -1; }

.tul-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.4vw, 24px);
}
@media (min-width: 620px) { .tul-form__grid { grid-template-columns: 1fr 1fr; } }
.tul-field {
    /* La etiqueta define la altura de la fila; se guarda en variable para
       que el min-height de abajo escale con ella. */
    --tul-lbl: clamp(0.92rem, 1.3vw, 1.05rem);
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.tul-field--full { grid-column: 1 / -1; }
/* Altura fija de la fila de etiqueta: sin ella, un campo con chip
   ("OPCIONAL") o con un número más alto crecía unos píxeles y su input
   quedaba desalineado respecto al de la columna de al lado. Todos los
   hijos comparten line-height para que la altura sea la misma siempre. */
.tul-field__labelrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
    min-height: calc(var(--tul-lbl) * 1.25);
}
.tul-field__labelrow > * { line-height: 1.2; }
.tul-field__num {
    font-family: var(--tul-font-mono);
    color: var(--tul-orange-deep);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    flex-shrink: 0;
}
.tul-field__label {
    font-family: var(--tul-font-display);
    text-transform: uppercase;
    color: var(--tul-ink);
    font-size: var(--tul-lbl);
    letter-spacing: 0.04em;
}
/* Numeración automática: al ocultarse un campo según la ruta, los números
   se recorren solos (un `display:none` no incrementa el contador). */
.tul-form__grid { counter-reset: tulf; }
.tul-field { counter-increment: tulf; }
.tul-field__num::before { content: counter(tulf, decimal-leading-zero); }
/* fieldset/legend de "¿Requieres factura?" alineado con los demás campos */
.tul-field--reset { border: 0; padding: 0; margin: 0; }
.tul-field--reset > .tul-field__labelrow { padding: 0; width: auto; }

.tul-field__opt {
    font-family: var(--tul-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tul-muted);
}
.tul-field__hint {
    font-family: var(--tul-font-body);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tul-muted);
    margin: -2px 0 0;
}
/* Atajo dentro del campo "Tela": salta a la ruta de asesoría sin obligar a
   subir hasta el selector de arriba. */
.tul-field__switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--tul-font-body);
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tul-ink);
    text-decoration: underline;
    text-decoration-color: var(--tul-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
.tul-field__switch i { font-size: 0.85em; transition: transform var(--tul-motion-fast) var(--tul-ease); }
.tul-field__switch:hover { color: var(--tul-orange-deep); }
.tul-field__switch:hover i { transform: translateX(3px); }

.tul-input[type="number"] { -moz-appearance: textfield; }
.tul-input[type="number"]::-webkit-outer-spin-button,
.tul-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea.tul-input {
    min-height: 118px;
    resize: vertical;
    line-height: 1.5;
    background-image: none;
}

.tul-input {
    width: 100%;
    min-height: 50px;
    background: var(--tul-white);
    color: var(--tul-ink);
    border: 2px solid var(--tul-ink);
    border-radius: 0;
    padding: 13px 16px;
    font-family: var(--tul-font-body);
    font-size: 1rem;
    line-height: 1.3;
    box-shadow: 5px 5px 0 var(--tul-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                border-color var(--tul-motion-fast) var(--tul-ease);
}
.tul-input:focus,
.tul-input:focus-visible {
    outline: none;
    border-color: var(--tul-orange);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--tul-ink);
}
.tul-input:disabled { background: var(--tul-cream); color: var(--tul-muted); box-shadow: 3px 3px 0 var(--tul-rule); }
/* chevron del select dibujado en el propio background (sin asset externo) */
select.tul-input {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tul-ink) 50%),
        linear-gradient(135deg, var(--tul-ink) 50%, transparent 50%);
    background-position: right 20px center, right 14px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.tul-radios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.tul-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 17px;
    background: var(--tul-white);
    color: var(--tul-ink);
    border: 2px solid var(--tul-ink);
    cursor: pointer;
    font-family: var(--tul-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 3px 3px 0 transparent;
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease),
                background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease);
}
.tul-radio input {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.tul-radio:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--tul-ink); }
.tul-radio:has(input:checked) {
    background: var(--tul-ink);
    color: var(--tul-paper);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--tul-orange);
}
.tul-radio:focus-within { outline: 3px solid var(--tul-orange); outline-offset: 3px; }

.tul-form__actions {
    margin-top: clamp(24px, 3.2vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tul-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: clamp(15px, 2vw, 19px) clamp(20px, 3vw, 32px);
    min-height: 56px;
    background: var(--tul-whatsapp);
    color: #fff;
    border: 2px solid var(--tul-ink);
    border-radius: 0;
    font-family: var(--tul-font-display);
    font-size: clamp(1.02rem, 1.6vw, 1.28rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    cursor: pointer;
    box-shadow: 7px 7px 0 var(--tul-ink);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-form__submit i { font-size: 1.4em; line-height: 1; }
.tul-form__submit:hover  { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--tul-ink); }
.tul-form__submit:active { transform: translate(2px, 2px);   box-shadow: 3px 3px 0 var(--tul-ink); }
.tul-form__submit:focus-visible { outline: 3px solid var(--tul-ink); outline-offset: 4px; }
.tul-form__micro {
    font-family: var(--tul-font-accent);
    font-style: italic;
    color: var(--tul-muted);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 575px) {
    .tul-form { box-shadow: 7px 7px 0 var(--tul-orange); }
    .tul-input { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-input:focus, .tul-input:focus-visible { box-shadow: 6px 6px 0 var(--tul-ink); }
    .tul-form__submit { box-shadow: 5px 5px 0 var(--tul-ink); }
    .tul-form__submit:hover { box-shadow: 7px 7px 0 var(--tul-ink); }
}

/* =========================================================================
   17 · Económicas — RunIn + fichas
   ========================================================================= */
.tul-runin {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    margin-bottom: clamp(18px, 2.6vw, 26px);
    padding-bottom: clamp(12px, 1.8vw, 16px);
    border-bottom: 1px solid var(--tul-rule);
}
.tul-runin__divider {
    font-family: var(--tul-font-accent);
    font-style: italic;
    color: var(--tul-orange);
    font-size: 1.5em;
    flex-shrink: 0;
    line-height: 1;
}
.tul-runin .tul-eyebrow { margin: 0; }
@media (max-width: 560px) { .tul-runin__divider { display: none; } }

/* =========================================================================
   18 · ¿Qué es? — DropCap
   ========================================================================= */
.tul-dropcap {
    max-width: 68ch;
    font-family: var(--tul-font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.62;
    color: var(--tul-ink);
    margin: 0 0 1.1em;
}
.tul-dropcap:last-child { margin-bottom: 0; }
.tul-dropcap__cap {
    float: left;
    font-family: var(--tul-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.6rem, 8vw, 5.4rem);
    line-height: 0.8;
    color: var(--tul-orange);
    padding: 0.08em 0.12em 0 0;
    margin-top: 0.04em;
}
.tul-dropcap strong { font-weight: 800; }
.tul-dropcap a {
    color: var(--tul-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tul-orange);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.tul-dropcap a:hover { color: var(--tul-orange-deep); }

/* Link editorial con subrayado que se traza (rule-draw) */
.tul-rulelink {
    display: inline-block;
    margin-top: clamp(18px, 2.6vw, 26px);
    min-height: 44px;
    padding: 10px 0;
    font-family: var(--tul-font-body);
    font-weight: 800;
    font-size: clamp(0.98rem, 1.3vw, 1.1rem);
    color: var(--tul-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--tul-orange) 0 0);
    background-repeat: no-repeat;
    background-position: left bottom 8px;
    background-size: 0% 2px;
    transition: background-size var(--tul-motion-fast) var(--tul-ease), color var(--tul-motion-fast) var(--tul-ease);
}
.tul-rulelink i { margin-left: 0.45rem; color: var(--tul-orange); }
.tul-rulelink:hover,
.tul-rulelink:focus-visible { background-size: 100% 2px; color: var(--tul-ink); text-decoration: none; }

/* =========================================================================
   19 · Características — iconos (Técnico · sin burst)
   ========================================================================= */
/* Seis características: a 4 columnas la segunda fila quedaba con dos fichas
   sueltas; a 3 cierra en dos filas exactas. */
.tul-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
    margin-top: clamp(24px, 3vw, 34px);
}
@media (max-width: 880px) { .tul-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tul-features { grid-template-columns: 1fr; } }
.tul-feature {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 14px);
    background: var(--tul-cream);
    border: 1px solid var(--tul-rule);
    border-top: 3px solid var(--tul-ink);
    padding: clamp(16px, 2.2vw, 22px);
}
.tul-feature__icon { width: clamp(44px, 6vw, 58px); height: auto; display: block; }
/* Variante con icono de FontAwesome (el tul no tiene set de PNG propio):
   cuadro ink del mismo alto que el PNG para que las fichas no bailen. */
.tul-feature__icon--fa {
    width: clamp(44px, 6vw, 58px);
    height: clamp(44px, 6vw, 58px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tul-ink);
    color: var(--tul-paper);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.tul-feature__desc strong { font-weight: 800; color: var(--tul-ink); }
.tul-feature__title {
    font-family: var(--tul-font-body);
    font-weight: 800;
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    line-height: 1.3;
    color: var(--tul-ink);
    margin: 0;
}
.tul-feature__desc {
    font-family: var(--tul-font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tul-muted);
    margin: 0;
}

/* =========================================================================
   20 · FAQ — patrón estandarizado del sistema (mismo que /telas/proveedores-de-tela):
   rail sticky a la izquierda (eyebrow + título + nota + CTA) y acordeón de
   tarjetas a la derecha, con caja "+" que gira a "×" al abrir.
   Script global ax-faq.js vía [data-ax-faq].
   ========================================================================= */
.tul-faqsec__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 940px) {
    .tul-faqsec__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
    .tul-faqsec__aside { position: sticky; top: 130px; }
}
.tul-faqsec__aside .tul-eyebrow { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.tul-faqsec__title { font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: 0.95; }
.tul-faqsec__note {
    font-family: var(--tul-font-accent);
    font-style: italic;
    color: var(--tul-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    max-width: 40ch;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}
.tul-faqsec__cta { margin-top: 4px; }

.tul-faq { display: flex; flex-direction: column; gap: 12px; }
.tul-faq__item {
    background: var(--tul-white);
    border: 1.5px solid var(--tul-rule);
    transition: border-color var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-faq__item:hover { border-color: var(--tul-ink); }
.tul-faq__item[open] {
    border-color: var(--tul-ink);
    border-left: 4px solid var(--tul-orange);
    box-shadow: 5px 5px 0 var(--tul-ink);
}
.tul-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 56px;
    padding: clamp(15px, 2vw, 19px) clamp(16px, 2.2vw, 22px);
    transition: color var(--tul-motion-fast) var(--tul-ease);
}
.tul-faq__q::-webkit-details-marker { display: none; }
.tul-faq__q h3 {
    font-family: var(--tul-font-body);
    font-weight: 700;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.35;
    color: inherit;
    margin: 0;
    min-width: 0;
}
.tul-faq__q::after {
    content: "+";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--tul-font-display);
    font-size: 1.35rem;
    line-height: 1;
    background: var(--tul-cream);
    color: var(--tul-orange-deep);
    border: 1.5px solid var(--tul-ink);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease),
                border-color var(--tul-motion-fast) var(--tul-ease);
}
.tul-faq__item[open] > .tul-faq__q { color: var(--tul-orange-deep); }
.tul-faq__item[open] > .tul-faq__q::after {
    transform: rotate(45deg);
    background: var(--tul-orange);
    color: var(--tul-paper);
    border-color: var(--tul-orange);
}
.tul-faq__q:focus-visible { outline: 3px solid var(--tul-orange); outline-offset: -3px; }
.tul-faq__a {
    font-family: var(--tul-font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color: var(--tul-muted);
    max-width: 70ch;
    padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
    margin: 0;
}
.tul-faq__a strong { font-weight: 800; color: var(--tul-ink); }
.tul-faq__a a {
    color: var(--tul-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tul-orange);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.tul-faq__a a:hover { color: var(--tul-orange-deep); }

/* Envoltorio que la WAAPI anima en altura (ax-faq.js) */
.tul-reveal { overflow: hidden; }


/* =========================================================================
   10 · Comparativa rápida — tabla editorial que colapsa a fichas
   -------------------------------------------------------------------------
   En desktop es una tabla real (hairlines, sin radius, cabecera ink). Por
   debajo de 760px las filas se vuelven fichas apiladas: cada celda expone
   su encabezado con `data-label`, así el <table> sigue siendo tabla para
   lectores de pantalla y buscadores, sin scroll horizontal en móvil.
   ========================================================================= */
.tul-compare {
    width: 100%;
    border-collapse: collapse;
    margin-top: clamp(20px, 3vw, 30px);
    font-family: var(--tul-font-body);
}
.tul-compare thead th {
    background: var(--tul-ink);
    color: var(--tul-paper);
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px clamp(12px, 1.6vw, 18px);
    white-space: nowrap;
}
.tul-compare tbody tr { border-bottom: 1px solid var(--tul-rule); }
.tul-compare tbody tr:last-child { border-bottom: 0; }
.tul-compare tbody tr:hover { background: var(--tul-white); }
.tul-compare td {
    padding: clamp(14px, 1.8vw, 18px) clamp(12px, 1.6vw, 18px);
    font-size: clamp(0.95rem, 1.2vw, 1.02rem);
    line-height: 1.55;
    color: var(--tul-ink);
    vertical-align: top;
}
.tul-compare__name {
    font-family: var(--tul-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
}
.tul-compare__diff { color: var(--tul-muted); }
.tul-compare__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 4px;
    font-family: var(--tul-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--tul-orange-deep);
    text-decoration: none;
    white-space: nowrap;
    background-image: linear-gradient(var(--tul-orange-deep), var(--tul-orange-deep));
    background-repeat: no-repeat;
    background-position: 4px 100%;
    background-size: 0 2px;
    transition: background-size 0.28s var(--tul-ease);
}
.tul-compare__go i { transition: transform var(--tul-motion-fast) var(--tul-ease); }
.tul-compare__go:hover,
.tul-compare__go:focus-visible {
    color: var(--tul-orange-deep);
    text-decoration: none;
    background-size: calc(100% - 8px) 2px;
}
.tul-compare__go:hover i,
.tul-compare__go:focus-visible i { transform: translateX(4px); }

/* Móvil: cada fila es una ficha; las celdas anteponen su encabezado. */
@media (max-width: 760px) {
    .tul-compare,
    .tul-compare tbody,
    .tul-compare tr,
    .tul-compare td { display: block; width: 100%; }
    .tul-compare thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap;
    }
    .tul-compare tbody tr {
        border: 2px solid var(--tul-ink);
        background: var(--tul-white);
        margin-bottom: 14px;
        padding: clamp(14px, 3vw, 18px);
    }
    .tul-compare td { padding: 0; }
    .tul-compare td + td { margin-top: 12px; }
    .tul-compare td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--tul-font-mono);
        font-size: 0.88rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tul-ink);
        margin-bottom: 4px;
    }
}

/* =========================================================================
   Botón flotante de navegación (ax-fab.js global, [data-ax-fab])
   Va en la esquina inferior IZQUIERDA: el rail derecho ya lo ocupan los
   flotantes globales (.btn-you / .btn-wsp) y el widget del CRM de Kommo
   (inyectado en prod vía tag manager, no vive en el repo) — ahí pelearían
   por el espacio. z-index 110: sobre los flotantes, bajo el header (999).
   ========================================================================= */
.tul-fab {
    /* Vive FUERA de .tul-page (ese wrapper lleva overflow-x: clip), así que
       redeclara los tokens que usa, con fallback a --ax-* global. */
    --tul-ink:         var(--ax-ink, #1F2530);
    --tul-paper:       var(--ax-paper, #FAF6EE);
    --tul-cream:       var(--ax-cream, #F2EDE4);
    --tul-white:       var(--ax-white, #FFFFFF);
    --tul-orange:      var(--ax-orange, #F15A29);
    --tul-orange-deep: var(--ax-orange-deep, #B0401A);
    --tul-muted:       var(--ax-muted, #6E6A60);
    --tul-rule:        rgba(31, 37, 48, 0.16);
    --tul-font-body:   var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --tul-font-mono:   var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    --tul-ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --tul-motion-fast: 0.16s;

    position: fixed;
    left: 16px;
    bottom: 24px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--tul-font-body);
}
.tul-fab.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s var(--tul-ease), visibility 0.2s, transform 0.2s var(--tul-ease);
}

.tul-fab__toggle {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 20px;
    background: var(--tul-ink);
    color: var(--tul-paper);
    border: 2px solid var(--tul-ink);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--tul-font-display);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 5px 5px 0 var(--tul-orange);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-fab__toggle i { font-size: 1.1em; color: var(--tul-orange); }
.tul-fab__toggle:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tul-orange); }
.tul-fab__toggle:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--tul-orange); }
.tul-fab__toggle:focus-visible { outline: 3px solid var(--tul-orange); outline-offset: 3px; }
.tul-fab.is-open .tul-fab__toggle i::before { content: "\f00d"; }   /* fa-times */

.tul-fab__panel {
    order: 1;
    width: min(300px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tul-white);
    border: 2px solid var(--tul-ink);
    border-top: 3px solid var(--tul-orange);
    box-shadow: 7px 7px 0 var(--tul-ink);
    padding: clamp(14px, 2vw, 18px);
}
.tul-fab__panel[hidden] { display: none; }
.tul-fab__title {
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tul-muted);
    margin: 0 0 10px;
}
/* La lista es la única zona con scroll: el CTA de abajo queda siempre
   visible aunque se recorran las 17 secciones. */
.tul-fab__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border-top: 1px solid var(--tul-rule);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.tul-fab__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--tul-rule);
    color: var(--tul-ink);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    transition: background var(--tul-motion-fast) var(--tul-ease),
                color var(--tul-motion-fast) var(--tul-ease),
                padding-left var(--tul-motion-fast) var(--tul-ease);
}
.tul-fab__list a:hover,
.tul-fab__list a:focus-visible {
    background: var(--tul-ink);
    color: var(--tul-paper);
    padding-left: 12px;
    text-decoration: none;
}
.tul-fab__num {
    flex: 0 0 auto;
    font-family: var(--tul-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    color: var(--tul-muted);
    font-variant-numeric: tabular-nums;
}
.tul-fab__list a:hover .tul-fab__num,
.tul-fab__list a:focus-visible .tul-fab__num { color: var(--tul-orange); }

.tul-fab__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--tul-orange);
    color: #fff;
    border: 2px solid var(--tul-ink);
    text-decoration: none;
    font-family: var(--tul-font-display);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 4px 0 var(--tul-orange-deep);
    transition: transform var(--tul-motion-fast) var(--tul-ease),
                box-shadow var(--tul-motion-fast) var(--tul-ease);
}
.tul-fab__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tul-orange-deep); color: #fff; text-decoration: none; }
.tul-fab__cta:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--tul-orange-deep); }

/* Móvil: el panel ocupa el ancho disponible y el toggle se compacta. */
@media (max-width: 575px) {
    .tul-fab { left: 12px; bottom: 16px; }
    .tul-fab__panel { width: calc(100vw - 24px); max-height: 62vh; box-shadow: 5px 5px 0 var(--tul-ink); }
    .tul-fab__toggle { padding: 13px 16px; font-size: 0.88rem; box-shadow: 4px 4px 0 var(--tul-orange); }
}
/* El rail derecho ya lleva los flotantes globales: en pantallas cortas
   subimos el panel para que no quede debajo del toggle. */
@media (max-height: 560px) {
    .tul-fab__panel { max-height: 54vh; }
}

@media print { .tul-fab { display: none; } }

/* =========================================================================
   Móvil: todas las parrillas de cards de telas se vuelven sliders con
   scroll-snap (mismo gesto que el carrusel de decoración). Apiladas a una
   columna hacían la página kilométrica; en horizontal se hojean y el
   asomo de la siguiente tarjeta invita a deslizar.
   Debe ir DESPUÉS de las definiciones de cada parrilla (misma
   especificidad: gana por orden).
   ========================================================================= */
@media (max-width: 620px) {
    .tul-gallery,
    .tul-gallery--5,
    .tul-catgrid,
    .tul-featured__list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 12px;
        padding: 4px 4px 16px;
        margin-left: -4px;
        margin-right: -4px;
        scrollbar-width: thin;
    }
    .tul-gallery > *,
    .tul-gallery--5 > *,
    .tul-catgrid > *,
    .tul-featured__list > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    /* Ancho por tipo: siempre < 100% para que asome la siguiente */
    .tul-gallery > *,
    .tul-gallery--5 > * { flex-basis: min(78vw, 320px); }
    .tul-catgrid > *   { flex-basis: min(82vw, 320px); }
    .tul-featured__list > li { flex-basis: min(64vw, 250px); display: flex; }
    .tul-featured__list > li > .tul-feat { width: 100%; }

    .tul-gallery::-webkit-scrollbar,
    .tul-gallery--5::-webkit-scrollbar,
    .tul-catgrid::-webkit-scrollbar,
    .tul-featured__list::-webkit-scrollbar { height: 8px; }
    .tul-gallery::-webkit-scrollbar-track,
    .tul-gallery--5::-webkit-scrollbar-track,
    .tul-catgrid::-webkit-scrollbar-track,
    .tul-featured__list::-webkit-scrollbar-track { background: var(--tul-rule); }
    .tul-gallery::-webkit-scrollbar-thumb,
    .tul-gallery--5::-webkit-scrollbar-thumb,
    .tul-catgrid::-webkit-scrollbar-thumb,
    .tul-featured__list::-webkit-scrollbar-thumb { background: var(--tul-ink); }
}

/* =========================================================================
   Reveal sutil al entrar (decorativo · progressive enhancement)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes tul-rise { from { opacity: 0; transform: translateY(26px); } }
        .tul-rise {
            animation: tul-rise 0.8s var(--tul-ease) backwards;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

/* =========================================================================
   Accesibilidad — focus visible global + motion safe
   ========================================================================= */
.tul-page :focus-visible {
    outline: 3px solid var(--tul-orange);
    outline-offset: 3px;
    border-radius: 0;
}
.tul-section--ink :focus-visible { outline-color: var(--tul-yellow); }

@media (prefers-reduced-motion: reduce) {
    .tul-page *,
    .tul-page *::before,
    .tul-page *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
    .tul-cta:hover, .tul-cta:active,
    .tul-card:hover, .tul-card:focus-within,
    .tul-catcard:hover, .tul-catcard:focus-within,
    .tul-figure--link:hover,
    .tul-usechip:hover, .tul-usechip:focus-visible,
    .tul-gcard:hover, .tul-gcard:focus-visible,
    .tul-ribbon:hover, .tul-ribbon:focus-visible,
    .tul-pick:hover, .tul-pick:focus-visible,
    .tul-feat:hover, .tul-feat:focus-visible,
    .tul-btn--solid:hover, .tul-btn--solid:active,
    .tul-btn--quote:hover, .tul-btn--quote:active,
    .tul-input:focus, .tul-radio:hover, .tul-radio:has(input:checked),
    .tul-mode:hover .tul-mode__in, .tul-mode:has(input:checked) .tul-mode__in,
    .tul-form__submit:hover, .tul-form__submit:active,
    .tul-fab__toggle:hover, .tul-fab__toggle:active,
    .tul-fab__cta:hover, .tul-fab__cta:active { transform: none; }
    .tul-catcard:hover .tul-catcard__media img,
    .tul-gcard:hover .tul-gcard__img img,
    .tul-ribbon:hover .tul-ribbon__media img,
    .tul-feat:hover .tul-feat__media img { transform: none; }
    .tul-usechip:hover::before, .tul-usechip:focus-visible::before { transform: none; }
}

/* ─── Refinamiento móvil (sombras más discretas para no saturar) ────────── */
@media (max-width: 575px) {
    .tul-cta--whatsapp { box-shadow: 6px 6px 0 var(--tul-ink); }
    .tul-cta--whatsapp:hover { box-shadow: 8px 8px 0 var(--tul-ink); }
    .tul-cta--ink { box-shadow: 6px 6px 0 var(--tul-orange); }
    .tul-cta--ink:hover { box-shadow: 8px 8px 0 var(--tul-orange); }
    .tul-figure { box-shadow: 6px 6px 0 var(--tul-ink); }
    .tul-card, .tul-note { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-card:hover, .tul-card:focus-within { box-shadow: 6px 6px 0 var(--tul-orange); }
    .tul-catcard { box-shadow: 4px 4px 0 var(--tul-ink); }
    .tul-catcard:hover, .tul-catcard:focus-within { box-shadow: 7px 7px 0 var(--tul-orange); }
    .tul-gcard { box-shadow: 4px 4px 0 var(--tul-ink); }
    .tul-gcard:hover, .tul-gcard:focus-visible { box-shadow: 7px 7px 0 var(--tul-orange); }
    .tul-ribbon { box-shadow: 5px 5px 0 var(--tul-orange); }
    .tul-ribbon:hover { box-shadow: 8px 8px 0 var(--tul-orange); }
    .tul-feat { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-feat:hover, .tul-feat:focus-visible { box-shadow: 5px 5px 0 var(--tul-orange); }
    .tul-meta li { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-hbanner { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-hbanner:hover { box-shadow: 3px 3px 0 var(--tul-purple); }
    .tul-pick { box-shadow: 2px 2px 0 var(--tul-ink); }
    .tul-pick:hover, .tul-pick:focus-visible { box-shadow: 4px 4px 0 var(--tul-orange); }
    .tul-usechip { box-shadow: 3px 3px 0 var(--tul-ink); }
    .tul-usechip:hover, .tul-usechip:focus-visible { box-shadow: 5px 5px 0 var(--tul-orange); }
    .tul-section--full-frame { margin-left: 10px; margin-right: 10px; }
}