/* =========================================================================
   Arletex Design System v3.5.1 — Blog: ¿Qué tela se usa para un vestido
   de escaramuza? (/blog/que-tela-se-usa-para-vestido-de-escaramuza)
   Prefijo: esc- / --esc-*
   ─────────────────────────────────────────────────────────────────────────
   FIRMA PROPIA DE ESTE BLOG: "LA FALDA EN VUELO".
   Un vestido de escaramuza se reconoce por el vuelo de la falda y por el
   olán del bajo. La pieza firmada es el ABANICO (.esc-vuelo): foto de las
   ocho telas del muestrario abiertas como los gajos de una falda alrededor
   de un sombrero charro. El tableado del olán va como regla divisoria
   (.esc-olan) y bajo la telemetría del hero.
   El purple marca la voz "blog"; orange sigue siendo el CTA.

   Chrome legacy: el slide superior (.slider-nav) y el breadcrumb
   bootstrap se conservan FUERA de .esc-page, homogéneos con el sitio.

   Piso de legibilidad v3.5.1: NADA visible por debajo de 14px
   (0.875rem). Los mono-labels usan clamp(.875rem, 1.1vw, 1rem).

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     01 Apertura          Manifiesto · ManifestoClaim · —           · paper · —
     02 Qué telas         Dossier    · Dossier        · Top-rule    · white · lift
     03 Manta             Técnico    · LabelLateral   · Side-rule   · cream · rule-draw
     04 Popelina          Periódico  · RunInHeadline  · Top-rule    · white · rule-draw
     05 Manta o popelina  Almanaque  · IndexRow       · Bleed       · INK   · —
     06 Colores           Galería    · SwatchHead     · Index-tab   · paper · ink-flood
     07 Danza folclórica  Fanzine    · ManifestoClaim · Full-frame  · white · rule-draw
     08 Vestidos folcl.   Periódico  · DropCap        · Double-rule · cream · —
     09 Cuánta tela       Técnico    · NumberProtag   · Side-rule   · white · press-chunky
     10 Qué revisar       Almanaque  · IndexRow       · Top-rule    · paper · —
     11 FAQ               Dossier    · Rail + acordeón (estándar) · Top-rule · white · press-chunky
     12 Cierre            Manifiesto-CTA · MegaTextBg · Bleed       · INK   · press-chunky
   ========================================================================= */
/* Slide legacy oculto en móvil: esta hoja solo la carga esta página, así que
   la regla no afecta a otras landings (mismo criterio que
   /blog/que-es-poliester). Así el H1 entra en el primer pantallazo. El
   breadcrumb se conserva. */
@media (max-width: 767px) {
    .slider-nav { display: none; }
}

