/**
 * =============================================
 * NOSOTROS — nosotros.css
 * =============================================
 * Archivo:      public/css/nosotros.css
 * Descripción:  Estilos específicos de la vista "Nosotros" (views/layout/nosotros.php).
 *               Bloque "Pilares" — layout editorial dividido y tarjetas.
 * Depende de:   Fuente Google 'JetBrains Mono' (cargada desde la vista).
 * Autor:        Stetik Lab Academy
 * =============================================
 */

/* ══ Pilares — split editorial ═════════════════════════════════ */
.nb-pil {
    background: #F5F1EA;
    padding: 5.5rem 1.5rem 3.5rem;
}
.nb-pil-inner {
    max-width: 1180px; margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 4.5rem;
    align-items: center;
}

/* ── Columna izquierda ──────────────────────────────────────── */
.nb-pil-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem; font-weight: 500;
    letter-spacing: .34em; text-transform: uppercase;
    color: #86662F; margin-bottom: 1.5rem;
}
.nb-pil-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 600; color: #292724;
    line-height: 1.18; letter-spacing: -.01em;
    margin: 0 0 1.5rem;
}
.nb-pil-title em { font-style: italic; color: #86662F; }
.nb-pil-lead {
    font-family: 'Inter', sans-serif;
    font-size: .92rem; color: #6B655D;
    line-height: 1.85; margin: 0; max-width: 380px;
}
.nb-pil-lead strong { color: var(--verde-marca); font-weight: 600; }

/* ── Tarjetas ───────────────────────────────────────────────── */
.nb-pil-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
    align-items: stretch;
}

.nb-pil-card {
    background: #fff;
    border: 1px solid rgba(194,154,89,.16);
    border-radius: 12px;
    padding: 1.6rem 1.4rem 1.7rem;
    display: flex; flex-direction: column;
    transition: transform .32s cubic-bezier(.4,0,.2,1),
                box-shadow .32s, border-color .32s;
}
.nb-pil-card:hover {
    transform: translateY(-5px);
    border-color: rgba(194,154,89,.42);
    box-shadow: 0 16px 34px rgba(160,120,110,.13);
}

.nb-pil-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 500;
    letter-spacing: .24em; text-transform: uppercase;
    color: #6B655D; margin-bottom: 1.15rem;
    transition: color .32s;
}
.nb-pil-card:hover .nb-pil-tag { color: #86662F; }

.nb-pil-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.32rem; font-weight: 600;
    color: #86662F; margin: 0 0 .85rem;
    letter-spacing: .005em;
}
.nb-pil-text {
    font-family: 'Inter', sans-serif;
    font-size: .92rem; color: #6B655D;   /* 5,6:1 sobre blanco */
    line-height: 1.75; margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .nb-pil-inner { grid-template-columns: 1fr; gap: 2.75rem; }
    .nb-pil-lead { max-width: 560px; }
}
@media (max-width: 767px) {
    .nb-pil { padding: 4rem 1.25rem 4.5rem; }
    .nb-pil-cards { grid-template-columns: 1fr; gap: .9rem; }
    .nb-pil-title br { display: none; }
}
@media (max-width: 575.98px) {
    .nb-pil { padding: 3.25rem 1.15rem 3.75rem; }
    .nb-pil-card { padding: 1.4rem 1.2rem 1.5rem; }
}

/* ══ Línea de tiempo de la marca ═══════════════════════════════
   Recorrido 2018 → 2026 con los logos que ha usado el negocio.
   En escritorio los hitos alternan a lado y lado de un riel
   central; en pantallas angostas el riel se va al borde y todo
   queda en una sola columna.
   ════════════════════════════════════════════════════════════ */
.nb-tl {
    background: #F5F1EA;
    padding: 4rem 1.5rem 4rem;
}
.nb-tl-inner { max-width: 1080px; margin: 0 auto; }

