.elementor-kit-12{--e-global-color-primary:#FF5200;--e-global-color-secondary:#1D1D1D;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FF7A3A;--e-global-color-sheet2:#262626;--e-global-color-sheet3:#333333;--e-global-color-kerfdp:#D94500;--e-global-color-mill:#F3F3F3;--e-global-color-mill2:#FFFFFF;--e-global-color-mill3:#E6E6E6;--e-global-color-steel:#8A97A6;--e-global-color-steeldk:#5C6773;--e-global-color-sky:#2B6CA3;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.02em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.16em;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================ LaserForge - sistema compartido del kit Fuente: docs/design-tokens.md y docs/wp-build-spec.md del repo. Aqui SOLO va lo que el panel de Elementor no sabe expresar. Fondo, ancho, padding, radio y color van en el panel. ============================================================ */ :root{ /* superficies */ --sheet:#1D1D1D; --sheet-2:#262626; --sheet-3:#333333; --mill:#F3F3F3; --mill-2:#FFFFFF; --mill-3:#E6E6E6; /* acentos */ --kerf:#FF5200; --kerf-dp:#D94500; --heat:#FF7A3A; --cream:#FFFFFF; --steel:#8A97A6; --steel-dk:#5C6773; --sky:#2B6CA3; /* filetes */ --edge-d:rgba(250,243,230,.14); --edge-d2:rgba(250,243,230,.07); --edge-l:rgba(29,29,29,.14); --edge-l2:rgba(29,29,29,.07); /* radio: escalera con reduccion por nivel de anidamiento */ --r:8px; --r-2:6px; --r-3:4px; /* espaciado, base 8 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --fs-micro:.875rem; } @media(min-width:768px){ :root{ --fs-micro:.8125rem } } /* ---------- el gesto del titular: 700 contra 300 ---------- Va en el campo de titulo del widget heading como . */ .lt{ font-weight:300 } /* La palabra acentuada dentro de un titular: peso completo y naranja. */ .hl{ font-weight:700; color:var(--kerf) } /* ---------- BOTON ---------- TRAMPA 3: el CSS del kit carga ANTES que el de la pagina, asi que a igual especificidad pierde. Elementor emite .elementor-widget-button .elementor-button a 0-2-0; por eso aqui se ancla a la clase del widget y sube a 0-3-0. */ .elementor-widget-button.lf-btn .elementor-button{ display:inline-flex; align-items:center; justify-content:center; /* relleno vertical + 4 */ min-height:2.75rem; /* UX: objetivo tactil de 44px */ padding:var(--s3) var(--s5); background-color:var(--kerf); color:#FFFFFF; /* excepcion declarada: 3,25:1 */ border-radius:var(--r); font-weight:700; letter-spacing:-.01em; transition:background-color .16s ease, transform .16s ease; } .elementor-widget-button.lf-btn .elementor-button:hover{ background-color:var(--heat) } .elementor-widget-button.lf-btn .elementor-button:active{ transform:translateY(1px) } .elementor-widget-button.lf-btn .elementor-button:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; } /* El flex real vive en el content-wrapper: .elementor-button tiene UN solo hijo, asi que cualquier gap que se le ponga es inerte. Elementor da ahi gap:5px por defecto, que dejaba texto y pastilla pegados y el conjunto descentrado. Se sube al hueco pedido: relleno vertical (12) + 4 = 16. */ /* ---- hueco interior del boton: UNA regla para todos ---- `.elementor-button` tiene un solo hijo, asi que un gap ahi es inerte: el flex real es .elementor-button-content-wrapper, al que Elementor da gap:5px. Se sube al hueco pedido: relleno vertical (12) + 4 = 16. Especificidad 0-4-0 + !important porque el CSS del kit carga ANTES que el de cada pagina y a igualdad pierde (trampa 3 del proyecto). NO tocar aqui el orden de icono y texto: Elementor honra `icon_align:right` emitiendo flex-direction:row-reverse en el CSS de CADA PAGINA (que carga despues que este). Como el icono va primero en el DOM, ese row-reverse ya deja [texto][flecha]. Anadir `order` aqui lo invierte de vuelta, porque en row-reverse el order mas bajo se coloca a la DERECHA. Comprobado 2026-08-20. */ .elementor-widget-button.lf-btn .elementor-button .elementor-button-content-wrapper{ display:flex !important; align-items:center; justify-content:center; gap:var(--s4) !important; } /* La pastilla reutiliza el hueco de icono del propio widget, para que el cliente pueda seguir cambiando el icono desde el panel. */ .elementor-widget-button.lf-btn .elementor-button-icon{ display:grid; place-items:center; flex:none; width:1.5rem; height:1.5rem; border-radius:var(--r-2); background:var(--chip-bg,var(--mill-2)); color:var(--chip-fg,var(--kerf)); } .elementor-widget-button.lf-btn .elementor-button{ text-transform:none } .elementor-widget-button.lf-btn .elementor-button-icon svg{ fill:currentColor } .elementor-widget-button.lf-btn .elementor-button-icon svg, .elementor-widget-button.lf-btn .elementor-button-icon i{ width:13px; height:13px; font-size:13px } /* Variantes: la pastilla invierte el relleno del boton. */ .elementor-widget-button.lf-btn--dark .elementor-button{ background-color:var(--sheet); color:var(--cream) } .elementor-widget-button.lf-btn--dark .elementor-button:hover{ background-color:var(--sheet-2) } .elementor-widget-button.lf-btn--dark .elementor-button-icon{ background:var(--kerf); color:#FFFFFF } .elementor-widget-button.lf-btn--invert .elementor-button{ background-color:var(--mill-2); color:var(--sheet) } .elementor-widget-button.lf-btn--invert .elementor-button:hover{ background-color:var(--cream) } .elementor-widget-button.lf-btn--invert .elementor-button-icon{ background:var(--kerf); color:#FFFFFF } /* CTA a ancho completo: SOLO las placas de Servicios lo llevan. */ .elementor-widget-button.lf-btn--full .elementor-button{ width:100% } /* ---------- ETIQUETA / CEJILLA ---------- */ .lf-label{ font-family:'Poppins',sans-serif; font-weight:600; font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; line-height:1.5; } /* ---------- LISTA CON CHECK ---------- El widget icon-list ya coloca el icono; aqui solo se alinea y se acota. */ .elementor-widget-icon-list.lf-check .elementor-icon-list-icon{ align-self:flex-start; margin-top:.15em } .elementor-widget-icon-list.lf-check .elementor-icon-list-icon svg{ width:1rem; height:1rem } /* ---------- NUMERO GRANDE (operacion) ---------- */ .lf-num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1 } /* ---------- REGLAS DE LA CASA ---------- Cero sombras en todo el sitio: Elementor las trae por defecto en varios widgets y aqui se apagan de raiz. */ .elementor-widget .elementor-button, .elementor-widget img{ box-shadow:none } /* Movimiento reducido: la pagina se queda quieta. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ============================================================ SECCION SERVICIOS (placas tipo plan) Volcada desde /section3 el 2026-08-20. Vive en el KIT y no en la pagina porque el CSS de pagina NO viaja al copiar contenedores. Usa el vocabulario que ya estaba aqui: .lt, .lf-label, .lf-num, .lf-check y la familia .lf-btn / --invert / --full. Aqui solo va lo que es propio de estas placas. ============================================================ */ /* Cabecera de seccion. Si otra sesion define .lf-h2 o .lf-lede, hay que fundir las dos definiciones: no duplicarlas. */ .elementor-widget-heading.lf-h2 .elementor-heading-title{ font-size:clamp(1.95rem, 4vw, 3.15rem); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--sheet); max-width:20ch; text-wrap:balance; } .elementor-widget-text-editor.lf-lede{ font-size:clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height:1.55; color:var(--steel-dk); max-width:52ch; } /* La fila es REJILLA, no flex: el ancho lo da la rejilla y por eso los contenedores no llevan width en el panel. */ .lf-plans{ display:grid; grid-template-columns:1fr; gap:var(--s5) } /* trampa 7: un hijo de rejilla no baja de su min-content por defecto. */ .lf-plans > .e-con{ min-width:0; width:auto } /* SUBGRID: es lo que iguala las tarjetas. Las tres bandas -identidad, meta y la placa "Que incluye"- comparten pista de fila, asi que titulo, numero, boton y placa interior quedan a la misma altura en las tres aunque una lista tenga 4 items en vez de 3. Las media queries van DESPUES de la regla base a proposito: misma especificidad, gana la de abajo. Escribirlas encima fue la trampa 14 del proyecto y no se ve leyendo el CSS. */ @media (min-width:640px){ .lf-plans{ grid-template-columns:repeat(2,1fr); column-gap:var(--s6); row-gap:var(--s5) } .lf-plans > .lf-plan{ display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:var(--s5) } } @media (min-width:1024px){ .lf-plans{ grid-template-columns:repeat(3,1fr) } } .elementor-widget-heading.lf-plan-h3 .elementor-heading-title{ font-size:1.1875rem; font-weight:600; line-height:1.3; color:var(--sheet); } .elementor-widget-text-editor.lf-plan-desc{ font-size:.9375rem; line-height:1.65; color:var(--steel-dk); } /* El hueco que en el referente ocupa el PRECIO lo ocupa el numero de operacion, que es dato real: no hay precios ni plazos confirmados. */ .elementor-widget-text-editor.lf-plan-num p{ display:flex; align-items:baseline; gap:var(--s2); margin:0 } .lf-num-v{ font-size:clamp(2.25rem, 1.9rem + 1.4vw, 3rem); font-weight:700; color:var(--sheet) } .lf-num-u{ color:var(--steel-dk) } .lf-plan > .lf-plan-panel{ align-self:stretch } .elementor-widget-text-editor.lf-plan-panel-h p{ margin:0 } .elementor-widget-icon-list.lf-plan-list .elementor-icon-list-item{ align-items:flex-start; font-size:.9375rem; line-height:1.5; } .elementor-widget-icon-list.lf-plan-list .elementor-icon-list-text{ color:var(--sheet) } /* Placa destacada: texto BLANCO sobre naranja, por peticion expresa del cliente (2026-08-20). Mide 3,25:1. El numero 02 pasa por texto grande (>=24px); el titulo, el parrafo y la etiqueta NO cumplen AA. Tercera excepcion documentada a la regla 4 de la casa. La via que cumpliria sigue siendo oscurecer el relleno (--kerf-dp), no cambiar el texto. */ .lf-plan--hero .elementor-widget-heading.lf-plan-h3 .elementor-heading-title, .lf-plan--hero .elementor-widget-text-editor.lf-plan-desc, .lf-plan--hero .lf-num-v, .lf-plan--hero .lf-num-u{ color:#FFFFFF } /* ============================================================ PAGINAS LEGALES (aviso legal, privacidad, cookies) Sirve a las TRES paginas, asi que vive en el kit y no en cada una. Reproduce el build local tras la simplificacion del 2026-08-20: sin banda oscura y sin pestañera; el H1 abre sobre el fondo claro y la navegacion entre legales vive en la columna Legal del pie. ============================================================ */ /* Columna de lectura. El blanco a la derecha es deliberado, no una columna sin rellenar. */ .lf-doc-head, .lf-legal > .lf-doc{ max-width:72ch } .elementor-widget-heading.lf-doc-h1 .elementor-heading-title{ font-size:clamp(1.9rem, 4.5vw, 3rem); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--sheet); text-wrap:balance; } /* --steel-dk sobre --mill da 5,20:1. El --steel de las secciones oscuras aqui caeria a 2,4:1 y suspenderia. */ .elementor-widget-text-editor.lf-doc-sub{ font-size:1.0625rem; color:var(--steel-dk); max-width:60ch } .elementor-widget-text-editor.lf-doc-upd{ padding-top:var(--s4); border-top:1px solid var(--edge-l2); font-size:var(--fs-micro); color:var(--steel-dk); } .elementor-widget-text-editor.lf-doc-sub p, .elementor-widget-text-editor.lf-doc-upd p{ margin:0 } /* El espacio pertenece a lo que viene despues: el encabezado lleva mas aire arriba que abajo, asi queda pegado a su propio texto. */ .elementor-widget-heading.lf-doc-h2{ margin-top:var(--s7) } .lf-doc > .elementor-widget-heading.lf-doc-h2:first-child{ margin-top:0 } .elementor-widget-heading.lf-doc-h2 .elementor-heading-title{ font-size:1.25rem; font-weight:700; line-height:1.3; color:var(--sheet); margin-bottom:var(--s3); } .elementor-widget-text-editor.lf-doc-t{ color:var(--sheet); line-height:1.7 } .elementor-widget-text-editor.lf-doc-t p{ margin:0 0 var(--s4) } .elementor-widget-text-editor.lf-doc-t p:last-child{ margin-bottom:0 } .elementor-widget-text-editor.lf-doc-t ul, .elementor-widget-text-editor.lf-doc-t ol{ margin:0 0 var(--s4); padding-left:var(--s5) } .elementor-widget-text-editor.lf-doc-t li{ margin-bottom:var(--s2) } .elementor-widget-text-editor.lf-doc-t a{ color:var(--sheet); text-decoration:underline; text-underline-offset:2px; } .elementor-widget-text-editor.lf-doc-t a:hover{ text-decoration-thickness:2px } .elementor-widget-text-editor.lf-doc-t code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; } /* Tablas. Con border-collapse:collapse las esquinas NO redondean, asi que se usa separate + overflow hidden, y cada celda pinta solo su borde derecho e inferior para que no se dupliquen en las juntas. */ .elementor-widget-text-editor.lf-doc-t table{ width:100%; margin:0 0 var(--s5); font-size:.9375rem; border-collapse:separate; border-spacing:0; border:1px solid var(--edge-l2); border-radius:var(--r-2); overflow:hidden; } .elementor-widget-text-editor.lf-doc-t th, .elementor-widget-text-editor.lf-doc-t td{ text-align:left; vertical-align:top; padding:var(--s3); border-right:1px solid var(--edge-l2); border-bottom:1px solid var(--edge-l2); } .elementor-widget-text-editor.lf-doc-t tr > *:last-child{ border-right:0 } .elementor-widget-text-editor.lf-doc-t tr:last-child > *{ border-bottom:0 } .elementor-widget-text-editor.lf-doc-t th{ background:var(--mill); font-weight:600 } .elementor-widget-text-editor.lf-doc-t caption{ text-align:left; font-size:var(--fs-micro); color:var(--steel-dk); padding-bottom:var(--s2); } /* Una tabla ancha se desplaza DENTRO de su caja y nunca empuja la pagina. Hizo falta de verdad: la de cookies pedia 421px contra ~318 disponibles en un movil de 390. */ .elementor-widget-text-editor.lf-tbl .elementor-widget-container{ overflow-x:auto } /* ============================================================ === LF: MARQUESINA DE LOGOS (kit) Movida desde el CSS de pagina de /section2 (post 290) el 2026-08-20, al volcar la seccion a la home. Vive en el kit y no en la pagina porque ahora la usan DOS plantillas -la home y la propia pagina de taller-: regla del kit, un valor un sitio. Si se toca, se toca aqui. ============================================================ */ /* ============================================================ MARQUESINA DE LOGOS - dos filas en sentidos opuestos Desde el 2026-09-24 son los logos de 11 clientes que manda el propio cliente (PDF "24-09-26"), en silueta blanca y con el tamano optico metido en un lienzo comun de 48 px. La seccion sigue sin titular y con aria-hidden. Ver docs/06-cambios-pendientes.md. El panel pone fondo, relleno, direccion, hueco y el recorte. Aqui solo lo que el panel no sabe expresar. ============================================================ */ /* La pista mide lo que miden sus cuatro sets, no el 100% del padre. */ .lf-logos-track{ width:max-content; flex:none; animation:lf-logos 66s linear infinite; } /* TRAMPA: el hueco NO puede vivir en la pista. Si la pista lleva gap, la costura del bucle cae medio hueco desplazada y se ve saltar en cada vuelta. Cada set lleva su propio hueco a la derecha: los cuatro miden exactamente lo mismo y -25% cae justo en la costura. Cuatro sets y no dos: con dos, media pista (975px) no cubre un monitor ancho y el bucle deja un hueco vacio a la derecha. Es la misma cuenta que hacia el JS del build local al clonar sets. */ .lf-logos-set{ width:max-content; flex:none; margin-inline-end:64px; } @keyframes lf-logos{ from{ transform:translateX(0) } to{ transform:translateX(-25%) } } /* La segunda fila es la misma animacion del reves. */ .lf-logos-row--rtl .lf-logos-track{ animation-direction:reverse } /* Bordes desvanecidos: mascara, no superficie pintada. La parada opaca va en la tinta de la paleta y no en negro puro: una mascara lee el CANAL ALFA, no el color, asi que el resultado es identico y no se cuela un color fuera de paleta en la hoja. */ .lf-logos-row{ -webkit-mask-image:linear-gradient(to right,transparent,#FAF3E6 10%,#FAF3E6 90%,transparent); mask-image:linear-gradient(to right,transparent,#FAF3E6 10%,#FAF3E6 90%,transparent); } /* TRAMPA: el item flex es el WIDGET, no la . Y el contenedor le impone --container-widget-width, que aqui estorba: cada logo mide lo que mida su propio trazo. */ .lf-logos-set > .elementor-widget-image{ flex:none; width:auto; } /* Cada archivo trae ya la silueta blanca y su tamano optico dentro de un lienzo de 48 px: aqui solo se fija ese alto. brightness(0) invert(1) no cambia nada sobre blanco y protege si entra un logo a color. */ .lf-logos-set .elementor-widget-image img{ display:block; height:3rem; width:auto; filter:brightness(0) invert(1); opacity:.4; } /* Se queda quieta si el sistema pide menos movimiento. Va aqui ademas de en el kit para que la seccion siga siendo autonoma al moverla. */ @media (prefers-reduced-motion:reduce){ .lf-logos-track{ animation:none } } /* === LF: fin marquesina de logos === */ /* ============================================================ CABECERA DE SECCION SOBRE OSCURO FALLO CORREGIDO 2026-08-20: .lf-h2 y .lf-lede se subieron al kit desde la seccion de Servicios, que va sobre fondo CLARO, con color --sheet y --steel-dk. En una seccion oscura eso es #1D1D1D sobre #1D1D1D: el titulo existe en el HTML y no se ve. Afecta a toda seccion .lf-s--dark. ============================================================ */ .lf-s--dark .elementor-widget-heading.lf-h2 .elementor-heading-title{ color:var(--cream) } .lf-s--dark .elementor-widget-text-editor.lf-lede{ color:var(--steel) } .lf-s--dark .elementor-widget-heading.lf-step-h3 .elementor-heading-title{ color:var(--cream) } .lf-s--dark .elementor-widget-text-editor.lf-step-desc{ color:var(--steel) } .lf-s--dark .elementor-widget-text-editor.lf-step-num{ color:#FFFFFF } /* ============================================================ SECCIONES 4-7 VOLCADAS EN LA HOME Movido desde el CSS de cada pagina de taller el 2026-08-20: el CSS de pagina NO viaja al copiar el contenedor, solo viaja lo que esta aqui. De cada bloque se quitaron las reglas que el kit ya declaraba (los botones .lf-btn y el tamano de .lf-h2), para no dejar dos definiciones compitiendo por orden de aparicion. ============================================================ */ /* ---------- SECCION 4 - COMO FUNCIONA (de /section4) ---------- */ /* ============================================================ SECTION 4 - Como funciona ("Cuatro pasos entre tu archivo y tu pieza") OJO AL MOVER ESTA SECCION A LA HOME: este CSS vive en los ajustes de ESTA pagina, y el CSS de pagina NO viaja al copiar el contenedor. Solo viaja lo que este en el kit. Al volcar la seccion hay que llevarse este bloque a mano, o subirlo antes al kit. (WIB-Web-Kit/docs/06-wordpress-elementor.md) REPARTO PANEL / CSS En el panel: fondos, imagen de fondo, relleno, huecos, radio, borde, overflow, el circulo del nodo, y el ancho/alto/object-fit/radio de cada foto. Tambien TODOS los colores de texto, enganchados a los colores globales del kit. Si se pusieran ademas aqui, el panel mostraria un color que no se aplica, que es peor que un panel vacio. Aqui queda solo lo que el panel no sabe decir: las escalas fluidas con clamp(), la linea punteada (pseudo-elemento), la alternancia izquierda/derecha, el encuadre 16:9 y el boton. El boton es la excepcion a proposito: va entero en CSS, igual que en section3, para poder subirlo al kit de una pieza. EL CORTE DE 900px no es un breakpoint de Elementor (767 / 1024), asi que la maqueta de dos columnas no se puede expresar en el panel. Por eso el panel lleva la version APILADA -que es la que se aplica de verdad por debajo de 900- y una sola media query aqui abajo gobierna todo lo que pasa a partir de ahi. ============================================================ */ /* ---------- cabecera de seccion, variante oscura ---------- Acotada a .lf-s--dark a proposito: si algun dia este bloque y el de section3 acaban los dos en el kit, esta regla (0-4-0) gana a la clara (0-3-0) donde toca, sin tener que tocar la otra. */ /* El recurso tipografico de la marca: primera mitad en 700, segunda en 300, igual que laser/forge en el logotipo. */ /* la mitad ligera del titular la da .lt del KIT, no se redefine aqui */ .lf-s--dark .elementor-widget-text-editor.lf-lede p{ margin:0 } /* El ancla tiene que despejar la cabecera fija cuando esto viva en la home. */ .lf-s{ scroll-margin-top:6.5rem } /* ---------- ritmo de la seccion ---------- El hueco del contenedor raiz es 48 y gobierna dos saltos: cabecera->pasos y pasos->CTA. En el build local el primero sube a 64 desde 768px y el segundo se queda en 48, asi que solo la diferencia se anade aqui. */ @media (min-width:768px){ .lf-s > .lf-steps{ margin-block-start:16px } } /* ---------- los pasos: base apilada ---------- */ .lf-step{ position:relative } /* trampa 7: un hijo flexible no baja de su min-content sin min-width:0, y una cadena larga acaba provocando scroll horizontal. */ .lf-s .lf-steps .lf-step > .lf-step-body, .lf-s .lf-steps .lf-step > .lf-step-fig{ min-width:0 } /* Apilado, el numero abre el paso. En el DOM va en medio porque desde 900px ocupa la columna central, entre el texto y la imagen. */ .lf-s .lf-steps .lf-step > .lf-step-node{ flex:none; order:-1 } /* ---------- desde 900px: dos columnas alternas y la linea ---------- */ @media (min-width:900px){ .lf-s .lf-steps{ gap:96px } .lf-s .lf-steps .lf-step{ flex-direction:row; align-items:center; gap:48px } .lf-s .lf-steps .lf-step > .lf-step-body, .lf-s .lf-steps .lf-step > .lf-step-fig{ flex:1 1 0 } .lf-s .lf-steps .lf-step > .lf-step-node{ order:0 } /* Los pares invierten los lados; el nodo se queda en el centro. */ .lf-s .lf-steps .lf-step:nth-child(even) > .lf-step-body{ order:1 } .lf-s .lf-steps .lf-step:nth-child(even) > .lf-step-fig{ order:-1 } /* La linea la dibuja cada paso, no el contenedor: asi arranca en el centro del nodo 01 -nada por encima- y muere en el centro del 04. Punteada con border-dotted, no con un degradado repetido: el proyecto tiene exactamente un degradado pintado y esta en el hero. El -96px iguala el hueco entre pasos de esta misma media query: si se cambia uno hay que cambiar el otro. */ } /* ---------- el cuerpo del paso ---------- */ .elementor-widget-heading.lf-step-h3 .elementor-heading-title{ font-size:1.1875rem; font-weight:600; line-height:1.3; letter-spacing:-.01em; } .elementor-widget-text-editor.lf-step-desc{ font-size:.9375rem; line-height:1.65; max-width:46ch; } .elementor-widget-text-editor.lf-step-desc p{ margin:0 } /* ---------- el nodo ---------- El circulo, su relleno y su borde naranja van en el panel. Aqui solo la tipografia y que pase POR ENCIMA de la linea punteada. Es el punto de perforacion del antiguo carril de toolpath: el laser marcando un punto por operacion. Es tambien el unico circulo del sitio desde que el radio sustituyo al chaflan, y lo es porque es un punto, no una placa. */ .lf-step-node{ position:relative; z-index:1 } .elementor-widget-text-editor.lf-step-num{ font-family:Poppins, system-ui, sans-serif; font-size:14px; font-weight:600; line-height:1; letter-spacing:.08em; font-variant-numeric:tabular-nums; } /* El suelo de micro-tipografia del proyecto: 14px en movil, 13 desde 768. */ @media (min-width:768px){ .elementor-widget-text-editor.lf-step-num{ font-size:13px } } .elementor-widget-text-editor.lf-step-num p{ margin:0 } /* ---------- la figura: un fondo detras y un solo sujeto delante ---------- 16:9. En 1:1 la tarjeta salia altisima en PC y el recorte cuadrado se comia la foto, que es apaisada. El relleno -12px, en el panel- es minimo: la foto manda y el fondo solo asoma por el borde. El fondo decorativo va como IMAGEN DE FONDO del contenedor, no como un segundo widget de imagen: asi ningun lector de pantalla lo anuncia y no queda un alt vacio que alguien "arregle" mas adelante poniendole texto. overflow, radio, y el ancho/alto/object-fit/radio de la foto estan en el panel. Aqui solo el encuadre, que no tiene control. */ .lf-step-fig{ aspect-ratio:16 / 9 } /* El widget tiene que llenar la placa para que el alto al 100% de la imagen -que si esta en el panel- tenga contra que resolverse. */ .lf-step-fig .elementor-widget-image{ height:100% } .lf-step-fig .elementor-widget-image .elementor-widget-container{ height:100% } /* ---------- el CTA ---------- Mismo boton que en section3. Anclado a .elementor-widget-button (0-3-0) porque el CSS del kit carga ANTES y a igual especificidad ganaria el suyo (trampa 3). Aqui NO va a ancho completo: el ancho completo es exclusivo de las tres placas de Servicios, por peticion del cliente. El contenedor lleva align-items:flex-start en el panel para que un flex column no estire el boton: es el fallo que ya costo una pasada entera en el build local. */ /* Sobre oscuro el anillo va en crema: en --sheet seria invisible. Es lo mismo que hace .s--dark :focus-visible en el build local. */ /* La flecha en pastilla, un escalon de radio por debajo del boton. Naranja sobre blanco mide 3,25:1, por encima del 3:1 que WCAG pide a un grafico con significado. */ /* ============================================================ AnADIDO 2026-08-20 - la seccion se quedo a medio migrar. Al cambiar los pasos hechos a mano por el widget Timeline Bullets, el bloque de arriba se quedo apuntando a .lf-step*, que ya no existe en la pagina: es CODIGO MUERTO. No rompe nada, pero conviene retirarlo de una pasada. ============================================================ */ /* ---------- relleno de seccion ---------- El panel se quedo a 0 y la seccion salia a sangre por los cuatro lados. Va en clamp() y no en el panel porque es una escala fluida, que es justo lo que el reparto de arriba manda a CSS. 64 en movil, 128 en escritorio, como pide wp-build-spec §3. Se ancla a `.elementor-342 .elementor-element` para EMPATAR en especificidad con lo que emite el panel (0-3-0) y ganar por orden, que es la via del proyecto en vez de !important. */ .elementor-342 .elementor-element.lf-s{ padding-block:calc(var(--lf-hdr-h,0px) + clamp(4rem,4rem + 5vw,8rem)) clamp(4rem,4rem + 5vw,8rem); padding-inline:clamp(1.25rem,5vw,2.5rem); } /* SOLO BANCO DE TRABAJO. En /section4/ esta seccion es lo primero de la pagina, y la cabecera global es `fixed`: no ocupa sitio, asi que el titular le quedaba debajo. Al volcar la seccion en la home esta UNICA linea se borra -- alli va a media pagina y no hace falta. El calc() de arriba cae solo a su fallback de 0px. */ .elementor-342 .elementor-element.lf-s{ --lf-hdr-h:7.5rem } /* ---------- el carril del timeline ---------- El widget dibuja la linea pegada al margen y la une a cada nodo con una pestaña horizontal de 50px. El build local no tiene pestañas: es UNA linea continua que pasa POR el centro de los nodos. Se reproduce eso. */ .lf-timeline .ue_item_hr_line{ display:none } .lf-timeline .ue_item_vr_line{ left:27px; /* 56/2 - 2/2: el centro exacto del nodo */ z-index:0; /* la linea es absolute y el nodo estatico, asi que */ } .lf-timeline .ue_item_icon{ position:relative; z-index:1 } /* sin esto pinta encima */ /* La linea nace en el centro del primer nodo y muere en el del ultimo. Antes sobresalia 28px por arriba y 89 por abajo, colgando en el aire. TRAMPA: aqui el !important NO es un atajo. El propio widget emite `#uc_timeline_bullets_elementor_9703450 .ue_item_vr_line{height:100%}` dentro de su HTML, y eso es un .elementor-kit-12 de ID (1-1-0). Ninguna cantidad de anclaje por clase gana a un ID: o se repite el ID -- que cambia si el widget se duplica al volcarlo a la home -- o se usa !important. Solo va en `height`, que es la unica propiedad en conflicto. */ .lf-timeline .ue_item:first-child .ue_item_vr_line{ top:28px; height:calc(100% - 28px) !important; } .lf-timeline .ue_item:last-child .ue_item_vr_line{ height:28px !important } /* ============================================================ CORRECCIONES 2026-08-20 ============================================================ */ /* 1) El texto centrado respecto a su imagen. El contenedor del paso ya llevaba align-items:center, pero los hijos se estiraban por su propio ajuste del panel y el texto quedaba anclado arriba de una caja alta. Se fija el align-self de cada hijo. */ @media (min-width:900px){ .lf-s .lf-steps .lf-step > .lf-step-body, .lf-s .lf-steps .lf-step > .lf-step-fig, .lf-s .lf-steps .lf-step > .lf-step-node{ align-self:center } .lf-s .lf-steps .lf-step > .lf-step-body{ justify-content:center } } /* 3) La imagen llena su mitad y las cuatro comparten proporcion. El contenedor ya tenia aspect-ratio 16/9, pero al le faltaban height:100% y object-fit: por eso cada una salia de una altura. */ .lf-s .lf-step-fig{ width:100%; overflow:hidden } .lf-s .lf-step-fig .elementor-widget-image, .lf-s .lf-step-fig .elementor-widget-image .elementor-widget-container{ width:100%; height:100% } .lf-s .lf-step-fig .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--r-2); max-width:none; } /* Los pasos van por encima de la linea, que pasa por detras. */ .lf-s .lf-steps .lf-step{ position:relative; z-index:1 } /* 6) El boton: aire arriba y centrado respecto a la seccion. Estaba pegado a la ultima imagen y alineado a la izquierda. */ .lf-s .lf-cta-row{ margin-block-start:64px; align-items:center } .lf-s .lf-cta-row > *{ align-self:center } /* 4) LA LINEA: una sola, continua, dibujada en el CONTENEDOR. Antes iba una por paso con bottom:-96px para saltar el hueco. Dos problemas: el punteado reinicia su fase en cada elemento, asi que la cadencia de puntos se rompia en cada paso, y cualquier redondeo del hueco dejaba una interrupcion visible. Una sola linea no puede fragmentarse. */ @media (min-width:900px){ .lf-s .lf-steps{ position:relative } .lf-s .lf-steps::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:0; border-left:2px dotted var(--steel-dk); transform:translateX(-1px); z-index:0; } } /* ---------- SECCION 5 - VENTAJAS (de /section5) ---------- */ /* ============================================================ SECTION 5 - Ventajas (lista editorial de filas) Patron del referente 2, stuxen.webflow.io/home/home-v1. OJO AL MOVER ESTA SECCION A LA HOME: este CSS vive en los ajustes de ESTA pagina y NO viaja al copiar el contenedor. Solo viaja lo que este en el kit. Al volcar, subir este bloque al kit. LO QUE YA DA EL KIT y aqui NO se repite: .lf-btn entero (relleno, pastilla, foco, variantes) · .lf-h2 y .lf-lede en su version clara · .lf-label · .lt (la mitad ligera del titular) · los tokens de :root. Repetirlos aqui seria crear una segunda definicion que diverge en silencio. EN EL PANEL: fondo, relleno, bordes de fila, y ancho/alto/object-fit /radio de cada imagen. Tambien todos los colores de texto, por globales del kit. AQUI: solo la rejilla de la fila y las escalas con clamp(). ============================================================ */ /* El hueco del contenedor raiz es 48 y gobierna dos saltos: cabecera->lista y lista->CTA. En el build local el primero es 64 y el segundo 48, asi que solo la diferencia se anade aqui. */ .lf-s > .lf-rows{ margin-block-start:var(--s4) } /* ---------- la fila ---------- Es REJILLA, no flex, por la misma razon que .lf-plans en el kit: el ancho lo dan las pistas, asi que los contenedores hijos no llevan width en el panel. Y por eso los controles de direccion y hueco del panel se dejan VACIOS en .lf-row: manda esto. */ .lf-row{ display:grid; grid-template-columns:1fr; gap:var(--s4); } /* trampa 7: un hijo de rejilla no baja de su min-content por defecto. */ .lf-row > *{ min-width:0 } /* A partir de tablet la fila se abre: numero | texto | imagen. La imagen se acota a 340px, la medida del referente, para que el titular siga siendo lo mas grande de la fila. 768 SI es el corte de Elementor (movil <=767), asi que el relleno vertical de la fila si va en el panel: 32 en movil, 48 de ahi arriba. */ @media (min-width:768px){ .lf-row{ grid-template-columns:auto minmax(0,1fr) 340px; align-items:center; gap:var(--s6); } /* El numero se alinea arriba, no al centro: acompana al titular. */ .lf-row-n{ align-self:start; padding-block-start:var(--s2) } } /* ---------- el numero ---------- La voz de labels del proyecto la da .lf-label del kit; aqui solo las cifras tabulares, para que los cuatro numeros ocupen lo mismo. */ .elementor-widget-text-editor.lf-row-n{ font-variant-numeric:tabular-nums } .elementor-widget-text-editor.lf-row-n p{ margin:0 } /* ---------- el titular ---------- En VERSALES: es el gesto del referente. Poppins en versales necesita tracking POSITIVO; sin el las mayusculas se empastan. Es lo contrario que un titular normal, que va a tracking negativo. */ .elementor-widget-heading.lf-row-h3 .elementor-heading-title{ font-size:clamp(1.5rem, 1rem + 2.2vw, 2.5rem); font-weight:600; line-height:1.1; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; } .elementor-widget-text-editor.lf-row-p{ font-size:.9375rem; line-height:1.65; max-width:52ch; } .elementor-widget-text-editor.lf-row-p p{ margin:0 } /* ---------- la imagen ---------- El alto, el object-fit y el radio estan en el PANEL (198px = 12,375rem, que es el valor de escritorio). Aqui solo el clamp de movil, que el panel no sabe expresar. Por encima de 768 el clamp da 198 igualmente: 34vw solo baja de 198 por debajo de ~582px. */ @media (max-width:767px){ .lf-row-img img{ height:clamp(9rem, 34vw, 12.375rem) } } /* NO se reproduce la flecha que el referente pone en cada fila: estas son ventajas, no servicios con pagina propia. No hay adonde ir, y una flecha que no lleva a ningun sitio es peor que no tenerla. */ /* ---------- SECCION 6 - COMPARATIVA (de /section6) ---------- */ /* ============================================================ SECTION 6 - Comparativa (dos placas enfrentadas) OJO AL MOVER ESTA SECCION A LA HOME: este CSS vive en los ajustes de ESTA pagina y NO viaja al copiar el contenedor. Solo viaja lo que este en el kit. LO QUE YA DA EL KIT y aqui NO se repite: .lf-btn entero · .lf-h2 · .lt · .lf-check (alineacion y tamano del icono de lista) · los tokens de :root. EN EL PANEL: fondos -incluida la trama de la placa naranja-, relleno, radio, huecos, y los colores de icono y texto de las dos listas. AQUI: la rejilla, el filete bajo cada h3 y el tamano de las listas. ============================================================ */ /* ⚠️ AL VOLCAR: /section4 lleva esta MISMA regla en su CSS de pagina. El kit define .lf-h2 en su version CLARA (color --sheet), que es la que necesitan Servicios y Ventajas; sobre --sheet hay que invertirla. Cuando las dos secciones oscuras entren en la home, funde las dos copias en UNA sola dentro del kit. No la copies una tercera vez. */ /* El hueco del raiz es 48; en el build local la cabecera deja 64 sobre el contenido desde 768px. Solo la diferencia se anade aqui. */ @media (min-width:768px){ .lf-s > .lf-vs{ margin-block-start:var(--s4) } } /* ---------- la rejilla ---------- Es REJILLA, no flex, por la misma razon que .lf-plans y .lf-row: el ancho lo dan las pistas, asi que los hijos no llevan width en el panel, y los controles de direccion y hueco del panel se dejan VACIOS en .lf-vs. */ .lf-vs{ display:grid; grid-template-columns:1fr; gap:var(--s5); } /* trampa 7: un hijo de rejilla no baja de su min-content por defecto. */ .lf-vs > *{ min-width:0 } @media (min-width:768px){ .lf-vs{ grid-template-columns:1fr 1fr; gap:var(--s6) } /* El CTA no va centrado debajo: vive DENTRO de la rejilla, en la columna derecha y pegado a su borde, bajo la placa que gana la comparacion. La salida cierra la seccion por el mismo lado por el que acaba esa placa. */ .lf-vs > .lf-cta-row{ grid-column:2; align-items:flex-end } } /* ---------- el titular de cada columna ---------- El filete va en currentColor en el build local; aqui se declara por columna porque el panel no tiene control de borde para un heading. */ .elementor-widget-heading.lf-vs-h3 .elementor-heading-title{ font-size:1.1875rem; font-weight:600; line-height:1.3; letter-spacing:-.01em; } .elementor-widget-heading.lf-vs-h3{ padding-bottom:var(--s5); border-bottom:1px solid var(--edge-d); } /* Sobre la placa naranja el filete tiene que ser blanco translucido: el --edge-d es crema sobre oscuro y ahi no se veria. */ .lf-vs-us .elementor-widget-heading.lf-vs-h3{ border-bottom-color:rgba(255,255,255,.32); } /* ---------- las listas ---------- La alineacion y el tamano del icono los da .lf-check del kit. Aqui solo el cuerpo de texto, igual que hace .lf-plan-list con las de Servicios. */ .elementor-widget-icon-list.lf-vs-list .elementor-icon-list-item{ align-items:flex-start; font-size:.9375rem; line-height:1.5; } /* ============================================================ NOTA DE CONTRASTE - excepcion declarada, no un descuido La placa naranja lleva texto BLANCO sobre #FF5200: 3,25:1. El titulo y los items NO cumplen AA para texto normal (4,5:1). Es la misma excepcion que ya llevan la etiqueta del CTA y la tarjeta destacada de Servicios, pedida expresamente por el cliente, y esta placa la hereda a proposito: son la misma superficie de marca y tenian que leerse igual. La via que cumpliria sigue siendo oscurecer el RELLENO (--kerf-dp #D94500), nunca cambiar el color del texto. Ver docs/design-tokens.md y wp-build-spec.md §6. La columna de la izquierda si cumple: --steel sobre --sheet-2 mide 5,09:1, que es justo por lo que --sheet-2 es #262626 y no el #323232 del referente. ============================================================ */ /* ---------- SECCION 7 - TIRA DE IMAGENES (de /section7) ---------- */ /* ============================================================ TIRA DE IMAGENES - slider infinito (seccion 08b del build local) El panel pone fondo, relleno, direccion, hueco y el recorte. Aqui solo lo que el panel no sabe expresar: la mascara de los bordes, el tamano de la media y el bucle. ============================================================ */ /* La pista mide lo que miden sus tres sets, no el 100% del padre. */ .lf-strip-track{ width:max-content; flex:none; animation:lf-strip 90s linear infinite; } /* TRAMPA: el hueco NO puede vivir en la pista. Si la pista lleva gap, la costura del bucle cae medio hueco desplazada y se ve saltar cada vuelta. Cada set lleva su propio hueco a la derecha: los tres miden exactamente lo mismo y -33.3333% cae justo en la costura. */ .lf-strip-set{ width:max-content; flex:none; margin-inline-end:24px; } @keyframes lf-strip{ from{ transform:translateX(0) } to{ transform:translateX(-33.3333%) } } /* Bordes desvanecidos: mascara, no superficie pintada. El unico degradado declarado del proyecto sigue siendo el scrim del hero. La parada opaca va en la tinta de la paleta y no en negro puro: una mascara lee el CANAL ALFA, no el color, asi que el resultado es identico y no se cuela un negro puro fuera de paleta en la hoja. */ .lf-strip-row{ -webkit-mask-image:linear-gradient(to right,transparent,#FAF3E6 8%,#FAF3E6 92%,transparent); mask-image:linear-gradient(to right,transparent,#FAF3E6 8%,#FAF3E6 92%,transparent); } /* TRAMPA: el item flex es el WIDGET, no la . Medirla a ella deja el widget a ancho completo y los seis se apelotonan. */ .lf-strip-set > .elementor-widget-image{ flex:none; width:clamp(13rem,26vw,20rem); } .lf-strip-set .elementor-widget-image img{ display:block; width:100%; height:clamp(9rem,17vw,13rem); object-fit:cover; border-radius:8px; } /* Se queda quieta si el sistema pide menos movimiento. Va aqui ademas de en el kit para que la seccion siga siendo autonoma al moverla. */ @media (prefers-reduced-motion:reduce){ .lf-strip-track{ animation:none } } /* ============================================================ SECTION 8 - GALERIA ("Piezas reales, salidas de la mesa") Anatomia compartida con Sobre nosotros: panel > tarjeta > media, escalera de radios 8 > 6 > 4, y el pie DEBAJO de la foto. Antes era una banda superpuesta que tapaba parte de la imagen y era el unico sitio de la pagina con texto montado sobre una foto. EN EL PANEL: fondo, radio, relleno, direccion y hueco de la tarjeta, el overflow de la media, y todos los colores de texto por globales del kit. AQUI: solo lo que el panel no sabe expresar - la rejilla de dos columnas, el encuadre 4:3, el tinte (pseudo-elemento) y la posicion de la pildora. Por eso .lf-gal va SIN direccion ni hueco en el panel: si el CSS gobierna un control, ese control se deja vacio. .lf-chip y el tinte se reutilizan tal cual en Sobre nosotros (.pcase-chip / .pcase-tint del build local). Por eso viven en el kit desde el principio y no en una pagina. ============================================================ */ /* ---------- la rejilla ---------- 1 columna en movil, 2 desde 768, que SI es corte de Elementor. Va aqui y no en el panel porque el panel solo ofrece flex, y con flex + hueco los dos 50% desbordan la fila. */ .lf-gal{ display:grid; gap:var(--s3) } /* trampa 7: un hijo de rejilla no baja de su min-content por defecto. */ .lf-gal > *{ min-width:0 } @media (min-width:768px){ .lf-gal{ grid-template-columns:1fr 1fr } } /* ---------- el encuadre de la foto ---------- 4:3 fluido. Un alto fijo en el panel se romperia al cambiar el ancho de la columna, que es justo lo que hace la rejilla de arriba. El contenedor de Elementor ya es position:relative (--position:relative en frontend.min.css), asi que sirve de referencia a lo absoluto sin declararlo. */ .lf-gcard-media{ aspect-ratio:4 / 3 } .lf-pcase-media{ aspect-ratio:3 / 2 } .lf-media .elementor-widget-image{ position:absolute; inset:0; margin:0 } .lf-media .elementor-widget-image img{ display:block; width:100%; height:100%; object-fit:cover; } /* ---------- el tinte ---------- Color solido con alfa, NO un degradado: el recuento de degradados pintados del proyecto no se mueve. Va en ::after porque Elementor solo ocupa :before de sus contenedores, para su superposicion. */ .lf-media::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(29,29,29,.22); pointer-events:none; } /* ---------- la pildora ---------- z-index 2 para quedar por encima del tinte: un ::after se genera como ultimo hijo, asi que sin esto lo taparia. */ /* OJO: en esta instalacion NO existe .elementor-widget-container. e_optimized_markup esta activo, asi que el widget pinta su contenido directamente: 143 widgets en la home y 0 de esos envoltorios. Toda regla colgada de el es CSS muerto que no da error. Por eso la caja de la pildora va sobre el propio widget. */ .lf-media .elementor-widget-text-editor.lf-chip{ position:absolute; z-index:2; right:var(--s3); bottom:var(--s3); width:auto; padding:var(--s1) var(--s3); border-radius:999px; background:var(--sheet); color:var(--cream); font-family:'Poppins',sans-serif; font-weight:600; font-size:var(--fs-micro); line-height:1.7; letter-spacing:.16em; font-variant-numeric:tabular-nums; } .lf-chip p{ margin:0 } /* ---------- el pie ---------- Debajo de la foto. El color lo pone el panel por global steeldk: 5,77:1 sobre el blanco de la tarjeta, medido. */ .elementor-widget-text-editor.lf-gcap{ font-family:'Poppins',sans-serif; font-weight:600; font-size:var(--fs-micro); line-height:1.5; letter-spacing:.16em; text-transform:uppercase; } .lf-gcap p{ margin:0 } /* ---------- LF: fin galeria (section 8) ---------- */ /* ============================================================ LF-HOVER-LIFT - el boton se levanta 4px al pasar el raton (2026-08-20) Peticion del cliente. Revoca la fila "Elevacion al pasar: ninguna" de design-tokens.md, pero NO la regla de la casa "0 sombras": esto es un desplazamiento, no una sombra. El recuento de sombras sigue en 0. Va a TODOS los botones, asi que vive en el kit y no en una pagina: los del widget button -incluida la familia .lf-btn- y el submit del widget form, que no hereda nada de .lf-btn porque cuelga de otro widget. Trampa 3: el CSS del kit carga ANTES que el de cada pagina, pero aqui no importa: Elementor emite ahi background-color, no transform. Propiedades distintas, no compiten. Cero !important. @media (hover:hover): en tactil el :hover se queda pegado tras tocar y el boton se quedaria desplazado. Ahi no se aplica. ============================================================ */ @media (hover:hover) and (pointer:fine){ .elementor-widget-button .elementor-button, .elementor-widget-form .elementor-button{ transition:background-color .16s ease, color .16s ease, transform .16s ease; } .elementor-widget-button .elementor-button:hover, .elementor-widget-form .elementor-button:hover{ transform:translateY(-4px); } /* El pulsado sale del estado levantado, no del reposo. El kit tenia :active{translateY(1px)}: contra un hover de -4px eso son 5px de salto y se lee como un tic, no como pulsar. Mismo 0-4-0 que aquella regla y mas abajo en el archivo, asi que gana sin !important. */ .elementor-widget-button .elementor-button:active, .elementor-widget-form .elementor-button:active, .elementor-widget-button.lf-btn .elementor-button:active{ transform:translateY(-1px); } } /* Movimiento reducido: ni transicion ni desplazamiento. El bloque global de mas arriba solo anula la DURACION, asi que sin esto el salto de 4px se seguiria dando, de golpe. */ @media (prefers-reduced-motion:reduce){ .elementor-widget-button .elementor-button:hover, .elementor-widget-form .elementor-button:hover, .elementor-widget-button .elementor-button:active, .elementor-widget-form .elementor-button:active{ transform:none } } /* ============================================================ SECTION 9 - SOBRE NOSOTROS ("Somos un taller joven") Dos columnas: texto a un lado, panel de tres tarjetas al otro. Anatomia de case study del referente 3 (grovia), la misma que la galeria: panel > tarjeta > media, radios 8 > 6 > 4. Reutiliza .lf-media y .lf-chip, que ya viven en el kit desde la galeria: el tinte y la pildora son exactamente los mismos. Lo unico propio de aqui es el encuadre 3:2 y la rejilla. EN EL PANEL: fondos, radios, rellenos, huecos, la tipografia de las tarjetas y los colores por globales. El titular y la entradilla los viste el kit (.lf-h2 y .lf-lede, que ya traen su version oscura). AQUI: solo la rejilla de dos columnas, porque abre en 900 y ese NO es corte de Elementor - los suyos son 767 y 1024. ============================================================ */ /* El panel lleva la version apilada, que es la que se aplica por debajo de 900; de ahi arriba manda esta regla. Asi el panel no ensena nunca un valor que no se aplica, que es la regla de casa. */ .lf-about{ display:grid; gap:var(--s8); align-items:start; /* Punto de pegado COMPARTIDO por las dos columnas. Vivia en .lf-pcases y subio aqui el 2026-08-24, cuando el texto tambien paso a pegarse: .lf-about-txt es HERMANO de .lf-pcases, asi que no heredaba de ahi. Un valor, un sitio. La cabecera fija mide 121px con scroll (franja + barra), asi que el punto de pegado la despeja con un respiro de --s5. */ --lf-stack-top:145px; --lf-stack-step:40px; } /* trampa 7: un hijo de rejilla no baja de su min-content por defecto. */ .lf-about > *{ min-width:0 } @media (min-width:900px){ .lf-about{ grid-template-columns:1fr 1fr; gap:var(--s9) } } /* ---------- LF: fin sobre nosotros (section 9) ---------- */ /* ============================================================ SECTION 9 - APILADO DE LAS TARJETAS (stacking cards) Pedido el 2026-08-20. Las tres tarjetas de Sobre nosotros se quedan pegadas al llegar arriba y la siguiente pasa por encima. POR QUE NO EL WIDGET "Stacking Cards" DE UNLIMITED ELEMENTS: esta registrado (ucaddon_stacking_cards, 857 controles), pero su "Show Graphic Element" es de PAGO, y ese es justo el hueco de la pildora 01/02/03. Tampoco tiene tinte plano sobre la foto ni la escalera de radios 8 > 6 > 4, asi que habria que rehacer la anatomia de la tarjeta y perder la pildora. Con position:sticky no se pierde nada, no hace falta JS y - lo que mas importa - NO se toca la estructura, asi que un guardado desde el editor no se lo lleva por delante (trampa 14). Es la misma conclusion que ya se tomo con las marquesinas. OJO: el efecto muere si algun ancestro lleva overflow distinto de visible; lo avisa el propio panel del widget. Verificado en la home: la cadena entera hasta el documento va en visible. ============================================================ */ /* Las dos variables del apilado ya no viven aqui: subieron a .lf-about para que la columna de texto tambien las herede. */ .lf-pcase{ position:sticky } .lf-pcase:nth-child(1){ top:var(--lf-stack-top) } .lf-pcase:nth-child(2){ top:calc(var(--lf-stack-top) + var(--lf-stack-step)) } .lf-pcase:nth-child(3){ top:calc(var(--lf-stack-top) + var(--lf-stack-step) * 2) } /* Las tarjetas tienen que ser OPACAS para que el apilado se lea, y ya lo son: #2C2C2C sobre el panel #262626. Sin sombras ni escalado al recogerse - la regla 2 de la casa sigue viva y el escalon de 40px con el radio de 6 bastan para que se lea la pila. */ /* El apilado es maqueta pegada al scroll, no una animacion, pero solaparse mientras se lee molesta a quien pide menos movimiento. Degrada exactamente a la lista de siempre. */ /* ============================================================ SECTION 9 - LA COLUMNA DE TEXTO ACOMPANA A LAS TARJETAS Pedido por el cliente el 2026-08-24: "ese texto vaya bajando acompanando a las fotos". Las tres tarjetas ya se quedaban pegadas (bloque de arriba); el texto no, asi que se iba por el borde superior mientras la pila seguia. Con el MISMO punto de pegado que la tarjeta 01 las dos columnas viajan juntas y el titular sigue leyendose al lado de la foto que le toca. POR QUE FUNCIONA EN UNA REJILLA: .lf-about va con align-items:start, asi que el item mide su contenido pero su bloque contenedor es la CELDA, que es tan alta como la columna de tarjetas. De ahi sale el recorrido. Con align-items:stretch -el valor por defecto- el item llenaria la fila y el sticky quedaria INERTE sin que nada avisara: no cambiar ese align-items. Solo desde 900px, que es donde .lf-about abre a dos columnas. Por debajo hay una sola columna, cada item en su propia fila, y ahi el sticky no tendria contra que resolverse. OJO, NO es el sticky que se retiro de #contacto: aquel me lo habia puesto yo por iniciativa propia y desplazaba el titular 128px sin que nadie lo pidiera. Este esta pedido expresamente. No se retira sin preguntar. ============================================================ */ @media (min-width:900px){ .lf-about > .lf-about-txt{ position:sticky; top:var(--lf-stack-top) } } @media (prefers-reduced-motion:reduce){ /* Bajo movimiento reducido la seccion 9 es una lista de dos columnas y nada se pega: si las tarjetas se desapilan, el texto viajando solo al lado seria un comportamiento a medias. */ .lf-pcase, .lf-about > .lf-about-txt{ position:static } } /* ---------- LF: fin apilado (section 9) ---------- */ /* ---------- AVISO DE PROXIMA CAPACIDAD (seccion servicios) ---------- Placa sobre placa: la seccion es --mill, la nota es --mill-3, radio de 2o nivel. */ .lf-soon{ margin-top:var(--s5); padding:var(--s4) var(--s5); background:var(--mill-3); border-radius:var(--r-2); } .lf-soon p{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3) } .lf-soon .lf-soon-tag{ font-weight:700; font-size:var(--fs-micro); line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:var(--kerf); } .lf-soon .lf-soon-txt{ color:var(--sheet); line-height:1.65 } /* ============================================================ FORMULARIO DE PRESUPUESTO (.lf-form) Vale para los dos: el de la portada y el de /contacto/. Ritmo con la escala de 8 y nada fuera de ella. El panel de Elementor ya fija color, radio y separacion entre filas; aqui va solo lo que el panel no sabe expresar: relleno del campo, foco visible, control de archivo y fila de consentimiento. TRAMPA 3: el CSS del kit carga ANTES que el de la pagina, asi que a igual especificidad pierde. Por eso todo se ancla a .elementor-widget-form.lf-form, que sube a 0-3-0. ============================================================ */ /* ---------- etiqueta ---------- La separacion etiqueta-campo la emite el panel (label_spacing = 8) como padding-bottom. No se repite aqui: sumaria 16 y romperia el ritmo. */ .elementor-widget-form.lf-form .elementor-field-group > label.elementor-field-label{ display:block; } /* ---------- campos de texto ---------- Misma altura minima que el boton (44px) para que la fila de dos columnas quede alineada y el objetivo tactil se cumpla. */ .elementor-widget-form.lf-form .elementor-field-textual{ min-height:2.75rem; padding:var(--s3) var(--s4); /* 12 / 16 */ line-height:1.5; } .elementor-widget-form.lf-form textarea.elementor-field-textual{ min-height:8.5rem; padding-top:var(--s3); resize:vertical; } .elementor-widget-form.lf-form .elementor-field-textual::placeholder{ color:var(--steel); opacity:1; /* Firefox lo aclara por su cuenta */ } /* ---------- foco visible ---------- No habia ninguno: se navegaba a ciegas con el teclado. */ .elementor-widget-form.lf-form .elementor-field-textual:focus, .elementor-widget-form.lf-form .elementor-upload-field:focus, .elementor-widget-form.lf-form .elementor-acceptance-field:focus-visible{ outline:none; border-color:var(--kerf); box-shadow:0 0 0 2px rgba(255,82,0,.28); } /* ---------- control de archivo ---------- El input file crudo del navegador rompe la linea del formulario. Borde discontinuo para que se lea como zona de adjunto. */ .elementor-widget-form.lf-form .elementor-upload-field{ width:100%; min-height:2.75rem; padding:var(--s3) var(--s4); background:transparent; border:1px dashed rgba(255,255,255,.24); border-radius:var(--r-3); color:var(--steel); line-height:1.5; cursor:pointer; } .elementor-widget-form.lf-form .elementor-upload-field:hover{ border-color:var(--kerf) } .elementor-widget-form.lf-form .elementor-upload-field::file-.elementor-kit-12-button{ margin-right:var(--s4); padding:var(--s2) var(--s4); border:0; border-radius:var(--r-3); background:var(--sheet-3); color:var(--cream); font:inherit; font-weight:600; cursor:pointer; transition:background-color .15s ease, color .15s ease; } .elementor-widget-form.lf-form .elementor-upload-field::file-.elementor-kit-12-button:hover{ background:var(--kerf); color:#FFFFFF; } /* ---------- consentimiento ---------- Casilla y texto en fila, alineados por la primera linea del texto. */ .elementor-widget-form.lf-form .elementor-field-type-acceptance .elementor-field-subgroup{ margin:0; } .elementor-widget-form.lf-form .elementor-field-type-acceptance .elementor-field-option{ display:flex; align-items:flex-start; gap:var(--s3); /* 12 */ } .elementor-widget-form.lf-form .elementor-acceptance-field{ flex:0 0 auto; width:1.125rem; height:1.125rem; margin:.15rem 0 0; /* baja a la altura de la mayuscula */ accent-color:var(--kerf); cursor:pointer; } .elementor-widget-form.lf-form .elementor-field-type-acceptance label{ margin:0; line-height:1.5; color:var(--steel); cursor:pointer; } /* ---------- enlace de la politica de privacidad ---------- En reposo naranja de marca; al pasar por encima, blanco. */ .elementor-widget-form.lf-form .elementor-field-type-acceptance a{ color:var(--kerf); text-decoration:underline; text-underline-offset:2px; transition:color .15s ease; } .elementor-widget-form.lf-form .elementor-field-type-acceptance a:hover, .elementor-widget-form.lf-form .elementor-field-type-acceptance a:focus-visible{ color:#FFFFFF; } /* ---------- CTA ---------- Un paso mas de aire que entre filas: 24 de la fila + 8 = 32. */ .elementor-widget-form.lf-form .e-form__buttons{ margin-top:var(--s2); } /* ---------- mensajes ---------- */ .elementor-widget-form.lf-form .elementor-message{ margin-top:var(--s3); line-height:1.5; } /* ============================================================ LF-CAMBIOS-20260918 - cambios pedidos por el cliente (docs/cambios/Cambios LaserForge.pdf). Todo reutiliza las clases que ya existian; aqui solo va lo que la maqueta nueva necesita y el panel no sabe expresar. ============================================================ */ /* Servicios con 5 tarjetas. Desde 1024 la rejilla pasa a 6 pistas: las tres primeras ocupan 2 y las dos ultimas 3, asi la segunda fila llena el ancho sin dejar un hueco. :has() para que la regla solo actue si hay EXACTAMENTE 5 (:last-child). Con 6 tarjetas (desde el 23-sep, grabado y fresado separados) vuelve a la rejilla base de 3 columnas y da 3 + 3. */ @media (min-width:640px) and (max-width:1023px){ .lf-plans > .lf-plan:nth-child(5):last-child{ grid-column:1 / -1 } } @media (min-width:1024px){ .lf-plans:has(> .lf-plan:nth-child(5):last-child){ grid-template-columns:repeat(6,minmax(0,1fr)) } .lf-plans:has(> .lf-plan:nth-child(5):last-child) > .lf-plan{ grid-column:span 2 } .lf-plans:has(> .lf-plan:nth-child(5):last-child) > .lf-plan:nth-child(n+4){ grid-column:span 3 } } /* Tira de procesos: las 6 tecnologias en imagen, al final de Servicios. Misma anatomia que la galeria (.lf-gal > .lf-gcard), asi que solo cambia la rejilla: 2 en movil (si son impares, la ultima a lo ancho), 3 desde 768 y 6 desde 1024. Dos clases para ganar a .lf-gal. */ .lf-gal.lf-procs{ grid-template-columns:repeat(2,minmax(0,1fr)) } .lf-gal.lf-procs > :last-child:nth-child(odd){ grid-column:1 / -1 } @media (min-width:768px){ .lf-gal.lf-procs{ grid-template-columns:repeat(3,minmax(0,1fr)) } .lf-gal.lf-procs > :last-child:nth-child(odd){ grid-column:auto } } @media (min-width:1024px){ .lf-gal.lf-procs{ grid-template-columns:repeat(6,minmax(0,1fr)) } } /* Galeria con 3 proyectos: 3 columnas desde 768. */ @media (min-width:768px){ .lf-gal.lf-gal--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } } /* Sobre nosotros: cuarta tarjeta (Plegamos) en la pila, un escalon mas abajo que la tercera. */ .lf-pcase:nth-child(4){ top:calc(var(--lf-stack-top) + var(--lf-stack-step) * 3) } /* ---------- LF: fin cambios 20260918 ---------- *//* End custom CSS */