/* ============================================================
   DS Voice — Buscador unificado embebido en WordPress
   Paleta + tipografía alineadas a dragersolutions.com.ar:
     navy h2:   #0F0087
     navy dark: #05005B
     font:      Roboto
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

.dsvoice {
    --dsv-brand:       #0F0087;
    --dsv-brand-dark:  #05005B;
    --dsv-brand-soft:  #eef0fb;
    --dsv-accent:      #C8102E;
    --dsv-border:      #e2e6f0;
    --dsv-muted:       #64748b;
    --dsv-text:        #333333;
    --dsv-bg:          #ffffff;
    --dsv-bg-soft:     #f7f8fc;
    --dsv-radius:      6px;
    --dsv-shadow:      0 1px 3px rgba(15, 0, 135, .08), 0 12px 28px -14px rgba(15, 0, 135, .18);

    color: var(--dsv-text);
    font-family: "Roboto", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px;
    width: 100%;
}
.dsvoice *, .dsvoice *::before, .dsvoice *::after { box-sizing: border-box; }

/* ============================================================
   HERO — heading + buscador grande + filtros (siempre visibles)
   ============================================================ */
.dsv-hero {
    text-align: center;
    margin-bottom: 36px;
}
.dsv-hero__title {
    color: var(--dsv-brand);
    font-family: "Roboto", sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.dsv-hero__sub {
    color: var(--dsv-muted);
    font-size: 16px;
    margin: 0 auto 24px;
    max-width: 720px;
}
.dsv-hero__form { margin: 0 auto 18px; max-width: 760px; }
.dsv-hero__inputwrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--dsv-bg);
    border: 2px solid var(--dsv-brand);
    border-radius: 8px;
    box-shadow: 0 8px 24px -10px rgba(15, 0, 135, .25);
    transition: box-shadow .2s, border-color .15s;
}
.dsv-hero__inputwrap:focus-within {
    border-color: var(--dsv-brand-dark);
    box-shadow: 0 10px 32px -10px rgba(15, 0, 135, .35);
}
.dsv-hero__icon {
    width: 22px; height: 22px;
    margin-left: 18px;
    color: var(--dsv-brand);
    flex-shrink: 0;
}
.dsv-hero__input {
    flex: 1;
    border: 0; background: transparent;
    padding: 18px 14px;
    font: inherit; font-size: 17px;
    color: inherit; outline: none;
    min-width: 0;
}
.dsv-hero__input::placeholder { color: var(--dsv-muted); }
/* Ocultar la X nativa del browser en input[type=search] (Chrome/Safari/Edge).
   Usamos nuestro botón propio .dsv-hero__clear para limpiar. */