/* ─── Tokens locales (fallback a --ax-* global) ────────────────────────── */
.esc-page {
    --esc-ink:          var(--ax-ink, #1F2530);
    --esc-paper:        var(--ax-paper, #FAF6EE);
    --esc-cream:        var(--ax-cream, #F2EDE4);
    --esc-white:        var(--ax-white, #FFFFFF);
    --esc-orange:       var(--ax-orange, #F15A29);
    --esc-orange-deep:  var(--ax-orange-deep, #B0401A);
    --esc-purple:       var(--ax-purple, #6A52A2);
    --esc-purple-deep:  #4E3B7E;
    --esc-yellow:       var(--ax-yellow, #FFEB3B);
    --esc-whatsapp:     var(--ax-whatsapp, #25D366);
    --esc-muted:        var(--ax-muted, #6E6A60);
    --esc-muted-dark:   var(--ax-muted-dark, #A8A39A);
    --esc-rule:         rgba(31, 37, 48, 0.16);
    --esc-rule-on-dark: rgba(250, 246, 238, 0.20);
    --esc-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --esc-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --esc-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --esc-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, 'Courier New', monospace);
    --esc-motion-fast:  140ms;
    --esc-motion-base:  220ms;
    --esc-ease-out:     cubic-bezier(.22, 1, .36, 1);
    /* Firma: el tableado del olán (tablas verticales de 2px cada 12px) */
    --esc-pleat-h: repeating-linear-gradient(90deg,
        var(--esc-ink) 0 2px, transparent 2px 12px);

    background: var(--esc-white);
    color: var(--esc-ink);
    font-family: var(--esc-font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: clip;     /* seguro anti-hueco lateral (mega-text); clip y no hidden: hidden crea scroll container y rompe el sticky del rail FAQ */
}
.esc-page *, .esc-page *::before, .esc-page *::after { box-sizing: border-box; }

/* Guardia sobre fondo oscuro: products.css declara global
   `p, h2, small, h1, li { color: #1e1e1e }`; ese color directo gana sobre la
   herencia del contenedor y apaga el texto en paneles ink. :where() deja la
   especificidad en 0,0,1 (gana por orden de carga) sin pisar utilitarias. */
:where(.esc-section--ink) p,
:where(.esc-section--ink) li,
:where(.esc-section--ink) h1,
:where(.esc-section--ink) h2,
:where(.esc-section--ink) small { color: var(--esc-paper); }

/* Anclas: el header es fixed y su alto real cambia por breakpoint */
.esc-section[id] { scroll-margin-top: 125px; }
@media (max-width: 1080px) { .esc-section[id] { scroll-margin-top: 116px; } }
@media (max-width: 767px)  { .esc-section[id] { scroll-margin-top: 170px; } }

/* ─── Container ────────────────────────────────────────────────────────── */
.esc-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.esc-container--narrow { max-width: 900px; }

/* ─── Sections: fondos, paddings, marcos ───────────────────────────────── */
.esc-section        { padding: clamp(64px, 8vw, 96px) 0; background: var(--esc-white); }
.esc-section--hero  { padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 7vw, 80px); }
.esc-section--paper { background: var(--esc-paper); }
.esc-section--cream { background: var(--esc-cream); }
.esc-section--ink   { background: var(--esc-ink); color: var(--esc-paper); }

.esc-section--top-rule    { border-top: 2px solid var(--esc-orange); }
.esc-section--double-rule { border-top: 1px solid var(--esc-ink); border-bottom: 1px solid var(--esc-ink); }
.esc-section--side-rule   { border-left: 3px solid var(--esc-purple); }

/* Index-tab: pestaña de archivador montada sobre el rule superior */
.esc-section--index-tab { position: relative; border-top: 2px solid var(--esc-ink); }
.esc-tab {
    position: absolute;
    top: 0;
    left: calc(5% + clamp(20px, 4vw, 56px));   /* .esc-container: 90% de ancho + gutter */
    transform: translateY(-100%);
    background: var(--esc-ink);
    color: var(--esc-paper);
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 14px;
}

/* ─── Tipografía base ──────────────────────────────────────────────────── */
.esc-display {
    font-family: var(--esc-font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .01em;
    margin: 0;
    color: inherit;
}
/* style.css fija h1/h2/h3 con !important (40/30px y 30/28/25px en móvil):
   los titulares con clase propia necesitan !important para conservar su escala. */
.esc-display--xl { font-size: clamp(2.7rem, 7.8vw, 6rem) !important; line-height: .88; letter-spacing: -0.01em; }
.esc-display--lg { font-size: clamp(1.95rem, 4.4vw, 3.3rem) !important; }
.esc-display--md { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
.esc-display--sm { font-size: clamp(1.15rem, 2vw, 1.5rem) !important; }

.esc-display em {
    font-family: var(--esc-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--esc-orange-deep);   /* AA sobre claro cuando el texto es pequeño */
}
.esc-display--xl em,
.esc-display--lg em { color: var(--esc-orange); }   /* ≥24px: el naranja pleno pasa AA large */
.esc-section--ink .esc-display em { color: var(--esc-orange); }

.esc-body { font-size: clamp(1rem, 1.15vw, 1.0625rem); margin: 0 0 1.1rem; }
.esc-body:last-child { margin-bottom: 0; }
.esc-body strong { font-weight: 700; }
/* Links de prosa: rule-draw (subrayado que se traza al hover) */
.esc-link {
    color: var(--esc-ink);
    text-decoration: none;
    font-weight: 700;
    background-image: linear-gradient(var(--esc-orange) 0 0);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    padding-bottom: 2px;
    transition: background-size var(--esc-motion-base) var(--esc-ease-out);
    box-shadow: inset 0 -2px 0 var(--esc-rule);
}
.esc-link:hover,
.esc-link:focus-visible { background-size: 100% 2px; color: var(--esc-ink); text-decoration: none; }
.esc-section--ink .esc-link { color: var(--esc-paper); box-shadow: inset 0 -2px 0 var(--esc-rule-on-dark); }
.esc-section--ink .esc-link:hover,
.esc-section--ink .esc-link:focus-visible { color: var(--esc-paper); }

.esc-mono {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Eyebrow-stamp (sello editorial); data-stamp pinta la viñeta izquierda */
.esc-stamp {
    display: inline-flex;
    align-items: stretch;
    margin: 0 0 clamp(.9rem, 2vw, 1.25rem);
    border: 1.5px solid var(--esc-ink);
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.3;
}
.esc-stamp::before {
    content: attr(data-stamp);
    display: inline-flex;
    align-items: center;
    background: var(--esc-purple);
    color: var(--esc-white);
    padding: 6px 11px;
    font-weight: 700;
}
.esc-stamp > span {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    background: var(--esc-white);
    color: var(--esc-ink);
}
.esc-stamp--orange::before { background: var(--esc-orange); color: var(--esc-ink); }
.esc-section--ink .esc-stamp { border-color: var(--esc-paper); }


/* ─── Botones ──────────────────────────────────────────────────────────── */
.esc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 48px;
    font-family: var(--esc-font-body);
    font-weight: 800;
    font-size: clamp(.95rem, 1.1vw, 1.05rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 28px;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform var(--esc-motion-fast) var(--esc-ease-out),
        box-shadow var(--esc-motion-fast) var(--esc-ease-out),
        background-color var(--esc-motion-base) var(--esc-ease-out),
        color var(--esc-motion-base) var(--esc-ease-out);
}
.esc-btn:hover { text-decoration: none; }

/* press-chunky */
.esc-btn--primary {
    background: var(--esc-orange);
    color: var(--esc-white);
    box-shadow: 0 6px 0 var(--esc-orange-deep);
}
.esc-btn--primary:hover  { color: var(--esc-white); transform: translateY(-2px); box-shadow: 0 8px 0 var(--esc-orange-deep); }
.esc-btn--primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--esc-orange-deep); }

/* ghost-fill */
.esc-btn--ghost {
    background: transparent;
    color: var(--esc-paper);
    border-color: var(--esc-paper);
}
.esc-btn--ghost:hover  { background: var(--esc-orange); border-color: var(--esc-orange); color: var(--esc-ink); }
.esc-btn--ghost:active { background: var(--esc-orange-deep); color: var(--esc-paper); }

/* ─── Hover helper: lift-orange ────────────────────────────────────────── */
.esc-lift {
    transition:
        transform var(--esc-motion-base) var(--esc-ease-out),
        box-shadow var(--esc-motion-base) var(--esc-ease-out);
}
@media (hover: hover) {
    .esc-lift:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--esc-orange); }
}
.esc-lift:active { transform: translate(-1px, -1px); }

/* =========================================================================
   01 · APERTURA — Manifiesto: la pregunta y la falda en vuelo
   (el slide y el breadcrumb legacy viven fuera de .esc-page)
   ========================================================================= */
.esc-hero__head { max-width: 1040px; }
.esc-hero__title { margin: 0 0 clamp(.75rem, 2vw, 1.25rem); }
.esc-hero__lede {
    font-family: var(--esc-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    line-height: 1.32;
    color: var(--esc-muted);
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    max-width: 34ch;
    text-transform: none;
}

/* Telemetría: la ficha rápida, rematada con el tableado del olán */
.esc-hero__meta {
    display: grid;
    /* Telas solo lleva nombres: cede ancho a Ancho y Rollo, que llevan etiqueta + cifra */
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .9fr);
    gap: 1.1rem 0;
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: clamp(.9rem, 1.6vw, 1.1rem) 0;
    border-top: 2px solid var(--esc-ink);
    background-image: var(--esc-pleat-h);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 3px;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--esc-muted);
}
/* Cuatro columnas con divisor. Cada dato apila popelina sobre manta, ambas
   al mismo tamaño y en ink. Medidas en caja normal ("m" de metros, no "M"). */
.esc-hero__meta li {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 0 clamp(14px, 2vw, 28px);
    border-left: 1px solid var(--esc-rule);
}
.esc-hero__meta li:first-child { padding-left: 0; border-left: 0; }
.esc-hero__meta-k { color: var(--esc-ink); }
.esc-hero__meta-vals { display: flex; flex-direction: column; gap: .4rem; }
.esc-hero__meta .esc-hero__meta-v {
    display: grid;
    grid-template-columns: 5.25rem auto;   /* etiqueta fija: las cifras quedan alineadas */
    justify-content: start;
    align-items: baseline;
    column-gap: .55rem;
    font-family: var(--esc-font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1.05;
    text-transform: none;
    color: var(--esc-ink);
}
/* Nombres de tela (columna Telas) en mayúsculas, sin columna de etiqueta */
.esc-hero__meta .esc-hero__meta-v--name { display: block; text-transform: uppercase; }
.esc-hero__meta .esc-hero__meta-approx {
    font-family: var(--esc-font-body);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
}
.esc-hero__meta-fab {
    font-family: var(--esc-font-mono);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--esc-ink);
}
.esc-hero__meta .esc-hero__meta-note {
    font-family: var(--esc-font-body);
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    color: var(--esc-ink);
}
.esc-hero__meta .esc-link {
    align-self: flex-start;
    font-family: var(--esc-font-body);
    font-size: clamp(.95rem, 1.05vw, 1rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
/* Etiqueta fija + cifra grande no caben en 4 columnas por debajo de 1100px */
@media (max-width: 1100px) {
    .esc-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esc-hero__meta li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* Teléfono: un dato por renglón, etiqueta arriba; cada valor ocupa todo el ancho */
@media (max-width: 600px) {
    .esc-hero__meta { grid-template-columns: 1fr; gap: 0; }
    .esc-hero__meta li {
        padding: .9rem 0;
        border-left: 0;
        border-top: 1px solid var(--esc-rule);
    }
    .esc-hero__meta li:first-child { padding-top: 0; border-top: 0; }
    .esc-hero__meta li:last-child  { padding-bottom: 0; }
}

.esc-dossier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .44fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.esc-dossier__head {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(.75rem, 1.5vw, 1rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
    margin-bottom: clamp(.5rem, 1vw, 1rem);
    border-bottom: 2px solid var(--esc-ink);
}
.esc-dossier__title { margin: 0; }
.esc-dossier__prose { max-width: 68ch; }

/* 02 · Ficha del reglamento: lo que pide la FMCH, en formato dato */
.esc-ficha {
    border: 2px solid var(--esc-ink);
    background: var(--esc-paper);
    padding: clamp(20px, 3vw, 28px);
    margin: 0;
}
.esc-ficha__cap {
    display: block;
    margin-top: 0;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--esc-ink);
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--esc-ink);
}
.esc-ficha__list { margin: 0; }
.esc-ficha__row + .esc-ficha__row { border-top: 1px dashed var(--esc-rule); }
.esc-ficha__row {
    display: grid;
    gap: .1rem;
    padding: .7rem 0;
}
.esc-ficha__row dt {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--esc-muted);
    font-weight: 400;
}
.esc-ficha__row dd {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--esc-ink);
}

.esc-lateral {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
    border-top: 2px solid var(--esc-orange);
}
.esc-lateral__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding-right: clamp(.5rem, 1vw, 1rem);
}
.esc-lateral__rail .esc-mono { color: var(--esc-ink); letter-spacing: .2em; }
.esc-lateral__title { margin: 0 0 .6rem; }
.esc-lateral__note  { max-width: 64ch; color: var(--esc-muted); margin: 0; }


/* Nota al margen (para competencia) */
.esc-note {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 26px);
    background: var(--esc-white);
    border-left: 4px solid var(--esc-purple);
}
.esc-note p { margin: 0; max-width: 72ch; }
.esc-note .esc-mono { display: block; color: var(--esc-purple-deep); margin-bottom: .35rem; }

.esc-quote {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    max-width: 30ch;
}
.esc-quote__mark {
    display: block;
    font-family: var(--esc-font-accent);
    font-style: italic;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: .6;
    color: var(--esc-orange);
}
.esc-quote__title { margin: .35rem 0 0; }
.esc-quote-lede { max-width: 68ch; margin: 0 0 clamp(2rem, 4vw, 2.75rem); }


.esc-index-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 2px solid var(--esc-ink);
}
.esc-index-head__title  { margin: 0; }
.esc-index-head__leader {
    flex: 1 1 auto;
    align-self: flex-end;
    margin-bottom: .35em;
    border-bottom: 3px dotted var(--esc-rule);
}
.esc-index-head__tally { flex: 0 0 auto; color: var(--esc-ink); white-space: nowrap; }
.esc-section--ink .esc-index-head { border-bottom-color: var(--esc-paper); }

.esc-props-intro { max-width: 68ch; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }


.esc-frame {
    border: 2px solid var(--esc-ink);
    padding: clamp(26px, 4.5vw, 52px);
    position: relative;
    background: var(--esc-white);
}
.esc-frame__tab {
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 40px);
    transform: translateY(-50%);
    background: var(--esc-purple);
    color: var(--esc-white);
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 14px;
}
.esc-claim {
    position: relative;
    max-width: 66ch;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding-right: clamp(0px, 12vw, 150px);
}
.esc-claim__text {
    font-family: var(--esc-font-accent);
    font-style: italic;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.22;
    margin: 0 0 .85rem;
    color: var(--esc-ink);
}
.esc-claim__text strong {
    font-style: normal;
    font-family: var(--esc-font-display);
    font-weight: 400;
    text-transform: uppercase;
    background: var(--esc-ink);
    color: var(--esc-paper);
    padding: 0 .18em;
}
.esc-claim__sub { margin: 0; color: var(--esc-muted); max-width: 56ch; }

.esc-burst {
    position: absolute;
    right: 0;
    top: -6px;
    transform: rotate(-8deg);
    background: var(--esc-yellow);
    color: var(--esc-ink);
    border: 2px solid var(--esc-ink);
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    letter-spacing: .04em;
    line-height: 1.12;
    padding: 11px 15px;
    text-align: center;
    box-shadow: 4px 4px 0 var(--esc-ink);
}


/* =========================================================================
   RunInHeadline (04 Popelina)
   ========================================================================= */
.esc-runin {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 1px solid var(--esc-rule);
}
.esc-runin .esc-stamp { margin: 0; }
.esc-runin__divider {
    font-family: var(--esc-font-accent);
    font-style: italic;
    color: var(--esc-orange);
    font-size: 1.5em;
    flex-shrink: 0;
}
.esc-runin__title { margin: 0; }
.esc-section--ink .esc-runin { border-bottom-color: var(--esc-rule-on-dark); }

.esc-prose-block { max-width: 68ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }


/* =========================================================================
   09 · ¿CUÁNTA TELA? — Técnico: NumberProtagonist
   ========================================================================= */
.esc-numhead {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--esc-rule);
}
.esc-numhead__title { margin: 0 0 .7rem; }
.esc-numhead__text  { margin: 0; max-width: 62ch; color: var(--esc-muted); }



/* =========================================================================
   Chips + puente
   ========================================================================= */
.esc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(2rem, 3.5vw, 2.75rem); padding: 0; list-style: none; }
.esc-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 18px;
    border: 2px solid var(--esc-ink);
    border-radius: 9999px;                  /* pill: única excepción al radius 0 */
    font-family: var(--esc-font-body);
    font-weight: 700;
    font-size: clamp(.92rem, 1.05vw, 1rem);
    color: var(--esc-ink);
    text-decoration: none;
    background: var(--esc-white);
    transition:
        background-color var(--esc-motion-base) var(--esc-ease-out),
        color var(--esc-motion-base) var(--esc-ease-out);
}
.esc-chip:hover,
.esc-chip:focus-visible { background: var(--esc-ink); color: var(--esc-paper); text-decoration: none; }
.esc-chip:active { background: var(--esc-orange); color: var(--esc-ink); border-color: var(--esc-orange-deep); }


/* Puente a un hub comercial */
.esc-bridge {
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    border: 2px solid var(--esc-ink);
    background: var(--esc-paper);
    padding: clamp(22px, 3.5vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
}
.esc-bridge__title { margin: 0 0 .5rem; }
.esc-bridge__text  { margin: 0; max-width: 56ch; color: var(--esc-muted); }


/* =========================================================================
   11 · FAQ — patrón estandarizado del sistema (mismo que /telas/de-algodon):
   rail sticky a la izquierda (eyebrow + título + nota + CTA) y acordeón de
   tarjetas a la derecha, con caja "+" que gira a "×" al abrir.
   Script global ax-faq.js vía [data-ax-faq].
   ========================================================================= */
.esc-faqsec__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 940px) {
    .esc-faqsec__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
    .esc-faqsec__aside { position: sticky; top: 130px; }
}

/* Eyebrow del patrón: sello recto + rótulo en Fraunces */
.esc-faqsec__eyebrow {
    font-family: var(--esc-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--esc-muted);
    line-height: 1.4;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.esc-faqsec__eyebrow::before {
    content: attr(data-stamp);
    font-family: var(--esc-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(--esc-orange-deep);
    color: var(--esc-orange-deep);   /* AA sobre blanco — orange puro da 3.37:1 */
    flex-shrink: 0;
}
.esc-faqsec__title { font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: 0.95; }
.esc-faqsec__title em { color: var(--esc-orange); }
.esc-faqsec__note {
    font-family: var(--esc-font-accent);
    font-style: italic;
    color: var(--esc-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;
}

/* CTA WhatsApp chunky (press-chunky · radius 0) */
.esc-faqsec__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 16px 28px;
    min-height: 48px;
    font-family: var(--esc-font-display);
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    text-decoration: none;
    background: var(--esc-whatsapp);
    color: #fff;
    border: 2px solid var(--esc-ink);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--esc-ink);
    cursor: pointer;
    transition:
        transform var(--esc-motion-fast) var(--esc-ease-out),
        box-shadow var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-faqsec__cta i { font-size: 1.3em; line-height: 1; }
.esc-faqsec__cta:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--esc-ink);
    color: #fff;
    text-decoration: none;
}
.esc-faqsec__cta:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--esc-ink); }

