/* =========================================================
   SIC Tienda — capa de animacion e interaccion
   Se carga DESPUES de app.css y builder.css.

   Todo respeta prefers-reduced-motion: quien tenga activado
   "reducir movimiento" en su sistema ve la interfaz completa
   pero quieta. No es opcional: el movimiento constante marea
   a gente con trastornos vestibulares.
   ========================================================= */

/* ---------- curvas y tiempos ---------- */
:root {
  --ease-suave:  cubic-bezier(.25, .8, .35, 1);
  --ease-salida: cubic-bezier(.16, 1, .3, 1);
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --t-rapido: .18s;
  --t-medio:  .32s;
  --t-lento:  .55s;
}

/* =========================================================
   1. Aparicion al hacer scroll
   ========================================================= */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-lento) var(--ease-salida),
              transform var(--t-lento) var(--ease-salida);
  will-change: opacity, transform;
}
[data-anim].visible { opacity: 1; transform: none; }

[data-anim="izq"]   { transform: translateX(-28px); }
[data-anim="der"]   { transform: translateX(28px); }
[data-anim="zoom"]  { transform: scale(.94); }
[data-anim="izq"].visible,
[data-anim="der"].visible,
[data-anim="zoom"].visible { transform: none; }

/* escalonado dentro de una grilla o carrusel

   OJO CON LOS CARRUSELES QUE SE MUEVEN SOLOS

   Estas dos reglas pesan mas que .marquee__pista de app.css
   (dos selectores contra uno), asi que le ganaban y le cambiaban
   la animacion: en vez de desplazarse para siempre, la pista
   hacia el fundido de entrada de 0,55s y se quedaba quieta.

   Le pasaba a la franja de marcas, que es la unica que trae
   data-escalonar. Los otros tres carruseles de la portada no lo
   traen y por eso si se movian. Comprobado el 10-09-2026
   midiendo el desplazamiento en 2 segundos:

       recien llegados  -69 px      marcas   0 px
       stock nacional   -69 px
       reseñas          -44 px

   Se excluye la pista por nombre. No se le saca el
   data-escalonar al HTML porque el problema no era de esa
   pagina: cualquier carrusel que algun dia lleve las dos cosas
   se habria quedado quieto igual, y nadie habria sabido por que.

   Las tarjetas no pierden nada: una vez que marquee() las mete
   adentro de la pista, el unico hijo directo es la pista, asi
   que el escalonado ya era un solo fundido y no un escalonado. */
[data-escalonar] > *:not(.marquee__pista) { opacity: 0; transform: translateY(18px); }
[data-escalonar].visible > *:not(.marquee__pista) {
  animation: entrar var(--t-lento) var(--ease-salida) both;
}
[data-escalonar].visible > *:nth-child(1) { animation-delay: .02s }
[data-escalonar].visible > *:nth-child(2) { animation-delay: .06s }
[data-escalonar].visible > *:nth-child(3) { animation-delay: .10s }
[data-escalonar].visible > *:nth-child(4) { animation-delay: .14s }
[data-escalonar].visible > *:nth-child(5) { animation-delay: .18s }
[data-escalonar].visible > *:nth-child(6) { animation-delay: .22s }
[data-escalonar].visible > *:nth-child(7) { animation-delay: .26s }
[data-escalonar].visible > *:nth-child(8) { animation-delay: .30s }
[data-escalonar].visible > *:nth-child(n+9) { animation-delay: .34s }

@keyframes entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   2. Tarjetas de producto
   ========================================================= */
.card {
  transition: box-shadow var(--t-medio) var(--ease-suave),
              transform var(--t-medio) var(--ease-suave),
              border-color var(--t-medio);
}
.card:hover { transform: translateY(-5px); }

/* el boton Agregar sube desde abajo al pasar el mouse */
@media (hover: hover) and (min-width: 700px) {
  .card__btn {
    transform: translateY(6px);
    opacity: .82;
    transition: transform var(--t-medio) var(--ease-rebote),
                opacity var(--t-medio) var(--ease-suave),
                filter var(--t-rapido);
  }
  .card:hover .card__btn,
  .card:focus-within .card__btn { transform: none; opacity: 1; }
}

.card__t { transition: color var(--t-rapido); }

/* badges entran con un pequeño rebote */
.card__badges .badge { animation: badgeEntra .45s var(--ease-rebote) both; }
.card__badges .badge:nth-child(2) { animation-delay: .07s; }
.badge--dcto { animation: badgeEntra .5s .1s var(--ease-rebote) both; }

