/* ═══════════════════════════════════════════════════════════════════════════
   Shell del storefront — diseño v2
   Cintillo · navbar · mega menú «Explorar» · buscador

   Esto REPINTA el marcado que ya existe; no lo reemplaza. La razón es
   práctica: ese encabezado carga una docena de enganches de JavaScript
   —el contador del carrito, el de favoritos, el buscador, el menú— y
   reescribirlo era la forma más rápida de perder uno sin darse cuenta.
   Cambiando solo el CSS, todo lo que hoy funciona sigue funcionando.

   Todo cuelga de `body.shell-v2`, que solo aparece en los negocios que
   encendieron el diseño nuevo.
   ═══════════════════════════════════════════════════════════════════════════ */

body.shell-v2 {
    --accent: #717fe0;
    --accent-tint: rgba(113, 127, 224, .12);
    --ink: #222;
    --ink-2: #555;
    --ink-3: #888;
    --ink-4: #aaa;
    --line: #e6e6e6;
    --soft: #f7f7f7;
    --page: #fff;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --cintillo-h: 40px;
}

/* ── Cintillo ──────────────────────────────────────────────────────────
   Se pliega al bajar en vez de quedarse pegado: libera 40px de alto y deja
   una sola barra fija. La transición va sobre `height`, no sobre display,
   para que el plegado se vea. */
body.shell-v2 .top-bar {
    height: var(--cintillo-h);
    min-height: 0;
    overflow: hidden;
    transition: height .35s var(--ease), opacity .3s var(--ease);
}

body.shell-v2 .top-bar .content-topbar { height: 100%; }
body.shell-v2 .left-top-bar,
body.shell-v2 .right-top-bar a { font-size: 12.5px; font-weight: 500; }
body.shell-v2 .right-top-bar a { padding: 0 22px; border-left: 1px solid rgba(0, 0, 0, .12); transition: opacity .18s; }
body.shell-v2 .right-top-bar a:hover { opacity: .65; }

body.shell-v2.bajado .top-bar { height: 0; opacity: 0; }

/* ── Navbar ────────────────────────────────────────────────────────────
   Arriba de todo va transparente sobre el banner; al bajar se vuelve una
   barra blanca translúcida con una línea fina. */
body.shell-v2 .wrap-menu-desktop {
    border-bottom: 1px solid transparent;
    transition: background .35s var(--ease), border-color .35s var(--ease),
                box-shadow .35s var(--ease), padding .35s var(--ease);
}

body.shell-v2.bajado .wrap-menu-desktop {
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

body.shell-v2 .main-menu > li > a,
body.shell-v2 .menu-desktop > li > a {
    position: relative;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color .2s var(--ease);
}

body.shell-v2 .main-menu > li > a:hover,
body.shell-v2 .menu-desktop > li > a:hover { color: var(--accent); }

/* Subrayado que entra desde la izquierda. Va sobre ::after para no tocar el
   marcado. */
body.shell-v2 .main-menu > li > a::after,
body.shell-v2 .menu-desktop > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s var(--ease);
}

body.shell-v2 .main-menu > li > a:hover::after,
body.shell-v2 .main-menu > li.active-menu > a::after,
body.shell-v2 .menu-desktop > li > a:hover::after,
body.shell-v2 .menu-desktop > li.active-menu > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Iconos de la derecha ──────────────────────────────────────────────
   Botones circulares. El contador sigue saliendo del `data-notify` que
   actualiza el JavaScript de siempre; acá solo cambia cómo se ve. */
body.shell-v2 .wrap-icon-header .icon-header-item {
    position: relative;
    width: 42px; height: 42px;
    margin-left: 6px;
    padding: 0 !important;
    border-radius: 999px;
    border: 1px solid transparent;
    background: none;
    display: inline-grid;
    place-items: center;
    color: var(--ink);
    transition: background .2s var(--ease), color .2s var(--ease);
}

body.shell-v2 .wrap-icon-header .icon-header-item:hover { background: var(--accent-tint); color: var(--accent); }
body.shell-v2 .wrap-icon-header .icon-header-item i { font-size: 21px; }

body.shell-v2 .icon-header-noti::after {
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 18px;
    border: 2px solid var(--page);
    top: 0; right: 0;
}

/* ── Mega menú «Explorar» ──────────────────────────────────────────────
   El panel existente pasa de pantalla completa a franja bajo la barra. */
body.shell-v2 .fullscreen-menu {
    background: var(--page) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .10);
}

body.shell-v2 .fullscreen-menu .menu-content {
    max-width: 1380px;
    margin: 0 auto;
    padding: clamp(26px, 3vw, 40px) clamp(18px, 4vw, 60px) clamp(30px, 3.4vw, 44px);
    font-family: 'Poppins', Arial, sans-serif;
}

