/* CCM Tienda Sections — Hero (banda de presentación "video CCM").
   Todo encapsulado bajo .ccmts-hero: variables y reglas no se filtran al tema. */

.ccmts-hero{
  --bg:#08080A;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --fg:#FFFFFF; --fg-2:#B5B5BD; --fg-3:#76767E;
  --red:#E60000; --red-2:#FF2222; --red-glow:rgba(230,0,0,.35);
  --wa:#25D366;
  --r-lg:26px; --r-pill:100px;
  --font:"founder grotesk CCM","Founders Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"founder grotesk CCM","Founders Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  position:relative; overflow:hidden; display:block; min-height:auto; padding:0;
  font-family:var(--font); color:var(--fg); background:var(--bg);
}
.ccmts-hero *{box-sizing:border-box; margin:0; padding:0}
.ccmts-hero img{display:block; max-width:100%}
.ccmts-hero .ccmts-ico{width:1em; height:1em; display:block; vertical-align:middle}
.ccmts-hero .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.ccmts-hero__full{position:relative; z-index:1; width:100%; max-width:none}

/* Caja a ancho completo (banda compacta) */
.ccmts-hero .ccmts-box{
  width:100%; container-type:inline-size; position:relative;
  height:clamp(440px,62vh,620px); overflow:hidden; background:#000;
  border-bottom:1px solid var(--line);
}
.ccmts-hero .ccmts-stage{position:absolute; inset:0; background:radial-gradient(100% 90% at 50% -8%,#120508 0%,#0a0708 26%,#000 60%); overflow:hidden}
.ccmts-hero .ccmts-badge{display:none}

.ccmts-hero .ccmts-glow{position:absolute; width:64cqw; height:64cqw; border-radius:50%; top:44%; left:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 64%); filter:blur(54px); z-index:0;
  transform:translate(-50%,-50%); animation:ccmts-pulse 7s ease-in-out infinite}
@keyframes ccmts-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.6}}

.ccmts-hero .ccmts-eq{position:absolute; bottom:0; left:0; width:100%; height:34%; display:flex; align-items:flex-end; gap:1.4%; justify-content:center; opacity:.05; z-index:0}
.ccmts-hero .ccmts-eq span{flex:1; max-width:2.2cqw; background:linear-gradient(180deg,var(--red),transparent); border-radius:3px 3px 0 0; animation:ccmts-bounce 1.1s ease-in-out infinite}
@keyframes ccmts-bounce{0%,100%{height:8%}50%{height:90%}}