/* ── Encabezado ─────────────────────────────────────────────── */
.nb-tl-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.nb-tl-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem; font-weight: 500;
    letter-spacing: .34em; text-transform: uppercase;
    color: #86662F; margin-bottom: 1.25rem;
}
.nb-tl-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 600; color: #292724;
    line-height: 1.2; letter-spacing: -.01em;
    margin: 0 0 1.1rem;
}
.nb-tl-title em { font-style: italic; color: #86662F; }
.nb-tl-lead {
    font-family: 'Inter', sans-serif;
    font-size: .92rem; color: #6B655D;
    line-height: 1.85; margin: 0;
}

/* ── Riel ───────────────────────────────────────────────────── */
.nb-tl-rail {
    position: relative;
    list-style: none; margin: 0; padding: 0;
}

/* Barra que se llena a medida que el visitante baja: la historia se
   "dibuja" delante de él. La altura la fija el script en --tl-avance. */
.nb-tl-avance {
    position: absolute; top: 0; left: 50%;
    width: 3px; margin-left: -1.5px;
    height: var(--tl-avance, 0%);
    border-radius: 3px;
    background: linear-gradient(180deg, #C29A59 0%, #C29A59 55%, var(--fondo-oscuro, #4A4540) 100%);
    box-shadow: 0 0 12px rgba(194,154,89,.35);
    transition: height .18s linear;
    z-index: 1;
    pointer-events: none;
}
.nb-tl-rail::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px;
    background: linear-gradient(180deg,
        rgba(194,154,89,0) 0%,
        rgba(194,154,89,.35) 8%,
        rgba(41,39,36,.35) 92%,
        rgba(41,39,36,0) 100%);
}

/* ── Hito ───────────────────────────────────────────────────── */
/* Los hitos se solapan en vertical: al alternar lados nunca chocan, y
   la seccion deja de tener pantallas medio vacias al bajar. */
.nb-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: start;
    margin-bottom: 0;
}
.nb-tl-item + .nb-tl-item { margin-top: -7rem; }
.nb-tl-item:last-child { margin-bottom: 0; }

/* Marcador del año sobre el riel */
.nb-tl-dot {
    grid-column: 2;
    justify-self: center;
    width: 66px; height: 66px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 2px solid rgba(194,154,89,.35);
    box-shadow: 0 0 0 7px #F5F1EA, 0 6px 18px rgba(41,39,36,.07);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .95rem; font-weight: 700; color: #86662F;   /* 5,29:1 sobre blanco */
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.nb-tl-item.is-hito .nb-tl-dot {
    border-color: rgba(41,39,36,.45); color: #292724;   /* 5,7:1 sobre blanco */
}
.nb-tl-item.is-actual .nb-tl-dot {
    background: #C29A59; border-color: #C29A59; color: #292724;   /* 5,29:1 */
    box-shadow: 0 0 0 7px #F5F1EA, 0 8px 22px rgba(168,80,93,.32);
}

/* Tarjeta */
.nb-tl-card {
    background: #fff;
    border: 1px solid rgba(194,154,89,.16);
    border-radius: 14px;
    padding: 1.5rem 1.6rem 1.6rem;
    box-shadow: 0 2px 10px rgba(41,39,36,.04);
    transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s, border-color .32s;
}
.nb-tl-card:hover {
    border-color: rgba(194,154,89,.34);
    box-shadow: 0 8px 24px rgba(41,39,36,.07);
}

/* Alternancia: impares a la izquierda, pares a la derecha */
/* Solo cambia el lado del riel: el texto siempre arranca a la izquierda,
   porque alinearlo a la derecha desflecaba párrafos de cuatro líneas.
   nth-of-type blinda la alternancia si se inserta algo más en el riel. */
.nb-tl-item:nth-of-type(odd)  .nb-tl-card { grid-column: 1; }
.nb-tl-item:nth-of-type(even) .nb-tl-card { grid-column: 3; }

/* Vitrina del logo */
.nb-tl-logo-wrap {
    width: 170px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid #F5F1EA;
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.nb-tl-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.nb-tl-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #6B655D; margin-bottom: .45rem;
}
.nb-tl-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem; font-weight: 600; color: #292724;
    margin: 0 0 .55rem; line-height: 1.3;
}
.nb-tl-text {
    font-family: 'Inter', sans-serif;
    font-size: .86rem; color: #6B655D;
    line-height: 1.8; margin: 0;
    position: relative;   /* queda por delante de la marca de agua */
}
.nb-tl-text strong { color: var(--verde-marca); font-weight: 600; }

/* Hito sin logo (apertura del local) */
.nb-tl-item.is-hito .nb-tl-card {
    background: #fbfaf6;
    border-color: rgba(41,39,36,.26);
}
.nb-tl-fecha {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--verde-marca); margin-bottom: .7rem;
}
.nb-tl-item.is-hito .nb-tl-tag  { color: var(--verde-marca); }
.nb-tl-item.is-hito .nb-tl-card { padding-top: 1.5rem; }