body.shell-v2 .departments-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(20px, 3vw, 48px);
}

body.shell-v2 .department-section h3 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink);
}

body.shell-v2 .department-section ul { margin: 0; padding: 0; list-style: none; }
body.shell-v2 .department-section li { margin: 0; }
body.shell-v2 .department-section a {
    display: block;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--ink-2);
    transition: color .16s var(--ease), padding-left .16s var(--ease);
}
body.shell-v2 .department-section a:hover { color: var(--accent); padding-left: 6px; }

body.shell-v2 .close-menu {
    border: 0; background: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--ink-3);
}
body.shell-v2 .close-menu:hover { color: var(--accent); }

/* ── Categoría del momento ─────────────────────────────────────────────
   Solo se dibuja si hay una marcada como popular. */
body.shell-v2 .mpromo {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: start;
}
body.shell-v2 .mpromo .ph { position: relative; aspect-ratio: 16/10; background: var(--soft); }
body.shell-v2 .mpromo .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .mpromo .tx { padding: 14px 16px 16px; }
body.shell-v2 .mpromo h5 { margin: 0 0 5px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
body.shell-v2 .mpromo p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
body.shell-v2 .mpromo .ir { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
body.shell-v2 .mpromo .ir .material-icons { font-size: 16px; }

/* ── Buscador ──────────────────────────────────────────────────────────
   El campo grande sin caja del diseño; el select2 de siempre queda adentro,
   así que la búsqueda funciona igual. */
body.shell-v2 .modal-search-header { background: rgba(255, 255, 255, .97) !important; }
body.shell-v2 .container-search-header {
    max-width: 1380px;
    padding: 0 clamp(18px, 4vw, 60px);
    font-family: 'Poppins', Arial, sans-serif;
}
body.shell-v2 .wrap-search-header {
    border-bottom: 1.5px solid var(--line);
    padding: 0 0 12px;
    transition: border-color .2s;
}
body.shell-v2 .wrap-search-header:focus-within { border-color: var(--accent); }
body.shell-v2 .wrap-search-header .search { width: 100%; }

@media (max-width: 860px) {
    body.shell-v2 .departments-container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    body.shell-v2 .departments-container { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Banner principal

   Velo diagonal SOLO del lado del texto: la foto del producto queda limpia a
   la derecha y el texto se lee siempre a la izquierda. Es lo que evita tener
   que oscurecer la foto entera para que el titular se distinga.
   ═══════════════════════════════════════════════════════════════════════════ */
body.shell-v2 .item-slick1 { position: relative; }

body.shell-v2 .item-slick1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, .92) 0%,
        rgba(255, 255, 255, .72) 34%,
        rgba(255, 255, 255, 0) 62%);
}

body.shell-v2 .item-slick1 .wrap-content-slide1,
body.shell-v2 .item-slick1 .container { position: relative; z-index: 2; }

/* Ojo: los `layer-slick1` entran con animación, así que acá solo se toca la
   tipografía. Tocar opacidad o transform pelearía con esa animación. */

/* ── Banner viejo (todo el texto en un campo de editor) ────────────────
   Acá NO se le impone tipografía: negritas, cursivas y saltos son decisiones
   del negocio, y forzar Playfair y mayúsculas pisaba lo que había escrito.
   Solo se le da aire y un ancho máximo para que el quiebre caiga solo. */
body.shell-v2 .item-slick1 .wrap-content-slide1 { max-width: min(560px, 92%); }
body.shell-v2 .item-slick1 .ltext-101,
body.shell-v2 .item-slick1 .ltext-201 { color: inherit; }

/* ── Banner por piezas ─────────────────────────────────────────────────
   Cuando el titular viene separado —rótulo, título, línea de acento,
   bajada— el sitio sí decide cómo se ve cada una. Esto es lo que el editor
   de texto enriquecido no permitía: ahí los cuatro renglones salían del
   mismo tamaño y la portada quedaba sin jerarquía. */
body.shell-v2 .hero-v2 {
    max-width: min(620px, 94%);
    font-family: 'Poppins', Arial, sans-serif;
}

body.shell-v2 .hero-v2 .hv-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 14px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-3);
}
body.shell-v2 .hero-v2 .hv-eyebrow::before {
    content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent);
}

body.shell-v2 .hero-v2 .hv-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(30px, 4.2vw, 56px);
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink);
}

/* La segunda línea siempre baja: es el remate del titular, no una
   continuación. En bloque también evita que el color se corte a mitad de
   renglón cuando el título es largo. */
body.shell-v2 .hero-v2 .hv-accent {
    display: block;
    color: var(--accent);
}

