/* =========================================================================
   Arletex Design System v3.5 — Tipos de Tela (/telas/tipos-de-tela)
   Hoja editorial por página. Prefijo de clase y de token: tdt- / --tdt-*.
   Tokens locales con fallback a --ax-* global y, si no, a hex del sistema.

   PORT de /telas/tela-poliester (tela-poliester.css): hero, hbanner, meta,
   cta, figure/figcaption, usegrid/usechip, tab, fab — mismos componentes,
   prefijo tdt-. Edgar pidió apegarse al diseño de poliéster; este archivo
   clona esa gramática visual (bordes ink 2px, top-border orange 3px,
   sombras sólidas offset, botones chunky) en vez de inventar componentes
   nuevos.
   ─────────────────────────────────────────────────────────────────────────
   TEMA: hub "glosario" — no vende una tela, ayuda a identificar cuál usar.
   ≥55% blanco; paper/cream alternan como respiro editorial; ink en cierre.
   ========================================================================= */

/* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */
/* .tdt-fab vive fuera de .tdt-page (es position:fixed, hermano del wrapper
   de contenido) así que no hereda estas variables por cascada normal —
   se redeclaran aquí también. Mismo caso que .tul-fab en el rediseño de
   tul-, si no, background: var(--tdt-ink) cae al inicial (transparent). */