/* Cierre */
.nb-tl-cierre {
    max-width: 620px; margin: 2.5rem auto 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: .88rem; color: #6B655D; line-height: 1.9;
}
.nb-tl-cierre strong { color: #292724; font-weight: 600; }

/* ── Animación de entrada ───────────────────────────────────────
   El estado oculto cuelga de .js-tl, que añade el propio script: si
   el JS no corre, la historia se ve completa en vez de quedar en
   blanco. Cada hito entra desde su lado del riel. */
.js-tl .nb-tl-item .nb-tl-card,
.js-tl .nb-tl-item .nb-tl-dot { will-change: transform, opacity; }

.js-tl .nb-tl-item .nb-tl-card {
    opacity: 0;
    transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1),
                box-shadow .32s, border-color .32s;
}
.js-tl .nb-tl-item:nth-of-type(odd)  .nb-tl-card { transform: translateX(-38px); }
.js-tl .nb-tl-item:nth-of-type(even) .nb-tl-card { transform: translateX(38px); }
.js-tl .nb-tl-item.is-visible .nb-tl-card { opacity: 1; transform: none; }

/* El año aparece con un rebote corto, medio segundo después */
.js-tl .nb-tl-item .nb-tl-dot {
    opacity: 0; transform: scale(.55);
    transition: opacity .45s ease .12s,
                transform .6s cubic-bezier(.34,1.56,.64,1) .12s;
}
.js-tl .nb-tl-item.is-visible .nb-tl-dot { opacity: 1; transform: none; }

/* Conector del riel a la tarjeta, se dibuja al entrar */
.nb-tl-item { position: relative; }
.nb-tl-item::after {
    content: '';
    position: absolute; top: 50%; width: 27px; height: 2px; margin-top: -1px;
    transform: scaleX(0); transition: transform .5s ease .3s;
    z-index: 0;
}
.nb-tl-item:nth-of-type(odd)::after {
    left: calc(50% - 60px); transform-origin: left;
    background: linear-gradient(90deg, rgba(194,154,89,0), rgba(194,154,89,.5));
}
.nb-tl-item:nth-of-type(even)::after {
    right: calc(50% - 60px); transform-origin: right;
    background: linear-gradient(270deg, rgba(194,154,89,0), rgba(194,154,89,.5));
}
.nb-tl-item.is-visible::after { transform: scaleX(1); }

/* El año, en grande y translúcido, como marca de agua de la tarjeta */
.nb-tl-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.nb-tl-card::after {
    content: attr(data-anio);
    position: absolute; right: .7rem; bottom: .35rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4.2rem; font-weight: 600; line-height: .9;
    color: #86662F; opacity: .16;
    letter-spacing: -.03em; pointer-events: none;
    z-index: -1;
    transition: opacity .4s ease, transform .5s ease;
}
.nb-tl-item.is-hito  .nb-tl-card::after { color: var(--verde-marca); opacity: .17; }
.nb-tl-item.is-actual .nb-tl-card::after { opacity: .2; }
.nb-tl-card:hover::after { opacity: .26; transform: translateY(-3px); }

/* El logo respira al pasar el cursor */
.nb-tl-logo { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.nb-tl-card:hover .nb-tl-logo { transform: scale(1.07); }
.nb-tl-logo-wrap { transition: border-color .32s, box-shadow .32s; }
.nb-tl-card:hover .nb-tl-logo-wrap {
    border-color: rgba(194,154,89,.3);
    box-shadow: 0 6px 18px rgba(194,154,89,.12);
}

/* La etapa actual late suavemente para llamar la atención */
.nb-tl-item.is-actual .nb-tl-dot { position: relative; }
.nb-tl-item.is-actual .nb-tl-dot::after {
    content: '';
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(168,80,93,.55);
    animation: nb-tl-latido 2.6s ease-out infinite;
}
@keyframes nb-tl-latido {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.45); opacity: 0;  }
    100% { transform: scale(1.45); opacity: 0;  }
}

/* Etiqueta "hoy" sobre la última etapa */
.nb-tl-hoy {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: .5rem; padding: .12rem .5rem;
    border-radius: 999px; background: #C29A59; color: #292724;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .55rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .js-tl .nb-tl-item .nb-tl-card,
    .js-tl .nb-tl-item .nb-tl-dot { opacity: 1; transform: none; transition: none; }
    .nb-tl-item::after { transform: scaleX(1); transition: none; }
    .nb-tl-item.is-actual .nb-tl-dot::after { animation: none; }
    .nb-tl-avance { transition: none; }
    .nb-tl-card:hover .nb-tl-logo { transform: none; }
}