/* Acordeón de tarjetas */
.esc-faq { display: flex; flex-direction: column; gap: 12px; }
.esc-faq__item {
    background: var(--esc-white);
    border: 1.5px solid var(--esc-rule);
    transition:
        border-color var(--esc-motion-fast) var(--esc-ease-out),
        box-shadow var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-faq__item:hover { border-color: var(--esc-ink); }
.esc-faq__item[open] {
    border-color: var(--esc-ink);
    border-left: 4px solid var(--esc-orange);
    box-shadow: 5px 5px 0 var(--esc-ink);
}
.esc-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);
    color: var(--esc-ink);
    transition: color var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-faq__q::-webkit-details-marker { display: none; }
.esc-faq__q h3 {
    font-family: var(--esc-font-body);
    font-weight: 700;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem) !important;   /* style.css: h3 25px !important en móvil */
    line-height: 1.35;
    color: inherit;
    margin: 0;
    min-width: 0;
}
.esc-faq__q::after {                        /* caja "+" que gira a "×" */
    content: "+";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--esc-font-display);
    font-size: 1.35rem;
    line-height: 1;
    background: var(--esc-cream);
    color: var(--esc-orange-deep);
    border: 1.5px solid var(--esc-ink);
    transition:
        transform var(--esc-motion-fast) var(--esc-ease-out),
        background var(--esc-motion-fast) var(--esc-ease-out),
        color var(--esc-motion-fast) var(--esc-ease-out),
        border-color var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-faq__item[open] > .esc-faq__q { color: var(--esc-orange-deep); }
