/* =========================================================================
   Arletex Design System v3.5 — Tela Fieltro (/telas/tela-fieltro)
   Hoja editorial parcial. Prefijo de clase y de token: fi- / --fi-*.
   Tokens locales con fallback a --ax-* global y, si no, a hex del sistema.
   ─────────────────────────────────────────────────────────────────────────
   ALCANCE: solo los dos bloques informativos nuevos de la landing
   (¿Qué es el fieltro? y Fieltro liso por rollo + parrilla de usos). El
   resto de la página sigue con landing-producto.css + style.css legacy.

   El problema que resuelve: los tres bloques nuevos salían con el mismo
   molde (.tarjeta-beneficio blanca, top-rule orange, titular centrado),
   y tres sections idénticas seguidas son el anti-patrón N-09. Aquí cada
   bloque toma registro, apertura, marco y hover propios; el muestrario
   de colores que va en medio conserva su tarjeta-beneficio original.

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     A ¿Qué es el fieltro?  Periódico · DropCap + marginalia · Side-rule · paper · rule-draw
     B Fieltro liso rollo   Dossier   · RunInHeadline        · Index-tab · white · side-shift
   ========================================================================= */

/* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */
.fi-section {
    --fi-ink:          var(--ax-ink, #1F2530);
    --fi-paper:        var(--ax-paper, #FAF6EE);
    --fi-cream:        var(--ax-cream, #F2EDE4);
    --fi-white:        var(--ax-white, #FFFFFF);
    --fi-orange:       var(--ax-orange, #F15A29);
    --fi-orange-deep:  var(--ax-orange-deep, #B0401A);
    --fi-muted:        var(--ax-muted, #6E6A60);
    --fi-rule:         rgba(31, 37, 48, 0.16);
    --fi-whatsapp:     var(--ax-whatsapp, #25D366);
    --fi-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --fi-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --fi-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --fi-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    --fi-ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

.fi-section *,
.fi-section *::before,
.fi-section *::after { box-sizing: border-box; }

/* ─── Section base + marcos (§8.3) ─────────────────────────────────────── */
.fi-section {
    position: relative;
    width: 100%;
    background: var(--fi-white);
    color: var(--fi-ink);
    font-family: var(--fi-font-body);
    padding: clamp(48px, 8vw, 88px) 0;
}
.fi-section--paper { background: var(--fi-paper); }

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

/* Side-rule: barra vertical orange al costado (registro Periódico) */
.fi-section--side-rule { border-left: 4px solid var(--fi-orange); }

/* Index-tab: pestaña de archivador colgada del borde superior ink */
.fi-section--index-tab { border-top: 2px solid var(--fi-ink); margin-top: clamp(34px, 5vw, 54px); }
.fi-tab {
    position: absolute;
    top: 0;
    left: calc(max(0px, (100% - 1380px) / 2) + clamp(20px, 4vw, 48px));
    transform: translateY(-100%);
    background: var(--fi-ink);
    color: var(--fi-paper);
    font-family: var(--fi-font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 14px;
    white-space: nowrap;
    z-index: 2;
}

/* ─── Tipografía de bloque ─────────────────────────────────────────────── */
.fi-title {
    font-family: var(--fi-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 0.94;
    letter-spacing: -0.01em;
    color: var(--fi-ink);
    margin: 0 0 clamp(20px, 3vw, 32px);
    text-align: left;
}
.fi-title em {
    font-family: var(--fi-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--fi-orange);
}

.fi-body {
    font-family: var(--fi-font-body);
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.65;
    color: var(--fi-ink);
    margin: 0 0 1.15rem;
    text-align: left;          /* justificado NO: abre ríos en columna angosta */
}
.fi-body:last-child { margin-bottom: 0; }
.fi-body strong { font-weight: 700; }

/* ─── A · ¿Qué es el fieltro? — DropCap + Marginalia (§11.5.9) ─────────── */
.fi-marginalia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.44fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.fi-marginalia__main { max-width: 66ch; }

.fi-dropcap {
    float: left;
    font-family: var(--fi-font-accent);
    font-style: italic;
    font-size: clamp(3.4rem, 7vw, 5rem);
    line-height: 0.82;
    color: var(--fi-orange);
    padding: 0.06em 0.14em 0 0;
}

/* Ficha lateral — registro Técnico embebido, mono protagonista */
.fi-specs {
    background: var(--fi-white);
    border: 2px solid var(--fi-ink);
    border-top: 4px solid var(--fi-orange);
    padding: clamp(18px, 2.4vw, 26px);
}
.fi-specs__title {
    font-family: var(--fi-font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fi-ink);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fi-rule);
}
.fi-specs__list { margin: 0; }
.fi-specs__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--fi-rule);
}
.fi-specs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.fi-specs__row dt {
    font-family: var(--fi-font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fi-muted);
    font-weight: 400;
    margin: 0;
    flex: 0 0 auto;
}
.fi-specs__row dd {
    margin: 0 0 0 auto;
    font-family: var(--fi-font-body);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--fi-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* CTA WhatsApp — chunky, sombra sólida sin blur */
.fi-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(20px, 3vw, 28px);
    min-height: 48px;
    padding: 13px 24px;
    background: var(--fi-whatsapp);
    color: #0B2E17;
    border: 2px solid #0B2E17;
    border-radius: 0;
    box-shadow: 0 6px 0 #0B2E17;
    font-family: var(--fi-font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.16s var(--fi-ease), box-shadow 0.16s var(--fi-ease);
}
.fi-cta:hover,
.fi-cta:focus-visible {
    color: #0B2E17;
    text-decoration: none;
    transform: translateY(4px);
    box-shadow: 0 2px 0 #0B2E17;
}
.fi-cta:focus-visible { outline: 3px solid var(--fi-ink); outline-offset: 3px; }

/* ─── B · Fieltro liso por rollo — RunInHeadline (§4.4.3) ──────────────── */
.fi-runin {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 16px);
    margin-bottom: clamp(22px, 3vw, 34px);
    padding-bottom: clamp(12px, 1.6vw, 18px);
    border-bottom: 2px solid var(--fi-ink);
}
.fi-runin__stamp {
    font-family: var(--fi-font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fi-ink);
    border: 1px solid var(--fi-ink);
    padding: 5px 10px;
}
.fi-runin__divider {
    font-family: var(--fi-font-accent);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--fi-orange);
}
.fi-runin .fi-title { margin: 0; }

/* Prosa a dos columnas en desktop (registro Periódico) */
.fi-prose-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3.2vw, 48px);
    margin-bottom: clamp(30px, 4vw, 46px);
}
.fi-prose-cols__lead .fi-body:first-child {
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    line-height: 1.5;
}

/* Parrilla de usos — 4 fichas numeradas, hover side-shift (§6.2.3) */
.fi-uses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.fi-usecard {
    position: relative;
    background: var(--fi-cream);
    border: 2px solid var(--fi-ink);
    border-left: 6px solid var(--fi-ink);
    padding: clamp(18px, 2.2vw, 26px);
    transition: transform 0.18s var(--fi-ease), border-left-color 0.18s var(--fi-ease),
                background-color 0.18s var(--fi-ease);
}
.fi-usecard:hover {
    transform: translateX(6px);
    border-left-color: var(--fi-orange);
    background: var(--fi-white);
}
.fi-usecard__num {
    display: block;
    font-family: var(--fi-font-display);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: var(--fi-orange-deep);   /* orange-deep: naranja grande sí, pero AA seguro */
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}
.fi-usecard__title {
    font-family: var(--fi-font-body);
    font-weight: 700;
    font-size: clamp(1.02rem, 1.3vw, 1.14rem);
    line-height: 1.28;
    color: var(--fi-ink);
    margin: 0 0 8px;
    text-align: left;
}
.fi-usecard__text {
    font-family: var(--fi-font-body);
    font-size: clamp(0.95rem, 1.1vw, 1rem);
    line-height: 1.55;
    color: var(--fi-muted);
    margin: 0;
    text-align: left;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .fi-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .fi-marginalia { grid-template-columns: 1fr; }
    .fi-marginalia__main { max-width: none; }
    .fi-prose-cols { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .fi-uses { grid-template-columns: 1fr; }
    .fi-runin { align-items: flex-start; }
    .fi-runin__divider { display: none; }
    .fi-cta { width: 100%; justify-content: center; }
    .fi-specs__row { flex-wrap: wrap; gap: 2px; }
    .fi-specs__row dd { margin-left: 0; text-align: left; }
}

/* ─── Motion reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fi-cta,
    .fi-usecard { transition: none; }
    .fi-cta:hover,
    .fi-usecard:hover { transform: none; }
}

.color-selector-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}
.color-selector-responsive a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin: 2px 0;
    position: relative;
}
.color-selector-responsive a::after {
    content: attr(data-color-name);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}
.color-selector-responsive a:hover::after {
    opacity: 1;
}
@media (max-width: 576px) {
    .color-selector-responsive {
        justify-content: center;
        gap: 12px;
        padding: 8px 0;
    }
    .color-selector-responsive a {
        width: 36px;
        height: 36px;
        margin: 4px 0;
    }
}
#carouselBannerFieltro .carousel-item {
    aspect-ratio: 19 / 4;
    overflow: hidden;
}
#carouselBannerFieltro .carousel-item picture,
#carouselBannerFieltro .carousel-item a {
    display: block;
    height: 100%;
}
#carouselBannerFieltro .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    #carouselBannerFieltro .carousel-item {
        aspect-ratio: 7 / 5;
    }
}

/* Letrero "ALTO" (Burst octagonal §10.5) sobre el banner de mayoreo.
    Escritorio: esquina superior DERECHA · Móvil: esquina superior IZQUIERDA. */
.ax-banner-promo {
    position: relative;
    display: block;
    line-height: 0;            /* la altura del <a> = altura de la imagen, sin hueco inferior */
}
.ax-stop {
    position: absolute;
    top: -26px;        /* sobresale del borde superior de la imagen */
    right: -18px;      /* y asoma por la esquina derecha */
    bottom: auto;
    left: auto;
    z-index: 4;
    pointer-events: none;
    width: clamp(96px, 15vw, 152px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: var(--ax-white);   /* aro blanco tipo señal vial */
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    filter: drop-shadow(6px 7px 0 var(--ax-ink));  /* sombra sólida, sin blur (N-07) */
    transform: rotate(-6deg);
}
.ax-stop__face {
    width: 84%;
    height: 84%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* el texto se ajusta al ancho de la cara, no se desborda */
    place-items: center;
    text-align: center;
    padding: 0 8%;
    background: var(--ax-orange);
    color: var(--ax-white);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.ax-stop__lead {
    font-family: var(--ax-font-display);
    font-size: clamp(19px, 3vw, 32px);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.ax-stop__sub {
    font-family: var(--ax-font-body);
    font-weight: 800;
    font-size: clamp(8px, 1.3vw, 11px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
    margin-top: 2px;
}
@media (max-width: 767px) {
    .ax-stop {
        top: -20px;
        left: -8px;     /* asoma por la esquina superior izquierda sin salir del viewport */
        right: auto;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .ax-stop { animation: ax-stop-attn 1.4s ease-in-out infinite; }
    @keyframes ax-stop-attn {
        0%, 100% { transform: rotate(-6deg) scale(1); }
        50%      { transform: rotate(-6deg) scale(1.08); }
    }
}