/* Hero v23: se carga después de hero-v22.css / home-v22.css (o de afr.css en las páginas compactas). Incluye el hero compacto de páginas legales, 404 y gracias. */
:is(.v22,.home-v22) .hz{--hz-band:rgba(10,10,10,.78);--ease-out:cubic-bezier(.23,1,.32,1)}

:is(.v22,.home-v22) .hz-media img,:is(.v22,.home-v22) .hz-media video{filter:saturate(.62) contrast(1.06) brightness(.94)}
:is(.v22,.home-v22) .hz-media::after{background:rgba(12,12,12,.6)}

:is(.v22,.home-v22) .hz h1{font-size:clamp(40px,11vw,58px);line-height:.98;letter-spacing:-.045em;font-weight:640;text-wrap:balance}
:is(.v22,.home-v22) .hz-lead{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.86)}
:is(.v22,.home-v22) .hz-lead strong{font-weight:560}

:is(.v22,.home-v22) .hz .breadcrumbs ol{font-size:.875rem;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(255,255,255,.6)}
:is(.v22,.home-v22) .hz .breadcrumbs a{color:rgba(255,255,255,.78)}
@media (hover:hover){:is(.v22,.home-v22) .hz .breadcrumbs a:hover{color:#fff}}

:is(.v22,.home-v22) .hz-run .hz-cv{stroke-width:3px}
:is(.v22,.home-v22) .hz-run .hz-nm{stroke-width:1.75px;stroke:rgba(255,255,255,.9)}
:is(.v22,.home-v22) .hz-tag{transform:translate(-50%,calc(-100% - 18px));font-size:.82rem;color:rgba(255,255,255,.75)}
:is(.v22,.home-v22) .hz-tag b{font-size:clamp(1.6rem,7vw,2.1rem);font-weight:640;letter-spacing:-.04em;line-height:.9}
:is(.v22,.home-v22) .hz-run{margin-top:clamp(52px,7svh,64px)}

:is(.v22,.home-v22) .hz-facts{position:relative;margin:24px 0 0;padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));border:0;gap:10px;font-size:.88rem;color:rgba(255,255,255,.72)}
:is(.v22,.home-v22) .hz-facts::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--hz-band)}
:is(.v22,.home-v22) .hz-facts b{font-weight:620;color:#fff}

:is(.v22,.home-v22) .hz-cta .btn{transition:background-size .45s var(--ease),color .3s,border-color .3s,transform .16s var(--ease-out)}
:is(.v22,.home-v22) .hz-cta .btn:active{transform:scale(.97)}

:is(.v22,.home-v22) .hz-cta .btn-ghost-light[href*="wa.me"]{--bg:#fff;--fg:var(--ink);--bd:#fff;--fill:var(--ink);--fill-fg:#fff;font-weight:560}

:is(.v22,.home-v22) .hz-cta .btn-ghost-light:not([href*="wa.me"]){--bd:transparent;background:none;padding-inline:6px;text-decoration:underline;text-decoration-color:var(--logo);text-decoration-thickness:2px;text-underline-offset:6px}
@media (hover:hover){
  :is(.v22,.home-v22) .hz-cta .btn-ghost-light:not([href*="wa.me"]):hover{color:#fff;border-color:transparent}
  :is(.v22,.home-v22) .hz-cta .btn-ghost-light:not([href*="wa.me"]):hover .icon{transform:translateY(3px)}
}

@media (max-width:900px){
  :is(.v22,.home-v22) .hz-copy{padding-bottom:0}
  :is(.v22,.home-v22) .hz-cue{bottom:auto;top:calc(100% - 17px)}
}
@media (max-width:640px) and (max-height:700px){
  :is(.v22,.home-v22) .hz h1{font-size:clamp(34px,9.6vw,42px)}
  :is(.v22,.home-v22) .hz-run{margin-top:44px}
  :is(.v22,.home-v22) .hz-tag b{font-size:1.5rem}
  :is(.v22,.home-v22) .hz-facts{margin-top:14px;padding-block:12px;gap:4px}
}

@media (min-width:901px){
  :is(.v22,.home-v22) .hz{justify-content:flex-end}
  :is(.v22,.home-v22) .hz-media::after{background:rgba(12,12,12,.56)}
  :is(.v22,.home-v22) .hz-copy{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-areas:"crumbs crumbs" "title title" "lead run" "cta run" "facts facts";
    grid-template-rows:auto auto auto 1fr auto;
    column-gap:clamp(48px,6vw,112px);align-items:start;
    padding-top:clamp(28px,4.5vh,64px);padding-bottom:0}
  :is(.v22,.home-v22) .hz .breadcrumbs{align-self:end;margin:0 0 20px}
  :is(.v22,.home-v22) .hz h1{font-size:clamp(52px,5.6vw,84px);line-height:.95;align-self:end;max-width:none}
  :is(.v22,.home-v22) .hz h1 span{text-wrap:balance}
  :is(.v22,.home-v22) .hz h1.hz-h1-long{font-size:clamp(46px,4.9vw,72px)}
  :is(.v22,.home-v22) .hz-lead{margin-top:clamp(28px,4vh,44px);max-width:38ch}
  :is(.v22,.home-v22) .hz-cta{margin-top:28px;gap:10px 12px}
  :is(.v22,.home-v22) .hz-cta .btn{min-height:56px;padding:15px 22px;font-size:1rem}
  :is(.v22,.home-v22) .hz-run{height:clamp(240px,24vw,340px);margin:clamp(60px,7.5vh,84px) 40px 56px}
  :is(.v22,.home-v22) .hz-tag{font-size:.92rem}
  :is(.v22,.home-v22) .hz-tag b{font-size:clamp(2.2rem,3.3vw,3.4rem)}
  :is(.v22,.home-v22) .hz-run figcaption{font-size:.78rem}
  :is(.v22,.home-v22) .hz-art{margin:clamp(36px,5vh,56px) 0 28px;height:clamp(260px,24vw,370px)}
  :is(.v22,.home-v22) .hz-art-html,:is(.v22,.home-v22) .hz-art:has(.hz-open){height:auto}
  :is(.v22,.home-v22) .hz-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:clamp(20px,3vh,36px);padding:22px 0 26px;font-size:.92rem;line-height:1.4}
  :is(.v22,.home-v22) .hz-facts > li > b,:is(.v22,.home-v22) .hz-facts a b{display:block;margin-bottom:4px;font-size:clamp(1.15rem,1.45vw,1.45rem);letter-spacing:-.02em;line-height:1.2}
}

@keyframes hz-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  :is(.v22,.home-v22) .hz .breadcrumbs,:is(.v22,.home-v22) .hz h1 span,:is(.v22,.home-v22) .hz-lead,
  :is(.v22,.home-v22) .hz-cta,:is(.v22,.home-v22) .hz-facts > li{animation:hz-rise .7s var(--ease-out) both}
  :is(.v22,.home-v22) .hz h1 span{display:block}
  :is(.v22,.home-v22) .hz h1 span:nth-child(1){animation-delay:.07s}
  :is(.v22,.home-v22) .hz h1 span:nth-child(2){animation-delay:.14s}
  :is(.v22,.home-v22) .hz-lead{animation-delay:.28s}
  :is(.v22,.home-v22) .hz-cta{animation-delay:.36s}
  :is(.v22,.home-v22) .hz-facts > li:nth-child(1){animation-delay:.48s}
  :is(.v22,.home-v22) .hz-facts > li:nth-child(2){animation-delay:.55s}
  :is(.v22,.home-v22) .hz-facts > li:nth-child(3){animation-delay:.62s}

  :is(.v22,.home-v22) .hz-media img,:is(.v22,.home-v22) .hz-media video{animation:hz-settle 2.4s var(--ease-out) both}
  @keyframes hz-settle{from{transform:scale(1.06)}to{transform:none}}
}

.hero-compact{border-bottom:clamp(10px,1.2vw,16px) solid #fc0404}
.hero-compact::before{display:none}
.hero-compact .hero-inner{padding-block:clamp(48px,7vw,112px) clamp(48px,6vw,96px)}
.hero-compact h1{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.96;letter-spacing:-.045em;font-weight:640;margin-bottom:clamp(20px,2.4vw,32px);max-width:16ch;text-wrap:balance}
.hero-compact .hero-lead{color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:52ch;margin-bottom:0}
.hero-compact .hero-lead .updated{display:block;margin-top:12px;font-size:.875rem;color:rgba(255,255,255,.6)}
.hero-compact .breadcrumbs{margin-bottom:clamp(24px,3vw,40px)}
.hero-compact .breadcrumbs ol{font-size:.875rem;letter-spacing:0;text-transform:none;font-weight:400}

@media (min-width:641px) and (max-width:900px){
  :is(.v22,.home-v22) .hz-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
  :is(.v22,.home-v22) .hz h1{font-size:clamp(40px,6.2vw,54px)}
}

:is(.v22,.home-v22) .hz-cta .btn{background-image:none;background-color:var(--bg);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .16s var(--ease-out)}
@media (hover:hover){:is(.v22,.home-v22) .hz-cta .btn:not(.btn-ghost-light:not([href*="wa.me"])):hover{background-color:var(--fill)}}

:is(.v22,.home-v22) .hz-ax,:is(.v22,.home-v22) .hz-run figcaption{font-size:13px}
:is(.v22,.home-v22) .hz-art .t{font-size:40px}
@media (min-width:901px){:is(.v22,.home-v22) .hz-art .t{font-size:28px}}
:is(.v22,.home-v22) .hz-list li small,:is(.v22,.home-v22) .hz-list-note,:is(.v22,.home-v22) .hz-open small{font-size:.82rem}

@media (min-width:901px){
  .hero-compact .hero-copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"crumbs crumbs" "title lead" "title actions";column-gap:clamp(48px,6vw,112px);align-items:end}
  .hero-compact .breadcrumbs{grid-area:crumbs}
  .hero-compact h1{grid-area:title;margin-bottom:0;max-width:none}
  .hero-compact h1.h1-long{font-size:clamp(2.6rem,4.2vw,3.9rem)}
  .hero-compact .hero-lead{grid-area:lead}
  .hero-compact .btn-row{grid-area:actions;margin-top:24px}
  .hero-compact .hero-copy > :is(.hero-lead,.btn-row):last-child{grid-row:2 / span 2}
}

.hero-compact h1 .accent{color:inherit}

.hero-compact .btn{background-image:none;background-color:var(--bg);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.hero-compact .btn:active{transform:scale(.97)}
@media (hover:hover){.hero-compact .btn:hover{background-color:var(--fill)}}

:is(.v22,.home-v22) .hz-list{gap:4px}
:is(.v22,.home-v22) .hz-list li,:is(.v22,.home-v22) .hz-list li:first-child{border:0;padding-inline:14px;background:rgba(12,12,12,.55);border-radius:var(--r)}
:is(.v22,.home-v22) .hz-list li:first-child{border-left:3px solid var(--logo)}

@media (prefers-reduced-motion:no-preference){
  .hero-compact .breadcrumbs,.hero-compact h1,.hero-compact .hero-lead,.hero-compact .btn-row{animation:hz-rise .7s cubic-bezier(.23,1,.32,1) both}
  .hero-compact h1{animation-delay:.07s}
  .hero-compact .hero-lead{animation-delay:.2s}
  .hero-compact .btn-row{animation-delay:.28s}
}

@media (max-width:640px){:is(.v22,.home-v22) .hz h1.hz-h1-long{font-size:clamp(30px,8.4vw,38px)}}

:is(.v22,.home-v22) :is(.contact-list,.fs-band) .card-icon{background:rgba(252,4,4,.1);border-color:transparent;color:var(--logo)}
:is(.v22,.home-v22) .faq details[open] summary::after{background:var(--logo);color:#fff;border-color:transparent}

@media (max-width:900px){
  :is(.v22,.home-v22) .hz{min-height:0}
  :is(.v22,.home-v22) .hz-copy{flex:0 0 auto;justify-content:flex-start;padding-top:24px}
  :is(.v22,.home-v22) .hz .breadcrumbs{order:0;margin:0 0 16px}
  :is(.v22,.home-v22) .hz h1{order:1}
  :is(.v22,.home-v22) .hz-lead{order:2;margin-top:20px}
  :is(.v22,.home-v22) .hz-cta{order:3}
  :is(.v22,.home-v22) .hz-run,:is(.v22,.home-v22) .hz-art{order:4}
  :is(.v22,.home-v22) .hz-facts{order:5;margin-top:24px}
  :is(.v22,.home-v22) .hz-art{margin:28px 0 4px;height:clamp(150px,44vw,230px)}
  :is(.v22,.home-v22) .hz-art-html,:is(.v22,.home-v22) .hz-art:has(.hz-open){height:auto}
  :is(.v22,.home-v22) .hz-run{margin:56px 30px 60px}
  :is(.v22,.home-v22) .hz-cue{display:none}
}
@media (max-width:640px) and (max-height:700px){
  :is(.v22,.home-v22) .hz-copy{padding-top:18px}
  :is(.v22,.home-v22) .hz-art{margin-top:20px;height:clamp(130px,40vw,170px)}
  :is(.v22,.home-v22) .hz-run{margin-top:48px;margin-bottom:56px}
  :is(.v22,.home-v22) .hz-facts{margin-top:18px}
}