.tdt-page,
.tdt-section,
.tdt-fab {
    --tdt-ink:          var(--ax-ink, #1F2530);
    --tdt-paper:        var(--ax-paper, #FAF6EE);
    --tdt-cream:        var(--ax-cream, #F2EDE4);
    --tdt-white:        var(--ax-white, #FFFFFF);
    --tdt-orange:       var(--ax-orange, #F15A29);
    --tdt-orange-deep:  var(--ax-orange-deep, #B0401A);
    --tdt-purple:       var(--ax-purple, #6A52A2);
    --tdt-yellow:       var(--ax-yellow, #FFEB3B);
    --tdt-muted:        var(--ax-muted, #6E6A60);
    --tdt-muted-dark:   var(--ax-muted-dark, #A8A39A);
    --tdt-rule:         rgba(31, 37, 48, 0.16);
    --tdt-rule-on-dark: rgba(250, 246, 238, 0.18);
    --tdt-whatsapp:     var(--ax-whatsapp, #25D366);
    --tdt-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --tdt-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --tdt-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --tdt-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

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

@media (max-width: 767px) { .slider-nav { display: none; } }

.tdt-page { overflow-x: clip; }
.tdt-page *, .tdt-page *::before, .tdt-page *::after { box-sizing: border-box; }

.tdt-section[id] { scroll-margin-top: 116px; }
@media (max-width: 991px) { .tdt-section[id] { scroll-margin-top: 108px; } }
@media (max-width: 767px) { .tdt-section[id] { scroll-margin-top: 162px; } }

/* ─── Section + Container base ──────────────────────────────────────────── */
.tdt-section {
    width: 100%;
    position: relative;
    background: var(--tdt-white);
    color: var(--tdt-ink);
    font-family: var(--tdt-font-body);
    padding: clamp(48px, 8vw, 96px) 0;
}
.tdt-section--paper { background: var(--tdt-paper); }
.tdt-section--cream { background: var(--tdt-cream); }
.tdt-section--snug  { padding: clamp(38px, 6vw, 68px) 0; }
.tdt-section--top-rule { border-top: 2px solid var(--tdt-orange); }
.tdt-section--double-rule { border-top: 1px solid var(--tdt-rule); border-bottom: 1px solid var(--tdt-rule); }
.tdt-section--side-rule { border-left: 3px solid var(--tdt-orange); }
.tdt-section--side-rule > .tdt-container { padding-left: clamp(20px, 4vw, 44px); }
.tdt-section--index-tab { border-top: 2px solid var(--tdt-ink); }

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

/* Índice-tab (pestaña de archivador), alineada al borde del container.
   Ojo: en tela-poliester.css el comentario de .pol-tab dice "1180px" pero
   .pol-container real mide 1600px (bug ya documentado y corregido al
   clonar tul- desde poliéster) — aquí va directo el valor correcto. */
.tdt-tab {
    position: absolute;
    top: 0;
    left: calc(max(0px, (100% - 1600px) / 2) + clamp(20px, 4vw, 48px));
    transform: translateY(-100%);
    background: var(--tdt-ink);
    color: var(--tdt-paper);
    font-family: var(--tdt-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    z-index: 2;
    white-space: nowrap;
}

/* ─── Eyebrows ───────────────────────────────────────────────────────────── */
.tdt-eyebrow {
    font-family: var(--tdt-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--tdt-muted);
    line-height: 1.4;
    margin: 0 0 clamp(16px, 2vw, 22px);
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.tdt-eyebrow[data-stamp]:not([data-stamp=""])::before {
    content: attr(data-stamp);
    font-family: var(--tdt-font-display);
    font-style: normal;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    line-height: 1;
    border: 1px solid var(--tdt-orange-deep);
    color: var(--tdt-orange-deep);
    flex-shrink: 0;
}
.tdt-arthead { margin-bottom: clamp(18px, 2.6vw, 26px); }

/* ─── Titulares Anton + <em> Fraunces ────────────────────────────────────── */
.tdt-title {
    font-family: var(--tdt-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tdt-ink);
    line-height: 0.95;
    letter-spacing: -0.005em;
    margin: 0;
}
.tdt-title--xl { font-size: clamp(2.4rem, 6.4vw, 4.6rem) !important; }
.tdt-title--lg { font-size: clamp(1.9rem, 4.4vw, 3rem) !important; }
.tdt-title--md { font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important; }
.tdt-title em {
    font-family: var(--tdt-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    color: var(--tdt-orange);
}

.tdt-lead {
    font-family: var(--tdt-font-body);
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    line-height: 1.65;
    color: var(--tdt-ink);
    max-width: 66ch;
    margin: 0;
}
.tdt-lead + .tdt-lead { margin-top: clamp(12px, 1.8vw, 18px); }
.tdt-lead strong { font-weight: 800; }

.tdt-prose { max-width: 74ch; }
.tdt-prose p {
    font-family: var(--tdt-font-body);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
    color: var(--tdt-ink);
    margin: 0 0 1.1em;
}
.tdt-prose p:last-child { margin-bottom: 0; }
.tdt-prose strong { font-weight: 800; }
.tdt-prose a {
    color: var(--tdt-ink); text-decoration: underline;
    text-decoration-color: var(--tdt-orange); text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.tdt-prose a:hover { color: var(--tdt-orange-deep); }
.tdt-dek {
    font-family: var(--tdt-font-body);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.6;
    color: var(--tdt-muted);
    max-width: 62ch;
    margin: 0 0 clamp(22px, 3vw, 30px);
}
.tdt-section-header { margin-bottom: clamp(24px, 3.4vw, 36px); }

/* ─── Figura editorial (frame-chunky) ────────────────────────────────────── */
.tdt-figure {
    margin: 0;
    background: var(--tdt-white);
    border: 2px solid var(--tdt-ink);
    border-top: 3px solid var(--tdt-orange);
    box-shadow: 10px 10px 0 var(--tdt-ink);
    line-height: 0;
}
.tdt-figure img { display: block; width: 100%; height: auto; }
.tdt-figcaption {
    font-family: var(--tdt-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--tdt-muted);
    margin: clamp(10px, 1.6vw, 14px) 0 0;
}

/* ─── Botón compartir discreto ───────────────────────────────────────────── */
.tdt-share {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 8px 0;
    background: none;
    border: 0;
    font-family: var(--tdt-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tdt-muted);
    cursor: pointer;
    background-image: linear-gradient(var(--tdt-orange) 0 0);
    background-repeat: no-repeat;
    background-position: left bottom 6px;
    background-size: 0% 2px;
    transition: background-size var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-share:hover, .tdt-share:focus-visible { background-size: 100% 2px; color: var(--tdt-ink); }
.tdt-hero__side .tdt-share {
    display: flex; max-width: max-content;
    margin: 0 0 clamp(8px, 1.2vw, 12px) auto;
    padding-bottom: 0; background-position: left bottom 2px;
}

/* =========================================================================
   01 · Hero — dos columnas (texto + figura), como pol-hero
   ========================================================================= */
.tdt-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}
.tdt-hero__text, .tdt-hero__side, .tdt-hero__media { min-width: 0; }
.tdt-hero__media { margin: 0; }
.tdt-hero__head { margin-bottom: clamp(18px, 2.4vw, 26px); }
@media (max-width: 900px) {
    .tdt-hero { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); }
    .tdt-hero__side { display: contents; }
    .tdt-hero__media { order: -1; }
    .tdt-hero__side .tdt-share { order: 1; margin: 0; }
}

.tdt-slide-link { display: block; line-height: 0; }
.tdt-slide-link:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: -3px; }

/* Puente al WhatsApp (¿no sabes qué tela elegir?) */
.tdt-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(--tdt-cream);
    border: 2px solid var(--tdt-ink);
    border-left: 6px solid var(--tdt-purple);
    box-shadow: 5px 5px 0 var(--tdt-ink);
    color: var(--tdt-ink);
    text-decoration: none;
    transition: transform var(--tdt-motion-fast) var(--tdt-ease),
                box-shadow var(--tdt-motion-fast) var(--tdt-ease),
                background-color var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-hbanner:hover, .tdt-hbanner:focus-visible {
    transform: translateX(5px); box-shadow: 5px 5px 0 var(--tdt-purple);
    background: var(--tdt-white); color: var(--tdt-ink); text-decoration: none;
}
.tdt-hbanner__icon {
    display: grid; place-items: center;
    width: clamp(42px, 5vw, 50px); height: clamp(42px, 5vw, 50px);
    background: var(--tdt-purple); color: var(--tdt-white);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1;
}
.tdt-hbanner__body { min-width: 0; }
.tdt-hbanner__lbl {
    display: block; font-family: var(--tdt-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(--tdt-ink);
}
.tdt-hbanner__txt { display: block; margin-top: 5px; font-size: clamp(0.94rem, 1.1vw, 1.02rem); line-height: 1.55; color: var(--tdt-ink); }
.tdt-hbanner__cue {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--tdt-font-display); font-size: clamp(0.9rem, 1.05vw, 1rem);
    letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--tdt-purple); white-space: nowrap;
}
.tdt-hbanner__cue i { transition: transform var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-hbanner:hover .tdt-hbanner__cue i { transform: translateY(3px); }
@media (max-width: 640px) {
    .tdt-hbanner { grid-template-columns: auto 1fr; row-gap: clamp(11px, 2.2vw, 14px); }
    .tdt-hbanner__cue { grid-column: 1 / -1; justify-content: space-between; padding-top: clamp(10px, 2vw, 12px); border-top: 1px solid var(--tdt-rule); }
}

/* Barra de garantías */
.tdt-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;
}
.tdt-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(--tdt-white); border: 2px solid var(--tdt-ink); border-top: 3px solid var(--tdt-orange);
    box-shadow: 4px 4px 0 var(--tdt-ink);
    font-family: var(--tdt-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(--tdt-ink);
}
.tdt-meta li i { flex: 0 0 auto; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1; color: var(--tdt-orange); }
@media (max-width: 560px) { .tdt-meta { grid-template-columns: 1fr; } .tdt-meta li { min-height: 62px; } }

/* Acciones + CTA chunky */
.tdt-actions { margin-top: clamp(24px, 3.6vw, 34px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tdt-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 28px; min-height: 48px;
    font-family: var(--tdt-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(--tdt-ink); border-radius: 0; cursor: pointer;
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-cta--whatsapp { background: var(--tdt-whatsapp); color: #fff; box-shadow: 8px 8px 0 var(--tdt-ink); }
.tdt-cta--whatsapp i { font-size: 1.3em; line-height: 1; }
.tdt-cta--whatsapp:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--tdt-ink); color: #fff; text-decoration: none; }
.tdt-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tdt-ink); }
.tdt-cta--ink { background: var(--tdt-ink); color: var(--tdt-paper); box-shadow: 8px 8px 0 var(--tdt-orange); }
.tdt-cta--ink:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--tdt-orange); color: var(--tdt-paper); text-decoration: none; }
.tdt-cta--ink:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tdt-orange); }
.tdt-cta--sm { padding: 12px 22px; font-size: clamp(0.95rem, 1.3vw, 1.1rem); box-shadow: 6px 6px 0 var(--tdt-ink); }
.tdt-cta--sm:hover { box-shadow: 8px 8px 0 var(--tdt-ink); }
.tdt-cta--sm:active { box-shadow: 3px 3px 0 var(--tdt-ink); }
.tdt-cta:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: 3px; }

/* =========================================================================
   02 · Selector — Índice por sección (firma de la página, como pol-usegrid)
   ========================================================================= */
.tdt-usegrid {
    list-style: none;
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--tdt-ink);
    border-left: 1px solid var(--tdt-ink);
}
@media (max-width: 1024px) { .tdt-usegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tdt-usegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tdt-usegrid > li { display: flex; min-width: 0; }
.tdt-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(--tdt-ink);
    border-right: 1px solid var(--tdt-ink); border-bottom: 1px solid var(--tdt-ink);
    color: var(--tdt-paper); text-decoration: none;
    transition: color var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-usechip::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: var(--tdt-usechip-img, none) center / cover no-repeat;
    transition: transform 0.5s var(--tdt-ease), filter 0.35s var(--tdt-ease);
}
.tdt-usechip::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    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(--tdt-ease);
}
.tdt-usechip__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tdt-usechip__num {
    font-family: var(--tdt-font-mono); font-size: 0.875rem; letter-spacing: 0.22em;
    color: var(--tdt-paper); opacity: 0.85; font-variant-numeric: tabular-nums;
    transition: color var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-usechip__cue { font-size: 0.8rem; color: var(--tdt-paper); transition: transform var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-usechip__name {
    color: inherit; transition: color var(--tdt-motion-fast) var(--tdt-ease);
    font-family: var(--tdt-font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem); 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);
}
.tdt-usechip:hover, .tdt-usechip:focus-visible { color: var(--tdt-white); text-decoration: none; }
.tdt-usechip:hover::before, .tdt-usechip:focus-visible::before { transform: scale(1.06); }
.tdt-usechip:hover::after, .tdt-usechip:focus-visible::after { opacity: 0.3; }
.tdt-usegrid:has(.tdt-usechip:hover, .tdt-usechip:focus-visible) .tdt-usechip:not(:hover, :focus-visible)::after { opacity: 1; }
.tdt-usegrid:has(.tdt-usechip:hover, .tdt-usechip:focus-visible) .tdt-usechip:not(:hover, :focus-visible)::before { filter: saturate(0.6); }
.tdt-usechip:hover .tdt-usechip__name, .tdt-usechip:focus-visible .tdt-usechip__name { color: var(--tdt-orange); }
.tdt-usechip:hover .tdt-usechip__num, .tdt-usechip:focus-visible .tdt-usechip__num { color: var(--tdt-orange); opacity: 1; }
.tdt-usechip:hover .tdt-usechip__cue, .tdt-usechip:focus-visible .tdt-usechip__cue { color: var(--tdt-orange); transform: translateY(3px); }
.tdt-usechip--all { background: var(--tdt-ink); color: var(--tdt-paper); transition: background var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-usechip--all::before, .tdt-usechip--all::after { display: none; }
.tdt-usechip--all .tdt-usechip__num { color: var(--tdt-paper); opacity: 0.85; }
.tdt-usechip--all .tdt-usechip__cue { display: none; }
.tdt-usechip--all .tdt-usechip__name { text-shadow: none; font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.tdt-usechip--all:hover, .tdt-usechip--all:focus-visible { background: var(--tdt-white); color: var(--tdt-ink); }
.tdt-usechip--all:hover .tdt-usechip__name, .tdt-usechip--all:focus-visible .tdt-usechip__name { color: var(--tdt-ink); text-shadow: none; }

/* ─── 03 · Nombres e imágenes (namecard con foto) ───────────────────────── */
/* Carrusel slick: páginas de 2 filas × 4 columnas (3 en 768-1199, 2 en <768).
   Slick fija el ancho de cada .tdt-namecell (25/33/50%); su padding hace el
   hueco. Init al final de tipos-de-tela.blade.php. */
.tdt-namegrid { --tdt-namegap: clamp(16px, 2vw, 24px); --tdt-namecols: 4; }
@media (max-width: 1199.98px) { .tdt-namegrid { --tdt-namecols: 3; } }
@media (max-width: 767.98px)  { .tdt-namegrid { --tdt-namegap: 12px; --tdt-namecols: 2; } }

/* Antes de slick (o si no carga): cuadrícula normal con todas las tarjetas */
.tdt-namegrid:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(var(--tdt-namecols), minmax(0, 1fr));
    gap: var(--tdt-namegap);
}

/* Con slick: cada fila es flex → las tarjetas de una fila miden lo mismo */
.tdt-namegrid.slick-initialized { display: block; }
.tdt-namegrid .slick-list {
    margin: 0 calc(var(--tdt-namegap) / -2);
    padding: 4px 0 12px;             /* sombra 5px + translate(-3px) del hover */
}
.tdt-namegrid .slick-slide:focus { outline: none; }
.tdt-namegrid .slick-slide > div { display: flex; }
.tdt-namegrid .slick-slide > div + div { margin-top: var(--tdt-namegap); }
.tdt-namegrid.slick-initialized .tdt-namecell {
    display: flex !important;        /* slick pone display:inline-block inline */
    padding: 0 calc(var(--tdt-namegap) / 2);
}
.tdt-namecell { display: flex; min-width: 0; }
.tdt-namecell > .tdt-namecard { flex: 1 1 auto; min-width: 0; }

.tdt-namecard {
    display: flex;
    flex-direction: column;
    background: var(--tdt-white);
    border: 2px solid var(--tdt-ink);
    border-top: 3px solid var(--tdt-orange);
    box-shadow: 5px 5px 0 var(--tdt-ink);
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-namecard:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tdt-ink); }
.tdt-namecard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--tdt-ink); }
.tdt-namecard__media picture, .tdt-namecard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tdt-namecard__body { flex: 1 1 auto; padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 8px; }
.tdt-namecard__title { font-family: var(--tdt-font-display); font-size: clamp(1.25rem, 1.7vw, 1.5625rem) !important; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; margin: 0; }   /* !important: style.css fuerza h3 a 25px */
.tdt-namecard__title a { color: var(--tdt-ink); text-decoration: none; }
.tdt-namecard__title a:hover { color: var(--tdt-orange); }
.tdt-namecard__desc { font-size: 0.94rem; line-height: 1.6; color: var(--tdt-muted); margin: 0; }
.tdt-namecard__usos { font-size: 0.875rem; line-height: 1.55; color: var(--tdt-ink); margin: 0; }   /* piso 14px */
.tdt-namecard__usos strong { font-weight: 800; }
.tdt-namecard__cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px;   /* CTA al pie: alinea entre tarjetas */
    font-family: var(--tdt-font-body); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--tdt-orange-deep); text-decoration: none;
}
.tdt-namecard__cta i { transition: transform var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-namecard__cta:hover { color: var(--tdt-ink); }
.tdt-namecard__cta:hover i { transform: translateX(4px); }

/* Flechas: a los lados, a media altura del carrusel (mitad sobre el borde) */
.tdt-namegrid.slick-initialized { position: relative; }
.tdt-namearrow {
    position: absolute; top: calc(50% - 4px); z-index: 5;   /* -4px: compensa el padding de sombra de .slick-list */
    transform: translateY(-50%);
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tdt-ink); color: var(--tdt-paper);
    border: 0; border-radius: 0; cursor: pointer;
    box-shadow: 4px 4px 0 var(--tdt-orange);
    transition: background var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease), transform var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-namearrow--prev { left: -23px; }
.tdt-namearrow--next { right: -23px; }
.tdt-namearrow:hover { background: var(--tdt-orange); color: var(--tdt-ink); transform: translateY(-50%) translate(-2px, -2px); }
.tdt-namearrow:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: 4px; }
.tdt-namearrow.slick-disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.tdt-namearrow.slick-disabled:hover { background: var(--tdt-ink); color: var(--tdt-paper); transform: translateY(-50%); }
.tdt-namearrow i { font-size: 1.05rem; }

/* Dots centrados bajo el carrusel */
.tdt-namenav { display: flex; align-items: center; justify-content: center; margin-top: clamp(12px, 2vw, 24px); }
.tdt-namenav:empty { display: none; }

/* Dots: cuadro de 12px con área táctil de 44px */
.tdt-namenav .slick-dots { display: flex; list-style: none; margin: 0; padding: 0; }
.tdt-namenav .slick-dots li { display: block; width: auto; height: auto; margin: 0; }   /* anula style.css (15px y oculto en <512px) */
.tdt-namenav .slick-dots li button,
.tdt-namenav .slick-dots li.slick-active button {   /* anula style.css (círculo negro de 15px) */
    position: relative; width: 44px; height: 44px; padding: 0;
    font-size: 0; line-height: 0; color: transparent;
    background: transparent; border: 0; border-radius: 0; cursor: pointer;
}
.tdt-namenav .slick-dots li button::before {
    content: ''; position: absolute; inset: 16px;
    border: 1.5px solid var(--tdt-ink); background: transparent;
}
.tdt-namenav .slick-dots li.slick-active button::before { background: var(--tdt-orange); border-color: var(--tdt-orange); }
.tdt-namenav .slick-dots li button:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: -6px; }

/* Móvil 2×2: tarjetas angostas → nombre, usos y CTA (la descripción se oculta) */
@media (max-width: 767.98px) {
    .tdt-namecard { box-shadow: 4px 4px 0 var(--tdt-ink); }
    .tdt-namearrow--prev { left: -10px; }   /* dentro del gutter de 20px del contenedor */
    .tdt-namearrow--next { right: -10px; }
    .tdt-namecard__body { padding: 12px; gap: 6px; }
    .tdt-namecard__title { font-size: 1.0625rem !important; }
    .tdt-namecard__desc { display: none; }
    .tdt-namecard__usos {
        display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tdt-namecard__cta { display: block; letter-spacing: 0.02em; }   /* la flecha sigue al texto si se parte */
    .tdt-namecard__cta i { margin-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .tdt-namecard, .tdt-namecard__cta i, .tdt-namearrow { transition: none; }
    .tdt-namecard:hover { transform: none; }
    .tdt-namearrow:hover { transform: translateY(-50%); }
}

/* =========================================================================
   Cards de contenido (A-Z / composición / ropa / salud / uso) — misma
   gramática que .pol-meta li: borde ink 2px, top-border orange 3px, sombra
   sólida ink, hover lift.
   ========================================================================= */
.tdt-card {
    background: var(--tdt-white);
    border: 2px solid var(--tdt-ink);
    border-top: 3px solid var(--tdt-orange);
    box-shadow: 5px 5px 0 var(--tdt-ink);
    padding: clamp(16px, 2vw, 22px);
    display: flex; flex-direction: column; gap: 8px;
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tdt-ink); }
.tdt-card__title { font-family: var(--tdt-font-display); font-size: 1.05rem; text-transform: uppercase; margin: 0; }
.tdt-card p { font-size: 0.94rem; line-height: 1.6; color: var(--tdt-muted); margin: 0; }
.tdt-card__cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
    font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;   /* piso 14px */
    color: var(--tdt-orange-deep); text-decoration: none;
}
.tdt-card__cta:hover { color: var(--tdt-ink); }

/* Variante con imagen arriba (composición / ropa / salud / uso) */
.tdt-card--media { padding: 0; gap: 0; }
.tdt-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--tdt-ink); }
.tdt-card__media picture, .tdt-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tdt-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 22px); }

