/* v6 / tfl-servicios: estilos de la seccion de servicios de thefirstthelast.agency (2026-10-16). 1) fuentes y variables de su sitio (TWK Lausanne 400 y 700 del espejo; --16/--24... son sus medidas en rem fluido, aqui en vw: 16 px a 1440; en celular, en px como ellos); 2) sus 118 reglas para estas clases, con sus media queries (1025 px) y el prefijo #sec-tfl-servicios; 3) nuestros ajustes: fondo del gris de la pagina al blanco (la seccion de la computadora que sigue es blanca), el encabezado largo de Emilio en dos lineas, los cinco titulos al mismo tamaño (15.69 vw, el mayor que usan ellos; nuestros titulos son cortos y llenar el ancho los dejaria sin sitio para la explicacion), la lista en la descripcion (ellos llevan ahi un boton) y, en celular, franjas en vertical en lugar de su tira con scroll lateral. OJO: TWK Lausanne es una fuente con licencia (Weltkern); solo para este prototipo local. */ @font-face{font-family:"TWKLausanne-400";src:url("../../assets/v6/fonts/TWKLausanne-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"TWKLausanne-700";src:url("../../assets/v6/fonts/TWKLausanne-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} #sec-tfl-servicios{--font-400:"TWKLausanne-400";--font-700:"TWKLausanne-700";--color-black:var(--sys-tinta,#131901);--color-white:#fff;--color-pink:var(--sys-rosa,#FF0083);--gradient:linear-gradient(var(--sys-hueso,#F3F3EF),var(--sys-hueso,#F3F3EF));--transition:.5s cubic-bezier(.32,0,.12,1);--transition-fast:.3s cubic-bezier(.32,0,.12,1); --8:.5555556vw;--16:1.1111111vw;--24:1.6666667vw;--48:3.3333333vw;--56:3.8888889vw;--80:5.5555556vw; display:block;position:relative;background:linear-gradient(180deg,var(--sys-hueso,#F3F3EF) 0,var(--sys-hueso,#F3F3EF) 85%,#fff 100%);font-family:var(--font-400);color:var(--color-black);line-height:1;-webkit-font-smoothing:antialiased} @media (max-width:1025px){#sec-tfl-servicios{--8:8px;--16:16px;--24:16px;--48:48px;--56:48px;--80:64px}} #sec-tfl-servicios *{box-sizing:border-box;margin:0;padding:0} #sec-tfl-servicios h2{font-weight:400} /* ---------------------------------------------------------------- 2. hoja de thefirstthelast (solo las reglas de estas clases) */ #sec-tfl-servicios .p1-400, #sec-tfl-servicios .p1-700{font-size:.9722222222vw} @media (max-width:1025px){ #sec-tfl-servicios .p1-400, #sec-tfl-servicios .p1-700{font-size:14px} } #sec-tfl-servicios .p1-700{font-family:var(--font-700)} #sec-tfl-servicios ._container{padding-left:1.1111111111vw;padding-right:1.1111111111vw;width:100%} @media (max-width:1025px){ #sec-tfl-servicios ._container{padding-left:16px;padding-right:16px} } #sec-tfl-servicios ._container-inner{padding-left:3.8888888889vw;padding-right:3.8888888889vw;width:100%} @media (max-width:1025px){ #sec-tfl-servicios ._container-inner{padding-left:16px;padding-right:16px} } #sec-tfl-servicios .should-animate{will-change:transform,opacity} #sec-tfl-servicios .main-services{min-height:100vh;overflow:hidden} #sec-tfl-servicios .main-services__top{padding-bottom:var(--80);padding-top:var(--48);position:relative} @media (max-width:1025px){ #sec-tfl-servicios .main-services__top{padding-bottom:40px;padding-top:56px} } #sec-tfl-servicios .main-services__gradient{background:var(--gradient);inset:0;opacity:.5;position:absolute;transform:rotate(180deg)} #sec-tfl-servicios .main-services__head{display:flex;justify-content:space-between;margin-bottom:var(--56);position:relative;z-index:1} @media (max-width:1025px){ #sec-tfl-servicios .main-services__head{display:none} } #sec-tfl-servicios .main-services__body{position:relative;z-index:1} #sec-tfl-servicios .main-services__head-info{left:calc(50% + var(--8));position:absolute;top:0} #sec-tfl-servicios .main-services__body-title{font-size:9.2361111111vw;letter-spacing:-.04em;white-space:nowrap} @media (max-width:1025px){ #sec-tfl-servicios .main-services__body-title{font-size:52px;line-height:95%;white-space:normal} #sec-tfl-servicios .main-services__bottom-container{height:354px;overflow:hidden;padding-left:0;padding-right:0} } #sec-tfl-servicios .main-services__body-title-tip-1, #sec-tfl-servicios .main-services__body-title-tip-2{position:absolute;z-index:2} #sec-tfl-servicios .main-services__body-title-tip-1{left:8.3333333333vw;top:.6944444444vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__body-title-tip-1{display:none} } #sec-tfl-servicios .main-services__body-title-tip-2{right:2.9166666667vw;top:.6944444444vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__body-title-tip-2{top:43%} } #sec-tfl-servicios .main-services__body-title-wrap{margin-bottom:var(--80);position:relative} @media (max-width:1025px){ #sec-tfl-servicios .main-services__body-title-wrap{margin-bottom:40px} } #sec-tfl-servicios .main-services__body-descr{left:calc(50% + var(--8));position:relative;width:15.3472222222vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__body-descr{left:0;width:100%} } #sec-tfl-servicios .main-services__item{height:30.9722222222vw;perspective:1000px;position:relative} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item{flex:0 0 300px;height:354px;width:300px} #sec-tfl-servicios .main-services__items-wrap{height:354px;overflow:hidden} } #sec-tfl-servicios .main-services__item-content{height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2} #sec-tfl-servicios .main-services__item-wrap:not(:first-child){margin-top:-20.1388888889vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:not(:first-child){margin-top:0} } #sec-tfl-servicios .main-services__item-text{font-family:var(--font-700);letter-spacing:-.04em;line-height:100%;position:relative;text-align:center;transition:var(--transition-fast);z-index:1} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-text{color:var(--color-white);padding-left:12px;padding-right:12px;text-align:left} #sec-tfl-servicios .main-services__head-link{display:none} } #sec-tfl-servicios .main-services__item-text-new{background:#f2fbe0;padding:.1388888889vw .2777777778vw;position:absolute;right:var(--24);top:var(--16)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-text-new{padding:2px 4px} #sec-tfl-servicios .main-services__items-container{display:flex;gap:8px;overflow:auto;padding-bottom:16px;padding-left:16px;padding-right:16px} } #sec-tfl-servicios .main-services__item-bg{inset:0;position:absolute;transform:translateZ(-1.3888888889vw) rotateX(-5deg)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-bg{transform:none} } #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-text{color:rgb(19 25 1 / .7);font-size:9.5833333333vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item{padding-top:var(--16)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-bg{background:var(--sys-rosa,#FF0083)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-bg{background:var(--sys-rosa,#FF0083)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item{padding-top:var(--24)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-trigger-area{height:100%;left:50%;position:absolute;transform:translateX(-50%);width:60%;z-index:3} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-trigger-area{display:none} } #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:9.9305555556vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-bg{background:var(--sys-amarillo,#FFD36A)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-bg{background:var(--sys-amarillo,#FFD36A)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item{padding-top:var(--16)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:14.1666666667vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-bg{background:var(--sys-verde,#0BA13B)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-bg{background:var(--sys-verde,#0BA13B)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:15.6944444444vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-text{color:var(--color-black);font-size:45px} #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-bg{background:var(--sys-lila,#B9B2FD)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-bg{background:var(--sys-lila,#B9B2FD)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item{padding-top:var(--16)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:8.8888888889vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-bg{background:var(--sys-cerillo,#F54302)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-bg{background:var(--sys-cerillo,#F54302)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item{padding-top:var(--24)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:7.9861111111vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-bg{background:var(--sys-amarillo,#FFD36A)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-bg{background:var(--sys-amarillo,#FFD36A)} } #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item{padding-top:var(--24)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item{padding-top:25px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-text{color:rgb(19 25 1 / .7);font-size:8.4722222222vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-text{color:var(--color-black);font-size:45px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-bg{background:var(--sys-lila,#B9B2FD)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-bg{background:var(--sys-lila,#B9B2FD)} } #sec-tfl-servicios .main-services__item-count{position:absolute;top:var(--16)} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-count{display:none} } #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-count{left:28.8194444444vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:first-child .main-services__item-count{left:16px} } #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-count{right:34.7222222222vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(2) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-count{right:51.0416666667vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(3) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-count{right:1.6666666667vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(4) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-count{right:38.6805555556vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(5) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-count{right:26.3194444444vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(6) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-count{right:1.875vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-wrap:nth-child(7) .main-services__item-count{left:16px;right:auto} } #sec-tfl-servicios .main-services__bottom{position:relative;z-index:1} #sec-tfl-servicios .main-services__foot{align-items:center;bottom:7.6388888889vw;display:flex;flex-direction:column;left:50%;position:absolute;transform:translateX(-50%);z-index:2} @media (max-width:1025px){ #sec-tfl-servicios .main-services__foot{margin-left:auto;margin-right:auto;margin-top:85px;max-width:343px;position:static;transform:none;width:100%} } #sec-tfl-servicios .main-services__foot-text{margin-top:var(--24);max-width:25.2083333333vw;text-align:center} @media (max-width:1025px){ #sec-tfl-servicios .main-services__foot-text{max-width:none} } @media (hover:hover){ #sec-tfl-servicios .main-services__item-wrap .main-services__item:hover .main-services__item-text{color:var(--color-black)} #sec-tfl-servicios .main-services__item-wrap .main-services__item:hover .main-services__item-descr{opacity:1} #sec-tfl-servicios .main-services__item-wrap .main-services__item-trigger-area:hover~.main-services__item-content .main-services__item-text{color:var(--color-black)} } #sec-tfl-servicios .main-services__item-descr{align-items:flex-end;bottom:6.9444444444vw;display:flex;justify-content:space-between;left:59%;opacity:0;position:absolute;transition:var(--transition);width:37.5vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-descr{display:block;left:0;opacity:1;padding-left:16px;padding-right:16px;width:100%} } #sec-tfl-servicios .main-services__item-descr-text{flex:0 0 14.0277777778vw;text-indent:1.3888888889vw} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-descr-text{flex:0 0 100%;margin-bottom:16px;text-indent:0} } @media (max-width:1025px){ } #sec-tfl-servicios .main-services__gradient{background:var(--gradient);top:0;right:0;bottom:0;left:0;opacity:.5;position:absolute;transform:rotate(180deg)} @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } #sec-tfl-servicios .main-services__item-bg{top:0;right:0;bottom:0;left:0;position:absolute;transform:translateZ(-1.3888888889vw) rotateX(-5deg)} @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } #sec-tfl-servicios .main-services__item-trigger-area{height:100%;left:50%;position:absolute;transform:translate(-50%);width:60%;z-index:3} @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } @media (max-width:1025px){ } #sec-tfl-servicios .main-services__foot{align-items:center;bottom:7.6388888889vw;display:flex;flex-direction:column;left:50%;position:absolute;transform:translate(-50%);z-index:2} @media (max-width:1025px){ } @media (max-width:1025px){ } @media (hover:hover){ } @media (max-width:1025px){ } @media (max-width:1025px){ } /* ---------------------------------------------------------------- 3. ajustes nuestros */ #sec-tfl-servicios .main-services__body-title{white-space:normal;font-family:var(--font-700);font-size:6.2vw;line-height:.95;letter-spacing:-.04em} @media (max-width:1025px){#sec-tfl-servicios .main-services__body-title{font-size:40px;line-height:.95}#sec-tfl-servicios .main-services__body-title br{display:none}} #sec-tfl-servicios .main-services__item-wrap:nth-child(n) .main-services__item-text{font-size:15.6944444vw} @media (max-width:1025px){#sec-tfl-servicios .main-services__item-wrap:nth-child(n) .main-services__item-text{font-size:45px}} #sec-tfl-servicios .main-services__item-descr{line-height:1.3} #sec-tfl-servicios .main-services__item-descr-list{flex:0 0 19vw;list-style:none;margin:0;padding:0} #sec-tfl-servicios .main-services__item-descr-list li{margin:0;padding:0} @media (max-width:1025px){ #sec-tfl-servicios .main-services__items-container{display:block;overflow:visible;padding:0 16px 16px} #sec-tfl-servicios .main-services__items-wrap,#sec-tfl-servicios .main-services__bottom-container{height:auto;overflow:visible} #sec-tfl-servicios .main-services__item-wrap{margin-top:0} #sec-tfl-servicios .main-services__item-wrap + .main-services__item-wrap{margin-top:8px} #sec-tfl-servicios .main-services__item{width:100%;flex:none;height:auto;padding:25px 0 24px} #sec-tfl-servicios .main-services__item-text{text-align:left;padding:0 12px 16px} #sec-tfl-servicios .main-services__item-descr{position:static;display:block;opacity:1;width:100%;padding:0 12px} #sec-tfl-servicios .main-services__item-descr-text{flex:none;text-indent:0;margin-bottom:12px} #sec-tfl-servicios .main-services__item-descr-list{flex:none} } @media (max-width:1025px){#sec-tfl-servicios .main-services__item-bg{transform:none}} /* fondo plano en celular, como ellos (refuerzo por si el orden de reglas lo pisa) */ #sec-tfl-servicios .main-services__item-descr{bottom:4.5vw} /* descripcion un poco mas abajo que la de ellos (6.94vw): nuestra lista es mas alta y rozaba el titulo */ /* ---------------------------------------------------------------- aire con los sectores (Emilio, 2026-10-16: "dale un poco de espacio entre las secciones de los 3 sectores y la otra seccion") */ #sec-tfl-servicios{padding-top:clamp(72px, 8vw, 128px)} /* ---------------------------------------------------------------- explicacion y lista con jerarquia (Emilio, 2026-10-16: "hay que diferenciar del texto normal a la lista de lo que involucra, incluso ponemos maybe viñetas, y juega con el texto"). Explicacion en 400 un poco mas grande; lista en 700 con viñeta y un eyebrow "Incluye"; el bloque sube un poco (bottom) para que las listas de 7 renglones no queden bajo la franja siguiente al levantarse. */ @media (min-width:1026px){ /* solo escritorio: en celular mandan las reglas de abajo (antes el width:41vw se colaba al celular) */ #sec-tfl-servicios .main-services__item-descr{left:56%;width:41vw;bottom:3.3vw;align-items:flex-end} #sec-tfl-servicios .main-services__item-descr-text{flex:0 0 19vw;font-size:1.15vw;line-height:1.3;text-indent:1.39vw} #sec-tfl-servicios .main-services__item-descr-list{flex:0 0 19vw;font-size:.97vw;line-height:1.22} #sec-tfl-servicios .main-services__item-descr-list::before{font-size:.76vw;margin-bottom:.25vw} #sec-tfl-servicios .main-services__item-descr-list li{padding-left:1.1vw} #sec-tfl-servicios .main-services__item-descr-list li::before{top:.52em;width:.38vw;height:.38vw} } #sec-tfl-servicios .main-services__item-descr-list{font-family:var(--font-700)} #sec-tfl-servicios .main-services__item-descr-list::before{content:"Incluye";display:block;font-family:var(--font-400);letter-spacing:.08em;text-transform:uppercase} /* sin la opacidad .55 del original: sobre los colores de la tira no se leia (2026-10-23) */ #sec-tfl-servicios .main-services__item-descr-list li{position:relative} #sec-tfl-servicios .main-services__item-descr-list li::before{content:"";position:absolute;left:0;top:.52em;background:currentColor;border-radius:1px} @media (max-width:1025px){ #sec-tfl-servicios .main-services__item-descr-text{flex:none;font-size:16px;line-height:1.35;text-indent:0} #sec-tfl-servicios .main-services__item-descr-list{flex:none;font-size:14px;line-height:1.5} #sec-tfl-servicios .main-services__item-descr-list::before{font-size:11px;margin-bottom:6px} #sec-tfl-servicios .main-services__item-descr-list li{padding-left:14px} #sec-tfl-servicios .main-services__item-descr-list li::before{width:5px;height:5px} } /* ---------------------------------------------------------------- Papel picado (Emilio, 2026-10-23): las franjas llevan los colores de la tira (rosa, amarillo, verde, lila, cerillo) sobre el hueso de la seccion; el nombre del servicio cerrado va en tinta al 70 % (fantasma; al 45 % no se leia sobre los colores de la tira) y abierto en tinta plena; en celular el nombre va en tinta. La etiqueta Incluye en tinta plena. */ /* ---------------------------------------------------------------- franja abierta por el scroll (Emilio, 2026-10-19: "que se abran con scroll down automaticamente una por una"): .is-open hace lo mismo que el :hover del original (titulo en negro, explicacion visible). Solo en el acomodo de escritorio; en celular todo esta visible siempre. La transicion del color y de la opacidad es la de ellos (--transition-fast / --transition). */ @media (min-width:1026px){ #sec-tfl-servicios .main-services__item-wrap .main-services__item.is-open .main-services__item-text{color:var(--color-black)} #sec-tfl-servicios .main-services__item-wrap .main-services__item.is-open .main-services__item-descr{opacity:1} }