.dsv-hero__input::-webkit-search-cancel-button,
.dsv-hero__input::-webkit-search-decoration,
.dsv-hero__input::-webkit-search-results-button,
.dsv-hero__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.dsv-hero__clear {
    appearance: none;
    background: #f1f3f8 !important;
    border: 0 !important;
    color: #6b7280 !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    width: 28px; height: 28px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background .15s, color .15s;
}
.dsv-hero__clear:hover,
.dsv-hero__clear:focus {
    background: var(--dsv-brand, #0F0087) !important;
    color: #fff !important;
    outline: 0;
}
.dsv-hero__clear:hover { background: var(--dsv-brand) !important; color: #fff !important; }

/* Filtros como tabs */
.dsv-filters {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: var(--dsv-bg-soft);
    padding: 6px;
    border-radius: 999px;
    margin: 0 auto;
}
.dsv-filter,
.dsv-filter:link,
.dsv-filter:visited {
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--dsv-muted) !important;
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.dsv-filter:hover {
    background: rgba(15, 0, 135, .08) !important;
    color: var(--dsv-brand) !important;
}
.dsv-filter.is-active,
.dsv-filter.is-active:hover,
.dsv-filter.is-active:focus {
    background: var(--dsv-brand) !important;
    color: #fff !important;
}

/* Variante compact (para insertar en home, sin tanto padding) */
.dsvoice--compact { padding: 24px 16px; }
.dsvoice--compact .dsv-hero { margin-bottom: 20px; }
.dsvoice--compact .dsv-hero__title { font-size: clamp(22px, 3vw, 30px); }
.dsvoice--compact .dsv-hero__sub { font-size: 14px; margin-bottom: 16px; }
.dsvoice--compact .dsv-hero__input { padding: 14px 12px; font-size: 15px; }

/* ============================================================
   STATUS + RESULTS GRID
   ============================================================ */
.dsvoice__status {
    text-align: center;
    color: var(--dsv-muted);
    font-size: 14px;
    min-height: 22px;
    padding: 6px 0;
}
.dsvoice__status.is-error { color: var(--dsv-accent); }
.dsv-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(15, 0, 135, .2);
    border-top-color: var(--dsv-brand);
    border-radius: 50%;
    animation: dsv-spin .8s linear infinite;
    vertical-align: -2px; margin-right: 8px;
}
@keyframes dsv-spin { to { transform: rotate(360deg); } }

.dsv-counts {
    color: var(--dsv-muted);
    font-size: 13px;
    margin: 0 0 18px;
    text-align: center;
}
.dsv-counts strong { color: var(--dsv-brand); font-weight: 700; }

.dsv-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .dsv-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .dsv-results-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .dsv-results-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card de resultado (sustancia o producto) */
.dsv-result,
.dsv-result:link,
.dsv-result:visited {
    background: var(--dsv-bg) !important;
    border: 1px solid var(--dsv-border) !important;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .2s, transform .2s;
}
.dsv-result:hover,
.dsv-result:focus-visible {
    border-color: var(--dsv-brand) !important;
    box-shadow: var(--dsv-shadow) !important;
    transform: translateY(-2px);
    outline: 0;
}
.dsv-result__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--dsv-brand-soft);
    object-fit: contain;
    padding: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--dsv-brand);
}
img.dsv-result__img { display: block; }
.dsv-result__img svg { width: 48px; height: 48px; opacity: .85; }
.dsv-result__img--substance {
    background: linear-gradient(135deg, var(--dsv-brand) 0%, var(--dsv-brand-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Patrón sutil hexagonal/molecular de fondo */
.dsv-result__img--substance::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,.10) 0%, transparent 40%),
                      radial-gradient(circle at 15% 85%, rgba(255,255,255,.07) 0%, transparent 35%);
    pointer-events: none;
}
.dsv-result__img--substance svg { opacity: .95; }
/* Fórmula química como visual principal de la sustancia */
.dsv-formula {
    position: relative;
    z-index: 1;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 6vw, 38px);
    letter-spacing: .01em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.18);
    white-space: nowrap;
}
.dsv-formula sub {
    font-size: .62em;
    font-weight: 600;
    vertical-align: -0.18em;
    opacity: .92;
}
.dsv-result__body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column;
    gap: 4px; flex: 1;
}
.dsv-result__kicker {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--dsv-muted); font-weight: 700;
}
.dsv-result__name {
    color: var(--dsv-brand);
    font-weight: 600; font-size: 15px;
    line-height: 1.3;
    margin: 2px 0 0;
}
.dsv-result__related {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--dsv-brand-soft);
    color: var(--dsv-brand-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 2px 0;
    border: 1px solid color-mix(in srgb, var(--dsv-brand) 25%, transparent);
}
.dsv-result__related::before {
    content: "✓";
    font-size: 9px;
    font-weight: 700;
}
/* Borde de acento para las cards recomendadas */
.dsv-result.is-related {
    border-color: color-mix(in srgb, var(--dsv-brand) 35%, transparent) !important;
}
.dsv-result__sub {
    color: var(--dsv-muted);
    font-size: 13px; line-height: 1.4;
}
.dsv-result__sub code {
    background: var(--dsv-brand-soft);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--dsv-brand);
}
.dsv-result__foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dsv-result__viewmore {
    color: var(--dsv-brand);
    font-size: 12px; font-weight: 600;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.dsv-result:hover .dsv-result__viewmore,
.dsv-result:focus-visible .dsv-result__viewmore {
    opacity: 1; transform: translateY(0);
}
/* Botón "Solicitar info" — ghost profesional: borde fino, se rellena en hover */
.dsv-result__info {
    appearance: none;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1.5px solid color-mix(in srgb, var(--dsv-brand) 25%, transparent) !important;
    background: transparent !important;
    color: var(--dsv-brand) !important;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.dsv-result__info svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.dsv-result__info:hover,
.dsv-result__info:focus {
    background: var(--dsv-brand) !important;
    border-color: var(--dsv-brand) !important;
    color: #fff !important;
    outline: 0;
}
.dsv-result__info:active { transform: scale(.97); }

.dsv-empty {
    text-align: center; padding: 40px 20px;
    color: var(--dsv-muted);
    border: 1px dashed var(--dsv-border);
    border-radius: var(--dsv-radius);
}

/* ============================================================
   MODAL (detalle de producto / sustancia / formulario)
   ============================================================ */
.dsv-modal {
    position: fixed; inset: 0;
    display: none; z-index: 9999;
    align-items: flex-start; justify-content: center;
    padding: 5vh 24px;
}
.dsv-modal.is-open { display: flex; }
.dsv-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 0, 91, .55);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.dsv-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 10px;
    max-width: 900px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px -20px rgba(5, 0, 91, .4);
    animation: dsv-modal-in .22s ease-out;
}
@keyframes dsv-modal-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dsv-modal__close,
.dsv-modal__close:link,
.dsv-modal__close:visited {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    border: 0 !important;
    background: var(--dsv-brand-soft) !important;
    color: var(--dsv-brand) !important;
    font-size: 24px; line-height: 1;
    border-radius: 999px; cursor: pointer;
    z-index: 2;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background .15s, color .15s, transform .1s;
}
.dsv-modal__close:hover,
.dsv-modal__close:focus,
.dsv-modal__close:active {
    background: var(--dsv-brand) !important;
    color: #fff !important;
    outline: 0 !important;
}
.dsv-modal__close:active { transform: scale(.95); }
.dsv-modal__body { padding: 36px 32px 32px; }

/* ============================================================
   DETALLE DE PRODUCTO (modal)
   ============================================================ */
.dsv-product__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 26px;
}
@media (min-width: 720px) {
    .dsv-product__top { grid-template-columns: 280px 1fr; gap: 28px; }
}
.dsv-product__img {
    width: 100%; aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--dsv-brand-soft);
    border-radius: 8px;
    padding: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--dsv-brand);
}
img.dsv-product__img { display: block; }
.dsv-product__img svg { width: 56px; height: 56px; opacity: .8; }
.dsv-product__head { display: flex; flex-direction: column; gap: 6px; }
.dsv-product__cat {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dsv-muted); font-weight: 700;
}
.dsv-product__name {
    color: var(--dsv-brand);
    font-family: "Roboto", sans-serif;
    font-size: 26px; font-weight: 700;
    margin: 4px 0 0; line-height: 1.2;
}
.dsv-product__tagline {
    color: var(--dsv-text);
    font-size: 15px; margin: 0;
}