.esc-faq__item[open] > .esc-faq__q::after {
    transform: rotate(45deg);
    background: var(--esc-orange);
    color: var(--esc-paper);
    border-color: var(--esc-orange);
}
.esc-page .esc-faq__q:focus-visible { outline-offset: -3px; }
.esc-faq__a {
    font-family: var(--esc-font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color: var(--esc-muted);
    max-width: 70ch;
    padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
    margin: 0;
}
.esc-faq__a strong { font-weight: 800; color: var(--esc-ink); }

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

@media (max-width: 575px) {
    .esc-faqsec__cta { box-shadow: 6px 6px 0 var(--esc-ink); }
    .esc-faqsec__cta:hover { box-shadow: 8px 8px 0 var(--esc-ink); }
}
@media (prefers-reduced-motion: reduce) {
    .esc-faqsec__cta:hover, .esc-faqsec__cta:active { transform: none; }
}

/* =========================================================================
   12 · CIERRE — mega-text sobre ink
   ========================================================================= */
.esc-cta { position: relative; isolation: isolate; overflow: hidden; }
.esc-cta__mega {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--esc-font-display);
    font-size: clamp(7rem, 24vw, 20rem);
    line-height: 1;
    text-transform: uppercase;
    color: rgba(250, 246, 238, 0.06);
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
}
.esc-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.esc-cta__title { margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.esc-cta__sub   { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); color: var(--esc-muted-dark); max-width: 50ch; }
.esc-cta__actions { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 20px); }
.esc-cta__media { margin: 0; }
.esc-cta__media a { display: block; border: 2px solid var(--esc-paper); }
.esc-cta__media img { width: 100%; height: auto; display: block; }
.esc-cta__media figcaption {
    margin-top: .6rem;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--esc-muted-dark);
}

/* =========================================================================
   BOTÓN FLOTANTE DE NAVEGACIÓN (ax-fab.js · [data-ax-fab])
   Va en la esquina inferior IZQUIERDA (igual que /blog/que-es-poliester):
   el rail derecho ya lo ocupan los flotantes globales (.btn-you / .btn-wsp) y
   el widget del CRM de Kommo — ahí pelearían por el espacio.
   z-index 110: sobre los flotantes, bajo el header (999).
   ========================================================================= */