/* ── Una sola columna ───────────────────────────────────────── */
@media (max-width: 860px) {
    .nb-tl { padding: 4rem 1.25rem 4.5rem; }
    .nb-tl-head { margin-bottom: 2.75rem; }

    .nb-tl-rail::before { left: 33px; }

    .nb-tl-item {
        grid-template-columns: 66px 1fr;
        gap: 1.1rem;
        align-items: start;
        margin-bottom: 2.25rem;
    }
    /* En una sola columna ya no se alternan lados: sin el solape
       vertical de escritorio (margin-top negativo) cada tarjeta
       taparía a la anterior. */
    .nb-tl-item + .nb-tl-item { margin-top: 0; }
    .nb-tl-item:last-child { margin-bottom: 0; }
    .nb-tl-dot {
        grid-column: 1; grid-row: 1;
        width: 66px; height: 66px;
        box-shadow: 0 0 0 6px #F5F1EA, 0 6px 18px rgba(41,39,36,.07);
    }
    .nb-tl-item:nth-of-type(odd)  .nb-tl-card,
    .nb-tl-item:nth-of-type(even) .nb-tl-card {
        grid-column: 2; grid-row: 1;
    }
    /* En una sola columna las tarjetas entran desde abajo */
    .js-tl .nb-tl-item:nth-of-type(odd)  .nb-tl-card,
    .js-tl .nb-tl-item:nth-of-type(even) .nb-tl-card { transform: translateY(24px); }
    .js-tl .nb-tl-item.is-visible .nb-tl-card { transform: none; }
    .nb-tl-item::after { display: none; }
    .nb-tl-avance { left: 33px; }
    .nb-tl-card::after { font-size: 3.6rem; }
    .nb-tl-logo-wrap { width: 100%; max-width: 190px; height: 84px; }
}

@media (max-width: 480px) {
    .nb-tl-rail::before { left: 26px; }
    .nb-tl-avance { left: 26px; }
    .nb-tl-card::after { font-size: 3rem; right: .5rem; }
    .nb-tl-item { grid-template-columns: 52px 1fr; gap: .85rem; }
    .nb-tl-dot { width: 52px; height: 52px; font-size: .78rem; box-shadow: 0 0 0 5px #F5F1EA; }
    .nb-tl-card { padding: 1.1rem 1.1rem 1.2rem; }
    .nb-tl-logo-wrap { height: 72px; }
    .nb-tl-name { font-size: 1.05rem; }
    .nb-tl-text { font-size: .83rem; }
}

/* ══════════════════════════════════════════════════════════════
   NOSOTROS EN MÓVIL — ritmo, pilares deslizables y misión/visión
   La página se leía como una pila de bloques planos: aquí gana
   jerarquía, un carrusel para los pilares y aire consistente.
   ══════════════════════════════════════════════════════════════ */

/* ── Pilares apilados, con el número como ancla visual ───────── */
@media (max-width: 767px) {
    .nb-pil { padding: 3.5rem 1.25rem 4rem; }
    .nb-pil-inner { gap: 2rem; }
    .nb-pil-eyebrow { margin-bottom: 1rem; }
    .nb-pil-title { font-size: clamp(1.8rem, 8vw, 2.3rem); margin-bottom: 1rem; }
    .nb-pil-lead { font-size: .88rem; line-height: 1.75; }

    .nb-pil-cards { grid-template-columns: 1fr; gap: .85rem; }

    /* Cada tarjeta arranca con su número grande a la izquierda y una
       franja rosa que las encadena visualmente. */
    .nb-pil-card {
        position: relative;
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 0 1rem;
        align-items: start;
        padding: 1.3rem 1.25rem 1.35rem 1.1rem;
        border-radius: 14px;
        border-color: rgba(194,154,89,.2);
        border-left: 3px solid #C29A59;
    }
    .nb-pil-card:hover { transform: none; }

    /* De la etiqueta "01 · Pilar" solo queda el número, en grande.
       El resto se apaga con font-size:0 en el contenedor, así el texto
       sigue existiendo para los lectores de pantalla. */
    .nb-pil-tag {
        grid-column: 1; grid-row: 1 / span 2;
        align-self: start;
        margin: 0; padding-top: .15rem;
        font-size: 0; letter-spacing: 0;
    }
    .nb-pil-num {
        display: block;
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 2.1rem; font-weight: 600; line-height: 1;
        letter-spacing: -.02em; color: #E4E0D8;
    }

    .nb-pil-name {
        grid-column: 2; grid-row: 1;
        font-size: 1.18rem; margin-bottom: .5rem;
    }
    .nb-pil-text {
        grid-column: 2; grid-row: 2;
        font-size: .85rem; line-height: 1.75;
    }
}

@media (max-width: 575.98px) {
    .nb-pil { padding: 3rem 1.15rem 3.5rem; }
    .nb-pil-card { grid-template-columns: 44px 1fr; padding: 1.15rem 1.1rem 1.2rem 1rem; }
    .nb-pil-num { font-size: 1.8rem; }
    .nb-pil-name { font-size: 1.1rem; }
}

/* ── Misión y Visión ─────────────────────────────────────────── */
/* Etiqueta monoespaciada sobre cada título, como en el resto del sitio */
.nb-mv-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .28em; text-transform: uppercase;
    color: rgba(255,255,255,.62);
    margin-bottom: .5rem;
}
.nb-mv-block { position: relative; }

