/* ==========================================================
   Barber Host · Media: fotos, logos de plataformas, portadas de videos, bloque Mi historia y WhatsApp
   ========================================================== */

/* fotos reales */
.photo{position:relative;overflow:hidden;background:var(--ink-2)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease),filter .8s}
.photo:hover img{transform:scale(1.06)}
.photo .cap{position:absolute;left:14px;bottom:12px;z-index:1;font:500 10px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 10px;border-radius:999px}

.hero-photo{position:absolute;top:0;bottom:0;right:0;width:min(56%,780px);z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 80%;animation:kb 18s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--ink) 100%),radial-gradient(circle at 70% 40%,transparent 40%,rgba(10,10,8,.35) 100%)}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,1%)}}
@media (max-width:760px){.hero-photo{width:100%;bottom:auto;height:64%}.hero-photo img{-webkit-mask-image:none;mask-image:none;opacity:.85;object-position:50% 40%}.hero-photo::after{background:linear-gradient(180deg,rgba(10,10,8,.15) 0%,rgba(10,10,8,.1) 55%,var(--ink) 100%)}}

.final .photo{position:absolute;inset:0}
.final .photo img{object-position:55% 12%;opacity:.5}
@media (max-width:760px){.final .photo img{object-position:74% 30%}}
.final .photo:hover img{transform:none}
.final .photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.35) 20%,#000 78%)}

/* logos de plataformas */
.logo-ig{display:inline-grid;place-items:center;border-radius:28%;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.logo-ig svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:2}
.logo-yt{display:inline-block}
.reel .badge-ig{position:absolute;right:12px;top:12px;width:30px;height:30px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.reel .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.reel .play{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35)}
.reel .play::before{border-color:rgba(255,255,255,.5)}
.reel .play svg{fill:#fff}
.reel .foot .plat{display:flex;align-items:center;gap:7px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.reel .foot .plat .logo-ig{width:16px;height:16px}
.yt .ytbtn{position:absolute;left:50%;top:50%;width:92px;height:64px;margin:-32px 0 0 -46px;z-index:1;transition:transform .5s var(--ease);filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.yt:hover .ytbtn{transform:scale(1.12)}
.yt .src{color:var(--bone)}
.yt .src::before{display:none}
.yt .src svg{width:28px;height:20px}
.yt .ttl{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;font:400 clamp(22px,3vw,40px)/.95 var(--f-display);text-transform:uppercase;color:var(--bone);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.yt .ttl span{color:var(--yellow)}
.yt .chan{position:absolute;left:18px;top:16px;z-index:1;display:flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.socials a{display:inline-flex;align-items:center;gap:8px}
.socials .logo-ig{width:18px;height:18px}
.socials .logo-yt svg{width:22px;height:16px;display:block}


/* portadas */
.reel .shade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.85) 100%)}
.reel .cover{transition:transform 1.2s var(--ease)}
.reel:hover .cover{transform:scale(1.06)}
.reel .num,.reel .play,.reel .foot{z-index:1}
.reel .num{-webkit-text-stroke:1px var(--yellow);text-shadow:0 2px 10px rgba(0,0,0,.4)}
.reel .foot{background:none;align-items:flex-end}
.reel .foot .meta{display:grid;gap:8px;min-width:0;color:var(--bone);letter-spacing:0;text-transform:none;white-space:normal}
.reel .foot .meta b{font:400 22px/1 var(--f-display);text-transform:uppercase;text-wrap:balance}
.reel .foot .go{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.reels{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}.reel .foot .meta b{font-size:17px}}
/* celular (2 columnas): se ven 4 reels para que no quede uno solo en la última fila */
@media (max-width:700px){.reels .reel.extra:nth-child(4){display:block}}
.yt .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.yt:hover .screen img{transform:scale(1.04)}
.yt .screen::after{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%)}
.yt .chan{text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* su historia */
.story{padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.story::before{content:"";position:absolute;left:-10%;top:10%;width:60%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,187,0,.10),transparent 60%);pointer-events:none}
.story .wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;position:relative}
@media (max-width:820px){.story .wrap{grid-template-columns:1fr}}
.story-card{position:relative;display:block;aspect-ratio:9/12;max-width:100%;border-radius:14px;overflow:visible;text-decoration:none}
.story-card .inner{position:absolute;inset:0;border-radius:14px;overflow:hidden;border:1px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 8px rgba(201,162,74,.08)}
.story-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:sepia(.15)}
.story-card:hover img{transform:scale(1.05)}
.story-card .inner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7))}
.story-card .play{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--yellow);z-index:1}
.story-card .play svg{fill:var(--ink);width:28px;height:28px}
.story-card .badge-ig{position:absolute;right:14px;top:14px;width:34px;height:34px;z-index:2}
.story-card .lbl{position:absolute;left:16px;bottom:14px;z-index:1;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone);display:flex;gap:8px;align-items:center}
.story-card .lbl .logo-ig{width:16px;height:16px}
.story-card .ring{position:absolute;right:-44px;bottom:-44px;width:120px;height:120px;z-index:3;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:820px){.story-card{max-width:340px;margin-inline:auto;width:100%}.story-card .ring{right:-16px;bottom:-30px;width:96px;height:96px}}
.story h2{font:400 clamp(56px,9vw,136px)/.86 var(--f-display);text-transform:uppercase;margin-block:18px 22px}
.story h2 em{font:inherit;font-style:normal;color:var(--gold);display:block}
.story p.body{color:var(--mute);font-size:18px;max-width:46ch;margin-bottom:28px}
.story p.body strong{color:var(--bone);font-weight:500}

/* whatsapp */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;align-items:center;gap:0;height:58px;padding:0 17px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(37,211,102,.35);font:700 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;transition:gap .4s var(--ease),padding .4s var(--ease)}
.wa-float svg{width:26px;height:26px;flex:none;fill:#fff}
.wa-float span{display:inline-block;overflow:hidden;max-width:0;white-space:nowrap;transition:max-width .5s var(--ease)}
.wa-float:hover{gap:10px;padding-right:22px}
.wa-float:hover span{max-width:200px}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:wapulse 2.4s infinite}
@keyframes wapulse{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.demo-flag{left:16px;right:auto}@media (max-width:760px){.demo-flag{display:none}}
.wa-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:8px;background:#25D366;color:#06210f;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s}
.wa-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.3)}
.wa-card svg{width:40px;height:40px;fill:#06210f;flex:none}
.wa-card b{display:block;font:400 26px/1 var(--f-display);text-transform:uppercase;color:#06210f}
.wa-card span{font:500 13px/1.3 var(--f-mono);letter-spacing:.04em}
.btn.wa-btn{border-color:#25D366;color:#25D366}
.btn.wa-btn::before{background:#25D366}
.btn.wa-btn svg{width:18px;height:18px;fill:currentColor}
.ok a{color:var(--bone)}