/* Theme Name: Astra Child Theme URI: https://www.smartkleaning.com.ar/ Description: Tema hijo de Astra para Smart Kleaning Argentina (smartkleaning.com.ar). Aqui vive todo el codigo propio: plantillas de landing, schema y estilos. Astra se actualiza sin pisar nada de esto. Author: Claudio Schwindt Template: astra Version: 1.0.0 Text Domain: astra-child */ /* =========================================================================== * TOKENS DEL SISTEMA (18/09/2026) * * Viven aqui, en :root, y no dentro de la landing, porque el header y el pie * tienen que consumir la misma paleta y la misma escala. Declararlos no cambia * nada por si solo: solo pinta lo que despues los usa. * * Regla: ningun px ni ningun hex suelto dentro de una regla. Si el valor que * hace falta no esta aca, la discusion es si el sistema tiene que cambiar. * ======================================================================== */ :root { /* --------------------------------------------------------------------- * MARCA. Los cuatro colores del manual nuevo que paso Santi, con su * CMYK de origen al lado. Se convierten con la formula simple * (255 x (1-tinta) x (1-negro)); el control es que el primero da * exactamente el marino que la web usaba desde siempre. * * El cambio grande es el segundo: el celeste #3fa9f5 sale de la marca y * entra un azul acero mas apagado. Toca acentos, iconos, enlaces y * botones de todo el sitio. * ------------------------------------------------------------------ */ --sk-marino: #12304f; /* C85 M59 Y33 K54 */ --sk-azul: #42808c; /* C66 M34 Y28 K24 */ --sk-azul-palido: #bde8e8; /* C26 M9 Y9 K0 */ --sk-neutro: #f2eded; /* C5 M7 Y7 K0 */ /* * COMO SE REPARTEN (Claudio, 18/09/2026). No se improvisa por seccion: * * fondo oscuro -> botones e iconos en NEUTRO * fondo claro -> los CTA en MARINO, que es el azul de la marca * fondo claro -> los iconos en AZUL; si no luce, azul palido; y si * tampoco, marino con algo de transparencia * * El azul acero es color de icono, no de boton. Ponerlo en los botones fue * el error del primer intento y es lo que se veia mal. * * Variantes: solo las que algo usa de verdad. El marino claro y el oscuro * arman el degradado de las bandas; el azul tenue es el fondo del boton de * linea al pasar el cursor. */ --sk-marino-claro: #1d4470; --sk-marino-oscuro: #0b1f34; --sk-azul-tenue: #eaf3f5; /* * El marino otra vez, pero en componentes, para poder pedirlo diluido. Un * color hexadecimal no se puede bajar de intensidad; tres cifras sueltas si. * Es el mismo #12304f: si cambia el marino, cambia aqui tambien. */ --sk-marino-rgb: 18, 48, 79; /* * El gris del INTERIOR de los campos de HubSpot. No sale de la marca: es el * de ellos, y esta aqui escrito una sola vez porque la tarjeta del * formulario lo usa para que la caja y los campos sean el mismo color y no * quede una costura entre dos grises casi iguales. Si algun dia se cambia el * estilo del formulario en HubSpot, este es el valor que hay que igualar. */ --sk-superficie-campo: #f5f8fa; /* * Grises con una pizca de azul, para que convivan con el marino en vez de * ensuciarlo. Del mas claro al mas oscuro. */ --sk-gris-50: #f6f9fc; --sk-gris-100: #eef2f7; --sk-gris-200: #e2e8f0; --sk-gris-300: #cbd5e1; --sk-gris-400: #94a3b8; --sk-gris-500: #64748b; --sk-gris-600: #475569; --sk-gris-700: #334155; --sk-gris-800: #1e293b; --sk-gris-900: #0f172a; --sk-blanco: #fff; /* --- Roles. Se usan estos, no los colores crudos. -------------------- */ --sk-fondo: var( --sk-blanco ); --sk-superficie: var( --sk-neutro ); --sk-linea: var( --sk-gris-200 ); --sk-texto-fuerte: var( --sk-gris-900 ); --sk-texto: var( --sk-gris-700 ); --sk-texto-suave: var( --sk-gris-500 ); --sk-texto-invertido: var( --sk-blanco ); /* * Estados. Cada uno lleva su version de fondo suave, para avisos y cajas. * Los tres pasan 4.5:1 sobre blanco, que es el minimo legible. */ --sk-error: #b42318; --sk-error-fondo: #fef3f2; --sk-exito: #067647; --sk-exito-fondo: #ecfdf3; --sk-aviso: #b54708; --sk-aviso-fondo: #fffaeb; /* * Estrella de valoracion. Entra al sistema el 18/09/2026 al rehacer los * testimonios de la landing: el ambar es el que usa hoy la pagina y ningun * color del sistema sirve en su lugar, porque el azul de marca se leeria * como un enlace y el marino desaparece sobre la banda oscura. */ --sk-estrella: #ffc107; /* --- Tipografia: seis roles, ningun tamano fuera de la lista. -------- */ --sk-tipo-titulos: 'Montserrat', sans-serif; --sk-tipo-cuerpo: 'Lato', sans-serif; --sk-fs-display: 42px; --sk-lh-display: 1.15; --sk-fs-titulo: 30px; --sk-lh-titulo: 1.25; --sk-fs-subtitulo: 24px; --sk-lh-subtitulo: 1.3; --sk-fs-cuerpo-lg: 18px; --sk-lh-cuerpo-lg: 1.6; --sk-fs-cuerpo: 17px; --sk-lh-cuerpo: 1.6; --sk-fs-etiqueta: 15px; --sk-lh-etiqueta: 1.4; --sk-peso-titulo: 700; --sk-peso-medio: 500; --sk-peso-cuerpo: 400; /* --- Espaciado: multiplos de 4. -------------------------------------- */ --sk-e-1: 4px; --sk-e-2: 8px; --sk-e-3: 12px; --sk-e-4: 16px; --sk-e-5: 20px; --sk-e-6: 24px; --sk-e-7: 32px; --sk-e-8: 48px; --sk-e-9: 64px; --sk-e-10: 96px; /* --- Cajas ----------------------------------------------------------- */ --sk-ancho: 1170px; /* * El formulario ya no tiene ancho propio: desde el 18/09/2026 va en dos * columnas dentro del contenedor, como en la pagina original, asi que el * token de 720px que tenia dejo de usarse y se saca para que no quede un * valor del sistema que no gobierna nada. */ --sk-ancho-lectura: 70ch; --sk-ancho-bajada: 60ch; --sk-gutter: var( --sk-e-5 ); --sk-radio: 8px; --sk-radio-boton: 4px; --sk-radio-chico: 6px; /* --- Sombras: tres niveles, no valores libres. ------------------------ */ --sk-sombra-1: 0 1px 2px rgba( 15, 23, 42, 0.06 ); --sk-sombra-2: 0 4px 12px rgba( 15, 23, 42, 0.08 ); --sk-sombra-3: 0 12px 32px rgba( 15, 23, 42, 0.12 ); /* * Velo sobre foto. Es el mismo en el hero, en las bandas oscuras del cuerpo * y en la portada de las preguntas frecuentes: sin el no hay contraste * garantizado del texto blanco sobre una foto cualquiera. */ --sk-velo: 0.82; /* * Degradado de las bandas oscuras: el marino con un brillo apenas mas * claro arriba a la izquierda. Sin el, una banda de color plano al ancho * de la ventana se ve muerta. */ --sk-degradado-oscuro: linear-gradient( 135deg, var( --sk-marino-claro ) 0%, var( --sk-marino ) 55%, var( --sk-marino-oscuro ) 100% ); /* --- Movimiento ------------------------------------------------------ */ --sk-transicion: 0.18s ease; } @media ( min-width: 768px ) { :root { --sk-fs-display: 70px; --sk-fs-titulo: 40px; --sk-fs-subtitulo: 28px; --sk-fs-cuerpo-lg: 20px; } } /* * EL MARGEN LATERAL CAMBIA POR TRAMO (18/09/2026) * * Los 20px de siempre son el margen del escritorio, donde el contenido ya esta * limitado a 1170px y el aire lo pone la pagina. En pantallas mas chicas el * contenido llega hasta el borde, y ahi 20px son pocos: en el iPad el texto * quedaba pegado al canto. El margen sube donde hace falta y no toca al * escritorio. */ @media ( max-width: 767px ) { :root { --sk-gutter: var( --sk-e-6 ); } } @media ( min-width: 768px ) and ( max-width: 1024px ) { :root { --sk-gutter: var( --sk-e-8 ); } } /* =========================================================================== * EL TEXTO SELECCIONADO * * Astra pinta la seleccion con el color de acento y la letra en negro. Con el * acento nuevo —el azul acero— eso queda oscuro sobre oscuro y no se lee. * Va el azul palido de la marca con la letra en marino, que es el mismo par * que se usa en cualquier otro fondo claro. * ======================================================================== */ /* * Con "html" delante para no depender del orden de carga: la de Astra va en * linea en el head y con la misma especificidad ganaria la ultima en llegar. */ html ::selection { background-color: var( --sk-azul-palido ); color: var( --sk-marino ); } html ::-moz-selection { background-color: var( --sk-azul-palido ); color: var( --sk-marino ); } /* =========================================================================== * LA PALETA NUEVA, EN TODO EL SITIO * * OJO: esto repinta las 55 paginas, no solo la landing. * * Todo el celeste del sitio —el boton del header, los iconos de Elementor, los * enlaces, los acentos de las 44 paginas viejas— sale de DOS variables, y las * dos estan declaradas en :root. Astra publica la suya y Elementor guarda una * copia con otro nombre. Redefinirlas aqui cambia el acento de la web entera * sin tocar ni una pagina, y volver atras es un despliegue. * * Se usa :root:root y no :root a secas para no depender del orden de carga: hoy * esta hoja va despues de las dos declaraciones, pero cualquier plugin de * cache que reordene el head lo daria vuelta. Con la clase repetida gana por * especificidad y deja de importar quien va primero. * * El valor es el azul de marca crudo, que es el del manual. Donde encima haya * texto chico —el boton del header, abajo— se usa la variante oscura, porque * el crudo se queda a medio punto del minimo legible. * ======================================================================== */ :root:root { --ast-global-color-0: var( --sk-azul ); --e-global-color-astglobalcolor0: var( --sk-azul ); /* El marino no cambia, pero se ata al token para que no queden dos fuentes. */ --ast-global-color-1: var( --sk-marino ); --e-global-color-astglobalcolor1: var( --sk-marino ); } /* =========================================================================== * LOS BOTONES DE ELEMENTOR, EN TODO EL SITIO * * Las 28 paginas heredaban el acento en sus botones, asi que quedaron en azul * acero. Segun la convencion, un CTA sobre fondo claro va en marino. * * No se puede resolver con una regla de color normal: los botones de Elementor * ya traen reglas propias por widget, con cuatro clases de especificidad, y * ganarles a todas obligaria a !important, que ademas pisaria los botones que * SI estan bien (los blancos sobre foto, que tienen el blanco escrito a mano y * no leen ninguna variable). * * La via limpia es otra: los botones de acento no traen un color, traen un * var(). Redefiniendo esa variable DENTRO del widget de boton, el valor se * resuelve ahi y no en :root. Los que tienen el color escrito a mano ni se * enteran, y los iconos —que leen la misma variable pero fuera de un widget de * boton— se quedan en acero, que es donde tienen que estar. * * Son dos familias de variables porque Astra publica la suya y Elementor * guarda una copia con otro nombre; las dos pintan estos botones. * ======================================================================== */ .elementor-widget-button { --ast-global-color-0: var( --sk-marino ); --e-global-color-astglobalcolor0: var( --sk-marino ); } /* * Las dos unicas secciones del sitio con un boton de acento sobre fondo * oscuro. Salieron de medir el fondo real detras de cada boton en las 28 * paginas, no de mirarlas a ojo: * * ce5ad7e "La vida es demasiado corta..." esta en las 14 landings * ff7330b una seccion de /sobre-nosotros/ * * Las paginas se duplicaron de una plantilla, asi que comparten el id de * Elementor y un solo selector cubre las catorce. * * Aqui el boton va en neutro, y hay que dar vuelta tambien el color del texto: * estos botones lo toman de la variable del blanco, que sobre neutro * desapareceria. */ .elementor-element-ce5ad7e .elementor-widget-button, .elementor-element-ff7330b .elementor-widget-button { --ast-global-color-0: var( --sk-neutro ); --ast-global-color-5: var( --sk-marino ); --e-global-color-astglobalcolor0: var( --sk-neutro ); --e-global-color-astglobalcolor5: var( --sk-marino ); } /* =========================================================================== * HEADER DEL SITIO * * OJO: esto NO es de la landing. El header es el mismo en todas las paginas, * asi que lo de abajo cambia el sitio entero. Pedido por Claudio el 17/09/2026 * al revisar la plantilla nueva; los defectos son del header de siempre y se * veian igual antes de este trabajo. * ======================================================================== */ /* * El boton del header no se parte en dos lineas en ningun ancho. Partirse * estira la barra entera, asi que no es un detalle del boton. */ .site-header .ast-custom-button-link { white-space: nowrap; } /* * EL FONDO VA EN EL DIV DE ADENTRO, NO EN EL ENLACE. * * Astra arma el boton como un en linea con un
de bloque adentro. Un * elemento en linea que contiene un bloque parte su caja en tres: un trozo * antes, el bloque, y un trozo despues. Al pintarle fondo al enlace, los dos * trozos vacios tambien se pintan, y aparecen dos cuadraditos sueltos arriba y * abajo del boton. Pasó el 18/09/2026. * * El header se apoya sobre el hero, que es oscuro, asi que el boton va en * neutro con letra marino: es la regla de fondo oscuro. */ .site-header .ast-custom-button-link .ast-custom-button { background-color: var( --sk-neutro ); color: var( --sk-marino ); letter-spacing: 0.04em; text-transform: uppercase; transition: background-color var( --sk-transicion ), color var( --sk-transicion ); } .site-header .ast-custom-button-link:hover .ast-custom-button, .site-header .ast-custom-button-link:focus-visible .ast-custom-button { background-color: var( --sk-blanco ); color: var( --sk-marino ); } /* * Tablet en horizontal y vertical. El iPad Pro son 1024px de ancho de pie y * 1366px acostado, asi que el tramo tiene que cubrir los dos: con el corte en * 1200px que se probo primero, el iPad acostado quedaba afuera y seguia con el * menu partido en dos filas. */ @media ( min-width: 922px ) and ( max-width: 1400px ) { /* * Solo se aprieta el espacio entre items, nunca el tamano de letra: el menu * tiene que leerse igual que siempre. Con esto entra en una fila tanto en el * iPad de pie como acostado. */ .site-header .ast-custom-button-link { padding-left: var( --sk-e-6 ); padding-right: var( --sk-e-6 ); } .ast-builder-menu .main-header-menu > .menu-item > .menu-link { padding-left: var( --sk-e-3 ); padding-right: var( --sk-e-3 ); } } /* * Movil: el logo arranca en 30px y el texto de la pagina en 20px, asi que el * logo se ve corrido a la derecha. La hamburguesa tiene el mismo problema del * otro lado. Los dos al margen real, y las esquinas del boton redondeadas. */ @media ( max-width: 921px ) { /* * Astra les pone 30px de margen propio al logo y al boton, contra los 20px * que usa el texto de la pagina: por eso quedaban corridos hacia adentro. * La barra del header ya trae 20px de padding a cada lado, asi que alcanza * con anular los dos margenes que Astra agrega encima. * * Para ganarle a las reglas en linea del personalizador sin !important hay * que usar sus mismos selectores con una clase mas. */ .site-header .ast-builder-layout-element .ast-site-identity { margin-left: 0; } /* * Y va en neutro con las rayitas en azul de marca. La cabecera es * transparente en todo el sitio y se apoya sobre la foto oscura de cada * pagina, asi que el BOTON sigue la regla de fondo oscuro —neutro— y el * dibujo, que ya esta sobre el neutro, sigue la de fondo claro: azul. Da * 3,86:1, por encima del 3:1 que pide un icono. El SVG lleva * fill="currentColor", asi que alcanza con el color del boton. */ .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle, .ast-header-break-point .main-header-bar .ast-button-wrap .menu-toggle, .site-header .ast-button-wrap .menu-toggle { background-color: var( --sk-neutro ); border-radius: var( --sk-radio-chico ); color: var( --sk-azul ); margin-right: 0; } /* * Y el dibujo, aparte. El SVG dice fill="currentColor", pero el * personalizador publica una regla en linea que le pone el relleno a mano * —un atributo y tres clases— y le gana al color del boton. Se le pasa por * encima con el mismo selector mas una clase, sin !important. Vale para las * dos: la de abrir y la de cerrar, que comparten .ast-mobile-svg. */ .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg, .ast-header-break-point .main-header-bar .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: var( --sk-azul ); } } /* =========================================================================== * PIE DEL SITIO * * El pie lo arma Elementor y no se rehace aqui: lo unico que se hace es * alinear su tipografia y sus enlaces al sistema, para que no conviva un pie * con medidas propias al lado de paginas que si lo siguen. * ======================================================================== */ .site-footer, .elementor-location-footer { font-family: var( --sk-tipo-cuerpo ); font-size: var( --sk-fs-cuerpo ); line-height: var( --sk-lh-cuerpo ); } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .elementor-location-footer h1, .elementor-location-footer h2, .elementor-location-footer h3, .elementor-location-footer h4, .elementor-location-footer h5 { font-family: var( --sk-tipo-titulos ); font-weight: var( --sk-peso-titulo ); } /* Los enlaces del pie necesitan un foco visible: es navegacion por teclado. */ .site-footer a:focus-visible, .elementor-location-footer a:focus-visible { outline: 3px solid var( --sk-azul ); outline-offset: var( --sk-e-1 ); } /* * LOS ICONOS SOCIALES SE SALIAN DE LA PANTALLA (18/09/2026) * * En tablet, la fila de iconos del pie mide mas que su columna y no parte * linea: el de LinkedIn sobresalia veintidos pixeles del ancho de la ventana y * la pagina entera —las 55, porque el pie es el mismo— se podia arrastrar de * costado. El sintoma no se veia en el pie, se veia arriba: el contenido * quedaba descentrado respecto de la ventana. * * Que la fila parta linea alcanza. No se le toca el tamano ni el orden. * * El selector no nombra al pie porque el