.tdt-cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 20px); }
.tdt-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.tdt-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .tdt-cardgrid, .tdt-cardgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .tdt-cardgrid, .tdt-cardgrid--2, .tdt-cardgrid--3 { grid-template-columns: 1fr; } }

.tdt-callout {
    background: var(--tdt-cream);
    border: 2px solid var(--tdt-ink);
    border-left: 6px solid var(--tdt-orange);
    box-shadow: 5px 5px 0 var(--tdt-ink);
    padding: clamp(16px, 2.2vw, 22px) clamp(20px, 2.6vw, 26px);
    margin-bottom: clamp(24px, 3vw, 32px);
}
.tdt-callout__title { font-family: var(--tdt-font-display); font-size: 1.1rem; text-transform: uppercase; margin: 0 0 8px; }
.tdt-callout p { font-size: 0.98rem; line-height: 1.65; color: var(--tdt-ink); margin: 0; }
.tdt-callout a { color: var(--tdt-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--tdt-orange); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.tdt-callout a:hover { color: var(--tdt-orange-deep); }

.tdt-note {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--tdt-cream); border-left: 3px solid var(--tdt-purple);
    padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
    margin-top: clamp(24px, 3vw, 30px);
    font-size: 0.92rem; line-height: 1.6; color: var(--tdt-ink);
}
.tdt-note i { color: var(--tdt-purple); margin-top: 3px; flex-shrink: 0; }