@media (max-width: 767px) {
    .nb-mv-left {
        padding: 3.25rem 1.35rem 3.5rem;
        gap: 0;
    }
    .nb-mv-eyebrow { text-align: left; }

    /* Una línea separa los dos bloques en vez de dejarlos sueltos */
    .nb-mv-block + .nb-mv-block {
        margin-top: 2.25rem; padding-top: 2.25rem;
        border-top: 1px solid rgba(255,255,255,.22);
    }
    .nb-mv-title { line-height: 1.05; }
    .nb-mv-text + .nb-mv-text { margin-top: .8rem; }

    /* La foto se integra en vez de quedar como una franja suelta */
    .nb-mv-right { height: 260px; }
    .nb-mv-img { object-position: center 30%; }
}

/* ── Cabecera de marca ───────────────────────────────────────── */
@media (max-width: 767px) {
    .nb-nosotros-header { padding: 2.75rem 1.25rem 2.25rem; }
    .nb-nosotros-brand-logo { width: min(76vw, 320px); }
    .nb-nosotros-brand-desc {
        font-size: .92rem; line-height: 1.75; margin-top: 1.15rem;
    }
}

/* ── Frase destacada ─────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .fil-quote-text { line-height: 1.28; max-width: 22ch; }
    .fil-quote-rule { width: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   BOTONES SIN ILUMINACIÓN — regla global del proyecto
   ------------------------------------------------------------
   Ningún botón lleva resplandor: ni sombras de color, ni halos de
   foco, ni texto con sombra, ni filtros de brillo. El relieve se
   consigue con color plano y borde, no con luz.
   Este bloque va al final del archivo a propósito: cierra la
   cascada para que ninguna regla anterior lo contradiga.
   ══════════════════════════════════════════════════════════════ */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[class*="btn"],
[class*="Btn"],
.nb-hero-cta,
.nb-ev-footer-cta,
button::before, button::after,
[class*="btn"]::before, [class*="btn"]::after {
    box-shadow: none !important;
    text-shadow: none !important;
}
button:hover, button:focus, button:active, button:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active,
[class*="btn"]:hover, [class*="btn"]:focus, [class*="btn"]:active,
[class*="btn"]:focus-visible, [class*="btn"]:focus-within,
[class*="btn"].active, [class*="btn"].show, [class*="btn"]:disabled,
.btn-check:checked + .btn, .btn-check:focus + .btn,
.nb-hero-cta:hover, .nb-hero-cta:focus,
.nb-ev-footer-cta:hover, .nb-ev-footer-cta:focus {
    box-shadow: none !important;
    text-shadow: none !important;
}
/* El brillo por filtro también queda fuera */
button:hover, [class*="btn"]:hover,
button:focus, [class*="btn"]:focus {
    filter: none !important;
}
/* Quitar la sombra no puede dejar el foco invisible para quien
   navega con teclado: se reemplaza por un contorno sólido. */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[class*="btn"]:focus-visible {
    /* Color fijo oscuro y halo crema: asi el foco se ve tanto sobre un
       boton claro como sobre uno de color. Con currentColor el contorno
       era blanco sobre fondo crema, es decir invisible. */
    outline: 3px solid #292724;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(245,241,234,.95) !important;
}

/* Los campos de formulario tambien necesitan un foco visible: la regla
   heredada de Bootstrap ponia el borde en blanco y un halo al 25% de
   opacidad (1.18:1), que no cumple el minimo de 3:1 del criterio 1.4.11. */
.form-control:focus,
.custom-select:focus,
.co-input:focus,
.co-select:focus,
.lg-input:focus,
textarea:focus,
select:focus {
    border-color: #C29A59 !important;
    outline: 2px solid #C29A59;
    outline-offset: 1px;
    box-shadow: none !important;
}