.esc-fab {
    /* Vive FUERA de .esc-page (que lleva overflow-x: clip) para que ningún
       contexto de recorte pueda afectar al fixed: por eso redeclara aquí los
       tokens que usa, con el mismo fallback a --ax-*. */
    --esc-ink:         var(--ax-ink, #1F2530);
    --esc-paper:       var(--ax-paper, #FAF6EE);
    --esc-white:       var(--ax-white, #FFFFFF);
    --esc-orange:      var(--ax-orange, #F15A29);
    --esc-orange-deep: var(--ax-orange-deep, #B0401A);
    --esc-purple:      var(--ax-purple, #6A52A2);
    --esc-muted:       var(--ax-muted, #6E6A60);
    --esc-rule:        rgba(31, 37, 48, 0.16);
    --esc-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --esc-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --esc-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, 'Courier New', monospace);
    --esc-motion-fast:  140ms;
    --esc-motion-base:  220ms;
    --esc-ease-out:     cubic-bezier(.22, 1, .36, 1);

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

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

.esc-fab__panel {
    order: 1;
    box-sizing: border-box;
    width: min(310px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--esc-white);
    border: 2px solid var(--esc-ink);
    border-top: 3px solid var(--esc-orange);
    box-shadow: 7px 7px 0 var(--esc-ink);
    padding: clamp(14px, 2vw, 18px);
}
.esc-fab__panel[hidden] { display: none; }

.esc-fab__title {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--esc-ink);
    margin: 0 0 10px;
}
.esc-fab__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border-top: 1px solid var(--esc-rule);
}
.esc-fab__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--esc-rule);
    color: var(--esc-ink);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    transition:
        background-color var(--esc-motion-fast) var(--esc-ease-out),
        color var(--esc-motion-fast) var(--esc-ease-out),
        padding-left var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-fab__list a:hover,
.esc-fab__list a:focus-visible {
    background: var(--esc-ink);
    color: var(--esc-paper);
    padding-left: 12px;
    text-decoration: none;
}
.esc-fab__num {
    flex: 0 0 auto;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .08em;
    color: var(--esc-muted);
    font-variant-numeric: tabular-nums;
}
.esc-fab__list a:hover .esc-fab__num,
.esc-fab__list a:focus-visible .esc-fab__num { color: var(--esc-orange); }

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

.esc-fab button:focus-visible,
.esc-fab a:focus-visible { outline: 3px solid var(--esc-purple); outline-offset: 3px; }

/* Móvil: el panel ocupa el ancho disponible y el toggle se compacta para
   no chocar con los flotantes globales de WhatsApp/YouTube. */
@media (max-width: 575px) {
    .esc-fab { left: 12px; bottom: 16px; }
    .esc-fab__panel { width: calc(100vw - 24px); max-height: 62vh; box-shadow: 5px 5px 0 var(--esc-ink); }
    .esc-fab__toggle { padding: 13px 16px; font-size: .9rem; box-shadow: 4px 4px 0 var(--esc-orange); }
}
/* Pantallas cortas: el panel no debe comerse todo el alto útil */
@media (max-height: 560px) {
    .esc-fab__panel { max-height: 54vh; }
}

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


/* ─── Accesibilidad ────────────────────────────────────────────────────── */
.esc-page a:focus-visible,
.esc-page summary:focus-visible,
.esc-page button:focus-visible {
    outline: 3px solid var(--esc-purple);
    outline-offset: 3px;
}
.esc-section--ink a:focus-visible { outline-color: var(--esc-yellow); }

@media (prefers-reduced-motion: reduce) {
    .esc-page *,
    .esc-page *::before,
    .esc-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* =========================================================================
   FIRMA · EL OLÁN — regla divisoria tableada (costura + tablas)
   ========================================================================= */
.esc-olan {
    height: 14px;
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
    border-top: 2px solid var(--esc-ink);
    background-image: var(--esc-pleat-h);
}

/* =========================================================================
   01 · APERTURA — H1 + respuesta a la izquierda, la falda en vuelo a la derecha
   ========================================================================= */
.esc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.esc-hero__head { max-width: none; }
/* La pregunta es larga: escala propia, por debajo de display--xl. */
.esc-hero__title {
    font-size: clamp(2.1rem, 4.6vw, 4rem) !important;   /* style.css: h1 !important */
    line-height: .95;
    letter-spacing: -0.01em;
}
.esc-hero__title em { color: var(--esc-orange); }
.esc-hero__lede  { max-width: 40ch; color: var(--esc-ink); }
.esc-hero__intro { max-width: 62ch; }

/* El tableado cuelga de la costura superior de la ficha. Panel blanco con
   marco ink para que la ficha resalte sobre el papel del hero. */
.esc-hero__meta {
    background-color: var(--esc-white);
    background-position: left top;
    background-size: 100% 10px;
    border: 2px solid var(--esc-ink);
    padding: calc(clamp(1rem, 1.8vw, 1.35rem) + 10px) clamp(16px, 2.6vw, 30px) clamp(1.1rem, 2vw, 1.5rem);
    color: var(--esc-ink);
}
.esc-hero__meta li { color: var(--esc-ink); }

/* FIRMA · la falda en vuelo */
.esc-vuelo { margin: 0; }
.esc-vuelo__img { display: block; width: 100%; height: auto; border: 2px solid var(--esc-ink); background: var(--esc-white); }

.esc-vuelo__cap {
    display: grid;
    gap: .3rem;
    margin-top: clamp(.9rem, 1.6vw, 1.2rem);
}
.esc-vuelo__cap .esc-mono { color: var(--esc-ink); font-weight: 700; }
.esc-vuelo__note {
    font-size: clamp(.92rem, 1.05vw, 1rem);
    line-height: 1.5;
    color: var(--esc-muted);
    max-width: 46ch;
}

/* =========================================================================
   02 · ¿QUÉ TELAS SE USAN? — las dos opciones como anclas
   ========================================================================= */
.esc-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    list-style: none;
    margin: clamp(1.25rem, 2.2vw, 1.75rem) 0 0;
    padding: 0;
}
.esc-duo__item {
    --esc-duo-pad: clamp(16px, 2.2vw, 22px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;   /* la nota estira: la ficha queda al pie en ambas */
    column-gap: .9rem;
    row-gap: .3rem;
    align-items: baseline;
    height: 100%;
    border: 2px solid var(--esc-ink);
    border-top: 3px solid var(--esc-orange);
    background: var(--esc-white);
    padding: var(--esc-duo-pad);
    color: var(--esc-ink);
    text-decoration: none;
}
.esc-duo__item:hover { color: var(--esc-ink); text-decoration: none; }
/* Muestra del catálogo a sangre sobre el padding de la tarjeta. La imagen
   es cuadrada con el nombre impreso abajo: se ve solo la mitad superior,
   donde está el tejido. */
.esc-duo__media {
    grid-column: 1 / -1;
    align-self: stretch;
    display: block;
    margin: calc(var(--esc-duo-pad) * -1) calc(var(--esc-duo-pad) * -1) clamp(10px, 1.4vw, 14px);
    aspect-ratio: 4 / 2;
    background: var(--esc-cream);
    border-bottom: 2px solid var(--esc-ink);
    overflow: hidden;
    line-height: 0;
}
.esc-duo__media picture { display: block; width: 100%; height: 100%; }
.esc-duo__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    transition: transform 450ms var(--esc-ease-out);
}
.esc-duo__item:focus-visible .esc-duo__media img { transform: scale(1.07); }
@media (hover: hover) {
    .esc-duo__item:hover .esc-duo__media img { transform: scale(1.07); }
}
.esc-duo__ix {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--esc-orange-deep);
}
.esc-duo__name {
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);   /* ≥24px: el naranja de --lead pasa AA large */
    letter-spacing: .02em;
    line-height: 1;
}
.esc-duo__note {
    grid-column: 1 / -1;
    font-size: clamp(.92rem, 1.05vw, 1rem);
    line-height: 1.45;
    color: var(--esc-muted);
}
/* Ficha de la tarjeta: composición a lo ancho; ancho | rollo al pie, a sangre */
.esc-duo__specs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .7rem calc(var(--esc-duo-pad) * -1) calc(var(--esc-duo-pad) * -1);
    border-top: 2px solid var(--esc-ink);
    background: var(--esc-paper);
}
.esc-duo__spec {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 12px 10px 12px var(--esc-duo-pad);   /* izquierda alineada al texto de la tarjeta */
}
.esc-duo__spec--wide { grid-column: 1 / -1; border-bottom: 1px solid var(--esc-rule); }
/* Tras el divisor basta menos aire: "100 m aprox." cabe en un renglón desde 981px */
.esc-duo__spec:last-child { border-left: 1px solid var(--esc-rule); padding-left: clamp(12px, 1.4vw, 16px); }
.esc-duo__spec dt {
    font-family: var(--esc-font-mono);
    font-size: .875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--esc-ink);
}
.esc-duo__spec dd {
    margin: 0;
    font-family: var(--esc-font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1.05;
    color: var(--esc-ink);
}
/* Popelina manda: misma medida que manta, más color (nombre y ficha en naranja;
   ink sobre orange = 5.3:1, pasa AA en texto chico) */
.esc-duo__item--lead .esc-duo__name { color: var(--esc-orange); }
.esc-duo__item--lead .esc-duo__specs { background: var(--esc-orange); }
.esc-duo__item--lead .esc-duo__spec--wide { border-bottom-color: rgba(31, 37, 48, 0.35); }
.esc-duo__item--lead .esc-duo__spec:last-child { border-left-color: rgba(31, 37, 48, 0.35); }
.esc-duo__approx {
    font-family: var(--esc-font-body);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
}
.esc-duo__spec--wide dd {
    font-family: var(--esc-font-body);
    font-size: clamp(.95rem, 1.05vw, 1rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}
.esc-ficha__src {
    margin: .9rem 0 0;
    padding-top: .9rem;
    border-top: 2px solid var(--esc-ink);
    font-size: clamp(.9rem, 1.02vw, .96rem);
    line-height: 1.5;
    color: var(--esc-ink);
}

/* =========================================================================
   03 · MANTA / 04 · POPELINA — foto + argumentos
   ========================================================================= */
.esc-tela {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: clamp(24px, 4.5vw, 60px);
    align-items: start;
}
.esc-tela--flip { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.esc-tela__media { margin: 0; }
.esc-tela__media a { display: block; border: 2px solid var(--esc-ink); background: var(--esc-white); }
.esc-tela__media img { width: 100%; height: auto; display: block; }
.esc-tela__media figcaption {
    margin-top: .6rem;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--esc-ink);
}
.esc-tela__body { max-width: 62ch; }
.esc-tela__sub  { margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 .5rem; }

/* Lista de argumentos: renglones con viñeta cuadrada */
.esc-why {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    border-top: 2px solid var(--esc-ink);
}
.esc-why li {
    position: relative;
    padding: .7rem 0 .7rem 1.9rem;
    border-bottom: 1px solid var(--esc-rule);
    font-weight: 700;
    line-height: 1.4;
}
.esc-why li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1.05rem;
    width: 11px;
    height: 11px;
    background: var(--esc-orange);
    border: 2px solid var(--esc-ink);
}

/* Ficha de la Manta de Colores: cinco celdas separadas por la retícula ink.
   Composición, ancho, tonos, metros por rollo y encogimiento. */
.esc-specs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    background: var(--esc-ink);
    border: 2px solid var(--esc-ink);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}