.ccmts-hero .ccmts-scene{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:5cqw; opacity:0; pointer-events:none; z-index:2; transition:opacity .7s ease}
.ccmts-hero .ccmts-scene.on{opacity:1}
.ccmts-hero .ccmts-r{color:var(--red)}
.ccmts-hero .ccmts-scene h3{color:#fff; font-weight:500; line-height:1.2; letter-spacing:normal; font-family:var(--display)}
.ccmts-hero .ccmts-sub{color:#a8a8b0; margin-top:2cqw; line-height:1.55; max-width:60ch; font-weight:400; letter-spacing:normal}
.ccmts-hero .ccmts-bar{width:40px; height:2px; background:rgba(255,255,255,.28); border-radius:2px; margin-top:2.6cqw; box-shadow:none}

.ccmts-hero .ccmts-scene.on .u{animation:ccmts-up .7s cubic-bezier(.2,.7,.2,1) both}
.ccmts-hero .ccmts-scene.on .u.d1{animation-delay:.12s}.ccmts-hero .ccmts-scene.on .u.d2{animation-delay:.26s}
.ccmts-hero .ccmts-scene.on .u.d3{animation-delay:.40s}.ccmts-hero .ccmts-scene.on .u.d4{animation-delay:.54s}
@keyframes ccmts-up{from{opacity:0;transform:translateY(4cqw)}to{opacity:1;transform:translateY(0)}}
.ccmts-hero .ccmts-scene.on .p{animation:ccmts-pop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ccmts-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

.ccmts-hero .ccmts-logo{width:40cqw; filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
.ccmts-hero .ccmts-h-logo{height:.82em; width:auto; display:inline-block; vertical-align:-.07em; margin:0 .14em}
.ccmts-hero .ccmts-logofb{font-size:15cqw; font-weight:500; color:#fff; letter-spacing:normal; font-family:var(--display)}
.ccmts-hero .ccmts-logofb b{color:var(--red)}

.ccmts-hero .ccmts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8cqw; width:92%; margin-top:4cqw}
.ccmts-hero .ccmts-card{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); border-radius:2cqw;
  padding:2.8cqw .8cqw; color:#dadade; font-weight:400; font-size:2.4cqw; display:flex; flex-direction:column; align-items:center; gap:1.3cqw}
.ccmts-hero .ccmts-card .i{font-size:5.4cqw}

.ccmts-hero .ccmts-mq{width:100%; overflow:hidden; margin-top:5cqw;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ccmts-hero .ccmts-track{display:flex; gap:6cqw; white-space:nowrap; width:max-content; animation:ccmts-scroll 16s linear infinite}
.ccmts-hero .ccmts-track span{color:#c4c4cc; font-weight:500; font-size:5cqw; opacity:.7; letter-spacing:.04em; font-family:var(--display)}
.ccmts-hero .ccmts-track span:nth-child(odd){color:#e8e8ee}
@keyframes ccmts-scroll{to{transform:translateX(-50%)}}

.ccmts-hero .ccmts-benes{display:flex; gap:2.2cqw; justify-content:center; width:94%; margin-top:4cqw}
.ccmts-hero .ccmts-bene{flex:1; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:2.4cqw; padding:3cqw 1.2cqw}
.ccmts-hero .ccmts-bene .i{font-size:6.6cqw; margin-bottom:1.2cqw}
.ccmts-hero .ccmts-bene h4{color:#fff; font-size:2.6cqw; font-weight:500; margin-bottom:.8cqw}
.ccmts-hero .ccmts-bene p{color:#9a9aa2; font-size:2cqw; line-height:1.45; font-weight:400}

.ccmts-hero .ccmts-info{margin-top:2.6cqw; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#c8c8d0; font-weight:400; letter-spacing:.01em}
.ccmts-hero .ccmts-info-row{display:inline-flex; align-items:center; gap:10px; line-height:1.3;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:100px; padding:8px 16px}
.ccmts-hero .ccmts-info-row .ci{display:flex; align-items:center; justify-content:center; color:#8a8a92; flex:0 0 auto}
.ccmts-hero .ccmts-info-row .ci .ccmts-ico{width:1.15em; height:1.15em}
.ccmts-hero .ccmts-info b{color:#fff; font-weight:500}

.ccmts-hero .ccmts-wa{margin-top:3.4cqw; display:inline-flex; align-items:center; gap:11px; color:#fff;
  background:linear-gradient(180deg,#2BE573 0%,#1FB259 100%); font-weight:500; padding:11px 22px;
  border-radius:100px; text-decoration:none; letter-spacing:.01em; position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 8px 24px rgba(37,211,102,.30), 0 2px 6px rgba(0,0,0,.22);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease)}
/* brillo diagonal sutil que cruza el botón */
.ccmts-hero .ccmts-wa::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 62%)}
.ccmts-hero .ccmts-wa > *{position:relative; z-index:1}
.ccmts-hero .ccmts-wa .wa-ico{display:flex; align-items:center}
.ccmts-hero .ccmts-wa .wa-ico .ccmts-ico{width:1.35em; height:1.35em; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.ccmts-hero .ccmts-wa:hover{transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(37,211,102,.42), 0 3px 8px rgba(0,0,0,.26)}
.ccmts-hero .ccmts-wa:active{transform:translateY(0); filter:brightness(.97)}

.ccmts-hero .ccmts-prog{position:absolute; top:0; left:0; height:2px; width:0; z-index:30;
  background:linear-gradient(90deg,var(--red),#ff5a4d); border-radius:0 2px 2px 0; box-shadow:0 0 8px rgba(230,0,0,.45)}
.ccmts-hero .ccmts-dots{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:30}
.ccmts-hero .ccmts-dots i{width:8px; height:8px; border-radius:50%; background:#555; transition:.3s; cursor:pointer}
.ccmts-hero .ccmts-dots i.on{background:var(--red); width:22px; border-radius:5px}
.ccmts-hero .ccmts-ctrl{position:absolute; bottom:14px; right:16px; z-index:30; display:flex; gap:8px}
.ccmts-hero .ccmts-ctrl button{background:rgba(20,20,20,.8); border:1px solid #333; color:#fff; width:36px; height:36px;
  border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center}

/* Re-escala las escenas para la banda compacta a ancho completo
   (los !important vencen a los font-size inline pensados para caja 16/9). */
.ccmts-hero .ccmts-scene{padding:32px 6cqw 44px}
.ccmts-hero .ccmts-scene h3{font-size:clamp(20px,3cqw,24px)!important}
.ccmts-hero .ccmts-sub{font-size:clamp(13px,1.5cqw,16px)!important; margin-top:14px}
.ccmts-hero .ccmts-bar{margin-top:16px}
.ccmts-hero .ccmts-logo{width:clamp(110px,16cqw,190px)!important}
.ccmts-hero .ccmts-logofb{font-size:clamp(48px,7cqw,90px)!important}
.ccmts-hero .ccmts-grid{margin-top:22px; gap:1.8cqw}
.ccmts-hero .ccmts-card{font-size:clamp(11px,1.4cqw,15px)!important; padding:2.2cqw .6cqw; gap:1.6cqw}
.ccmts-hero .ccmts-card .i{font-size:clamp(18px,3.2cqw,28px)!important}
.ccmts-hero .ccmts-benes{margin-top:22px; gap:2cqw}
.ccmts-hero .ccmts-bene{padding:2.4cqw 1.2cqw}
.ccmts-hero .ccmts-bene .i{font-size:clamp(20px,3.6cqw,30px)!important; margin-bottom:.8cqw}
.ccmts-hero .ccmts-bene h4{font-size:clamp(13px,1.6cqw,17px)!important}
.ccmts-hero .ccmts-bene p{font-size:clamp(10px,1.2cqw,13px)!important}
.ccmts-hero .ccmts-mq{margin-top:22px}
.ccmts-hero .ccmts-track span{font-size:clamp(14px,2.2cqw,22px)!important}
.ccmts-hero .ccmts-info{font-size:clamp(13px,1.6cqw,15px)!important; margin-top:16px}
.ccmts-hero .ccmts-wa{font-size:clamp(13px,1.6cqw,15px)!important; margin-top:18px}

/* Iconos SVG siempre centrados dentro de su tarjeta/beneficio
   (text-align no centra elementos block como el <svg>). */
.ccmts-hero .ccmts-card .i,
.ccmts-hero .ccmts-bene .i{display:flex; align-items:center; justify-content:center}

/* Móvil: beneficios en 2×2 en vez de 4 apretados en una fila. */
@media(max-width:600px){
  .ccmts-hero .ccmts-box{height:clamp(380px,56vh,500px)}
  .ccmts-hero .ccmts-benes{flex-wrap:wrap; gap:10px; width:100%}
  .ccmts-hero .ccmts-bene{flex:1 1 42%; padding:14px 8px}
  .ccmts-hero .ccmts-bene .i{font-size:26px!important; margin-bottom:6px}
  .ccmts-hero .ccmts-bene h4{font-size:14px!important}
  .ccmts-hero .ccmts-bene p{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .ccmts-hero *{animation:none!important}
}