/* =========================================================================
   Arletex Design System v3.5 — Tela para Tote Bags (/telas/tote-bags-tela)
   Hoja editorial por página. Prefijo de clase y de token: tote- / --tote-*.
   Tokens locales con fallback a --ax-* global y, si no, a hex del sistema.
   ─────────────────────────────────────────────────────────────────────────
   TEMA: la página responde "¿qué tela uso para mis tote bags?" y compara
   Manta, Loneta y poliéster para sublimar (Cholula, Tafetán, Sarga). Esqueleto portado
   de la TSG de algodón (alg- → tote-): tokens, marcos, eyebrow stamp,
   títulos, CTAs chunky, índice de accesos, versus, notas, cotizador en
   banda ink, FAQ, cierre y FAB global.
   Componentes propios de esta página: .tote-quick (guía rápida con número
   protagonista), .tote-compare (tabla que colapsa a fichas), .tote-prods
   (zigzag), .tote-trio/.tote-swatches (tarjetas con muestrario), .tote-verdict,
   .tote-band/.tote-tags/.tote-polys, .tote-picker (ledger con dot-leader), .tote-gallery
   (mosaico 6×2 con áreas), .tote-opts/.tote-hint (cotizador), .tote-define
   (Margin-frame + capitular) y .tote-links (tarjetas enlazadas).
   ≥55% blanco; ink como puntuación (banda de mayoreo).

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     01 Hero              Vitrina    · Dossier + figura        · Top-rule   · white · press-chunky
     02 Índice            Almanaque  · IndexRow (parrilla)     · Index-tab  · paper · ink-flood
     03 Guía rápida       Periódico  · NumberProtagonist+ficha · —          · white · rule-draw
     04 Comparador        Técnico    · LabelLateral + tabla    · Double     · cream · —
     05 Manta             Periódico  · Zigzag (2 fichas)       · —          · white · lift-orange
     06 Loneta            Vitrina    · Trío de tarjetas        · Side-rule  · paper · lift-orange
     07 Manta vs Loneta   Periódico  · Versus                  · Double     · white · side-shift
     08 Poliéster         Vitrina    · Band + 2 fichas         · Bleed-edge · cream · press-chunky
     09 Cómo elegir       Almanaque  · IndexRow (ledger)       · Top-rule   · white · ink-flood
     10 Personalización   Galería    · Mosaico 5 fotos         · —          · paper · caption fijo
     11 Rollos+Cotizador  Manifiesto · MegaTextBg + FormCard   · Bleed      · INK   · press-chunky
     12 Cantidad de tela  Almanaque  · RunIn + factores        · —          · white · —
     13 ¿Qué es?          Carta      · DropCap                 · Margin     · cream · —
     14 FAQ               Dossier    · RunIn + acordeón        · Top-rule   · white · side-shift
     15 Telas             Vitrina    · 5 tarjetas enlazadas    · Double     · white · lift-orange
     16 Cierre            Manifiesto · Caja centrada           · Full-frame · paper · press-chunky
   Convenciones: radius 0 (solo pills 9999px en .tote-tags); sombras sólidas
   offset sin blur; ningún texto visible < 14px; hovers solo dentro de
   @media (hover: hover) (el foco por teclado vive fuera).
   ========================================================================= */

/* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */
.tote-page,
.tote-section {
    --tote-ink:           var(--ax-ink, #1F2530);
    --tote-paper:         var(--ax-paper, #FAF6EE);
    --tote-cream:         var(--ax-cream, #F2EDE4);
    --tote-white:         var(--ax-white, #FFFFFF);
    --tote-orange:        var(--ax-orange, #F15A29);
    --tote-orange-deep:   var(--ax-orange-deep, #B0401A);
    --tote-purple:        var(--ax-purple, #6A52A2);
    --tote-yellow:        var(--ax-yellow, #FFEB3B);
    --tote-muted:         var(--ax-muted, #6E6A60);
    --tote-muted-dark:    var(--ax-muted-dark, #A8A39A);
    --tote-whatsapp:      var(--ax-whatsapp, #25D366);
    --tote-whatsapp-deep: #128C4B;
    /* Tripletas RGB de ink y paper: para velos, hairlines y degradados sin
       hex sueltos fuera de este bloque. */
    --tote-ink-rgb:       31, 37, 48;
    --tote-paper-rgb:     250, 246, 238;
    --tote-rule:          rgba(var(--tote-ink-rgb), 0.16);
    --tote-rule-strong:   rgba(var(--tote-ink-rgb), 0.4);
    --tote-rule-on-dark:  rgba(var(--tote-paper-rgb), 0.18);
    --tote-font-display:  var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --tote-font-accent:   var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --tote-font-body:     var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --tote-font-mono:     var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    --tote-ease:          cubic-bezier(0.22, 1, 0.36, 1);
    --tote-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. */
.tote-page { overflow-x: clip; }
/* El reset de caja y el foco cuelgan de .tote-section (no de .tote-page): los
   partials globales (pagos, beneficios, comentarios) viven en <section> sin
   clase dentro del wrapper y no se tocan. */
.tote-section *,
.tote-section *::before,
.tote-section *::after { box-sizing: border-box; }

/* Foco visible global (nunca se elimina). Va aquí, antes de los componentes,
   para que cada uno pueda afinar el offset por orden; sobre la banda ink el
   anillo es amarillo (la card paper del cotizador lo devuelve a naranja). */
.tote-section :focus-visible {
    outline: 3px solid var(--tote-orange);
    outline-offset: 3px;
    border-radius: 0;
}
.tote-section--ink :focus-visible { outline-color: var(--tote-yellow); }

/* Anclas por debajo del header fixed (113 / 104 / 158px según breakpoint).
   Aplica a secciones, fichas con id (article), subtítulos y al cotizador. */
.tote-section[id],
.tote-prod[id],
.tote-card[id],
.tote-poly[id],
.tote-subhead[id],
.tote-form[id] { scroll-margin-top: 125px; }
@media (max-width: 1080px) {
    .tote-section[id],
    .tote-prod[id],
    .tote-card[id],
    .tote-poly[id],
    .tote-subhead[id],
    .tote-form[id] { scroll-margin-top: 116px; }
}
@media (max-width: 767px) {
    .tote-section[id],
    .tote-prod[id],
    .tote-card[id],
    .tote-poly[id],
    .tote-subhead[id],
    .tote-form[id] { scroll-margin-top: 170px; }
}

/* ─── Section base ──────────────────────────────────────────────────────── */
.tote-section {
    width: 100%;
    position: relative;
    background: var(--tote-white);
    color: var(--tote-ink);
    font-family: var(--tote-font-body);
    line-height: 1.5;
    padding: clamp(48px, 8vw, 96px) 0;
}
.tote-section--paper { background: var(--tote-paper); }
.tote-section--cream { background: var(--tote-cream); color: var(--tote-ink); }
.tote-section--snug  { padding: clamp(38px, 6vw, 68px) 0; }
/* Hero: pegado al breadcrumb, sin el aire de una sección corriente. */
.tote-section--hero  { padding: clamp(34px, 5vw, 64px) 0 clamp(48px, 8vw, 96px); }

.tote-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
/* Guía de decisión, consumo y definición: a 1600px el ledger y los factores
   se estiran sin ganar nada; la prosa sigue topada por .tote-prose. */
.tote-container--mid { max-width: 1080px; }

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

/* Index-tab (pestaña de archivador) */
.tote-section--index-tab { border-top: 2px solid var(--tote-ink); }
.tote-tab {
    position: absolute;
    top: 0;
    /* Alineada con el borde de texto del .tote-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(--tote-ink);
    color: var(--tote-paper);
    font-family: var(--tote-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: 6px 14px;
    z-index: 2;
    white-space: nowrap;
}

/* Full-frame (máx 1 por página — el cierre) */
.tote-section--full-frame {
    border: 2px solid var(--tote-ink);
    margin: clamp(16px, 3vw, 32px) clamp(14px, 3vw, 32px);
    width: auto;
}

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

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

/* ─── Display title Anton + <em> Fraunces (N-04/N-05) ──────────────────────
   style.css fuerza h1 40/30px, h2 30/28px y h3 25px con !important: todo
   titular propio lleva su font-size !important para ganar por especificidad. */
.tote-title {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tote-ink);
    line-height: 0.92;
    letter-spacing: -0.005em;
    margin: 0;
}
.tote-title--xl { font-size: clamp(2.5rem, 6.4vw, 5rem) !important; }
.tote-title--lg { font-size: clamp(2.1rem, 5.4vw, 4.1rem) !important; }
.tote-title--md { font-size: clamp(1.85rem, 4.2vw, 3.2rem) !important; }
.tote-title--sm { font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important; }
.tote-title em {
    font-family: var(--tote-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--tote-orange);
}

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

.tote-prose { max-width: 74ch; }
/* Prosa a dos columnas (Manta y Loneta): 2-3 párrafos cortos en 74ch dejaban
   media sección vacía a la derecha; en columnas llena el ancho sin alargar
   las líneas. */
@media (min-width: 992px) {
    .tote-prose--cols {
        max-width: none;
        columns: 2;
        column-gap: clamp(32px, 4vw, 64px);
        column-rule: 2px solid var(--tote-rule);
    }
    .tote-prose--cols p { break-inside: avoid; }
}
.tote-prose p {
    font-family: var(--tote-font-body);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
    color: var(--tote-ink);
    margin: 0 0 1.1em;
}
.tote-prose p:last-child { margin-bottom: 0; }
.tote-prose strong { font-weight: 800; }
.tote-prose a {
    color: var(--tote-ink);
    text-decoration: underline;
    text-decoration-color: var(--tote-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: text-underline-offset var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}

/* Subtítulo suelto dentro de una columna de prosa (Tela Cholula en la banda
   de poliéster) — mismo tratamiento que .tote-title a menor escala. */
.tote-subhead {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tote-ink);
    line-height: 1.05;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important;
    margin: clamp(22px, 3vw, 30px) 0 10px;
}
.tote-subhead em {
    font-family: var(--tote-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--tote-orange-deep);   /* texto < 24px: orange puro no llega a AA sobre claro */
}

@media (hover: hover) {
    .tote-lead a:hover { color: var(--tote-orange-deep); }
    .tote-prose a:hover { color: var(--tote-orange-deep); text-underline-offset: 4px; }
}

/* ─── Acciones + CTA chunky (press-chunky · radius 0) ──────────────────── */
.tote-actions {
    margin-top: clamp(24px, 3.6vw, 34px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
/* Cierre de sección (Manta y Loneta): el CTA de cotizar se alinea al borde
   final de la rejilla; en móvil se centra. */
.tote-actions--end {
    justify-content: center;
    margin-top: clamp(40px, 6vw, 64px);
}
@media (min-width: 700px) {
    .tote-actions--end { justify-content: flex-end; }
}

.tote-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    min-height: 48px;
    font-family: var(--tote-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(--tote-ink);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-cta--ink {
    background: var(--tote-ink);
    color: var(--tote-paper);
    box-shadow: 8px 8px 0 var(--tote-orange);
}
.tote-cta--ink:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tote-orange); }
/* CTA verde que baja al cotizador (el formulario termina en WhatsApp) y CTA
   directo a WhatsApp. Texto en ink: blanco sobre el verde da 1.98:1. */
.tote-cta--quote,
.tote-cta--whatsapp {
    background: var(--tote-whatsapp);
    color: var(--tote-ink);
    box-shadow: 8px 8px 0 var(--tote-ink);
}
.tote-cta--quote:active,
.tote-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--tote-ink); }
.tote-cta--quote i { font-size: 1.15em; line-height: 1; }
.tote-cta--whatsapp i { font-size: 1.3em; line-height: 1; }

.tote-cta--sm {
    padding: 12px 22px;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    box-shadow: 6px 6px 0 var(--tote-ink);
}
.tote-cta--sm:active { box-shadow: 3px 3px 0 var(--tote-ink); }

@media (hover: hover) {
    .tote-cta--ink:hover {
        transform: translate(-3px, -3px);
        box-shadow: 11px 11px 0 var(--tote-orange);
        color: var(--tote-paper);
        text-decoration: none;
    }
    .tote-cta--quote:hover,
    .tote-cta--whatsapp:hover {
        transform: translate(-3px, -3px);
        box-shadow: 11px 11px 0 var(--tote-ink);
        color: var(--tote-ink);
        text-decoration: none;
    }
    .tote-cta--sm:hover { box-shadow: 8px 8px 0 var(--tote-ink); }
}

/* ─── Botón (navegación a otra TSG / ver producto) ──────────────────────── */
.tote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 13px 22px;
    min-height: 44px;
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    border: 2px solid var(--tote-ink);
    border-radius: 0;
    cursor: pointer;
    color: var(--tote-ink);
    background: transparent;
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease),
                background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
.tote-btn i { flex: 0 0 auto; transition: transform var(--tote-motion-fast) var(--tote-ease); }
/* Sólido naranja: texto en ink (4.56:1); blanco sobre naranja da 3.37:1 y a
   14px no llega a AA. */
.tote-btn--solid {
    background: var(--tote-orange);
    color: var(--tote-ink);
    box-shadow: 0 5px 0 var(--tote-orange-deep);
}
.tote-btn--solid:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tote-orange-deep); }
/* "Cotizar…": baja al formulario, que termina abriendo WhatsApp — de ahí el
   verde. Texto en ink: 7.75:1. */
.tote-btn--quote {
    background: var(--tote-whatsapp);
    color: var(--tote-ink);
    box-shadow: 0 5px 0 var(--tote-whatsapp-deep);
}
.tote-btn--quote:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tote-whatsapp-deep); }
.tote-btn--outline:focus-visible { background: var(--tote-ink); color: var(--tote-white); }

@media (hover: hover) {
    .tote-btn--outline:hover { background: var(--tote-ink); color: var(--tote-white); text-decoration: none; }
    .tote-btn--outline:hover i { transform: translateX(4px); }
    .tote-btn--solid:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 0 var(--tote-orange-deep);
        color: var(--tote-ink);
        text-decoration: none;
    }
    .tote-btn--solid:hover i { transform: translateX(4px); }
    .tote-btn--quote:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 0 var(--tote-whatsapp-deep);
        color: var(--tote-ink);
        text-decoration: none;
    }
}

/* ─── Imágenes de contenido: filete interior que asienta el borde ─────────── */
.tote-section img {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
}

/* ─── Figura editorial (frame-chunky · radius 0) ───────────────────────── */
.tote-figure {
    margin: 0;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    border-top: 3px solid var(--tote-orange);
    box-shadow: 10px 10px 0 var(--tote-ink);
    line-height: 0;
}
.tote-figure img { display: block; width: 100%; height: auto; }

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

/* =========================================================================
   01 · Hero — Vitrina · Dossier + figura · Top-rule · white
   La figura es hija directa de .tote-hero (no hay columna lateral): en
   ≤900px queda DEBAJO del texto (orden del DOM). Con la figura arriba, el
   primer pantallazo móvil (header de 158px) no alcanzaba a mostrar los CTA
   ni la respuesta directa — lo que pide el filtro de calidad para una TSG.
   ========================================================================= */
.tote-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}
.tote-hero__text { min-width: 0; }
.tote-hero__media { min-width: 0; margin: 0; }
@media (max-width: 900px) {
    .tote-hero { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 38px); }
    .tote-hero__media {
        /* Las fotos miden 700px nativos: no se estiran más en tablet. */
        width: 100%;
        max-width: 700px;
        margin-inline: auto;
    }
}
.tote-hero__head { margin-bottom: clamp(14px, 2vw, 20px); }
/* Móvil: el header fijo mide 158px y el breadcrumb legacy otros ~70px. Se
   compacta solo el arranque del hero para que el primer CTA entre en el
   primer pantallazo (390×844) sin reordenar el contenido. */
@media (max-width: 767px) {
    .tote-section--hero { padding-top: 24px; }
    .tote-section--hero .tote-eyebrow { margin-bottom: 10px; }
    .tote-hero__head { margin-bottom: 10px; }
    .tote-hero__q { margin-bottom: 8px; }
    .tote-hero .tote-lead + .tote-lead { margin-top: 10px; }
    .tote-hero .tote-actions { margin-top: 16px; }
}
/* Con la columna de texto estrecha (901-1240px) el H1 a escala completa se
   partía en cuatro líneas y dejaba la figura sola a media altura. */
@media (min-width: 901px) and (max-width: 1240px) {
    .tote-hero .tote-title--xl { font-size: clamp(2.4rem, 4.9vw, 3.6rem) !important; }
}

/* Subtítulo del H1: resume de qué trata toda la landing (las 5 telas y los
   criterios de comparación). Side-rule naranja para separarlo de la
   pregunta en negritas que va debajo. */
.tote-hero__sub {
    max-width: 46ch;
    margin: clamp(14px, 2vw, 20px) 0 0;
    padding-left: clamp(12px, 1.4vw, 16px);
    border-left: 4px solid var(--tote-orange);
    font-family: var(--tote-font-body);
    font-weight: 400;
    font-size: clamp(1.12rem, 1.7vw, 1.4rem);
    line-height: 1.45;
    color: var(--tote-ink);
}
.tote-hero__sub strong { font-weight: 800; }

/* La pregunta del visitante, entre el H1 y los leads: la frase que sus
   clientes escriben en el buscador. */
.tote-hero__q {
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.4;
    color: var(--tote-ink);
    max-width: 52ch;
    margin: 0 0 clamp(12px, 1.8vw, 16px);
}

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

/* Barra de garantías (venta por rollo · envíos · factura) — el dato que el
   cliente busca de un vistazo: tres fichas con el lenguaje de las cards
   (borde ink 2px, top-rule orange, sombra sólida). */
.tote-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;
}
.tote-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(--tote-white);
    border: 2px solid var(--tote-ink);
    border-top: 3px solid var(--tote-orange);
    box-shadow: 4px 4px 0 var(--tote-ink);
    font-family: var(--tote-font-display);
    font-weight: 400;
    font-size: clamp(0.875rem, 1.05vw, 1.02rem);
    letter-spacing: 0.015em;
    text-transform: uppercase;
    line-height: 1.08;
    color: var(--tote-ink);
}
.tote-meta li i {
    flex: 0 0 auto;
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    line-height: 1;
    color: var(--tote-orange);
}
/* En móvil el auto-fit dejaba 2+1 con una ficha huérfana: apiladas. */
@media (max-width: 560px) {
    .tote-meta { grid-template-columns: 1fr; }
    .tote-meta li { min-height: 62px; }
}

/* =========================================================================
   02 · Índice de accesos — FIRMA heredada de algodón/poliéster
   9 celdas = 8 fichas que bajan a su sección + la celda de cotizar.
   4 columnas en desktop (la celda de cotizar ocupa la fila entera), 3+3+3 a
   ≤1024px y 2 columnas a ≤640px (otra vez fila entera). Hover ink-flood.
   ========================================================================= */
.tote-usebar__note {
    font-family: var(--tote-font-body);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    color: var(--tote-ink);
    max-width: 62ch;
    margin: 0 0 clamp(22px, 3vw, 30px);
}

/* Tabla-índice sin gaps: hairlines compartidas. */
.tote-usegrid {
    list-style: none;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--tote-ink);
    border-left: 1px solid var(--tote-ink);
}
@media (max-width: 1024px) { .tote-usegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tote-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. */
.tote-usegrid > li { display: flex; min-width: 0; }
/* Celda de cotizar: fila entera a 4 y a 2 columnas; una celda más a 3. */
.tote-usegrid__quote { grid-column: 1 / -1; }
@media (min-width: 641px) and (max-width: 1024px) {
    .tote-usegrid__quote { grid-column: auto; }
}

.tote-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(--tote-ink);
    border-right: 1px solid var(--tote-ink);
    border-bottom: 1px solid var(--tote-ink);
    color: var(--tote-paper);
    text-decoration: none;
    transition: color var(--tote-motion-fast) var(--tote-ease);
}
/* Foto del acceso: la pasa el Blade como --tote-usechip-img (con
   cache-buster). Va en un pseudo para poder hacerle zoom sin mover el texto. */
.tote-usechip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--tote-usechip-img, none) center / cover no-repeat;
    transition: transform 0.5s var(--tote-ease),
                filter 0.35s var(--tote-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. */
.tote-usechip::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(var(--tote-ink-rgb), 0.55) 0%,
        rgba(var(--tote-ink-rgb), 0.92) 100%);
    opacity: 0.3;
    transition: opacity 0.35s var(--tote-ease);
}
.tote-usechip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tote-usechip__num {
    font-family: var(--tote-font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--tote-paper);
    font-variant-numeric: tabular-nums;
    /* Mismo halo que el nombre: sobre fotos claras el paper solo no se lee. */
    text-shadow: 0 1px 2px rgba(var(--tote-ink-rgb), 0.8), 0 0 10px rgba(var(--tote-ink-rgb), 0.6);
    transition: color var(--tote-motion-fast) var(--tote-ease);
}
/* Flecha: única señal de que la ficha baja a una sección de esta misma
   página en lugar de navegar fuera. */