/* ─── Índice A-Z (Almanaque) ─────────────────────────────────────────────── */
.tdt-azindex { columns: 4; column-gap: clamp(24px, 3vw, 40px); }
.tdt-azindex__group { break-inside: avoid; display: flex; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.tdt-azindex__letter { flex-shrink: 0; font-family: var(--tdt-font-display); font-size: 1.6rem; line-height: 1; color: var(--tdt-orange); width: 1.4em; }
.tdt-azindex__list { list-style: none; margin: 0; padding: 0; }
.tdt-azindex__list li { border-top: 1px solid var(--tdt-rule); }
.tdt-azindex__list li:first-child { border-top: none; }
.tdt-azindex__list a { display: block; padding: 6px 0; font-family: var(--tdt-font-mono); font-size: 0.86rem; color: var(--tdt-ink); text-decoration: none; transition: color var(--tdt-motion-fast) var(--tdt-ease), padding-left var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-azindex__list a:hover { color: var(--tdt-orange-deep); padding-left: 6px; }
.tdt-azindex__cta { margin-top: clamp(28px, 3vw, 36px); }
@media (max-width: 1080px) { .tdt-azindex { columns: 3; } }
@media (max-width: 767px)  { .tdt-azindex { columns: 2; } }
@media (max-width: 480px)  { .tdt-azindex { columns: 1; } }

/* ─── Cómo elegir: tabla comparativa (port de .tul-compare) ─────────────────
   <table> real en desktop; bajo 760px cada fila es una ficha y cada celda
   antepone su encabezado vía data-label (sin scroll horizontal). */
.tdt-compare {
    width: 100%;
    border-collapse: collapse;
    background: var(--tdt-white);
    border: 2px solid var(--tdt-ink);
    box-shadow: 6px 6px 0 var(--tdt-ink);
    font-family: var(--tdt-font-body);
}
.tdt-compare thead th {
    background: var(--tdt-ink);
    color: var(--tdt-paper);
    font-family: var(--tdt-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;
}
.tdt-compare tbody tr { border-bottom: 1px solid var(--tdt-rule); transition: background var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-compare tbody tr:last-child { border-bottom: 0; }
.tdt-compare tbody tr:hover { background: var(--tdt-cream); }
.tdt-compare tbody th,
.tdt-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(--tdt-ink);
    text-align: left;
    vertical-align: top;
}
.tdt-compare tbody th {
    font-family: var(--tdt-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.1;
    white-space: nowrap;
}
.tdt-compare td:nth-child(2) { color: var(--tdt-muted); }
.tdt-compare a {
    color: var(--tdt-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tdt-orange);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.tdt-compare a:hover { color: var(--tdt-orange-deep); }

.tdt-guia__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(16px, 2.4vw, 28px);
    margin-top: clamp(28px, 3.6vw, 40px);
}
.tdt-guia__cta p { flex: 1 1 420px; max-width: 70ch; margin: 0; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; color: var(--tdt-ink); }

@media (max-width: 760px) {
    .tdt-compare, .tdt-compare tbody, .tdt-compare tr,
    .tdt-compare tbody th, .tdt-compare td { display: block; width: 100%; }
    .tdt-compare { border: 0; box-shadow: none; background: transparent; }
    .tdt-compare thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .tdt-compare tbody tr {
        border: 2px solid var(--tdt-ink);
        border-top: 3px solid var(--tdt-orange);
        background: var(--tdt-white);
        box-shadow: 4px 4px 0 var(--tdt-ink);
        margin-bottom: 16px;
        padding: clamp(14px, 3vw, 18px);
    }
    .tdt-compare tbody tr:last-child { border-bottom: 2px solid var(--tdt-ink); }
    .tdt-compare tbody th, .tdt-compare td { padding: 0; white-space: normal; }
    .tdt-compare td { margin-top: 12px; }
    .tdt-compare td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--tdt-font-mono);
        font-size: 0.88rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tdt-ink);
        margin-bottom: 4px;
    }
}

/* ─── Por color (chip) ───────────────────────────────────────────────────── */
.tdt-colorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.tdt-colorchip {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px;
    background: var(--tdt-white); border: 2px solid var(--tdt-ink);
    text-decoration: none;
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-colorchip:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tdt-orange); }
.tdt-colorchip__swatch { width: 22px; height: 22px; flex-shrink: 0; background: var(--tdt-swatch, var(--tdt-orange)); border: 1px solid rgba(31, 37, 48, 0.25); }
.tdt-colorchip__label { font-family: var(--tdt-font-body); font-weight: 700; font-size: 0.86rem; color: var(--tdt-ink); }

