.hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding:56px 0;background:radial-gradient(ellipse at 78% 45%,#3a2606 0%,#140d03 40%,#000 72%)}
/* Rayas de poste de barbero que se desvanecen hacia la derecha */
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(242,178,42,.07) 0 16px,transparent 16px 32px);-webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:1}

/* Sello giratorio con el logo */
.seal{position:relative;width:116px;height:116px;margin-bottom:24px}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 26s linear infinite}
.seal text{font:900 10.5px var(--font);fill:var(--gold)}
.seal img{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:3px solid var(--gold);background:#fff;box-shadow:0 4px 0 var(--bronze)}
@keyframes spin{to{transform:rotate(360deg)}}

.hero h1{margin:0;line-height:.92;text-transform:uppercase;font-style:italic;font-weight:900;font-size:clamp(2.2rem,8vw,5.2rem)}
.hero h1 span{display:block}
.hero .l1{color:transparent;-webkit-text-stroke:2.5px var(--gold)}
.hero .l2{background:linear-gradient(180deg,var(--gold-hi) 10%,var(--gold) 55%,#e8631a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 var(--bronze))}
.intro{margin:22px 0 26px;max-width:36ch;font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:700;color:var(--cream)}
.row{display:flex;gap:14px;flex-wrap:wrap}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill{margin:0;padding:8px 14px;font-size:.92rem;font-weight:800;color:var(--muted);background:#000;border:2px solid var(--gold-lo);border-radius:999px}
.pill b{color:var(--gold-hi)}
.pill.is-closed b{color:#ff8a5c}

@media (max-width:560px){
  .hero{padding:36px 0 48px}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.8) 60%)}
  .seal{width:92px;height:92px;margin-bottom:18px}
  .seal img{width:50px;height:50px;margin:-25px 0 0 -25px}
  .hero .l1{-webkit-text-stroke-width:2px}
  .intro{max-width:none}
  .row{flex-direction:column}
  .row .btn{width:100%}
}
@media (max-height:480px){.hero{min-height:auto;padding:36px 0}}