body.shell-v2 .hero-v2 .hv-desc {
    margin: 18px 0 0;
    font-size: 15px; line-height: 1.65; color: var(--ink-2);
    max-width: 46ch;
}

body.shell-v2 .hero-v2 .hv-acts {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 30px 0 0;
}

body.shell-v2 .hero-v2 .hv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; padding: 0 26px;
    border: 1px solid var(--accent); border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .16s var(--ease);
}
body.shell-v2 .hero-v2 .hv-btn:hover {
    color: #fff; filter: brightness(.94);
    transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-tint);
}
body.shell-v2 .hero-v2 .hv-btn .material-icons { font-size: 18px; }

body.shell-v2 .hero-v2 .hv-btn.fantasma {
    background: transparent; color: var(--ink); border-color: var(--line);
}
body.shell-v2 .hero-v2 .hv-btn.fantasma:hover {
    color: var(--accent); border-color: var(--accent); filter: none; box-shadow: none;
}

/* El botón sí toma el diseño: no es contenido del editor. */
@media (max-width: 860px) {
    /* En pantalla angosta el texto ya no cabe a un lado: el velo pasa a
       vertical para que se lea igual. */
    body.shell-v2 .item-slick1::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .94) 40%, rgba(255, 255, 255, .55));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tarjetas de regalo — de línea suelta a tarjeta
   ═══════════════════════════════════════════════════════════════════════════ */
body.shell-v2 .gift-v2 {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) 1.15fr;
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--page);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    font-family: 'Poppins', Arial, sans-serif;
}
body.shell-v2 .gift-v2 .gph {
    position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
    background: var(--soft); display: grid; place-items: center; color: var(--ink-4);
}
body.shell-v2 .gift-v2 .gph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .gift-v2 .gph .material-icons { font-size: 54px; }
body.shell-v2 .gift-v2 .geyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
body.shell-v2 .gift-v2 .geyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
body.shell-v2 .gift-v2 h2 {
    margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
    font-size: clamp(24px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink);
}
body.shell-v2 .gift-v2 p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 48ch; }
body.shell-v2 .gift-v2 ul { display: flex; gap: 22px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; }
body.shell-v2 .gift-v2 li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
body.shell-v2 .gift-v2 li .material-icons { font-size: 17px; color: var(--accent); }
body.shell-v2 .gift-v2 .gbtn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 24px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    padding: 15px 26px; border-radius: 999px; border: 1px solid var(--accent);
    background: var(--accent); color: #fff;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
body.shell-v2 .gift-v2 .gbtn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px var(--accent-tint); }

@media (max-width: 860px) { body.shell-v2 .gift-v2 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Cajón del carrito

   Solo CSS sobre el marcado que arma `getCart()`. Ni una línea de ese
   JavaScript se toca: el llenado en vivo, los precios, el IVA, las cantidades
   y el borrado siguen siendo el código de siempre.
   ═══════════════════════════════════════════════════════════════════════════ */
body.shell-v2 .wrap-header-cart .header-cart {
    width: min(420px, 100%) !important;
    padding: 0 !important;
    background: var(--page);
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .16);
}

body.shell-v2 .header-cart-title {
    padding: 20px 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line);
}
body.shell-v2 .header-cart-title .title-text {
    font-size: 12.5px !important; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink) !important;
}

body.shell-v2 .header-cart-content { padding: 8px 22px !important; }
body.shell-v2 .productsList { margin: 0; padding: 0; list-style: none; }

body.shell-v2 .header-cart-item {
    display: grid !important;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line);
}
body.shell-v2 .header-cart-item-img {
    width: 74px !important; height: 74px !important;
    border-radius: 10px; overflow: hidden; background: var(--soft); margin: 0 !important;
}
body.shell-v2 .header-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .header-cart-item-txt { padding: 0 !important; width: auto !important; }
body.shell-v2 .header-cart-item-name {
    display: block; margin: 0 0 4px !important;
    font-size: 13.5px !important; font-weight: 500; line-height: 1.35; color: var(--ink) !important;
}
body.shell-v2 .header-cart-item-txt .text-muted,
body.shell-v2 .header-cart-item-txt span { font-size: 11.5px; color: var(--ink-3); }
body.shell-v2 .header-cart-item-info {
    display: inline-block; margin-top: 6px;
    font-size: 14px !important; font-weight: 700; color: var(--ink) !important;
}
body.shell-v2 .header-cart-item .btnQuantity {
    height: 32px; border: 1px solid var(--line) !important; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--ink);
}
body.shell-v2 .header-cart-item .btnDelete {
    background: none !important; border: 0 !important; box-shadow: none !important;
    color: var(--ink-4) !important; padding: 6px !important;
    transition: color .16s;
}
body.shell-v2 .header-cart-item .btnDelete:hover { color: #e0564f !important; }

body.shell-v2 .header-cart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13.5px; color: var(--ink-2); padding: 0 22px; margin-bottom: 9px;
}
body.shell-v2 .header-cart-total .subtotalValue { font-weight: 600; color: var(--ink); }
body.shell-v2 .header-cart-buttons { padding: 0 22px 22px; display: grid; gap: 9px; }