@keyframes badgeEntra {
  from { opacity: 0; transform: translateX(-10px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   3. Imagenes: esqueleto mientras cargan
   ========================================================= */
.card__foto, .galeria__main, .linea__foto {
  position: relative;
  background-image: linear-gradient(100deg, #f2f2f6 30%, #e9e9f1 50%, #f2f2f6 70%);
  background-size: 220% 100%;
  animation: brillo 1.4s linear infinite;
}
.card__foto.cargada, .galeria__main.cargada, .linea__foto.cargada {
  animation: none; background: #fff;
}
@keyframes brillo {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

.card__foto img, .galeria__main img, .linea__foto img { opacity: 0; transition: opacity .35s var(--ease-suave); }
.cargada img { opacity: 1; }

/* =========================================================
   4. Header y navegacion
   ========================================================= */
.header { transition: box-shadow var(--t-medio), padding var(--t-medio); }
.header.compacto { box-shadow: 0 4px 20px rgba(28,28,34,.18); }
.header.compacto .header__fila { padding-top: 8px; padding-bottom: 8px; }
.header__fila { transition: padding var(--t-medio) var(--ease-suave); }

.nav__btn { position: relative; transition: background var(--t-rapido), color var(--t-rapido); }
.nav__btn::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 6px;
  height: 2px; background: var(--magenta); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-medio) var(--ease-salida);
}
.nav__item:hover .nav__btn::after { transform: scaleX(1); }
.nav__btn svg { transition: transform var(--t-medio) var(--ease-suave); }
.nav__item:hover .nav__btn svg { transform: rotate(180deg); }

/* el mega menu se despliega en vez de aparecer de golpe */
.mega {
  display: grid !important;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease-suave),
              transform var(--t-medio) var(--ease-salida),
              visibility var(--t-medio);
}
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.mega a { transition: color var(--t-rapido), transform var(--t-rapido); }
.mega a:hover { transform: translateX(3px); }

/* Bajo 1250 px la barra de navegacion scrollea, y un contenedor con
   overflow recorta lo que se salga. Ahi el desplegable no debe abrirse:
   apareceria cortado por la mitad. */
@media (max-width: 1250px) {
  .mega,
  .nav__item:hover .mega,
  .nav__item:focus-within .mega { display: none !important; }
  .nav__item:hover .nav__btn svg { transform: none; }
}

/* contador del carrito late al cambiar */
.contador { transition: transform var(--t-medio) var(--ease-rebote); }
.contador.late { animation: latido .5s var(--ease-rebote); }
@keyframes latido {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.hacc svg { transition: transform var(--t-medio) var(--ease-rebote); }
.hacc:hover svg { transform: scale(1.12) translateY(-1px); }

/* =========================================================
   5. Buscador
   ========================================================= */
.buscador input { transition: box-shadow var(--t-medio), background var(--t-medio); }
.buscador input:focus { box-shadow: 0 0 0 4px rgba(218,28,92,.25); }
.buscador button { transition: transform var(--t-rapido) var(--ease-rebote), filter var(--t-rapido); }
.buscador button:hover { transform: scale(1.1); }
.buscador button:active { transform: scale(.94); }

.sugerencias.abierto { animation: desplegar .22s var(--ease-salida); }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.sug { transition: background var(--t-rapido), padding-left var(--t-rapido); }
.sug:hover { padding-left: 18px; }

/* =========================================================
   6. Botones
   ========================================================= */
.btn, .card__btn, .paso__btn, .opc__btn, .pill, .tab, .pag {
  transition: transform var(--t-rapido) var(--ease-suave),
              background var(--t-rapido), color var(--t-rapido),
              border-color var(--t-rapido), filter var(--t-rapido),
              box-shadow var(--t-rapido);
}
.btn:not(:disabled):active,
.card__btn:not(:disabled):active,
.paso__btn:active, .opc__btn:not(:disabled):active { transform: scale(.96); }

.btn--magenta:not(:disabled):hover { box-shadow: 0 6px 18px rgba(218,28,92,.35); }
.btn--morado:not(:disabled):hover  { box-shadow: 0 6px 18px rgba(51,32,98,.32); }
.card__btn:not(:disabled):hover    { box-shadow: 0 5px 14px rgba(218,28,92,.32); }

/* onda al pulsar */
.btn, .card__btn, .paso__btn { position: relative; overflow: hidden; }
.onda {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.45); pointer-events: none;
  animation: onda .55s var(--ease-salida) forwards;
}
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

.pill:hover, .tab:hover { transform: translateY(-2px); }
.pill.activo, .tab.activo { animation: pop .3s var(--ease-rebote); }
@keyframes pop {
  0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); }
}