/* Mismo CTA en producto y sustancia */
.dsv-product__cta,
.dsv-product__cta:link,
.dsv-product__cta:visited {
    appearance: none;
    align-self: flex-start;
    margin-top: 14px;
    padding: 12px 22px;
    border: 0 !important;
    border-radius: 8px;
    background: var(--dsv-brand) !important;
    color: #fff !important;
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -4px rgba(15, 0, 135, .4) !important;
    transition: background .15s, transform .1s;
}
.dsv-product__cta:hover,
.dsv-product__cta:focus {
    background: var(--dsv-brand-dark) !important;
    color: #fff !important;
    outline: 0;
}
.dsv-product__cta:active { transform: scale(.98); }

.dsv-product__sections {
    display: flex; flex-direction: column; gap: 18px;
}
.dsv-product__section {
    background: var(--dsv-brand-soft);
    border-radius: 8px;
    padding: 18px 20px;
}
.dsv-product__section-title {
    color: var(--dsv-brand);
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin: 0 0 12px;
}
.dsv-product__features {
    margin: 0; padding-left: 22px;
    color: var(--dsv-text);
    font-size: 14.5px; line-height: 1.55;
}
.dsv-product__features li { margin-bottom: 4px; }
.dsv-product__desc {
    margin: 0 0 10px;
    color: var(--dsv-text);
    font-size: 14.5px; line-height: 1.55;
}
.dsv-product__desc:last-child { margin-bottom: 0; }
.dsv-product__official-line { margin: 16px 0 0; }
.dsv-product__official {
    display: inline-block;
    color: var(--dsv-brand) !important;
    font-weight: 600; font-size: 14px;
    text-decoration: none !important;
    border-bottom: 1px solid currentColor;
}
.dsv-product__official:hover { color: var(--dsv-brand-dark) !important; }

/* Specs tables */
.dsv-spec-group {
    background: #fff;
    border: 1px solid var(--dsv-border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.dsv-spec-group:last-child { margin-bottom: 0; }
.dsv-spec-group__title {
    color: var(--dsv-brand);
    font-size: 14px; font-weight: 600;
    margin: 0 0 10px;
}
.dsv-spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dsv-spec-table th, .dsv-spec-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--dsv-border);
    vertical-align: top;
}
.dsv-spec-table tr:last-child th, .dsv-spec-table tr:last-child td { border-bottom: 0; }
.dsv-spec-table th { color: var(--dsv-muted); font-weight: 500; width: 40%; }
.dsv-spec-table td { color: var(--dsv-brand); font-weight: 500; word-break: break-word; }

/* Descargas */
.dsv-downloads {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 600px) { .dsv-downloads { grid-template-columns: 1fr 1fr; } }
.dsv-download,
.dsv-download:link,
.dsv-download:visited {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--dsv-border);
    border-radius: 6px;
    color: var(--dsv-text) !important;
    text-decoration: none !important;
    font-size: 13.5px;
    transition: border-color .15s, background .15s;
}
.dsv-download:hover {
    border-color: var(--dsv-brand);
    background: var(--dsv-brand-soft);
    color: var(--dsv-brand) !important;
}
.dsv-download__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 4px;
    background: var(--dsv-brand); color: #fff;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.dsv-download__label { line-height: 1.3; word-break: break-word; }

/* ============================================================
   DETALLE DE SUSTANCIA (header + secciones)
   ============================================================ */
.dsv-substance-head {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dsv-border);
}
.dsv-substance-head__kicker {
    display: inline-block;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--dsv-muted); font-weight: 700;
}
.dsv-substance-head__name {
    color: var(--dsv-brand);
    font-family: "Roboto", sans-serif;
    font-size: 28px; font-weight: 700;
    margin: 4px 0 6px; line-height: 1.2;
}
.dsv-substance-head__sub {
    color: var(--dsv-muted);
    font-size: 14px;
    margin: 0 0 14px;
}
.dsv-substance-head__sub code {
    background: var(--dsv-brand-soft);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--dsv-brand);
}

.dsv-section {
    background: var(--dsv-brand-soft);
    border-radius: var(--dsv-radius);
    padding: 14px 16px;
}
.dsv-section__title {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--dsv-brand);
    margin: 0 0 10px;
}
.dsv-section__title-sub { color: var(--dsv-brand-dark); font-weight: 700; }
.dsv-card__body--full { width: 100%; }