.tote-usechip__cue {
    font-size: 0.9rem;
    color: var(--tote-paper);
    text-shadow: 0 1px 2px rgba(var(--tote-ink-rgb), 0.8), 0 0 10px rgba(var(--tote-ink-rgb), 0.6);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
/* El nombre es un <span>, no un titular (el índice no debe poblar el outline
   de headings); lleva !important por si un h-tag lo reemplaza. */
.tote-usechip__name {
    display: block;
    color: inherit;
    transition: color var(--tote-motion-fast) var(--tote-ease);
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem) !important;
    line-height: 1.05;
    letter-spacing: 0.005em;
    margin: 0;
    text-shadow: 0 1px 2px rgba(var(--tote-ink-rgb), 0.7), 0 0 12px rgba(var(--tote-ink-rgb), 0.55);
}

/* Estado "encendido": hover (solo con puntero) y foco de teclado. El velo se
   aclara, el nombre pasa a naranja y la flecha baja. */
.tote-usechip:focus-visible { color: var(--tote-white); text-decoration: none; outline-offset: -3px; }
.tote-usechip:focus-visible::before { transform: scale(1.06); }
.tote-usechip:focus-visible::after { opacity: 0.3; }
.tote-usechip:focus-visible .tote-usechip__name { color: var(--tote-orange); }
.tote-usechip:focus-visible .tote-usechip__num { color: var(--tote-orange); }
.tote-usechip:focus-visible .tote-usechip__cue { color: var(--tote-orange); transform: translateY(3px); }

@media (hover: hover) {
    .tote-usechip:hover { color: var(--tote-white); text-decoration: none; }
    .tote-usechip:hover::before { transform: scale(1.06); }
    .tote-usechip:hover::after { opacity: 0.3; }
    /* Las fichas hermanas se apagan mientras hay una activa: el velo sube y la
       foto se desatura, para que la encendida resalte. */
    .tote-usegrid:has(.tote-usechip:hover) .tote-usechip:not(:hover)::after { opacity: 1; }
    .tote-usegrid:has(.tote-usechip:hover) .tote-usechip:not(:hover)::before { filter: saturate(0.6); }
    .tote-usechip:hover .tote-usechip__name { color: var(--tote-orange); }
    .tote-usechip:hover .tote-usechip__num { color: var(--tote-orange); }
    .tote-usechip:hover .tote-usechip__cue { color: var(--tote-orange); transform: translateY(3px); }
}

/* Penúltima celda: acceso a las preguntas frecuentes (sin foto). Fondo neutro
   y texto claro, como remate de la parrilla. */
.tote-usechip--all {
    background: var(--tote-ink);
    color: var(--tote-paper);
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
.tote-usechip--all::before,
.tote-usechip--all::after { display: none; }
.tote-usechip--all .tote-usechip__name { text-shadow: none; font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important; }
.tote-usechip--all .tote-usechip__num,
.tote-usechip--all .tote-usechip__cue { text-shadow: none; }
.tote-usechip--all:focus-visible { background: var(--tote-white); color: var(--tote-ink); }
.tote-usechip--all:focus-visible .tote-usechip__name,
.tote-usechip--all:focus-visible .tote-usechip__num,
.tote-usechip--all:focus-visible .tote-usechip__cue { color: var(--tote-ink); }
@media (hover: hover) {
    .tote-usechip--all:hover { background: var(--tote-white); color: var(--tote-ink); }
    .tote-usechip--all:hover .tote-usechip__name,
    .tote-usechip--all:hover .tote-usechip__num,
    .tote-usechip--all:hover .tote-usechip__cue { color: var(--tote-ink); text-shadow: none; }
}

/* Celda de cotizar: naranja con texto ink (4.56:1); única ficha que abre el
   formulario en lugar de bajar a una sección. */
.tote-usechip--quote {
    background: var(--tote-orange);
    color: var(--tote-ink);
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
.tote-usechip--quote::before,
.tote-usechip--quote::after { display: none; }
.tote-usechip--quote .tote-usechip__num {
    font-family: var(--tote-font-display);
    text-transform: uppercase;
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    color: var(--tote-ink);
    text-shadow: none;
}
.tote-usechip--quote .tote-usechip__name {
    text-shadow: none;
    font-size: clamp(1.1rem, 1.7vw, 1.45rem) !important;
}
.tote-usechip--quote:focus-visible { background: var(--tote-ink); color: var(--tote-paper); }
.tote-usechip--quote:focus-visible .tote-usechip__name,
.tote-usechip--quote:focus-visible .tote-usechip__num { color: var(--tote-paper); }
@media (hover: hover) {
    .tote-usechip--quote:hover { background: var(--tote-ink); color: var(--tote-paper); }
    .tote-usechip--quote:hover .tote-usechip__name,
    .tote-usechip--quote:hover .tote-usechip__num { color: var(--tote-paper); text-shadow: none; }
}
/* Cuando ocupa la fila entera (4 y 2 columnas) deja de ser una ficha alta:
   nombre a la izquierda, flecha a la derecha. */
@media (min-width: 1025px), (max-width: 640px) {
    .tote-usechip--quote {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        min-height: 96px;
    }
    .tote-usechip--quote .tote-usechip__name {
        font-size: clamp(1.25rem, 2.2vw, 1.9rem) !important;
    }
}

/* =========================================================================
   03 · Guía rápida — Periódico · NumberProtagonist + ficha técnica
   Cabecera + prosa + nota de estampado a la izquierda (4fr, sticky en
   escritorio) y la lista de telas a la derecha (8fr). Cada fila: foto de
   textura 7:5 grande a la izquierda y, a su lado, número en Anton naranja,
   nombre, descripción y ficha en renglones (ancho · metraje · composición ·
   estampado ideal) en papel.
   ========================================================================= */
.tote-quick {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
@media (min-width: 1200px) {
    .tote-quick { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    /* La lista mide ~3 veces la cabecera: la cabecera acompaña al lector
       (debajo del header fixed de 113px). */
    .tote-quick__head { position: sticky; top: 137px; }
}
.tote-quick__head { min-width: 0; }
.tote-quick__head .tote-prose { margin-top: clamp(16px, 2.2vw, 24px); }

.tote-quick__list {
    --tote-quick-num: clamp(56px, 5.4vw, 80px);
    --tote-quick-media: clamp(260px, 50%, 440px);
    --tote-quick-gap: clamp(20px, 2.6vw, 32px);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--tote-ink);
}
/* Foto grande a la izquierda (½ de la lista) y, a su lado, número +
   nombre, descripción, ficha en renglones y enlace. */
.tote-quick__item {
    display: grid;
    grid-template-columns: var(--tote-quick-media) var(--tote-quick-num) minmax(0, 1fr);
    grid-template-areas:
        "media num   name"
        "media desc  desc"
        "media specs specs"
        "media go    go";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    padding: clamp(24px, 3vw, 36px) 0;
    border-top: 1px solid var(--tote-rule);
}
.tote-quick__item:first-child { border-top: 0; }
.tote-quick__item:last-child { border-bottom: 1px solid var(--tote-rule); }

/* El número es el protagonista: grande y en naranja (texto de ≥38px, AA de
   texto grande); es decorativo (aria-hidden), el nombre ya identifica la fila.
   Número y nombre comparten línea base. */
.tote-quick__num {
    grid-area: num;
    align-self: baseline;
    font-family: var(--tote-font-display);
    text-transform: uppercase;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
    letter-spacing: 0;
    color: var(--tote-orange);
}
.tote-quick__name {
    grid-area: name;
    align-self: baseline;
    margin: 0;
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--tote-ink);
}
/* El nombre también enlaza a la landing de la tela (interlink: esta página
   no compite con la ficha de cada tela). Subrayado naranja solo al pasar. */
.tote-quick__name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tote-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--tote-motion-fast) var(--tote-ease);
}
.tote-quick__name a:focus-visible { text-decoration-color: var(--tote-orange); }
@media (hover: hover) {
    .tote-quick__name a:hover { color: var(--tote-ink); text-decoration-color: var(--tote-orange); }
}
.tote-quick__media {
    grid-area: media;
    margin: 0 var(--tote-quick-gap) 0 0;
    aspect-ratio: 7 / 5;
    background: var(--tote-cream);
    border: 2px solid var(--tote-ink);
    overflow: hidden;
    line-height: 0;
}
.tote-quick__media picture { display: block; width: 100%; height: 100%; }
.tote-quick__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tote-quick__desc {
    grid-area: desc;
    margin: 10px 0 0;
    max-width: 58ch;
    font-family: var(--tote-font-body);
    font-size: clamp(1.02rem, 1.2vw, 1.1rem);
    line-height: 1.6;
    color: var(--tote-ink);
}

/* Ficha técnica en renglones (etiqueta | valor) sobre papel, con filete
   superior ink (Top-rule): ancho · metraje · composición · estampado. */
.tote-quick__specs {
    grid-area: specs;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: clamp(14px, 1.8vw, 18px) 0 0;
    background: var(--tote-paper);
    border-top: 2px solid var(--tote-ink);
}
.tote-quick__spec {
    display: grid;
    grid-template-columns: 7.6rem minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
    min-width: 0;
    padding: 9px 14px;
    border-top: 1px solid var(--tote-rule);
}
.tote-quick__spec:first-child { border-top: 0; }
.tote-quick__spec dt {
    margin: 0;
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tote-ink);
}
.tote-quick__spec dd {
    margin: 0;
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: clamp(1.02rem, 1.25vw, 1.12rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    color: var(--tote-ink);
}
.tote-quick__hint {
    margin-left: 4px;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--tote-muted);
}
.tote-quick__spec--print dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tote-quick__spec--print .tote-quick__hint { flex-basis: 100%; margin: 0; }
/* Chips de técnica: pills (única excepción de radio, como .tote-tags). La
   técnica propia de la fibra va llena; el DTF, que sirve en ambas, en línea. */
.tote-quick__chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 14px;
    border: 1.5px solid var(--tote-ink);
    border-radius: 9999px;
    background: var(--tote-white);
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--tote-ink);
}
.tote-quick__chip--main {
    background: var(--tote-ink);
    color: var(--tote-paper);
}