/* =========================================================
   7. Hero
   ========================================================= */
.hero__slide.activo .hero__kicker { animation: subir .5s .05s var(--ease-salida) both; }
.hero__slide.activo h2            { animation: subir .5s .13s var(--ease-salida) both; }
.hero__slide.activo p             { animation: subir .5s .21s var(--ease-salida) both; }
.hero__slide.activo .hero__precio { animation: subir .5s .29s var(--ease-salida) both; }
.hero__slide.activo .btn          { animation: subir .5s .37s var(--ease-salida) both; }
.hero__slide.activo .hero__foto img { animation: flotarEntrada .8s .1s var(--ease-salida) both; }

@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes flotarEntrada {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.hero__flecha { transition: transform var(--t-rapido) var(--ease-rebote), background var(--t-rapido); }
.hero__flecha:hover { transform: translateY(-50%) scale(1.14); }
.hero__punto { transition: width var(--t-medio) var(--ease-salida), background var(--t-medio); }

/* =========================================================
   8. Carruseles, categorias, marcas
   ========================================================= */
.carrusel__flecha { transition: transform var(--t-rapido) var(--ease-rebote), background var(--t-rapido), color var(--t-rapido), opacity var(--t-medio); }
.carrusel__flecha:hover { transform: translateY(-50%) scale(1.14); }
.carrusel__flecha.oculta { opacity: 0; pointer-events: none; }

.cat { transition: transform var(--t-medio) var(--ease-suave), box-shadow var(--t-medio); }
.cat__ico { transition: transform var(--t-medio) var(--ease-rebote), background var(--t-medio), color var(--t-medio); }
.cat:hover .cat__ico { transform: scale(1.12) rotate(-6deg); background: var(--morado); color: #fff; }

.marca { transition: transform var(--t-medio) var(--ease-suave), box-shadow var(--t-medio), color var(--t-rapido); }
.marca:hover { transform: translateY(-4px) scale(1.03); }

.dest { position: relative; overflow: hidden; }
.dest::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 55%);
  opacity: 0; transition: opacity var(--t-medio);
}
.dest:hover::before { opacity: 1; }
.dest__ico { transition: transform var(--t-medio) var(--ease-rebote); }
.dest:hover .dest__ico { transform: scale(1.1) rotate(-8deg); }
.dest__cta { display: inline-block; transition: transform var(--t-medio) var(--ease-salida); }
.dest:hover .dest__cta { transform: translateX(6px); }

.conf__ico { transition: transform var(--t-medio) var(--ease-rebote); }
.conf:hover .conf__ico { transform: scale(1.14); }

/* =========================================================
   9. Filtros y catalogo
   ========================================================= */
.opt { transition: color var(--t-rapido), padding-left var(--t-rapido); border-radius: var(--radio-s); }
.opt:hover { padding-left: 4px; }
.chip { animation: chipEntra .3s var(--ease-rebote) both; }
@keyframes chipEntra {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}
.chip button { transition: transform var(--t-rapido) var(--ease-rebote); }
.chip button:hover { transform: scale(1.3) rotate(90deg); }


/* =========================================================
   10. Ficha de producto
   ========================================================= */
.galeria__t { transition: border-color var(--t-rapido), transform var(--t-rapido) var(--ease-rebote); }
.galeria__t:hover { transform: translateY(-3px); }
.galeria__main img.cambiando { opacity: 0; }

.compra__precio { transition: transform var(--t-medio) var(--ease-rebote); }
.contador-cant button { transition: background var(--t-rapido), transform var(--t-rapido) var(--ease-rebote); }
.contador-cant button:active { transform: scale(.85); }
.contador-cant span { transition: transform var(--t-medio) var(--ease-rebote); }
.contador-cant span.cambio { animation: pop .32s var(--ease-rebote); }

/* =========================================================
   11. PC Builder
   ========================================================= */