@media (max-width: 767.98px) {
    .esc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Celda impar al final: ocupa el renglón para no dejar hueco ink */
    .esc-specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.esc-specs > div {
    background: var(--esc-white);
    padding: clamp(14px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.esc-specs dt {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--esc-ink);
}
.esc-specs dd {
    margin: 0;
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    letter-spacing: .02em;
    line-height: 1.05;
    color: var(--esc-ink);
}

.esc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* 04 · Composición por variante */
.esc-compo {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(16px, 2.4vw, 28px) clamp(24px, 4vw, 56px);
    align-items: end;
    margin-top: clamp(2rem, 4vw, 3rem);
}
.esc-compo > .esc-body { grid-column: 1 / -1; margin: 0; max-width: 72ch; }
.esc-compo .esc-note  { margin: 0; }
.esc-table-wrap { overflow-x: auto; }
.esc-ledger {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
}
.esc-ledger caption {
    caption-side: top;
    text-align: left;
    color: var(--esc-ink);
    padding: 0 0 .6rem;
}
.esc-ledger thead th {
    background: var(--esc-ink);
    color: var(--esc-paper);
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    padding: 11px clamp(14px, 2vw, 18px);
}
.esc-ledger tbody th,
.esc-ledger tbody td {
    padding: 13px clamp(14px, 2vw, 18px);
    border-top: 1px solid var(--esc-rule);
    text-align: left;
    font-size: clamp(.98rem, 1.1vw, 1.05rem);
    color: var(--esc-ink);
    vertical-align: top;
}
.esc-ledger tbody th { font-weight: 700; width: 44%; }
.esc-ledger tbody td { font-variant-numeric: tabular-nums; }
/* Ancho común de las cuatro variantes: renglón de cierre */
.esc-ledger tfoot th,
.esc-ledger tfoot td {
    padding: 13px clamp(14px, 2vw, 18px);
    border-top: 2px solid var(--esc-ink);
    background: var(--esc-paper);
    text-align: left;
    color: var(--esc-ink);
    vertical-align: middle;
}
.esc-ledger tfoot th {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
}
.esc-ledger tfoot td {
    font-family: var(--esc-font-display);
    text-transform: none;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    letter-spacing: .02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.esc-compo .esc-note { background: var(--esc-paper); }

/* =========================================================================
   05 · MANTA O POPELINA — tabla comparativa sobre ink
   ========================================================================= */
.esc-cmp {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 2px solid var(--esc-paper);
    background: var(--esc-ink);
}
.esc-cmp thead th {
    background: var(--esc-paper);
    color: var(--esc-ink);
    font-family: var(--esc-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    letter-spacing: .03em;
    line-height: 1.1;
    text-align: left;
    padding: 14px clamp(16px, 2.2vw, 22px);
}
.esc-cmp thead th:first-child {
    width: 24%;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    font-weight: 700;
}
.esc-cmp thead th + th { border-left: 2px solid var(--esc-ink); }
.esc-cmp tbody th,
.esc-cmp tbody td {
    padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
    border-top: 1px solid var(--esc-rule-on-dark);
    text-align: left;
    vertical-align: top;
    color: var(--esc-paper);
}
.esc-cmp tbody td { border-left: 1px solid var(--esc-rule-on-dark); font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.5; }
.esc-cmp tbody th {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--esc-muted-dark);
}
.esc-cmp tbody tr:nth-child(even) > * { background: rgba(250, 246, 238, 0.04); }
.esc-cmp__note {
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    padding-left: clamp(14px, 2vw, 20px);
    border-left: 3px solid var(--esc-orange);
    max-width: 74ch;
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
}
.esc-cmp__note strong { color: var(--esc-white); }

/* =========================================================================
   06 · COLORES — SwatchHead + muestrarios reales
   ========================================================================= */
.esc-swatchhead {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(1.25rem, 4vw, 4rem);
    align-items: end;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 2px solid var(--esc-ink);
}
.esc-swatchhead__title { margin: 0; }
.esc-swatchhead__sub   { margin: 0 0 .4rem; }
.esc-swatchhead__body .esc-body { margin: 0; }

.esc-swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.esc-swatch {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
    color: var(--esc-ink);
    text-decoration: none;
}
.esc-swatch:hover { color: var(--esc-ink); text-decoration: none; }
.esc-swatch img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid var(--esc-ink);
}
.esc-swatch__cap {
    display: block;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
    transition:
        background-color var(--esc-motion-base) var(--esc-ease-out),
        color var(--esc-motion-base) var(--esc-ease-out);
}
.esc-swatch__name {
    display: block;
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    letter-spacing: .02em;
    line-height: 1.05;
}
.esc-swatch__tela {
    display: block;
    margin-top: .3rem;
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* ink-flood: el pie se inunda de ink */
.esc-swatch:focus-visible .esc-swatch__cap { background: var(--esc-ink); color: var(--esc-paper); }
@media (hover: hover) {
    .esc-swatch:hover .esc-swatch__cap { background: var(--esc-ink); color: var(--esc-paper); }
}
.esc-swatch:active .esc-swatch__cap { background: var(--esc-orange-deep); color: var(--esc-white); }

/* Aviso de competencia: el burst amarillo es la única señal de la página */
.esc-aviso {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3rem);
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
    padding: clamp(20px, 3vw, 30px);
    padding-left: clamp(150px, 15vw, 190px);
}
.esc-aviso .esc-burst {
    left: clamp(16px, 2.2vw, 26px);
    right: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-6deg);
}
.esc-aviso p { margin: 0; max-width: 80ch; }

/* =========================================================================
   07 · DANZA FOLCLÓRICA — marco completo
   ========================================================================= */
.esc-claim { padding-right: 0; max-width: 72ch; }
.esc-claim__title { margin: 0 0 .8rem; }
.esc-claim__sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--esc-ink); max-width: 60ch; }

