/* Tarjetas de Nonatty a los costados (11-nov-2026, Alex: «me gustan las tarjetas que hicimos en Kinetix Pharma:
   cuando le bajo aparecen estas de la derecha y de la izquierda… que estén para Kratos y para Syntex Labs»).
   Mismo diseño que kinetix-pharma.com (kinetix-mejoras.css, .hs-riel). Lo arma riel-nonatty.js; el modo de
   costados lo prende la clase .hs-riel-lados en <html> (el corte en px va en el JS de cada sitio). */
.hs-riel{position:fixed;z-index:900;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;font-family:Poppins,Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hs-riel-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 16px;border-radius:18px;background:linear-gradient(170deg,#fff 0%,#eef5f7 100%);border:1px solid #dbe9ec;box-shadow:0 14px 34px rgba(0,0,0,.28);color:#1A1D24!important;text-align:center;text-decoration:none!important;transition:transform .2s ease,box-shadow .2s ease}
.hs-riel--der .hs-riel-card{background:linear-gradient(170deg,#fff5f6 0%,#fff 100%)}
.hs-riel-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.34)}
.hs-riel-card:focus-visible{outline:3px solid #004468;outline-offset:3px}
.hs-riel-card>*{transition:opacity .22s ease}
.hs-riel-cambia>.hs-riel-foto,.hs-riel-cambia>.hs-riel-cat,.hs-riel-cambia>.hs-riel-nom,.hs-riel-cambia>.hs-riel-oferta{opacity:0}
.hs-riel-eti{font-weight:500;font-size:10px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#5F6672}
.hs-riel-logo{width:100%;max-width:150px;height:auto}
.hs-riel-foto{display:block;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#fff}
.hs-riel-foto img{display:block;width:100%;height:100%;object-fit:cover}
.hs-riel-oferta{padding:3px 10px;border-radius:999px;background:#B8323F;color:#fff;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.04em}
.hs-riel-oferta[hidden]{display:none}
.hs-riel-cat{font-weight:500;font-size:11px;line-height:1.3;color:#5F6672}
.hs-riel-nom{font-weight:700;font-size:15px;line-height:1.25;color:#1A1D24;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.hs-riel-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 10px;border-radius:999px;background:#1A1D24;color:#fff;font-weight:600;font-size:12.5px;line-height:1.2}
.hs-riel--der .hs-riel-cta{background:#B8323F}
.hs-riel-puntos{display:flex;justify-content:center;gap:2px;margin-top:8px}
.hs-riel-puntos button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hs-riel-puntos button::before{content:'';width:7px;height:7px;border-radius:50%;background:#b9cdd3;transition:background .2s,transform .2s}
.hs-riel-puntos button[aria-current=true]::before{background:#004468;transform:scale(1.25)}
.hs-riel-puntos button:focus-visible{outline:2px solid #004468;border-radius:50%}
.hs-riel-cerrar{position:absolute;top:-12px;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #dbe9ec;background:#fff;color:#1A1D24;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hs-riel-cerrar::before{content:'';position:absolute;inset:-8px}
.hs-riel--der .hs-riel-cerrar{left:-10px}
.hs-riel--izq .hs-riel-cerrar{right:-10px}
/* Una a la vez, flotante, al bajar (teléfono, tableta y laptop angosta). */
html:not(.hs-riel-lados) .hs-riel{bottom:calc(100px + env(safe-area-inset-bottom));width:min(36vw,140px)}
html:not(.hs-riel-lados) .hs-riel--izq{left:12px}
html:not(.hs-riel-lados) .hs-riel--der{right:12px}
html:not(.hs-riel-lados) .hs-riel.hs-riel--ver{opacity:1;visibility:visible}
html:not(.hs-riel-lados) .hs-riel-card{gap:4px;padding:9px 8px 10px;border-radius:14px}
html:not(.hs-riel-lados) .hs-riel-logo{max-width:92px}
html:not(.hs-riel-lados) .hs-riel-foto{aspect-ratio:4/3}
html:not(.hs-riel-lados) .hs-riel-cat,html:not(.hs-riel-lados) .hs-riel-puntos{display:none}
html:not(.hs-riel-lados) .hs-riel-nom{font-size:12.5px;min-height:0}
html:not(.hs-riel-lados) .hs-riel-cta{min-height:36px;font-size:11.5px;padding:0 6px}
/* Pantalla ancha: una a cada costado, en el margen que deja la columna de contenido. */
.hs-riel-lados .hs-riel{--rw:clamp(120px,calc((100vw - var(--hs-riel-col,1152px))/2 - 40px),210px);opacity:1;visibility:visible;top:calc(50% + 40px);transform:translateY(-50%);width:var(--rw)}
.hs-riel-lados .hs-riel--izq{left:max(12px,calc((100vw - var(--hs-riel-col,1152px))/4 - var(--rw)/2))}
.hs-riel-lados .hs-riel--der{right:max(12px,calc((100vw - var(--hs-riel-col,1152px))/4 - var(--rw)/2))}
.hs-riel-lados .hs-riel-cerrar{display:none}
.hs-riel-lados.hs-riel-fuera .hs-riel{opacity:0;visibility:hidden}
@media (max-height:700px){.hs-riel-lados .hs-riel-logo,.hs-riel-lados .hs-riel-cat{display:none}}
@media (prefers-reduced-motion:reduce){.hs-riel,.hs-riel-card,.hs-riel-card>*{transition:none}}