/* v6 / tds-articulos: estilos de la seccion "Nos évènements" de thedesignsociety.fr, tal cual (2026-10-16). Primera parte: las 67
   reglas de su hoja de Webflow (referencias/thedesignsociety/webflow.css) cuyas clases aparecen en el marcado, con el prefijo
   #sec-tds-articulos y sus mismas media queries (991, 767, 479). Segunda parte: las reglas sueltas que su pagina mete en un <style>
   (boton con flecha, apilado de fichas en una celda de grid, fotos con transicion de ancho, barra de tiempo, mascaras del titulo).
   Las variables de tema y el tamano base del cuerpo (14px/20px Arial, de donde salen los em del boton) van en la seccion, medidos en
   vivo a 1440: seccion a 24 px de los bordes, galeria de 40vh (360 px), foto activa 958 px, titulo de ficha 132/140, texto 14/20,
   boton de 57 px. Fondo blanco (2026-10-16, "ponlo blanco"): desde la seccion de la computadora todo va en blanco hasta el velo de
   la roja, para no hacer escalones. */
@font-face{font-family:"Fkrasterromancompact Smooth";src:url("../../assets/v6/fonts/FKRasterRomanCompact-Smooth.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Khinterferencetrial;src:url("../../assets/v6/fonts/KHInterferenceTRIAL-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Khinterferencetrial;src:url("../../assets/v6/fonts/KHInterferenceTRIAL-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Khtekatrial;src:url("../../assets/v6/fonts/KHTekaTRIAL-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
#sec-tds-articulos{--size--m:24px;--size--s:16px;--content:var(--sys-tinta,#131901);--content-white:white;--content-subtle:#5A5753;--brand-color-1:var(--sys-rosa,#FF0083);--brand-color-2:var(--sys-cerillo,#F54302);--background:var(--sys-hueso,#F3F3EF);--background-accent:white;--background-subtle:#f7f7f7;--border:#1d1d1d26;--radius--radius-xs:2px;--radius--radius-s:4px;--radius--radius-m:6px;
  --_theme---content:var(--content);--_theme---content-white:var(--content-white);--_theme---content-subtle:var(--content-subtle);--_theme---brand-color-1:var(--brand-color-1);--_theme---brand-color-2:var(--brand-color-2);--_theme---background:var(--background);--_theme---background-accent:var(--background-accent);--_theme---background-subtle:var(--background-subtle);--_theme---border:var(--border);--_responsive---hero--margin:var(--size--m);
  display:flow-root;position:relative;background:var(--sys-hueso,#F3F3EF);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:14px;line-height:20px;color:var(--content);-webkit-font-smoothing:antialiased}
#sec-tds-articulos *{box-sizing:border-box}
#sec-tds-articulos img{max-width:100%;vertical-align:middle;display:inline-block;border:0}
#sec-tds-articulos a{background-color:transparent}

/* ---------------------------------------------------------------- 1. hoja de Webflow (solo las reglas de estas clases) */
#sec-tds-articulos .w-inline-block{max-width: 100%; display: inline-block;}
#sec-tds-articulos .hero-card-title{grid-column-gap: 6px; flex: 0 auto; justify-content: flex-start; align-items: center; padding-right: 16px; text-decoration: none; display: flex;}
#sec-tds-articulos .dot{background-color: var(--brand-color-1); border-radius: 999px; flex: 0 auto; justify-content: flex-start; align-items: flex-start; width: 8px; height: 8px; text-decoration: none; display: flex;}
#sec-tds-articulos .dot.blue{background-color: var(--_theme---brand-color-2); border-radius: 0;}
#sec-tds-articulos .dot.green{background-color: var(--_theme---brand-color-1); border-radius: 0;}
#sec-tds-articulos .hero-card-caption{color: var(--_theme---content); text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-family: Khinterferencetrial, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 100%; text-decoration: none;}
#sec-tds-articulos .badge-container{flex: 0 auto; justify-content: flex-start; align-items: center; text-decoration: none; display: flex;}
#sec-tds-articulos .badge-container.image-equipe{z-index: 2; position: absolute; top: 16px; left: 16px;}
#sec-tds-articulos .badge-container.image-equipe.event{position: static;}
#sec-tds-articulos .badge-square{grid-column-gap: 10px; background-color: var(--_theme---brand-color-1); border-radius: 2px; flex: 0 auto; justify-content: center; align-items: center; padding: 4px; text-decoration: none; display: flex;}
#sec-tds-articulos .badge-square.green{border-radius: var(--radius--radius-xs);}
#sec-tds-articulos .badge-square.green.event{border-radius: var(--radius--radius-s); background-color: var(--_theme---brand-color-2); padding: 6px;}
#sec-tds-articulos .badge-square.blue{border-radius: var(--radius--radius-xs); background-color: var(--_theme---brand-color-2);}
#sec-tds-articulos .text{color: var(--content); text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-family: Khinterferencetrial, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 100%; text-decoration: none;}
#sec-tds-articulos .text.green{color: var(--content); font-size: 12px;}
#sec-tds-articulos .text.green.event{color: var(--content); font-size: 14px;}
#sec-tds-articulos .text.blue{color: var(--content);}
#sec-tds-articulos .text.event{font-size: 14px;}
#sec-tds-articulos .badge-round{grid-column-gap: 10px; background-color: var(--_theme---brand-color-1); border-radius: 50px; flex: 0 auto; justify-content: center; align-items: center; padding: 4px; text-decoration: none; display: flex;}
#sec-tds-articulos .badge-round.green{border-radius: 999px;}
#sec-tds-articulos .badge-round.green.event{padding: 6px;}
#sec-tds-articulos .badge-round.blue{background-color: var(--_theme---brand-color-2); border-radius: 999px;}
#sec-tds-articulos .title-h2-text{max-width: 1199px; color: var(--_theme---content); font-family: Khtekatrial, Arial, sans-serif; font-size: 3.7vw; font-weight: 400; line-height: 3.4vw; position: relative;}
#sec-tds-articulos .title-h2-text.event{max-width: none; font-family: Fkrasterromancompacttrial Smooth, Arial, sans-serif; font-size: 10vw; font-weight: 400; line-height: 10vw;}
#sec-tds-articulos .title-h2{grid-column-gap: 16px; grid-row-gap: 16px; flex-flow: column; margin-bottom: 60px; display: flex;}
#sec-tds-articulos .title-h2.event{margin-top: 60px; margin-bottom: 28px;}
#sec-tds-articulos .section-6{width: auto; height: auto; margin-top: var(--size--m); margin-right: var(--size--m); margin-left: var(--size--m); grid-column-gap: 32px; grid-row-gap: 32px; flex-flow: column; justify-content: flex-start; align-items: flex-start; padding-bottom: 140px; display: flex;}
#sec-tds-articulos .div-block-15{grid-column-gap: 12px; grid-row-gap: 12px; flex-flow: row; flex: 0 auto; align-self: stretch; width: 100%; height: 40vh; display: flex; position: relative; overflow: hidden;}
#sec-tds-articulos .gallery-slot-img{aspect-ratio: auto; border-radius: var(--radius--radius-s); object-fit: cover; flex: .15 1 0; width: 100%; height: 100%; position: static; overflow: hidden;}
#sec-tds-articulos .event-title{width: auto; max-width: 900px; color: var(--_theme---content); font-family: Fkrasterromancompact Smooth, Arial, sans-serif; font-size: 132px; line-height: 140px;}
#sec-tds-articulos .gallery-slot{opacity: 1; flex: .15 1 0; align-self: auto; width: 100%; overflow: hidden;}
#sec-tds-articulos .gallery-slot.is-active{flex-grow: .7;}
#sec-tds-articulos .event-content-left{grid-column-gap: 24px; grid-row-gap: 24px; flex-flow: column; flex: 1 1 0; display: flex;}
#sec-tds-articulos .event-content-left.event{padding-top: var(--_responsive---hero--margin); padding-left: var(--_responsive---hero--margin);}
#sec-tds-articulos .event-pin-height{grid-column-gap: 40px; grid-row-gap: 40px; flex-flow: column; height: auto; display: flex;}
#sec-tds-articulos .event-content{grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: wrap; order: 0; justify-content: flex-end; align-self: flex-start; align-items: flex-end; width: 100%; display: flex; position: relative;}
#sec-tds-articulos .event-content.is-active{position: relative;}
#sec-tds-articulos .text-block-6{color: var(--_theme---content); text-indent: 60px; font-family: Khtekatrial, Arial, sans-serif; font-weight: 400;}
#sec-tds-articulos .description-container{grid-column-gap: 40px; grid-row-gap: 40px; flex-flow: column; flex: none; justify-content: flex-end; align-items: flex-start; width: 330px; display: flex;}
#sec-tds-articulos .btn-group{grid-column-gap: 3em; grid-row-gap: 3em; justify-content: center; font-size: 1.8em; display: block;}
#sec-tds-articulos .btn-bubble-arrow{border-radius: 10em; justify-content: center; align-items: center; font-family: Khinterferencetrial, Arial, sans-serif; font-size: .6em; text-decoration: none; display: flex; position: relative;}
#sec-tds-articulos .btn-bubble-arrow__arrow{background-color: var(--_theme---brand-color-1); color: var(--content); border-radius: 10em; flex-flow: row; justify-content: center; align-items: center; width: 3.75em; height: 3.75em; display: flex; position: relative;}
#sec-tds-articulos .btn-bubble-arrow__arrow.is--duplicate{z-index: 2; background-color: var(--_theme---brand-color-1); position: absolute; right: 0;}
#sec-tds-articulos .btn-bubble-arrow__arrow-svg{width: 40%;}
#sec-tds-articulos .btn-bubble-arrow__content{border-radius: var(--radius--radius-m); background-color: var(--content); color: var(--sys-crema,#FDF5E9); justify-content: center; align-items: center; height: 3.75em; padding-left: 1.5em; padding-right: 1.5em; display: flex; position: relative;}
#sec-tds-articulos .btn-bubble-arrow__content.event{background-color: var(--content);}
#sec-tds-articulos .btn-bubble-arrow__content-text{color: var(--sys-crema,#FDF5E9); line-height: 1;}
#sec-tds-articulos .event-content-wrapper{width: 100%; position: relative;}
@media screen and (max-width: 991px){
  #sec-tds-articulos .text, #sec-tds-articulos .text.green{font-size: 10px;}
  #sec-tds-articulos .title-h2-text{font-size: 5vw; line-height: 4.5vw;}
  #sec-tds-articulos .event-title{font-size: 110px; line-height: 110px;}
  #sec-tds-articulos .event-content{grid-column-gap: 4vw; grid-row-gap: 4vw;}
}
@media screen and (max-width: 767px){
  #sec-tds-articulos .event-title{font-size: 90px; line-height: 90px;}
  #sec-tds-articulos .event-pin-height{margin-bottom: 0;}
  #sec-tds-articulos .btn-bubble-arrow{font-size: .5em;}
}
@media screen and (max-width: 479px){
  #sec-tds-articulos .dot.blue{background-color: var(--_theme---brand-color-2); border-radius: 0;}
  #sec-tds-articulos .badge-container.image-equipe.event{flex-flow: wrap;}
  #sec-tds-articulos .title-h2-text{font-size: 34px; line-height: 34px; position: relative;}
  #sec-tds-articulos .section-6{padding-bottom: 32px;}
  #sec-tds-articulos .div-block-15{grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: column; flex: 0 auto; height: 32vh;}
  #sec-tds-articulos .event-title{box-sizing: border-box; word-break: break-all; width: 100%; font-size: 68px; line-height: 68px;}
  #sec-tds-articulos .event-content-left{flex-flow: column; flex-grow: 0; align-items: flex-start; width: 100%;}
  #sec-tds-articulos .event-pin-height{grid-column-gap: 32px; grid-row-gap: 32px; width: 100%; margin-bottom: 40px;}
  #sec-tds-articulos .event-content{grid-column-gap: 24px; grid-row-gap: 24px; flex-flow: column;}
  #sec-tds-articulos .event-content.is-active{grid-column-gap: 24px; grid-row-gap: 24px;}
  #sec-tds-articulos .text-block-6{font-size: 13px; line-height: 19px;}
  #sec-tds-articulos .description-container{grid-column-gap: 20px; grid-row-gap: 20px; margin-left: 0; padding-left: 60px;}
}

/* ---------------------------------------------------------------- 2. reglas sueltas del <style> de su pagina */
#sec-tds-articulos .btn-bubble-arrow__content{transition:transform .735s cubic-bezier(.625,.05,0,1);transform:translateX(-3.75em) rotate(.001deg)}
#sec-tds-articulos .btn-bubble-arrow__arrow{transition:transform .735s cubic-bezier(.625,.05,0,1);transform:scale(0) rotate(.001deg);transform-origin:left}
#sec-tds-articulos .btn-bubble-arrow__arrow-svg{transition:transform .735s cubic-bezier(.625,.05,0,1);transform:rotate(.001deg)}
#sec-tds-articulos .btn-bubble-arrow__arrow.is--duplicate{position:absolute;z-index:2;right:0;transform:scale(1) rotate(.001deg);transform-origin:right}
#sec-tds-articulos .btn-bubble-arrow:hover .btn-bubble-arrow__content{transform:translateX(0em) rotate(.001deg)}
#sec-tds-articulos .btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg{transform:rotate(-45deg)}
#sec-tds-articulos .btn-bubble-arrow:hover .btn-bubble-arrow__arrow{transform:scale(1) rotate(.001deg)}
#sec-tds-articulos .btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate{transform:scale(0) rotate(.001deg)}
#sec-tds-articulos .event-content-wrapper{display:grid !important}
#sec-tds-articulos .event-content{grid-area:1 / 1 / 2 / 2;opacity:0;visibility:hidden;pointer-events:none;z-index:1;height:auto !important;min-height:0 !important}
#sec-tds-articulos .event-content.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
#sec-tds-articulos .gallery-slot{position:relative;overflow:hidden;transition:flex-grow .6s cubic-bezier(.7,0,.3,1),opacity .4s ease;cursor:pointer}
#sec-tds-articulos .gallery-slot:not(.is-active){opacity:.6}
#sec-tds-articulos .gallery-slot:hover{opacity:1 !important}
#sec-tds-articulos .description-container{width:340px !important;flex:0 1 auto !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;margin-top:10px !important}
@media screen and (max-width:767px){
  #sec-tds-articulos .description-container{width:100% !important;justify-content:flex-start !important;margin-top:5px !important}
}
#sec-tds-articulos .slot-progress-container{position:absolute;bottom:0;left:0;width:100%;height:6px;background-color:rgba(255,255,255,.2);z-index:10;opacity:0;transition:opacity .3s ease}
#sec-tds-articulos .gallery-slot.is-active .slot-progress-container{opacity:1}
#sec-tds-articulos .slot-progress-fill{height:100%;width:0%;background-color:var(--brand-color-1);transform-origin:left center}
#sec-tds-articulos .line-mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
#sec-tds-articulos .line-inner{display:block;will-change:transform;transform-origin:left bottom;backface-visibility:hidden;transform-style:preserve-3d;-webkit-font-smoothing:subpixel-antialiased}

/* ---------------------------------------------------------------- empalmes en blanco (2026-10-16). flow-root arriba: el margen superior de
   .section-6 (24 px) se colaba fuera de la seccion y dejaba una banda del gris de la pagina bajo el contacto. (Hubo una tira blanca
   ::after de 60vh detras de la seccion roja para el hueco de la cortina; se quito el 2026-10-19 cuando la roja salio del home.) */