.dsv-kv {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    column-gap: 14px; row-gap: 6px;
    font-size: 14px;
}
.dsv-kv dt { color: var(--dsv-muted); }
.dsv-kv dd {
    margin: 0;
    color: var(--dsv-brand);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.dsv-pictograms { display: flex; flex-wrap: wrap; gap: 10px; }
.dsv-pictogram { width: 64px; height: 64px; }
.dsv-pictogram img { width: 100%; height: 100%; display: block; }

.dsv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dsv-chip {
    background: #fff;
    border: 1px solid var(--dsv-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px; color: var(--dsv-brand);
}
.dsv-chip--danger {
    background: rgba(200, 16, 46, .08);
    border-color: rgba(200, 16, 46, .25);
    color: var(--dsv-accent);
}

.dsv-statements {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 6px; font-size: 13px;
}
.dsv-statements li {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px; padding: 6px 0;
    border-bottom: 1px dashed var(--dsv-border);
}
.dsv-statements li:last-child { border-bottom: 0; }
.dsv-statements code { color: var(--dsv-accent); font-weight: 700; font-size: 12px; }

.dsv-exposure { width: 100%; border-collapse: collapse; font-size: 13px; }
.dsv-exposure th, .dsv-exposure td {
    text-align: left; padding: 6px 8px;
    border-bottom: 1px solid var(--dsv-border);
}
.dsv-exposure th {
    color: var(--dsv-muted);
    font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
}
.dsv-exposure tr:last-child td { border-bottom: 0; }

/* Productos recomendados dentro de detalle de sustancia */
.dsv-section--products {
    background: linear-gradient(135deg, var(--dsv-brand-soft) 0%, #fff 100%);
    border: 1px solid var(--dsv-border);
}
.dsv-recs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.dsv-rec {
    background: #fff;
    border: 1px solid var(--dsv-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex; flex-direction: column;
    cursor: pointer; outline: none;
    transition: border-color .15s, box-shadow .2s, transform .2s;
}
.dsv-rec:hover {
    border-color: var(--dsv-brand);
    box-shadow: var(--dsv-shadow);
    transform: translateY(-2px);
}
.dsv-rec__img {
    aspect-ratio: 4 / 3; width: 100%;
    background: var(--dsv-brand-soft);
    object-fit: contain;
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--dsv-brand);
}
img.dsv-rec__img { display: block; }
.dsv-rec__img svg { width: 36px; height: 36px; opacity: .8; }
.dsv-rec__body {
    padding: 10px 12px 12px;
    display: flex; flex-direction: column;
    gap: 4px; flex: 1;
}
.dsv-rec__cat {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--dsv-muted); font-weight: 700;
}
.dsv-rec__name {
    font-weight: 600; color: var(--dsv-brand);
    font-size: 13.5px; line-height: 1.3;
    flex: 1;
}
.dsv-rec__viewmore {
    color: var(--dsv-brand);
    font-size: 11px; font-weight: 600;
    margin-top: 6px;
    opacity: 0;
    transition: opacity .15s;
}
.dsv-rec:hover .dsv-rec__viewmore { opacity: 1; }

/* ============================================================
   FORMULARIO (modal)
   ============================================================ */
.dsv-form { padding: 4px 0; }
.dsv-form__title {
    color: var(--dsv-brand);
    font-family: "Roboto", sans-serif;
    font-size: 22px; font-weight: 700;
    margin: 0 0 6px;
}
.dsv-form__about {
    color: var(--dsv-muted);
    font-size: 14px;
    margin: 0 0 4px;
}
.dsv-form__about strong { color: var(--dsv-brand); }
.dsv-form__context {
    color: var(--dsv-muted);
    font-size: 13px;
    margin: 0 0 18px;
    padding-left: 14px;
    border-left: 2px solid var(--dsv-brand-soft);
}
.dsv-form__context strong { color: var(--dsv-brand); font-weight: 600; }

.dsv-form__form { display: flex; flex-direction: column; gap: 12px; }
.dsv-form__row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) {
    .dsv-form__row--two { grid-template-columns: 1fr 1fr; }
}

.dsv-form__form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dsv-text);
}
.dsv-form__form label > span { color: var(--dsv-text); }
.dsv-form__form input,
.dsv-form__form textarea {
    appearance: none;
    border: 1px solid var(--dsv-border);
    background: #fff;
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit; font-size: 14px;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.dsv-form__form input:focus,
.dsv-form__form textarea:focus {
    outline: 0;
    border-color: var(--dsv-brand);
    box-shadow: 0 0 0 3px rgba(15, 0, 135, .12);
}
.dsv-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

.dsv-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.dsv-form__cancel,
.dsv-form__cancel:link,
.dsv-form__cancel:visited {
    appearance: none;
    border: 1px solid var(--dsv-border) !important;
    background: #fff !important;
    color: var(--dsv-muted) !important;
    border-radius: 6px;
    padding: 10px 18px;
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: none !important;
}
.dsv-form__cancel:hover {
    border-color: var(--dsv-brand) !important;
    color: var(--dsv-brand) !important;
}
.dsv-form__submit,
.dsv-form__submit:link,
.dsv-form__submit:visited {
    appearance: none;
    border: 0 !important;
    background: var(--dsv-brand) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 10px 22px;
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -4px rgba(15, 0, 135, .4) !important;
    transition: background .15s, transform .1s;
}
.dsv-form__submit:hover { background: var(--dsv-brand-dark) !important; }
.dsv-form__submit:active { transform: scale(.98); }

.dsv-form__status {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--dsv-muted);
}
.dsv-form__status.is-success { color: #15803d; }
.dsv-form__status.is-error   { color: var(--dsv-accent); }

.dsv-form__ok {
    text-align: center;
    padding: 24px 8px;
    color: var(--dsv-text);
}
.dsv-form__ok svg {
    width: 56px; height: 56px;
    color: #15803d;
    margin: 0 auto 12px;
    display: block;
}
.dsv-form__ok h4 {
    color: var(--dsv-brand);
    font-size: 20px; font-weight: 700;
    margin: 0 0 6px;
}
.dsv-form__ok p {
    color: var(--dsv-muted);
    margin: 0 0 18px;
}

/* ============================================================
   VARIANTE BANNER — Gancho de home
   Bloque horizontal (texto a la izq + buscador a la der) que invita
   a usar el buscador completo. Pensado para reemplazar el bloque
   "Nos mudamos" en la home del cliente.
   ============================================================ */
.dsvoice--banner {
    padding: 0;
    max-width: none;
}
.dsv-banner__inner {
    background: linear-gradient(135deg, var(--dsv-brand) 0%, var(--dsv-brand-dark) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 28px 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    box-shadow: 0 14px 40px -16px rgba(15, 0, 135, .35);
    position: relative;
    overflow: hidden;
}
@media (min-width: 900px) {
    .dsv-banner__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 32px;
        padding: 32px 36px;
    }
}
.dsv-banner__inner::before {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 60%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 60%);
    pointer-events: none;
}
.dsv-banner__copy { position: relative; z-index: 1; }
.dsv-banner__kicker {
    display: inline-block;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.dsv-banner__title {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
}
.dsv-banner__sub {
    color: rgba(255,255,255,.88);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 12px;
    max-width: 540px;
}
.dsv-banner__kicker-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #5BFFB1;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(91, 255, 177, .25);
    animation: dsv-pulse 2s ease-in-out infinite;
}
@keyframes dsv-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(91, 255, 177, .25); }
    50%      { box-shadow: 0 0 0 6px rgba(91, 255, 177, .12); }
}