.esc-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 2px solid var(--esc-ink);
}
.esc-pair__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: clamp(20px, 3vw, 32px);
    background: var(--esc-paper);
}
.esc-pair__item + .esc-pair__item { border-left: 2px solid var(--esc-ink); background: var(--esc-white); }
.esc-pair__name { margin: 0; }
.esc-pair__item .esc-body { margin: 0; }
.esc-pair__item .esc-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; }

.esc-consider__title { margin: 0 0 1rem; }
.esc-consider {
    counter-reset: esc-c;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: var(--esc-ink);
    border: 2px solid var(--esc-ink);
}
.esc-consider li {
    counter-increment: esc-c;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--esc-white);
    padding: clamp(14px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.35;
}
.esc-consider li:last-child { grid-column: span 2; }   /* 7 celdas cuadran en 4 columnas */
.esc-consider li::before {
    content: counter(esc-c, decimal-leading-zero);
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--esc-orange-deep);
}

/* =========================================================================
   08 · VESTIDOS FOLCLÓRICOS — DropCap + cuatro criterios
   ========================================================================= */
.esc-drophead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 4vw, 4rem);
    align-items: start;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.esc-drophead__title { margin: 0; }
.esc-drophead__prose { max-width: 56ch; }
/* Modificador propio: :first-of-type no sirve si hay otro <p> antes. */
.esc-body--drop::first-letter {
    float: left;
    font-family: var(--esc-font-display);
    font-size: 3.5em;
    line-height: .8;
    padding: .06em .12em 0 0;
    color: var(--esc-orange-deep);
    text-transform: uppercase;
}

.esc-factors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: var(--esc-ink);
    border: 2px solid var(--esc-ink);
}
.esc-factor {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--esc-white);
    padding: clamp(18px, 2.6vw, 28px);
}
.esc-factor__ix {
    font-family: var(--esc-font-display);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    line-height: .9;
    color: var(--esc-orange);
    font-variant-numeric: tabular-nums;
}
.esc-factor__name { margin: 0; }
.esc-factor__text { margin: 0; font-size: clamp(.95rem, 1.05vw, 1rem); color: var(--esc-ink); }

/* =========================================================================
   09 · ¿CUÁNTA TELA? — la cuenta de los rollos
   ========================================================================= */
.esc-numhead__text { color: var(--esc-ink); }

/* Anchos a escala: cinta métrica de 0 a 180 cm (--esc-ancho y --esc-at en cm).
   Popelina primero y con más peso: cinta alta en naranja + variantes;
   manta debajo, cinta baja en gris. La cinta es decorativa: el ancho va en texto. */
.esc-anchos {
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
    padding: clamp(20px, 3.2vw, 36px);
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    scroll-margin-top: 125px;
}
@media (max-width: 1080px) { .esc-anchos { scroll-margin-top: 116px; } }
@media (max-width: 767px)  { .esc-anchos { scroll-margin-top: 170px; } }

.esc-anchos__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem clamp(24px, 4vw, 56px);
    align-items: end;
    padding-bottom: clamp(1rem, 2vw, 1.4rem);
    border-bottom: 2px solid var(--esc-ink);
}
.esc-anchos__title { margin: 0; }
.esc-anchos__lead  { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.15vw, 1.0625rem); color: var(--esc-ink); }

.esc-anchos__row { --esc-tape-h: 18px; --esc-tape-fill: var(--esc-muted-dark); padding-top: clamp(1.25rem, 2.6vw, 1.9rem); }
.esc-anchos__row + .esc-anchos__row { margin-top: clamp(1.25rem, 2.6vw, 1.9rem); border-top: 1px solid var(--esc-rule); }
.esc-anchos__row--lead { --esc-tape-h: 34px; --esc-tape-fill: var(--esc-orange); }

.esc-anchos__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .25rem 1.25rem;
    margin-bottom: .8rem;
}
.esc-anchos__label { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.esc-anchos__label .esc-mono { color: var(--esc-ink); }
.esc-anchos__name {
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    letter-spacing: .02em;
    line-height: 1;
    color: var(--esc-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--esc-motion-fast) var(--esc-ease-out);
}
.esc-anchos__name:focus-visible { color: var(--esc-ink); text-decoration-color: currentColor; }
@media (hover: hover) {
    .esc-anchos__name:hover { color: var(--esc-ink); text-decoration-color: currentColor; }
}
.esc-anchos__row--lead .esc-anchos__name { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.esc-anchos__value {
    margin: 0;
    font-family: var(--esc-font-display);
    text-transform: none;           /* "m" de metros, no "M" */
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: .9;
    color: var(--esc-ink);
}
/* ≥35px: el naranja pleno pasa AA large sobre blanco */
.esc-anchos__row--lead .esc-anchos__value { font-size: clamp(2.2rem, 5.4vw, 3.6rem); color: var(--esc-orange); }

.esc-anchos__tape {
    position: relative;
    height: var(--esc-tape-h);
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
}
/* La tela: del 0 a su ancho, rematada con una costura ink */
.esc-anchos__tape::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--esc-ancho) / 180 * 100%);
    background: var(--esc-tape-fill);
    border-right: 2px solid var(--esc-ink);
}
/* Marcas de la cinta encima de la tela: cada 50 cm (altas) y cada 10 cm (bajas) */
.esc-anchos__tape::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, var(--esc-ink) 0 2px, transparent 2px calc(100% / 3.6)),
        repeating-linear-gradient(90deg, rgba(31, 37, 48, 0.5) 0 1px, transparent 1px calc(100% / 18));
    background-size: 100% 60%, 100% 35%;
    background-position: left bottom, left bottom;
    background-repeat: no-repeat;
}