/* ── Buscador: el campo grande del diseño ──────────────────────────────
   Lo que se ve es el contenedor que dibuja select2, no el <select>. Por eso
   la primera pasada no cambió nada: había que ir sobre `.select2-*`. */
body.shell-v2 .modal-search-header .select2-container { width: 100% !important; }

body.shell-v2 .modal-search-header .select2-selection,
body.shell-v2 .modal-search-header .select2-selection--single {
    height: auto !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 0 12px !important;
    transition: border-color .2s;
}

body.shell-v2 .modal-search-header .select2-container--open .select2-selection {
    border-bottom-color: var(--accent) !important;
}

body.shell-v2 .modal-search-header .select2-selection__rendered,
body.shell-v2 .modal-search-header .select2-selection__placeholder {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(18px, 2.2vw, 26px) !important;
    font-weight: 300;
    line-height: 1.3 !important;
    padding: 0 !important;
    color: var(--ink) !important;
    text-transform: none !important;
}
body.shell-v2 .modal-search-header .select2-selection__placeholder { color: var(--ink-4) !important; }
body.shell-v2 .modal-search-header .select2-selection__arrow { top: 4px !important; right: 0 !important; }

/* El desplegable de resultados, con el mismo aire que el resto. */
body.shell-v2 .select2-dropdown {
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
    overflow: hidden;
    font-family: 'Poppins', Arial, sans-serif;
}
body.shell-v2 .select2-results__option { font-size: 13.5px; padding: 10px 14px; }
body.shell-v2 .select2-results__option--highlighted { background: var(--accent) !important; }

/* ── Carrito: precio anterior por ítem ─────────────────────────────────
   Se pinta solo cuando el producto trae descuento; `getCart()` deja el
   elemento vacío en los demás y así no ocupa lugar. */
body.shell-v2 .header-cart-item-was {
    margin-left: 8px;
    font-size: 12.5px;
    color: #e0564f;
    text-decoration: line-through;
}
body.shell-v2 .header-cart-item-was:empty { display: none; }

/* La foto del ítem borra: el aspa del hover ahora hace lo que aparenta. */
body.shell-v2 .header-cart-item-img { cursor: pointer; }

/* ── Buscador: icono, atajos y ayuda ───────────────────────────────────
   Marcado nuevo, así que acá sí hay algo que vestir. */
body.shell-v2 .wrap-search-header { display: flex !important; align-items: center; gap: 12px; padding-left: 0 !important; }
body.shell-v2 .sv2-lupa { font-size: 24px; color: var(--ink-3); flex: 0 0 auto; }
body.shell-v2 .wrap-search-header .search { flex: 1 1 auto; min-width: 0; }

body.shell-v2 .sv2-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body.shell-v2 .sv2-atajo {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12.5px; font-weight: 500;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink-2);
    cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
body.shell-v2 .sv2-atajo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }

body.shell-v2 .sv2-ayuda {
    margin: 16px 0 0;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12px; color: var(--ink-4);
}

/* ── Aire bajo la barra fija ───────────────────────────────────────────
   El tema pinta el navbar con `position: fixed` y solo le reserva alto en
   `header-v4`, que estas páginas no usan. En la portada eso es a propósito
   —el banner pasa por debajo de una barra transparente— pero en las
   pantallas que arrancan con texto la primera línea, casi siempre las migas
   de pan, quedaba tapada por la barra.

   El espacio son los 84px del navbar más un poco de respiro. Va solo en
   escritorio: abajo de 992px el tema esconde `.container-menu-desktop` y usa
   el encabezado móvil, que sí ocupa lugar en el flujo, y ahí no hay nada que
   corregir.

   Se marca sección por sección en vez de pisar `.container-menu-desktop`,
   para no romper el banner de la portada, que sí quiere quedar por debajo. */
@media (min-width: 992px) {
    body.shell-v2 .v2-tope {
        padding-top: calc(84px + clamp(20px, 3vh, 40px));
    }
}

/* ── Un solo botón de «volver arriba» ──────────────────────────────────
   El tema trae el suyo en la portada (`#myBtn`, un recuadro índigo pegado al
   borde) y el pie nuevo trae el círculo flotante. Los dos hacen lo mismo y se
   solapan. Se apaga el del tema; el círculo del pie queda para todas las
   pantallas, no solo para la portada. */
body.shell-v2 .btn-back-to-top {
    display: none !important;
}