/* Stats strip — números grandes corporativos al estilo Drager */
.dsv-banner__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,.18);
}
.dsv-banner__stat {
    padding: 0 14px;
    border-left: 1px solid rgba(255,255,255,.14);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.dsv-banner__stat:first-child {
    padding-left: 0;
    border-left: 0;
}
.dsv-banner__stat-num {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.dsv-banner__stat-label {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
@media (max-width: 600px) {
    .dsv-banner__stats { grid-template-columns: 1fr; gap: 8px; }
    .dsv-banner__stat { padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
    .dsv-banner__stat:first-child { padding-top: 0; border-top: 0; }
}
.dsv-banner__form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dsv-banner__inputwrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .25);
}
.dsv-banner__icon {
    width: 20px; height: 20px;
    margin-left: 18px;
    color: var(--dsv-brand);
    flex-shrink: 0;
}
.dsv-banner__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 18px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--dsv-text);
    outline: none;
    min-width: 0;
}
.dsv-banner__input::placeholder { color: var(--dsv-muted); }
.dsv-banner__hint {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    text-align: center;
    margin: 0;
}

/* Columna derecha del banner: form (input + filtros), inline funcional */
.dsv-banner__searchcol {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Reset del form heredado de .dsv-hero__form para que no fuerce ancho */
.dsvoice--banner .dsv-hero__form {
    margin: 0;
    max-width: none;
    width: 100%;
}
/* Input compacto, sombra, fondo blanco. */
.dsvoice--banner .dsv-hero__inputwrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .3);
    border: 2px solid transparent;
    transition: border-color .18s, box-shadow .18s, transform .15s;
    padding: 2px;
}
.dsvoice--banner .dsv-hero__inputwrap:focus-within {
    border-color: #5BFFB1;
    box-shadow: 0 0 0 4px rgba(91, 255, 177, .28), 0 12px 30px -10px rgba(0, 0, 0, .35);
}
.dsvoice--banner .dsv-hero__input {
    padding: 14px 8px;
    font-size: 15.5px;
    font-weight: 500;
    /* El banner tiene color:#fff heredado; forzamos texto oscuro para que
       lo escrito sea visible sobre el input blanco. */
    color: var(--dsv-text) !important;
    -webkit-text-fill-color: var(--dsv-text);
}
.dsvoice--banner .dsv-hero__input::placeholder {
    color: var(--dsv-muted) !important;
    -webkit-text-fill-color: var(--dsv-muted);
}
.dsvoice--banner .dsv-hero__icon {
    color: var(--dsv-brand);
    width: 18px; height: 18px;
    margin-left: 14px;
}