/* CTA de cada tela: botón sólido naranja (mismo que "Ver Manta Cruda"),
   interlink a la landing de esa tela. */
.tote-quick__cta {
    grid-area: go;
    justify-self: start;
    margin-top: 18px;
}

/* Móvil y tablet chica: la foto baja a todo el ancho bajo el nombre. */
@media (max-width: 719px) {
    .tote-quick__item {
        grid-template-columns: var(--tote-quick-num) minmax(0, 1fr);
        grid-template-areas:
            "num   name"
            "media media"
            "desc  desc"
            "specs specs"
            "go    go";
        grid-template-rows: auto;
    }
    .tote-quick__media { margin: 14px 0 0; }
    .tote-quick__desc { margin-top: 14px; }
    .tote-quick__spec { padding: 10px 12px; }
}

/* =========================================================================
   04 · Comparador — Técnico · 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. El
   nombre de la tela es un <th scope="row">, no un <td>.
   ========================================================================= */
.tote-compare {
    width: 100%;
    border-collapse: collapse;
    margin-top: clamp(20px, 3vw, 30px);
    font-family: var(--tote-font-body);
}
/* Caption visible arriba (Bootstrap lo manda abajo, en gris y con padding). */
.tote-compare__caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 12px;
    font-family: var(--tote-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--tote-ink);
}
.tote-compare thead th {
    background: var(--tote-ink);
    color: var(--tote-paper);
    font-family: var(--tote-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;
}
/* La cabecera "Tela" ocupa una columna más ancha para que los nombres largos
   ("Loneta repelente al agua") no se partan en cuatro líneas. */
.tote-compare thead th:first-child { width: 19%; }
/* Filas blancas sobre el fondo cream de la sección. */
.tote-compare tbody tr {
    background: var(--tote-white);
    border-bottom: 1px solid var(--tote-rule);
}
.tote-compare tbody tr:last-child { border-bottom: 2px solid var(--tote-ink); }
.tote-compare td,
.tote-compare tbody th {
    padding: clamp(14px, 1.8vw, 18px) clamp(12px, 1.6vw, 18px);
    color: var(--tote-ink);
    text-align: left;
    vertical-align: top;
}
.tote-compare td {
    font-size: clamp(0.95rem, 1.2vw, 1.02rem);
    line-height: 1.55;
}
/* Anton solo existe en 400: sin font-weight el <th> hereda "bold" y el
   navegador lo sintetiza (letras manchadas). */
.tote-compare tbody th.tote-compare__name {
    font-family: var(--tote-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;
}
.tote-compare__name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tote-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--tote-motion-fast) var(--tote-ease);
}
.tote-compare__name a:focus-visible { text-decoration-color: var(--tote-orange); }
.tote-compare__diff { font-weight: 700; }

@media (hover: hover) {
    .tote-compare tbody tr:hover { background: var(--tote-paper); }
    .tote-compare tbody tr:hover .tote-compare__name { box-shadow: inset 4px 0 0 var(--tote-orange); }
    .tote-compare__name a:hover {
        color: var(--tote-ink);
        text-decoration-color: var(--tote-orange);
    }
}

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

/* Dos notas bajo la tabla: lado a lado desde 900px, apiladas en móvil. */
.tote-compare__notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 24px);
    margin-top: clamp(22px, 3vw, 30px);
}
.tote-compare__notes .tote-note { margin-top: 0; }
@media (min-width: 900px) {
    .tote-compare__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Nota de precisión + checklist — se repiten en Manta, Loneta y el
   comparador, no son exclusivas de una sola sección.
   ========================================================================= */
.tote-note {
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    border-left: 5px solid var(--tote-purple);
    box-shadow: 5px 5px 0 var(--tote-ink);
    padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
    margin-top: clamp(22px, 3vw, 30px);
}
.tote-note__lbl {
    display: inline-block;
    font-family: var(--tote-font-display);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tote-purple);
    border: 1px solid var(--tote-purple);
    padding: 3px 8px;
    line-height: 1;
    margin-bottom: clamp(10px, 1.4vw, 12px);
}
.tote-note p {
    font-family: var(--tote-font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--tote-ink);
    margin: 0;
}
.tote-note p + p { margin-top: 0.8em; }
.tote-note strong { font-weight: 800; }
.tote-note a {
    color: var(--tote-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tote-purple);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
/* Variante de advertencia ("Importante": el encogimiento de la Manta Cruda):
   acento orange-deep en lugar del purple informativo. */
.tote-note--warn {
    border-left-color: var(--tote-orange-deep);
    box-shadow: 5px 5px 0 var(--tote-orange-deep);
}
.tote-note--warn .tote-note__lbl {
    color: var(--tote-orange-deep);
    border-color: var(--tote-orange-deep);
}
@media (hover: hover) {
    .tote-note a:hover { color: var(--tote-purple); }
    .tote-note--warn a:hover { color: var(--tote-orange-deep); }
}

/* Checklist de usos — marcador cuadrado naranja con palomita (sin depender
   de FontAwesome). Una sola columna: vive en columnas estrechas (la mitad
   de un zigzag o un tercio de tarjeta). */
.tote-checks {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 10px 0 0;
    padding: 0;
}
.tote-checks li {
    position: relative;
    font-family: var(--tote-font-body);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--tote-ink);
    padding: 10px 0 10px 34px;
    border-bottom: 1px solid var(--tote-rule);
}
.tote-checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 9px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: var(--tote-orange);
    color: var(--tote-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================================
   05 · Manta — Periódico · Zigzag (2 fichas foto + texto) · lift-orange
   Cada <article> es una ficha de 2 columnas (media | cuerpo) desde 900px;
   .tote-prod--rev invierte el orden. En móvil: foto arriba y texto debajo.
   ========================================================================= */
.tote-prods {
    display: grid;
    gap: clamp(52px, 7vw, 96px);
    margin-top: clamp(32px, 4.4vw, 52px);
}
.tote-prod {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 38px);
    align-items: center;
}
@media (min-width: 900px) {
    .tote-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5.5vw, 80px); }
    .tote-prod--rev .tote-prod__media { order: 2; }
}
.tote-prod__body { min-width: 0; }
@media (max-width: 899px) {
    /* En una columna la foto no pasa de ~620px: las fuentes miden 500-700px. */
    .tote-prod__media { width: 100%; max-width: 620px; }
}

/* Foto con marco chunky: borde ink 2px + sombra sólida offset, sin blur.
   Recorte 4:3 uniforme aunque las fuentes sean 7:5 y 1:1. */
.tote-prod__media {
    margin: 0;
    min-width: 0;
    background: var(--tote-cream);
    border: 2px solid var(--tote-ink);
    box-shadow: 6px 6px 0 var(--tote-ink);
    line-height: 0;
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-prod__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.tote-prod:has(:focus-visible) .tote-prod__media {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--tote-orange);
}
@media (hover: hover) {
    .tote-prod:hover .tote-prod__media {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0 var(--tote-orange);
    }
}

.tote-prod__title {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
    line-height: 1.02;
    color: var(--tote-ink);
    margin: 0 0 clamp(12px, 1.6vw, 16px);
}
.tote-prod__lbl {
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--tote-ink);
    margin: clamp(16px, 2vw, 20px) 0 0;
}

/* =========================================================================
   06 · Loneta — Vitrina · Trío de tarjetas · Side-rule · lift-orange
   3 columnas desde 1040px, 2 desde 700px (la 3ª centrada) y 1 en móvil.
   Con subgrid, la foto y el cuerpo de las 3 tarjetas comparten fila: el
   título y el botón quedan alineados aunque el muestrario sea más alto.
   ========================================================================= */
.tote-trio {
    --tote-trio-gap: clamp(22px, 3vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tote-trio-gap);
    margin-top: clamp(28px, 3.6vw, 44px);
}
@media (min-width: 700px) {
    .tote-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* La tercera tarjeta, sola en su fila: centrada y del ancho de una columna. */
    .tote-trio > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--tote-trio-gap)) / 2);
    }
}
@media (min-width: 1040px) {
    .tote-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tote-trio > :last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}

.tote-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    box-shadow: 4px 4px 0 var(--tote-ink);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
@supports (grid-template-rows: subgrid) {
    /* Cada tarjeta ocupa 2 filas (foto + cuerpo); la separación vertical entre
       filas de tarjetas la pone el margen de la tarjeta y el margen negativo
       del contenedor compensa la última. */
    .tote-trio {
        row-gap: 0;
        margin-bottom: calc(var(--tote-trio-gap) * -1);
    }
    .tote-trio > .tote-card {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 0;
        margin-bottom: var(--tote-trio-gap);
    }
    /* Con aspect-ratio, "normal" se comporta como start: la foto no llenaría
       la fila si el muestrario es más alto. */
    .tote-trio > .tote-card > .tote-card__media {
        align-self: stretch;
        justify-self: stretch;
    }
}
.tote-card:has(:focus-visible) {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--tote-orange);
}
@media (hover: hover) {
    .tote-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 7px 7px 0 var(--tote-orange);
    }
}

.tote-card__media {
    display: block;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--tote-cream);
    border-bottom: 2px solid var(--tote-ink);
    overflow: hidden;
    line-height: 0;
}
.tote-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Foto cuadrada con el logo en la esquina inferior: el recorte 4:3 desde
   arriba lo deja fuera completo en lugar de cortarlo a la mitad. */
.tote-card__media--top img { object-position: center top; }
.tote-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: clamp(18px, 2.4vw, 24px);
}
.tote-card__title {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
    line-height: 1.02;
    color: var(--tote-ink);
    margin: 0 0 clamp(10px, 1.4vw, 12px);
}
.tote-card__text {
    font-family: var(--tote-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tote-ink);
    margin: 0 0 12px;
}
.tote-card .tote-prod__lbl { margin-top: 4px; }
.tote-card .tote-checks { margin-bottom: clamp(16px, 2vw, 20px); }
/* El botón al pie: todas las tarjetas lo alinean aunque el texto difiera. */
.tote-card__body > .tote-btn {
    margin-top: auto;
    align-self: flex-start;
}
.tote-card__body > .tote-card__text:last-of-type { margin-bottom: clamp(16px, 2vw, 20px); }