/* ─── Por temporada (usa la misma gramática de tile foto que usegrid) ──────── */
/* Las miniaturas de temporada son banners 850×500 con el nombre impreso a la
   derecha: se respeta su proporción para no recortarlos. 9 fichas → 3×3. */
.tdt-seasongrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 18px); }
@media (max-width: 900px) { .tdt-seasongrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tdt-seasongrid { grid-template-columns: 1fr; } }
.tdt-seasoncard { position: relative; display: block; aspect-ratio: 850 / 500; overflow: hidden; text-decoration: none; border: 2px solid var(--tdt-ink); }
.tdt-seasoncard picture, .tdt-seasoncard img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--tdt-ease); }
.tdt-seasoncard:hover img { transform: scale(1.06); }
.tdt-seasoncard__label {
    position: absolute; inset: auto 0 0 0; padding: 10px 12px;
    background: linear-gradient(to top, rgba(31, 37, 48, 0.88), transparent);
    color: var(--tdt-white); font-family: var(--tdt-font-display); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.02em;
}

/* ─── Móvil: parrillas deslizables en horizontal ─────────────────────────────
   Composición, ropa, salud, uso y temporada no se apilan en <768px: una fila
   con scroll-snap que llega al borde de la pantalla y deja asomar la siguiente
   tarjeta como pista de que se desliza. */