/* Filtros dentro del banner (chips translúcidos sobre fondo navy) */
.dsv-banner__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.dsv-banner__filters .dsv-filter {
    appearance: none;
    border: 1px solid rgba(255,255,255,.35) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.dsv-banner__filters .dsv-filter:hover,
.dsv-banner__filters .dsv-filter:focus {
    background: rgba(255,255,255,.18) !important;
    outline: 0;
}
.dsv-banner__filters .dsv-filter.is-active {
    background: #fff !important;
    color: var(--dsv-brand) !important;
    border-color: #fff !important;
}

/* ----------------------------------------------------------
   Carrusel: chevrons de navegación lateral (overlay)
   Estilo Drager: botones circulares blancos con sombra suave.
   ---------------------------------------------------------- */
.dsv-carousel {
    position: relative;
    /* Gutter lateral para que los chevrons vivan en el margen y NO tapen
       el contenido de las cards. */
    padding: 0 48px;
}
.dsv-carousel__btn {
    appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff !important;
    color: var(--dsv-brand) !important;
    border: 1px solid var(--dsv-border) !important;
    box-shadow: 0 4px 14px -4px rgba(15, 0, 135, .22) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s, opacity .2s, box-shadow .15s;
}
.dsv-carousel__btn svg {
    width: 17px; height: 17px;
    display: block;
}
.dsv-carousel__btn:hover:not(:disabled),
.dsv-carousel__btn:focus:not(:disabled) {
    background: var(--dsv-brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -4px rgba(15, 0, 135, .4) !important;
    outline: 0;
    transform: translateY(-50%) scale(1.06);
}
.dsv-carousel__btn:disabled {
    opacity: .35;
    pointer-events: none;
    box-shadow: none !important;
}
.dsv-carousel__btn--prev { left: 4px; }
.dsv-carousel__btn--next { right: 4px; }
@media (max-width: 600px) {
    .dsv-carousel { padding: 0; }
    .dsv-carousel__btn { display: none; }
    /* iOS Safari zoom-on-focus: el input con font-size <16px dispara
       zoom automático al tocarlo. Forzamos 16px en mobile. */
    .dsvoice--banner .dsv-hero__input { font-size: 16px !important; }
    .dsv-hero__input { font-size: 16px !important; }
    /* Banner más compacto en pantallas chicas */
    .dsv-banner__inner { padding: 22px 18px; }
    .dsv-banner__title { font-size: 22px; }
    /* Modal: padding más chico para aprovechar pantalla */
    .dsv-modal__panel { padding: 18px 14px !important; }
    /* Form modal: campos en una columna */
    .dsv-form__row--two { grid-template-columns: 1fr !important; }
    /* Cards del carrusel: levemente más anchas en mobile para mejor lectura */
    .dsvoice--banner .dsv-results-grid .dsv-result {
        flex: 0 0 220px;
        min-width: 220px;
        max-width: 220px;
    }
    /* Tap targets ≥44px (Apple HIG) */
    .dsv-filter { min-height: 44px; padding: 10px 16px !important; }
    .dsv-result__info { min-height: 44px; }
    .dsv-mascot__close { width: 32px !important; height: 32px !important; font-size: 22px !important; }
    .dsv-form__submit, .dsv-form__cancel { min-height: 48px; }
    .dsv-hero__clear { width: 36px !important; height: 36px !important; }
}

/* ============================================================
   MODAL — Bottom-sheet en mobile (estilo apps nativas)
   ============================================================ */
@media (max-width: 600px) {
    .dsv-modal__panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: translateY(0) !important;
        max-height: 92vh !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: dsv-sheet-up .28s cubic-bezier(.22,1,.36,1) both;
    }
    /* "Grip" arriba del modal: indicador visual de bottom-sheet */
    .dsv-modal__panel::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 4px;
        background: rgba(0,0,0,.15);
        pointer-events: none;
    }
    .dsv-modal__close {
        top: 12px !important;
        right: 12px !important;
    }
    .dsv-modal__body { padding-top: 20px !important; }
}
@keyframes dsv-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ============================================================
   SKELETON LOADERS — placeholders durante búsqueda
   ============================================================ */
.dsv-skel {
    background: #fff;
    border: 1px solid var(--dsv-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: none;
}
.dsv-skel__img {
    width: 100%;
    height: 110px;
    background: linear-gradient(90deg, #eef0f5 0%, #f7f8fc 50%, #eef0f5 100%);
    background-size: 200% 100%;
    animation: dsv-shimmer 1.4s ease-in-out infinite;
}
.dsv-skel__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dsv-skel__line {
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef0f5 0%, #f7f8fc 50%, #eef0f5 100%);
    background-size: 200% 100%;
    animation: dsv-shimmer 1.4s ease-in-out infinite;
}
.dsv-skel__line--xs { width: 40%; height: 8px; }
.dsv-skel__line--sm { width: 70%; }
.dsv-skel__line--md { width: 90%; height: 14px; }
.dsv-skel__btn {
    margin-top: 6px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef0f5 0%, #f7f8fc 50%, #eef0f5 100%);
    background-size: 200% 100%;
    animation: dsv-shimmer 1.4s ease-in-out infinite;
}
@keyframes dsv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   HIGHLIGHT del término buscado en los resultados
   ============================================================ */
.dsv-mark {
    background: rgba(91, 255, 177, .35);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}
.dsv-result--substance .dsv-mark {
    background: rgba(255, 235, 100, .45);
}

/* ============================================================
   STAGGER FADE-IN — entrada animada de cards
   ============================================================ */
.dsv-result--in {
    animation: dsv-card-in .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dsv-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EMPTY STATE — versión rica (icono + título + hint)
   ============================================================ */
.dsv-empty--rich {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
    background: var(--dsv-bg-soft);
    border: 1px dashed var(--dsv-border);
    border-radius: 12px;
    color: var(--dsv-muted);
}
.dsv-empty__icon {
    width: 56px; height: 56px;
    color: var(--dsv-brand);
    opacity: .55;
    margin-bottom: 4px;
}
.dsv-empty__title {
    margin: 0;
    color: var(--dsv-text);
    font-size: 17px;
    font-weight: 700;
}
.dsv-empty__hint {
    margin: 0;
    font-size: 14px;
    max-width: 400px;
}

/* ============================================================
   ERROR STATUS — con icono
   ============================================================ */
.dsvoice__status.is-error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c0392b;
    background: rgba(192, 57, 43, .08);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
}
.dsv-error__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* ============================================================
   FORM SUBMIT — spinner inline + success animado
   ============================================================ */
.dsv-spinner--inline {
    width: 14px; height: 14px;
    border-width: 2px;
    border-color: rgba(255,255,255,.4);
    border-top-color: #fff;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
.dsv-form__submit.is-loading {
    cursor: wait;
    opacity: .8;
}
.dsv-form__ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    animation: dsv-card-in .4s cubic-bezier(.22,1,.36,1) both;
}
.dsv-form__ok-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    animation: dsv-success-pop .5s cubic-bezier(.34,1.56,.64,1) both;
    box-shadow: 0 12px 28px -8px rgba(22, 163, 74, .5);
}
.dsv-form__ok-icon svg { width: 32px; height: 32px; }
.dsv-form__ok h4 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--dsv-text);
}
.dsv-form__ok p {
    margin: 0 0 20px;
    color: var(--dsv-muted);
    font-size: 14.5px;
    max-width: 320px;
}
@keyframes dsv-success-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   KBD badge "/" — atajo de teclado para enfocar el buscador
   ============================================================ */
