/*
 * trust-bar.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: todas las páginas excepto legales — condicional en functions.php
 *
 * El HTML de la sección se inyecta vía hook blocksy:content:top (priority 5)
 * en functions.php. Este CSS estiliza ese HTML.
 *
 * DISEÑO:
 * - Ticker horizontal (~48px) que desplaza en bucle, de derecha a izquierda,
 *   el grupo "Servicio Técnico Oficial" + logo Tegui + logo Bticino
 * - CSS puro: dos mitades idénticas + translateX(0 -> -50%) = bucle sin costura
 * - Fondo blanco · borde inferior fino · pausa al pasar el ratón
 * - Velocidad en --db-ticker-duracion · se detiene con prefers-reduced-motion
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*) (alfa con color-mix)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-trust-bar
 */

/* ============================================================
   FRANJA — WRAPPER PRINCIPAL
   Full-width · fondo blanco · edge-to-edge
   ============================================================ */
.db-trust-bar {
    width: 100%;
    background-color: var(--color-blanco);
    border-bottom: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 10%, transparent);
}

/* ============================================================
   TICKER — ventana que recorta lo que entra/sale (sin scroll horizontal)
   ============================================================ */
.db-trust-bar .db-trust-bar__ticker {
    overflow: hidden;
}

/* ============================================================
   TRACK — dos mitades idénticas en fila; se desliza en bucle.
   --db-ticker-duracion controla la velocidad (más segundos = más lento).
   ============================================================ */
.db-trust-bar .db-trust-bar__track {
    --db-ticker-duracion: 220s;
    display: flex;
    width: max-content;
    align-items: center;
    animation: db-ticker var(--db-ticker-duracion) linear infinite;
    will-change: transform;
}

@keyframes db-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* desplaza exactamente una mitad */
}

/* Pausa al pasar el ratón */
.db-trust-bar:hover .db-trust-bar__track {
    animation-play-state: paused;
}

/* ============================================================
   GRUPO — texto + 2 logos. La separación ENTRE grupos va aquí
   (padding-right uniforme), no como gap del track: periodo exacto, sin costura.
   ============================================================ */
.db-trust-bar .db-trust-bar__group {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    height: 48px;
    padding-right: 6rem;
}

/* ============================================================
   TEXTO — "Servicio Técnico Oficial"
   Con separador vertical a la derecha
   ============================================================ */
.db-trust-bar .db-trust-bar__texto {
    font-family: var(--font-cuerpo);
    font-size: 0.75rem;
    font-weight: var(--peso-semibold);
    font-stretch: var(--ancho-condensado);
    color: var(--color-verde-oscuro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-right: 1.75rem;
    border-right: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 25%, transparent);
    white-space: nowrap;
}

/* ============================================================
   LOGOS — Tegui y Bticino
   Propiedades comunes · altura individual por modificador
   (compensación de peso óptico: Bticino tiene trazos más finos)
   ============================================================ */
.db-trust-bar .db-trust-bar__logo {
    width: auto;
    object-fit: contain;
    display: block;
    background-color: transparent;
}

.db-trust-bar .db-trust-bar__logo--tegui   { height: 22px; }
.db-trust-bar .db-trust-bar__logo--bticino { height: 24px; }

/* ============================================================
   RESPONSIVE — MÓVIL
   Grupo más compacto · tamaños reducidos
   ============================================================ */
@media (max-width: 600px) {
    .db-trust-bar .db-trust-bar__group {
        height: 40px;
        gap: 0.75rem;
        padding-right: 3.5rem;
    }

    .db-trust-bar .db-trust-bar__texto {
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        padding-right: 0.5rem;
    }

    .db-trust-bar .db-trust-bar__logo--tegui   { height: 14px; }
    .db-trust-bar .db-trust-bar__logo--bticino { height: 16px; }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   Se detiene (sin costura). padding-left para no pegar al borde.
   No se centra: centrar exigiría ocultar las repeticiones (prohibido por SEO).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-trust-bar .db-trust-bar__track {
        animation: none;
        padding-left: var(--padding-contenedor);
    }
}