/* Muestrario de colores: ocupa el lugar de la foto en "Loneta de colores".
   Crece con su contenido. Sin aspect-ratio: con altura de contenido mayor
   que el 4:3, el ratio "transfiere" esa altura a ancho (330px → 440px) e
   infla la columna de la tarjeta más allá de su borde. */
.tote-swatches {
    aspect-ratio: auto;
    height: auto;
    padding: 16px;
    background: var(--tote-paper);
    overflow: visible;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tote-swatches__lbl {
    font-family: var(--tote-font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--tote-ink);
    margin: 0 0 8px;
}
.tote-swatches__row {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
}
.tote-swatches__row:last-child { margin-bottom: 0; }
.tote-swatches__row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
/* Las muestras del PDP de Loneta traen el logo en una esquina (arriba a la
   derecha en la línea normal, abajo al centro en la repelente; la negra
   además trae un recuadro al centro). A tamaño natural se ve solo la
   esquina inferior izquierda de la textura, lejos de logos y recuadro. */
.tote-swatches__row img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: none;
    object-position: 4% 96%;
    border: 1px solid var(--tote-rule);
    outline: 0;
}
.tote-swatches__name {
    font-family: var(--tote-font-body);
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--tote-ink);
    text-align: center;
}

/* =========================================================================
   07 · Manta vs Loneta — Periódico · Versus (2 paneles) · side-shift
   El badge "VS" es cuadrado (la hoja no usa border-radius).
   ========================================================================= */
.tote-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 28px);
    margin-top: clamp(24px, 3vw, 34px);
}
@media (min-width: 720px) {
    .tote-versus { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
}
.tote-versus__panel {
    display: flex;
    flex-direction: column;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    box-shadow: 6px 6px 0 var(--tote-ink);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-versus__media {
    margin: 0;
    display: block;
    /* 7:5 = proporción nativa de las dos fotos (1400×1000). */
    aspect-ratio: 7 / 5;
    border-bottom: 2px solid var(--tote-ink);
    overflow: hidden;
    line-height: 0;
    background: var(--tote-cream);
}
/* Anclada abajo: si una foto no es 7:5, el recorte cae en el fondo de
   arriba y la bolsa queda entera. */
.tote-versus__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.tote-versus__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(18px, 2.4vw, 24px);
}
.tote-versus__kicker {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    line-height: 1.1;
    color: var(--tote-ink);
    margin: 0;
}
.tote-versus__kicker strong { font-weight: 400; color: var(--tote-orange-deep); }
.tote-versus__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.tote-versus__list li {
    position: relative;
    font-family: var(--tote-font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--tote-ink);
    padding-left: 22px;
}
.tote-versus__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 10px;
    height: 10px;
    background: var(--tote-orange);
}
.tote-versus__panel .tote-btn { align-self: flex-start; margin-top: 4px; }
.tote-versus__vs {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    background: var(--tote-yellow);
    color: var(--tote-ink);
    font-family: var(--tote-font-display);
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    border: 2px solid var(--tote-ink);
    box-shadow: 3px 3px 0 var(--tote-ink);
}
@media (max-width: 879px) {
    .tote-versus__vs { width: 48px; height: 48px; font-size: 0.95rem; box-shadow: 2px 2px 0 var(--tote-ink); }
}
@media (min-width: 720px) and (max-width: 879px) {
    .tote-versus { gap: 14px; }
}
/* side-shift: en desktop los paneles se "embisten" — el izquierdo se desplaza
   hacia la derecha y el derecho hacia la izquierda, con sombra naranja. */
@media (min-width: 720px) {
    .tote-versus__panel:first-child:has(:focus-visible) { transform: translateX(6px); box-shadow: 6px 6px 0 var(--tote-orange); }
    .tote-versus__panel:last-child:has(:focus-visible)  { transform: translateX(-6px); box-shadow: 6px 6px 0 var(--tote-orange); }
}
@media (hover: hover) and (min-width: 720px) {
    .tote-versus__panel:first-child:hover { transform: translateX(6px); box-shadow: 6px 6px 0 var(--tote-orange); }
    .tote-versus__panel:last-child:hover  { transform: translateX(-6px); box-shadow: 6px 6px 0 var(--tote-orange); }
}

/* Veredicto bajo el versus: caja paper con el resumen en dos líneas. */
.tote-verdict {
    margin-top: clamp(28px, 4vw, 44px);
    padding: clamp(20px, 3vw, 34px);
    background: var(--tote-paper);
    border: 2px solid var(--tote-ink);
}
.tote-verdict__lbl {
    display: block;
    margin: 0 0 clamp(12px, 1.8vw, 16px);
    font-family: var(--tote-font-mono);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--tote-ink);
}
.tote-verdict__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 2vw, 20px);
    margin: 0;
    padding: 0;
}
@media (min-width: 640px) {
    .tote-verdict__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
    .tote-verdict__pair > div + div { border-left: 2px solid var(--tote-rule); padding-left: clamp(24px, 4vw, 56px); }
}
.tote-verdict__pair dt {
    margin: 0;
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 0.95;
    color: var(--tote-ink);
}
.tote-verdict__pair dd {
    margin: 6px 0 0;
    font-family: var(--tote-font-body);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.5;
    color: var(--tote-ink);
}
.tote-verdict__text {
    max-width: 62ch;
    margin: clamp(16px, 2.4vw, 22px) 0 0;
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tote-ink);
}
.tote-verdict .tote-cta { margin-top: clamp(18px, 2.6vw, 26px); }

/* =========================================================================
   08 · Poliéster — Vitrina · Band (media 5fr | texto 7fr) · Bleed-edge
   Bleed-edge = sin marco de sección: la ausencia de borde es el marco.
   ========================================================================= */
.tote-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 48px);
    align-items: center;
}
@media (min-width: 992px) {
    .tote-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); }
}
.tote-band__media {
    margin: 0;
    min-width: 0;
    max-width: 640px;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    box-shadow: 8px 8px 0 var(--tote-ink);
}
@media (max-width: 991px) {
    .tote-band__media { width: 100%; max-width: 560px; }
}
.tote-band__media img { display: block; width: 100%; height: auto; }
.tote-band__media .tote-figcaption {
    margin: 0;
    padding: 10px 14px;
    border-top: 2px solid var(--tote-ink);
    background: var(--tote-white);
}
.tote-band__body { min-width: 0; }
.tote-band__body .tote-arthead { margin-bottom: clamp(16px, 2.2vw, 22px); }

/* Etiquetas de ficha: las ÚNICAS piezas con radio (pill 9999px). */
.tote-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(18px, 2.4vw, 24px) 0 0;
    padding: 0;
}
.tote-tags li {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 16px;
    background: var(--tote-white);
    color: var(--tote-ink);
    border: 1px solid var(--tote-ink);
    border-radius: 9999px;
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Tafetán y Sarga: otras dos opciones 100% poliéster bajo la banda de la
   Tela Cholula. Fichas blancas sobre cream con filete lateral naranja
   (Side-rule) y sombra sólida; sin foto (la textura vive en la Guía rápida).
   2 columnas desde 760px. */
.tote-polys__intro {
    max-width: 74ch;
    margin: clamp(36px, 5vw, 56px) 0 0;
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: clamp(1.02rem, 1.2vw, 1.1rem);
    line-height: 1.6;
    color: var(--tote-ink);
}
.tote-polys {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    margin-top: clamp(16px, 2.2vw, 22px);
}
@media (min-width: 760px) {
    .tote-polys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tote-poly {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(20px, 2.6vw, 28px);
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    border-left: 6px solid var(--tote-orange);
    box-shadow: 5px 5px 0 var(--tote-ink);
}
.tote-poly__title {
    margin: 0 0 10px;
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    line-height: 1.05;
    color: var(--tote-ink);
}
.tote-poly__text {
    margin: 0;
    font-family: var(--tote-font-body);
    font-size: clamp(0.98rem, 1.15vw, 1.05rem);
    line-height: 1.65;
    color: var(--tote-ink);
}
.tote-poly__text a {
    color: var(--tote-ink);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--tote-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.tote-poly .tote-tags { margin-top: 16px; }
/* Botones al pie aunque una ficha tenga más texto que la otra. */
.tote-poly .tote-actions { margin-top: auto; padding-top: 20px; }
@media (hover: hover) {
    .tote-poly__text a:hover { color: var(--tote-orange-deep); }
}
@media (max-width: 575px) {
    .tote-poly { box-shadow: 3px 3px 0 var(--tote-ink); }
}

/* =========================================================================
   09 · Cómo elegir — Almanaque · ledger con dot-leader · ink-flood
   Cada fila es un enlace: necesidad ····· tela recomendada →. En hover/foco
   la fila se inunda de ink (solo transiciona background-color y color).
   ========================================================================= */
.tote-picker__q {
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--tote-ink);
    margin: 0 0 clamp(10px, 1.6vw, 14px);
}
.tote-picker {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--tote-ink);
}
.tote-picker > li { border-bottom: 1px solid var(--tote-rule); }
.tote-picker__row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-height: 56px;
    padding: 14px clamp(10px, 1.6vw, 16px);
    background-color: transparent;
    color: var(--tote-ink);
    text-decoration: none;
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
.tote-picker__need {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--tote-font-body);
    font-size: 1.05rem;
    line-height: 1.35;
    color: inherit;
}
/* Dot-leader: línea punteada que cae en la línea base del texto. */
.tote-picker__leader {
    flex: 1 1 24px;
    min-width: 24px;
    align-self: baseline;
    border-bottom: 2px dotted var(--tote-rule-strong);
    transition: border-color var(--tote-motion-fast) var(--tote-ease);
}
.tote-picker__pick {
    flex: 0 0 auto;
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: right;
    color: inherit;
}
.tote-picker__cue {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 0.3rem;
    font-size: 0.95rem;
    color: var(--tote-orange-deep);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
/* "No sé cuál elegir": la última fila destaca la recomendación humana. */
.tote-picker__row--help .tote-picker__pick { color: var(--tote-orange-deep); }

/* Ink-flood: texto en paper, tela recomendada en naranja (orange-deep sobre
   ink no llega a AA). Foco de teclado = mismo estado. */
.tote-picker__row:focus-visible {
    background-color: var(--tote-ink);
    color: var(--tote-paper);
    text-decoration: none;
    outline-offset: -3px;
}
.tote-picker__row:focus-visible .tote-picker__leader { border-bottom-color: var(--tote-rule-on-dark); }
.tote-picker__row:focus-visible .tote-picker__pick,
.tote-picker__row:focus-visible .tote-picker__cue { color: var(--tote-orange); }
.tote-picker__row:focus-visible .tote-picker__cue { transform: translateX(4px); }
@media (hover: hover) {
    .tote-picker__row:hover {
        background-color: var(--tote-ink);
        color: var(--tote-paper);
        text-decoration: none;
    }
    .tote-picker__row:hover .tote-picker__leader { border-bottom-color: var(--tote-rule-on-dark); }
    .tote-picker__row:hover .tote-picker__pick,
    .tote-picker__row:hover .tote-picker__cue { color: var(--tote-orange); }
    .tote-picker__row:hover .tote-picker__cue { transform: translateX(4px); }
}
/* Móvil: el leader se oculta y la necesidad y la tela se apilan. */
@media (max-width: 560px) {
    .tote-picker__row { flex-wrap: wrap; align-items: center; row-gap: 4px; }
    .tote-picker__need { flex: 1 1 100%; }
    .tote-picker__leader { display: none; }
    .tote-picker__pick { flex: 1 1 0; min-width: 0; text-align: left; }
}

/* =========================================================================
   10 · Personalización — Galería · Mosaico de 5 fotos · caption fijo
   Cabecera + prosa en dos columnas (≥992px) y mosaico con áreas explícitas.
   Desktop: rejilla de 6 columnas × 2 filas que cierra sin huecos —
       a a b b c c
       a a b b d e
   a y b son altas (2×2 celdas), c es ancha (2×1) y d, e son pequeñas (1×1).
   Móvil: 2 columnas, la primera foto a todo el ancho.
   ========================================================================= */
.tote-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 28px);
    align-items: start;
}
@media (min-width: 992px) {
    .tote-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
}
.tote-split__head { min-width: 0; }
.tote-split > .tote-prose { min-width: 0; }