.dsv-hero__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-right: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--dsv-muted, #9aa1ad);
    background: var(--dsv-bg-soft, #f5f6fa);
    border: 1px solid var(--dsv-border, #e3e5ec);
    border-radius: 5px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.dsv-hero__kbd[hidden] { display: none; }

/* ============================================================
   SUGGESTIONS CHIPS — sugerencias rápidas debajo del input
   ============================================================ */
.dsv-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    animation: dsv-card-in .3s cubic-bezier(.22,1,.36,1) both;
}
.dsv-suggestions[hidden] { display: none; }
.dsv-suggestions__label {
    color: rgba(255,255,255,.75);
    font-size: 11.5px;
    font-weight: 500;
    margin-right: 2px;
}
.dsv-suggest {
    appearance: none;
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, transform .1s;
}
.dsv-suggest:hover,
.dsv-suggest:focus {
    background: rgba(255,255,255,.2) !important;
    border-color: rgba(255,255,255,.5) !important;
    outline: 0;
}
.dsv-suggest:active { transform: scale(.96); }

/* ============================================================
   FOCUS VISIBLE — accesibilidad mejorada
   ============================================================ */
.dsv-result:focus-visible,
.dsv-filter:focus-visible,
.dsv-result__info:focus-visible,
.dsv-carousel__btn:focus-visible,
.dsv-form__submit:focus-visible,
.dsv-form__cancel:focus-visible,
.dsv-modal__close:focus-visible {
    outline: 3px solid var(--dsv-brand) !important;
    outline-offset: 2px !important;
}

/* Reducir animaciones para usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dsv-result--in,
    .dsv-form__ok,
    .dsv-form__ok-icon,
    .dsv-modal__panel {
        animation: none !important;
    }
    .dsv-skel__img, .dsv-skel__line, .dsv-skel__btn {
        animation-duration: 3s !important;
    }
}

/* Hover/focus mejorado en cards del carrusel */
.dsvoice--banner .dsv-results-grid .dsv-result {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dsvoice--banner .dsv-results-grid .dsv-result:hover,
.dsvoice--banner .dsv-results-grid .dsv-result:focus {
    transform: translateY(-3px);
    border-color: var(--dsv-brand) !important;
    box-shadow: 0 12px 28px -10px rgba(15, 0, 135, .35) !important;
    outline: 0;
}
.dsvoice--banner .dsv-results-grid .dsv-result__viewmore {
    transition: gap .15s, color .15s;
}
.dsvoice--banner .dsv-results-grid .dsv-result:hover .dsv-result__viewmore {
    gap: 8px;
    color: var(--dsv-brand-dark) !important;
}

/* ----------------------------------------------------------
   Resultados del banner: carrusel horizontal scrolleable
   En lugar de un grid grande, los resultados se muestran en
   una fila con scroll horizontal — más compacto, "pasable".
   ---------------------------------------------------------- */
.dsv-banner__results-wrap {
    margin-top: 20px;
    padding: 0;
    position: relative;
}
.dsv-banner__results-wrap:empty { display: none; }
.dsv-banner__results-wrap .dsvoice__results:empty { display: none; }
.dsv-banner__results-wrap .dsv-counts {
    margin: 0 0 10px;
    font-size: 12.5px;
}
/* Sobrescribir el grid: convertirlo en fila horizontal con scroll */
.dsvoice--banner .dsv-results-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 14px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--dsv-brand) transparent;
}
.dsvoice--banner .dsv-results-grid::-webkit-scrollbar {
    height: 8px;
}
.dsvoice--banner .dsv-results-grid::-webkit-scrollbar-track {
    background: var(--dsv-bg-soft);
    border-radius: 4px;
}
.dsvoice--banner .dsv-results-grid::-webkit-scrollbar-thumb {
    background: var(--dsv-brand);
    border-radius: 4px;
}
/* Cada card del carrusel: ancho fijo, más chica */
.dsvoice--banner .dsv-results-grid .dsv-result {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
    scroll-snap-align: start;
    padding: 12px;
    gap: 8px;
}
.dsvoice--banner .dsv-results-grid .dsv-result__img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    margin: 0 0 4px;
}
.dsvoice--banner .dsv-results-grid .dsv-result__body {
    gap: 4px;
}
.dsvoice--banner .dsv-results-grid .dsv-result__kicker {
    font-size: 10px;
}
.dsvoice--banner .dsv-results-grid .dsv-result__name {
    font-size: 13.5px;
    line-height: 1.25;
    /* truncar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dsvoice--banner .dsv-results-grid .dsv-result__sub {
    font-size: 11.5px;
    /* truncar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dsvoice--banner .dsv-results-grid .dsv-result__viewmore {
    font-size: 11.5px;
    margin-top: 2px;
}
/* En el carrusel angosto: ocultar "Ver detalle" y dejar el botón full-width */
.dsvoice--banner .dsv-results-grid .dsv-result__foot {
    flex-direction: column;
    align-items: stretch;
    padding-top: 8px;
}
.dsvoice--banner .dsv-results-grid .dsv-result__viewmore {
    display: none;
}
.dsvoice--banner .dsv-results-grid .dsv-result__info {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
}
.dsvoice--banner .dsv-results-grid .dsv-result__info svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

/* ============================================================
   Aviso legal de marcas
   ============================================================ */
.dsv-trademark {
    margin: 32px auto 0;
    max-width: 880px;
    padding: 14px 18px;
    background: var(--dsv-bg-soft);
    border: 1px solid var(--dsv-border);
    border-radius: 6px;
    color: var(--dsv-muted);
    font-size: 12px; line-height: 1.55;
    text-align: center;
    font-style: italic;
}

/* Accesibilidad */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ============================================================
   MASCOTA flotante — CTA al buscador
   Widget fixed en la esquina inferior izquierda (la derecha la
   usa el botón de WhatsApp del cliente). Mascota animada con
   bocadillo de diálogo que aparece tras unos segundos.
   ============================================================ */
.dsv-mascot {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9990;
    width: 120px;
    height: 150px;
    pointer-events: none; /* solo los hijos reciben clicks */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease;
}
.dsv-mascot.is-shown {
    opacity: 1;
    transform: translateY(0);
}

/* La mascota en sí — botón con la imagen, flotación vertical sutil */
.dsv-mascot__btn {
    appearance: none;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    width: 100%; height: 100%;
    display: block;
    position: relative;
    z-index: 1;
    /* Halo blanco para que la silueta de la mascota se vea limpia sobre
       cualquier fondo (imágenes, sliders, gradientes). Capa 1-3: halo
       blanco difuso en distintos radios; capa 4: sombra navy de profundidad. */
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.95))
        drop-shadow(0 0 8px rgba(255,255,255,.85))
        drop-shadow(0 0 14px rgba(255,255,255,.6))
        drop-shadow(0 14px 22px rgba(15, 0, 135, .28));
    animation: dsv-mascot-float 4s ease-in-out infinite;
    transform-origin: 50% 100%;
    transition: transform .25s ease, filter .25s ease;
    box-shadow: none !important;
}
.dsv-mascot__btn img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}
.dsv-mascot__btn:hover,
.dsv-mascot__btn:focus {
    outline: 0;
    animation-play-state: paused;
    transform: scale(1.07) rotate(-3deg);
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.95))
        drop-shadow(0 0 10px rgba(255,255,255,.85))
        drop-shadow(0 0 18px rgba(255,255,255,.55))
        drop-shadow(0 18px 28px rgba(15, 0, 135, .42));
}
.dsv-mascot__btn:active {
    transform: scale(1.02) rotate(-1deg);
}