@media (max-width: 767.98px) {
    .tdt-cardgrid,
    .tdt-seasongrid {
        --tdt-bleed: clamp(20px, 4vw, 48px);        /* = padding lateral de .tdt-container */
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--tdt-bleed);
        margin-inline: calc(-1 * var(--tdt-bleed));
        padding: 4px var(--tdt-bleed) 14px;           /* aire para la sombra sólida */
        scrollbar-width: none;
    }
    .tdt-cardgrid::-webkit-scrollbar,
    .tdt-seasongrid::-webkit-scrollbar { display: none; }
    .tdt-cardgrid > .tdt-card { flex: 0 0 78%; scroll-snap-align: start; }
    .tdt-seasongrid > .tdt-seasoncard { flex: 0 0 82%; scroll-snap-align: start; }
}

/* =========================================================================
   FAQ (Dossier · acordeón ax-faq.js) — idéntico a pol-faq
   ========================================================================= */
.tdt-faqsec__grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.tdt-faqsec__title { margin-bottom: clamp(10px, 1.4vw, 14px); }
.tdt-faqsec__note { font-size: 0.94rem; line-height: 1.6; color: var(--tdt-muted); margin: 0 0 clamp(16px, 2vw, 20px); }
.tdt-faq { display: flex; flex-direction: column; gap: 12px; }
.tdt-faq__item { background: var(--tdt-white); border: 1.5px solid var(--tdt-rule); transition: border-color var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-faq__item:hover { border-color: var(--tdt-ink); }
.tdt-faq__item[open] { border-color: var(--tdt-ink); border-left: 4px solid var(--tdt-orange); box-shadow: 5px 5px 0 var(--tdt-ink); }
.tdt-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); }
.tdt-faq__q::-webkit-details-marker { display: none; }
.tdt-faq__q h3 { font-family: var(--tdt-font-body); font-weight: 700; font-size: clamp(0.98rem, 1.4vw, 1.1rem); line-height: 1.35; color: inherit; margin: 0; min-width: 0; }
.tdt-faq__q::after {
    content: "+"; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    font-family: var(--tdt-font-display); font-size: 1.35rem; line-height: 1;
    background: var(--tdt-cream); color: var(--tdt-orange-deep); border: 1.5px solid var(--tdt-ink);
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), background var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-faq__item[open] > .tdt-faq__q { color: var(--tdt-orange-deep); }
.tdt-faq__item[open] > .tdt-faq__q::after { transform: rotate(45deg); background: var(--tdt-orange); color: var(--tdt-paper); border-color: var(--tdt-orange); }
.tdt-faq__q:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: -3px; }
.tdt-faq__a { font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.65; color: var(--tdt-muted); max-width: 70ch; margin: 0; padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px); }
.tdt-faq__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tdt-orange-deep); text-decoration: none; }
.tdt-faq__cta:hover { color: var(--tdt-ink); }
.tdt-reveal { overflow: hidden; }
@media (max-width: 900px) { .tdt-faqsec__grid { grid-template-columns: 1fr; } }

