/* WolfFIT SM · v6 — video estable, marco legal, contacto, categorías exclusivas, productos, extras */

/* ---------- Video de fondo: un solo decodificador, sin filtros pesados ---------- */
.wf-hv{contain:strict;transform:translateZ(0)}
.wf-hv-in:not(.wf-hv-emb){opacity:1}
.wf-hv video{filter:none;opacity:0;transition:opacity 1.2s ease;will-change:opacity;transform:translateZ(0);backface-visibility:hidden}
.wf-hv video.on{opacity:var(--wfhv,.45)}
@media(max-width:900px){.wf-grain{display:none}}

/* ---------- Marco legal: pestañas siempre visibles ---------- */
.wfl-tabs{flex-wrap:wrap;overflow:visible;row-gap:8px}
@media(max-width:640px){
 .wfl-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
 .wfl .wfl-tab{scroll-snap-align:start}
}

/* ---------- Contacto: encabezado limpio, sin recuadro ---------- */
.ct5,.ct5-in,.ct5-hd,.ct5-hd *{background-color:transparent!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ct5-hd{position:relative;padding:6px 0 0}
.ct5-hd span{display:inline-flex;align-items:center;gap:14px;letter-spacing:.34em;font-size:12px}
.ct5-hd span:before,.ct5-hd span:after{content:"";width:clamp(22px,7vw,56px);height:1px;background:linear-gradient(90deg,transparent,#c8a862)}
.ct5-hd span:after{transform:scaleX(-1)}
.ct5-hd h1{background:linear-gradient(180deg,#fff 30%,#9a9ba3 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.ct5-hd:after{content:"";display:block;width:72px;height:2px;margin:24px auto 0;background:linear-gradient(90deg,transparent,#c8a862,transparent)}

/* ---------- Categorías exclusivas + sellos: franjas anchas con divisiones de oro ---------- */
.wf-hero-copy .wfh-cats,.wf-hero-copy .wfh-stats{position:relative;left:0;width:min(1120px,calc(100vw - 56px));max-width:none;margin-left:calc((100% - min(1120px,calc(100vw - 56px))) / 2)!important;margin-right:calc((100% - min(1120px,calc(100vw - 56px))) / 2)!important}
.wfh-cats{align-items:stretch;gap:16px;padding-top:12px;text-align:left}
.wfh-cats-t{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;letter-spacing:.42em;font-size:10.5px}
.wfh-cats-t:before,.wfh-cats-t:after{content:"";flex:1;max-width:280px;height:1px;background:linear-gradient(90deg,transparent,#c8a862)}
.wfh-cats-t:after{transform:scaleX(-1)}
.wfh-cats-row,.wfh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;border-radius:0;background:none;box-shadow:none}
.wfh-cats-row{flex-wrap:nowrap}
.wfh-stats{margin-top:0;padding:0!important;border:0!important}
button.wfh-chip,.wfh-st{position:relative;display:flex!important;align-items:center;justify-content:center;gap:16px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transition:background .35s}
button.wfh-chip{padding:22px 20px!important;color:#f5f5f7!important}
.wfh-st{padding:20px 18px}
button.wfh-chip+button.wfh-chip:before,.wfh-st+.wfh-st:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:linear-gradient(180deg,transparent,rgba(200,168,98,.75),transparent)}
button.wfh-chip:after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#c8a862,transparent);transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
button.wfh-chip:hover,.wfh-st:hover{transform:none;box-shadow:none;background:radial-gradient(120% 150% at 50% 0,rgba(200,168,98,.14),transparent 70%)!important}
button.wfh-chip:hover:after{transform:scaleX(1)}
button.wfh-chip:active{transform:none}
button.wfh-chip i,.wfh-si{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#ebddb2;background:radial-gradient(circle at 30% 25%,rgba(235,221,178,.26),rgba(200,168,98,.06));box-shadow:inset 0 0 0 1px rgba(200,168,98,.6),0 0 22px -6px rgba(200,168,98,.5);transition:transform .4s cubic-bezier(.2,.9,.3,1.3)}
button.wfh-chip:hover i{transform:scale(1.08);background:radial-gradient(circle at 30% 25%,rgba(235,221,178,.34),rgba(200,168,98,.1))}
button.wfh-chip i .wf-ico{width:22px;height:22px}
button.wfh-chip span{font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
button.wfh-chip em{margin:0 0 0 4px;font-size:11px;letter-spacing:.12em;color:#c8a862}
.wfh-go{display:none}
.wfh-st b{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.wfh-st small{margin-top:3px;font-size:12px;letter-spacing:.03em;color:#a9a9b3}
@media(max-width:640px){
 button.wfh-chip,.wfh-st{flex-direction:column;gap:8px;padding:14px 4px!important;text-align:center}
 button.wfh-chip span{font-size:10.5px;letter-spacing:.08em}
 button.wfh-chip em{display:none}
 button.wfh-chip i,.wfh-si{width:36px;height:36px}
 .wfh-st b{font-size:10.5px;letter-spacing:.14em}.wfh-st small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){button.wfh-chip,button.wfh-chip:after,button.wfh-chip i{transition:none}}

/* ---------- Productos: placa de foto elegante y tarjetas parejas ---------- */
.pc5{background:linear-gradient(180deg,#1b1c21,#141519);border-radius:18px;box-shadow:0 18px 40px -30px #000}
.pc5-ph{aspect-ratio:1/1.05;background:radial-gradient(120% 90% at 50% 30%,#fff,#eceef2 62%,#dcdfe6)}
.pc5-ph img{padding:16px;filter:drop-shadow(0 12px 12px rgba(0,0,0,.16))}
.pc5-ph img.wf-noimg,.pd5-main img.wf-noimg,.pd5-th img.wf-noimg{object-fit:contain;padding:22%;filter:none;opacity:.9}
.pc5-n{min-height:2.6em}
.pc5-bd{gap:4px}
.pd5-main{background:radial-gradient(120% 90% at 50% 30%,#fff,#eceef2 62%,#dcdfe6)}
.pd5-img{padding:10px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.16))}
@media(max-width:560px){.pc5-ph img{padding:10px}.pc5-n{font-size:14.5px}.pc5-pr b{font-size:18px}}

/* ---------- Extras ---------- */
.wf-hi{position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,24px);opacity:0;display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:rgba(14,14,16,.88);color:#f5f5f7;font-size:14px;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(200,168,98,.5),0 18px 40px -16px #000;transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;white-space:nowrap}
.wf-hi.on{opacity:1;transform:translate(-50%,0)}
.wf-hi b{color:#ebddb2;font-weight:600}
.wf-howl{position:fixed;inset:0;z-index:120;display:grid;place-items:center;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%,rgba(10,10,10,.55),rgba(10,10,10,.92));animation:wfHowl 3.4s ease both}
.wf-howl i{position:absolute;width:min(46vmin,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ebddb2 45%,#c8a862 80%);box-shadow:0 0 90px 20px rgba(235,221,178,.35);animation:wfMoon 3.4s cubic-bezier(.2,.7,.2,1) both}
.wf-howl b{position:relative;font-size:clamp(34px,9vw,84px);font-weight:800;letter-spacing:.08em;color:#0a0a0a;text-shadow:0 0 30px rgba(255,255,255,.6);animation:wfTxt 3.4s ease both}
.wf-howl small{position:absolute;bottom:14%;color:#ebddb2;letter-spacing:.34em;text-transform:uppercase;font-size:12px;animation:wfTxt 3.4s ease both}
@keyframes wfHowl{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@keyframes wfMoon{0%{transform:translateY(40vh) scale(.6)}40%,100%{transform:translateY(-4vh) scale(1)}}
@keyframes wfTxt{0%,25%{opacity:0;letter-spacing:.3em}55%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.wf-howl,.wf-howl i,.wf-howl b,.wf-howl small{animation-duration:.01s}}

/* ---------- Íconos propios (máscaras: toman el color del texto) ---------- */
.wf-ico{display:inline-block;flex:none;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
:where(.wf-ico){width:20px;height:20px}
.wf-ic-creatinas{--ic:url(./icons/creatinas.png)}
.wf-ic-protenas{--ic:url(./icons/proteinas.png)}
.wf-ic-preentrenos{--ic:url(./icons/preentrenos.png)}
.wf-ic-instagram{--ic:url(./icons/instagram.png)}
.wf-ic-whatsapp{--ic:url(./icons/whatsapp.png)}
.wf-ic-asistente{--ic:url(./icons/asistente.png)}
button.wfh-chip i .wf-ico{width:22px;height:22px}

/* ---------- Modo app (celular) ---------- */
.wf-tabbar{display:none}
@media(max-width:820px){
 html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
 body{-webkit-tap-highlight-color:transparent;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
 header{padding-top:env(safe-area-inset-top)}
 button,a,[role=button]{touch-action:manipulation;-webkit-touch-callout:none}
 button{-webkit-user-select:none;user-select:none}
 input,select,textarea{font-size:16px!important}
 .wf-tabbar{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:80;display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:24px;
  background:rgba(14,14,16,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(235,221,178,.35),0 18px 40px -14px #000;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
 .wf-tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border:0;border-radius:18px;background:none!important;box-shadow:none!important;color:#8d8d96!important;font:600 10.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.02em;transition:color .2s,transform .2s}
 .wf-tabbar button:active{transform:scale(.92)}
 .wf-tabbar button svg{width:22px;height:22px}
 .wf-tabbar button.on{color:#fff!important}
 .wf-tabbar button.on:before{content:"";position:absolute;top:-6px;left:30%;right:30%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#c8a862,transparent)}
 .wf-tabbar b{position:absolute;top:3px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#ebddb2;color:#0a0a0a;font:700 10px/1 -apple-system,sans-serif}
 .wf-tabbar b:empty{display:none}
 body:has([role=dialog],.pd5-ov,.wfk,.wfl,.wfq,.wfi,.wfv) .wf-tabbar{transform:translateY(140%)}
 .wfi-fab,.wf-pill,.wf-top{bottom:calc(88px + env(safe-area-inset-bottom))!important}
 .wf-hi{bottom:calc(92px + env(safe-area-inset-bottom))}
 .wf-top{right:14px}
}
@media(display-mode:standalone){body{-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}}

/* ---------- Logos de WhatsApp, Instagram y asistente: color + contorno blanco ---------- */
.wf-ow{display:inline-block;flex:none;line-height:0;filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)}
:where(.wf-ow){width:20px;height:20px}
.wf-ow>.wf-ico{display:block;width:100%;height:100%}
.wf-ow .wf-ic-asistente{background-color:#16181d}
.wfi-fab .wf-ow{width:30px;height:30px;filter:drop-shadow(1.8px 0 0 #fff) drop-shadow(-1.8px 0 0 #fff) drop-shadow(0 1.8px 0 #fff) drop-shadow(0 -1.8px 0 #fff)}

/* Sin cuadro de fondo: el texto se apoya en una sombra suave sobre el video */
button.wfh-chip span,button.wfh-chip em,.wfh-st b,.wfh-st small,.wfh-cats-t{text-shadow:0 1px 14px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6)}

/* Canales oficiales: logos blancos sin círculo de fondo */
.wf-ch{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;background:none!important;border:0!important;box-shadow:none!important;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),filter .3s}
.wf-ch:hover{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 10px rgba(235,221,178,.6))}
.wf-ch-ico{width:34px;height:34px}