/* Theme Name: TacticLab Child Theme URI: https://tacticlab.net Description: Tema hijo de Hello Biz para TacticLab. Ruta "Campo Vivo": retícula reactiva, scroll anclado con position:sticky y tipografía ajustada a ancho. El home se construye aquí; las interiores usan plantillas propias del tema y sólo el formulario de contacto va en Elementor Pro. Author: Nexo Creativo CR Author URI: https://nexocreativocr.com Template: hello-biz Version: 3.35.0 Text Domain: tacticlab-child */ /* ============================================================ 1. FUENTES — Aloevera Sans autoalojada ============================================================ */ @font-face{font-family:'Aloevera Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/aloevera-400.woff2') format('woff2')} @font-face{font-family:'Aloevera Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/aloevera-500.woff2') format('woff2')} @font-face{font-family:'Aloevera Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/aloevera-600.woff2') format('woff2')} @font-face{font-family:'Aloevera Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/aloevera-700.woff2') format('woff2')} @font-face{font-family:'Aloevera Sans';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/aloevera-900.woff2') format('woff2')} /* ============================================================ 2. TOKENS — espejo de los Colores Globales de Elementor ============================================================ */ :root{ --tl-ink:#050505; --tl-ink-2:#0A0B0C; --tl-ink-3:#101214; --tl-line:rgba(255,255,255,.13); --tl-line-2:rgba(255,255,255,.22); --tl-paper:#FBFBFB; /* Escala de texto: t1 es el blanco pleno, t2 y t3 los dos grises. --tl-t1 faltaba y cinco reglas la usaban: una variable que no existe hace que la declaracion entera se descarte en silencio, asi que esos hovers no hacian nada en absoluto. */ --tl-white:#FFFFFF; --tl-t1:#FFFFFF; --tl-t2:rgba(255,255,255,.62); --tl-t3:rgba(255,255,255,.34); /* REGLA DE HOVER DEL SITIO — leer antes de escribir un boton nuevo. Nada se pone blanco al pasar el cursor. El hover es el acento: fondo --tl-teal-lo, borde --tl-teal donde haya borde, texto blanco. Es lo que hace el menu del encabezado desde la fase 1 y lo que el cliente ha pedido dos veces. */ --tl-teal:#30B4BE; --tl-teal-lo:#1B7F87; --tl-violet:#69569F; --tl-violet-lift:#8F7FC4; --tl-sans:'Aloevera Sans','Futura','Century Gothic',system-ui,sans-serif; --tl-serif:'Neruda',Georgia,serif; --tl-gut:clamp(18px,3vw,46px); --tl-rail:0px; --tl-padL:calc(var(--tl-gut) + var(--tl-rail)); --tl-ease:cubic-bezier(.22,.61,.36,1); --tl-verb:clamp(2.4rem,8.4vw,7rem); --tl-claim:clamp(2.4rem,7.4vw,6.2rem); color-scheme:dark; } /* El anclaje de scroll, el riel lateral y el calculo de tipografia por altura de ventana forman un solo modo, y ese modo pide pantalla APAISADA, no solo ancha. Una tableta en vertical mide 834x1112: pasaba el filtro de 900px de ancho y se llevaba el modo escritorio entero. El resultado era el peor de los dos mundos: los verbos se calculan con la altura de ventana —1112px de alto daban una palabra de 161px— mientras los parrafos, que van por vw sobre 834px de ancho, caian a su minimo. Y con .tl-pin a 100svh sobre un contenido corto, cada fase dejaba medio metro de vacio debajo. Con min-aspect-ratio:1/1 una tableta en vertical se comporta como un telefono grande —flujo normal, sin scroll retenido, que en tactil ademas se agradece— y al girarla recupera el modo completo. */ @media(min-width:900px) and (min-aspect-ratio:1/1){ :root{ --tl-rail:78px } } html{overflow-x:clip;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} body{background:var(--tl-ink);color:var(--tl-white);font-family:var(--tl-sans);line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased} body a{text-decoration:none;color:inherit} h1,h2,h3,h4{font-family:var(--tl-sans);text-wrap:balance;letter-spacing:-.03em;line-height:1;margin:0} ::selection{background:var(--tl-teal);color:#042326} :focus-visible{outline:1px solid var(--tl-teal);outline-offset:4px} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Enlace de salto y texto solo para lectores de pantalla */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link:focus{position:fixed!important;top:10px;left:10px;width:auto;height:auto;clip:auto; z-index:200;background:var(--tl-teal);color:#042326;padding:12px 18px;border-radius:2px; font-size:12px;letter-spacing:.12em;text-transform:uppercase} /* ============================================================ 3. CHROME DEL SITIO — raíl, barra móvil, overlay Presentes en todas las páginas, también las de Elementor. ============================================================ */ #tl-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .tl-stage{position:relative;z-index:1} .tl-rail{position:fixed;left:0;top:0;bottom:0;width:var(--tl-rail);z-index:60;display:none; flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0 20px; border-right:1px solid var(--tl-line);background:rgba(5,5,5,.55);backdrop-filter:blur(8px)} @media(min-width:900px) and (min-aspect-ratio:1/1){.tl-rail{display:flex}} .tl-rail-spark{width:15px;flex:none} .tl-rail-nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(22px,4vh,46px);position:relative;width:100%} /* 13px y no 11.5: en vertical y en mayusculas, cada letra se lee aislada y el ojo no puede apoyarse en la forma de la palabra, asi que necesita mas cuerpo que el mismo texto en horizontal. */ .tl-rail-link{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;letter-spacing:.2em; text-transform:uppercase;font-weight:500;color:var(--tl-t3);background:none;border:0;cursor:pointer; padding:6px 0;transition:color .3s var(--tl-ease);font-family:inherit} .tl-rail-link:hover{color:var(--tl-white)} .tl-rail-link.is-on{color:var(--tl-teal)} #tl-rail-progress{position:absolute;left:calc(50% - 14px);top:0;bottom:0;width:1px;background:rgba(255,255,255,.1)} #tl-rail-progress i{display:block;width:100%;height:0;background:var(--tl-teal);box-shadow:0 0 7px rgba(48,180,190,.7)} .tl-rail-foot{display:flex;flex-direction:column;align-items:center;gap:14px} .tl-rail-cta{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--tl-teal);font-weight:600} .tl-rail-dot{width:5px;height:5px;border-radius:50%;background:var(--tl-teal);box-shadow:0 0 10px var(--tl-teal)} /* Fondo solido, no degradado. El degradado se desvanecia a transparente en su mitad inferior, asi que el titular del hero —que arranca justo debajo— se leia a traves del logo y del boton de menu. Sobre un fondo casi negro un velo translucido no separa nada: hace falta una barra. */ .tl-topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between; gap:14px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--tl-gut) 12px; background:rgba(5,5,5,.97);border-bottom:1px solid var(--tl-line)} @media(min-width:900px) and (min-aspect-ratio:1/1){.tl-topbar{display:none}} .tl-topbar img{width:104px;display:block} #tl-menu{background:none;border:1px solid var(--tl-line);border-radius:2px;color:var(--tl-white); font-family:inherit;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;cursor:pointer} /* `justify-content:center` con `overflow:auto` recorta el principio de la lista cuando no cabe, asi que el centrado pasa a `margin:auto` sobre los hijos, que si respeta el scroll. El hueco de arriba deja sitio al boton de cerrar, que va absoluto. */ .tl-overlay{position:fixed;inset:0;z-index:70;background:var(--tl-ink);display:flex;flex-direction:column; gap:6px;padding:calc(64px + env(safe-area-inset-top,0px)) var(--tl-gut) calc(24px + env(safe-area-inset-bottom,0px)); overflow-y:auto;overscroll-behavior:contain; transform:translateY(-101%);transition:transform .5s var(--tl-ease)} .tl-overlay>:first-child~a{margin-block:0} .tl-overlay a:first-of-type{margin-top:auto} .tl-overlay a:last-of-type{margin-bottom:auto} .tl-overlay.is-open{transform:none} /* Estaba en clamp(2rem,10vw,3.4rem): en un telefono de 390px eso son 39px por item, y con siete items mas el CTA la lista no cabia en pantalla y "Agendá una reunión" partia en dos lineas. A 5.4vw son 21px, que sigue teniendo presencia de menu principal y entra entero. */ .tl-overlay a,.tl-overlay button{background:none;border:0;color:var(--tl-white);font-family:inherit; font-size:clamp(1.15rem,5.4vw,2.4rem);font-weight:500;letter-spacing:-.03em;text-transform:uppercase; text-align:left;padding:11px 0;border-bottom:1px solid var(--tl-line);cursor:pointer;display:block; line-height:1.12} /* Mismo gesto en el menu movil, a su escala. */ .tl-overlay a{transition:background-color .2s var(--tl-ease),color .2s var(--tl-ease), padding-left .24s var(--tl-ease)} .tl-overlay a:hover,.tl-overlay a:focus-visible{ background-color:var(--tl-teal-lo);color:var(--tl-white);padding-left:14px} .tl-overlay-cta{color:var(--tl-teal)!important} .tl-overlay-cta:hover,.tl-overlay-cta:focus-visible{color:var(--tl-white)!important} #tl-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:var(--tl-gut); font-size:11px!important;letter-spacing:.2em!important;border:1px solid var(--tl-line)!important; border-radius:2px;padding:8px 13px!important;width:auto;text-transform:uppercase} /* ============================================================ 4. ÁTOMOS ============================================================ */ /* Base: etiquetas de apoyo (pistas, metadatos de tarjeta). Se quedan chicas. */ /* .tl-eyebrow se usa en y en

: el reset evita que el navegador le meta cuerpo y margen de encabezado al segundo. */ h2.tl-eyebrow{margin:0} .tl-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tl-t3);font-weight:500;display:block} /* Modificador turquesa: son los subtitulos de seccion, no una pista al margen. Tienen que leerse como el escalon superior de la jerarquia, asi que suben de cuerpo y de peso. El tracking baja un punto: a este tamano .24em abre demasiado la palabra. */ .tl-eyebrow--teal{color:var(--tl-teal);font-size:clamp(12px,.95vw,15px); letter-spacing:.2em;font-weight:600} .tl-lead{font-size:clamp(1rem,1.25vw,1.24rem);line-height:1.55;color:var(--tl-t2);max-width:54ch} .tl-sec{padding-inline:var(--tl-padL) var(--tl-gut)} .tl-fit-wrap{width:100%} .tl-fit{display:block;width:-moz-max-content;width:max-content;max-width:none;white-space:nowrap; font-weight:500;letter-spacing:-.035em;line-height:.86;text-transform:uppercase;font-size:clamp(2rem,7vw,5rem)} /* El titular sigue ajustandose al ancho, pero sobre un contenedor mas angosto: baja el cuerpo sin romper el gesto de bloque a sangre. 84% ~= 12 puntos menos de cuerpo que a ancho completo. */ /* El tamano del titular NO se fija aqui: lo calcula fitBlock() ajustando cada linea al ancho de este contenedor. Este porcentaje ES el control de tamano del hero. Bajo de 84% a 75% para que el titular respire y deje de competir con la bajada. */ /* El titular es ahora un

. Hay que anular el margen y el cuerpo que le pone el navegador: el tamano real lo calcula fitBlock(). */ h1.tl-fit-wrap{margin:0;font-weight:inherit;font-size:inherit;line-height:inherit} #tl-hero .tl-fit-wrap{max-width:60%} @media(max-width:1400px){ #tl-hero .tl-fit-wrap{max-width:70%} } @media(max-width:1200px){ #tl-hero .tl-fit-wrap{max-width:80%} } @media(max-width:899px){ #tl-hero .tl-fit-wrap{max-width:100%} } /* La bajada sube de cuerpo: con el titular mas chico, el parrafo pasa de ser un pie a ser la segunda voz del bloque. */ #tl-hero .tl-lead{font-size:clamp(1.08rem,1.6vw,1.5rem);line-height:1.5;max-width:56ch; color:rgba(255,255,255,.76)} .tl-hero-top{display:block} /* ------------------------------------------------------------ LOGO DEL HERO — entrada de trazo (propuesta 02) ------------------------------------------------------------ Estado de reposo: relleno blanco, sin trazo. Si el JS no corre, si el visitante pide menos movimiento o si la animacion ya termino, el logo se ve exactamente igual. La animacion es una mejora, nunca la condicion para que la marca sea visible. ------------------------------------------------------------ */ .tl-logo-svg{display:block;width:100%;height:auto;overflow:visible} /* Doble clase a proposito: `.tl-logo-svg` lleva width:100% para poder reutilizar el SVG dentro de cualquier caja, y con una sola clase le ganaba al tamano del hero por orden de cascada. */ /* El logo gana presencia: el titular bajo de cuerpo y el logo tenia que subir para que el bloque no se descompensara. Va con su propio margen inferior, proporcional al ancho, para que la distancia al titular acompane al tamano en vez de quedarse fija. */ .tl-logo-svg.tl-hero-logo{display:block;width:clamp(172px,19.5vw,330px);height:auto; margin-bottom:clamp(10px,1.1vw,20px)} .tl-logo-svg path{fill:var(--tl-white);stroke:none} /* El trazo se dibuja solo cuando el JS anade .is-draw. non-scaling-stroke va en el marcado: el grupo esta escalado 0.033 y sin eso el grosor seria invisible. */ .tl-logo-svg.is-draw path{ fill:rgba(255,255,255,0); stroke:var(--tl-teal); stroke-width:1.15; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; /* Escalonado LETRA A LETRA, no por bloque. Con un retraso por grupo las seis letras de TACTIC se dibujaban a la vez y el efecto se leia como una aparicion, no como una escritura. --i lo pone el SVG en orden de lectura. */ --d:calc(var(--i,0) * 42ms); animation:tl-draw .52s var(--tl-ease) var(--d) forwards, tl-fill .38s var(--tl-ease) calc(var(--d) + .30s) forwards, tl-unstroke .42s var(--tl-ease) calc(var(--d) + .36s) forwards} @keyframes tl-draw{to{stroke-dashoffset:0}} @keyframes tl-fill{to{fill:rgba(255,255,255,1)}} @keyframes tl-unstroke{to{stroke-opacity:0}} @media(prefers-reduced-motion:reduce){ .tl-logo-svg.is-draw path{ fill:var(--tl-white);stroke:none;stroke-dashoffset:0;animation:none} } .tl-boxed{position:relative;display:inline-block;padding-inline:.06em;isolation:isolate} .tl-boxed-bg{position:absolute;left:0;top:.07em;right:0;bottom:.09em;background:var(--tl-teal); transform:scaleX(0);transform-origin:left;z-index:-1} .tl-boxed-tx{position:relative;transition:color .25s linear} .tl-boxed.is-lit .tl-boxed-tx{color:#042326} /* ============================================================ 5. HOME El anclaje es position:sticky, no una librería. Ver §7. ============================================================ */ #tl-hero{min-height:92svh;display:flex;flex-direction:column;justify-content:center; gap:clamp(20px,3vw,40px);padding-block:clamp(96px,13vh,150px) clamp(40px,7vh,90px)} .tl-hero-sub{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:flex-end; justify-content:space-between;margin-top:clamp(8px,1.6vw,18px)} .tl-cue{display:flex;align-items:center;gap:10px;color:var(--tl-t3);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase} /* El trazo del cue corre en el mismo eje que el scroll: la pagina se lee hacia abajo, asi que el degradado y el recorrido giran 90 grados. Misma duracion, misma curva, mismo desvanecido en los extremos. */ .tl-cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--tl-teal),transparent);animation:tl-cue 2.4s var(--tl-ease) infinite} @keyframes tl-cue{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}} .tl-track{position:relative} .tl-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center} #tl-verbs{height:320svh} .tl-verbs-pin{gap:clamp(14px,2.4vw,26px);padding-inline:var(--tl-padL) var(--tl-gut); align-items:center;text-align:center} /* El alto lo fija el JS a partir del cuerpo real (ver tl-home.js). var(--tl-verb) es solo el respaldo para movil y para JS desactivado. */ .tl-verb-stack{position:relative;width:100%;height:calc(var(--tl-verb) * .95); margin-block:clamp(10px,2vw,26px)} .tl-verb .tl-fit{font-size:var(--tl-verb)} .tl-verb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} /* width:100% es obligatorio: el padre es flex con align-items:center, asi que sin esto el contenedor se encoge al ancho de su contenido — y su unico hijo esta en position:absolute, o sea que ese ancho es cero. */ .tl-verb-glosses{position:relative;width:100%;height:clamp(58px,7vw,76px)} /* Sin max-width: con el ancho completo la frase entra de una sola linea en escritorio en vez de cortarse en dos. El alto del contenedor lo calcula el JS a partir del parrafo mas largo (ver tl-home.js, autoHeight). */ .tl-verb-gloss{position:absolute;inset:0;color:var(--tl-t2); font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.5;max-width:100%} /* ------------------------------------------------------------ 03 · EL TRABAJO — mosaico fijo ------------------------------------------------------------ Antes era una cinta horizontal anclada durante 3.4 pantallas de scroll. El cliente lo dijo sin rodeos: el que no insiste ve tres marcas y sigue de largo. Ahora las ocho entran de una vez en una rejilla de cuatro por dos, la seccion mide lo que mide su contenido y el scroll de la pagina vuelve a ser uno solo. Al desaparecer #tl-work-rail, el tramo de tl-home.js que lo movia se apaga solo: empieza con `if (!sec || !rail) return`. ------------------------------------------------------------ */ #tl-work{height:auto} .tl-work-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap; padding-bottom:clamp(12px,1.4vw,18px);margin-bottom:clamp(14px,2vw,24px); border-bottom:1px solid var(--tl-line)} .tl-work-all{color:var(--tl-t3);transition:color .3s var(--tl-ease)} .tl-work-all:hover,.tl-work-all:focus-visible{color:var(--tl-teal)} .tl-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)} @media(max-width:1100px){.tl-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){ .tl-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))} /* A dos columnas el KPI no cabe en una linea y la elipsis se comia el numero, que es justo lo que hay que leer. Se le dan dos lineas y la placa cede el alto. */ .tl-cell-plate{bottom:46px} .tl-cell-k{white-space:normal;line-height:1.3;max-height:2.6em;overflow:hidden} } .tl-cell{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden; border:1px solid var(--tl-line);background:var(--tl-ink-2); transition:border-color .32s var(--tl-ease),background .32s var(--tl-ease)} .tl-cell:hover,.tl-cell:focus-visible{border-color:rgba(48,180,190,.45); background:linear-gradient(160deg,var(--tl-c1,#16181a),#0a0b0c)} .tl-cell--empty::after{content:"";position:absolute;inset:0; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 11px)} /* ------------------------------------------------------------ MURO DE MARCAS — monocromo Los ocho logos se normalizaron a transparente y se pintan en blanco (img/marcas/-w.svg, con el PNG de respaldo). Es lo que hace cualquier muro de clientes que funcione: ocho marcas con colores, pesos y proporciones incompatibles pasan a leerse como una sola familia. Se pierde el color de cada marca; a cambio deja de haber ocho rectangulos blancos perforando el negro. La placa clara sigue viva como RESPALDO para una marca nueva que el cliente agregue sin logo tratado: un JPG con fondo blanco sobre el negro se ve peor que una placa. Por eso el monocromo es un modificador (.is-mono) y no el estado base. El .6 de reposo no es decoracion: con ocho logos a plena opacidad la rejilla compite con el titular de la seccion. Al pasar el mouse sube a 1. ------------------------------------------------------------ */ .tl-cell-plate{position:absolute;left:0;right:0;top:0;bottom:30px} .tl-cell-plate.is-paper{background:var(--tl-paper);border-radius:10px; left:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px);top:clamp(12px,1.4vw,18px);bottom:34px} .tl-cell-plate.is-paper img{width:100%;height:100%;object-fit:contain; padding:clamp(12px,1.6vw,22px);box-sizing:border-box} /* Posicion absoluta con inset:0, y el aire como padding de la propia imagen. Conviene dejar escrito por que, porque es un punto que ya mordio tres veces: al anadir width y height al por el CLS, el navegador le calcula una relacion de aspecto implicita. Dentro de un grid, `height:100%` no tiene contra que resolverse, gana esa relacion, y los dos logos cuadrados —Panini 414x414, San Miguel 435x420— se salian por abajo. Ni max-height:100% ni align-self:stretch lo arreglan, porque el problema es el porcentaje indefinido, no la alineacion. Con inset:0 las dos dimensiones quedan fijadas por el bloque contenedor, la relacion implicita no puede ganar, y object-fit respeta el padding del propio elemento. */ .tl-cell-plate.is-mono img{position:absolute;inset:0;width:100%;height:100%; padding:clamp(16px,2.2vw,30px);box-sizing:border-box;object-fit:contain;opacity:.6; transition:opacity .3s var(--tl-ease),transform .35s var(--tl-ease)} .tl-cell:hover .tl-cell-plate.is-mono img, .tl-cell:focus-visible .tl-cell-plate.is-mono img{opacity:1;transform:scale(1.03)} /* El KPI vive en la franja oscura de abajo, nunca sobre la placa clara: turquesa sobre blanco da 2.4:1 y no pasa contraste. */ .tl-cell-k{position:absolute;left:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px); bottom:clamp(9px,1.1vw,13px);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--tl-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .3s var(--tl-ease)} .tl-cell:hover .tl-cell-k,.tl-cell:focus-visible .tl-cell-k{color:var(--tl-teal)} #tl-method{height:560svh} .tl-method-pin{gap:clamp(18px,3vw,34px);padding-inline:var(--tl-padL) var(--tl-gut)} .tl-orbit{position:relative;width:100%;max-width:none;height:clamp(44px,5vw,58px)} .tl-orbit-rail{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18)} .tl-orbit-rail i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--tl-teal)} .tl-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%; background:var(--tl-ink);border:1px solid rgba(255,255,255,.3);transition:background-color .35s var(--tl-ease),border-color .35s var(--tl-ease),box-shadow .35s var(--tl-ease)} .tl-node.is-on{background:var(--tl-teal);border-color:var(--tl-teal);box-shadow:0 0 0 6px rgba(48,180,190,.16)} .tl-node em{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-style:normal; font-size:9.5px;letter-spacing:.12em;color:var(--tl-t3);white-space:nowrap} .tl-node.is-on em{color:var(--tl-teal)} .tl-phases{position:relative;min-height:clamp(140px,17vw,200px)} .tl-phase{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;opacity:0; transition:opacity .35s ease, transform .35s ease} .tl-phase.is-on{opacity:1} .tl-phase h3{font-size:clamp(1.7rem,3.6vw,3.1rem);font-weight:500;letter-spacing:-.035em;text-transform:uppercase} .tl-phase p{color:var(--tl-t2);font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.6;max-width:56ch;margin:0} /* Mismo escalon que los subtitulos de seccion: es la etiqueta que cierra cada fase, no una nota al pie. Aplica a las seis fases por la clase compartida. */ .tl-phase-del{font-size:clamp(12px,.95vw,15px);letter-spacing:.14em;font-weight:600; text-transform:uppercase;color:var(--tl-teal); border-left:2px solid var(--tl-teal);padding-left:14px;justify-self:start} @media(min-width:1000px){ /* align-content:start evita que las filas se repartan el alto sobrante del contenedor y dejen el entregable flotando lejos de su parrafo. */ .tl-phase{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:0 clamp(32px,5vw,90px);align-items:start;align-content:start} .tl-phase h3{grid-column:1;grid-row:1 / span 2} .tl-phase p{grid-column:2;grid-row:1;max-width:64ch} .tl-phase-del{grid-column:2;grid-row:2;margin-top:16px} } .tl-claim{min-height:88svh;display:flex;flex-direction:column;justify-content:center; align-items:center;text-align:center;gap:clamp(16px,2.4vw,30px);position:relative;overflow:hidden} .tl-claim .tl-fit{font-size:var(--tl-claim)} .tl-claim .tl-lead{margin-inline:auto;max-width:64ch} .tl-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(58vw,520px);aspect-ratio:1; border-radius:50%;border:1px solid rgba(255,255,255,.13);pointer-events:none} .tl-ring::before,.tl-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.09)} .tl-ring::before{scale:.62 1} .tl-ring::after{scale:1 .38} .tl-ring i{position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--tl-teal); margin-left:-3.5px;box-shadow:0 0 12px var(--tl-teal)} .tl-claim-big{position:relative;z-index:2;width:100%;display:flex;justify-content:center} .tl-figs{position:relative;z-index:2;width:100%;display:flex;flex-wrap:wrap; justify-content:space-between;gap:clamp(18px,3vw,40px);margin-top:clamp(10px,2vw,24px)} .tl-figs div{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 1 140px} .tl-figs b{font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .tl-figs span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tl-t3)} #tl-voice{min-height:78svh;display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;gap:clamp(20px,3vw,34px);padding-block:clamp(60px,9vw,120px)} /* Sin max-width estrecho: la cita usa el ancho completo y entra en una o dos lineas en vez de partirse en seis. text-wrap:balance reparte parejo cuando si tiene que envolver. */ #tl-voice blockquote{margin:0;max-width:100%} #tl-voice blockquote p{font-family:var(--tl-serif);font-size:clamp(1.45rem,3.4vw,3.1rem); line-height:1.22;letter-spacing:-.015em;margin:0;text-wrap:balance} #tl-voice cite{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-t3)} /* ============================================================ 6. CIERRE — marquesina y pie ============================================================ */ .tl-marquee{position:relative;z-index:2;border-block:1px solid var(--tl-line);overflow:hidden; padding-block:clamp(26px,4vw,52px);display:block;cursor:pointer} .tl-marquee-run{display:flex;width:max-content;animation:tl-run 26s linear infinite} .tl-marquee:hover .tl-marquee-run{animation-play-state:paused} @keyframes tl-run{to{transform:translateX(-50%)}} .tl-marquee-run span{font-size:clamp(2.6rem,9vw,8rem);font-weight:600;letter-spacing:-.04em;text-transform:uppercase; line-height:1;white-space:nowrap;padding-inline:.18em;color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.55);transition:opacity .35s var(--tl-ease),transform .35s var(--tl-ease)} .tl-marquee:hover .tl-marquee-run span{color:var(--tl-teal);-webkit-text-stroke:1.2px var(--tl-teal)} .tl-marquee-run em{font-style:normal;font-size:clamp(2.6rem,9vw,8rem);line-height:1;color:var(--tl-teal); align-self:center;padding-inline:.1em} .tl-foot{position:relative;z-index:2;padding:clamp(34px,5vw,64px) var(--tl-gut) 22px var(--tl-padL)} .tl-foot-cols{display:grid;gap:clamp(24px,3vw,40px);border-bottom:1px solid var(--tl-line);padding-bottom:clamp(26px,3.4vw,44px)} @media(min-width:760px){.tl-foot-cols{grid-template-columns:1.4fr 1fr 1fr 1.1fr}} .tl-foot-cols>div{display:flex;flex-direction:column;gap:9px} /* h2 y no h4: un h4 colgando de un h2 rompe la jerarquia de encabezados en todas las paginas del sitio a la vez. El aspecto es el mismo; lo que cambia es lo que entiende un lector de pantalla y un rastreador. */ .tl-foot-h{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tl-t3);font-weight:500;margin:0 0 4px} .tl-foot-cols a{font-size:.92rem;color:var(--tl-t2);transition:color .22s;width:max-content} .tl-foot-cols a:hover{color:var(--tl-teal)} .tl-foot-logo{width:132px;display:block;margin-bottom:10px} .tl-foot-tag{font-size:.88rem;color:var(--tl-t3);max-width:30ch;margin:0} .tl-foot-base{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;padding-top:18px; font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-t3)} .tl-foot-base a{color:var(--tl-t3)} .tl-foot-base a:hover{color:var(--tl-teal)} .tl-foot-ok{display:flex;align-items:center;gap:7px} .tl-foot-ok i{width:5px;height:5px;border-radius:50%;background:var(--tl-teal);box-shadow:0 0 8px var(--tl-teal)} /* ============================================================ 7. SIN ANCLAJE — telefono y tableta en vertical El scroll retenido se siente pesado en tactil, y con el contenido centrado en 100svh deja huecos enormes en pantallas altas. `not all and (A) and (B)` es la negacion de la consulta entera: todo lo que NO sea ancho Y apaisado a la vez. ============================================================ */ @media not all and (min-width:900px) and (min-aspect-ratio:1/1){ #tl-verbs,#tl-method{height:auto} .tl-pin{position:static;height:auto;padding-block:clamp(48px,9vw,90px)} .tl-verb-stack,.tl-verb-glosses,.tl-phases{height:auto;min-height:0} .tl-verb,.tl-verb-gloss,.tl-phase{position:static;opacity:1;transform:none;margin-bottom:22px} } /* ============================================================ TABLETA — cuerpos de texto (v3.19.0) Casi toda la tipografia del sitio escala con `vw`, que es el ancho de ventana. Funciona en los extremos: a 390px cae al minimo del clamp, a 1600 al maximo. Entre 768 y 1200 —que es toda la franja de tabletas— el `vw` da un numero pequeno y el texto se queda pegado al minimo, que esta calculado para un telefono a 30cm de los ojos. En una tableta, mas lejos y con mas sitio, se lee chico. Aqui no se toca la escala: se suben los MINIMOS de los clamps de la franja, que es donde estaba el problema. ============================================================ */ @media(min-width:768px) and (max-width:1200px){ /* Bajadas y parrafos de seccion */ .tl-lead{font-size:clamp(1.12rem,1.9vw,1.36rem)} .tl-verb-gloss{font-size:clamp(1.12rem,2vw,1.4rem)} .tl-phase p{font-size:clamp(1.05rem,1.75vw,1.2rem)} .tl-phero-lead{font-size:clamp(1.1rem,1.8vw,1.36rem)} .tl-sec-lead{font-size:clamp(1.02rem,1.7vw,1.2rem)} .tl-prose{font-size:clamp(1.05rem,1.7vw,1.14rem)} .tl-ciclo-desc{font-size:clamp(1.02rem,1.7vw,1.16rem)} .tl-scard-t,.tl-ccard-reto{font-size:clamp(.95rem,1.55vw,1.05rem)} .tl-cta-t{font-size:clamp(1.02rem,1.7vw,1.2rem)} /* Etiquetas de apoyo: el bloque de <=1024 ya las sube a 11px; de 1025 a 1200 seguian en 9.5. Se unifica la franja entera. */ .tl-eyebrow,.tl-cell-k,.tl-ccard-ind,.tl-ccard-job, .tl-scard-n,.tl-scard-go,.tl-kpi span,.tl-figs span,.tl-foot-h, .tl-phero-meta dt,.tl-datos dt,.tl-sprints-r,.tl-node em{font-size:11.5px;letter-spacing:.12em} /* Titulares de seccion: con el anclaje desactivado en vertical, el JS deja de calcular el cuerpo del verbo y manda esta variable. De 9vw a 11vw para que en tableta el verbo quede a la par del titular del hero, como ya lo esta en escritorio: a 834 px los dos miden 92. */ .tl-verb .tl-fit{font-size:clamp(3.2rem,11vw,6rem)} .tl-phase h3{font-size:clamp(1.9rem,3.4vw,2.6rem)} } /* En tableta VERTICAL las secciones vuelven al flujo normal, asi que el respiro entre bloques lo pone el relleno del .tl-pin y no los 100svh de antes. Se acota para que no quede un hueco de pantalla entera. */ @media(min-width:768px) and (max-width:1200px) and (orientation:portrait){ .tl-pin{padding-block:clamp(44px,6vw,72px)} .tl-claim,#tl-voice{min-height:0;padding-block:clamp(54px,8vw,96px)} #tl-hero{min-height:0;padding-block:clamp(120px,15vh,170px) clamp(48px,7vh,80px)} } /* ------------------------------------------------------------ NOTA DE RENDIMIENTO — por que no hay `transition:` a secas ------------------------------------------------------------ La forma corta `transition:.3s var(--tl-ease)` equivale a `transition-property: all`. Con 27 tarjetas de servicio en pantalla, eso obliga a Chrome a vigilar TODAS las propiedades animables de cada una en cada recalculo de estilo: el desplazamiento de /servicios/ se arrastraba hasta bloquear el renderizador. Diagnostico: neutralizando solo `transition` en `.tl-scard` el problema desaparecia; con `overflow`, `border-radius` y `background` neutralizados pero la transicion intacta, seguia. Regla para este tema: toda transicion declara sus propiedades. ------------------------------------------------------------ */ /* ============================================================ 8. INTERIORES — plantillas del tema hijo El home tiene raíl vertical; las interiores, cabecera horizontal. Por eso aquí --tl-rail vuelve a 0: si no, todo el contenido queda desplazado 66px por un raíl que no existe en esta página. ============================================================ */ /* --tl-padL hay que redefinirlo, no basta con --tl-rail. `--tl-padL: calc(var(--tl-gut) + var(--tl-rail))` se resuelve en el elemento donde se DECLARA (:root, donde el rail mide 66px) y lo que hereda body es ya el resultado. Cambiar --tl-rail en body no recalcula nada: las interiores quedaban con 66px de sangrado izquierdo por un rail que no existe. */ body.tl-is-inner{--tl-rail:0px;--tl-padL:var(--tl-gut)} /* --- Fondo de las interiores ------------------------------- La retícula acompaña a la cabecera de la página y se detiene ahí. Va como `background` de un elemento EN FLUJO y acotado, no en el body ni en una capa `position:fixed` superpuesta: tapizando el lienzo entero, el mosaico se rasteriza sobre miles de píxeles de alto que nadie mira, y una capa fija obliga a repintar el viewport en cada scroll. Acotada a la cabecera cuesta una sola pasada. El patrón es un SVG en data URI y no un `radial-gradient` repetido: el SVG se rasteriza una vez y se repite como bitmap cacheado. De paso el diseño gana: una retícula detrás de cinco pantallas de texto es ruido; detrás del titular es firma. La retícula viva, la que reacciona al cursor, sigue siendo exclusiva del home. */ .tl-grid-bg{display:none} .tl-phero{ background-color:transparent; background-image: linear-gradient(180deg,rgba(48,180,190,.10),rgba(48,180,190,.035) 50%,transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23ffffff' fill-opacity='.17'/%3E%3C/svg%3E"); background-size:100% 100%,34px 34px; background-repeat:no-repeat,repeat} @media(max-width:700px){.tl-phero{background-size:100% 100%,28px 28px}} /* --- Cabecera horizontal ----------------------------------- */ /* Sin backdrop-filter a proposito. Una barra fija de ancho completo con blur del fondo re-difumina todo lo que pasa por debajo en cada fotograma de scroll; en pruebas congelaba el renderizador. Sobre un fondo casi negro el blur no se percibe, asi que se resuelve con opacidad. */ .tl-head{position:fixed;top:0;left:0;right:0;z-index:60; background:rgba(5,5,5,.92); border-bottom:1px solid var(--tl-line);transition:background-color .32s var(--tl-ease)} /* Antes esta barra tenia alto fijo (84px, y 64px al hacer scroll) y el contenido se centraba dentro. Ahora el alto lo pone el contenido mas 25px arriba y 25px abajo, que es lo que se pidio. En escritorio el elemento mas alto es el boton de CTA (42px): 25+42+25 = 92px. Por debajo de 1080px el boton se oculta y manda la hamburguesa (38px): 25+38+25 = 88px. Esos dos numeros viven en --tl-head-h, que es lo que usa .tl-stage para no meter el contenido debajo de la barra: si algun dia cambia el alto de un elemento del header, se ajusta ahi y en el padding, no en cinco sitios. Al quitar el alto fijo se pierde el encogido al hacer scroll. Era consecuencia del alto, no un efecto aparte: con padding fijo los 25px son 25px en todo momento, que es justo lo pedido. La barra sigue oscureciendo el fondo al bajar (.is-small). */ :root{--tl-head-h:92px} @media(max-width:1079px){:root{--tl-head-h:88px}} .tl-head-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px); max-width:1560px;margin:0 auto;padding:25px var(--tl-gut)} .tl-head.is-small{background:rgba(5,5,5,.97)} .tl-head-logo{flex:none;display:flex;align-items:center} .tl-head-logo img{width:clamp(104px,9vw,126px);height:auto;display:block} /* El gap baja porque ahora cada item tiene 28 px de padding propio: la pastilla ya separa visualmente, y con el gap anterior el menu se salia de la cabecera en portatiles de 1000 a 1200 px. */ .tl-head-nav{display:none;flex:1;gap:clamp(1px,.35vw,9px);align-items:center;margin-left:clamp(4px,1vw,18px)} /* 1080 y no 1000: con la pastilla del hover cada item gana relleno propio y a 1000 px el conjunto logo + menu + CTA se salia de la cabecera. Por debajo manda el boton de menu, que a esa anchura es ademas mas comodo. */ @media(min-width:1080px){.tl-head-nav{display:flex}} /* Hover: pastilla con el turquesa de marca y texto blanco. ------------------------------------------------------------ El relleno usa --tl-teal-lo (#1B7F87), no el turquesa brillante. Medido: blanco sobre #30B4BE da 2.50:1 y no pasa ningun nivel de contraste; sobre #1B7F87 da 4.74:1 y cumple AA para texto normal. Los dos son colores del libro de marca, asi que el gesto es el pedido y ademas se lee. El brillante se queda en el borde, que es decorativo y no carga el texto. El subrayado que crecia se retira: con fondo solido compiten. */ .tl-head-nav a{font-size:12.5px;letter-spacing:clamp(.06em,.12vw,.14em);text-transform:uppercase; font-weight:500;white-space:nowrap; color:var(--tl-t2);padding:9px clamp(9px,.85vw,15px);border-radius:99px;position:relative; border:1px solid transparent; transition:color .24s var(--tl-ease),background-color .24s var(--tl-ease), border-color .24s var(--tl-ease)} .tl-head-nav a:hover, .tl-head-nav a:focus-visible{ background-color:var(--tl-teal-lo); border-color:var(--tl-teal); color:var(--tl-white)} /* La pagina actual se marca con el turquesa en el texto, sin relleno: asi el hover sigue siendo distinguible cuando pasas por encima del item en el que ya estas. */ .tl-head-nav a.is-on{color:var(--tl-teal)} .tl-head-nav a.is-on:hover, .tl-head-nav a.is-on:focus-visible{color:var(--tl-white)} .tl-head-cta{display:none;flex:none;border:1px solid var(--tl-teal);color:var(--tl-teal); border-radius:99px;padding:11px 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase; font-weight:600;transition:background-color .26s var(--tl-ease),color .26s var(--tl-ease)} @media(min-width:1080px){.tl-head-cta{display:inline-block}} .tl-head-cta:hover{background:var(--tl-teal);color:#042326} .tl-head-burger{margin-left:auto;background:none;border:1px solid var(--tl-line);border-radius:2px; width:44px;height:38px;display:grid;place-content:center;gap:5px;cursor:pointer;padding:0} @media(min-width:1080px){.tl-head-burger{display:none}} .tl-head-burger span{display:block;width:18px;height:1.5px;background:var(--tl-white)} /* La cabecera es fija: el contenido necesita ese espacio arriba. */ /* +1px por el borde inferior de la barra, que tambien tapa. Sin el, la primera linea de contenido queda pegada justo debajo de la raya. */ body.tl-is-inner .tl-stage{padding-top:calc(var(--tl-head-h) + 1px)} /* --- Contenedor y secciones -------------------------------- */ .tl-wrap{max-width:1560px;margin:0 auto;width:100%} .tl-sec{padding-block:clamp(44px,6vw,88px)} .tl-sec-h{font-size:clamp(1.5rem,3.1vw,2.7rem);font-weight:500;text-transform:uppercase; letter-spacing:-.03em;line-height:1.02;margin-bottom:16px} .tl-sec-lead{font-size:clamp(1rem,1.2vw,1.18rem);color:var(--tl-t2);max-width:62ch;margin:0 0 28px} /* --- Cabecera de página ------------------------------------ */ .tl-phero{padding:clamp(38px,6vw,84px) var(--tl-gut) clamp(26px,3.4vw,44px);position:relative;z-index:1} /* Aire entre las migas, el antetitulo y el H1. Eran 14px fijos para todas las resoluciones: con un titular que llega a 4.6rem en escritorio, esos 14px no se leen como separacion sino como un renglon mas de la misma linea. Ahora escala con el titular. El espacio grande va como margen SUPERIOR del H1 y no como inferior del antetitulo, porque el antetitulo es opcional: asi las cabeceras que solo llevan migas conservan la misma separacion. */ .tl-crumbs{margin-bottom:clamp(9px,1vw,14px)} .tl-phero .tl-eyebrow--teal{margin:0} .tl-phero-h{font-size:clamp(2.1rem,5.4vw,4.6rem);font-weight:500;text-transform:uppercase; letter-spacing:-.04em;line-height:.98;margin:clamp(20px,3vw,40px) 0 0;max-width:19ch} .tl-phero-lead{font-size:clamp(1.02rem,1.45vw,1.36rem);line-height:1.5;color:var(--tl-t2); max-width:62ch;margin:20px 0 0} .tl-phero--servicio .tl-phero-h,.tl-phero--caso .tl-phero-h{max-width:16ch} .tl-phero-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,52px);margin:30px 0 0;padding:20px 0 0; border-top:1px solid var(--tl-line)} .tl-phero-meta dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-t3);margin-bottom:5px} .tl-phero-meta dd{margin:0;font-size:clamp(.92rem,1.05vw,1.05rem);font-weight:500} /* --- Migas de pan ------------------------------------------ */ .tl-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-t3)} .tl-crumbs li+li::before{content:'/';margin-right:8px;color:rgba(255,255,255,.22)} .tl-crumbs a{color:var(--tl-t3);transition:color .24s var(--tl-ease)} .tl-crumbs a:hover{color:var(--tl-teal)} .tl-crumbs [aria-current]{color:var(--tl-t2)} /* --- Prosa editable ---------------------------------------- Los textos del cuerpo los edita el cliente desde wp-admin, así que el estilo tiene que aguantar cualquier combinación de h2/p/ul que salga del editor, no sólo la que sembramos. */ .tl-prose{max-width:74ch;font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.68;color:var(--tl-t2)} /* Dos intentos fallidos antes de este: 1) `margin-inline:0` anclaba la caja al borde de la seccion, 130px por delante del titular de arriba y de la seccion de abajo. 2) Centrarla la dejaba flotando en mitad de la pagina, sin relacion con ningun otro bloque. Lo que hacia falta es separar las dos cosas: la CAJA es un .tl-wrap normal, con el mismo margen izquierdo que todo lo demas, y lo que se acota es la LINEA de texto dentro de ella. Asi el parrafo arranca justo debajo del titular y la lectura sigue siendo comoda. El tope va en rem y no en ch: `ch` se mide con la tipografia del propio elemento, asi que un h2 a 1.72rem se estiraba hasta 1250px y rompia la columna justo donde mas se nota. En rem todos los hijos cortan a la misma medida. */ .tl-wrap.tl-prose{max-width:1560px;margin-inline:auto} .tl-wrap.tl-prose>*{max-width:56rem} .tl-wrap.tl-prose--narrow>*{max-width:50rem} .tl-wrap.tl-prose>p.tl-lead{max-width:44rem} .tl-prose--narrow{max-width:66ch} .tl-prose>*+*{margin-top:1.15em} .tl-prose h2{font-size:clamp(1.25rem,2.1vw,1.72rem);font-weight:500;color:var(--tl-white); text-transform:none;letter-spacing:-.02em;line-height:1.18;margin-top:2em} .tl-prose h3{font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:600;color:var(--tl-white);margin-top:1.7em} .tl-prose p.tl-lead{font-size:clamp(1.12rem,1.7vw,1.5rem);line-height:1.45;color:var(--tl-white); max-width:none;font-weight:500;letter-spacing:-.01em} .tl-prose ul,.tl-prose ol{padding-left:0;list-style:none} .tl-prose ul li{position:relative;padding-left:26px;margin-top:.7em} .tl-prose ul li::before{content:'';position:absolute;left:4px;top:.68em;width:7px;height:1px;background:var(--tl-teal)} .tl-prose ol{counter-reset:p} .tl-prose ol li{position:relative;padding-left:34px;margin-top:.8em;counter-increment:p} .tl-prose ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.1em; font-size:11px;letter-spacing:.1em;color:var(--tl-teal);font-weight:600} .tl-prose a{color:var(--tl-teal);text-decoration:underline;text-underline-offset:3px} .tl-prose strong,.tl-prose b{color:var(--tl-white);font-weight:600} .tl-prose em{font-style:italic} /* --- Botones ----------------------------------------------- */ .tl-btn{display:inline-block;border-radius:99px;padding:14px 26px;font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;font-weight:600;border:1px solid var(--tl-line-2);color:var(--tl-white); transition:background-color .26s var(--tl-ease),border-color .26s var(--tl-ease),color .26s var(--tl-ease);text-align:center} .tl-btn:hover{border-color:var(--tl-teal);color:var(--tl-teal)} .tl-btn--solid{background:var(--tl-teal);border-color:var(--tl-teal);color:#042326} .tl-btn--solid:hover{background:var(--tl-white);border-color:var(--tl-white);color:var(--tl-ink)} /* --- Navegación de ciclos ---------------------------------- */ .tl-ciclonav{padding-block:0} .tl-ciclonav-in{display:grid;grid-template-columns:repeat(2,1fr);gap:10px; border-block:1px solid var(--tl-line);padding-block:16px} @media(min-width:760px){.tl-ciclonav-in{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,26px)}} .tl-ciclonav a{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border:1px solid transparent; border-radius:4px;transition:background-color .26s var(--tl-ease),border-color .26s var(--tl-ease)} .tl-ciclonav a:hover{border-color:var(--tl-line-2);background:rgba(255,255,255,.03)} .tl-ciclonav b{font-size:11px;letter-spacing:.14em;color:var(--tl-teal);font-weight:700;flex:none} .tl-ciclonav span{font-size:clamp(.82rem,1vw,.96rem);font-weight:500;letter-spacing:-.01em;flex:1;min-width:0} .tl-ciclonav em{font-size:10px;letter-spacing:.1em;color:var(--tl-t3);font-style:normal;flex:none} /* --- Bloque de ciclo --------------------------------------- */ .tl-ciclo-head{display:grid;gap:clamp(12px,1.6vw,26px);margin-bottom:clamp(22px,3vw,40px)} @media(min-width:860px){.tl-ciclo-head{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);align-items:start}} .tl-ciclo-n{font-size:clamp(3.4rem,9vw,7.5rem);font-weight:500;line-height:.8;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.34);display:block} .tl-ciclo-claim{font-size:clamp(1rem,1.5vw,1.3rem);color:var(--tl-teal);font-weight:500;margin:6px 0 12px;letter-spacing:-.01em} .tl-ciclo-desc{font-size:clamp(.95rem,1.1vw,1.08rem);color:var(--tl-t2);max-width:62ch;margin:0;line-height:1.6} /* --- Fichas de servicio ------------------------------------ */ .tl-scards{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:1fr} @media(min-width:620px){.tl-scards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1060px){.tl-scards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1500px){.tl-scards:not(.tl-scards--3){grid-template-columns:repeat(4,minmax(0,1fr))}} /* Sin overflow:hidden. Nada se desborda de la ficha y el recorte redondeado de 27 cajas obliga a una mascara por tarjeta. */ .tl-scard{position:relative;display:flex;flex-direction:column;gap:9px;padding:clamp(18px,1.8vw,26px); border:1px solid var(--tl-line);border-radius:6px;background:rgba(255,255,255,.015); transition:background-color .3s var(--tl-ease),border-color .3s var(--tl-ease),transform .3s var(--tl-ease)} .tl-scard:hover{border-color:rgba(48,180,190,.45);background:rgba(48,180,190,.045);transform:translateY(-2px)} .tl-scard-n{font-size:10px;letter-spacing:.22em;color:var(--tl-teal);font-weight:700} .tl-scard-h{font-size:clamp(1.02rem,1.3vw,1.24rem);font-weight:600;letter-spacing:-.02em; line-height:1.15;text-transform:none;color:var(--tl-white);margin:0} .tl-scard-t{font-size:.88rem;line-height:1.55;color:var(--tl-t2);margin:0;flex:1} .tl-scard-e{display:block;font-size:.78rem;line-height:1.45;color:var(--tl-t3); border-top:1px solid var(--tl-line);padding-top:11px;margin-top:4px} .tl-scard-e em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--tl-teal);margin-bottom:5px;font-weight:600} .tl-scard-go{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-teal); font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s var(--tl-ease),transform .3s var(--tl-ease)} .tl-scard:hover .tl-scard-go{opacity:1;transform:none} @media(hover:none){.tl-scard-go{opacity:1;transform:none}} /* --- Fichas de caso ---------------------------------------- */ .tl-ccards{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr} @media(min-width:660px){.tl-ccards{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Cuatro por fila desde 1100: los ocho casos caen en un 4x2 igual al mosaico del inicio. .tl-ccards--3 se queda en tres (relacionados). */ @media(min-width:1100px){.tl-ccards{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:1100px){.tl-ccards--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .tl-ccard{display:flex;flex-direction:column;border:1px solid var(--tl-line);border-radius:8px; overflow:hidden;background:linear-gradient(180deg,var(--tint,#141414),var(--tl-ink-2)); transition:border-color .32s var(--tl-ease),transform .32s var(--tl-ease)} .tl-ccard:hover{border-color:rgba(48,180,190,.45);transform:translateY(-3px)} /* Placa clara: respaldo para una marca sin logo tratado. Con logo monocromo manda .is-mono, justo debajo. */ .tl-ccard-plate{display:grid;place-items:center;background:var(--tl-paper);margin:12px 12px 0; border-radius:6px;aspect-ratio:4/3;padding:clamp(18px,2vw,32px);overflow:hidden} .tl-ccard-plate img{width:100%;height:100%;object-fit:contain;transition:transform .35s var(--tl-ease)} .tl-ccard:hover .tl-ccard-plate img{transform:scale(1.04)} .tl-ccard-plate.is-mono{background:none;padding:0;position:relative} .tl-ccard-plate.is-mono img{position:absolute;inset:0;width:100%;height:100%; padding:clamp(20px,2.2vw,34px);box-sizing:border-box;object-fit:contain;opacity:.6; transition:opacity .3s var(--tl-ease),transform .35s var(--tl-ease)} .tl-ccard:hover .tl-ccard-plate.is-mono img{opacity:1;transform:scale(1.04)} .tl-ccard-body{display:flex;flex-direction:column;gap:5px;padding:16px clamp(14px,1.4vw,20px) 18px} .tl-ccard-ind{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-teal);font-weight:600} .tl-ccard-h{font-size:clamp(1.05rem,1.4vw,1.32rem);font-weight:600;letter-spacing:-.025em; text-transform:uppercase;line-height:1.05;color:var(--tl-white)} .tl-ccard-job{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-t3)} .tl-ccard-reto{font-size:.86rem;line-height:1.5;color:var(--tl-t2);margin-top:5px} .tl-ccard-kpi{font-size:.8rem;color:var(--tl-t3);border-top:1px solid var(--tl-line);padding-top:10px;margin-top:8px} .tl-ccard-kpi b{color:var(--tl-teal);font-weight:700;font-size:.95rem} /* --- Filtros ----------------------------------------------- */ .tl-filtros{padding-block:0} .tl-filtros-in{display:flex;flex-wrap:wrap;gap:8px;border-block:1px solid var(--tl-line);padding-block:14px} .tl-filtros-in a,.tl-filtros-in button{font-family:inherit;background:none;cursor:pointer; border:1px solid var(--tl-line);border-radius:99px;padding:9px 17px;font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--tl-t2);transition:border-color .26s var(--tl-ease),color .26s var(--tl-ease),background-color .26s var(--tl-ease)} .tl-filtros-in a:hover,.tl-filtros-in button:hover{border-color:var(--tl-line-2);color:var(--tl-white)} .tl-filtros-in .is-on{border-color:var(--tl-teal);color:var(--tl-teal);background:rgba(48,180,190,.08)} /* --- Cifras ------------------------------------------------ */ .tl-kpis{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:1fr; border-block:1px solid var(--tl-line);padding-block:clamp(22px,3vw,38px)} @media(min-width:560px){.tl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:960px){.tl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:960px){.tl-kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}} .tl-kpi b{display:block;font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.045em; line-height:.95;color:var(--tl-white)} .tl-kpi span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--tl-teal);font-weight:600;margin-top:10px} .tl-kpi em{display:block;font-style:normal;font-size:.84rem;color:var(--tl-t3);margin-top:6px;line-height:1.45} .tl-kpis-nota{font-size:.76rem;color:var(--tl-t3);margin:14px 0 0;max-width:70ch} /* --- Pasos y sprints --------------------------------------- */ .tl-pasos,.tl-sprints,.tl-valores-list{list-style:none;margin:0;padding:0;display:grid; gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr} @media(min-width:720px){.tl-pasos,.tl-valores-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1100px){.tl-pasos{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:1100px){.tl-valores-list{grid-template-columns:repeat(3,minmax(0,1fr))}} .tl-pasos li,.tl-valores-list li{border-top:1px solid var(--tl-line);padding-top:16px} .tl-pasos-n,.tl-valores-n{display:block;font-size:11px;letter-spacing:.2em;color:var(--tl-teal); font-weight:700;margin-bottom:10px} .tl-pasos h3,.tl-pasos h4,.tl-valores-list h3{font-size:clamp(1rem,1.25vw,1.18rem);font-weight:600; text-transform:none;letter-spacing:-.02em;margin:0 0 8px;color:var(--tl-white)} .tl-pasos p,.tl-valores-list p{font-size:.88rem;line-height:1.6;color:var(--tl-t2);margin:0} .tl-pasos--compact{grid-template-columns:1fr!important;gap:14px} .tl-sprints li{display:grid;gap:6px;border-left:2px solid rgba(48,180,190,.35);padding:2px 0 18px 20px;position:relative} .tl-sprints li::before{content:'';position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%; background:var(--tl-teal);box-shadow:0 0 10px rgba(48,180,190,.6)} .tl-sprints-r{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tl-teal);font-weight:700} .tl-sprints h3{font-size:clamp(1.02rem,1.3vw,1.24rem);font-weight:600;text-transform:none; letter-spacing:-.02em;margin:0;color:var(--tl-white)} .tl-sprints p{font-size:.9rem;line-height:1.6;color:var(--tl-t2);margin:0;max-width:78ch} /* --- Servicio: dos columnas -------------------------------- */ .tl-svc-cols{display:grid;gap:clamp(24px,3.4vw,54px);grid-template-columns:1fr} @media(min-width:1000px){.tl-svc-cols{grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);align-items:start}} .tl-svc-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:104px; border:1px solid var(--tl-line);border-radius:8px;padding:clamp(20px,2vw,28px); background:rgba(255,255,255,.02)} @media(max-width:999px){.tl-svc-aside{position:static}} .tl-svc-foto{margin:0 0 4px;border-radius:6px;overflow:hidden;border:1px solid var(--tl-line)} .tl-svc-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .tl-svc-ent p,.tl-svc-kpi p{font-size:.95rem;line-height:1.55;color:var(--tl-white);margin:8px 0 0} .tl-svc-kpi p{color:var(--tl-t2);font-size:.86rem} .tl-svc-cta{width:100%} .tl-svc-ciclo{font-size:.82rem;color:var(--tl-t3);line-height:1.55;margin:0; border-top:1px solid var(--tl-line);padding-top:16px} .tl-svc-ciclo a{color:var(--tl-teal)} /* --- Caso: placa grande ------------------------------------ */ .tl-caso-plate{margin:0;background:var(--tl-paper);border-radius:10px;display:grid;place-items:center; padding:clamp(28px,5vw,80px);aspect-ratio:16/7;overflow:hidden} .tl-caso-plate img{max-width:min(100%,520px);max-height:100%;width:auto;height:auto;object-fit:contain} /* Aqui el logo no compite con nadie: es la marca del caso que se esta leyendo, sola en la pagina. Va a opacidad plena, sin atenuar. */ .tl-caso-plate.is-mono{background:none;border:1px solid var(--tl-line); padding:0;position:relative} .tl-caso-plate.is-mono img{position:absolute;inset:0;width:100%;height:100%; padding:clamp(34px,6vw,90px);box-sizing:border-box;object-fit:contain;opacity:1;max-width:none} .tl-caso-quote figure{margin:0;border-left:2px solid var(--tl-teal);padding-left:clamp(18px,2.6vw,34px);max-width:76ch} .tl-caso-quote blockquote{margin:0} .tl-caso-quote blockquote p{font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.25;font-weight:500; letter-spacing:-.025em;color:var(--tl-white);margin:0;text-wrap:balance} .tl-caso-quote figcaption{margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline} .tl-caso-quote figcaption b{font-size:.92rem;font-weight:600} .tl-caso-quote figcaption span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-t3)} /* --- Timeline de metodología ------------------------------- */ .tl-tl-rail{display:grid;grid-template-columns:1fr;gap:4px;position:relative} .tl-tl-line{display:none} .tl-tl-node{display:flex;align-items:center;gap:12px;background:none;border:0;border-top:1px solid var(--tl-line); padding:14px 4px;cursor:pointer;font-family:inherit;text-align:left;color:var(--tl-t2); transition:color .26s var(--tl-ease);width:100%} .tl-tl-node i{width:9px;height:9px;border-radius:50%;background:var(--tl-ink); border:1px solid rgba(255,255,255,.34);flex:none;transition:background-color .26s var(--tl-ease),border-color .26s var(--tl-ease),box-shadow .26s var(--tl-ease)} .tl-tl-node b{font-size:10.5px;letter-spacing:.2em;color:var(--tl-t3);font-weight:700;flex:none} .tl-tl-node span{font-size:.92rem;font-weight:500;letter-spacing:-.015em} .tl-tl-node:hover{color:var(--tl-white)} .tl-tl-node.is-on{color:var(--tl-teal)} .tl-tl-node.is-on b{color:var(--tl-teal)} .tl-tl-node.is-on i{background:var(--tl-teal);border-color:var(--tl-teal);box-shadow:0 0 0 5px rgba(48,180,190,.16)} .tl-tl-panel{padding:clamp(20px,2.6vw,34px) 0 0} .tl-tl-num{display:block;font-size:clamp(2.6rem,6vw,4.6rem);font-weight:500;line-height:.8; letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.1px rgba(255,255,255,.3);margin-bottom:14px} .tl-tl-panel h3{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:500;text-transform:uppercase; letter-spacing:-.035em;margin:0 0 14px} .tl-tl-panel p{font-size:clamp(.96rem,1.2vw,1.12rem);line-height:1.62;color:var(--tl-t2);max-width:70ch;margin:0} .tl-tl-panel .tl-phase-del{margin-top:20px;color:var(--tl-white)} @media(min-width:900px){ .tl-tl{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.9fr);gap:clamp(26px,4vw,72px);align-items:start} .tl-tl-rail{position:sticky;top:110px} .tl-tl-panel{padding-top:0} } /* --- Acordeón ---------------------------------------------- */ .tl-acc{border-top:1px solid var(--tl-line);max-width:92ch} .tl-acc-item{border-bottom:1px solid var(--tl-line)} .tl-acc-item h3{margin:0} .tl-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; background:none;border:0;cursor:pointer;font-family:inherit;color:var(--tl-white); padding:18px 2px;text-align:left;font-size:clamp(.98rem,1.25vw,1.16rem);font-weight:500; letter-spacing:-.015em;transition:color .24s var(--tl-ease)} /* min-width:0 obligatorio. Un item flex no baja de su ancho de contenido por defecto (min-width:auto), asi que la pregunta larga se salia del boton en pantallas de 360 px en vez de partirse. */ .tl-acc-btn>span{flex:1 1 auto;min-width:0} .tl-acc-btn>i{flex:0 0 auto} .tl-acc-btn:hover{color:var(--tl-teal)} .tl-acc-btn i{flex:none;width:12px;height:12px;position:relative} .tl-acc-btn i::before,.tl-acc-btn i::after{content:'';position:absolute;background:var(--tl-teal); transition:transform .3s var(--tl-ease)} .tl-acc-btn i::before{left:0;top:5.5px;width:12px;height:1px} .tl-acc-btn i::after{left:5.5px;top:0;width:1px;height:12px} .tl-acc-btn[aria-expanded="true"] i::after{transform:scaleY(0)} .tl-acc-panel{padding:0 2px 22px} .tl-acc-panel p{font-size:.95rem;line-height:1.65;color:var(--tl-t2);margin:0;max-width:78ch} /* --- Misión, visión, equipo -------------------------------- */ .tl-mv-in{display:grid;gap:clamp(20px,3vw,48px);border-block:1px solid var(--tl-line); padding-block:clamp(24px,3vw,42px)} @media(min-width:800px){.tl-mv-in{grid-template-columns:repeat(2,minmax(0,1fr))}} .tl-mv-in p{font-size:clamp(1rem,1.35vw,1.26rem);line-height:1.5;color:var(--tl-white); margin:12px 0 0;max-width:52ch;letter-spacing:-.01em} .tl-equipo-grid{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr} @media(min-width:660px){.tl-equipo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1100px){.tl-equipo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .tl-equipo-card{border:1px solid var(--tl-line);border-radius:6px;padding:clamp(18px,1.8vw,26px); background:rgba(255,255,255,.015)} .tl-equipo-card h3{font-size:clamp(1rem,1.2vw,1.16rem);font-weight:600;text-transform:none; letter-spacing:-.02em;margin:0 0 10px;color:var(--tl-teal)} .tl-equipo-card p{font-size:.88rem;line-height:1.6;color:var(--tl-t2);margin:0} /* --- Portafolio -------------------------------------------- */ .tl-piezas{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:800px){.tl-piezas{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1300px){.tl-piezas{grid-template-columns:repeat(4,minmax(0,1fr))}} .tl-pieza{margin:0;border:1px solid var(--tl-line);border-radius:6px;overflow:hidden; background:var(--tl-ink-2);transition:border-color .3s var(--tl-ease)} .tl-pieza:hover{border-color:rgba(48,180,190,.45)} .tl-pieza img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover} .tl-pieza figcaption{padding:13px 15px 16px;display:flex;flex-direction:column;gap:4px} .tl-pieza figcaption b{font-size:.92rem;font-weight:600} .tl-pieza figcaption span{font-size:.8rem;color:var(--tl-t3);line-height:1.45} /* --- Contacto ---------------------------------------------- */ .tl-contacto-cols{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr} @media(min-width:980px){.tl-contacto-cols{grid-template-columns:minmax(0,1.5fr) minmax(280px,.95fr);align-items:start}} .tl-contacto-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-teal); font-weight:600;margin:32px 0 16px} .tl-datos{margin:0;display:grid;gap:16px} .tl-datos dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-t3);margin-bottom:4px} .tl-datos dd{margin:0;font-size:1rem;font-weight:500} .tl-datos a{color:var(--tl-teal)} .tl-contacto-aside{border:1px solid var(--tl-line);border-radius:8px;padding:clamp(22px,2.4vw,32px); background:rgba(255,255,255,.02)} .tl-contacto-atajo{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--tl-line)} .tl-contacto-atajo a{color:var(--tl-teal)} /* ------------------------------------------------------------- AGENDA Reutiliza la rejilla de /contacto/ (columna ancha + aside) para que las dos paginas del embudo se lean como hermanas. ---------------------------------------------------------- */ .tl-agenda-cols{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr} @media(min-width:980px){.tl-agenda-cols{grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);align-items:start}} .tl-agenda-aside{border:1px solid var(--tl-line);border-radius:8px;padding:clamp(22px,2.4vw,32px); background:rgba(255,255,255,.02)} /* El iframe de Google trae fondo blanco propio y no se puede tematizar: no hay CSS que cruce el marco. En vez de pelear con eso se le da un marco explicito —borde, radio y recorte— para que se lea como una pieza deliberada sobre el negro y no como un agujero en la pagina. */ .tl-cal{position:relative;border:1px solid var(--tl-line);border-radius:8px;overflow:hidden; background:#fff;min-height:560px} .tl-cal iframe{display:block;width:100%;height:640px;border:0} @media(max-width:600px){.tl-cal{min-height:620px}.tl-cal iframe{height:700px}} .tl-cal-aviso{margin-top:14px} /* Estado sin configurar. Solo lo ve un administrador. */ .tl-cal--vacio{display:flex;align-items:center;background:rgba(255,255,255,.02); border-style:dashed;padding:clamp(24px,3vw,40px);min-height:0} .tl-cal-titulo{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-teal); font-weight:600;margin:0 0 16px} .tl-cal-pasos{margin:0;padding-left:0;list-style:none;counter-reset:cal;display:grid;gap:12px} .tl-cal-pasos li{position:relative;padding-left:32px;counter-increment:cal; font-size:.92rem;line-height:1.6;color:var(--tl-t2)} .tl-cal-pasos li::before{content:counter(cal,decimal-leading-zero);position:absolute;left:0;top:.15em; font-size:11px;letter-spacing:.1em;color:var(--tl-teal);font-weight:600} .tl-cal-pasos b{color:var(--tl-white);font-weight:600} .tl-cal-nota{font-size:.8rem;line-height:1.6;color:var(--tl-t3);margin:20px 0 0} .tl-cal-nota code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--tl-t2)} .tl-cal-alt{margin-top:26px} .tl-cal-alt p{font-size:.95rem;line-height:1.6;color:var(--tl-t2);margin:0 0 18px} .tl-cal-alt-btns{display:flex;flex-wrap:wrap;gap:12px} .tl-traer{margin:0;padding-left:0;list-style:none;display:grid;gap:10px} .tl-traer li{position:relative;padding-left:26px;font-size:.9rem;line-height:1.6;color:var(--tl-t2)} .tl-traer li::before{content:'';position:absolute;left:4px;top:.72em;width:7px;height:1px; background:var(--tl-teal)} /* Formulario de Elementor dentro de nuestra maqueta. Elementor trae sus propios estilos; aquí sólo se alinea al tema. */ .tl-contacto .elementor-field-group>label{font-size:10px!important;letter-spacing:.18em; text-transform:uppercase;color:var(--tl-t3)!important;font-weight:600;margin-bottom:7px} .tl-contacto .elementor-field-textual{background:rgba(255,255,255,.03)!important; border:1px solid var(--tl-line)!important;border-radius:4px!important;color:var(--tl-white)!important; font-family:var(--tl-sans)!important;font-size:.95rem!important;padding:13px 15px!important; min-height:48px;transition:border-color .24s var(--tl-ease)} .tl-contacto .elementor-field-textual:focus{border-color:var(--tl-teal)!important; box-shadow:none!important;outline:1px solid var(--tl-teal);outline-offset:1px} .tl-contacto .elementor-field-textual::placeholder{color:rgba(255,255,255,.28)!important} .tl-contacto select.elementor-field-textual{appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--tl-teal) 50%),linear-gradient(135deg,var(--tl-teal) 50%,transparent 50%)!important; background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px!important; background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:42px!important; /* La lista desplegable NO la dibuja la pagina: la pinta el sistema operativo. Heredaba el color de texto blanco del campo sobre el fondo blanco que trae el sistema por defecto, y por eso solo se leia la opcion bajo el cursor. color-scheme le dice al navegador que use su paleta oscura para ese menu, y el color explicito en las opciones cubre a los navegadores que no lo respetan. */ color-scheme:dark} .tl-contacto select.elementor-field-textual option{ background:#101113;color:#f2f2f2;padding:10px} .tl-contacto select.elementor-field-textual option:checked{ background:var(--tl-teal);color:#042326} .tl-contacto .elementor-field-type-acceptance .elementor-field-option{display:flex;gap:10px;align-items:flex-start} .tl-contacto .elementor-field-type-acceptance label{font-size:.82rem!important;letter-spacing:0!important; text-transform:none!important;color:var(--tl-t2)!important;font-weight:400!important;line-height:1.5} .tl-contacto .elementor-field-type-acceptance a{color:var(--tl-teal);text-decoration:underline} .tl-contacto .elementor-button[type="submit"]{background:var(--tl-teal)!important;color:#042326!important; border-radius:99px!important;font-family:var(--tl-sans)!important;font-size:11.5px!important; letter-spacing:.16em!important;text-transform:uppercase;font-weight:600!important;padding:16px 28px!important; border:1px solid var(--tl-teal)!important;transition:background-color .26s var(--tl-ease),border-color .26s var(--tl-ease),color .26s var(--tl-ease)} .tl-contacto .elementor-button[type="submit"]:hover{background:var(--tl-white)!important; border-color:var(--tl-white)!important;color:var(--tl-ink)!important} .tl-contacto .elementor-message{font-size:.88rem;margin-top:14px} .tl-contacto .elementor-message-success{color:var(--tl-teal)} .tl-contacto .elementor-field-required .elementor-field-label::after{color:var(--tl-teal)} /* --- Banda de cierre --------------------------------------- */ .tl-cta{border-top:1px solid var(--tl-line)} .tl-cta-in{display:grid;gap:clamp(18px,2.4vw,40px);align-items:center} @media(min-width:840px){.tl-cta-in{grid-template-columns:minmax(0,1fr) auto}} .tl-cta-h{font-size:clamp(1.6rem,3.6vw,3rem);font-weight:500;text-transform:uppercase; letter-spacing:-.035em;line-height:1;margin:0 0 12px} .tl-cta-t{font-size:clamp(.96rem,1.15vw,1.1rem);color:var(--tl-t2);margin:0;max-width:56ch;line-height:1.55} /* --- Listas, paginación, avisos ---------------------------- */ .tl-lista{display:grid;gap:0;border-top:1px solid var(--tl-line);max-width:92ch} .tl-lista-item{border-bottom:1px solid var(--tl-line)} .tl-lista-item a{display:block;padding:24px 2px;transition:padding-left .26s var(--tl-ease)} .tl-lista-item a:hover{padding-left:12px} .tl-lista-item h2{font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:500;text-transform:none; letter-spacing:-.025em;margin:0 0 8px} .tl-lista-item p{font-size:.92rem;color:var(--tl-t2);margin:0 0 10px;line-height:1.55;max-width:74ch} .tl-lista-item time{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-t3)} .tl-pager{margin-top:34px} .tl-pager .nav-links{display:flex;flex-wrap:wrap;gap:8px} .tl-pager .page-numbers{border:1px solid var(--tl-line);border-radius:99px;padding:9px 16px; font-size:11px;letter-spacing:.12em;color:var(--tl-t2);transition:border-color .26s var(--tl-ease),color .26s var(--tl-ease)} .tl-pager .page-numbers:hover{border-color:var(--tl-line-2);color:var(--tl-white)} .tl-pager .page-numbers.current{border-color:var(--tl-teal);color:var(--tl-teal)} .tl-empty{font-size:1.05rem;color:var(--tl-t2)} .tl-empty a{color:var(--tl-teal);text-decoration:underline} .tl-nota{font-size:.86rem;line-height:1.6;color:var(--tl-t3);border-left:2px solid rgba(48,180,190,.4); padding-left:16px;margin:22px 0 0;max-width:74ch} .tl-nota--wide{max-width:none;margin-bottom:28px} .tl-nota b{color:var(--tl-t2)} .tl-nota a{color:var(--tl-teal)} /* --- Entradas al scroll ------------------------------------ Solo sobre elementos PEQUENOS (fichas, items de lista), nunca sobre una seccion entera: animar la opacidad de un bloque de varias pantallas obliga a rasterizarlo aparte. Aqui cada pieza es del tamano de una tarjeta y las propiedades van declaradas. */ .tl-up{opacity:0;transform:translateY(12px); transition:opacity .5s var(--tl-ease),transform .5s var(--tl-ease)} .tl-up.tl-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.tl-up{opacity:1!important;transform:none!important}} /* --- Bandas gráficas -------------------------------------- Gráficos propios, no fotografía de stock: cada uno traduce el claim de su ciclo a una figura (el ruido que converge, el backlog priorizado, las corrientes en paralelo, el bucle que realimenta). `mask-image` hace que la banda se disuelva en el fondo en vez de terminar en un borde recto, que sobre negro casi puro se ve como un parche. Es una sola pasada sobre un elemento acotado, no sobre una capa fija: el coste es despreciable. */ .tl-ciclo-media, .tl-banda{margin:0 0 clamp(22px,3vw,40px);border-radius:8px;overflow:hidden; border:1px solid var(--tl-line);background:var(--tl-ink-2)} .tl-ciclo-media,.tl-banda{position:relative} .tl-ciclo-media img, .tl-banda img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} /* Velo inferior en vez de la mascara horizontal que tenia antes. La mascara lateral funcionaba con los graficos generados, pero con fotografia deja los bordes deshilachados y se ve como un error. Un degradado que oscurece el pie asienta la foto en la pagina y da sitio al pie de foto sin competir con el. */ .tl-ciclo-media::after, .tl-banda::after{content:'';position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(180deg,transparent,rgba(5,5,5,.72));pointer-events:none} .tl-banda figcaption{position:relative;z-index:1} .tl-banda figcaption{font-size:.82rem;color:var(--tl-t3);padding:12px 16px 14px; border-top:1px solid var(--tl-line);line-height:1.5} /* En el índice la banda va después del texto del ciclo y se recorta más baja: ahí es respiro entre bloques, no protagonista. 21:9 y no 32:9. Con 32:9 el recorte se quedaba con la franja central de una foto 16:9 y tiraba el sujeto: en la de descubrimiento dejaba sólo la mesa oscura y la banda parecía vacía. `object-position` al 42% favorece la mitad superior, que es donde están las personas. */ .tl-ciclo-media img{aspect-ratio:21/9;object-position:center 42%} @media(max-width:820px){.tl-ciclo-media img{aspect-ratio:16/9}} /* En la pagina de un servicio la banda es contexto, no portada: a 16:9 y ancho completo se comia una pantalla entera antes del texto. Se recorta mas apaisada y se le pone techo de alto. */ .tl-svc-banda{padding-block:0 clamp(20px,2.6vw,36px)} .tl-svc-banda .tl-banda img{aspect-ratio:24/9;max-height:360px;object-position:center 42%} @media(max-width:820px){.tl-svc-banda .tl-banda img{aspect-ratio:16/9;max-height:none}} /* Estuvo acotada a 940px mientras la foto de origen media 740px de ancho. La actual es de 3840px, asi que vuelve a ancho completo sin ampliar nada. */ .tl-banda--ritmo{margin-top:clamp(18px,2.4vw,32px)} .tl-banda--frentes{margin-block:clamp(18px,2.4vw,32px)} /* Historia del encuadre de esta banda: 32:11 — venia de cuando aqui habia un grafico de lineas, apaisado de por si. Con la fotografia se quedaba con una franja del centro: la cabeza cortada por arriba, el cuerpo por abajo, media pizarra fuera. 16:9 — el fotograma entero, sin recorte, pero la banda crecia a 876px de alto en escritorio y se comia la seccion. 21:9 — el punto medio, y el mismo formato de las bandas de /servicios/. Conserva el 76% del alto del fotograma y baja la banda a 668px. Con el anclaje al 40% (no al centro) entran la cabeza completa y la palabra escrita en la pizarra. */ .tl-banda--frentes img{aspect-ratio:21/9;object-position:center 40%} @media(max-width:700px){.tl-banda--frentes img{aspect-ratio:16/9}} /* ------------------------------------------------------------ RESET DE BOTONES DEL TEMA PADRE ------------------------------------------------------------ hello-biz pinta TODO