.paso {
  transition: border-left-color var(--t-medio) var(--ease-suave),
              background var(--t-medio),
              box-shadow var(--t-medio),
              transform var(--t-medio) var(--ease-suave);
}
.paso:hover { transform: translateX(3px); box-shadow: var(--sombra-alta); }
.paso--lleno { animation: pasoListo .5s var(--ease-salida); }
@keyframes pasoListo {
  0%   { background: var(--verde-50); }
  100% { background: #fff; }
}
.paso--error { animation: sacudir .45s; }
@keyframes sacudir {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.paso__n { transition: background var(--t-medio), color var(--t-medio), transform var(--t-medio) var(--ease-rebote); }
.paso--lleno .paso__n { animation: pop .4s var(--ease-rebote); }
.paso__quitar { transition: color var(--t-rapido), transform var(--t-rapido) var(--ease-rebote); }
.paso__quitar:hover { transform: rotate(90deg) scale(1.2); }

.chk { animation: entrar .35s var(--ease-salida) both; }
.chk:nth-child(2) { animation-delay: .04s } .chk:nth-child(3) { animation-delay: .08s }
.chk:nth-child(4) { animation-delay: .12s } .chk:nth-child(5) { animation-delay: .16s }
.chk:nth-child(n+6) { animation-delay: .2s }
.chk__ico { transition: transform var(--t-medio) var(--ease-rebote); }
.chk__ico--incompatible { animation: pulsoMal 1.8s ease-in-out infinite; }
@keyframes pulsoMal {
  0%,100% { box-shadow: 0 0 0 0 rgba(218,28,92,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(218,28,92,0); }
}

.bloqueo { animation: entrar .35s var(--ease-salida) both; }
.eq-barra i { transition: width .7s var(--ease-salida), background var(--t-medio); }
.eq-veredicto { animation: entrar .4s var(--ease-salida) both; }
.rp-total b { transition: color var(--t-medio); }
.rp-total b.cambio { animation: pop .4s var(--ease-rebote); }
.rp-linea { transition: color var(--t-rapido); }
.en-caja div { transition: color var(--t-medio); }

/* modal */
.modal { transition: opacity var(--t-medio) var(--ease-suave); }
.modal.abierto { animation: fundir var(--t-medio) var(--ease-suave); }
.modal.abierto .modal__caja { animation: modalEntra .35s var(--ease-salida); }
@keyframes fundir { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalEntra {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.opc { transition: border-color var(--t-rapido), background var(--t-rapido), transform var(--t-rapido) var(--ease-suave); }
.opc:hover { transform: translateX(4px); }
.opc { animation: entrar .3s var(--ease-salida) both; }
.opc:nth-child(1){animation-delay:.02s} .opc:nth-child(2){animation-delay:.05s}
.opc:nth-child(3){animation-delay:.08s} .opc:nth-child(4){animation-delay:.11s}
.opc:nth-child(n+5){animation-delay:.14s}
.modal__x { transition: color var(--t-rapido), transform var(--t-rapido) var(--ease-rebote); }
.modal__x:hover { transform: rotate(90deg); }

/* =========================================================
   12. Servicio tecnico
   ========================================================= */
.st-cat { transition: border-color var(--t-medio), background var(--t-medio), transform var(--t-medio) var(--ease-suave), box-shadow var(--t-medio); }
.st-cat:hover { transform: translateY(-5px); }
.st-cat__ico { transition: transform var(--t-medio) var(--ease-rebote), background var(--t-medio); }
.st-cat:hover .st-cat__ico { transform: scale(1.14) rotate(-7deg); }
.st-cat.activo { animation: pop .35s var(--ease-rebote); }

.st-serv { transition: transform var(--t-medio) var(--ease-suave), box-shadow var(--t-medio); }
.st-serv:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.st-serv__incluye li { transition: transform var(--t-rapido), color var(--t-rapido); }
.st-serv:hover .st-serv__incluye li { transform: translateX(3px); }
.st-serv__incluye li::before { transition: transform var(--t-medio) var(--ease-rebote); }
.st-serv:hover .st-serv__incluye li::before { transform: scale(1.4); }

.campo input, .campo select, .campo textarea { transition: border-color var(--t-rapido), box-shadow var(--t-rapido); }
.campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: 0 0 0 3px rgba(115,59,141,.18); }
.campo input.malo, .campo select.malo, .campo textarea.malo { animation: sacudir .4s; }
.campo__error.visible { animation: entrar .25s var(--ease-salida) both; }

.os-ok__ico { animation: sello .6s var(--ease-rebote) both; }
@keyframes sello {
  0%   { opacity: 0; transform: scale(.3) rotate(-25deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
.os-codigo { animation: entrar .45s .15s var(--ease-salida) both; }

/* flujo de estados: se dibuja de arriba hacia abajo */
.flujo__p { animation: entrar .4s var(--ease-salida) both; }
.flujo__p:nth-child(1){animation-delay:.05s} .flujo__p:nth-child(2){animation-delay:.11s}
.flujo__p:nth-child(3){animation-delay:.17s} .flujo__p:nth-child(4){animation-delay:.23s}
.flujo__p:nth-child(5){animation-delay:.29s} .flujo__p:nth-child(6){animation-delay:.35s}
.flujo__p:nth-child(7){animation-delay:.41s} .flujo__p:nth-child(8){animation-delay:.47s}
.flujo__p--actual .flujo__punto { animation: pulsoActual 2s ease-in-out infinite; }
@keyframes pulsoActual {
  0%,100% { box-shadow: 0 0 0 0 rgba(51,32,98,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(51,32,98,0); }
}

/* =========================================================
   13. Toast y WhatsApp
   ========================================================= */
.toast { transition: transform var(--t-medio) var(--ease-rebote), opacity var(--t-medio); }
.toast__ok { animation: pop .4s .1s var(--ease-rebote) both; }

.wsp {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  transition: transform var(--t-medio) var(--ease-rebote), box-shadow var(--t-medio);
}
.wsp::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: aro 2.4s ease-out infinite;
}
.wsp:hover { transform: scale(1.1); }
.wsp__txt {
  position: absolute; right: 64px; white-space: nowrap;
  background: var(--oscuro); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: var(--radio-s);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity var(--t-medio), transform var(--t-medio) var(--ease-salida);
}
.wsp:hover .wsp__txt { opacity: 1; transform: none; }
@keyframes aro {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* barra de progreso de scroll */
.progreso {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--magenta), var(--morado-claro));
  width: 0; transition: width .1s linear;
}

/* boton volver arriba */
.arriba {
  position: fixed; right: 88px; bottom: 27px; z-index: 150;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--morado); box-shadow: var(--sombra-alta);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--t-medio), transform var(--t-medio) var(--ease-rebote), background var(--t-rapido);
}
.arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover { background: var(--morado); color: #fff; }

/* =========================================================
   14. Respetar "reducir movimiento"
   Se ve todo, pero sin movimiento.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim], [data-escalonar] > * { opacity: 1 !important; transform: none !important; }
  .card__foto, .galeria__main, .linea__foto { animation: none !important; background: #fff; }
  .card__foto img, .galeria__main img, .linea__foto img { opacity: 1 !important; }
  .mega { transition: none; }
  @media (hover: hover) { .card__btn { transform: none; opacity: 1; } }
}

/* ---------- redes flotantes (junto al de WhatsApp) ---------- */
.social-flot {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  display: flex; flex-direction: column-reverse; gap: 10px; align-items: center;
}
/* OJO: tiene que ser relative, no static.
   El aro animado del boton es un ::after con inset:0. Si el boton no esta
   posicionado, ese aro se ancla al contenedor de la columna (216 px de alto)
   y en vez de un circulo sale un ovalo estirado sobre todos los botones. */
.social-flot .wsp { position: relative; }
.sred {
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 4px 14px rgba(28,28,34,.28);
  opacity: 0; transform: scale(.4) translateY(14px);
  transition: transform .3s var(--ease-rebote), opacity .25s, box-shadow .2s;
}
.social-flot:hover .sred,
.social-flot:focus-within .sred { opacity: 1; transform: none; }
.social-flot .sred:nth-of-type(1) { transition-delay: .04s }
.social-flot .sred:nth-of-type(2) { transition-delay: .09s }
.social-flot .sred:nth-of-type(3) { transition-delay: .14s }
.sred:hover { transform: scale(1.12) !important; }
.sred--face  { background: #1877F2; }
.sred--insta { background: linear-gradient(45deg,#F58529,#DD2A7B 45%,#8134AF 70%,#515BD4); }
.sred--tiktok{ background: #010101; }
.sred__txt {
  position: absolute; right: 54px; white-space: nowrap;
  background: var(--oscuro); color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--radio-s);
  opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.sred:hover .sred__txt { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sred { opacity: 1 !important; transform: none !important; }
}