/* ─── CTA final (ink) ────────────────────────────────────────────────────── */
.tdt-section--ink { background: var(--tdt-ink); color: var(--tdt-paper); }
.tdt-section--ink .tdt-title { color: var(--tdt-paper); }
.tdt-ctafinal { text-align: center; max-width: 780px; margin: 0 auto; }
.tdt-ctafinal p { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: rgba(250, 246, 238, 0.84); margin: 0 0 clamp(24px, 3vw, 32px); }
.tdt-ctafinal__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tdt-section--ink .tdt-cta--ink { background: var(--tdt-paper); color: var(--tdt-ink); box-shadow: 8px 8px 0 var(--tdt-orange); }
.tdt-section--ink .tdt-cta--ink:hover { color: var(--tdt-ink); }

/* =========================================================================
   Botón flotante de navegación (tdt-fab.js) — idéntico a pol-fab
   ========================================================================= */
.tdt-fab { position: fixed; left: 16px; bottom: 24px; z-index: 110; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: var(--tdt-font-body); }
.tdt-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s var(--tdt-ease), visibility 0.2s, transform 0.2s var(--tdt-ease); }
.tdt-fab__toggle {
    order: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 14px 20px;
    background: var(--tdt-ink); color: var(--tdt-paper); border: 2px solid var(--tdt-ink); border-radius: 0; cursor: pointer;
    font-family: var(--tdt-font-display); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    box-shadow: 5px 5px 0 var(--tdt-orange);
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-fab__toggle i { font-size: 1.1em; color: var(--tdt-orange); }
.tdt-fab__toggle:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tdt-orange); }
.tdt-fab__toggle:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--tdt-orange); }
.tdt-fab__toggle:focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: 3px; }
.tdt-fab.is-open .tdt-fab__toggle i::before { content: "\f00d"; }
.tdt-fab__panel {
    order: 1; width: min(300px, calc(100vw - 32px)); max-height: min(70vh, 560px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--tdt-white); border: 2px solid var(--tdt-ink); border-top: 3px solid var(--tdt-orange);
    box-shadow: 7px 7px 0 var(--tdt-ink); padding: clamp(14px, 2vw, 18px);
}
.tdt-fab__panel[hidden] { display: none; }
.tdt-fab__title { font-family: var(--tdt-font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tdt-muted); margin: 0 0 10px; }
.tdt-fab__list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--tdt-rule); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tdt-fab__list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 6px; border-bottom: 1px solid var(--tdt-rule); color: var(--tdt-ink); text-decoration: none; font-size: 0.92rem; font-weight: 700; line-height: 1.25; transition: background var(--tdt-motion-fast) var(--tdt-ease), color var(--tdt-motion-fast) var(--tdt-ease), padding-left var(--tdt-motion-fast) var(--tdt-ease); }
.tdt-fab__list a:hover, .tdt-fab__list a:focus-visible { background: var(--tdt-ink); color: var(--tdt-paper); padding-left: 12px; text-decoration: none; }
.tdt-fab__num { flex: 0 0 auto; font-family: var(--tdt-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--tdt-muted); font-variant-numeric: tabular-nums; }
.tdt-fab__list a:hover .tdt-fab__num, .tdt-fab__list a:focus-visible .tdt-fab__num { color: var(--tdt-orange); }
.tdt-fab__cta {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 16px;
    background: var(--tdt-orange); color: #fff; border: 2px solid var(--tdt-ink); text-decoration: none;
    font-family: var(--tdt-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(--tdt-orange-deep);
    transition: transform var(--tdt-motion-fast) var(--tdt-ease), box-shadow var(--tdt-motion-fast) var(--tdt-ease);
}
.tdt-fab__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tdt-orange-deep); color: #fff; text-decoration: none; }
.tdt-fab__cta:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--tdt-orange-deep); }
@media (max-width: 575px) { .tdt-fab { left: 12px; bottom: 16px; } }

/* ─── Sección que envuelve el include de layouts.tipos-telas-nuevo ──────── */
.tdt-catalogo-wrap { padding-top: 0; }

/* ─── Accesibilidad / reduced motion ─────────────────────────────────────── */
.tdt-page :focus-visible { outline: 3px solid var(--tdt-orange); outline-offset: 2px; }
.tdt-section--ink :focus-visible { outline-color: var(--tdt-yellow); }
@media (prefers-reduced-motion: reduce) {
    .tdt-card, .tdt-colorchip, .tdt-cta, .tdt-hbanner, .tdt-usechip::before, .tdt-fab.is-hidden { transition: none; }
}