/* ═══════════════════════════════════════════════════════════════
   fiubags-confianza.css — Fiubags Design System v1.0
   Componentes: SectionHeading (.fiu-shead, apertura PillMarca/Centrado)
   y Cinta de Confianza (.fiu-cinta = ReassuranceRow con logos de
   pago y paquetería).
   Tokens base: fiubags-header.css define --fiu-teal*, y
   fiubags-menu-b.css define --fiu-coral, --fiu-paper, --fiu-ink.
   Aquí solo se agregan los que faltan.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --fiu-teal-ink:    #1a3532;
    --fiu-coral-light: #fde7e4;
    --fiu-slate:       #475569;
    --fiu-muted:       #64748b;
    --fiu-line-soft:   #eef0f2;

    --font-display: "Fredoka", "Poppins", system-ui, sans-serif;
    --font-sans:    "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(26, 53, 50, .06);
    --shadow-sm: 0 2px 10px rgba(26, 53, 50, .07);

    --dur-fast: .15s;
    --dur-base: .25s;
    --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ── SectionHeading — apertura PillMarca / Centrado ──────────── */
.fiu-shead { display: flex; flex-direction: column; gap: 12px; }
.fiu-shead--center { align-items: center; text-align: center; }

.fiu-shead__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fiu-teal-mid); background: var(--fiu-teal-light);
    padding: 6px 13px; border-radius: var(--radius-pill);
}
.fiu-shead--center .fiu-shead__eyebrow { align-self: center; }
.fiu-shead__eyebrow i { color: var(--fiu-teal); font-size: 11px; }

.fiu-shead__title {
    position: relative; z-index: 0;
    font-family: var(--font-display); font-weight: 600;
    color: var(--fiu-teal-ink); margin: 0;
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.85rem);
    line-height: 1.04; letter-spacing: -.015em;
}
/* marker coral detrás de una palabra (máx 1 por título) */
.fiu-shead__title .accent { color: var(--fiu-coral); position: relative; white-space: nowrap; }
.fiu-shead__title .accent::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: .04em;
    height: .28em; z-index: -1;
    background: var(--fiu-coral-light); border-radius: var(--radius-pill);
    transform: rotate(-1deg);
}

.fiu-shead__sub {
    font-family: var(--font-sans);
    font-size: 16.5px; line-height: 1.55; color: var(--fiu-muted);
    margin: 4px 0 0; max-width: 56ch;
}
.fiu-shead--center .fiu-shead__sub { margin-inline: auto; }

/* lede SEO bajo el encabezado del catálogo */
.fiu-catalogo-lede {
    font-family: var(--font-sans);
    max-width: 62ch; margin: 18px auto 0; text-align: center;
    font-size: 16px; line-height: 1.7; color: var(--fiu-slate);
}
.fiu-catalogo-lede strong { color: var(--fiu-teal-ink); font-weight: 600; }

/* ── Cinta de Confianza — ReassuranceRow con logos ───────────── */
/* columnas proporcionales al contenido: texto solo · texto + chip
   de pagos · texto + 3 chips de paquetería */
.fiu-cinta {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(12px, 2vw, 24px);
    margin-top: clamp(28px, 4vw, 48px);
    background: var(--fiu-paper);
    border: 1.5px solid var(--fiu-line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(18px, 2.5vw, 26px) clamp(16px, 3vw, 32px);
}

.fiu-cinta__col {
    display: flex; align-items: center; justify-content: center;
    padding-inline: clamp(4px, 1vw, 12px);
}
.fiu-cinta__col + .fiu-cinta__col { border-left: 1px solid var(--fiu-line-soft); }

/* ReassuranceItem canónico (los logos viven dentro del bloque de texto) */
.fiu-reassure { display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); }
.fiu-reassure > i {
    flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 50%; background: var(--fiu-teal-light); color: var(--fiu-teal);
    font-size: 17px;
}
.fiu-reassure > span { display: flex; flex-direction: column; font-size: 13px; color: var(--fiu-muted); line-height: 1.4; }
.fiu-reassure strong { font-size: 14.5px; font-weight: 600; color: var(--fiu-teal-ink); }

/* chips blancos que normalizan los logos */
.fiu-cinta__logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fiu-cinta__chip {
    display: flex; align-items: center; justify-content: center;
    height: 48px; background: var(--fiu-white);
    border: 1px solid var(--fiu-line-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fiu-cinta__chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.fiu-cinta__chip--pagos { padding: 0 14px; }
.fiu-cinta__chip--pagos img { height: 26px; width: auto; display: block; }

/* los logos de paquetería vienen en lienzo cuadrado 500×500 con
   mucho aire; object-fit cover recorta la franja central */
.fiu-cinta__chip--envio { width: 100px; }
.fiu-cinta__chip--envio img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* container Bootstrap de 960px: chips más compactos para no envolver */
@media (min-width: 992px) and (max-width: 1199px) {
    .fiu-cinta__chip--envio { width: 84px; height: 42px; }
    .fiu-cinta__chip--pagos img { height: 24px; }
}

@media (max-width: 991px) {
    .fiu-cinta { grid-template-columns: 1fr; gap: 16px; }
    .fiu-cinta__col { justify-content: flex-start; }
    .fiu-cinta__col + .fiu-cinta__col {
        border-left: 0;
        border-top: 1px solid var(--fiu-line-soft);
        padding-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fiu-cinta__chip { transition: none; }
    .fiu-cinta__chip:hover { transform: none; }
}