.esc-anchos .esc-anchos__variants { margin: 1rem 0 0; }
.esc-anchos__note {
    margin: .9rem 0 0;
    max-width: 64ch;
    font-size: clamp(.95rem, 1.05vw, 1rem);
    color: var(--esc-ink);
}

.esc-anchos__scale {
    position: relative;
    height: 1.4em;
    margin: .45rem 2px 0;
    padding: 0;
    list-style: none;
    font-family: var(--esc-font-mono);
    font-size: .875rem;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--esc-ink);
}
.esc-anchos__scale li {
    position: absolute;
    top: 0;
    left: calc(var(--esc-at) / 180 * 100%);
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--esc-ink);
}
.esc-anchos__scale li:first-child { transform: none; }
.esc-anchos__scale li:last-child  { transform: translateX(-100%); }   /* unidad al final de la cinta */

.esc-calc {
    border: 2px solid var(--esc-ink);
    background: var(--esc-paper);
    padding: clamp(20px, 3.2vw, 36px);
}
.esc-calc__cap { margin: 0 0 1rem; color: var(--esc-ink); }
.esc-calc__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: clamp(8px, 1.2vw, 16px);
    align-items: stretch;
}
.esc-calc__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    background: var(--esc-white);
    border: 2px solid var(--esc-ink);
    padding: clamp(12px, 1.8vw, 18px);
}
.esc-calc__label {
    font-family: var(--esc-font-mono);
    font-size: clamp(.875rem, 1.1vw, .95rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--esc-ink);
}
.esc-calc__value {
    font-family: var(--esc-font-display);
    text-transform: uppercase;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    letter-spacing: .02em;
    line-height: 1;
    color: var(--esc-ink);
}
.esc-calc__cell--key { background: var(--esc-ink); }
.esc-calc__cell--key .esc-calc__label { color: var(--esc-paper); }
.esc-calc__cell--key .esc-calc__value { color: var(--esc-orange); }
.esc-calc__op {
    display: grid;
    place-items: center;
    font-family: var(--esc-font-body);
    font-weight: 900;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1;
    color: var(--esc-orange-deep);
}
.esc-calc__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
    margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
    padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
    border-top: 2px solid var(--esc-ink);
}
.esc-calc__foot p { margin: 0; max-width: 64ch; }

/* =========================================================================
   10 · QUÉ REVISAR — checklist
   ========================================================================= */
.esc-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    border-top: 2px solid var(--esc-ink);
}
.esc-check li {
    position: relative;
    padding: clamp(14px, 2vw, 18px) 0 clamp(14px, 2vw, 18px) 44px;
    border-bottom: 1px solid var(--esc-rule);
    font-weight: 700;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.4;
}
.esc-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid var(--esc-ink);
    background: var(--esc-white);
    color: var(--esc-orange-deep);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1;
}

/* 12 · Cierre: dos párrafos de apoyo antes de los botones */
.esc-cta__sub { margin: 0 0 .8rem; color: var(--esc-paper); }
.esc-cta__mega { inset: 0 44% 0 0; font-size: clamp(5rem, 15vw, 13rem); }
.esc-cta__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); flex-direction: column; align-items: flex-start; }
.esc-cta__more { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 20px); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
    .esc-hero { grid-template-columns: 1fr; }
    .esc-vuelo { max-width: 520px; }
    .esc-dossier { grid-template-columns: 1fr; }
    .esc-tela,
    .esc-tela--flip { grid-template-columns: 1fr; }
    .esc-tela__media { max-width: 560px; }
    .esc-swatchhead { grid-template-columns: 1fr; align-items: start; }
    .esc-drophead { grid-template-columns: 1fr; }
    .esc-factors  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esc-consider { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esc-calc__foot { grid-template-columns: 1fr; }
    .esc-cta__grid  { grid-template-columns: 1fr; }
    .esc-cta__mega  { inset: 0; }
    .esc-compo { grid-template-columns: 1fr; }
    .esc-anchos__head { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .esc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esc-pair { grid-template-columns: 1fr; }
    .esc-pair__item + .esc-pair__item { border-left: 0; border-top: 2px solid var(--esc-ink); }
    .esc-check { grid-template-columns: 1fr; }
    .esc-bridge { grid-template-columns: 1fr; }
    /* La cuenta se apila: cada operador pasa a su propio renglón */
    .esc-calc__row { grid-template-columns: 1fr; }
    .esc-calc__op  { padding: 2px 0; }
}

@media (max-width: 640px) {
    /* Tarjetas de 2 en 2 ya no caben con su ficha (ancho | rollo) */
    .esc-duo { grid-template-columns: 1fr; }
    .esc-lateral { grid-template-columns: 1fr; }
    .esc-lateral__rail { writing-mode: horizontal-tb; transform: none; padding-right: 0; }
    .esc-index-head { flex-wrap: wrap; }
    .esc-index-head__leader { display: none; }
    .esc-index-head__tally  { flex-basis: 100%; }
    .esc-aviso { padding-left: clamp(20px, 3vw, 30px); }
    .esc-aviso .esc-burst {
        position: relative;
        left: auto;
        top: auto;
        display: inline-block;
        transform: rotate(-4deg);
        margin: 0 0 1rem;
    }
    .esc-actions .esc-btn,
    .esc-calc__foot .esc-btn,
    .esc-cta__actions .esc-btn { width: 100%; }
    .esc-cta__actions { align-items: stretch; }
    .esc-cta__more .esc-btn { flex: 1 1 140px; width: auto; }
}

/* La comparativa colapsa a fichas: el criterio encabeza, cada tela lleva su rótulo */
@media (max-width: 620px) {
    .esc-cmp thead { display: none; }
    .esc-cmp tbody tr { display: block; border-top: 2px solid var(--esc-paper); }
    .esc-cmp tbody tr:first-child { border-top: 0; }
    .esc-cmp tbody th,
    .esc-cmp tbody td { display: block; border-top: 0; border-left: 0; }
    .esc-cmp tbody th { padding-bottom: 0; color: var(--esc-orange); }
    .esc-cmp tbody td { padding-top: 10px; padding-bottom: 10px; }
    .esc-cmp tbody td:last-child { padding-bottom: clamp(14px, 4vw, 20px); }
    .esc-cmp tbody td::before {
        content: attr(data-columna);
        display: block;
        font-family: var(--esc-font-display);
        text-transform: uppercase;
        font-size: 1.05rem;
        letter-spacing: .03em;
        line-height: 1.1;
        color: var(--esc-white);
        margin-bottom: .2rem;
    }
    .esc-cmp tbody td { color: var(--esc-muted-dark); }
}

@media (max-width: 520px) {
    .esc-factors { grid-template-columns: 1fr; }
    .esc-specs { grid-template-columns: 1fr; }
    .esc-ledger tbody th { width: 40%; }
}