/* v6 / haus-hero. Hero de madeinhaus.com (clases Home_hero, HomeHero_*, HeroFootnote_*, text-label-sm, text-body-md: su html mide
   62.5 % = 10px por rem, aqui todo en px x 10) con la tipografia y el acomodo del hero de extrafazant.nl (hero_content, eyebrow-l,
   heading-xxl, heading-alt, btn-link, text-draw: en em sobre el tamano base fluido del sitio, --ef-font). Selectores con prefijo
   #sec-haus-hero; fuentes renombradas (ef-, hh-). Rutas url() relativas a home/secciones/haus-hero/. Ver docs/SPEC_V6.md. */

/* ---------------------------------------------------------------- fuentes */
@font-face{font-family:"ef-Helvetica Now";src:url("../../assets/v6/fonts/HelveticaNowVar.woff2") format("woff2");font-weight:50 1000;font-style:normal;font-display:swap}
@font-face{font-family:"ef-Serrif";src:url("../../assets/v6/fonts/SerrifCompressedUprightsVF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"hh-monument";src:url("../../assets/v6/fonts/monument.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"hh-monument_mono";src:url("../../assets/v6/fonts/monument_mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tamano base fluido de extrafazant (--size-font del sitio) */
#sec-haus-hero{
  --ef-unit:16; --ef-ideal:1920; --ef-min:992px; --ef-max:3840px; --ef-fluid:100dvw;
  --ef-container:clamp(var(--ef-min), var(--ef-fluid), var(--ef-max));
  --ef-font:calc(var(--ef-container) / (var(--ef-ideal) / var(--ef-unit)));
  --hh-black:var(--sys-tinta,#131901); --hh-grid-margin:24px; --hh-ease-out-cubic:cubic-bezier(.215,.61,.355,1);
  --hh-z-above-wipe:11;
  font-size:var(--ef-font);
  font-family:"ef-Helvetica Now", Arial, sans-serif;
  color:var(--hh-black);
  transition:color 1s ease-in-out;   /* la letra cambia con el fondo (tinta, y crema sobre el azul), 2026-10-23 */
  line-height:1.4em;
  letter-spacing:-.04em;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-wrap:balance;
}
@media screen and (min-width:992px) and (min-aspect-ratio:11/5){#sec-haus-hero{--ef-fluid:min(100dvw, calc(100dvh * 16 / 9))}}
@media screen and (max-width:991px){#sec-haus-hero{--ef-ideal:991;--ef-min:768px;--ef-max:991px;--ef-fluid:100dvw}}
@media screen and (max-width:767px){#sec-haus-hero{--ef-ideal:767;--ef-min:480px;--ef-max:767px}}
@media screen and (max-width:479px){#sec-haus-hero{--ef-ideal:479;--ef-min:320px;--ef-max:479px}}
@media (min-width:1920px){#sec-haus-hero{--hh-grid-margin:80px}}

/* ---------------------------------------------------------------- madeinhaus: Home_hero, HomeHero */
#sec-haus-hero .Home_hero{position:relative;width:100%;height:100vh;height:100svh}
#sec-haus-hero .HomeHero_root{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--hh-z-above-wipe)}
#sec-haus-hero .HomeHero_root.HomeHero_disablePointerEvents{pointer-events:none}
#sec-haus-hero .HomeHero_canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}
#sec-haus-hero .HomeHero_inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:background-color 1s var(--hh-ease-out-cubic)}

/* ---------------------------------------------------------------- extrafazant: hero_content (eyebrow + h1 + boton) */
/* integracion: el canvas de la estela va encima del texto como en Haus (es hermano posterior); el bloque de texto no recibe
   el puntero salvo la liga, y el movimiento del mouse se escucha en HomeHero_inner (section.js) para que la estela siga
   aunque el cursor pase sobre el boton. */
#sec-haus-hero .hero_content{z-index:2;position:relative;grid-column-gap:2em;grid-row-gap:2em;gap:2em;text-align:center;flex-flow:column;justify-content:center;align-items:center;width:100%;display:flex;pointer-events:none;padding:0 2em;box-sizing:border-box}
#sec-haus-hero .hero_content a{pointer-events:auto}
@media screen and (max-width:991px){#sec-haus-hero .hero_content{gap:1.5em}}
#sec-haus-hero .hero_subtitle{max-width:24em}
@media screen and (max-width:991px){#sec-haus-hero .hero_subtitle{order:-9999}}
@media screen and (max-width:767px){#sec-haus-hero .hero_subtitle{max-width:16em}}
/* el letter-spacing lo hereda del cuerpo ya calculado en px (-.04em x 12px = -0.48px), como en el sitio: no se recalcula a 36px */
#sec-haus-hero .eyebrow-l{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-size:3em;line-height:1em;font-weight:500}
@media screen and (max-width:991px){#sec-haus-hero .eyebrow-l{font-size:2.25em}}
@media screen and (max-width:767px){#sec-haus-hero .eyebrow-l{font-size:2em}}
@media screen and (max-width:479px){#sec-haus-hero .eyebrow-l{font-size:1.75em}}
#sec-haus-hero h1{margin:0;font-weight:inherit}
/* integracion: en el sitio el titulo mide 12em a todo ancho (en holandes cabe); en espanol las palabras largas (CONVERTIMOS,
   HABLÁNDOLE) se salen del ancho en tableta y celular y el navegador agranda el viewport: tope de 15.5vw (en 1440 sigue en 12em). */
#sec-haus-hero .heading-xxl{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:min(12em, 15.5vw);line-height:.8em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;width:100%}
#sec-haus-hero .heading-alt{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 300,"wdth" 75,"opsz" 30;font-weight:300}
/* titulo partido por renglones y letras (lo arma section.js como el SplitText del sitio: line-mask > line > palabra > char) */
#sec-haus-hero .AnimatedTitleDynamic_root{-webkit-user-select:none;user-select:none;overflow-wrap:normal}
#sec-haus-hero .line-mask{position:relative;display:block;text-align:center;overflow:clip}
#sec-haus-hero .line{position:relative;display:block;text-align:center}
#sec-haus-hero .hh-word{position:relative;display:inline-block;white-space:nowrap}
#sec-haus-hero .char{position:relative;display:inline-block}
#sec-haus-hero .hh-title-static{display:none}
/* boton "Ontdek meer" de extrafazant */
#sec-haus-hero .w-inline-block{max-width:100%;display:inline-block}
#sec-haus-hero a{color:inherit;text-decoration:none;background-color:transparent;cursor:pointer}
#sec-haus-hero .btn-link{z-index:2;gap:.375em;font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-weight:500;letter-spacing:-.02em;flex-flow:row;justify-content:center;align-items:flex-start;font-size:1.75em;display:inline-flex;line-height:1.4em}
#sec-haus-hero .btn-link_inner{gap:.375em;justify-content:center;align-items:flex-start;display:flex}
#sec-haus-hero .text-wrap{position:relative}
#sec-haus-hero .text-draw__span{flex:none;margin-bottom:0;font-weight:500;display:inline-block}
#sec-haus-hero .text-draw__box{width:100%;height:.625em;color:#0038ff;position:relative;display:block}
#sec-haus-hero .text-draw__box.is-btn-link{pointer-events:none;align-self:flex-start;width:auto;position:absolute;top:130%;left:0;right:0}
#sec-haus-hero .text-draw__box svg{display:block;width:100%;height:100%;overflow:visible}
#sec-haus-hero .btn-link_arrow{background-color:#0038ff;width:1em;height:1em;color:#fff;flex-flow:column;flex:none;justify-content:flex-end;align-items:center;display:flex;position:relative;overflow:hidden}
#sec-haus-hero .btn-link_arrow-wrap{flex:none;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .525s cubic-bezier(.175,.885,.32,1.275);display:flex}
#sec-haus-hero .btn-link:hover .btn-link_arrow-wrap{transform:translateY(100%)}
#sec-haus-hero .btn-link_arrow-svg{z-index:1;width:.5em;position:relative;display:block}
#sec-haus-hero .rotation-180{transform:rotate(180deg)}

/* ---------------------------------------------------------------- madeinhaus: HeroFootnote (pie del hero) */
#sec-haus-hero .HeroFootnote_root{position:absolute;width:100%;padding:12px 0;bottom:0;z-index:var(--hh-z-above-wipe);box-sizing:border-box;pointer-events:none}
#sec-haus-hero .HeroFootnote_inner{display:flex;align-items:center;justify-content:center}
#sec-haus-hero .HeroFootnote_container{position:relative;display:flex;flex-direction:column;overflow:hidden}
#sec-haus-hero .HeroFootnote_state{display:inline-block}
#sec-haus-hero .HeroFootnote_currentTime{position:absolute;bottom:0;left:1.8em;letter-spacing:.15em;white-space:pre}
#sec-haus-hero .HeroFootnote_handle,#sec-haus-hero .HeroFootnote_location{display:none}
#sec-haus-hero .HeroFootnote_tagline{max-width:280px;text-align:center;overflow:hidden}
#sec-haus-hero .HeroFootnote_tagline p{margin:0}
@media (min-width:1280px){
  #sec-haus-hero .HeroFootnote_tagline{max-width:none}
  #sec-haus-hero .HeroFootnote_root{padding:12px var(--hh-grid-margin)}
  #sec-haus-hero .HeroFootnote_inner{justify-content:space-between}
  #sec-haus-hero .HeroFootnote_handle,#sec-haus-hero .HeroFootnote_location{display:flex}
  #sec-haus-hero .HeroFootnote_handle{min-width:100px}
  #sec-haus-hero .HeroFootnote_location{min-width:84px}
}
@media (min-width:1920px){
  #sec-haus-hero .HeroFootnote_root{padding:clamp(12px,1.2vw,30px) var(--hh-grid-margin)}
  #sec-haus-hero .HeroFootnote_currentTime{left:1.68em}
}
#sec-haus-hero .text-label-sm{font-family:"hh-monument_mono", Arial, sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:.4px;text-transform:uppercase}
@media (min-width:1920px){#sec-haus-hero .text-label-sm{font-size:12px}}
#sec-haus-hero .text-body-md{font-family:"hh-monument", Arial, sans-serif;font-size:clamp(14px,4.3vw,16px);font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.16px;text-transform:none}
@media (min-width:744px){#sec-haus-hero .text-body-md{font-size:18px;letter-spacing:-.18px}}
@media (min-width:1024px){#sec-haus-hero .text-body-md{font-size:17px}}
@media (min-width:1280px){#sec-haus-hero .text-body-md{font-size:clamp(17px,1.2vw,19px);letter-spacing:-.17px}}
@media (min-width:1920px){#sec-haus-hero .text-body-md{font-size:clamp(19.2px,.9vw,30px)}}
/* la frase del pie sube por palabras (TransitionTextLines, animateIn) */
#sec-haus-hero .TransitionTextLines_root{opacity:.001}
#sec-haus-hero .TransitionTextLines_root .line{overflow:hidden;display:block;text-align:center}
#sec-haus-hero .TransitionTextLines_root .word{display:inline-block;transform:translate3d(0,100%,0);will-change:transform}
#sec-haus-hero .TransitionTextLines_root .line:first-of-type .word{animation-delay:.1s}
#sec-haus-hero .TransitionTextLines_root .line:nth-of-type(2) .word{animation-delay:.2s}
#sec-haus-hero .TransitionTextLines_root .line:nth-of-type(3) .word{animation-delay:.3s}
#sec-haus-hero .TransitionTextLines_root.TransitionTextLines_animateIn{opacity:1}
#sec-haus-hero .TransitionTextLines_root.TransitionTextLines_animateIn .word{animation:hh-upIn var(--duration) var(--hh-ease-out-cubic) forwards}
@keyframes hh-upIn{to{transform:translateZ(0)}}