/* hero · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde hero.tw.json. No editar a mano. Necesita tokens.css. */
.s-hero{position:relative}
.s-hero__copy{position:relative}
.s-hero__badge-icon{position:relative}
.s-hero__media{position:relative}
.s-hero__frame{position:relative}
.s-hero__copy{z-index:10}
.s-hero__media{z-index:10}
.s-hero__copy{margin-inline:auto}
.s-hero__badge{margin-inline:auto}
.s-hero__title{margin-inline:auto}
.s-hero__lead{margin-inline:auto}
.s-hero__media{margin-inline:auto}
.s-hero__frame{margin-inline:auto}
.s-hero__lead{margin-block:calc(var(--spacing)*6)}
.s-hero__title{margin-top:calc(var(--spacing)*8)}
.s-hero__media{margin-top:calc(var(--spacing)*12)}
.s-hero__badge{display:flex}
.s-hero__badge-icon{display:flex}
.s-hero__actions{display:flex}
.s-hero__badge-icon{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}
.s-hero__badge{width:fit-content}
.s-hero__title{max-width:var(--container-3xl)}
.s-hero__copy{max-width:var(--container-5xl)}
.s-hero__media{max-width:var(--container-5xl)}
.s-hero__lead{max-width:var(--container-xl)}
.s-hero__badge{align-items:center}
.s-hero__badge-icon{align-items:center}
.s-hero__actions{align-items:center}
.s-hero__badge{justify-content:center}
.s-hero__badge-icon{justify-content:center}
.s-hero__actions{justify-content:center}
.s-hero__badge{gap:calc(var(--spacing)*2)}
.s-hero__actions{gap:calc(var(--spacing)*3)}
.s-hero{overflow:hidden}
.s-hero__frame{overflow:hidden}
.s-hero__badge-icon{border-radius:.25rem}
.s-hero__badge{border-radius:var(--radius-md)}
.s-hero__badge-icon{border-style:var(--tw-border-style);border-width:1px}
.s-hero__frame{border-style:var(--tw-border-style);border-width:1px}
.s-hero__badge-icon{border-color:var(--color-background)}
.s-hero__frame{border-color:#0000;background-color:var(--color-background)}
.s-hero__copy{padding-inline:calc(var(--spacing)*6)}
.s-hero__media{padding-inline:calc(var(--spacing)*6)}
.s-hero__badge{padding-block:calc(var(--spacing)*.5)}
.s-hero__inner{padding-block:calc(var(--spacing)*20)}
.s-hero__badge{padding-right:calc(var(--spacing)*3);padding-left:var(--spacing)}
.s-hero__copy{text-align:center}
.s-hero__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-hero__lead{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}
.s-hero__title{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}
.s-hero__badge-text{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-hero__title{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}
.s-hero__lead{text-wrap:balance;color:var(--color-muted-foreground)}
.s-hero__frame{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.s-hero__badge-icon{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.s-hero__frame{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#0000001a}
@supports (color:color-mix(in lab, red, red)){
.s-hero__frame{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)10%,transparent)var(--tw-shadow-alpha),transparent)}
}
.s-hero__badge-icon{--tw-shadow-color:#0003}
@supports (color:color-mix(in lab, red, red)){
.s-hero__badge-icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)20%,transparent)var(--tw-shadow-alpha),transparent)}
}
.s-hero__badge-icon{--tw-ring-color:#0000001a}
.s-hero__frame{--tw-ring-color:#0000001a}
@supports (color:color-mix(in lab, red, red)){
.s-hero__badge-icon{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}
.s-hero__frame{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}
}
.s-hero__badge{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s;animation-duration:.15s}
.s-hero:before{content:var(--tw-content);position:absolute;content:var(--tw-content);inset:var(--spacing);content:var(--tw-content);height:calc(100% - 8rem);content:var(--tw-content);border-radius:var(--radius-2xl);content:var(--tw-content);background-color:var(--color-muted)}
@media (hover:hover){
.s-hero__badge:hover{background-color:var(--color-foreground)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.s-hero__badge:hover{background-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}
}}
@media (min-width:40rem){
.s-hero__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}
.s-hero:before{content:var(--tw-content);inset:calc(var(--spacing)*2)}
}
@media (min-width:48rem){
.s-hero__media{margin-top:calc(var(--spacing)*16)}
.s-hero__inner{padding-block:calc(var(--spacing)*36)}
.s-hero:before{content:var(--tw-content);border-radius:2rem}
}
@media (min-width:64rem){
.s-hero:before{content:var(--tw-content);height:calc(100% - 14rem)}
}
/* propio */
.s-hero__badge{color:inherit;text-decoration:none}
.s-hero__badge-icon svg{width:.75rem;height:.75rem;fill:#fff;stroke:#fff}
.s-hero__frame{border-radius:var(--radius);aspect-ratio:16/9;display:grid;grid-template-rows:2.25rem 1fr}
.s-hero__bar{display:flex;align-items:center;gap:.375rem;padding:0 .875rem;border-bottom:1px solid var(--border)}
.s-hero__bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--input)}
.s-hero__app{display:grid;grid-template-columns:22% 1fr;min-height:0}
.s-hero__side{border-right:1px solid var(--border);padding:1rem;display:grid;align-content:start;gap:.625rem}
.s-hero__main{padding:1.25rem;display:grid;grid-template-rows:auto 1fr;gap:1rem;min-height:0}
.s-hero__line{height:.5rem;border-radius:99px;background:color-mix(in oklab,var(--foreground)8%,transparent)}
.s-hero__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.s-hero__card{border-radius:calc(var(--radius) - 2px);background:color-mix(in oklab,var(--foreground)4%,transparent);padding:.75rem;display:grid;gap:.5rem;align-content:start}
.s-hero__chart{border-radius:calc(var(--radius) - 2px);border:1px solid var(--border);background:repeating-linear-gradient(0deg,transparent 0 23px,var(--border) 23px 24px);position:relative;overflow:hidden}
.s-hero__chart svg{position:absolute;inset:auto 0 0 0;width:100%;height:70%;color:var(--foreground);opacity:.35}
.s-hero__badge-icon{background:var(--primary)}
.s-hero__badge-icon svg{fill:var(--primary-foreground);stroke:var(--primary-foreground)}