/* v6 / fazant-diensten. Seccion de servicios de extrafazant.nl: reglas de extrafazant-demo.webflow.shared.*.css (services_*, services-card*,
   heading-xl, heading-m, heading-alt, eyebrow-m, eyebrow-s, btn-link*, text-draw*) y del <style> en linea de la seccion (inclinaciones),
   verbatim con prefijo #sec-fazant-diensten y fuentes con prefijo ef-. Las medidas van en em sobre el tamano base fluido del sitio
   (--ef-font, ver el hero). Rutas url() relativas a home/secciones/fazant-diensten/. Ver docs/SPEC_V6.md. */
@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-diensten{
  --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);   /* Papel picado (2026-10-23): el claro que eligio Emilio (hueso) */
  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;
}
@media screen and (min-width:992px) and (min-aspect-ratio:11/5){#sec-fazant-diensten{--ef-fluid:min(100dvw, calc(100dvh * 16 / 9))}}
@media screen and (max-width:991px){#sec-fazant-diensten{--ef-ideal:991;--ef-min:768px;--ef-max:991px;--ef-fluid:100dvw}}
@media screen and (max-width:767px){#sec-fazant-diensten{--ef-ideal:767;--ef-min:480px;--ef-max:767px}}
@media screen and (max-width:479px){#sec-fazant-diensten{--ef-ideal:479;--ef-min:320px;--ef-max:479px}}
#sec-fazant-diensten *{box-sizing:border-box}
#sec-fazant-diensten h2,#sec-fazant-diensten h3{margin:0;font-weight:inherit}
#sec-fazant-diensten a{color:inherit;text-decoration:none;background-color:transparent;cursor:pointer}
#sec-fazant-diensten img{max-width:100%;vertical-align:middle;display:inline-block;border:0}
#sec-fazant-diensten .section_services{overflow:clip}
#sec-fazant-diensten .section-padding-128px{padding-top:8em;padding-bottom:8em}
#sec-fazant-diensten .padding-global{width:100%;padding-left:2em;padding-right:2em}
@media screen and (max-width:991px){#sec-fazant-diensten .padding-global{padding-left:1.5em;padding-right:1.5em}}
@media screen and (max-width:479px){#sec-fazant-diensten .padding-global{padding-left:1.25em;padding-right:1.25em}}
#sec-fazant-diensten .w-layout-blockcontainer{max-width:940px;margin-left:auto;margin-right:auto;display:block}
#sec-fazant-diensten .w-container{max-width:940px;margin-left:auto;margin-right:auto}
#sec-fazant-diensten .container-col-12{width:100%;max-width:100%}
#sec-fazant-diensten .services_wrapper{grid-column-gap:1.5em;grid-row-gap:1.5em;gap:1.5em;flex-flow:column;justify-content:flex-start;align-items:center;width:100%;display:flex}
#sec-fazant-diensten .services_title{gap:1em;text-align:center;flex-flow:column;justify-content:center;align-items:center;width:100%;max-width:48em;display:flex}
@media screen and (max-width:991px){#sec-fazant-diensten .services_title{max-width:40em}}
@media screen and (max-width:767px){#sec-fazant-diensten .services_title{max-width:32em}}
#sec-fazant-diensten .eyebrow-m{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 500;font-weight:500;font-size:2.5em;line-height:1em}
@media screen and (max-width:991px){#sec-fazant-diensten .eyebrow-m{font-size:2em}}
@media screen and (max-width:767px){#sec-fazant-diensten .eyebrow-m{font-size:1.75em}}
/* integracion: tope de 20vw para que TRABAJAMOS quepa en celular (en 1440 sigue en 8em) */
#sec-fazant-diensten .heading-xl{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:min(8em, 19vw);line-height:.8em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#sec-fazant-diensten .heading-alt{font-family:"ef-Serrif", Arial, sans-serif;font-variation-settings:"wght" 300,"wdth" 75,"opsz" 30;font-weight:300}
#sec-fazant-diensten .heading-m{font-family:"ef-Helvetica Now", Arial, sans-serif;font-size:5em;line-height:.8em;font-variation-settings:"wght" 700,"wdth" 75,"opsz" 30;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#sec-fazant-diensten .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}
@media screen and (max-width:991px){#sec-fazant-diensten .eyebrow-s{font-size:1.5em}}
@media screen and (max-width:767px){#sec-fazant-diensten .eyebrow-s{font-size:1.375em}}
/* tarjetas */
#sec-fazant-diensten .services-cards_collection{width:auto}
#sec-fazant-diensten .services-cards_list{gap:0;display:flex;transform:scale(.9)}
#sec-fazant-diensten .services-cards_item{transform:rotate(0)}
#sec-fazant-diensten .services-card{z-index:1;width:28em;height:100%;position:relative}
#sec-fazant-diensten .services-card_inner{width:100%;height:100%}
#sec-fazant-diensten .services-card_wrap{gap:1em;background-color:var(--ef-white);width:100%;height:100%;color:var(--ef-white);flex-flow:column;padding:1.5em;display:flex;position:relative}
/* los marcos de color de cada tarjeta (en la captura del sitio: azul, rosa, naranja; el color no aparece en su CSS ni en su HTML, va por posicion) */
#sec-fazant-diensten .services-cards_item:nth-child(1) .services-card_wrap{background-color:var(--ef-blue)}
#sec-fazant-diensten .services-cards_item:nth-child(2) .services-card_wrap{background-color:var(--ef-pink)}
#sec-fazant-diensten .services-cards_item:nth-child(3) .services-card_wrap{background-color:var(--ef-orange)}
#sec-fazant-diensten .services-card_media{aspect-ratio:4/5;width:100%;position:relative;overflow:hidden}
#sec-fazant-diensten .video-card-visual__img{object-fit:cover;width:100%;height:100%;display:block}
#sec-fazant-diensten .services-card_content{gap:.5em;text-align:center;flex-flow:column;justify-content:flex-start;align-items:center;display:flex;width:100%;container-type:inline-size}
/* integracion: los titulos de las tarjetas del sitio son cortos (Animatie, Video, Social); INMOBILIARIAS a 5em se sale del marco, tope por ancho de tarjeta */
#sec-fazant-diensten .services-card_content .heading-m{font-size:min(5em, 14cqw)}
@media screen and (min-width:992px){
  #sec-fazant-diensten .services-cards_item:first-child{transform:translateY(4em) rotate(-4deg)}
  #sec-fazant-diensten .services-cards_item:last-child{transform:translateY(3em) rotate(5deg)}
}
@media screen and (min-width:480px) and (max-width:991px){
  #sec-fazant-diensten .services-cards_item:first-child{transform:translateY(2em) rotate(-3deg)}
  #sec-fazant-diensten .services-cards_item:last-child{transform:translateY(1em) rotate(3deg)}
}
@media screen and (max-width:991px){
  #sec-fazant-diensten .services-card{width:18em;right:5em}
  #sec-fazant-diensten .services-card_wrap{padding:1em}
}
@media screen and (max-width:767px){
  #sec-fazant-diensten .services-card{width:15em}
  #sec-fazant-diensten .services-card_wrap{padding:.75em}
}
@media screen and (max-width:479px){
  #sec-fazant-diensten .services-cards_list{gap:1.5em;flex-flow:column;justify-content:flex-start;align-items:center;transform:none}
  #sec-fazant-diensten .services-card{width:18em;right:1em}
  #sec-fazant-diensten .services-card_wrap{padding:.75em}
  #sec-fazant-diensten .services-cards_item:first-child{transform:translateX(-4em) rotate(-2deg)}
  #sec-fazant-diensten .services-cards_item:nth-child(2){transform:translateX(3em) rotate(2deg)}
  #sec-fazant-diensten .services-cards_item:last-child{transform:translateX(-2em) rotate(-1deg)}
}
/* boton */
#sec-fazant-diensten .services_btn{justify-content:center;align-items:center;margin-top:2em;display:flex;transform:scale(1.5)}
@media screen and (max-width:991px){#sec-fazant-diensten .services_btn{margin-top:2em;transform:scale(1.125)}}
@media screen and (max-width:767px){#sec-fazant-diensten .services_btn{margin-top:1em}}
#sec-fazant-diensten .w-inline-block{max-width:100%;display:inline-block}
#sec-fazant-diensten .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-fazant-diensten .btn-link_inner{gap:.375em;justify-content:center;align-items:flex-start;display:flex}
#sec-fazant-diensten .text-wrap{position:relative}
#sec-fazant-diensten .text-draw__span{flex:none;margin-bottom:0;font-weight:500;display:inline-block}
#sec-fazant-diensten .text-draw__box{width:100%;height:.625em;color:var(--ef-blue);position:relative;display:block}
#sec-fazant-diensten .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-diensten .text-draw__box svg{display:block;width:100%;height:100%;overflow:visible}
#sec-fazant-diensten .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-diensten .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-diensten .btn-link:hover .btn-link_arrow-wrap{transform:translateY(100%)}
#sec-fazant-diensten .btn-link_arrow-svg{z-index:1;width:.5em;position:relative;display:block}
#sec-fazant-diensten .rotation-180{transform:rotate(180deg)}
/* textos que entran por renglones (scroll-reveal): antes de entrar van ocultos */
#sec-fazant-diensten [data-scroll-reveal]{opacity:0;visibility:hidden}

/* ------------------------------------------------------------------ marcos con los colores de la casa (Emilio, 2026-10-16) */
/* Los de extrafazant (azul, rosa, naranja) eran de su sitio. Aqui: rosa y amarillo del menu (WHP, degradado conico) y el rojo cerillo
   de la seccion roja. Sobre el amarillo el texto va en tinta (#131901), porque blanco sobre #FFD36A no se lee (1.5:1). */
#sec-fazant-diensten{--sys-rosa:#FF0083;--sys-amarillo:#FFD36A;--sys-cerillo:#F54302;--sys-tinta:#131901}
/* 2026-10-23 (Papel picado): la letra de las tres tarjetas en tinta; el blanco chico sobre rosa (3.8:1) y sobre cerillo (3.7:1) no se leia. */
#sec-fazant-diensten .services-cards_item:nth-child(1) .services-card_wrap{background-color:var(--sys-rosa);color:var(--sys-tinta)}
#sec-fazant-diensten .services-cards_item:nth-child(2) .services-card_wrap{background-color:var(--sys-amarillo);color:var(--sys-tinta)}
#sec-fazant-diensten .services-cards_item:nth-child(3) .services-card_wrap{background-color:var(--sys-cerillo);color:var(--sys-tinta)}

/* tarjetas como ligas (2026-10-16): el <a> necesita ser bloque para conservar ancho y alto de la tarjeta */
#sec-fazant-diensten a.services-card{display:block}

/* tarjeta de Doctores con el video de Emilio (2026-10-21, "ponte este video, modifica el aspect ratio para que se vea todo el video de ser
   necesario"): el clip es vertical 9:16 (1080 x 1920) y la caja de las tarjetas es 4:5, asi que solo esa caja toma 9:16 y el video se ve
   completo (object-fit cover ya no recorta porque la caja tiene la misma proporcion). Las otras dos tarjetas siguen en 4:5. */
#sec-fazant-diensten .services-card_media:has(> video.video-card-visual__img) { aspect-ratio: 9 / 16; }