.tote-gallery {
    --tote-gal-gap: clamp(10px, 1.4vw, 18px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tote-gal-gap);
    margin-top: clamp(28px, 4vw, 48px);
}
.tote-gallery__item {
    position: relative;
    margin: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--tote-cream);
    border: 2px solid var(--tote-ink);
    line-height: 0;
}
.tote-gallery__item--a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.tote-gallery__item picture { display: block; width: 100%; height: 100%; }
.tote-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--tote-ease);
}
/* Pie siempre visible, sobre un degradado de ink en la parte inferior. */
.tote-gallery__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(30px, 5vw, 46px) clamp(10px, 1.6vw, 16px) clamp(10px, 1.4vw, 14px);
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--tote-white);
    background: linear-gradient(to top,
        rgba(var(--tote-ink-rgb), 0.94) 0%,
        rgba(var(--tote-ink-rgb), 0.78) 45%,
        rgba(var(--tote-ink-rgb), 0) 100%);
    pointer-events: none;
}
@media (min-width: 900px) {
    .tote-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(2, clamp(180px, 17vw, 260px));
        grid-template-areas:
            "a a b b c c"
            "a a b b d e";
    }
    .tote-gallery__item,
    .tote-gallery__item--a { aspect-ratio: auto; grid-column: auto; }
    .tote-gallery__item--a { grid-area: a; }
    .tote-gallery__item--b { grid-area: b; }
    .tote-gallery__item--c { grid-area: c; }
    .tote-gallery__item--d { grid-area: d; }
    .tote-gallery__item--e { grid-area: e; }
}
/* Zoom suave de la foto: no cambia ninguna caja, solo el contenido. */
@media (hover: hover) {
    .tote-gallery__item:hover img { transform: scale(1.04); }
}

/* =========================================================================
   11 · Por rollo + Cotizador — Manifiesto · MegaTextBg + FormCard · INK
   Banda ink: texto de mayoreo a la izquierda y cotizador (FormCard en paper
   → WhatsApp Ventas) a la derecha.
   ========================================================================= */
.tote-section--ink {
    background: var(--tote-ink);
    color: var(--tote-paper);
    overflow: hidden;
}
.tote-section--ink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(var(--tote-paper-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--tote-paper-rgb), 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.tote-section--ink > .tote-container { position: relative; z-index: 1; }
.tote-section--ink .tote-title { color: var(--tote-paper); }
.tote-section--ink .tote-eyebrow { color: rgba(var(--tote-paper-rgb), 0.72); }
.tote-section--ink .tote-lead { color: rgba(var(--tote-paper-rgb), 0.88); }
.tote-section--ink .tote-lead strong { color: var(--tote-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 banda). */
.tote-section--ink .tote-eyebrow--mayoreo[data-stamp]:not([data-stamp=""])::before {
    border-color: var(--tote-yellow);
    color: var(--tote-yellow);
}
/* La sombra ink del CTA verde desaparece sobre ink: borde paper y sombra naranja. */
.tote-section--ink .tote-quote__text .tote-cta--quote {
    border-color: var(--tote-paper);
    box-shadow: 8px 8px 0 var(--tote-orange);
}
.tote-section--ink .tote-quote__text .tote-cta--quote:active { box-shadow: 4px 4px 0 var(--tote-orange); }
@media (hover: hover) {
    .tote-section--ink .tote-quote__text .tote-cta--quote:hover { box-shadow: 11px 11px 0 var(--tote-orange); }
}

.tote-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);
}
.tote-megahead__bg {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--tote-font-display);
    font-size: clamp(3.4rem, 14vw, 10rem);
    line-height: 0.78;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--tote-rule-on-dark);
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
}
.tote-megahead__fg { position: relative; max-width: 34ch; }

.tote-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vw, 60px);
    align-items: start;
}
@media (min-width: 1040px) {
    .tote-quote { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.tote-quote__text { min-width: 0; }
.tote-quote__lbl {
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.4;
    color: var(--tote-paper);
    margin: clamp(22px, 3vw, 30px) 0 12px;
}
/* Lista numerada de datos para cotizar: números mono en naranja sobre ink
   (4.56:1) con hairline entre filas. */
.tote-needs {
    list-style: none;
    counter-reset: tote-need;
    max-width: 520px;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--tote-rule-on-dark);
}
.tote-needs li {
    counter-increment: tote-need;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--tote-rule-on-dark);
    font-family: var(--tote-font-body);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--tote-paper);
}
.tote-needs li::before {
    content: counter(tote-need, decimal-leading-zero);
    flex: 0 0 auto;
    min-width: 2.2ch;
    font-family: var(--tote-font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--tote-orange);
}

/* ─── Cotizador (FormCard §10.6) — card en paper sobre la banda ink ───────
   Sin backend: arma el mensaje y abre WhatsApp. El contenedor es de
   consulta (container-type) para que los chips se acomoden al ancho REAL
   del formulario y no al de la ventana. */
.tote-form {
    position: relative;
    container-type: inline-size;
    container-name: toteform;
    background: var(--tote-paper);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    border-top: 4px solid var(--tote-orange);
    box-shadow: 12px 12px 0 var(--tote-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; sin esto los campos
   cuya fila de etiqueta es un <label> bajaban 8px respecto a los de <legend>.
   :where() no suma especificidad: las reglas propias de abajo mandan. */
.tote-form :where(label, legend) { margin-bottom: 0; }
.tote-form :where(legend) { font-size: inherit; line-height: inherit; width: auto; max-width: none; }
/* Sobre la card paper el anillo de foco es naranja (el amarillo es de la banda). */
.tote-section--ink .tote-form :focus-visible { outline-color: var(--tote-orange); }

.tote-form__head { margin-bottom: clamp(20px, 2.8vw, 30px); }
.tote-form__eyebrow {
    display: inline-block;
    font-family: var(--tote-font-display);
    background: var(--tote-orange);
    color: var(--tote-ink);
    padding: 7px 13px 6px;
    font-size: 0.88rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.25;   /* en 360px la etiqueta se parte en dos líneas */
    margin-bottom: 14px;
}
.tote-form__title {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--tote-ink);
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    line-height: 0.98;
    margin: 0 0 12px;
}
.tote-form__title em {
    font-family: var(--tote-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    color: var(--tote-orange-deep);
}
.tote-form__lead {
    font-family: var(--tote-font-accent);
    font-style: italic;
    color: var(--tote-muted);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    line-height: 1.5;
    margin: 0;
    max-width: 46ch;
}

/* Numeración automática de los campos: un único contador recorre los dos
   grupos de chips y la rejilla (01 … 06). */
.tote-form form { counter-reset: totef; }
.tote-field { counter-increment: totef; }
.tote-field__num::before { content: counter(totef, decimal-leading-zero); }

.tote-form form > .tote-field + .tote-field,
.tote-form form > .tote-field + .tote-form__grid,
.tote-form form > .tote-form__grid { margin-top: clamp(18px, 2.4vw, 24px); }

.tote-field {
    /* La etiqueta define la altura de la fila; se guarda en variable para que
       el min-height de abajo escale con ella. */
    --tote-lbl: clamp(0.92rem, 1.3vw, 1.05rem);
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}
.tote-field--full { grid-column: 1 / -1; }
/* fieldset de chips: reset completo (border/padding/min-width) y bloque en
   lugar de flex, para que la <legend> siga siendo la leyenda del grupo. */
.tote-field--group {
    display: block;
    border: 0;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
}
.tote-field--group > .tote-field__labelrow { margin-bottom: 9px; }

/* Altura fija de la fila de etiqueta: sin ella, un campo con chip
   ("OPCIONAL") crecía unos píxeles y su input quedaba desalineado respecto
   al de la columna de al lado. */
.tote-field__labelrow {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px 9px;
    padding: 0;
    min-height: calc(var(--tote-lbl) * 1.25);
}
.tote-field__labelrow > * { line-height: 1.2; }
/* Sin wrap: si la etiqueta es larga se parte en su propia línea de texto, a la
   derecha del número, en lugar de mandar el número solo a otra fila. */
.tote-field__label { min-width: 0; }
.tote-field__opt { flex-shrink: 0; }
.tote-field__num {
    font-family: var(--tote-font-mono);
    color: var(--tote-orange-deep);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    flex-shrink: 0;
}
.tote-field__label {
    font-family: var(--tote-font-display);
    text-transform: uppercase;
    color: var(--tote-ink);
    font-size: var(--tote-lbl);
    letter-spacing: 0.04em;
}
.tote-field__opt {
    font-family: var(--tote-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tote-muted);
}

.tote-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 24px);
    /* Alinea los inputs por abajo aunque una etiqueta se parta en dos líneas. */
    align-items: end;
}