@keyframes dsv-mascot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Bocadillo de diálogo a la derecha de la mascota */
.dsv-mascot__bubble {
    pointer-events: auto;
    background: #fff;
    color: var(--dsv-text, #1a1f2e);
    border: 1px solid var(--dsv-border, #e3e5ec);
    border-radius: 14px;
    padding: 12px 16px 12px 16px;
    width: 240px;
    box-shadow: 0 10px 30px -10px rgba(15, 0, 135, .25);
    font-size: 13.5px;
    line-height: 1.4;
    position: absolute;
    left: 130px;  /* a la derecha de la mascota (120px + 10 gap) */
    bottom: 70px; /* a la altura de la cabeza de la mascota */
    opacity: 0;
    transform: translateX(8px) scale(.95);
    transform-origin: 0% 80%;
    transition: opacity .35s ease .15s, transform .35s ease .15s;
    cursor: pointer;
}
.dsv-mascot.is-bubble-shown .dsv-mascot__bubble {
    opacity: 1;
    transform: translateX(0) scale(1);
}
/* Flecha del bocadillo apuntando a la izquierda (hacia la mascota) */
.dsv-mascot__bubble::after {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 16px;
    width: 14px; height: 14px;
    background: #fff;
    border-left: 1px solid var(--dsv-border, #e3e5ec);
    border-bottom: 1px solid var(--dsv-border, #e3e5ec);
    transform: rotate(45deg);
}
.dsv-mascot__bubble-text {
    display: block;
    margin-bottom: 6px;
}
.dsv-mascot__bubble-text strong {
    color: var(--dsv-brand, #0F0087);
}
.dsv-mascot__bubble-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dsv-brand, #0F0087);
    font-weight: 700;
    font-size: 12.5px;
    transition: gap .15s;
}
.dsv-mascot__bubble:hover .dsv-mascot__bubble-cta {
    gap: 8px;
}

/* × discreta para cerrar — solo el carácter, sin caja, en la esquina */
.dsv-mascot__close {
    appearance: none;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #b3b8c2 !important;
    font: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    width: 22px; height: 22px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .15s, background .15s;
    position: absolute;
    top: 4px;
    right: 4px;
}
.dsv-mascot__close:hover,
.dsv-mascot__close:focus {
    color: var(--dsv-brand, #0F0087) !important;
    background: var(--dsv-bg-soft, #f5f6fa) !important;
    outline: 0;
}
/* Padding-right extra para que el texto del bocadillo no toque la × */
.dsv-mascot__bubble {
    padding-right: 28px !important;
}

/* Mobile: más chico y sin bocadillo (espacio) */
@media (max-width: 600px) {
    .dsv-mascot { bottom: 14px; left: 12px; gap: 0; }
    .dsv-mascot__btn { width: 84px; height: 104px; }
    .dsv-mascot__bubble { display: none; }
}

/* Respeto a usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dsv-mascot__btn { animation: none; }
    .dsv-mascot, .dsv-mascot__bubble { transition: opacity .2s; }
}