/* v6 / fazant-over (2026-11-09). Pagina "Over ons" de extrafazant.nl (extrafazant.nl/over; espejo en referencias/extrafazant-over): hero
   (section_hero: eyebrow-l + heading-xxl / heading-alt + eyebrow-m + btn-link) y equipo (section_team.is-about: titulo absoluto, lista en
   rejilla de 4 columnas con las tarjetas escalonadas, pies de foto colgados, tres calcomanias). Reglas de
   extrafazant-demo.webflow.shared.38e00f1c5.css y del <style> en linea de la seccion (rejilla y corrimientos), con prefijo
   #sec-fazant-over y fuentes con prefijo ef-. Los tamaños por corte NO salen de los nombres de las variables de Webflow (cambian de
   valor en cada corte): son los medidos en vivo con getComputedStyle el 2026-11-09 a 1920, 1440, 1100, 991, 800, 767, 600, 479 y 390
   (tools/v6/mod/fazant-over/MEDIDAS.md). Las medidas van en em sobre el tamaño base fluido del sitio (--ef-font).
   Lo que se aparta del original va marcado "integracion". Rutas url() relativas a home/secciones/fazant-over/. */
@import url("https://fonts.googleapis.com/css2?family=Sniglet:wght@800&display=block");   /* letra de los nombres sobre las fotos (ver .team_name); pendiente: servirla desde el sitio */
@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}
#sec-fazant-over{
  --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)));
  --ef-black:var(--sys-tinta,#131901); --ef-white:#fff; --ef-blue:#0038ff; --ef-pink:#ff77cd; --ef-orange:#ff5f04;
  background-color:var(--sys-hueso,#F3F3EF);   /* integracion: el claro de la casa (hueso); el original va en blanco */
  font-size:var(--ef-font);font-family:"ef-Helvetica Now", Arial, sans-serif;color:var(--ef-black);line-height:1.4em;font-weight:500;letter-spacing:-.04em;
  -webkit-font-smoothing:antialiased;text-wrap:balance;position:relative;overflow-x:clip;
}
@media screen and (min-width:992px) and (min-aspect-ratio:11/5){#sec-fazant-over{--ef-fluid:min(100dvw, calc(100dvh * 16 / 9))}}
@media screen and (max-width:991px){#sec-fazant-over{--ef-ideal:991;--ef-min:768px;--ef-max:991px;--ef-fluid:100dvw}}
@media screen and (max-width:767px){#sec-fazant-over{--ef-ideal:767;--ef-min:480px;--ef-max:767px}}
@media screen and (max-width:479px){#sec-fazant-over{--ef-ideal:479;--ef-min:320px;--ef-max:479px}}
#sec-fazant-over *{box-sizing:border-box}
#sec-fazant-over h1,#sec-fazant-over h2,#sec-fazant-over h3,#sec-fazant-over p{margin:0;font-weight:inherit}
#sec-fazant-over a{color:inherit;text-decoration:none;background-color:transparent;cursor:pointer}
#sec-fazant-over img{max-width:100%;vertical-align:middle;display:inline-block;border:0}
#sec-fazant-over button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
#sec-fazant-over .section-padding-128px{padding-top:8em;padding-bottom:8em}
#sec-fazant-over .padding-global{width:100%;padding-left:2em;padding-right:2em}
#sec-fazant-over .w-layout-blockcontainer{max-width:940px;margin-left:auto;margin-right:auto;display:block}
#sec-fazant-over .w-container{max-width:940px;margin-left:auto;margin-right:auto}
#sec-fazant-over .container-col-12{width:100%;max-width:100%}
#sec-fazant-over .w-inline-block{max-width:100%;display:inline-block}
/* ---------- letras ---------- */
#sec-fazant-over .eyebrow-l{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-weight:500;font-size:3em;line-height:1em}
#sec-fazant-over .eyebrow-m{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-weight:500;font-size:2.5em;line-height:1em}
#sec-fazant-over .eyebrow-s{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-weight:500;letter-spacing:-.02em;font-size:2em;line-height:1em}
#sec-fazant-over .heading-xxl{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:12em;line-height:.8em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#sec-fazant-over .heading-xl{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:8em;line-height:.8em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#sec-fazant-over .heading-xs{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:2.5em;line-height:.9em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#sec-fazant-over .heading-alt{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 300,"wdth" 75,"opsz" 30;font-weight:300}
/* ---------- hero ---------- */
#sec-fazant-over .section_hero{z-index:1;position:relative}
#sec-fazant-over .hero_wrapper{width:100%}
#sec-fazant-over .hero_wrapper.is-100vh{flex-flow:column;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative}
#sec-fazant-over .hero_content{z-index:2;gap:2em;text-align:center;flex-flow:column;justify-content:center;align-items:center;width:100%;display:flex;position:relative}
#sec-fazant-over .hero_content.is-hero{position:static}
#sec-fazant-over .hero_subtitle{max-width:24em}
#sec-fazant-over .max-width-800px{width:100%;max-width:50em}
#sec-fazant-over .hero-team_btn{margin-top:2em}
#sec-fazant-over .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:.8em;position:relative}   /* line-height medido en vivo: 16.8 px con letra de 21 px */
#sec-fazant-over .btn-link_inner{gap:.375em;justify-content:center;align-items:flex-start;display:flex}
#sec-fazant-over .text-wrap{position:relative}
#sec-fazant-over .text-draw__span{flex:none;margin-bottom:0;font-weight:500;display:inline-block}
#sec-fazant-over .text-draw__box{width:100%;height:.625em;color:var(--ef-blue);position:relative;display:block}
#sec-fazant-over .text-draw__box.is-btn-link{pointer-events:none;align-self:flex-start;width:auto;position:absolute;top:130%;left:0;right:0}
#sec-fazant-over .text-draw__box svg{display:block;width:100%;height:100%;overflow:visible}
#sec-fazant-over .btn-link_arrow{background-color:var(--ef-blue);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-fazant-over .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-fazant-over .btn-link:hover .btn-link_arrow-wrap{transform:translateY(100%)}
#sec-fazant-over .btn-link_arrow-svg{z-index:1;width:.5em;position:relative;display:block}
#sec-fazant-over .rotation-180{transform:rotate(180deg)}
/* ---------- equipo ---------- */
#sec-fazant-over .section_team.is-about{margin-top:-16em;position:relative;z-index:2}
#sec-fazant-over .team_wrapper{gap:3em;flex-flow:column;justify-content:flex-start;align-items:center;width:100%;display:flex;position:relative}
#sec-fazant-over .team_title{gap:1em;text-align:center;flex-flow:column;justify-content:center;align-items:center;width:70%;display:flex;position:absolute;inset:12em auto auto 0%}
#sec-fazant-over .team_collection{width:100%}
#sec-fazant-over .team_list.is-about{gap:2em;flex-flow:column;display:flex}
#sec-fazant-over .team_card{gap:1em;flex-flow:column;width:34em;display:flex;position:relative}
#sec-fazant-over .team_img{aspect-ratio:4 / 5;width:100%;position:relative;overflow:hidden;container-type:inline-size}
#sec-fazant-over .image{object-fit:cover;width:100%;max-width:none;height:100%;position:absolute;inset:0%}
#sec-fazant-over .team_caption{gap:.375em;text-align:center;flex-flow:column;justify-content:flex-start;align-items:center;width:100%;padding-top:1em;display:flex;position:absolute;inset:auto 0% 0%;transform:translate(0, 100%)}
#sec-fazant-over .team_role{gap:.5em;justify-content:center;align-items:center;display:flex}
#sec-fazant-over .team-sticker{width:12em;position:absolute;inset:-8em auto auto 10em;transform:rotate(-10deg)}
#sec-fazant-over .team-sticker img{width:100%;height:auto;display:block}
#sec-fazant-over .team-sticker.is-02{width:14em;top:128em;left:28em}
#sec-fazant-over .team-sticker.is-03{width:12em;top:96em;left:auto;right:16em;transform:rotate(0)}
#sec-fazant-over .padding-bottom{padding-top:0;padding-left:0;padding-right:0}
#sec-fazant-over .padding-80px{padding:5em}
#sec-fazant-over .padding-bottom.padding-80px{padding-top:0;padding-left:0;padding-right:0}
/* rejilla y corrimientos: <style> en linea de la seccion (team_wrapper > css-embed), verbatim */
#sec-fazant-over .team_item:nth-child(1){grid-row:1}
#sec-fazant-over .team_item:nth-child(2){grid-row:2}
#sec-fazant-over .team_item:nth-child(3){grid-row:2}
#sec-fazant-over .team_item:nth-child(4){grid-row:3}
#sec-fazant-over .team_item:nth-child(5){grid-row:4}
#sec-fazant-over .team_item:nth-child(6){grid-row:5}
#sec-fazant-over .team_item:nth-child(7){grid-row:5}
#sec-fazant-over .team_item:nth-child(8){grid-row:6}
@media screen and (min-width:992px){
  #sec-fazant-over .team_list.is-about{display:grid;grid-template-columns:repeat(4, 1fr);gap:2em;align-items:start}
  #sec-fazant-over .team_item:nth-child(4n + 1){grid-column:3;margin-top:0;transform:translateX(16em)}
  #sec-fazant-over .team_item:nth-child(4n + 2){grid-column:1;margin-top:0;transform:translateY(-8em) translateX(8em)}
  #sec-fazant-over .team_item:nth-child(4n + 3){grid-column:3;margin-top:8em;margin-bottom:-8em;transform:translateY(8em)}
  #sec-fazant-over .team_item:nth-child(4n + 4){grid-column:1;margin-top:0;margin-bottom:-8em;transform:translateY(8em) translateX(2em)}
}
@media screen and (min-width:480px) and (max-width:991px){
  #sec-fazant-over .team_list.is-about{display:grid;grid-template-columns:repeat(4, 1fr);gap:1em;align-items:start}
  #sec-fazant-over .team_item:nth-child(4n + 1){grid-column:3;margin-top:0;transform:translateX(4em)}
  #sec-fazant-over .team_item:nth-child(4n + 2){grid-column:1;margin-top:0;transform:translateY(-4em) translateX(2em)}
  #sec-fazant-over .team_item:nth-child(4n + 3){grid-column:3;margin-top:4em;margin-bottom:-4em;transform:translateY(4em)}
  #sec-fazant-over .team_item:nth-child(4n + 4){grid-column:1;margin-top:0;margin-bottom:-4em;transform:translateY(8em) translateX(2em)}
}
@media screen and (max-width:479px){
  #sec-fazant-over .team_item:nth-child(4n + 1){transform:translateX(1em)}
}
/* ---------- cortes (valores medidos en vivo) ---------- */
@media screen and (max-width:991px){
  #sec-fazant-over .section-padding-128px{padding-top:6.5em;padding-bottom:6.5em}
  #sec-fazant-over .padding-global{padding-left:1.5em;padding-right:1.5em}
  #sec-fazant-over .eyebrow-l{font-size:2.25em}
  #sec-fazant-over .eyebrow-m{font-size:2em}
  #sec-fazant-over .eyebrow-s{font-size:1.5em}
  #sec-fazant-over .heading-xxl{font-size:6.5em}
  #sec-fazant-over .heading-xl{font-size:5.5em}
  #sec-fazant-over .heading-xs{font-size:1.5em}
  #sec-fazant-over .section_hero{min-height:auto}
  #sec-fazant-over .hero_content{gap:1.5em}
  #sec-fazant-over .hero_wrapper.is-100vh{min-height:auto;padding-top:8em}
  #sec-fazant-over .hero_subtitle{order:-9999}
  #sec-fazant-over .section_team.is-about{margin-top:-4em}
  #sec-fazant-over .team_wrapper{gap:2em}
  #sec-fazant-over .team_title{width:55%}
  #sec-fazant-over .team_card{width:36vw}
  #sec-fazant-over .team-sticker.is-02{width:10em;top:80em;left:20em}
  #sec-fazant-over .team-sticker.is-01{width:8em;top:-6em;left:0}
  #sec-fazant-over .team-sticker.is-03{width:9em;top:60em;right:2em}
  #sec-fazant-over .team_caption{gap:.25em;padding-top:.75em}
  #sec-fazant-over .padding-80px{padding:4em}
  #sec-fazant-over .padding-bottom.padding-80px{padding-top:0;padding-left:0;padding-right:0}
}
@media screen and (max-width:767px){
  #sec-fazant-over .section-padding-128px{padding-top:5.5em;padding-bottom:5.5em}
  #sec-fazant-over .eyebrow-l{font-size:2em}
  #sec-fazant-over .eyebrow-m{font-size:1.75em}
  #sec-fazant-over .eyebrow-s{font-size:1.375em}
  #sec-fazant-over .heading-xxl{font-size:5em}
  #sec-fazant-over .heading-xl{font-size:4.5em}
  #sec-fazant-over .heading-xs{font-size:1.25em}
  #sec-fazant-over .hero_subtitle{max-width:16em}
  #sec-fazant-over .team_title{top:6em}
  #sec-fazant-over .team-sticker.is-02{top:125vw;left:13em}
  #sec-fazant-over .team-sticker.is-03{top:90vw}
}
@media screen and (max-width:479px){
  #sec-fazant-over .section-padding-128px{padding-top:4.75em;padding-bottom:4.75em}
  #sec-fazant-over .padding-global{padding-left:1.25em;padding-right:1.25em}
  #sec-fazant-over .eyebrow-l{font-size:1.75em}
  #sec-fazant-over .heading-xxl{font-size:4em}
  #sec-fazant-over .heading-xl{font-size:3.5em}
  #sec-fazant-over .max-width-800px{max-width:none}
  #sec-fazant-over .hero_wrapper.is-100vh{padding-top:6em}
  #sec-fazant-over .section_team.is-about{margin-top:-2em}
  #sec-fazant-over .team_title{gap:.5em;width:50%;top:1.5em}
  #sec-fazant-over .team_title.is-about{width:100%;position:static}
  #sec-fazant-over .team_list.is-about{gap:2em;flex-flow:column;display:flex;align-items:center}
  #sec-fazant-over .team_card{width:40vw}
  #sec-fazant-over .team_card.is-about{gap:.75em;width:75vw}
  #sec-fazant-over .team-sticker.is-02{width:8em;top:174vw;left:0}
  #sec-fazant-over .team-sticker.is-01{z-index:2;width:6em;top:-3em;left:auto;right:-5em;transform:rotate(4deg)}
  #sec-fazant-over .team-sticker.is-01.is-about{top:-4em;right:0}
  #sec-fazant-over .team-sticker.is-03{width:7em;top:100vw;right:-1em}
  #sec-fazant-over .team-sticker.is-03.is-about{top:65%}
  #sec-fazant-over .team_caption{padding-top:0;position:static;transform:none}
  #sec-fazant-over .hide-mobile{display:none}
}
/* ---------- integracion (lo que no viene del original) ---------- */
/* 1. El nombre sobre la foto. En el original va dibujado dentro de la imagen (Tom.avif, Willem.avif...); aqui es texto de verdad
      encima de la foto, con una letra redonda parecida (Sniglet 800), engordada con contorno del mismo color y con cada letra
      girada y movida un poco (los valores los pone tools/v6/nosotros.py). Tamaño en cqw: sigue al ancho de la tarjeta. */
#sec-fazant-over .team_name{position:absolute;z-index:1;white-space:nowrap;font-family:"Sniglet","Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif;font-weight:800;font-variation-settings:normal;line-height:1;letter-spacing:-.035em;text-transform:none;-webkit-text-stroke:.045em currentColor;paint-order:stroke fill;pointer-events:none;font-size:15.5cqw}
#sec-fazant-over .team_name span{display:inline-block;transform:translateY(calc(var(--y, 0) * 1em)) rotate(var(--r, 0deg))}
#sec-fazant-over .team_name .team_name-sp{width:.22em}
#sec-fazant-over .team_name.is-blanco{color:#fff}
#sec-fazant-over .team_name.is-azul{color:var(--ef-blue)}
#sec-fazant-over .team_name.is-naranja{color:var(--ef-orange)}
#sec-fazant-over .team_name.is-rosa{color:var(--ef-pink)}
/* 2. La tarjeta que lleva a la pagina de la persona: la liga cubre la foto (el original no liga a nada). */
#sec-fazant-over .team_link{position:absolute;inset:0;display:block}
#sec-fazant-over .team_link:focus-visible{outline:3px solid var(--ef-blue);outline-offset:-3px}
/* 3. Somos tres y el original son seis. La lista termina en la posicion 4n+3 (corrida 8em hacia abajo, con su pie colgado) y la
      ultima calcomania del original (is-02, a 128em) quedaria fuera: aire abajo para que la tercera tarjeta no se encime con lo que
      sigue, y la calcomania 02 sube a la esquina de la segunda tarjeta, como en el original se encima con la cuarta. */
/*    Posiciones calculadas con las fotos y los pies medidos en la pagina ya armada (2026-11-09): cada calcomania queda encimada en la
      esquina de abajo a la derecha de una foto y termina donde empieza el pie, para no tapar texto. */
@media screen and (min-width:992px){
  #sec-fazant-over .team_list.is-about{padding-bottom:18em}
  #sec-fazant-over .team-sticker.is-02{top:62em;left:37em}
}
@media screen and (min-width:480px) and (max-width:991px){
  #sec-fazant-over .team_list.is-about{padding-bottom:12em}
  #sec-fazant-over .team-sticker.is-02{top:40.5em;left:19.5em}
  #sec-fazant-over .team-sticker.is-03{top:52em}
}
@media screen and (min-width:480px) and (max-width:767px){
  #sec-fazant-over .team-sticker.is-02{top:28em;left:12.5em}
  #sec-fazant-over .team-sticker.is-03{top:39.5em}
}
@media screen and (max-width:479px){
  #sec-fazant-over .team-sticker.is-03.is-about{top:57%}
}
/*    La calcomania 01 es nuestro sello, que es cuadrado (la de ellos, "EF", es apaisada) y nuestros titulos son mas anchos: sube lo
      justo para no rozar el antetitulo ni el titulo del equipo. */
@media screen and (min-width:992px){#sec-fazant-over .team-sticker.is-01{top:-12.5em}}
@media screen and (min-width:480px) and (max-width:991px){#sec-fazant-over .team-sticker.is-01{top:-9em}}
@media screen and (max-width:479px){#sec-fazant-over .team-sticker.is-01.is-about{top:-6.6em}}
/* 4. Titulos de la casa: son mas largos que "Wij zijn makers"; tope por ancho de pantalla para que no se salgan en celular. */
#sec-fazant-over .heading-xxl{font-size:min(12em, 13.2vw)}
@media screen and (max-width:991px){#sec-fazant-over .heading-xxl{font-size:min(6.5em, 15vw)}}
@media screen and (max-width:767px){#sec-fazant-over .heading-xxl{font-size:min(5em, 15vw)}}
@media screen and (max-width:479px){#sec-fazant-over .heading-xxl{font-size:min(4em, 15vw)}}
/* 5. Mas aire entre las tres tarjetas (Emilio, 2026-11-09, sobre una captura: "dales mas espacio, entre las 3 tarjetas"). En el original
      la segunda y la tercera quedan a 17em una de otra y la tercera a 12em del pie de la primera; aqui la segunda se recorre a la
      izquierda y la tercera baja y se recorre a la derecha. Las calcomanias 02 y 03 siguen a la esquina de su foto. */
@media screen and (min-width:992px){
  #sec-fazant-over .team_item:nth-child(4n + 2){transform:translateY(-4em) translateX(2em)}
  #sec-fazant-over .team_item:nth-child(4n + 3){margin-top:14em;margin-bottom:-14em;transform:translateY(8em) translateX(3em)}
  #sec-fazant-over .team_list.is-about{padding-bottom:26em}
  #sec-fazant-over .team-sticker.is-02{top:66em;left:31.5em}
  #sec-fazant-over .team-sticker.is-03{top:93em;right:12em}   /* termina donde empieza el pie: las lineas largas ya no pasan por debajo */
}
@media screen and (min-width:480px) and (max-width:991px){
  #sec-fazant-over .team_item:nth-child(4n + 2){transform:translateY(-2em) translateX(0)}
  #sec-fazant-over .team_item:nth-child(4n + 3){margin-top:8em;margin-bottom:-8em;transform:translateY(4em) translateX(2em)}
  #sec-fazant-over .team_list.is-about{padding-bottom:18em}
  #sec-fazant-over .team-sticker.is-02{top:42.5em;left:17em}
  #sec-fazant-over .team-sticker.is-03{top:57em;right:.5em}
}
@media screen and (min-width:480px) and (max-width:767px){
  #sec-fazant-over .team-sticker.is-02{top:30em;left:12em}
  #sec-fazant-over .team-sticker.is-03{top:44em;right:.5em}
}
@media screen and (max-width:479px){
  #sec-fazant-over .team_list.is-about{gap:3.25em}
}
@media (prefers-reduced-motion:reduce){#sec-fazant-over .btn-link_arrow-wrap{transition:none}}