/* ─── Chips de opción (radios) ──────────────────────────────────────────
   El radio real queda sobre el chip con opacity:0 (no display:none): sigue
   enfocable y anunciado, y todo el chip es zona de toque. El <span> es el
   chip visible; su ::before es la casilla que se llena al marcar. */
.tote-opts {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tote-opts--busca { grid-template-columns: minmax(0, 1fr); }
.tote-opts--factura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container toteform (min-width: 400px) {
    .tote-opts--busca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tote-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container toteform (min-width: 580px) {
    .tote-opts--busca { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tote-opts--tela  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tote-opt {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
.tote-opt input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tote-opt span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--tote-white);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    border-radius: 0;
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    box-shadow: 0 0 0 transparent;
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease),
                transform var(--tote-motion-fast) var(--tote-ease);
}
.tote-opt span::before {
    content: "";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    color: var(--tote-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}
/* Marcado: chip ink con texto paper y la casilla se llena de naranja con ✓. */
.tote-opt input:checked + span {
    background: var(--tote-ink);
    color: var(--tote-paper);
    box-shadow: 3px 3px 0 var(--tote-orange);
}
.tote-opt input:checked + span::before {
    content: "\2713";
    background: var(--tote-orange);
    border-color: var(--tote-orange);
    color: var(--tote-ink);
}
.tote-opt input:focus-visible + span {
    outline: 3px solid var(--tote-orange);
    outline-offset: 2px;
}
@media (hover: hover) {
    .tote-opt:hover input:not(:checked) + span {
        transform: translate(-2px, -2px);
        box-shadow: 3px 3px 0 var(--tote-ink);
    }
}

/* ─── Sugerencia dinámica (la rellena tote-cotizador.js) ───────────────── */
.tote-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--tote-paper);
    border: 1px solid var(--tote-rule);
    border-left: 4px solid var(--tote-orange);
}
.tote-hint[hidden] { display: none; }
.tote-hint--warn {
    background: var(--tote-cream);
    border-left-color: var(--tote-orange-deep);
}
.tote-hint__txt {
    flex: 1 1 220px;
    margin: 0;
    font-family: var(--tote-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tote-ink);
}
.tote-hint__btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 16px;
    background: var(--tote-white);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    border-radius: 0;
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                color var(--tote-motion-fast) var(--tote-ease);
}
.tote-hint__btn:focus-visible { background: var(--tote-ink); color: var(--tote-paper); }
@media (hover: hover) {
    .tote-hint__btn:hover { background: var(--tote-ink); color: var(--tote-paper); }
}

/* ─── Inputs ───────────────────────────────────────────────────────────── */
.tote-input[type="number"] { -moz-appearance: textfield; }
.tote-input[type="number"]::-webkit-outer-spin-button,
.tote-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tote-input {
    width: 100%;
    min-height: 50px;
    background: var(--tote-white);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    border-radius: 0;
    padding: 13px 16px;
    font-family: var(--tote-font-body);
    font-size: 1rem;
    line-height: 1.3;
    box-shadow: 5px 5px 0 var(--tote-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease),
                border-color var(--tote-motion-fast) var(--tote-ease);
}
.tote-input::placeholder { color: var(--tote-muted); opacity: 1; }
.tote-input:focus,
.tote-input:focus-visible {
    border-color: var(--tote-orange-deep);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--tote-ink);
    outline: 3px solid var(--tote-orange);
    outline-offset: 2px;
}

