/*V 1.0 Shared Verified Standards - banda de marcas y acreditaciones bajo el hero. Sin la seccion en el HTML no pinta nada.*/

/* El padding va explicito: sin el, la regla global section{padding:60px 0} la convertiria en otra seccion alta */
.verified-standards {background-color:var(--light-gray); padding:clamp(18px, 3vw, 26px) 0; width:100%; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); overflow:hidden;}
.vs-title {text-align:center; font-size:clamp(15px, 2.4vw, 19px); font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--primary-black); margin-bottom:clamp(16px, 2.4vw, 22px);}
/* Las dos listas van pegadas, sin gap: el aire lo da el padding de cada logo. Asi translateX(-100%) es exacto y el bucle no tiene costura */
.vs-marquee {display:flex; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, black 70px, black calc(100% - 70px), transparent); mask-image:linear-gradient(to right, transparent, black 70px, black calc(100% - 70px), transparent);}
/* La duracion fija el ritmo: con mas logos la cinta va mas rapida, asi que al anadir marcas conviene subirla */
.vs-track {display:flex; align-items:center; flex-shrink:0; list-style:none; margin:0; padding:0; animation:vs-scroll 75s linear infinite;}
.vs-marquee:hover .vs-track {animation-play-state:paused;}
/* Espera: la cinta arranca detenida en el primer logo y solo rueda con la banda en pantalla. La clase la pone el JS; sin JS rueda como siempre */
.vs-marquee.vs-hold .vs-track {animation-play-state:paused;}
/* Quieta no hay nada entrando por la izquierda, y ese velo apagaria el primer logo justo cuando toca leerlo */
.vs-marquee.vs-hold {-webkit-mask-image:linear-gradient(to right, black, black calc(100% - 70px), transparent); mask-image:linear-gradient(to right, black, black calc(100% - 70px), transparent);}
/* Tarjeta blanca: unifica logos opacos y transparentes. El aire va en margin-right, no en gap, para que translateX(-100%) siga exacto */
.vs-logo {flex-shrink:0; display:flex; align-items:center; justify-content:center; height:clamp(100px, 12.5vw, 124px); width:clamp(150px, 18vw, 190px); padding:clamp(10px, 1.4vw, 12px) clamp(12px, 1.8vw, 16px); margin-right:clamp(14px, 2.2vw, 24px); background-color:var(--primary-white); border-radius:8px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.06);}
/* width/height al 100%, no max-*: con max-* el navegador usa los atributos del HTML como tamano base y el logo nunca llena la tarjeta */
.vs-logo img {width:100%; height:100%; object-fit:contain; display:block;}
/* Logos muy apaisados (Cameron Ashley es 276x43): sin tarjeta mas ancha salen diminutos */
.vs-logo--ancho {width:clamp(200px, 24vw, 260px); padding-left:clamp(8px, 1.2vw, 12px); padding-right:clamp(8px, 1.2vw, 12px);}
@keyframes vs-scroll {from {transform:translateX(0);} to {transform:translateX(-100%);}}

/* Movimiento reducido: los logos se reparten en filas centradas, sin movimiento ni barra de scroll */
@media (prefers-reduced-motion: reduce) {
  /* display:block o la pista toma el ancho de todos los logos y flex-wrap no llega a aplicarse. 1360px deja sitio a 6 por fila */
  .vs-marquee {display:block; overflow:visible; -webkit-mask-image:none; mask-image:none; max-width:1360px; margin:0 auto; padding:0 20px;}
  .vs-track {animation:none; flex-wrap:wrap; justify-content:center;}
  /* Sin movimiento no hay velo que quitar, y el de la espera ganaria por especificidad */
  .vs-marquee.vs-hold {-webkit-mask-image:none; mask-image:none;}
  .vs-track[aria-hidden="true"] {display:none;}
  .vs-logo {margin:0 clamp(7px, 1.1vw, 12px) clamp(14px, 2vw, 20px);}
}

/* Tablet */
@media (max-width:768px) {
  .vs-title {font-size:clamp(14px, 3vw, 17px); letter-spacing:2px;}
  .vs-logo {width:clamp(140px, 26vw, 168px); height:clamp(88px, 17vw, 106px); margin-right:16px;}
  /* El modificador se repite en cada corte: .vs-logo va despues en el archivo y si no le ganaria por orden */
  .vs-logo--ancho {width:clamp(190px, 35vw, 230px);}
}

/* Movil */
@media (max-width:576px) {
  .vs-logo {width:clamp(126px, 36vw, 148px); height:clamp(80px, 23vw, 96px); padding:10px 12px; margin-right:14px;}
  .vs-logo--ancho {width:clamp(170px, 48vw, 200px);}
}