/* ─── Envío ────────────────────────────────────────────────────────────── */
.tote-form__actions {
    margin-top: clamp(24px, 3.2vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tote-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(--tote-whatsapp);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    border-radius: 0;
    font-family: var(--tote-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(--tote-ink);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-form__submit i { font-size: 1.4em; line-height: 1; }
.tote-form__submit:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tote-ink); }
@media (hover: hover) {
    .tote-form__submit:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--tote-ink); }
}
.tote-form__micro {
    font-family: var(--tote-font-accent);
    font-style: italic;
    color: var(--tote-muted);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.5;
    margin: 0;
}
.tote-form__micro a {
    color: var(--tote-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--tote-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
@media (hover: hover) {
    .tote-form__micro a:hover { color: var(--tote-orange-deep); }
}

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

/* =========================================================================
   12 · Cantidad de tela — Almanaque · RunIn + factores
   ========================================================================= */
.tote-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(--tote-rule);
}
.tote-runin__divider {
    font-family: var(--tote-font-accent);
    font-style: italic;
    color: var(--tote-orange);
    font-size: 1.5em;
    flex-shrink: 0;
    line-height: 1;
}
.tote-runin .tote-eyebrow { margin: 0; }
@media (max-width: 560px) { .tote-runin__divider { display: none; } }

/* Factores del consumo: hairlines compartidas, 6 celdas que cierran exactas
   a 3 columnas (2 filas) y a 2 columnas (3 filas). */
.tote-factors {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: clamp(24px, 3vw, 34px) 0 clamp(22px, 3vw, 30px);
    padding: 0;
    border: 2px solid var(--tote-ink);
}
.tote-factors > li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border-right: 1px solid var(--tote-rule);
    border-bottom: 1px solid var(--tote-rule);
}
.tote-factors > li:nth-child(3n) { border-right: 0; }
.tote-factors > li:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 760px) {
    .tote-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tote-factors > li:nth-child(3n) { border-right: 1px solid var(--tote-rule); }
    .tote-factors > li:nth-child(2n) { border-right: 0; }
    .tote-factors > li:nth-last-child(-n+3) { border-bottom: 1px solid var(--tote-rule); }
    .tote-factors > li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 400px) {
    .tote-factors > li { padding: 14px 12px; gap: 8px; }
}
.tote-factors__num {
    font-family: var(--tote-font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--tote-orange-deep);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.tote-factors__name {
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.1;
    color: var(--tote-ink);
}

/* =========================================================================
   13 · ¿Qué es una tote bag? — Carta · DropCap · Margin-frame
   Marco interior tipo certificado: borde 1px ink + filete naranja inset.
   ========================================================================= */
.tote-define {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--tote-ink);
}
.tote-define::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--tote-orange);
    pointer-events: none;
}
@media (min-width: 820px) {
    .tote-define { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.tote-define__media,
.tote-define__body { position: relative; min-width: 0; }
@media (max-width: 819px) {
    .tote-define__media { max-width: 520px; }
}
.tote-define__media {
    margin: 0;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    line-height: 0;
}
.tote-define__media img { display: block; width: 100%; height: auto; }
.tote-define__body .tote-eyebrow { margin-bottom: clamp(12px, 1.6vw, 16px); }
.tote-define__body .tote-title { margin-bottom: clamp(14px, 2vw, 20px); }
.tote-define__text {
    font-family: var(--tote-font-body);
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--tote-ink);
    margin: 0;
    max-width: 60ch;
}
/* Capitular: la clase va directo en el párrafo (no :first-of-type, que no
   pintaría si un hermano anterior fuera otro <p>). */
.tote-define__text::first-letter {
    float: left;
    font-family: var(--tote-font-display);
    text-transform: uppercase;
    font-size: 3.4em;
    line-height: 0.8;
    padding: 0.07em 0.12em 0 0;
    color: var(--tote-orange);
}
.tote-define__aside {
    font-family: var(--tote-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tote-ink);
    margin: clamp(14px, 2vw, 20px) 0 0;
    padding-top: clamp(12px, 1.6vw, 16px);
    border-top: 1px solid var(--tote-rule);
}
.tote-define__aside a {
    color: var(--tote-ink);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--tote-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
@media (hover: hover) {
    .tote-define__aside a:hover { color: var(--tote-orange-deep); }
}

/* =========================================================================
   14 · FAQ — rail sticky a la izquierda (eyebrow + título + nota + CTA) y
   acordeón de tarjetas a la derecha, con caja "+" que pasa a "×" al abrir.
   Script global ax-faq.js vía [data-ax-faq]. El <h3> va dentro del <summary>.
   ========================================================================= */
.tote-faqsec__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 940px) {
    .tote-faqsec__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
    .tote-faqsec__aside { position: sticky; top: 130px; }
}
.tote-faqsec__aside .tote-eyebrow { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.tote-faqsec__title { font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: 0.95; }
.tote-faqsec__note {
    font-family: var(--tote-font-accent);
    font-style: italic;
    color: var(--tote-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;
}
.tote-faqsec__cta { margin-top: 4px; }

.tote-faq { display: flex; flex-direction: column; gap: 12px; }
.tote-faq__item {
    background: var(--tote-white);
    border: 1.5px solid var(--tote-rule);
    transition: border-color var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-faq__item[open] {
    border-color: var(--tote-ink);
    border-left: 4px solid var(--tote-orange);
    box-shadow: 5px 5px 0 var(--tote-ink);
}
.tote-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(--tote-motion-fast) var(--tote-ease);
}
.tote-faq__q::-webkit-details-marker { display: none; }
.tote-faq__q h3 {
    font-family: var(--tote-font-body);
    font-weight: 700;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem) !important;
    line-height: 1.35;
    color: inherit;
    margin: 0;
    min-width: 0;
}
/* Ícono +/×: dos barras dibujadas con gradientes (sin glifo, sin girar la
   caja: rotarla la convertía en rombo). Cerrado "+", abierto "×". */
.tote-faq__q::after {
    content: "";
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--tote-cream);
    background-image:
        linear-gradient(var(--tote-orange-deep), var(--tote-orange-deep)),
        linear-gradient(var(--tote-orange-deep), var(--tote-orange-deep));
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: 14px 2px, 2px 14px;
    border: 1.5px solid var(--tote-ink);
    transition: background-color var(--tote-motion-fast) var(--tote-ease),
                border-color var(--tote-motion-fast) var(--tote-ease);
}
.tote-faq__item[open] > .tote-faq__q { color: var(--tote-orange-deep); }
.tote-faq__item[open] > .tote-faq__q::after {
    background-color: var(--tote-orange);
    background-image:
        linear-gradient(45deg, transparent 43%, var(--tote-ink) 43%, var(--tote-ink) 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, var(--tote-ink) 43%, var(--tote-ink) 57%, transparent 57%);
    background-size: 16px 16px, 16px 16px;
    border-color: var(--tote-ink);
}
.tote-faq__q:focus-visible { outline: 3px solid var(--tote-orange); outline-offset: -3px; }
.tote-faq__a {
    font-family: var(--tote-font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color: var(--tote-ink);
    max-width: 70ch;
    padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
    margin: 0;
}
.tote-faq__a strong { font-weight: 800; }
.tote-faq__a a {
    color: var(--tote-ink); font-weight: 800;
    text-decoration: underline; text-decoration-color: var(--tote-orange);
    text-decoration-thickness: 2px; text-underline-offset: 2px;
}
@media (hover: hover) {
    .tote-faq__item:hover { border-color: var(--tote-ink); }
    .tote-faq__a a:hover { color: var(--tote-orange-deep); }
}

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

/* =========================================================================
   15 · Telas para bolsas — Vitrina · 5 tarjetas enlazadas · lift-orange
   La tarjeta entera es un <a>. 3 + 2 desde 621px y 5 en línea desde 1100px; por debajo se vuelve
   un slider con scroll-snap (ver más abajo "Móvil: tarjetas → slider").
   ========================================================================= */
.tote-links {
    list-style: none;
    display: grid;
    /* 5 tarjetas: 3 + 2 en una parrilla de 6 (la 2ª fila se reparte a lo
       ancho); 5 en línea desde 1100px. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin: clamp(26px, 3.4vw, 40px) 0 0;
    padding: 0;
}
.tote-links > li { display: flex; min-width: 0; grid-column: span 2; }
.tote-links > li:nth-child(n + 4) { grid-column: span 3; }
@media (min-width: 1100px) {
    .tote-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .tote-links > li,
    .tote-links > li:nth-child(n + 4) { grid-column: auto; }
}
.tote-linkcard {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    box-shadow: 4px 4px 0 var(--tote-ink);
    color: var(--tote-ink);
    text-decoration: none;
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-linkcard__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--tote-cream);
    border-bottom: 2px solid var(--tote-ink);
    overflow: hidden;
    line-height: 0;
}
.tote-linkcard__media picture { display: block; width: 100%; height: 100%; }
.tote-linkcard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--tote-ease);
}
.tote-linkcard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: clamp(16px, 2.2vw, 22px);
}
.tote-linkcard__name {
    display: block;
    font-family: var(--tote-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.02;
    color: var(--tote-ink);
}
.tote-linkcard__desc {
    display: block;
    font-family: var(--tote-font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tote-ink);
}
.tote-linkcard__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--tote-font-body);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--tote-orange-deep);
}
.tote-linkcard__go i { transition: transform var(--tote-motion-fast) var(--tote-ease); }
.tote-linkcard:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--tote-orange);
    color: var(--tote-ink);
    text-decoration: none;
}
.tote-linkcard:focus-visible .tote-linkcard__go i { transform: translateX(4px); }
@media (hover: hover) {
    .tote-linkcard:hover {
        transform: translate(-3px, -3px);
        box-shadow: 7px 7px 0 var(--tote-orange);
        color: var(--tote-ink);
        text-decoration: none;
    }
    .tote-linkcard:hover .tote-linkcard__media img { transform: scale(1.05); }
    .tote-linkcard:hover .tote-linkcard__go i { transform: translateX(4px); }
}

/* =========================================================================
   16 · Cierre — caja centrada (Manifiesto · Full-frame · press-chunky)
   ========================================================================= */
.tote-closing {
    max-width: 900px;
    margin: 0 auto;
    background: var(--tote-white);
    border: 2px solid var(--tote-ink);
    border-top: 6px solid var(--tote-orange);
    box-shadow: 10px 10px 0 var(--tote-ink);
    padding: clamp(26px, 4vw, 48px);
    text-align: center;
}
.tote-closing .tote-eyebrow { justify-content: center; }
.tote-closing .tote-title { margin-bottom: clamp(16px, 2.4vw, 24px); }
.tote-closing .tote-lead { max-width: 60ch; margin: 0 auto; }
.tote-closing .tote-lead + .tote-lead { margin-top: clamp(12px, 1.8vw, 18px); }
.tote-closing .tote-actions { justify-content: center; }

/* =========================================================================
   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).
   ========================================================================= */
.tote-fab {
    /* Vive FUERA de .tote-page (ese wrapper lleva overflow-x: clip), así que
       redeclara los tokens que usa, con fallback a --ax-* global. */
    --tote-ink:          var(--ax-ink, #1F2530);
    --tote-paper:        var(--ax-paper, #FAF6EE);
    --tote-cream:        var(--ax-cream, #F2EDE4);
    --tote-white:        var(--ax-white, #FFFFFF);
    --tote-orange:       var(--ax-orange, #F15A29);
    --tote-orange-deep:  var(--ax-orange-deep, #B0401A);
    --tote-muted:        var(--ax-muted, #6E6A60);
    --tote-ink-rgb:      31, 37, 48;
    --tote-rule:         rgba(var(--tote-ink-rgb), 0.16);
    --tote-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --tote-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --tote-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    --tote-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --tote-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(--tote-font-body);
    line-height: 1.4;
}
.tote-fab *,
.tote-fab *::before,
.tote-fab *::after { box-sizing: border-box; }
.tote-fab.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s var(--tote-ease), visibility 0.2s, transform 0.2s var(--tote-ease);
}

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

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

/* CTA del panel: naranja con texto ink (4.56:1; blanco sobre naranja a 15px
   no llega a AA). */
.tote-fab__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--tote-orange);
    color: var(--tote-ink);
    border: 2px solid var(--tote-ink);
    text-decoration: none;
    font-family: var(--tote-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(--tote-orange-deep);
    transition: transform var(--tote-motion-fast) var(--tote-ease),
                box-shadow var(--tote-motion-fast) var(--tote-ease);
}
.tote-fab__cta:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--tote-orange-deep); }
.tote-fab__cta:focus-visible { outline: 3px solid var(--tote-ink); outline-offset: 3px; }
@media (hover: hover) {
    .tote-fab__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 var(--tote-orange-deep);
        color: var(--tote-ink);
        text-decoration: none;
    }
}

/* Móvil: el panel ocupa el ancho disponible y el toggle se compacta. */
@media (max-width: 575px) {
    .tote-fab { left: 12px; bottom: 16px; }
    .tote-fab__panel { width: calc(100vw - 24px); max-height: 62vh; box-shadow: 5px 5px 0 var(--tote-ink); }
    .tote-fab__toggle { padding: 13px 16px; font-size: 0.92rem; box-shadow: 4px 4px 0 var(--tote-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) {
    .tote-fab__panel { max-height: 54vh; }
}

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

/* =========================================================================
   Móvil: tarjetas → slider — las tarjetas enlazadas se vuelven un slider con scroll-snap (mismo
   gesto que los carruseles del sitio). 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 la definición de la parrilla
   (misma especificidad: gana por orden).
   ========================================================================= */
@media (max-width: 620px) {
    .tote-links {
        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 8px 18px 4px;
        margin-left: -4px;
        margin-right: -4px;
        scrollbar-width: thin;
    }
    .tote-links > li {
        flex: 0 0 min(82vw, 320px);
        scroll-snap-align: start;
    }
    .tote-links::-webkit-scrollbar { height: 8px; }
    .tote-links::-webkit-scrollbar-track { background: var(--tote-rule); }
    .tote-links::-webkit-scrollbar-thumb { background: var(--tote-ink); }
}

/* =========================================================================
   Pantallas táctiles — el :hover se queda "pegado" tras el toque y, como los
   hovers propios viven en @media (hover: hover), Bootstrap (a:hover → azul +
   subrayado) pintaría el enlace. Se restituye el color base y se quita el
   subrayado. Cada selector suma una clase al a:hover de Bootstrap (0,1,1).
   ========================================================================= */
@media (hover: none) {
    .tote-cta--ink:hover { color: var(--tote-paper); text-decoration: none; }
    .tote-cta--quote:hover,
    .tote-cta--whatsapp:hover { color: var(--tote-ink); text-decoration: none; }
    .tote-btn:hover,
    .tote-picker__row:hover,
    .tote-linkcard:hover,
    .tote-fab__cta:hover { color: var(--tote-ink); text-decoration: none; }
    .tote-usechip:hover { color: var(--tote-paper); text-decoration: none; }
    .tote-usechip--quote:hover { color: var(--tote-ink); }
    .tote-fab__list a:hover { text-decoration: none; }
    .tote-quick__name a:hover { color: var(--tote-ink); text-decoration-color: transparent; }
}

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

/* =========================================================================
   Accesibilidad — motion safe
   (El foco visible global vive arriba, junto a los tokens, para que las
   reglas de cada componente puedan afinarlo por orden.)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .tote-section *,
    .tote-section *::before,
    .tote-section *::after,
    .tote-fab,
    .tote-fab *,
    .tote-fab *::before,
    .tote-fab *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
    /* Sin desplazamientos: ninguna interacción mueve cajas ni imágenes.
       !important porque algunas reglas de hover tienen más especificidad. */
    .tote-cta, .tote-btn, .tote-card, .tote-prod__media, .tote-versus__panel,
    .tote-linkcard, .tote-opt span, .tote-input, .tote-form__submit,
    .tote-fab__toggle, .tote-fab__cta { transform: none !important; }
    .tote-usechip::before,
    .tote-gallery__item img,
    .tote-linkcard__media img { transform: none !important; }
    .tote-usechip__cue,
    .tote-picker__cue,
    .tote-linkcard__go i,
    .tote-btn i { transform: none !important; }
    .tote-fab.is-hidden { transform: none; }
    .tote-rise { animation: none; }
}

/* ─── Refinamiento móvil (sombras más discretas para no saturar) ────────── */
@media (max-width: 575px) {
    .tote-cta--ink { box-shadow: 6px 6px 0 var(--tote-orange); }
    .tote-cta--quote,
    .tote-cta--whatsapp { box-shadow: 6px 6px 0 var(--tote-ink); }
    .tote-figure { box-shadow: 6px 6px 0 var(--tote-ink); }
    .tote-note { box-shadow: 3px 3px 0 var(--tote-ink); }
    .tote-note--warn { box-shadow: 3px 3px 0 var(--tote-orange-deep); }
    .tote-meta li { box-shadow: 3px 3px 0 var(--tote-ink); }
    .tote-prod__media { box-shadow: 4px 4px 0 var(--tote-ink); }
    .tote-versus__panel { box-shadow: 4px 4px 0 var(--tote-ink); }
    .tote-band__media { box-shadow: 5px 5px 0 var(--tote-ink); }
    .tote-closing { box-shadow: 6px 6px 0 var(--tote-ink); }
    .tote-section--full-frame { margin-left: 10px; margin-right: 10px; }
}